diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/layout.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/layout.tsx index ec71cd9b..0062457e 100644 --- a/app/[locale]/dashboard/[entityType]/[entitySlug]/layout.tsx +++ b/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} />
diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/profile/orgProfile.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/profile/orgProfile.tsx index faafe0a2..c92dd3f9 100644 --- a/app/[locale]/dashboard/[entityType]/[entitySlug]/profile/orgProfile.tsx +++ b/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 (
@@ -214,4 +202,4 @@ const OrgProfile = () => { ); }; -export default OrgProfile; +export default OrgProfile; \ No newline at end of file diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/profile/userProfile.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/profile/userProfile.tsx index fcd84c7f..123469d7 100644 --- a/app/[locale]/dashboard/[entityType]/[entitySlug]/profile/userProfile.tsx +++ b/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, diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/schema.ts b/app/[locale]/dashboard/[entityType]/[entitySlug]/schema.ts index 1029c1f9..bde1a37f 100644 --- a/app/[locale]/dashboard/[entityType]/[entitySlug]/schema.ts +++ b/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 + } + } + } + } +`); \ No newline at end of file diff --git a/app/[locale]/dashboard/[entityType]/page.tsx b/app/[locale]/dashboard/[entityType]/page.tsx index c8c0fd4c..87662e43 100644 --- a/app/[locale]/dashboard/[entityType]/page.tsx +++ b/app/[locale]/dashboard/[entityType]/page.tsx @@ -1,24 +1,22 @@ 'use client'; -import { useState } from 'react'; +import { useMutation } from '@tanstack/react-query'; import Image from 'next/image'; import Link from 'next/link'; import { notFound, useParams, usePathname } from 'next/navigation'; -import { useMutation, useQuery } from '@tanstack/react-query'; import { Button, Dialog, DropZone, Icon, Select, Text, TextField, toast } from 'opub-ui'; +import { useState } from 'react'; -import { GraphQL } from '@/lib/api'; -import { cn } from '@/lib/utils'; import BreadCrumbs from '@/components/BreadCrumbs'; import { Icons } from '@/components/icons'; -import LoadingPage from '../loading'; -import styles from './../components/styles.module.scss'; -import { allOrganizationsListingDoc, organizationCreationMutation } from './schema'; import { ApiOrganizationOrganizationTypesEnum, OrganizationInput } from '@/gql/generated/graphql'; import { useOrganizationTypes } from '@/hooks/useOrganizationTypes'; - - - +import { GraphQL } from '@/lib/api'; +import { cn } from '@/lib/utils'; +import LoadingPage from '../loading'; +import styles from './../components/styles.module.scss'; +import { useDashboardStore } from '@/config/store'; +import { organizationCreationMutation } from './schema'; const Page = () => { const pathname = usePathname(); @@ -26,23 +24,7 @@ const Page = () => { const params = useParams<{ entityType: string }>(); - const allEntitiesList: { - data: any; - isLoading: boolean; - error: any; - isError: boolean; - refetch: any - } = useQuery([`all_enitites_list_${params.entityType}`], () => - GraphQL( - allOrganizationsListingDoc, - { - // Entity Headers if present - }, - [] - ) - ); - - + const { allEntityDetails, setAllEntityDetails } = useDashboardStore(); const [isOpen, setIsOpen] = useState(false); @@ -58,18 +40,27 @@ const Page = () => { const [formData, setFormData] = useState(initialFormData); - const { mutate, isLoading: editMutationLoading } = useMutation( (input: { input: OrganizationInput }) => GraphQL(organizationCreationMutation, {}, input), { - onSuccess: () => { + onSuccess: (res: any) => { toast('Organization created successfully'); // Optionally, reset form or perform other actions setIsOpen(false); setFormData(initialFormData); - - allEntitiesList.refetch(); + setAllEntityDetails({ + ...allEntityDetails, + organizations: [ + ...(allEntityDetails?.organizations || []), + { + id: res.createOrganization.id, + name: res.createOrganization.name, + slug: res.createOrganization.slug, + logo: res.createOrganization.logo + } + ] + }); }, onError: (error: any) => { toast(`Error: ${error.message}`); @@ -99,7 +90,7 @@ const Page = () => { ]} />
- {allEntitiesList.isLoading ? ( + {allEntityDetails?.organizations?.length === 0 ? ( ) : (
@@ -109,7 +100,7 @@ const Page = () => {
- {allEntitiesList?.data?.organizations?.map((entityItem: any) => { + {allEntityDetails?.organizations?.map((entityItem: any) => { return (
diff --git a/app/[locale]/dashboard/[entityType]/schema.ts b/app/[locale]/dashboard/[entityType]/schema.ts index e9979ec1..fca78363 100644 --- a/app/[locale]/dashboard/[entityType]/schema.ts +++ b/app/[locale]/dashboard/[entityType]/schema.ts @@ -36,11 +36,24 @@ export const allDataSpacesListingDoc: any = graphql(` } `); - export const organizationCreationMutation: any = graphql(` - mutation createOrganization($input: OrganizationInput!) { + mutation createOrganization($input: OrganizationInput!) { createOrganization(input: $input) { __typename + ... on TypeOrganization { + id + name + logo { + name + path + url + } + homepage + organizationTypes + contactEmail + description + slug + } } } -`) \ No newline at end of file +`); diff --git a/app/[locale]/dashboard/components/dashboard-nav.tsx b/app/[locale]/dashboard/components/dashboard-nav.tsx index b7907e42..4c3858fc 100644 --- a/app/[locale]/dashboard/components/dashboard-nav.tsx +++ b/app/[locale]/dashboard/components/dashboard-nav.tsx @@ -14,15 +14,17 @@ import styles from '../dashboard.module.scss'; interface DashboardNavProps { items: SidebarNavItem[]; + type?: string; } export function DashboardNav({ items, entityDetails, + type, }: DashboardNavProps & { entityDetails?: any }) { const [isCollapsed, setIsCollapsed] = useState(false); const [isImageValid, setIsImageValid] = useState(() => { - return entityDetails?.logo ? true : false; + return type === 'organization' && entityDetails?.logo ? true : type === 'self' && entityDetails?.profilePicture ? true : false; }); const path = usePathname(); @@ -45,6 +47,7 @@ export function DashboardNav({ const sidebarIcon = isCollapsed ? Icons.expand : Icons.collapse; + return (