fix: explore organizations details (#381)

* worked on the fix of explore organizations Signed-off-by: Nishad <[email protected]> * trial for the explore org fix Signed-off-by: Nishad <[email protected]> * displayed org profile Signed-off-by: Nishad <[email protected]> * displayed org data Signed-off-by: Nishad <[email protected]> * trial for API call in ssr Signed-off-by: Nishad <[email protected]> * Included headers in the fetch api call Signed-off-by: Nishad <[email protected]> * Created a public organizations and fetched API Signed-off-by: Nishad <[email protected]> * fixed the explore organizations issue Signed-off-by: Nishad <[email protected]> * resolved the comments on the PR Signed-off-by: Nishad <[email protected]> --------- Signed-off-by: Nishad <[email protected]>
credebl · Oct 23, 2023 · ab89e50 · ab89e50
1 parent 61a7e6a
commit ab89e50
Show file tree

Hide file tree

Showing 11 changed files with 378 additions and 221 deletions.
diff --git a/src/api/organization.ts b/src/api/organization.ts
@@ -328,3 +328,27 @@ export const getPublicOrganizations = async (pageNumber: number, pageSize: numbe
 	}
 }
 
+export const getPublicOrgDetails = async (orgSlug: string) => {
+
+	const url = `${apiRoutes.Public.organizationDetails}/${orgSlug}`
+
+	const config = {
+			headers: {
+					'Content-Type': 'application/json',
+			}
+	}
+	const axiosPayload = {
+			url,
+			config
+	}
+
+	try {
+			return await axiosPublicOrganisationGet(axiosPayload);
+	}
+	catch (error) {
+			const err = error as Error
+			return err?.message
+	}
+}
+
+
diff --git a/src/components/organization/PublicOrganizationDetails.tsx b/src/components/organization/PublicOrganizationDetails.tsx
@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from "react"
+import type { AxiosResponse } from 'axios';
+import { getPublicOrgDetails } from '../../api/organization'
+import { apiStatusCodes } from "../../config/CommonConstant";
+import ProfilesDesign from "../publicProfile/ProfilesDesign";
+import OrgWalletDetails from "../publicProfile/OrgWalletDetails";
+import OrgUserInfo from "../publicProfile/OrgUserInfo";
+import { AlertComponent } from "../AlertComponent";
+import CustomSpinner from "../CustomSpinner";
+import { OrgInterface } from "./interfaces";
+import { Roles } from "../../utils/enums/roles";
+
+
+const PublicOrganizationDetails = ({ orgSlug }: { orgSlug: string }) => {
+
+    const [orgData, setOrgData] = useState<OrgInterface | null>(null);
+    const [orgUsersData, setOrgUsersData] = useState<object | null>(null);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const getOrganizationData = async () => {
+        setLoading(true);
+        const response = await getPublicOrgDetails(orgSlug);
+
+        const { data } = response as AxiosResponse
+
+        if (data?.statusCode === apiStatusCodes?.API_STATUS_SUCCESS) {
+
+            setOrgData(data?.data);
+
+            const orgUsersFilterByRole = data?.data?.userOrgRoles?.filter(
+                (users: { orgRole: { name: string }; }) => {
+                    return users?.orgRole.name === Roles.OWNER
+                },
+            );
+
+            const usersData = orgUsersFilterByRole?.map(
+                (users: { user: { firstName: string } }) => {
+                    return users?.user;
+                },
+            );
+
+            setOrgUsersData(usersData);
+        } else {
+            setError(response as string);
+        }
+        setLoading(false);
+    };
+
+    useEffect(() => {
+
+        getOrganizationData()
+
+    }, [])
+
+
+    return (
+        <div>
+            {(error) && (
+                <AlertComponent
+                    message={error}
+                    type={'failure'}
+                    onAlertClose={() => {
+                        setError(null);
+                    }}
+                />
+            )}
+            {
+                loading ? <div className="flex items-center justify-center mb-4 ">
+                    <CustomSpinner />
+                </div>
+                    : <div className="grid grid-cols-1 lg:grid-cols-4 gap-2 p-2 bg-gray-100">
+                        <div className="col-span-1 border">
+                            {
+                                orgData && <ProfilesDesign orgData={orgData} />
+                            }
+
+                        </div>
+                        <div className="col-span-3 grid grid-rows-2 gap-4 bg-gray-100">
+                            <OrgWalletDetails orgData={orgData} />
+                            <div className="p-2 rounded bg-white">
+                                <h1 className="font-bold text-2xl p-2">Users</h1>
+                                <OrgUserInfo orgUsersData={orgUsersData} />
+                            </div>
+                        </div>
+                    </div>
+            }
+
+        </div>
+    );
+}
+
+
+export default PublicOrganizationDetails
diff --git a/src/components/organization/interfaces/index.ts b/src/components/organization/interfaces/index.ts
@@ -113,3 +113,38 @@ export interface Connection {
     membersCount: number
     endorsementsCount: number
   }
+
+
+export interface OrgInterface {
+    name: string;
+    website: string;
+    logoUrl: string;
+    description: string;
+}
+
+export interface OrgDataInterface {
+    orgData: OrgInterface
+}
+
+export interface OrgWalletDetailsObject {
+	orgDid:string
+	ledgers:{
+		name:string
+	  networkType:string
+	}
+	networkType:string
+	walletName:string
+	createDateTime:string
+}
+
+export interface UserDetails {
+    profileImg: string;
+    lastName: string;
+    firstName: string;
+    email: string;
+    publicProfile: boolean;
+    id: number;
+    username: string;
+}
+
+
diff --git a/src/components/publicProfile/OrgUserInfo.tsx b/src/components/publicProfile/OrgUserInfo.tsx
@@ -0,0 +1,64 @@
+import React from "react"
+import CustomAvatar from "../../components/Avatar"
+import { UserDetails } from "../organization/interfaces";
+
+
+const OrgUserInfo = ({orgUsersData}) => {
+
+    return (
+        <>
+            {orgUsersData &&
+                <div className="grid lg:grid-cols-2 sm:grid-cols-1 gap-2 rounded">
+                    <div
+                        className="px-6 py-4 col-span-1 bg-gradient-to-r from-white via-white to-gray-50 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-gray-300 dark:focus:ring-gray-800 shadow-lg shadow-gray-500/50 dark:shadow-lg dark:shadow-gray-800/80 rounded-lg"
+                    >
+                        {
+                            orgUsersData &&
+                            orgUsersData?.map((orgUser: UserDetails) => {
+                                return (
+                                    <>
+                                        <div className=" flex items-center">
+                                            {orgUser.firstName &&
+
+                                                <><span>
+                                                    {orgUser?.profileImg ? (
+                                                        <CustomAvatar className="mb-2 rounded-full shadow-lg" size="30" src={orgUser?.profileImg}/>
+                                                    ) : (
+                                                        <CustomAvatar className="mb-2 rounded-full shadow-lg" size="30" name={orgUser?.firstName}/>
+                                                    )}
+                                                </span><div className="font-bold text-xl pl-2 mb-2">
+                                                        {orgUser.firstName} {orgUser.lastName}
+                                                    </div></>
+                                            }
+                                        </div>
+
+                                        <div className="flex items-center">
+                                            {orgUser.email &&
+                                                <><svg
+                                                    className="w-6 h-6 text-gray-800 dark:text-white m-1"
+                                                    aria-hidden="true"
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    fill="none"
+                                                    viewBox="0 0 20 16"
+                                                >
+                                                    <path
+                                                        stroke="currentColor"
+                                                        stroke-linecap="round"
+                                                        stroke-linejoin="round"
+                                                        stroke-width="2"
+                                                        d="m19 2-8.4 7.05a1 1 0 0 1-1.2 0L1 2m18 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1m18 0v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2" />
+                                                </svg><p className="text-gray-700 text-xl mb-1.5 pl-2">{orgUser.email}</p></>
+                                            }
+                                        </div>
+                                    </>
+                                );
+                            })
+                        }
+                    </div>
+                </div>}
+        </>
+    )
+
+}
+
+export default OrgUserInfo
diff --git a/src/components/publicProfile/OrgUserInfoLayout.astro b/src/components/publicProfile/OrgUserInfoLayout.astro