Skip to content

Commit 29fafa7

Browse files
bhavabhuthibhavabhuthi
authored
Merge pull request #247 from CivicDataLab/246-add-social-media-fields-and-location-in-user-and-org-profile-pages
246 add social media fields and location in user and org profile pages
2 parents 6523e68 + 482c604 commit 29fafa7

File tree

6 files changed

+355
-139
lines changed

6 files changed

+355
-139
lines changed

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

Lines changed: 71 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1+
import React, { useEffect } from 'react';
2+
import { useParams, useRouter } from 'next/navigation';
13
import { graphql } from '@/gql';
24
import {
35
ApiOrganizationOrganizationTypesEnum,
46
OrganizationInputPartial,
57
} from '@/gql/generated/graphql';
68
import { useOrganizationTypes } from '@/hooks/useOrganizationTypes';
7-
import { GraphQL } from '@/lib/api';
89
import { useMutation } from '@tanstack/react-query';
9-
import { useParams, useRouter } from 'next/navigation';
1010
import { Button, DropZone, Select, Text, TextField, toast } from 'opub-ui';
11-
import React, { useEffect } from 'react';
11+
1212
import { useDashboardStore } from '@/config/store';
13+
import { GraphQL } from '@/lib/api';
1314

1415
const organizationUpdateMutation: any = graphql(`
1516
mutation updateOrganization($input: OrganizationInputPartial!) {
@@ -23,6 +24,10 @@ const organizationUpdateMutation: any = graphql(`
2324
path
2425
url
2526
}
27+
linkedinProfile
28+
githubProfile
29+
twitterProfile
30+
location
2631
homepage
2732
organizationTypes
2833
contactEmail
@@ -50,6 +55,10 @@ const OrgProfile = () => {
5055
description: entityDetails?.organizations[0].description,
5156
logo: entityDetails?.organizations[0].logo,
5257
id: entityDetails?.organizations[0].id,
58+
linkedinProfile: entityDetails?.organizations[0].linkedinProfile,
59+
githubProfile: entityDetails?.organizations[0].githubProfile,
60+
twitterProfile: entityDetails?.organizations[0].twitterProfile,
61+
location: entityDetails?.organizations[0].location,
5362
});
5463
}
5564
}, [entityDetails?.organizations]);
@@ -62,6 +71,10 @@ const OrgProfile = () => {
6271
description: '',
6372
logo: null as File | null,
6473
id: '',
74+
linkedinProfile: '',
75+
githubProfile: '',
76+
twitterProfile: '',
77+
location: '',
6578
};
6679

6780
const [formData, setFormData] = React.useState(initialFormData);
@@ -80,11 +93,18 @@ const OrgProfile = () => {
8093
description: res?.updateOrganization?.description,
8194
logo: res?.updateOrganization?.logo,
8295
id: res?.updateOrganization?.id,
96+
linkedinProfile: res?.updateOrganization?.linkedinProfile,
97+
githubProfile: res?.updateOrganization?.githubProfile,
98+
twitterProfile: res?.updateOrganization?.twitterProfile,
99+
location: res?.updateOrganization?.location,
83100
});
84101
setEntityDetails({
85102
organizations: [formData],
86103
});
87-
if (res?.updateOrganization?.slug && res.updateOrganization.slug !== params.entitySlug) {
104+
if (
105+
res?.updateOrganization?.slug &&
106+
res.updateOrganization.slug !== params.entitySlug
107+
) {
88108
const newPath = `/dashboard/${params.entityType}/${res.updateOrganization.slug}/profile`;
89109
router.replace(newPath);
90110
}
@@ -104,6 +124,10 @@ const OrgProfile = () => {
104124
homepage: formData.homepage,
105125
description: formData.description,
106126
id: formData.id,
127+
linkedinProfile: formData.linkedinProfile,
128+
githubProfile: formData.githubProfile,
129+
twitterProfile: formData.twitterProfile,
130+
location: formData.location,
107131
};
108132

109133
// Only add logo if it has changed
@@ -112,11 +136,8 @@ const OrgProfile = () => {
112136
}
113137

114138
mutate({ input: inputData });
115-
116-
117139
};
118140

119-
120141
return (
121142
<div>
122143
<div>
@@ -163,11 +184,53 @@ const OrgProfile = () => {
163184
<TextField
164185
label="Homepage"
165186
name="homepage"
187+
type="url"
166188
value={formData.homepage}
167189
onChange={(e) => setFormData({ ...formData, homepage: e })}
168190
/>
169191
</div>
170192
</div>
193+
<div className="flex flex-wrap gap-6 lg:flex-nowrap">
194+
<div className="w-full">
195+
<TextField
196+
label="Linkedin Profile"
197+
type="url"
198+
name="linkedinProfile"
199+
value={formData.linkedinProfile}
200+
onChange={(e) => setFormData({ ...formData, linkedinProfile: e })}
201+
/>
202+
</div>
203+
204+
<div className="w-full">
205+
<TextField
206+
label="Github Profile"
207+
type="url"
208+
name="githubProfile"
209+
value={formData.githubProfile}
210+
onChange={(e) => setFormData({ ...formData, githubProfile: e })}
211+
/>
212+
</div>
213+
</div>
214+
<div className="flex flex-wrap gap-6 lg:flex-nowrap">
215+
<div className="w-full">
216+
<TextField
217+
label="Twitter Profile"
218+
name="twitterProfile"
219+
type="url"
220+
value={formData.twitterProfile}
221+
onChange={(e) => setFormData({ ...formData, twitterProfile: e })}
222+
/>
223+
</div>
224+
225+
<div className="w-full">
226+
<TextField
227+
label="Location"
228+
name="location"
229+
value={formData.location}
230+
onChange={(e) => setFormData({ ...formData, location: e })}
231+
/>
232+
</div>
233+
</div>
171234
<div className="flex flex-wrap gap-6 lg:flex-nowrap">
172235
<div className="w-full">
173236
<TextField
@@ -202,4 +265,4 @@ const OrgProfile = () => {
202265
);
203266
};
204267

205-
export default OrgProfile;
268+
export default OrgProfile;

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

Lines changed: 84 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import { UpdateUserInput } from '@/gql/generated/graphql';
77
import { useMutation } from '@tanstack/react-query';
88
import { Button, DropZone, Text, TextField, toast } from 'opub-ui';
99

10-
import { GraphQL } from '@/lib/api';
1110
import { useDashboardStore } from '@/config/store';
11+
import { GraphQL } from '@/lib/api';
1212

1313
const updateUserMutation: any = graphql(`
1414
mutation updateUser($input: UpdateUserInput!) {
@@ -26,6 +26,10 @@ const updateUserMutation: any = graphql(`
2626
url
2727
}
2828
username
29+
githubProfile
30+
linkedinProfile
31+
twitterProfile
32+
location
2933
}
3034
}
3135
}
@@ -44,6 +48,10 @@ const UserProfile = () => {
4448
email: userDetails?.me?.email,
4549
bio: userDetails?.me?.bio,
4650
profilePicture: userDetails?.me?.profilePicture,
51+
githubProfile: userDetails?.me?.githubProfile,
52+
linkedinProfile: userDetails?.me?.linkedinProfile,
53+
twitterProfile: userDetails?.me?.twitterProfile,
54+
location: userDetails?.me?.location,
4755
});
4856
}
4957
}, [userDetails]);
@@ -54,6 +62,10 @@ const UserProfile = () => {
5462
email: '',
5563
bio: '',
5664
profilePicture: null as File | null,
65+
githubProfile: '',
66+
linkedinProfile: '',
67+
twitterProfile: '',
68+
location: '',
5769
};
5870

5971
const { mutate, isLoading: editMutationLoading } = useMutation(
@@ -68,6 +80,10 @@ const UserProfile = () => {
6880
email: res?.updateUser?.email,
6981
bio: res?.updateUser?.bio,
7082
profilePicture: res?.updateUser?.profilePicture,
83+
githubProfile: res?.updateUser?.githubProfile,
84+
linkedinProfile: res?.updateUser?.linkedinProfile,
85+
twitterProfile: res?.updateUser?.twitterProfile,
86+
location: res?.updateUser?.location,
7187
});
7288
setUserDetails({
7389
...userDetails,
@@ -89,6 +105,10 @@ const UserProfile = () => {
89105
lastName: formData.lastName,
90106
bio: formData.bio,
91107
email: formData.email,
108+
githubProfile: formData.githubProfile,
109+
linkedinProfile: formData.linkedinProfile,
110+
twitterProfile: formData.twitterProfile,
111+
location: formData.location,
92112
};
93113

94114
// Only add logo if it has changed
@@ -103,25 +123,28 @@ const UserProfile = () => {
103123
<div>
104124
<Text variant="headingXl">My Profile</Text>
105125
</div>
106-
<div className=" mt-6 flex flex-col gap-6">
107-
<div className="flex flex-wrap gap-6 lg:flex-nowrap">
126+
<div className=" mt-6 flex flex-col gap-4">
127+
<div className="flex flex-wrap gap-4 lg:flex-nowrap">
108128
<div className="flex w-full flex-col flex-wrap gap-4 lg:flex-nowrap">
109-
<div className="w-full">
110-
<TextField
111-
label="First Name"
112-
name="firstName"
113-
value={formData.firstName}
114-
onChange={(e) => setFormData({ ...formData, firstName: e })}
115-
/>
116-
</div>
117-
<div className="w-full">
118-
<TextField
119-
label="Last Name"
120-
name="lastName"
121-
value={formData.lastName}
122-
onChange={(e) => setFormData({ ...formData, lastName: e })}
123-
/>
129+
<div className="flex w-full flex-wrap gap-6 md:flex-nowrap lg:flex-nowrap">
130+
<div className="w-full">
131+
<TextField
132+
label="First Name"
133+
name="firstName"
134+
value={formData.firstName}
135+
onChange={(e) => setFormData({ ...formData, firstName: e })}
136+
/>
137+
</div>
138+
<div className="w-full">
139+
<TextField
140+
label="Last Name"
141+
name="lastName"
142+
value={formData.lastName}
143+
onChange={(e) => setFormData({ ...formData, lastName: e })}
144+
/>
145+
</div>
124146
</div>
147+
125148
<div className="w-full">
126149
<TextField
127150
label="Email"
@@ -130,8 +153,49 @@ const UserProfile = () => {
130153
onChange={(e) => setFormData({ ...formData, email: e })}
131154
/>
132155
</div>
156+
<div className="w-full">
157+
<TextField
158+
label="Location"
159+
name="location"
160+
value={formData.location}
161+
onChange={(e) => setFormData({ ...formData, location: e })}
162+
/>
163+
</div>
164+
</div>
165+
<div className="flex w-full flex-col gap-4">
166+
<TextField
167+
label="Github Profile"
168+
name="githubProfile"
169+
type="url"
170+
value={formData.githubProfile}
171+
onChange={(e) => setFormData({ ...formData, githubProfile: e })}
172+
/>
173+
<TextField
174+
label="Linkedin Profile"
175+
name="linkedinProfile"
176+
type="url"
177+
value={formData.linkedinProfile}
178+
onChange={(e) => setFormData({ ...formData, linkedinProfile: e })}
179+
/>
180+
<TextField
181+
label="Twitter Profile"
182+
name="twitterProfile"
183+
type="url"
184+
value={formData.twitterProfile}
185+
onChange={(e) => setFormData({ ...formData, twitterProfile: e })}
186+
/>
187+
</div>
188+
</div>
189+
<div className="flex w-full flex-col gap-4 lg:flex-row">
190+
<div className="w-full">
191+
<TextField
192+
label="Bio"
193+
name="bio"
194+
multiline={6}
195+
value={formData.bio}
196+
onChange={(e) => setFormData({ ...formData, bio: e })}
197+
/>
133198
</div>
134-
135199
<div className="w-full">
136200
<DropZone
137201
label={'Upload Profile Picture'}
@@ -148,13 +212,7 @@ const UserProfile = () => {
148212
</DropZone>
149213
</div>
150214
</div>
151-
<TextField
152-
label="Bio"
153-
name="bio"
154-
multiline={6}
155-
value={formData.bio}
156-
onChange={(e) => setFormData({ ...formData, bio: e })}
157-
/>
215+
158216
<Button className="m-auto w-1/6" onClick={handleSave}>
159217
Save
160218
</Button>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ export const getOrgDetailsQryDoc: any = graphql(`
1818
contactEmail
1919
description
2020
slug
21+
githubProfile
22+
linkedinProfile
23+
twitterProfile
24+
location
2125
}
2226
}
2327
`);
@@ -35,6 +39,10 @@ export const UserDetailsQryDoc: any = graphql(`
3539
url
3640
}
3741
username
42+
githubProfile
43+
linkedinProfile
44+
twitterProfile
45+
location
3846
id
3947
organizationMemberships {
4048
organization {

0 commit comments

Comments
 (0)