Merge pull request #97 from hotosm/feat/user-profile

user profile fixes
hotosm · Jul 25, 2024 · 1010cff · 1010cff
2 parents 7a0810b + ed4676b
commit 1010cff
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 7 deletions.
diff --git a/src/frontend/src/api/projects.ts b/src/frontend/src/api/projects.ts
@@ -1,6 +1,7 @@
 /* eslint-disable import/prefer-default-export */
 import { UseQueryOptions, useQuery } from '@tanstack/react-query';
 import { getProjectsList, getProjectDetail } from '@Services/createproject';
+import { getUserProfileInfo } from '@Services/common';
 
 export const useGetProjectsListQuery = (
   queryOptions?: Partial<UseQueryOptions>,
@@ -25,3 +26,14 @@ export const useGetProjectsDetailQuery = (
     ...queryOptions,
   });
 };
+
+export const useGetUserDetailsQuery = (
+  queryOptions?: Partial<UseQueryOptions>,
+) => {
+  return useQuery({
+    queryKey: ['user=profile'],
+    queryFn: getUserProfileInfo,
+    select: (res: any) => res.data,
+    ...queryOptions,
+  });
+};
diff --git a/src/frontend/src/components/common/UserProfile/index.tsx b/src/frontend/src/components/common/UserProfile/index.tsx
@@ -6,22 +6,23 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import UserAvatar from '@Components/common/UserAvatar';
 import { toast } from 'react-toastify';
+import { getLocalStorageValue } from '@Utils/getLocalStorageValue';
 
 export default function UserProfile() {
   const [toggle, setToggle] = useState(false);
   const navigate = useNavigate();
 
-  const userProfilex = localStorage.getItem('userprofile');
-  const userProfile = userProfilex && JSON.parse(userProfilex);
+  const userProfile = getLocalStorageValue('userprofile');
 
   const settingOptions = [
     {
       id: 1,
-      name: 'Account Settings',
-      icon: 'settings',
+      name: 'Edit Profile',
+      icon: 'person',
       onClick: () => {
         setToggle(false);
       },
+      isRed: false,
     },
     {
       id: 2,
@@ -32,6 +33,7 @@ export default function UserProfile() {
         navigate('/');
         toast.success('Logged Out Successfully');
       },
+      isRed: true,
     },
   ];
 
@@ -53,7 +55,9 @@ export default function UserProfile() {
             {settingOptions.map(item => (
               <li
                 key={item.id}
-                className="naxatw-flex naxatw-cursor-pointer naxatw-items-center naxatw-gap-x-2 naxatw-p-2 naxatw-text-body-md hover:naxatw-bg-[#F5F5F5]"
+                className={`${
+                  item.isRed && 'naxatw-text-red'
+                } naxatw-flex naxatw-cursor-pointer naxatw-items-center naxatw-gap-x-2 naxatw-p-2 naxatw-text-body-md hover:naxatw-bg-[#F5F5F5]`}
                 onClick={item.onClick}
               >
                 <span className="material-icons">{item.icon}</span> {item.name}

diff --git a/src/frontend/src/services/common.ts b/src/frontend/src/services/common.ts
@@ -19,3 +19,6 @@ export const postUserProfile = ({
   authenticated(api).post(`/users/${userId}/profile`, data, {
     headers: { 'Content-Type': 'application/json' },
   });
+
+export const getUserProfileInfo = () =>
+  authenticated(api).get('/users/my-info/');
diff --git a/src/frontend/src/views/Projects/index.tsx b/src/frontend/src/views/Projects/index.tsx
@@ -4,14 +4,25 @@ import {
   ProjectsHeader,
   ProjectsMapSection,
 } from '@Components/Projects';
-import { useGetProjectsListQuery } from '@Api/projects';
+import { useGetProjectsListQuery, useGetUserDetailsQuery } from '@Api/projects';
 import ProjectCardSkeleton from '@Components/Projects/ProjectCardSkeleton';
+import { useEffect } from 'react';
+import { getLocalStorageValue } from '@Utils/getLocalStorageValue';
 
 export default function Projects() {
   const showMap = useTypedSelector(state => state.common.showMap);
 
   // fetch api for projectsList
   const { data: projectsList, isLoading } = useGetProjectsListQuery();
+  const { data: userDetails } = useGetUserDetailsQuery();
+
+  const userDetailsx = getLocalStorageValue('userprofile');
+
+  useEffect(() => {
+    if (!userDetails || !userDetailsx) return;
+    const userDetailsString = JSON.stringify(userDetails);
+    localStorage.setItem('userprofile', userDetailsString as string);
+  }, [userDetails, userDetailsx]);
 
   return (
     <section className="naxatw-px-16 naxatw-pt-8">

diff --git a/src/frontend/src/views/UserProfile/index.tsx b/src/frontend/src/views/UserProfile/index.tsx
@@ -58,7 +58,7 @@ export default function UserProfile() {
   const userProfile = getLocalStorageValue('userprofile');
 
   const initialState = {
-    name: '',
+    name: userProfile?.name,
     country: '',
     city: null,
     password: null,