Add progress bar

components/replit/form.js

@@ -12,10 +12,19 @@ const ReplitForm = ({ cssDark }) => {
   const [isSubmitted, setIsSubmitted] = useState(false)
   const [buttonText, setButtonText] = useState('Submit')
   const [formData, setFormData] = useState({})
+  const [stickerPositions, setStickerPositions] = useState([])
   let jsConfetti = useRef()
   let draggedSticker = useRef()
 
   useEffect(() => {
+    stickers.forEach((_, idx) => {
+      stickerPositions.push({
+        rotation: `${(Math.random() - 0.5) * 80}deg`,
+        position: getRandomPointOnUnitSquare()
+      })
+    })
+    setStickerPositions(stickerPositions)
+
     jsConfetti.current = new JSConfetti()
 
     document.onmousedown = e => {
@@ -71,6 +80,7 @@ const ReplitForm = ({ cssDark }) => {
       if (res.ok) {
         setButtonText(data.message)
         if (data.success) {
+          localStorage.setItem('token', formData.token)
           jsConfetti.current.addConfetti({
             confettiColors: [
               theme.colors.red,
@@ -254,7 +264,6 @@ const ReplitForm = ({ cssDark }) => {
       </Text>
 
       {stickers.map((sticker, idx) => {
-        const pos = getRandomPointOnUnitSquare()
         return (
           <Image
             src={sticker}
@@ -264,10 +273,11 @@ const ReplitForm = ({ cssDark }) => {
             className="sticker"
             sx={{
               position: 'absolute',
-              rotate: `${(Math.random() - 0.5) * 80}deg`,
-              left: `${pos[0] * 100}%`,
-              top: `${pos[1] * 100}%`,
-              translate: '-50% -50%'
+              rotate: stickerPositions[idx]?.rotation,
+              left: `${stickerPositions[idx]?.position[0] * 100}%`,
+              top: `${stickerPositions[idx]?.position[1] * 100}%`,
+              translate: '-50% -50%',
+              zIndex: 5
             }}
             draggable="false"
             key={idx}
@@ -301,8 +311,6 @@ const ReplitForm = ({ cssDark }) => {
   return (
     <Card
       sx={{
-        width: '30rem',
-        marginX: 'auto',
         display: 'flex',
         flexDirection: 'column',
         gap: '2rem',

pages/api/replit/progress.js

@@ -13,9 +13,8 @@ export default async function handler(req, res) {
       if (!response.ok)
         throw new Error(`HTTP error! status: ${response.status}`)
 
-      const data = await response.text()
-      console.info(data)
-      res.status(200).send(data)
+      const data = await response.json()
+      res.status(200).json(data)
     } catch (error) {
       console.error('Error fetching progress:', error)
       res

pages/replit.js

@@ -1,12 +1,43 @@
-import { Box, Link, Image, Button, Heading, Text, Card } from 'theme-ui'
+import {
+  Box,
+  Link,
+  Image,
+  Button,
+  Heading,
+  Text,
+  Card,
+  Progress
+} from 'theme-ui'
 import Head from 'next/head'
 import Meta from '@hackclub/meta'
 import Footer from '../components/footer'
 import Nav from '../components/nav'
 import ForceTheme from '../components/force-theme'
 import ReplitForm from '../components/replit/form'
+import { useEffect, useState } from 'react'
 
 const ReplitPage = () => {
+  const [progress, setProgress] = useState(null)
+
+  useEffect(() => {
+    const interval = setInterval(async () => {
+      const token = localStorage.getItem('token')
+      if (!token) return
+
+      try {
+        const response = await fetch(`/api/replit/progress?token=${token}`)
+        if (!response.ok) throw new Error('Failed to fetch progress')
+        const data = await response.json()
+        console.info(data)
+        setProgress(data)
+      } catch (err) {
+        console.error("Couldn't get progress:", err)
+      }
+    }, 1000)
+
+    return () => clearInterval(interval)
+  }, [])
+
   const steps = [
     'Enter your email',
     'Enter your replit token',
@@ -111,7 +142,14 @@ const ReplitPage = () => {
         </Text>
       </Box>
 
-      <Box as="main" sx={{ maxWidth: '100ch', marginX: 'auto' }}>
+      <Box
+        as="main"
+        sx={{
+          maxWidth: '100ch',
+          marginX: 'auto',
+          paddingX: '1rem'
+        }}
+      >
         <Box
           sx={{
             display: 'flex',
@@ -174,16 +212,44 @@ const ReplitPage = () => {
           />
         </Box>
 
-        <Card sx={{ marginTop: '5rem', color: 'red' }}>
-          <Text as="p" sx={{ fontWeight: 'bold', textAlign: 'center' }}>
-            Hey! This is an unreleased project - hold off from filling this out
-            for now.
-            <br />
-            If you want to help test, contact <code>@Malted</code> on the Slack!
-          </Text>
-        </Card>
+        <Box
+          sx={{
+            marginTop: '3rem',
+            width: '30rem',
+            marginX: 'auto'
+          }}
+        >
+          {progress ? (
+            <Box sx={{ marginBottom: '1rem' }}>
+              <Text>
+                {progress.successful} of {progress.repl_count} repls processed!
+                {progress.failed.timed_out + progress.failed.failed > 0 ? (
+                  <Text
+                    title={`${progress.failed.timed_out} timed out, ${progress.failed.failed} failed`}
+                  >
+                    {' '}
+                    (+ {progress.failed.timed_out + progress.failed.failed}{' '}
+                    error
+                    {progress.failed.timed_out + progress.failed.failed !== 1
+                      ? 's'
+                      : null}
+                    )
+                  </Text>
+                ) : null}
+              </Text>
+
+              <Progress
+                sx={{ color: cssDark, backgroundColor: 'smoke' }}
+                max={progress.repl_count}
+                value={
+                  progress.successful +
+                  progress.failed.timed_out +
+                  progress.failed.failed
+                }
+              ></Progress>
+            </Box>
+          ) : null}
 
-        <Box sx={{ marginTop: '3rem' }}>
           <ReplitForm cssDark={cssDark} />
         </Box>