✨ Migrate to TanStack Query (React Query) and TanStack Router (#637)

new-frontend/src/components/Common/SidebarItems.tsx

@@ -2,14 +2,15 @@ import React from 'react';
 
 import { Box, Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react';
 import { FiBriefcase, FiHome, FiSettings, FiUsers } from 'react-icons/fi';
-import { Link, useLocation } from 'react-router-dom';
+import { Link } from '@tanstack/react-router';
+import { useQueryClient } from 'react-query';
 
-import { useUserStore } from '../../store/user-store';
+import { UserOut } from '../../client';
 
 const items = [
-    { icon: FiHome, title: 'Dashboard', path: "/" },
-    { icon: FiBriefcase, title: 'Items', path: "/items" },
-    { icon: FiSettings, title: 'User Settings', path: "/settings" },
+    { icon: FiHome, title: 'Dashboard', path: '/' },
+    { icon: FiBriefcase, title: 'Items', path: '/items' },
+    { icon: FiSettings, title: 'User Settings', path: '/settings' },
 ];
 
 interface SidebarItemsProps {
@@ -17,28 +18,31 @@ interface SidebarItemsProps {
 }
 
 const SidebarItems: React.FC<SidebarItemsProps> = ({ onClose }) => {
-    const textColor = useColorModeValue("ui.main", "#E2E8F0");
-    const bgActive = useColorModeValue("#E2E8F0", "#4A5568");
-    const location = useLocation();
-    const { user } = useUserStore();
+    const queryClient = useQueryClient();
+    const textColor = useColorModeValue('ui.main', '#E2E8F0');
+    const bgActive = useColorModeValue('#E2E8F0', '#4A5568');
+    const currentUser = queryClient.getQueryData<UserOut>('currentUser');
 
-    const finalItems = user?.is_superuser ? [...items, { icon: FiUsers, title: 'Admin', path: "/admin" }] : items;
+
+    const finalItems = currentUser?.is_superuser ? [...items, { icon: FiUsers, title: 'Admin', path: '/admin' }] : items;
 
     const listItems = finalItems.map((item) => (
         <Flex
             as={Link}
             to={item.path}
-            w="100%"
+            w='100%'
             p={2}
             key={item.title}
-            style={location.pathname === item.path ? {
-                background: bgActive,
-                borderRadius: "12px",
-            } : {}}
+            activeProps={{
+                style: {
+                    background: bgActive,
+                    borderRadius: '12px',
+                },
+            }}
             color={textColor}
             onClick={onClose}
         >
-            <Icon as={item.icon} alignSelf="center" />
+            <Icon as={item.icon} alignSelf='center' />
             <Text ml={2}>{item.title}</Text>
         </Flex>
     ));