update notification handling and improve sorting logic in NotificationTemplate component

src/views/Authorization/LoginView.jsx

@@ -22,8 +22,8 @@ import { GOOGLE_CLIENT_ID, REDIRECT_URL } from '../../Config'
 import Logo from '../../Logo'
 import { useResource } from '../../queries/ResourceQueries'
 import { useNotification } from '../../service/NotificationProvider'
-import { login } from '../../utils/Fetcher'
-import { apiManager } from '../../utils/TokenManager'
+import { GetUserProfile, login } from '../../utils/Fetcher'
+import { apiManager, isTokenValid } from '../../utils/TokenManager'
 import MFAVerificationModal from './MFAVerificationModal'
 
 const LoginView = () => {
@@ -49,7 +49,19 @@ const LoginView = () => {
     }
     initializeSocialLogin()
   }, [])
-
+  useEffect(() => {
+    if (isTokenValid()) {
+      GetUserProfile().then(response => {
+        if (response.status === 200) {
+          return response.json().then(data => {
+            setUserProfile(data.res)
+          })
+        } else {
+          console.log('Failed to fetch user profile')
+        }
+      })
+    }
+  }, [])
   const handleSubmit = async e => {
     e.preventDefault()
     login(username, password)

src/views/ChoreEdit/ChoreEdit.jsx

@@ -61,7 +61,8 @@ const REPEAT_ON_TYPE = ['interval', 'days_of_the_week', 'day_of_the_month']
 const NO_DUE_DATE_REQUIRED_TYPE = ['no_repeat', 'once']
 const NO_DUE_DATE_ALLOWED_TYPE = ['trigger']
 const ChoreEdit = () => {
-  const { data: userProfile } = useUserProfile()
+  const { data: userProfile, isLoading: isUserProfileLoading } =
+    useUserProfile()
 
   const [chore, setChore] = useState([])
   const [choresHistory, setChoresHistory] = useState([])
@@ -331,14 +332,14 @@ const ChoreEdit = () => {
   }, [assignees])
 
   useEffect(() => {
-    if (performers.length > 0 && assignees.length === 0) {
+    if (performers.length > 0 && assignees.length === 0 && userProfile) {
       setAssignees([
         {
-          userId: userProfile.id,
+          userId: userProfile?.id,
         },
       ])
     }
-  }, [performers])
+  }, [performers, userProfile])
 
   // if user resolve the error trigger validation to remove the error message from the respective field
   useEffect(() => {
@@ -368,7 +369,11 @@ const ChoreEdit = () => {
       },
     })
   }
-  if ((isChoreLoading && choreId) || isUserLabelsLoading) {
+  if (
+    (isChoreLoading && choreId) ||
+    isUserLabelsLoading ||
+    isUserProfileLoading
+  ) {
     return <LoadingComponent />
   }
   return (
@@ -738,11 +743,13 @@ const ChoreEdit = () => {
             <Box sx={{ p: 0.5 }}>
               <NotificationTemplate
                 onChange={metadata => {
-                  const newNotificaitonMetadata = {
-                    ...notificationMetadata,
-                    templates: metadata.notifications,
+                  const newTemplates = metadata.notifications
+                  if (notificationMetadata.templates !== newTemplates) {
+                    setNotificationMetadata({
+                      ...notificationMetadata,
+                      templates: newTemplates,
+                    })
                   }
-                  setNotificationMetadata(newNotificaitonMetadata)
                 }}
                 value={notificationMetadata}
               />
@@ -1007,7 +1014,7 @@ const ChoreEdit = () => {
             <Typography level='body1'>
               Created by{' '}
               <Chip variant='solid'>
-                {performers.find(f => f.id === createdBy)?.displayName}
+                {performers.find(f => f.userId === createdBy)?.displayName}
               </Chip>{' '}
               {moment(chore.createdAt).fromNow()}
             </Typography>
@@ -1018,7 +1025,7 @@ const ChoreEdit = () => {
                 <Typography level='body1'>
                   Updated by{' '}
                   <Chip variant='solid'>
-                    {performers.find(f => f.id === updatedBy)?.displayName}
+                    {performers.find(f => f.userId === updatedBy)?.displayName}
                   </Chip>{' '}
                   {moment(chore.updatedAt).fromNow()}
                 </Typography>

src/views/Chores/CompactChoreCard.jsx

@@ -481,7 +481,7 @@ const CompactChoreCard = ({
             }}
           >
             <IconButton
-              variant='solid'
+              variant='soft'
               color='success'
               size='sm'
               onClick={e => {
@@ -494,6 +494,9 @@ const CompactChoreCard = ({
                 height: 32,
                 borderRadius: '50%',
                 transition: 'all 0.2s ease',
+                '&:hover': {
+                  transform: 'scale(1.05)',
+                },
 
                 '&:active': {
                   transform: 'scale(0.95)',