Update dependencies and use Vite instead of CRA

src/components/AuthRoute/index.tsx

@@ -1,13 +0,0 @@
-import { useReactiveVar } from '@apollo/client';
-import { Redirect, Route, RouteProps } from 'react-router-dom';
-import { tokenVar } from '../../graphql/state';
-
-const AuthRoute: React.FC<RouteProps> = ({ children, ...rest }) => {
-  const token = useReactiveVar(tokenVar);
-
-  return (
-    <Route {...rest} render={() => (!token ? children : <Redirect to='/' />)} />
-  );
-};
-
-export default AuthRoute;

src/components/Button/index.tsx

@@ -6,8 +6,8 @@ type ButtonProps = {
   size?: 'small' | 'big';
   variant?: 'primary-action' | 'secondary-action' | 'outlined' | 'text';
   type?: 'submit' | 'button' | 'reset';
-  iconLeft?: React.SVGProps<SVGSVGElement>;
-  iconRight?: React.SVGProps<SVGSVGElement>;
+  iconLeft?: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
+  iconRight?: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
   fullWidth?: boolean;
   loading?: boolean;
   disabled?: boolean;

src/components/Button/styles.ts

@@ -4,8 +4,8 @@ type WrapperProps = {
   color: 'client' | 'productOwner' | 'developer' | 'admin' | 'error';
   size?: 'small' | 'big';
   variant?: 'primary-action' | 'secondary-action' | 'outlined' | 'text';
-  iconLeft?: React.SVGProps<SVGSVGElement>;
-  iconRight?: React.SVGProps<SVGSVGElement>;
+  iconLeft?: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
+  iconRight?: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
   load?: boolean;
   disabled?: boolean;
   fullWidth?: boolean;

src/components/ContextMenu/index.tsx

@@ -25,9 +25,9 @@ const ContextMenu = ({ items, component, className }: ContextMenuProps) => {
     ref.current?.addEventListener('mouseleave', closeMenu);
 
     return () => {
-      (document.querySelector(
-        `#${component}`
-      ) as HTMLElement)?.removeEventListener('mouseenter', openMenu);
+      (
+        document.querySelector(`#${component}`) as HTMLElement
+      )?.removeEventListener('mouseenter', openMenu);
       wrapper?.removeEventListener('mouseleave', closeMenu);
     };
 

src/components/IconButton/index.tsx

@@ -3,7 +3,7 @@ import { Wrapper } from './styles';
 type IconButtonProps = {
   color?: 'client' | 'productOwner' | 'developer' | 'admin';
   size?: 'small' | 'medium' | 'big';
-  icon?: React.SVGProps<SVGSVGElement>;
+  icon?: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
   onClick: () => void;
 };
 

src/components/IconButton/styles.ts

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
 type WrapperProps = {
   color?: 'client' | 'productOwner' | 'developer' | 'admin';
   size?: 'small' | 'medium' | 'big';
-  icon?: React.SVGProps<SVGSVGElement>;
+  icon?: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
 };
 
 export const Wrapper = styled.button<WrapperProps>`

src/components/Link/index.tsx

@@ -18,7 +18,7 @@ type LinkProps = {
     | string;
   selected?: boolean;
   className?: string;
-  iconLeft?: React.SVGProps<SVGSVGElement>;
+  iconLeft?: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
   onClick?: () => void;
   target?: '_self' | '_blank';
 };

src/components/Menu/index.tsx

@@ -5,7 +5,7 @@ import { Text } from '..';
 type MenuProps = {
   className?: string;
   items: Array<{
-    icon: React.SVGProps<SVGSVGElement>;
+    icon: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
     avoid?: boolean;
     label: string;
     action?: () => void;
@@ -30,9 +30,9 @@ const Menu = ({ items, component, className }: MenuProps) => {
     ref.current?.addEventListener('mouseleave', closeMenu);
 
     return () => {
-      (document.querySelector(
-        `#${component}`
-      ) as HTMLElement)?.removeEventListener('mouseenter', openMenu);
+      (
+        document.querySelector(`#${component}`) as HTMLElement
+      )?.removeEventListener('mouseenter', openMenu);
       wrapper?.addEventListener('mouseleave', closeMenu);
     };
 

src/components/MessagingSidebar/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useHistory, useLocation } from 'react-router';
+import { useNavigate, useLocation } from 'react-router';
 import { useReactiveVar } from '@apollo/client';
 import { roleVar } from '../../graphql/state';
 import { Box, Button, Text } from '..';
@@ -20,7 +20,7 @@ type MessagingSidebarProps = {
 const MessagingSidebar = ({ onClose }: MessagingSidebarProps) => {
   const role = useReactiveVar(roleVar);
   const location = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
   const [projectThreads, setProjectThreads] = useState<Array<ThreadObject>>();
 
   useEffect(() => {
@@ -65,9 +65,7 @@ const MessagingSidebar = ({ onClose }: MessagingSidebarProps) => {
             iconLeft={<Add />}
             onClick={() => {
               onClose();
-              history.push(
-                `/support-messaging/${location.pathname.split('/')[2]}`
-              );
+              navigate(`/support-messaging/${location.pathname.split('/')[2]}`);
             }}
           />
         </Box>
@@ -87,7 +85,7 @@ const MessagingSidebar = ({ onClose }: MessagingSidebarProps) => {
                 borderRadius='10px'
                 onClick={() => {
                   onClose();
-                  history.push(
+                  navigate(
                     `/support-messaging/${location.pathname.split('/')[2]}/${
                       thread.id
                     }`

src/components/Navbar/index.tsx

@@ -1,5 +1,5 @@
 import { useReactiveVar } from '@apollo/client';
-import { useHistory, useLocation } from 'react-router';
+import { useNavigate, useLocation } from 'react-router';
 import { roleVar, tokenVar, userVar } from '../../graphql/state';
 import { Wrapper } from './styles';
 import { Avatar, Link, Menu, Text } from '..';
@@ -8,7 +8,7 @@ import { Settings, Logout, Logo } from '../../assets';
 const Navbar = () => {
   const user = useReactiveVar(userVar);
   const role = useReactiveVar(roleVar);
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
 
   return (
@@ -151,7 +151,7 @@ const Navbar = () => {
           {
             icon: <Settings />,
             label: 'Settings',
-            action: () => history.push('/settings'),
+            action: () => navigate('/settings'),
           },
           {
             icon: <Logout />,
@@ -159,7 +159,7 @@ const Navbar = () => {
             action: () => {
               tokenVar(undefined);
               localStorage.removeItem('token');
-              history.push('/login');
+              navigate('/login');
             },
             avoid: true,
           },

src/components/ProtectedRoute/index.tsx

@@ -1,15 +1,12 @@
 import { useReactiveVar } from '@apollo/client';
-import { Redirect, Route, RouteProps } from 'react-router-dom';
+import { Navigate, Route, RouteProps } from 'react-router-dom';
 import { tokenVar } from '../../graphql/state';
 
 const ProtectedRoute: React.FC<RouteProps> = ({ children, ...rest }) => {
   const token = useReactiveVar(tokenVar);
 
   return (
-    <Route
-      {...rest}
-      render={() => (token ? children : <Redirect to='/login' />)}
-    />
+    <Route {...rest} element={token ? children : <Navigate to='/login' />} />
   );
 };
 

src/components/PublicRoute/index.tsx

@@ -0,0 +1,11 @@
+import { useReactiveVar } from '@apollo/client';
+import { Navigate, Route, RouteProps } from 'react-router-dom';
+import { tokenVar } from '../../graphql/state';
+
+const PublicRoute: React.FC<RouteProps> = ({ children, ...rest }) => {
+  const token = useReactiveVar(tokenVar);
+
+  return <Route {...rest} element={!token ? children : <Navigate to='/' />} />;
+};
+
+export default PublicRoute;

src/components/SectionSelector/index.tsx

@@ -1,7 +1,7 @@
 import { Wrapper } from './styles';
 
 type SectionSelectorProps = {
-  icon: React.SVGProps<SVGSVGElement>;
+  icon: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
   text: string;
   color: 'client' | 'productOwner' | 'developer' | 'admin';
   selected?: boolean;

src/components/SectionSelector/styles.ts

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 
 type WrapperProps = {
-  icon: React.SVGProps<SVGSVGElement>;
+  icon: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
   color: 'client' | 'productOwner' | 'developer' | 'admin';
   selected: boolean;
   disabled: boolean;

src/components/Sidebar/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useHistory, useLocation } from 'react-router';
+import { useNavigate, useLocation } from 'react-router';
 import { useLazyQuery, useReactiveVar } from '@apollo/client';
 import { roleVar, userVar } from '../../graphql/state';
 import {
@@ -39,14 +39,13 @@ const Sidebar = () => {
   const role = useReactiveVar(roleVar);
   const currentUser = useReactiveVar(userVar);
   const location = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
   const [projects, setProjects] = useState<Array<ProjectOutput>>();
   const [templates, setTemplates] = useState<Array<TemplateOutput>>();
   const [features, setFeatures] = useState<Array<FeatureOutput>>();
   const [categories, setCategories] = useState<Array<CategoryOutput>>();
-  const [messagingSidebarOpen, setMessagingSidebarOpen] = useState<boolean>(
-    false
-  );
+  const [messagingSidebarOpen, setMessagingSidebarOpen] =
+    useState<boolean>(false);
 
   const [getProjectsByClientId] = useLazyQuery<
     GetAllProjectsByClientIdQuery,
@@ -143,7 +142,7 @@ const Sidebar = () => {
                         location.pathname
                       )}
                       text={project.name[0]}
-                      onClick={() => history.push(`/project/${project.id}`)}
+                      onClick={() => navigate(`/project/${project.id}`)}
                     />
                   </div>
                   <ContextMenu
@@ -163,7 +162,7 @@ const Sidebar = () => {
                         (index === 0 && location.pathname === '/template')
                       }
                       text={template.name[0]}
-                      onClick={() => history.push(`/template/${template.id}`)}
+                      onClick={() => navigate(`/template/${template.id}`)}
                     />
                   </div>
                   <ContextMenu
@@ -183,7 +182,7 @@ const Sidebar = () => {
                         (index === 0 && location.pathname === '/feature')
                       }
                       text={feature.name[0]}
-                      onClick={() => history.push(`/feature/${feature.id}`)}
+                      onClick={() => navigate(`/feature/${feature.id}`)}
                     />
                   </div>
                   <ContextMenu
@@ -203,7 +202,7 @@ const Sidebar = () => {
                         (index === 0 && location.pathname === '/category')
                       }
                       text={category.name[0]}
-                      onClick={() => history.push(`/category/${category.id}`)}
+                      onClick={() => navigate(`/category/${category.id}`)}
                     />
                   </div>
                   <ContextMenu
@@ -220,16 +219,16 @@ const Sidebar = () => {
                 color={role}
                 onClick={() => {
                   if (/project/i.test(location.pathname)) {
-                    history.push('/add-project');
+                    navigate('/add-project');
                   }
                   if (/template/i.test(location.pathname)) {
-                    history.push('/add-template');
+                    navigate('/add-template');
                   }
                   if (/feature/i.test(location.pathname)) {
-                    history.push('/add-feature');
+                    navigate('/add-feature');
                   }
                   if (/category/i.test(location.pathname)) {
-                    history.push('/add-category');
+                    navigate('/add-category');
                   }
                 }}
               />

src/components/index.tsx

@@ -16,7 +16,7 @@ import Menu from './Menu';
 import Navbar from './Navbar';
 import Sidebar from './Sidebar';
 import ProtectedRoute from './ProtectedRoute';
-import AuthRoute from './AuthRoute';
+import PublicRoute from './PublicRoute';
 import SectionSelector from './SectionSelector';
 import Modal from './Modal';
 import SidebarItem from './SidebarItem';
@@ -49,7 +49,7 @@ export {
   Navbar,
   Sidebar,
   ProtectedRoute,
-  AuthRoute,
+  PublicRoute,
   SectionSelector,
   Modal,
   SidebarItem,