Tweak check in page (#83)

* Tweak check in page * Fix announcements order * Add a note to refresh the page
cuhacking · Jan 29, 2021 · 75ccce9 · 75ccce9
1 parent e611412
commit 75ccce9
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 51 deletions.
diff --git a/src/hooks/useDashboardInfo.tsx b/src/hooks/useDashboardInfo.tsx
@@ -197,14 +197,17 @@ const useProvideDashboardInfo = (): DashboardInfo => {
               description: rawEvent.description,
             } as UpcomingEvent)
         ),
-        announcements: announcementsResult.slice(0, 3).map(
-          (announcement: any) =>
-            ({
-              title: announcement.title,
-              description: announcement.description,
-              url: announcement.url || undefined,
-            } as Announcement)
-        ),
+        announcements: announcementsResult
+          .reverse()
+          .slice(0, 3)
+          .map(
+            (announcement: any) =>
+              ({
+                title: announcement.title,
+                description: announcement.description,
+                url: announcement.url || undefined,
+              } as Announcement)
+          ),
       });
     } catch (e) {
       console.error(e);

diff --git a/src/pages/dashboard/checkin.tsx b/src/pages/dashboard/checkin.tsx
@@ -105,40 +105,34 @@ const SignOutButton = styled.a`
   }
 `;
 
+const SmallText = styled.p``;
+
 const CheckIn = () => {
   const [discordConnected, setDiscordConnected] = useState(false);
   const [discordServer, setDiscordServer] = useState(false);
   const {dashboard, refresh} = useDashboardInfo();
   const history = useHistory();
   const {request, signOut} = useAuth();
 
-  const checkDiscordServerStatus = () => {
-    // Initial check
-    request('/api/user/checkUserDiscord').then((res) => {
-      if (res.ok) {
-        setDiscordServer(true);
+  useEffect(() => {
+    const asyncFunc = async () => {
+      if (dashboard?.user.discordId == null) {
+        return;
       }
-    });
 
-    // Interval check
-    setInterval((timer) => {
-      request('/api/user/checkUserDiscord').then((res) => {
-        if (res.ok) {
-          setDiscordServer(true);
-          clearInterval(timer);
-        }
-      });
-    }, 5000);
-  };
+      setDiscordConnected(true);
 
-  const checkDiscordConnectionStatus = () => {
-    setInterval((timer) => {
-      refresh();
-      if (dashboard?.user.discordId) {
-        clearInterval(timer);
+      const response = await request('/api/user/checkUserDiscord');
+
+      if (!response.ok) {
+        return;
       }
-    }, 5000);
-  };
+
+      setDiscordServer(true);
+    };
+
+    asyncFunc();
+  }, []);
 
   const checkIn = () => {
     request('/api/user/checkIn').then((res) => {
@@ -148,18 +142,6 @@ const CheckIn = () => {
     });
   };
 
-  useEffect(() => {
-    setDiscordConnected(dashboard?.user.discordId != null);
-  }, [dashboard]);
-
-  useEffect(() => {
-    const connected = dashboard?.user.checkedIn;
-    if (!connected) {
-      checkDiscordConnectionStatus();
-    }
-    checkDiscordServerStatus();
-  }, []);
-
   const linkDiscord = () => {
     request('/api/auth/discord/link').then((response) => {
       if (response.redirected) {
@@ -173,30 +155,39 @@ const CheckIn = () => {
       <CheckInContainer>
         <h1>Check In</h1>
         <h2>Complete the steps below to get started!</h2>
-        <StepsContainer>
+        <SmallText>
+          Refresh the page to see updates <span aria-label=':)'>🙂</span>
+        </SmallText>
+        <StepsContainer
+          style={{
+            opacity: !discordConnected ? 1 : 0.5,
+            pointerEvents: !discordConnected ? 'all' : 'none',
+          }}
+        >
           <Step>
             <StepLabel>
               <Marker>
                 <label>1</label>
               </Marker>
-              <label>Connect your Discord</label>
+              <label>Connect your Discord account</label>
             </StepLabel>
             <DiscordButton onClick={() => linkDiscord()}>
               <FontAwesomeIcon icon={faDiscord} />
-              Sign in with Discord
+              Link your Discord
             </DiscordButton>
           </Step>
           <Step
             style={{
-              opacity: discordConnected ? 1 : 0.5,
-              pointerEvents: discordConnected ? 'all' : 'none',
+              opacity: discordConnected && !discordServer ? 1 : 0.5,
+              pointerEvents:
+                discordConnected && !discordServer ? 'all' : 'none',
             }}
           >
             <StepLabel>
               <Marker>
                 <label>2</label>
               </Marker>
-              <label>Join out Discord Server</label>
+              <label>Join our Discord Server</label>
             </StepLabel>
             <DiscordButton href='https://discord.gg/TGvYPnD'>
               <FontAwesomeIcon icon={faDiscord} />
@@ -205,8 +196,8 @@ const CheckIn = () => {
           </Step>
           <Step
             style={{
-              opacity: discordServer ? 1 : 0.5,
-              pointerEvents: discordServer ? 'all' : 'none',
+              opacity: discordConnected && discordServer ? 1 : 0.5,
+              pointerEvents: discordConnected && discordServer ? 'all' : 'none',
             }}
           >
             <StepLabel>