236 add state to save user and org details

app/[locale]/dashboard/[entityType]/[entitySlug]/layout.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { notFound, useParams } from 'next/navigation';
 import { SidebarNavItem } from '@/types';
 import { useQuery } from '@tanstack/react-query';
+import { create } from 'zustand';
 
 import { GraphQL } from '@/lib/api';
 import { cn } from '@/lib/utils';
@@ -12,6 +13,7 @@ import { DashboardNav } from '../../components/dashboard-nav';
 import { MobileDashboardNav } from '../../components/mobile-dashboard-nav';
 import styles from '../../components/styles.module.scss';
 import { getOrgDetailsQryDoc } from './schema';
+import { useDashboardStore } from '@/config/store';
 
 interface DashboardLayoutProps {
   children?: React.ReactNode;
@@ -20,16 +22,24 @@ interface DashboardLayoutProps {
 export default function OrgDashboardLayout({ children }: DashboardLayoutProps) {
   const [isOpened, setIsOpened] = React.useState(false);
   const params = useParams<{ entityType: string; entitySlug: string }>();
+  const { setEntityDetails, entityDetails, userDetails } = useDashboardStore();
 
   const EntityDetailsQryRes: { data: any; isLoading: boolean; error: any } =
     useQuery([`entity_details_${params.entityType}`], () =>
       GraphQL(
         params.entityType === 'organization' && getOrgDetailsQryDoc,
         {},
-        {  slug: params.entitySlug  }
+        { slug: params.entitySlug }
       )
     );
 
+  useEffect(() => {
+    if (EntityDetailsQryRes.data) {
+      setEntityDetails(EntityDetailsQryRes.data);
+    }
+  }, [EntityDetailsQryRes.data]);
+
+
   if (
     process.env.NEXT_PUBLIC_DATASPACE_FEATURE_ENABLED !== 'true' &&
     params.entityType === 'dataspace'
@@ -100,9 +110,10 @@ export default function OrgDashboardLayout({ children }: DashboardLayoutProps) {
           items={orgSidebarNav}
           entityDetails={
             params.entityType === 'organization'
-              ? EntityDetailsQryRes.data?.organizations[0]
-              : params.entitySlug.toLocaleLowerCase()
+              ? entityDetails?.organizations[0]
+              : userDetails?.me
           }
+          type={params.entityType}
         />
 
         <div className="z-1 basis-2 md:hidden">

app/[locale]/dashboard/[entityType]/[entitySlug]/profile/orgProfile.tsx

@@ -1,33 +1,15 @@
-import React, { useEffect } from 'react';
-import { useParams } from 'next/navigation';
 import { graphql } from '@/gql';
 import {
   ApiOrganizationOrganizationTypesEnum,
   OrganizationInputPartial,
 } from '@/gql/generated/graphql';
 import { useOrganizationTypes } from '@/hooks/useOrganizationTypes';
-import { useMutation, useQuery } from '@tanstack/react-query';
-import { Button, DropZone, Select, Text, TextField, toast } from 'opub-ui';
-
 import { GraphQL } from '@/lib/api';
-
-const OrgDetails: any = graphql(`
-  query orgDetails($slug: String) {
-    organizations(slug: $slug) {
-      id
-      name
-      logo {
-        name
-        path
-      }
-      homepage
-      organizationTypes
-      contactEmail
-      description
-      slug
-    }
-  }
-`);
+import { useMutation } from '@tanstack/react-query';
+import { useParams, useRouter } from 'next/navigation';
+import { Button, DropZone, Select, Text, TextField, toast } from 'opub-ui';
+import React, { useEffect } from 'react';
+import { useDashboardStore } from '@/config/store';
 
 const organizationUpdateMutation: any = graphql(`
   mutation updateOrganization($input: OrganizationInputPartial!) {
@@ -52,31 +34,25 @@ const organizationUpdateMutation: any = graphql(`
 `);
 
 const OrgProfile = () => {
-  const params = useParams<{ entitySlug: string }>();
+  const params = useParams<{ entitySlug: string; entityType: string }>();
+  const router = useRouter();
+  const { setEntityDetails, entityDetails } = useDashboardStore();
 
-  const orgDetails: any = useQuery([`org_details_${params.entitySlug}`], () =>
-    GraphQL(
-      OrgDetails,
-      {},
-      {
-        slug: params.entitySlug,
-      }
-    )
-  );
   const { organizationTypes } = useOrganizationTypes();
+
   useEffect(() => {
-    if (orgDetails.data) {
+    if (entityDetails && entityDetails.organizations) {
       setFormData({
-        name: orgDetails.data?.organizations[0].name,
-        contactEmail: orgDetails.data?.organizations[0].contactEmail,
-        organizationTypes: orgDetails.data?.organizations[0].organizationTypes,
-        homepage: orgDetails.data?.organizations[0].homepage,
-        description: orgDetails.data?.organizations[0].description,
-        logo: orgDetails.data?.organizations[0].logo,
-        id: orgDetails.data?.organizations[0].id,
+        name: entityDetails?.organizations[0].name,
+        contactEmail: entityDetails?.organizations[0].contactEmail,
+        organizationTypes: entityDetails?.organizations[0].organizationTypes,
+        homepage: entityDetails?.organizations[0].homepage,
+        description: entityDetails?.organizations[0].description,
+        logo: entityDetails?.organizations[0].logo,
+        id: entityDetails?.organizations[0].id,
       });
     }
-  }, [orgDetails.data]);
+  }, [entityDetails?.organizations]);
 
   const initialFormData = {
     name: '',
@@ -105,12 +81,20 @@ const OrgProfile = () => {
           logo: res?.updateOrganization?.logo,
           id: res?.updateOrganization?.id,
         });
+        setEntityDetails({
+          organizations: [formData],
+        });
+        if (res?.updateOrganization?.slug && res.updateOrganization.slug !== params.entitySlug) {
+          const newPath = `/dashboard/${params.entityType}/${res.updateOrganization.slug}/profile`;
+          router.replace(newPath);
+        }
       },
       onError: (error: any) => {
         toast(`Error: ${error.message}`);
       },
     }
   );
+
   const handleSave = () => {
     // Create mutation input with only changed fields
     const inputData: OrganizationInputPartial = {
@@ -128,7 +112,11 @@ const OrgProfile = () => {
     }
 
     mutate({ input: inputData });
+
+
   };
+
+
   return (
     <div>
       <div>
@@ -214,4 +202,4 @@ const OrgProfile = () => {
   );
 };
 
-export default OrgProfile;
+export default OrgProfile;

app/[locale]/dashboard/[entityType]/[entitySlug]/profile/userProfile.tsx

@@ -4,37 +4,11 @@ import React, { useEffect } from 'react';
 import { useParams } from 'next/navigation';
 import { graphql } from '@/gql';
 import { UpdateUserInput } from '@/gql/generated/graphql';
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import { Button, DropZone, Text, TextField, toast } from 'opub-ui';
 
 import { GraphQL } from '@/lib/api';
-
-const UserDetails: any = graphql(`
-  query userDetails {
-    me {
-      bio
-      email
-      firstName
-      lastName
-      profilePicture {
-        name
-        path
-        url
-      }
-      username
-      id
-      organizationMemberships {
-        organization {
-          name
-          id
-        }
-        role {
-          name
-        }
-      }
-    }
-  }
-`);
+import { useDashboardStore } from '@/config/store';
 
 const updateUserMutation: any = graphql(`
   mutation updateUser($input: UpdateUserInput!) {
@@ -60,21 +34,19 @@ const updateUserMutation: any = graphql(`
 const UserProfile = () => {
   const params = useParams<{ entitySlug: string }>();
 
-  const userDetails: any = useQuery([`user_details_${params.entitySlug}`], () =>
-    GraphQL(UserDetails, {}, [])
-  );
+  const { setUserDetails, userDetails } = useDashboardStore();
 
   useEffect(() => {
-    if (userDetails.data) {
+    if (userDetails && userDetails?.me) {
       setFormData({
-        firstName: userDetails.data?.me?.firstName,
-        lastName: userDetails.data?.me?.lastName,
-        email: userDetails.data?.me?.email,
-        bio: userDetails.data?.me?.bio,
-        profilePicture: userDetails.data?.me?.profilePicture,
+        firstName: userDetails?.me?.firstName,
+        lastName: userDetails?.me?.lastName,
+        email: userDetails?.me?.email,
+        bio: userDetails?.me?.bio,
+        profilePicture: userDetails?.me?.profilePicture,
       });
     }
-  }, [userDetails.data]);
+  }, [userDetails]);
 
   const initialFormData = {
     firstName: '',
@@ -97,6 +69,10 @@ const UserProfile = () => {
           bio: res?.updateUser?.bio,
           profilePicture: res?.updateUser?.profilePicture,
         });
+        setUserDetails({
+          ...userDetails,
+          me: res.updateUser,
+        });
       },
       onError: (error: any) => {
         toast(`Error: ${error.message}`);
@@ -106,9 +82,7 @@ const UserProfile = () => {
 
   const [formData, setFormData] = React.useState(initialFormData);
 
-
   const handleSave = () => {
-
     // Create mutation input with only changed fields
     const inputData: UpdateUserInput = {
       firstName: formData.firstName,

app/[locale]/dashboard/[entityType]/[entitySlug]/schema.ts

@@ -13,8 +13,38 @@ export const getOrgDetailsQryDoc: any = graphql(`
         width
         height
       }
+      homepage
+      organizationTypes
+      contactEmail
+      description
       slug
     }
   }
 `);
 
+export const UserDetailsQryDoc: any = graphql(`
+  query userDetails {
+    me {
+      bio
+      email
+      firstName
+      lastName
+      profilePicture {
+        name
+        path
+        url
+      }
+      username
+      id
+      organizationMemberships {
+        organization {
+          name
+          id
+        }
+        role {
+          name
+        }
+      }
+    }
+  }
+`);