refactor(UserProfile): add fields for GitHub, LinkedIn, Twitter profiles and location

Author: sanjaypinna

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

@@ -7,8 +7,8 @@ import { UpdateUserInput } from '@/gql/generated/graphql';
 import { useMutation } from '@tanstack/react-query';
 import { Button, DropZone, Text, TextField, toast } from 'opub-ui';
 
-import { GraphQL } from '@/lib/api';
 import { useDashboardStore } from '@/config/store';
+import { GraphQL } from '@/lib/api';
 
 const updateUserMutation: any = graphql(`
   mutation updateUser($input: UpdateUserInput!) {
@@ -26,6 +26,10 @@ const updateUserMutation: any = graphql(`
           url
         }
         username
+        githubProfile
+        linkedinProfile
+        twitterProfile
+        location
       }
     }
   }
@@ -44,6 +48,10 @@ const UserProfile = () => {
         email: userDetails?.me?.email,
         bio: userDetails?.me?.bio,
         profilePicture: userDetails?.me?.profilePicture,
+        githubProfile: userDetails?.me?.githubProfile,
+        linkedinProfile: userDetails?.me?.linkedinProfile,
+        twitterProfile: userDetails?.me?.twitterProfile,
+        location: userDetails?.me?.location,
       });
     }
   }, [userDetails]);
@@ -54,6 +62,10 @@ const UserProfile = () => {
     email: '',
     bio: '',
     profilePicture: null as File | null,
+    githubProfile: '',
+    linkedinProfile: '',
+    twitterProfile: '',
+    location: '',
   };
 
   const { mutate, isLoading: editMutationLoading } = useMutation(
@@ -68,6 +80,10 @@ const UserProfile = () => {
           email: res?.updateUser?.email,
           bio: res?.updateUser?.bio,
           profilePicture: res?.updateUser?.profilePicture,
+          githubProfile: res?.updateUser?.githubProfile,
+          linkedinProfile: res?.updateUser?.linkedinProfile,
+          twitterProfile: res?.updateUser?.twitterProfile,
+          location: res?.updateUser?.location,
         });
         setUserDetails({
           ...userDetails,
@@ -89,6 +105,10 @@ const UserProfile = () => {
       lastName: formData.lastName,
       bio: formData.bio,
       email: formData.email,
+      githubProfile: formData.githubProfile,
+      linkedinProfile: formData.linkedinProfile,
+      twitterProfile: formData.twitterProfile,
+      location: formData.location,
     };
 
     // Only add logo if it has changed
@@ -103,25 +123,28 @@ const UserProfile = () => {
       <div>
         <Text variant="headingXl">My Profile</Text>
       </div>
-      <div className=" mt-6 flex flex-col  gap-6">
-        <div className="flex flex-wrap gap-6 lg:flex-nowrap">
+      <div className=" mt-6 flex flex-col gap-4">
+        <div className="flex flex-wrap gap-4 lg:flex-nowrap">
           <div className="flex w-full flex-col flex-wrap gap-4 lg:flex-nowrap">
-            <div className="w-full">
-              <TextField
-                label="First Name"
-                name="firstName"
-                value={formData.firstName}
-                onChange={(e) => setFormData({ ...formData, firstName: e })}
-              />
-            </div>
-            <div className="w-full">
-              <TextField
-                label="Last Name"
-                name="lastName"
-                value={formData.lastName}
-                onChange={(e) => setFormData({ ...formData, lastName: e })}
-              />
+            <div className="flex w-full flex-wrap gap-6 md:flex-nowrap lg:flex-nowrap">
+              <div className="w-full">
+                <TextField
+                  label="First Name"
+                  name="firstName"
+                  value={formData.firstName}
+                  onChange={(e) => setFormData({ ...formData, firstName: e })}
+                />
+              </div>
+              <div className="w-full">
+                <TextField
+                  label="Last Name"
+                  name="lastName"
+                  value={formData.lastName}
+                  onChange={(e) => setFormData({ ...formData, lastName: e })}
+                />
+              </div>
             </div>
+
             <div className="w-full">
               <TextField
                 label="Email"
@@ -130,8 +153,49 @@ const UserProfile = () => {
                 onChange={(e) => setFormData({ ...formData, email: e })}
               />
             </div>
+            <div className="w-full">
+              <TextField
+                label="Location"
+                name="location"
+                value={formData.location}
+                onChange={(e) => setFormData({ ...formData, location: e })}
+              />
+            </div>
+          </div>
+          <div className="flex w-full flex-col gap-4">
+            <TextField
+              label="Github Profile"
+              name="githubProfile"
+              type="url"
+              value={formData.githubProfile}
+              onChange={(e) => setFormData({ ...formData, githubProfile: e })}
+            />
+            <TextField
+              label="Linkedin Profile"
+              name="linkedinProfile"
+              type="url"
+              value={formData.linkedinProfile}
+              onChange={(e) => setFormData({ ...formData, linkedinProfile: e })}
+            />
+            <TextField
+              label="Twitter Profile"
+              name="twitterProfile"
+              type="url"
+              value={formData.twitterProfile}
+              onChange={(e) => setFormData({ ...formData, twitterProfile: e })}
+            />
+          </div>
+        </div>
+        <div className="flex w-full flex-col gap-4 lg:flex-row">
+          <div className="w-full">
+            <TextField
+              label="Bio"
+              name="bio"
+              multiline={6}
+              value={formData.bio}
+              onChange={(e) => setFormData({ ...formData, bio: e })}
+            />
           </div>
-
           <div className="w-full">
             <DropZone
               label={'Upload Profile Picture'}
@@ -148,13 +212,7 @@ const UserProfile = () => {
             </DropZone>
           </div>
         </div>
-        <TextField
-          label="Bio"
-          name="bio"
-          multiline={6}
-          value={formData.bio}
-          onChange={(e) => setFormData({ ...formData, bio: e })}
-        />
+
         <Button className="m-auto w-1/6" onClick={handleSave}>
           Save
         </Button>