move routes to folder

Co-authored-by: Sayuck <[email protected]>
Co-authored-by: EduardoPicolo <[email protected]>

.eslintrc.json

@@ -120,10 +120,7 @@
       }
     ],
     // "eslint-comments/no-use": ["warn", { "allow": [] }],
-    "eslint-comments/require-description": [
-      "error",
-      { "ignore": [] }
-    ]
+    "eslint-comments/require-description": ["error", { "ignore": [] }]
   },
   "ignorePatterns": ["**/*.json", "**/*.js"],
   "overrides": [
@@ -143,18 +140,14 @@
               ["^react$", "^next", "^react", "^@?\\w"],
               // Internal packages.
               [
-                "^(@components|@pages|@hooks|@contexts|@templates|@layouts|@public|@constants|@utils|@controllers|@models|@services|@company|@ui|@UI|@stripe|@database|@aws|@lib|components|utils|config|vendored-lib|@prismadb)(/.*|$|..)"
+                "^(@components|@routes|@pages|@hooks|@contexts|@templates|@layouts|@public|@constants|@utils|@controllers|@models|@services|@company|@ui|@UI|@stripe|@database|@aws|@lib|components|utils|config|vendored-lib|@prismadb)(/.*|$|..)"
               ],
               // Side effect imports.
               ["^\\u0000"],
               // Parent imports. Put `..` last.
               ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
               // Other relative imports. Put same-folder imports and `.` last.
-              [
-                "^\\./(?=.*/)(?!/?$)",
-                "^\\.(?!/?$)",
-                "^\\./?$"
-              ],
+              ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
               // Style imports.
               ["@styles", "^.+\\.s?css$"]
             ]

jest.config.js

@@ -33,6 +33,7 @@ const customJestConfig = {
     '^@utils': '<rootDir>/src/utils',
     '^@utils/(.*)$': '<rootDir>/src/utils/$1',
     '^@public/(.*)$': '<rootDir>/src/../public/$1',
+    '^@routes': '<rootDir>/src/routes',
   },
 };
 

jest.setup.js

@@ -1 +1,2 @@
 import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';

src/components/SideBar/SidebarItem/SideBarItem.tsx

@@ -0,0 +1,67 @@
+import { Url } from 'url';
+
+import React, { ReactElement, useMemo } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { Flex } from '@chakra-ui/react';
+import { IRoute } from 'routes';
+
+export interface SideBarItemAttributes extends IRoute {
+  query?: { [key: string]: string };
+  as?: string;
+  isActive?: boolean;
+}
+
+export interface SideBarItemProps extends Partial<SideBarItemAttributes> {
+  children?: ReactElement<{ isActive: boolean }>;
+}
+
+export const SideBarItem = ({
+  pathname,
+  query,
+  as,
+  label,
+  icon,
+}: SideBarItemProps) => {
+  const router = useRouter();
+
+  const href: Partial<Url> = useMemo(
+    () => ({
+      pathname,
+      query,
+    }),
+    [pathname, query]
+  );
+
+  // replace the pathname slug '/path/[slug]' with the actual slug
+  const path = query
+    ? pathname?.replace(`[${Object.keys(query)[0]}]`, Object.values(query)[0])
+    : pathname;
+  const isActive = router?.asPath === path;
+
+  return (
+    <Link href={href} as={as} shallow={!pathname}>
+      <Flex
+        alignItems={'center'}
+        gap={2}
+        fontSize={18}
+        fontWeight={'medium'}
+        cursor='pointer'
+        px={2}
+        py={2.5}
+        borderRadius={'base'}
+        bg={isActive ? 'primary' : 'inherit'}
+        color={isActive ? 'white' : 'inherit'}
+        boxShadow={isActive ? 'soft' : 'none'}
+        // eslint-disable-next-line react-perf/jsx-no-new-object-as-prop -- não irei implementar uma classe que aplica hover
+        _hover={{
+          bg: 'primary',
+          color: 'white',
+          boxShadow: 'soft',
+        }}
+      >
+        {icon} {label}
+      </Flex>
+    </Link>
+  );
+};

src/components/SideBar/index.tsx

@@ -1,49 +1,10 @@
 import { FaRegUser } from 'react-icons/fa';
-import { FiLayout } from 'react-icons/fi';
-import {
-  MdOutlineCallToAction,
-  MdOutlineDashboard,
-  MdOutlineLocationCity,
-  MdOutlineViewAgenda,
-} from 'react-icons/md';
 import { RiLogoutCircleFill } from 'react-icons/ri';
-import { TbTestPipe } from 'react-icons/tb';
 import { Box, Divider, Flex, Heading, Text } from '@chakra-ui/react';
 
-import { SideBarItem, SideBarItemAttributes } from './SideBarItem';
+import { routes } from '@routes';
 
-const routes: SideBarItemAttributes[] = [
-  {
-    label: 'Dashboard',
-    pathname: '/dashboard',
-    icon: <MdOutlineDashboard size={28} />,
-  },
-  {
-    label: 'Chamados',
-    pathname: '/chamados',
-    icon: <MdOutlineViewAgenda size={28} />,
-  },
-  {
-    label: 'Registrar Chamado',
-    pathname: '/registrachamado',
-    icon: <MdOutlineCallToAction size={28} />,
-  },
-  {
-    label: 'Tipos De Problemas',
-    pathname: '/listaCategoria',
-    icon: <FiLayout size={28} />,
-  },
-  {
-    label: 'Cidades [admin]',
-    pathname: '/listaCidades',
-    icon: <MdOutlineLocationCity size={28} />,
-  },
-  {
-    label: 'Teste',
-    pathname: '/teste',
-    icon: <TbTestPipe size={28} />,
-  },
-];
+import { SideBarItem } from './SidebarItem/SideBarItem';
 
 export const SideBar = () => {
   return (

src/routes/index.tsx

@@ -0,0 +1,47 @@
+import { FiLayout } from 'react-icons/fi';
+import {
+  MdOutlineCallToAction,
+  MdOutlineDashboard,
+  MdOutlineLocationCity,
+  MdOutlineViewAgenda,
+} from 'react-icons/md';
+import { TbTestPipe } from 'react-icons/tb';
+
+export interface IRoute {
+  label: string;
+  pathname: string;
+  icon?: JSX.Element;
+}
+
+export const routes: IRoute[] = [
+  {
+    label: 'Dashboard',
+    pathname: '/dashboard',
+    icon: <MdOutlineDashboard size={28} />,
+  },
+  {
+    label: 'Chamados',
+    pathname: '/chamados',
+    icon: <MdOutlineViewAgenda size={28} />,
+  },
+  {
+    label: 'Registrar Chamado',
+    pathname: '/registrachamado',
+    icon: <MdOutlineCallToAction size={28} />,
+  },
+  {
+    label: 'Tipos De Problemas',
+    pathname: '/listaCategoria',
+    icon: <FiLayout size={28} />,
+  },
+  {
+    label: 'Cidades [admin]',
+    pathname: '/listaCidades',
+    icon: <MdOutlineLocationCity size={28} />,
+  },
+  {
+    label: 'Teste',
+    pathname: '/teste',
+    icon: <TbTestPipe size={28} />,
+  },
+];

tsconfig.json

@@ -32,7 +32,8 @@
       "@UI/*": ["UI/*"],
       "@utils": ["utils"],
       "@utils/*": ["utils/*"],
-      "@public/*": ["../public/*"]
+      "@public/*": ["../public/*"],
+      "@routes": ["routes"]
     },
     "incremental": true
   },