Skip to content

Commit add2912

Browse files
Deepthi-ChandDeepthi-Chand
authored
Merge pull request #238 from CivicDataLab/236-add-state-to-save-user-and-org-profile
236 add state to save user and org details
2 parents f794cbf + 94d75e9 commit add2912

File tree

11 files changed

+223
-153
lines changed

11 files changed

+223
-153
lines changed

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

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
'use client';
22

3-
import React from 'react';
3+
import React, { useEffect } from 'react';
44
import { notFound, useParams } from 'next/navigation';
55
import { SidebarNavItem } from '@/types';
66
import { useQuery } from '@tanstack/react-query';
7+
import { create } from 'zustand';
78

89
import { GraphQL } from '@/lib/api';
910
import { cn } from '@/lib/utils';
@@ -12,6 +13,7 @@ import { DashboardNav } from '../../components/dashboard-nav';
1213
import { MobileDashboardNav } from '../../components/mobile-dashboard-nav';
1314
import styles from '../../components/styles.module.scss';
1415
import { getOrgDetailsQryDoc } from './schema';
16+
import { useDashboardStore } from '@/config/store';
1517

1618
interface DashboardLayoutProps {
1719
children?: React.ReactNode;
@@ -20,16 +22,24 @@ interface DashboardLayoutProps {
2022
export default function OrgDashboardLayout({ children }: DashboardLayoutProps) {
2123
const [isOpened, setIsOpened] = React.useState(false);
2224
const params = useParams<{ entityType: string; entitySlug: string }>();
25+
const { setEntityDetails, entityDetails, userDetails } = useDashboardStore();
2326

2427
const EntityDetailsQryRes: { data: any; isLoading: boolean; error: any } =
2528
useQuery([`entity_details_${params.entityType}`], () =>
2629
GraphQL(
2730
params.entityType === 'organization' && getOrgDetailsQryDoc,
2831
{},
29-
{ slug: params.entitySlug }
32+
{ slug: params.entitySlug }
3033
)
3134
);
3235

36+
useEffect(() => {
37+
if (EntityDetailsQryRes.data) {
38+
setEntityDetails(EntityDetailsQryRes.data);
39+
}
40+
}, [EntityDetailsQryRes.data]);
41+
42+
3343
if (
3444
process.env.NEXT_PUBLIC_DATASPACE_FEATURE_ENABLED !== 'true' &&
3545
params.entityType === 'dataspace'
@@ -100,9 +110,10 @@ export default function OrgDashboardLayout({ children }: DashboardLayoutProps) {
100110
items={orgSidebarNav}
101111
entityDetails={
102112
params.entityType === 'organization'
103-
? EntityDetailsQryRes.data?.organizations[0]
104-
: params.entitySlug.toLocaleLowerCase()
113+
? entityDetails?.organizations[0]
114+
: userDetails?.me
105115
}
116+
type={params.entityType}
106117
/>
107118

108119
<div className="z-1 basis-2 md:hidden">

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

Lines changed: 31 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,15 @@
1-
import React, { useEffect } from 'react';
2-
import { useParams } from 'next/navigation';
31
import { graphql } from '@/gql';
42
import {
53
ApiOrganizationOrganizationTypesEnum,
64
OrganizationInputPartial,
75
} from '@/gql/generated/graphql';
86
import { useOrganizationTypes } from '@/hooks/useOrganizationTypes';
9-
import { useMutation, useQuery } from '@tanstack/react-query';
10-
import { Button, DropZone, Select, Text, TextField, toast } from 'opub-ui';
11-
127
import { GraphQL } from '@/lib/api';
13-
14-
const OrgDetails: any = graphql(`
15-
query orgDetails($slug: String) {
16-
organizations(slug: $slug) {
17-
id
18-
name
19-
logo {
20-
name
21-
path
22-
}
23-
homepage
24-
organizationTypes
25-
contactEmail
26-
description
27-
slug
28-
}
29-
}
30-
`);
8+
import { useMutation } from '@tanstack/react-query';
9+
import { useParams, useRouter } from 'next/navigation';
10+
import { Button, DropZone, Select, Text, TextField, toast } from 'opub-ui';
11+
import React, { useEffect } from 'react';
12+
import { useDashboardStore } from '@/config/store';
3113

3214
const organizationUpdateMutation: any = graphql(`
3315
mutation updateOrganization($input: OrganizationInputPartial!) {
@@ -52,31 +34,25 @@ const organizationUpdateMutation: any = graphql(`
5234
`);
5335

5436
const OrgProfile = () => {
55-
const params = useParams<{ entitySlug: string }>();
37+
const params = useParams<{ entitySlug: string; entityType: string }>();
38+
const router = useRouter();
39+
const { setEntityDetails, entityDetails } = useDashboardStore();
5640

57-
const orgDetails: any = useQuery([`org_details_${params.entitySlug}`], () =>
58-
GraphQL(
59-
OrgDetails,
60-
{},
61-
{
62-
slug: params.entitySlug,
63-
}
64-
)
65-
);
6641
const { organizationTypes } = useOrganizationTypes();
42+
6743
useEffect(() => {
68-
if (orgDetails.data) {
44+
if (entityDetails && entityDetails.organizations) {
6945
setFormData({
70-
name: orgDetails.data?.organizations[0].name,
71-
contactEmail: orgDetails.data?.organizations[0].contactEmail,
72-
organizationTypes: orgDetails.data?.organizations[0].organizationTypes,
73-
homepage: orgDetails.data?.organizations[0].homepage,
74-
description: orgDetails.data?.organizations[0].description,
75-
logo: orgDetails.data?.organizations[0].logo,
76-
id: orgDetails.data?.organizations[0].id,
46+
name: entityDetails?.organizations[0].name,
47+
contactEmail: entityDetails?.organizations[0].contactEmail,
48+
organizationTypes: entityDetails?.organizations[0].organizationTypes,
49+
homepage: entityDetails?.organizations[0].homepage,
50+
description: entityDetails?.organizations[0].description,
51+
logo: entityDetails?.organizations[0].logo,
52+
id: entityDetails?.organizations[0].id,
7753
});
7854
}
79-
}, [orgDetails.data]);
55+
}, [entityDetails?.organizations]);
8056

8157
const initialFormData = {
8258
name: '',
@@ -105,12 +81,20 @@ const OrgProfile = () => {
10581
logo: res?.updateOrganization?.logo,
10682
id: res?.updateOrganization?.id,
10783
});
84+
setEntityDetails({
85+
organizations: [formData],
86+
});
87+
if (res?.updateOrganization?.slug && res.updateOrganization.slug !== params.entitySlug) {
88+
const newPath = `/dashboard/${params.entityType}/${res.updateOrganization.slug}/profile`;
89+
router.replace(newPath);
90+
}
10891
},
10992
onError: (error: any) => {
11093
toast(`Error: ${error.message}`);
11194
},
11295
}
11396
);
97+
11498
const handleSave = () => {
11599
// Create mutation input with only changed fields
116100
const inputData: OrganizationInputPartial = {
@@ -128,7 +112,11 @@ const OrgProfile = () => {
128112
}
129113

130114
mutate({ input: inputData });
115+
116+
131117
};
118+
119+
132120
return (
133121
<div>
134122
<div>
@@ -214,4 +202,4 @@ const OrgProfile = () => {
214202
);
215203
};
216204

217-
export default OrgProfile;
205+
export default OrgProfile;

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

Lines changed: 14 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,11 @@ import React, { useEffect } from 'react';
44
import { useParams } from 'next/navigation';
55
import { graphql } from '@/gql';
66
import { UpdateUserInput } from '@/gql/generated/graphql';
7-
import { useMutation, useQuery } from '@tanstack/react-query';
7+
import { useMutation } from '@tanstack/react-query';
88
import { Button, DropZone, Text, TextField, toast } from 'opub-ui';
99

1010
import { GraphQL } from '@/lib/api';
11-
12-
const UserDetails: any = graphql(`
13-
query userDetails {
14-
me {
15-
bio
16-
email
17-
firstName
18-
lastName
19-
profilePicture {
20-
name
21-
path
22-
url
23-
}
24-
username
25-
id
26-
organizationMemberships {
27-
organization {
28-
name
29-
id
30-
}
31-
role {
32-
name
33-
}
34-
}
35-
}
36-
}
37-
`);
11+
import { useDashboardStore } from '@/config/store';
3812

3913
const updateUserMutation: any = graphql(`
4014
mutation updateUser($input: UpdateUserInput!) {
@@ -60,21 +34,19 @@ const updateUserMutation: any = graphql(`
6034
const UserProfile = () => {
6135
const params = useParams<{ entitySlug: string }>();
6236

63-
const userDetails: any = useQuery([`user_details_${params.entitySlug}`], () =>
64-
GraphQL(UserDetails, {}, [])
65-
);
37+
const { setUserDetails, userDetails } = useDashboardStore();
6638

6739
useEffect(() => {
68-
if (userDetails.data) {
40+
if (userDetails && userDetails?.me) {
6941
setFormData({
70-
firstName: userDetails.data?.me?.firstName,
71-
lastName: userDetails.data?.me?.lastName,
72-
email: userDetails.data?.me?.email,
73-
bio: userDetails.data?.me?.bio,
74-
profilePicture: userDetails.data?.me?.profilePicture,
42+
firstName: userDetails?.me?.firstName,
43+
lastName: userDetails?.me?.lastName,
44+
email: userDetails?.me?.email,
45+
bio: userDetails?.me?.bio,
46+
profilePicture: userDetails?.me?.profilePicture,
7547
});
7648
}
77-
}, [userDetails.data]);
49+
}, [userDetails]);
7850

7951
const initialFormData = {
8052
firstName: '',
@@ -97,6 +69,10 @@ const UserProfile = () => {
9769
bio: res?.updateUser?.bio,
9870
profilePicture: res?.updateUser?.profilePicture,
9971
});
72+
setUserDetails({
73+
...userDetails,
74+
me: res.updateUser,
75+
});
10076
},
10177
onError: (error: any) => {
10278
toast(`Error: ${error.message}`);
@@ -106,9 +82,7 @@ const UserProfile = () => {
10682

10783
const [formData, setFormData] = React.useState(initialFormData);
10884

109-
11085
const handleSave = () => {
111-
11286
// Create mutation input with only changed fields
11387
const inputData: UpdateUserInput = {
11488
firstName: formData.firstName,

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,38 @@ export const getOrgDetailsQryDoc: any = graphql(`
1313
width
1414
height
1515
}
16+
homepage
17+
organizationTypes
18+
contactEmail
19+
description
1620
slug
1721
}
1822
}
1923
`);
2024

25+
export const UserDetailsQryDoc: any = graphql(`
26+
query userDetails {
27+
me {
28+
bio
29+
email
30+
firstName
31+
lastName
32+
profilePicture {
33+
name
34+
path
35+
url
36+
}
37+
username
38+
id
39+
organizationMemberships {
40+
organization {
41+
name
42+
id
43+
}
44+
role {
45+
name
46+
}
47+
}
48+
}
49+
}
50+
`);

0 commit comments

Comments
 (0)