Add useQuery hook for fetching events and update navigation logic (#183)

lexicongovernance · Feb 13, 2024 · f367c66 · f367c66
1 parent 35469f4
commit f367c66
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 10 deletions.
diff --git a/packages/berlin/src/App.tsx b/packages/berlin/src/App.tsx
@@ -15,9 +15,18 @@ import Onboarding from './pages/Onboarding';
 import PassportPopupRedirect from './pages/Popup';
 import Holding from './pages/Holding';
 import Register from './pages/Register';
+import { useQuery } from '@tanstack/react-query';
+import { fetchEvents } from 'api';
 
 function App() {
   const { user, isLoading } = useUser();
+
+  const { data: events } = useQuery({
+    queryKey: ['events'],
+    queryFn: fetchEvents,
+    enabled: !!user?.id,
+  });
+
   const onboardingStatus = useAppStore((state) => state.onboardingStatus);
   const userStatus = useAppStore((state) => state.userStatus);
   const setUserStatus = useAppStore((state) => state.setUserStatus);
@@ -42,8 +51,12 @@ function App() {
       return <Navigate to="/account" replace />;
     }
 
+    if (events?.length === 1) {
+      return <Navigate to={`/events/${events?.[0].id}/register`} />;
+    }
+
     return <Landing />;
-  }, [user, userStatus, onboardingStatus]);
+  }, [user, userStatus, onboardingStatus, events]);
 
   // This will be a loading skeleton
   if (isLoading) {

diff --git a/packages/berlin/src/hooks/useUser.tsx b/packages/berlin/src/hooks/useUser.tsx
@@ -9,8 +9,6 @@ function useUser() {
   } = useQuery({
     queryKey: ['user'],
     queryFn: fetchUserData,
-    retry: false,
-    staleTime: 10000,
   });
 
   return { user, isLoading, isError };

diff --git a/packages/berlin/src/pages/Account.tsx b/packages/berlin/src/pages/Account.tsx
@@ -223,7 +223,7 @@ function AccountForm({
 
       toast.success('User data updated!');
 
-      if (events?.length ?? 0 > 1) {
+      if (events?.length === 1) {
         navigate(`/events/${events?.[0].id}/register`);
       }
     }
@@ -403,9 +403,7 @@ function AccountForm({
               />
             )}
           />
-          <Button type="submit">
-            Submit
-          </Button>
+          <Button type="submit">Submit</Button>
         </FlexColumn>
       </form>
     </FlexColumn>

diff --git a/packages/berlin/src/pages/Holding.tsx b/packages/berlin/src/pages/Holding.tsx
@@ -15,7 +15,7 @@ function Holding() {
   const handleRegistrationClick = () => {
     navigate(`/events/${eventId}/register`);
     window.location.reload();
-  }
+  };
 
   return (
     <FlexColumn $gap="2rem">
@@ -24,7 +24,10 @@ function Holding() {
       <Body>We will inform you of the status by April 15, at the latest.</Body>
       <Body>
         If you need to edit your submission, then{' '}
-        <Link to= "#" onClick={handleRegistrationClick}>click here</Link>.
+        <Link to="#" onClick={handleRegistrationClick}>
+          click here
+        </Link>
+        .
       </Body>
     </FlexColumn>
   );

diff --git a/packages/berlin/src/pages/Onboarding.tsx b/packages/berlin/src/pages/Onboarding.tsx
@@ -13,15 +13,17 @@ import Dots from '../components/dots';
 
 // Data
 import onboarding from '../data/onboarding';
+import { useAppStore } from '../store';
 
 function Onboarding() {
   const navigate = useNavigate();
-
+  const setOnboardingStatus = useAppStore((state) => state.setOnboardingStatus);
   const [step, setStep] = useState(0);
   const { data } = onboarding;
 
   const handleSkip = () => {
     navigate('/account');
+    setOnboardingStatus('COMPLETE');
   };
 
   const handleNext = () => {