refactor react-query usage

client/src/components/navbar/user-button.tsx

@@ -1,23 +1,27 @@
 import { UnstyledButton, Group, Avatar, Text, rem } from '@mantine/core';
 import { IconChevronRight } from '@tabler/icons-react';
 import classes from './user-button.module.css';
+import { useAtom } from 'jotai/index';
+import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
 
 export function UserButton() {
+  const [currentUser] = useAtom(currentUserAtom);
+
   return (
     <UnstyledButton className={classes.user}>
       <Group>
         <Avatar
-          src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=255&q=80"
+          src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-9.png"
           radius="xl"
         />
 
         <div style={{ flex: 1 }}>
           <Text size="sm" fw={500}>
-            Harriette Spoonlicker
+            {currentUser.user.name}
           </Text>
 
           <Text c="dimmed" size="xs">
-            hspoonlicker@outlook.com
+            {currentUser.user.email}
           </Text>
         </div>
 

client/src/components/ui/custom-toaster.tsx

@@ -1,19 +0,0 @@
-import t, { Toaster, useToasterStore } from "react-hot-toast";
-import { useEffect, useState } from "react";
-
-export default function CustomToaster() {
-  const { toasts } = useToasterStore();
-  const TOAST_LIMIT = 3;
-  const [toastLimit, setToastLimit] = useState<number>(TOAST_LIMIT);
-
-  useEffect(() => {
-    toasts
-      .filter((tt) => tt.visible)
-      .filter((_, i) => i >= toastLimit)
-      .forEach((tt) => {
-        t.dismiss(tt.id);
-      });
-  }, [toastLimit, toasts]);
-
-  return <Toaster position={"top-right"}/>;
-}