Skip to content

Commit c00c883

Browse files
sanjaypinnasanjaypinna
committed
add userprofile and orgprofile
1 parent 8108870 commit c00c883

File tree

3 files changed

+429
-0
lines changed

3 files changed

+429
-0
lines changed

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

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
import React, { useEffect } from 'react';
2+
import { useParams } from 'next/navigation';
3+
import { graphql } from '@/gql';
4+
import {
5+
ApiOrganizationOrganizationTypesEnum,
6+
OrganizationInputPartial,
7+
} from '@/gql/generated/graphql';
8+
import { useMutation, useQuery } from '@tanstack/react-query';
9+
import { Button, DropZone, Select, Text, TextField, toast } from 'opub-ui';
10+
11+
import { GraphQL } from '@/lib/api';
12+
import { organizationTypes } from '../../page';
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+
`);
31+
32+
const organizationUpdateMutation: any = graphql(`
33+
mutation updateOrganization($input: OrganizationInputPartial!) {
34+
updateOrganization(input: $input) {
35+
__typename
36+
... on TypeOrganization {
37+
id
38+
name
39+
logo {
40+
name
41+
path
42+
url
43+
}
44+
homepage
45+
organizationTypes
46+
contactEmail
47+
description
48+
slug
49+
}
50+
}
51+
}
52+
`);
53+
54+
const OrgProfile = () => {
55+
const params = useParams<{ entitySlug: string }>();
56+
57+
const orgDetails: any = useQuery([`org_details_${params.entitySlug}`], () =>
58+
GraphQL(
59+
OrgDetails,
60+
{},
61+
{
62+
slug: params.entitySlug,
63+
}
64+
)
65+
);
66+
67+
useEffect(() => {
68+
if (orgDetails.data) {
69+
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,
77+
});
78+
}
79+
}, [orgDetails.data]);
80+
81+
const initialFormData = {
82+
name: '',
83+
contactEmail: '',
84+
organizationTypes: ApiOrganizationOrganizationTypesEnum.StateGovernment, // or whichever is most appropriate
85+
homepage: '',
86+
description: '',
87+
logo: null as File | null,
88+
id: '',
89+
};
90+
91+
const [formData, setFormData] = React.useState(initialFormData);
92+
93+
const { mutate, isLoading: editMutationLoading } = useMutation(
94+
(input: { input: OrganizationInputPartial }) =>
95+
GraphQL(organizationUpdateMutation, {}, input),
96+
{
97+
onSuccess: (res: any) => {
98+
toast('Organization updated successfully');
99+
setFormData({
100+
name: res?.updateOrganization?.name,
101+
contactEmail: res?.updateOrganization?.contactEmail,
102+
organizationTypes: res?.updateOrganization?.organizationTypes,
103+
homepage: res?.updateOrganization?.homepage,
104+
description: res?.updateOrganization?.description,
105+
logo: res?.updateOrganization?.logo,
106+
id: res?.updateOrganization?.id,
107+
});
108+
},
109+
onError: (error: any) => {
110+
toast(`Error: ${error.message}`);
111+
},
112+
}
113+
);
114+
const handleSave = () => {
115+
116+
// Create mutation input with only changed fields
117+
const inputData: OrganizationInputPartial = {
118+
name: formData.name,
119+
contactEmail: formData.contactEmail,
120+
organizationTypes: formData.organizationTypes,
121+
homepage: formData.homepage,
122+
description: formData.description,
123+
id: formData.id,
124+
};
125+
126+
// Only add logo if it has changed
127+
if (formData.logo instanceof File) {
128+
inputData.logo = formData.logo;
129+
}
130+
131+
mutate({ input: inputData });
132+
};
133+
return (
134+
<div>
135+
<div>
136+
<Text variant="headingXl">My Organization Profile</Text>
137+
</div>
138+
<div className=" mt-6 flex flex-col gap-6">
139+
<div className="flex flex-wrap gap-6 lg:flex-nowrap">
140+
<div className="w-full">
141+
<TextField
142+
label="Name"
143+
name="name"
144+
value={formData.name}
145+
onChange={(e) => setFormData({ ...formData, name: e })}
146+
/>
147+
</div>
148+
149+
<div className="w-full">
150+
<TextField
151+
label="Email"
152+
name="email"
153+
value={formData.contactEmail}
154+
onChange={(e) => setFormData({ ...formData, contactEmail: e })}
155+
/>
156+
</div>
157+
</div>
158+
<div className="flex flex-wrap gap-6 lg:flex-nowrap">
159+
<div className="w-full">
160+
<Select
161+
label="Organization Type"
162+
name="organizationType"
163+
value={
164+
formData.organizationTypes ? formData.organizationTypes : ''
165+
}
166+
onChange={(e) =>
167+
setFormData({
168+
...formData,
169+
organizationTypes: e as ApiOrganizationOrganizationTypesEnum,
170+
})
171+
}
172+
options={organizationTypes}
173+
/>
174+
</div>
175+
<div className="w-full">
176+
<TextField
177+
label="Homepage"
178+
name="homepage"
179+
value={formData.homepage}
180+
onChange={(e) => setFormData({ ...formData, homepage: e })}
181+
/>
182+
</div>
183+
</div>
184+
<div className="flex flex-wrap gap-6 lg:flex-nowrap">
185+
<div className="w-full">
186+
<TextField
187+
label="Description"
188+
name="description"
189+
multiline={6}
190+
value={formData.description}
191+
onChange={(e) => setFormData({ ...formData, description: e })}
192+
/>
193+
</div>
194+
<div className="w-full">
195+
<DropZone
196+
label={'Upload Organization Logo'}
197+
onDrop={(e) => setFormData({ ...formData, logo: e[0] })}
198+
name={'Logo'}
199+
>
200+
<DropZone.FileUpload
201+
actionTitle={
202+
formData.logo
203+
? formData.logo.name.split('/').pop()
204+
: 'Name of the logo'
205+
}
206+
/>
207+
</DropZone>
208+
</div>
209+
</div>
210+
<Button className="m-auto w-1/6" onClick={handleSave}>
211+
Save
212+
</Button>
213+
</div>
214+
</div>
215+
);
216+
};
217+
218+
export default OrgProfile;

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
'use client';
2+
3+
import React from 'react';
4+
import { usePathname } from 'next/navigation';
5+
6+
import OrgProfile from './orgProfile';
7+
import UserProfile from './userProfile';
8+
9+
const Profile = () => {
10+
const path = usePathname();
11+
12+
return (
13+
<div className="mt-8 flex h-full flex-col">
14+
{path.includes('self') ? <UserProfile /> : <OrgProfile />}
15+
</div>
16+
);
17+
};
18+
19+
export default Profile;

0 commit comments

Comments
 (0)