Create useAuthorization hook

.env.development

@@ -2,6 +2,3 @@ NEXT_PUBLIC_DETALHADOR_CHAMADOS_URL=http://localhost:5000/
 NEXT_PUBLIC_GESTOR_DE_USUARIOS_URL=http://localhost:5000/
 NEXT_PUBLIC_GERENCIADOR_DE_LOCALIDADES_URL=http://localhost:5000/
 NEXTAUTH_URL=http://localhost:3000/api/auth
-SECRET=schedula
-NEXTAUTH_SECRET=schedula
-

.env.production

@@ -2,5 +2,3 @@ NEXT_PUBLIC_GESTOR_DE_USUARIOS_URL=https://gestor.schedula.duckdns.org/
 NEXT_PUBLIC_DETALHADOR_CHAMADOS_URL=https://detalhador.schedula.duckdns.org/
 NEXT_PUBLIC_GERENCIADOR_DE_LOCALIDADES_URL=https://gerenciador.schedula.duckdns.org/
 NEXTAUTH_URL=http://localhost:3000/api/auth
-SECRET=schedula
-NEXTAUTH_SECRET=schedula

src/components/Items/CityItem/index.tsx

@@ -1,8 +1,9 @@
-import { useCallback } from "react"
+import { ReactElement, useCallback } from "react"
 
 import { DeleteButton } from "@components/ActionButtons/DeleteButton"
 import { EditButton } from "@components/ActionButtons/EditButton"
 import { Item } from "@components/ListItem"
+import { useAuthorization } from "@hooks/useAuthorization"
 import { deleteCity } from "@services/Cidades"
 import { request } from "@services/request"
 
@@ -13,6 +14,9 @@ interface CityItemProps {
 }
 
 export const CityItem = ({ city, onEdit, onDelete }: CityItemProps) => {
+  const isEditAuthorized = useAuthorization(["manager"])
+  const isDeleteAuthorized = useAuthorization()
+
   const handleDelete = useCallback(
     async ({ id }: City) => {
       const response = await request<null>(deleteCity(id))
@@ -25,8 +29,16 @@ export const CityItem = ({ city, onEdit, onDelete }: CityItemProps) => {
   return (
     <Item<City> title={city?.name} description="">
       <Item.Actions item={city}>
-        <EditButton onClick={onEdit} label={city.name} />
-        <DeleteButton onClick={handleDelete} label={city.name} />
+        {
+          (isEditAuthorized && (
+            <EditButton onClick={onEdit} label={city.name} />
+          )) as ReactElement
+        }
+        {
+          (isDeleteAuthorized && (
+            <DeleteButton onClick={handleDelete} label={city.name} />
+          )) as ReactElement
+        }
       </Item.Actions>
     </Item>
   )

src/components/Items/UserItem/index.tsx

@@ -4,6 +4,7 @@ import { Badge, HStack } from "@chakra-ui/react"
 import { DeleteButton } from "@components/ActionButtons/DeleteButton"
 import { EditButton } from "@components/ActionButtons/EditButton"
 import { Item } from "@components/ListItem"
+import { useAuthorization } from "@hooks/useAuthorization"
 import { request } from "@services/request"
 import { deleteUser } from "@services/Usuarios"
 
@@ -14,6 +15,9 @@ interface UserItemProps {
 }
 
 export const UserItem = ({ user, onEdit, onDelete }: UserItemProps) => {
+  const isEditAuthorized = useAuthorization(["manager"])
+  const isDeleteAuthorized = useAuthorization()
+
   const handleDelete = useCallback(
     async ({ username }: User) => {
       const response = await request<null>(deleteUser(username))
@@ -36,8 +40,16 @@ export const UserItem = ({ user, onEdit, onDelete }: UserItemProps) => {
       }
     >
       <Item.Actions item={user}>
-        <EditButton onClick={onEdit} label={user.name} />
-        <DeleteButton onClick={handleDelete} label={user.name} />
+        {
+          (isEditAuthorized && (
+            <EditButton onClick={onEdit} label={user.name} />
+          )) as ReactElement
+        }
+        {
+          (isDeleteAuthorized && (
+            <DeleteButton onClick={handleDelete} label={user.name} />
+          )) as ReactElement
+        }
       </Item.Actions>
     </Item>
   )

src/components/ListItem/ListItemActions/index.tsx

@@ -6,15 +6,19 @@ export interface ActionsProps<Data> {
   children:
     | ReactElement<ActionButton<Data>>
     | ReactElement<ActionButton<Data>>[]
+    | null
 }
 
 export const Actions = <Data,>({ children, item }: ActionsProps<Data>) => {
   return (
     <HStack spacing={4} role="menubar">
-      {Children.map(children, (child) =>
-        cloneElement(child, {
-          onClick: child?.props?.onClick?.bind?.(null, item)
-        })
+      {Children.map(
+        children,
+        (child) =>
+          child &&
+          cloneElement(child, {
+            onClick: child?.props?.onClick?.bind?.(null, item)
+          })
       )}
     </HStack>
   )

src/hooks/useAuthorization.ts

@@ -0,0 +1,14 @@
+import { useMemo } from "react"
+import { useSession } from "next-auth/react"
+
+export function useAuthorization(access?: Access[]): boolean {
+  const { data: session } = useSession()
+
+  const isAuthorized = useMemo(() => {
+    if (session?.user?.access === "admin") return true
+
+    return access?.includes(session?.user?.access) || false
+  }, [access, session])
+
+  return isAuthorized
+}