From a92650119d06aed01d6dc88701a05282a291a8d4 Mon Sep 17 00:00:00 2001
From: Camilo Vega <59750365+camilovegag@users.noreply.github.com>
Date: Mon, 20 May 2024 02:58:43 -0500
Subject: [PATCH] 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
---
packages/berlin/src/App.tsx | 18 ++++++++++++++++++
.../src/components/back-button/BackButton.tsx | 19 ++++++++++++++++---
packages/berlin/src/pages/Cycle.tsx | 4 ++--
3 files changed, 36 insertions(+), 5 deletions(-)
diff --git a/packages/berlin/src/App.tsx b/packages/berlin/src/App.tsx
index 0cad8651..502d63cc 100644
--- 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: },
@@ -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
index 272610af..afb0c7a2 100644
--- 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 (
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
index 1cab9e88..1f9c7d22 100644
--- 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 (
-
+
{currentCycle?.questionTitle}
{voteInfo}