From 00c533bce9f6e8ae638abf2d1e5c084a735a7572 Mon Sep 17 00:00:00 2001 From: bhavanakarwade Date: Wed, 2 Aug 2023 16:19:43 +0530 Subject: [PATCH 1/3] feat: created an empty list custom component Signed-off-by: bhavanakarwade --- src/api/organization.ts | 4 +- src/components/EmptyListComponent/index.tsx | 29 +++ src/components/Resources/Schema/Schemas.tsx | 28 ++- .../organization/OrganizationsList.tsx | 49 ++--- .../organization/invitations/Invitations.tsx | 29 ++- .../invitations/ReceivedInvitations.tsx | 206 +++++++++--------- src/pages/index.astro | 9 +- src/services/apiRequests.ts | 31 +-- 8 files changed, 211 insertions(+), 174 deletions(-) create mode 100644 src/components/EmptyListComponent/index.tsx diff --git a/src/api/organization.ts b/src/api/organization.ts index 4a2dc41c8..7d86e933b 100644 --- a/src/api/organization.ts +++ b/src/api/organization.ts @@ -130,7 +130,7 @@ export const getOrgDashboard = async (orgId: string) => { } try { - return axiosGet(axiosPayload); + return await axiosGet(axiosPayload); } catch (error) { const err = error as Error @@ -235,7 +235,7 @@ export const getOrganizationUsers = async () => { } try { - return axiosGet(axiosPayload); + return await axiosGet(axiosPayload); } catch (error) { const err = error as Error diff --git a/src/components/EmptyListComponent/index.tsx b/src/components/EmptyListComponent/index.tsx new file mode 100644 index 000000000..77aa4e16a --- /dev/null +++ b/src/components/EmptyListComponent/index.tsx @@ -0,0 +1,29 @@ +import { ReactElement } from "react"; + +export const EmptyListMessage = ({ message, description, buttonContent, svgComponent, onClick } + : { + message: string, + description: string, + buttonContent?: string, + svgComponent?: ReactElement, + + onClick?: () => void, + }) => { + return ( +
+

{message}

+

{description}

+ { + buttonContent + && + } + +
+ ) +}; + diff --git a/src/components/Resources/Schema/Schemas.tsx b/src/components/Resources/Schema/Schemas.tsx index 93d91f112..b547659dc 100644 --- a/src/components/Resources/Schema/Schemas.tsx +++ b/src/components/Resources/Schema/Schemas.tsx @@ -12,6 +12,7 @@ import SearchInput from '../../SearchInput'; import { getAllSchemas } from '../../../api/Schema'; import { getFromLocalStorage } from '../../../api/Auth'; import { pathRoutes } from '../../../config/pathRoutes'; +import { EmptyListMessage } from '../../EmptyListComponent'; const SchemaList = () => { const [schemaList, setSchemaList] = useState([]) @@ -57,7 +58,9 @@ const SchemaList = () => { } }; - + const createSchema = () => { + window.location.href = `${pathRoutes.organizations.createSchema}?OrgId=${orgId}` + } useEffect(() => { getSchemaList(schemaListAPIParameter) @@ -102,9 +105,7 @@ const SchemaList = () => { @@ -153,21 +151,13 @@ const OrganizationsList = () => { setOpenModal={ props.setOpenModal } /> - { - setMessage(null) - setError(null) - }} - /> {loading ?
- : organizationsList && organizationsList?.length > 0 &&
+ : organizationsList && organizationsList?.length > 0 ? (
{ organizationsList.map((org) => ( redirectOrgDashboard(org.id)} className='transform transition duration-500 hover:scale-105 hover:bg-gray-50 cursor-pointer'> @@ -210,7 +200,14 @@ const OrganizationsList = () => { )) } -
+
) : ( + + }/>) }
diff --git a/src/components/organization/invitations/Invitations.tsx b/src/components/organization/invitations/Invitations.tsx index df7996e80..f71e22bb6 100644 --- a/src/components/organization/invitations/Invitations.tsx +++ b/src/components/organization/invitations/Invitations.tsx @@ -13,6 +13,7 @@ import { TextTittlecase } from '../../../utils/TextTransform'; import { apiStatusCodes } from '../../../config/CommonConstant'; import { getOrganizationInvitations } from '../../../api/invitations'; import { getOrganizations } from '../../../api/organization'; +import { EmptyListMessage } from '../../EmptyListComponent'; const initialPageState = { pageNumber: 1, @@ -47,6 +48,8 @@ const Invitations = () => { const response = await getOrganizationInvitations(currentPage.pageNumber, currentPage.pageSize, searchText); const { data } = response as AxiosResponse + setLoading(false) + if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) { const totalPages = data?.data?.totalPages; @@ -61,11 +64,7 @@ const Invitations = () => { ...currentPage, total: totalPages }) - } else { - setError(response as string) - } - - setLoading(false) + } } //This useEffect is called when the searchText changes @@ -124,21 +123,13 @@ const Invitations = () => { props.setOpenModal } /> - { - setMessage(null) - setError(null) - }} - /> {loading ?
- : invitationsList && invitationsList?.length > 0 &&
0 ? (
@@ -227,7 +218,15 @@ const Invitations = () => { }
-
+
) : ( + + } + />) }
diff --git a/src/components/organization/invitations/ReceivedInvitations.tsx b/src/components/organization/invitations/ReceivedInvitations.tsx index c920e09db..2d3b40539 100644 --- a/src/components/organization/invitations/ReceivedInvitations.tsx +++ b/src/components/organization/invitations/ReceivedInvitations.tsx @@ -15,6 +15,7 @@ import { TextTittlecase } from '../../../utils/TextTransform'; import { apiStatusCodes } from '../../../config/CommonConstant'; import { getOrganizations } from '../../../api/organization'; import { pathRoutes } from '../../../config/pathRoutes'; +import { EmptyListMessage } from '../../EmptyListComponent'; const initialPageState = { pageNumber: 1, @@ -62,8 +63,6 @@ const ReceivedInvitations = () => { ...currentPage, total: totalPages }) - } else { - setError(response as string) } setLoading(false) @@ -99,7 +98,7 @@ const ReceivedInvitations = () => { if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) { setMessage(data?.message) setLoading(false) - window.location.href=pathRoutes.organizations.root + window.location.href = pathRoutes.organizations.root } else { setError(response as string) setLoading(false) @@ -121,9 +120,12 @@ const ReceivedInvitations = () => { className="p-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800" >
- + {invitationsList && invitationsList?.length > 0 ? + + : + null}
{ props.setOpenModal } /> - { - setMessage(null) - setError(null) - }} - /> {loading ?
- : invitationsList && invitationsList?.length > 0 &&
0 ? (
-
-
    - { - invitationsList.map((invitation) => ( - -
  • -
    -
    -
    - - - - - - - - - - - - - - -
    -
    -

    - {invitation.organisation.name} -

    - -
    -
      -
    • -
      -
      - Roles: - {invitation.orgRoles && - invitation.orgRoles.length > 0 && - invitation.orgRoles.map((role: OrgRole, index: number) => { - return ( - - {role.name.charAt(0).toUpperCase() + role.name.slice(1)} - - ); - })} -
      + > +
      +
        + { + invitationsList.map((invitation) => ( + +
      • +
        +
        +
        + + + + + + + + + + + + + + +
        +
        +

        + {invitation.organisation.name} +

        + +
        +
          +
        • +
          +
          + Roles: + {invitation.orgRoles && + invitation.orgRoles.length > 0 && + invitation.orgRoles.map((role: OrgRole, index: number) => { + return ( + + {role.name.charAt(0).toUpperCase() + role.name.slice(1)} + + ); + })} +
          -
          -
          • -
        +
        +
        • +
      -
      - {/*

      + {/*

      Received On: {invitation.createDateTime.split('T')[0]}

      */} -
      -
    +
    -
    -
    -
    - - +
    -
    +
    +
    + + +
    -
    -
    • - )) - } -
-
- -
+
+ + + )) + } + +
+ +
) : () }
diff --git a/src/pages/index.astro b/src/pages/index.astro index 045f6d57f..e646a3a46 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -27,9 +27,14 @@ import { pathRoutes } from '../config/pathRoutes.js'; >
+ + + Sign in
See our repository
--> -   -   + +
diff --git a/src/components/organization/OrganizationsList.tsx b/src/components/organization/OrganizationsList.tsx index 89ef31716..fe76c3866 100644 --- a/src/components/organization/OrganizationsList.tsx +++ b/src/components/organization/OrganizationsList.tsx @@ -199,15 +199,15 @@ const OrganizationsList = () => { )) } - -
) : () + : organizationsList && ( - - }/>) + + } />) }
diff --git a/src/components/organization/invitations/Invitations.tsx b/src/components/organization/invitations/Invitations.tsx index f71e22bb6..62acdce1e 100644 --- a/src/components/organization/invitations/Invitations.tsx +++ b/src/components/organization/invitations/Invitations.tsx @@ -64,7 +64,7 @@ const Invitations = () => { ...currentPage, total: totalPages }) - } + } } //This useEffect is called when the searchText changes @@ -95,151 +95,152 @@ const Invitations = () => { } - return ( -
-
-
- +
+
+ + +
+ + setMessage(data)} + setOpenModal={ + props.setOpenModal + } /> + + {loading + ?
+ -
- - setMessage(data)} - setOpenModal={ - props.setOpenModal - } /> - - {loading - ?
- -
- : invitationsList && invitationsList?.length > 0 ? (
-
-
    - { - invitationsList.map((invitation) => ( - -
  • -
    -
    -
    - - - -
    -
    -

    - {invitation.email} -

    - -
    -
      -
    • -
      -
      - Roles: - {invitation.orgRoles && - invitation.orgRoles.length > 0 && - invitation.orgRoles.map((role: OrgRole, index: number) => { - return ( - - {role.name.charAt(0).toUpperCase() + role.name.slice(1)} - - ); - })} -
      - + : invitationsList && invitationsList?.length > 0 ? (
      +
      +
        + { + invitationsList.map((invitation) => ( + +
      • +
        +
        +
        + + + +
        +
        +

        + {invitation.email} +

        + +
        +
          +
        • +
          +
          + Roles: + {invitation.orgRoles && + invitation.orgRoles.length > 0 && + invitation.orgRoles.map((role: OrgRole, index: number) => { + return ( + + {role.name.charAt(0).toUpperCase() + role.name.slice(1)} + + ); + })}
          -
          • -
        -
        + +
        +
        • +
      +
      - - { - invitation.status === 'pending' + + { + invitation.status === 'pending' + ? + {TextTittlecase(invitation.status)} + + : invitation.status === 'accepted' ? {TextTittlecase(invitation.status)} - : invitation.status === 'accepted' - ? - {TextTittlecase(invitation.status)} - - : - - {TextTittlecase(invitation.status)} - - - } - - - -

      - Invited On: {invitation.createDateTime.split('T')[0]} -

      - -
    -
    • - )) - } -
-
-
) : ( - - } - />) - } - -
- - -
+ : + + {TextTittlecase(invitation.status)} + + + } + + + +

+ Invited On: {invitation.createDateTime.split('T')[0]} +

+ +
+ + )) + } + +
+
) + : invitationsList && ( + + } + />) + } + +
+ +
- +
+ ) } diff --git a/src/components/organization/invitations/ReceivedInvitations.tsx b/src/components/organization/invitations/ReceivedInvitations.tsx index 2d3b40539..890081147 100644 --- a/src/components/organization/invitations/ReceivedInvitations.tsx +++ b/src/components/organization/invitations/ReceivedInvitations.tsx @@ -248,7 +248,8 @@ const ReceivedInvitations = () => { - ) : () + : invitationsList && () } From 7f80c48b02a0923f613ced62ed9f0965093e723d Mon Sep 17 00:00:00 2001 From: bhavanakarwade Date: Wed, 2 Aug 2023 17:53:10 +0530 Subject: [PATCH 3/3] fixed: added alert component Signed-off-by: bhavanakarwade --- package-lock.json | 21 +++++++++++++++++++ .../organization/OrganizationsList.tsx | 18 ++++++++++++---- .../organization/invitations/Invitations.tsx | 16 +++++++++++--- .../invitations/ReceivedInvitations.tsx | 17 ++++++++++++--- 4 files changed, 62 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 125748ecc..c0beb5d39 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,6 +35,7 @@ "react-dom": "^18.2.0", "react-icons": "^4.10.1", "react-toastify": "^9.1.3", + "secure-random-password": "^0.2.3", "shiki": "^0.14.1", "socket.io-client": "^4.6.2", "tailwind-scrollbar": "^3.0.4", @@ -44,6 +45,7 @@ "devDependencies": { "@types/crypto-js": "^4.1.1", "@types/eslint": "^8.21.1", + "@types/secure-random-password": "^0.2.1", "@typescript-eslint/eslint-plugin": "^5.54.1", "@typescript-eslint/parser": "^5.54.1", "astro-eslint-parser": "^0.11.0", @@ -1626,6 +1628,12 @@ "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" }, + "node_modules/@types/secure-random-password": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@types/secure-random-password/-/secure-random-password-0.2.1.tgz", + "integrity": "sha512-tpG5oVF+NpIS9UJ9ttXAokafyhE/MCZBg65D345qu3gOM4YoJ/mFNVzUDUNBfb1hIi598bNOzvY04BbfS7VKwA==", + "dev": true + }, "node_modules/@types/semver": { "version": "7.5.0", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.0.tgz", @@ -11048,6 +11056,19 @@ "node": ">=4" } }, + "node_modules/secure-random": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/secure-random/-/secure-random-1.1.2.tgz", + "integrity": "sha512-H2bdSKERKdBV1SwoqYm6C0y+9EA94v6SUBOWO8kDndc4NoUih7Dv6Tsgma7zO1lv27wIvjlD0ZpMQk7um5dheQ==" + }, + "node_modules/secure-random-password": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/secure-random-password/-/secure-random-password-0.2.3.tgz", + "integrity": "sha512-2zpmr6pK3CZGIS9fgApFw00/tKEBVbJTqe4AZLrLNgahCK6ueIR5uMzvbERNibr8hkWneMcOqDcm4wpHWUxrYw==", + "dependencies": { + "secure-random": "^1.1.2" + } + }, "node_modules/semver": { "version": "7.5.3", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz", diff --git a/src/components/organization/OrganizationsList.tsx b/src/components/organization/OrganizationsList.tsx index fe76c3866..9845cce07 100644 --- a/src/components/organization/OrganizationsList.tsx +++ b/src/components/organization/OrganizationsList.tsx @@ -61,16 +61,16 @@ const OrganizationsList = () => { return userOrg; }) - if (orgList.length === 0) { - setError('No Data Found') - } - setOrganizationList(orgList) setCurrentPage({ ...currentPage, total: totalPages }) } + else{ + setError(response as string) + + } setLoading(false) } @@ -151,6 +151,16 @@ const OrganizationsList = () => { setOpenModal={ props.setOpenModal } /> + + { + setMessage(null) + setError(null) + }} + /> + {loading ?
{ const invitationList = data?.data?.invitations - if (invitationList.length === 0) { - setError('No Data Found') - } setInvitationsList(invitationList) setCurrentPage({ ...currentPage, total: totalPages }) } + else { + setError(response as string) + + } } //This useEffect is called when the searchText changes @@ -123,6 +124,15 @@ const Invitations = () => { props.setOpenModal } /> + { + setMessage(null) + setError(null) + }} + /> + {loading ?
{ const totalPages = data?.data?.totalPages; const invitationList = data?.data?.invitations - if (invitationList.length === 0) { - setError('No Data Found') - } + setInvitationsList(invitationList) setCurrentPage({ ...currentPage, total: totalPages }) } + else { + setError(response as string) + } setLoading(false) } @@ -135,6 +136,16 @@ const ReceivedInvitations = () => { props.setOpenModal } /> + { + setMessage(null) + setError(null) + }} + /> + + {loading ?