feat: use userDetails from google-login in profile section

hotosm · Jul 17, 2024 · 96cb4c6 · 96cb4c6
1 parent bc9ce55
commit 96cb4c6
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 15 deletions.
diff --git a/src/frontend/src/components/Dashboard/DashboardSidebar/index.tsx b/src/frontend/src/components/Dashboard/DashboardSidebar/index.tsx
@@ -1,16 +1,20 @@
 import { useNavigate } from 'react-router-dom';
 import { Flex, FlexColumn } from '@Components/common/Layouts';
 import { Button } from '@Components/RadixComponents/Button';
+import { getLocalStorageValue } from '@Utils/getLocalStorageValue';
 
 export default function DashboardSidebar() {
   const navigate = useNavigate();
+
+  const userDetails = getLocalStorageValue('userprofile');
+
   return (
     <FlexColumn className="naxatw-col-span-1 naxatw-items-center naxatw-rounded-lg naxatw-border naxatw-border-grey-400 naxatw-bg-white naxatw-p-2.5">
-      <Flex className="naxatw-h-20 naxatw-w-20 naxatw-items-center naxatw-justify-center naxatw-rounded-full naxatw-bg-grey-600">
-        <h3>PK</h3>
+      <Flex className="naxatw-h-20 naxatw-w-20 naxatw-items-center naxatw-justify-center naxatw-overflow-hidden naxatw-rounded-full naxatw-bg-grey-600">
+        <img src={userDetails?.img_url} alt="profile" />
       </Flex>
-      <h5 className="mt-2.5">Kylan Gentry</h5>
-      <p className="naxatw-text-body-sm">kylan_gentry22</p>
+      <h5 className="mt-2.5">{userDetails?.name}</h5>
+      <p className="naxatw-text-body-sm">{userDetails?.email}</p>
       <Button
         leftIcon="edit"
         className="naxatw-mt-8 naxatw-border naxatw-border-red !naxatw-text-red"

diff --git a/src/frontend/src/components/UserProfile/FormContents/BasicDetails/index.tsx b/src/frontend/src/components/UserProfile/FormContents/BasicDetails/index.tsx
@@ -3,18 +3,21 @@ import { FormControl, Select, Input, Label } from '@Components/common/FormUI';
 import ErrorMessage from '@Components/common/ErrorMessage';
 import { countriesWithPhoneCodes } from '@Constants/countryCode';
 import { Controller } from 'react-hook-form';
+import { getLocalStorageValue } from '@Utils/getLocalStorageValue';
 
 export default function BasicDetails({ formProps }: { formProps: any }) {
   const { register, formState, control } = formProps;
 
+  const userProfile = getLocalStorageValue('userprofile');
+
   return (
     <section className="naxatw-px-14">
       <Flex>
         <p className="naxatw-text-lg naxatw-font-bold">Basic Details</p>
       </Flex>
       <FlexColumn gap={5} className="naxatw-mt-5">
-        <Flex className="naxatw-h-14 naxatw-w-14 naxatw-items-center naxatw-justify-center naxatw-rounded-full naxatw-bg-grey-600">
-          <h4>SK</h4>
+        <Flex className="naxatw-h-14 naxatw-w-14 naxatw-items-center naxatw-justify-center naxatw-overflow-hidden naxatw-rounded-full naxatw-bg-grey-600">
+          <img src={userProfile.img_url} alt="profilepic" />
         </Flex>
         <FormControl>
           <Label required>Name</Label>

diff --git a/src/frontend/src/components/common/UserAvatar/index.tsx b/src/frontend/src/components/common/UserAvatar/index.tsx
@@ -1,17 +1,17 @@
 interface IUserAvatarProps {
-  name: string;
   className?: string;
+  imageSource?: string;
 }
 
-export default function UserAvatar({ name, className }: IUserAvatarProps) {
-  const nameParts = name?.split(' ');
-  const firstNameInitial = nameParts?.[0] ? nameParts?.[0][0] : '';
-
+export default function UserAvatar({
+  className,
+  imageSource,
+}: IUserAvatarProps) {
   return (
     <div
       className={`naxatw-flex naxatw-h-8 naxatw-w-8 naxatw-items-center naxatw-justify-center naxatw-rounded-full naxatw-bg-red naxatw-text-body-md naxatw-font-semibold naxatw-capitalize naxatw-text-white ${className}`}
     >
-      {firstNameInitial || '-'}
+      <img src={imageSource} alt="profile" />
     </div>
   );
 }
diff --git a/src/frontend/src/components/common/UserProfile/index.tsx b/src/frontend/src/components/common/UserProfile/index.tsx
@@ -11,6 +11,9 @@ export default function UserProfile() {
   const [toggle, setToggle] = useState(false);
   const navigate = useNavigate();
 
+  const userProfilex = localStorage.getItem('userprofile');
+  const userProfile = userProfilex && JSON.parse(userProfilex);
+
   const settingOptions = [
     {
       id: 1,
@@ -39,7 +42,10 @@ export default function UserProfile() {
       onBlur={() => setToggle(false)}
     >
       <div onClick={() => setToggle(!toggle)}>
-        <UserAvatar className="naxatw-cursor-pointer" name="Prajwal" />
+        <UserAvatar
+          className="naxatw-cursor-pointer naxatw-overflow-hidden"
+          imageSource={userProfile?.img_url}
+        />
       </div>
       {toggle && (
         <div className="slide-in-top naxatw-absolute naxatw-right-0 naxatw-top-[3rem] naxatw-z-20">

diff --git a/src/frontend/src/views/UserProfile/index.tsx b/src/frontend/src/views/UserProfile/index.tsx
@@ -19,6 +19,7 @@ import { useMutation } from '@tanstack/react-query';
 import { postUserProfile } from '@Services/common';
 import { toast } from 'react-toastify';
 import { removeKeysFromObject } from '@Utils/index';
+import { getLocalStorageValue } from '@Utils/getLocalStorageValue';
 import Tab from './UserProfileTabs';
 
 const getActiveFormContent = (
@@ -54,8 +55,7 @@ export default function UserProfile() {
     state => state.common.userProfileActiveTab,
   );
 
-  const userProfileString = localStorage.getItem('userprofile');
-  const userProfile = userProfileString && JSON.parse(userProfileString);
+  const userProfile = getLocalStorageValue('userprofile');
 
   const initialState = {
     name: '',