add auth and user role

package.json

@@ -40,6 +40,7 @@
     "install": "^0.13.0",
     "next": "12.1.6",
     "nookies": "^2.5.2",
+    "notistack": "^2.0.5",
     "npm": "^8.10.0",
     "nprogress": "^0.2.0",
     "patternomaly": "^1.3.2",

src/components/sidebar/Sidebar.tsx

@@ -1,11 +1,12 @@
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Modal from '@mui/material/Modal';
-import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
+import { GetServerSideProps } from 'next';
 import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import { parseCookies } from 'nookies';
 import React, { useEffect, useState } from 'react'
 
 import RenderIf from '../../utils/renderIf';
@@ -34,9 +35,9 @@ export default function Sidebar() {
 
   const router = useRouter()
 
-  const user = {
+  const { ['user-role']: role } = parseCookies()
-    role: 'admin'
+
-  }
+  console.log(role)
 
   useEffect(() => {
     setViewModal(false)
@@ -44,7 +45,7 @@ export default function Sidebar() {
 
   return (
     <>
-      <RenderIf isTrue={user.role === 'admin'}>
+      <RenderIf isTrue={role === '1'}>
         <SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
           <div className='hamburger' onClick={() => setViewModal(!viewModal)} >
             <Image src='/assets/hamburgerModal.svg' width={60} height={60} />
@@ -57,22 +58,6 @@ export default function Sidebar() {
             <Link href='/administrative/general'><li className={router.pathname=='/administrative/general'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</li></Link>
             <Link href='/administrative/faq'><li className={router.pathname=='/administrative/faq' ? 'actualPath' : null } ><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
             <Link href='/administrative/notification'><li className={router.pathname=='/administrative/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}<div className='notification'><p>25</p></div></li></Link>
-            {/* <li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia >'}</li>
-              <div className='economiaDrawer drawer' >
-                <Link href='/administrative/grossSavings'><li className={router.pathname=='/grossSavings'? 'actualPathDrawer' : null}>Economia Bruta</li></Link>
-                <Link href='/administrative/accumulatedSavings'><li className={router.pathname=='/accumulatedSavings'? 'actualPathDrawer' : null}>Economia Acumulada</li></Link>
-                <Link href='/administrative/estimatedCost'><li className={router.pathname=='/estimatedCost'? 'actualPathDrawer' : null}>Custo Estimado</li></Link>
-                <Link href='/administrative/costIndicator'><li className={router.pathname=='/costIndicator'? 'actualPathDrawer' : null}>Custo R/MWh</li></Link>
-              </div> */}
-            {/* <Link href='/administrative/telemetria'><li className={router.pathname=='/telemetria'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria >'}</li></Link>
-            <Link href='/administrative/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>
-            <Link href='/administrative/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias >'}</li></Link>
-            <Link href='/administrative/pld'><li className={router.pathname=='/pld'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'PLD >'}</li></Link>
-            <Link href='/administrative/industryInfo'><li className={router.pathname=='/industryInfo'? 'actualPath' : null}><Image src='/assets/sidebar/sectorialInfoIcon.svg' width={25} height={25} />{'Info Setorial >'}</li></Link>
-            <Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} ><Image src='/assets/sidebar/consumptionIcon.svg' width={25} height={25} />{'Consumo'}</li></Link>
-            <Link href='/administrative/notifications'><li className={router.pathname=='/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}<div className='notification'><p>25</p></div></li></Link>
-            <Link href='/administrative/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Sobre Nós >'}</li></Link>
-            <Link href='/administrative/faq'><li className={router.pathname=='/faq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link> */}
             <button onClick={handleOpen}><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button>
             <Modal
             open={open}
@@ -95,7 +80,7 @@ export default function Sidebar() {
           </aside>
         </SidebarView>
       </RenderIf>
-      <RenderIf isTrue={user.role === 'client'}>
+      <RenderIf isTrue={role === '2'}>
         <SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
           <div className='hamburger' onClick={() => setViewModal(!viewModal)} >
             <Image src='/assets/hamburgerModal.svg' width={60} height={60} />

src/contexts/AuthContext.tsx

@@ -40,7 +40,7 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
       maxAge: 60 * 60 * 1, // 1 hour
     })
 
-    // setCookie(undefined, 'user-role', user.role)
+    setCookie(undefined, 'user-role', user.role)
 
     api.defaults.headers['Authorization'] = `Bearer ${token}`
 

src/pages/administrative/notification/index.tsx

@@ -25,8 +25,8 @@ import getAPIClient from '../../../services/ssrApi';
 import { GetServerSideProps } from 'next';
 import { parseCookies } from 'nookies';
 import Notifications from '../../notifications';
-import Snackbar from '@mui/material/Snackbar/Snackbar';
+import Snackbar from '@mui/material/Snackbar';
-import Alert from '@mui/material/Alert/Alert';
+import MuiAlert, { AlertProps } from '@mui/material/Alert';
 
 const style = {
   position: 'absolute' as const,
@@ -42,6 +42,13 @@ const style = {
   overflowY: 'scroll'
 };
 
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
+  props,
+  ref,
+) {
+  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
+});
+
 const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
 const checkedIcon = <CheckBoxIcon fontSize="small" />;
 
@@ -68,6 +75,15 @@ export default function notification({clients, notifications}) {
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
 
+  const handleCloseSnack = (event?: React.SyntheticEvent | Event, reason?: string) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpenSnackError(false);
+  };
+
+
   async function handleRegisterNewNotification({title, body, users}: NotificationInterface) {
     await api.post('/notification', {
       title,
@@ -84,6 +100,17 @@ export default function notification({clients, notifications}) {
       <Header name=''/>
       <PageTitle title='Notificações' subtitle='Notificações'/>
 
+      <Snackbar open={openSnackSuccess} autoHideDuration={4000} onClose={handleCloseSnack}>
+        <Alert onClose={handleCloseSnack} severity="success" sx={{ width: '100%' }}>
+          notificação cadastrada com sucesso!
+        </Alert>
+      </Snackbar>
+      <Snackbar open={openSnackError} autoHideDuration={4000} onClose={handleCloseSnack}>
+        <Alert onClose={handleCloseSnack} severity="error" sx={{ width: '100%' }}>
+          Notificação não cadastrada!
+        </Alert>
+      </Snackbar>
+
       <div className='buttons'>
       <button className='btn2' onClick={handleOpen}>Disparar nova</button>
 
@@ -168,16 +195,6 @@ export default function notification({clients, notifications}) {
         </Box>
       </Modal>
       <NotificationsTable notifications={notifications}/>
-      <Snackbar open={openSnackSuccess} autoHideDuration={6000} onClose={handleClose}>
-        <Alert onClose={handleClose} severity="success" sx={{ width: '100%' }}>
-          This is a success message!
-        </Alert>
-      </Snackbar>
-      <Snackbar open={openSnackError} autoHideDuration={6000} onClose={handleClose}>
-        <Alert onClose={handleClose} severity="error" sx={{ width: '100%' }}>
-          This is a success message!
-        </Alert>
-      </Snackbar>
     </FaqView>
   )
 }

src/services/auth.ts

@@ -27,12 +27,13 @@ export async function signInRequest(data: SignInRequestData) {
     "password": data.password,
     "device_name": "test"
   }).then(res => {
+    // console.log(res.data.user.roles.pivot.role_id)
     user = {
       name: res.data.user.name,
       email: res.data.user.email,
       client_id: res.data.user.client_id,
       id: res.data.user.id,
-      role: res.data.user.roles.role_id
+      role: res.data.user.roles[0].pivot.role_id
     }
     token = res.data.token
   }).catch(res => {
@@ -40,8 +41,14 @@ export async function signInRequest(data: SignInRequestData) {
   })
 
   return {
-    token,
+    token: token,
-    user
+    user: {
+      name: user?.name,
+      email: user?.email,
+      client_id: user?.client_id,
+      id: user?.id,
+      role: user?.role
+    }
   }
 }
 
@@ -55,13 +62,18 @@ export default async function recoverUserInformation(id) {
       email: res.data.user.email,
       client_id: res.data.user.client_id,
       id: res.data.user.id,
-      role: res.data.user.roles.role_id
+      role: res.data.user.roles[0].pivot.role_id
     }
   }).catch(res => {
     console.log(res)
   })
 
   return {
-    user
+    user: {
+      name: user?.name,
+      email: user?.email,
+      client_id: user?.client_id,
+      id: user?.id
+    }
   }
 }

yarn.lock

@@ -1994,7 +1994,7 @@ clone@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
 
-clsx@^1.0.4, clsx@^1.1.1:
+clsx@^1.0.4, clsx@^1.1.0, clsx@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz"
 
@@ -3616,6 +3616,13 @@ normalize-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
 
+notistack@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/notistack/-/notistack-2.0.5.tgz#8eb53720453f6e02182cd0e6784ced630a7bb7e6"
+  dependencies:
+    clsx "^1.1.0"
+    hoist-non-react-statics "^3.3.0"
+
 npm-audit-report@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/npm-audit-report/-/npm-audit-report-3.0.0.tgz#1bf3e531208b5f77347c8d00c3d9badf5be30cd6"