(frontend) Inform the user if they are missing permissions to view th…

…e timers page on the timers page
cmd-johnson · Sep 10, 2021 · bf19eef · bf19eef
1 parent e128c97
commit bf19eef
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 9 deletions.
diff --git a/packages/frontend/src/pages/timers/timers.tsx b/packages/frontend/src/pages/timers/timers.tsx
@@ -16,7 +16,10 @@ import { useEventsList } from './use-events-list'
 export function TimersPage(): JSX.Element {
   const me = useGetUserQuery()
 
-  const eventsList = useEventsList()
+  const canEdit = me.data?.isLoggedIn && me.data.character.roles.includes(UserRoles.EVENTS_WRITE)
+  const canRead = me.data?.isLoggedIn && me.data.character.roles.includes(UserRoles.EVENTS_READ)
+
+  const eventsList = useEventsList({ skip: me.isLoading || !canRead })
 
   const [addEvent, addEventState] = useAddEventMutation()
   const [updateEvent, updateEventState] = useUpdateEventMutation()
@@ -40,8 +43,6 @@ export function TimersPage(): JSX.Element {
     }
   }, [addEventState, deleteEventState, eventsList, saveState, updateEventState])
 
-  const canEdit = me.data?.isLoggedIn && me.data.character.roles.includes(UserRoles.EVENTS_WRITE)
-
   const [eventDialogState, setEventDialogState] = useState({
     event: null as ApiEventEntry | null,
     show: false,
@@ -70,10 +71,21 @@ export function TimersPage(): JSX.Element {
     cancelEdit()
   }
 
+  if (!me.isFetching) {
+    if (!me.data?.isLoggedIn) {
+      return <Redirect to="/login" />
+    }
+    if (!canRead) {
+      return (
+        <Container fluid>
+          <h6>Sorry, you don&apos;t have permission to view this page.</h6>
+        </Container>
+      )
+    }
+  }
+
   return (
     <Container fluid>
-      {!me.isFetching && !me.data?.isLoggedIn && <Redirect to="/login"  />}
-
       <div className="timers-header">
         <h3>Timers</h3>
         <Button onClick={eventsList.reloadEvents} disabled={isSaving}>

diff --git a/packages/frontend/src/pages/timers/use-events-list.ts b/packages/frontend/src/pages/timers/use-events-list.ts
@@ -15,10 +15,13 @@ export interface UseEventsListResult {
   hasMoreEvents: boolean
   loadMoreEvents: () => void
   reloadEvents: () => void
-  // handleEventChanged: (event: ApiEventEntry) => void
-  // handleEventDeleted: (eventId: number) => void
 }
-export function useEventsList(): UseEventsListResult {
+export interface UseEventsListOptions {
+  skip?: boolean
+}
+export function useEventsList({
+  skip,
+}: UseEventsListOptions = {}): UseEventsListResult {
   const dispatch = useAppDispatch()
   const events = useAppSelector(selectEvents)
   const loading = useAppSelector(selectIsLoadingEvents)
@@ -27,7 +30,11 @@ export function useEventsList(): UseEventsListResult {
   const loadMore = () => dispatch(loadMoreEvents())
   const reload = () => dispatch(reloadEvents())
 
-  useEffect(() => { dispatch(reloadEvents()) }, [dispatch])
+  useEffect(() => {
+    if (skip !== true) {
+      dispatch(reloadEvents())
+    }
+  }, [dispatch, skip])
 
   return {
     events,