517 protect results page (#520)

* Update back button to recieve a fallback route * Create a loader to redirect to cycle id if cycle is open (protect /results) * Add fallback route to cycle back button
lexicongovernance · May 20, 2024 · a926501 · a926501
1 parent bd09454
commit a926501
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 5 deletions.
diff --git a/packages/berlin/src/App.tsx b/packages/berlin/src/App.tsx
@@ -153,6 +153,22 @@ async function redirectToCycleResultsLoader(
   return null;
 }
 
+/**
+ * Redirects the user to the cycle page if the cycle is open
+ */
+async function redirectToCycleIfOpen(queryClient: QueryClient, eventId?: string, cycleId?: string) {
+  const cycle = await queryClient.fetchQuery({
+    queryKey: ['cycles', cycleId],
+    queryFn: () => fetchCycle(cycleId || ''),
+  });
+
+  if (cycle?.status === 'OPEN') {
+    return redirect(`/events/${eventId}/cycles/${cycleId}`);
+  }
+
+  return null;
+}
+
 const router = (queryClient: QueryClient) =>
   createBrowserRouter([
     { path: '/popup', element: <PassportPopupRedirect /> },
@@ -211,6 +227,8 @@ const router = (queryClient: QueryClient) =>
                     },
                     {
                       path: ':cycleId/results',
+                      loader: ({ params }) =>
+                        redirectToCycleIfOpen(queryClient, params.eventId, params.cycleId),
                       Component: Results,
                     },
                     {

diff --git a/packages/berlin/src/components/back-button/BackButton.tsx b/packages/berlin/src/components/back-button/BackButton.tsx
@@ -2,14 +2,27 @@ import { useNavigate } from 'react-router-dom';
 import { useAppStore } from '../../store';
 import IconButton from '../icon-button';
 
-function BackButton() {
+type BackButtonProps = {
+  fallbackRoute?: string;
+};
+
+function BackButton({ fallbackRoute }: BackButtonProps) {
   const navigate = useNavigate();
   const theme = useAppStore((state) => state.theme);
+
+  const handleBackClick = () => {
+    if (fallbackRoute) {
+      navigate(fallbackRoute);
+    } else {
+      navigate(-1);
+    }
+  };
+
   return (
     <IconButton
-      onClick={() => navigate(-1)}
+      onClick={handleBackClick}
       $color="secondary"
-      icon={{ src: `/icons/arrow-back-${theme}.svg`, alt: 'Trash icon' }}
+      icon={{ src: `/icons/arrow-back-${theme}.svg`, alt: 'Back icon' }}
       $padding={0}
     />
   );

diff --git a/packages/berlin/src/pages/Cycle.tsx b/packages/berlin/src/pages/Cycle.tsx
@@ -41,7 +41,7 @@ function Cycle() {
   const queryClient = useQueryClient();
 
   const { user } = useUser();
-  const { cycleId } = useParams();
+  const { eventId, cycleId } = useParams();
   const { data: cycle } = useQuery({
     queryKey: ['cycles', cycleId],
     queryFn: () => fetchCycle(cycleId || ''),
@@ -268,7 +268,7 @@ function Cycle() {
   return (
     <FlexColumn $gap="2rem">
       <FlexColumn>
-        <BackButton />
+        <BackButton fallbackRoute={`/events/${eventId}/cycles`} />
         <Title>{currentCycle?.questionTitle}</Title>
         <Body>{voteInfo}</Body>
         <Body>