Merge branch 'staging'

Author: sealexan

src/components/BookmarkView.tsx

@@ -0,0 +1,58 @@
+import { Button, Flex, Text, VStack } from "@chakra-ui/react"
+
+const Bookmark: React.FC<{
+  bookmark: Bookmark
+  handleBookmarkSelection: (bookmark: Bookmark) => void
+  color: string
+}> = ({ bookmark, handleBookmarkSelection, color }) => {
+  const nameOnly = bookmark.studentId.split("@")[0]
+  const testsPassed = bookmark.testsPassed.reduce(
+    (accumulator, currentVal) => (accumulator += currentVal),
+  )
+  return (
+    <Button
+      borderRadius={"lg"}
+      h={10}
+      width={"full"}
+      colorScheme={color}
+      bg={`${color}.500`}
+      color={"white"}
+      onClick={() => handleBookmarkSelection(bookmark)}
+    >
+      <Flex flex={1}>
+        <Text flex={1} align={"start"}>
+          {nameOnly}
+        </Text>
+        <Text flex={1} align={"start"}>
+          Tests Passed: {testsPassed}/{bookmark.testsPassed.length}
+        </Text>
+      </Flex>
+    </Button>
+  )
+}
+
+export const BookmarkView: React.FC<{
+  bookmarks: Bookmark[] | null
+  getSubmissionColor: (submissionId: number) => string
+  handleBookmarkSelection: (bookmark: Bookmark) => void
+}> = ({ bookmarks, handleBookmarkSelection, getSubmissionColor }) => {
+  if (!bookmarks)
+    return (
+      <Flex justify={"center"} flex={1}>
+        <Text> There are no Bookmarks yet.</Text>
+      </Flex>
+    )
+
+  return (
+    <VStack width={"full"} align={"start"}>
+      {bookmarks.map((bookmark, key) => (
+        <Bookmark
+          key={key}
+          bookmark={bookmark}
+          handleBookmarkSelection={handleBookmarkSelection}
+          color={getSubmissionColor(bookmark.submissionId)}
+        />
+      ))}
+    </VStack>
+  )
+}

src/components/Carousel.css

@@ -24,7 +24,6 @@
   flex-shrink: 0;
   width: 100%;
   height: 100%;
-  margin-right: 50px;
   border-radius: 10px;
   background: #ffffff;
   display: flex;

src/components/CountdownTimer.tsx

@@ -25,13 +25,18 @@ export const CountdownTimer: React.FC<{
       onTimeIsUp &&
       startTime !== null &&
       endTime !== null &&
-      timeLeftInSeconds == 0
+      timeLeftInSeconds !== null &&
+      timeLeftInSeconds <= 0
     ) {
       onTimeIsUp()
     }
   }, [endTime, onTimeIsUp, startTime, timeLeftInSeconds])
 
-  const totalTimeInSeconds = ((endTime ?? 0) - (startTime ?? 0)) / 1000
+  const totalTimeInSeconds = useMemo(() => {
+    if (startTime == null || endTime == null) return 0
+    return Math.max(0, (endTime - startTime) / 1000)
+  }, [startTime, endTime])
+
   const remainingTimeString = formatSeconds(timeLeftInSeconds ?? 0)
   const fontSize = size === "large" ? "4xl" : size === "medium" ? "3xl" : "md"
   const dynamicColor = useMemo(() => {

src/components/Hooks.tsx

@@ -5,7 +5,7 @@ import axios, { AxiosError } from "axios"
 import { EventSource } from "extended-eventsource"
 import { compact, concat, flatten } from "lodash"
 import { Uri } from "monaco-editor"
-import { useEffect, useRef, useState } from "react"
+import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react"
 import { useParams } from "react-router-dom"
 import { useEventSource } from "../context/EventSourceContext"
 
@@ -27,17 +27,17 @@ const usePath = (prefix: string): string[] => {
           "assignments",
           assignmentSlug,
           prefix !== "assignments" && ["tasks", taskSlug],
-        ]
-      )
-    )
+        ],
+      ),
+    ),
   )
 }
 
 export const useCreate = (slug: string) => {
   const target = slug === "" ? "/create" : "/edit"
   const { mutate, isLoading } = useMutation<string, AxiosError, object>(
     (repository) => axios.post(target, repository),
-    { onSuccess: () => window.location.reload() }
+    { onSuccess: () => window.location.reload() },
   )
   return { mutate, isLoading }
 }
@@ -46,7 +46,7 @@ export const usePull = () => {
   const path = usePath("")
   const { mutate, isLoading } = useMutation(
     () => axios.post("/courses" + `/${path[1]}/pull`, {}),
-    { onSuccess: () => window.location.reload() }
+    { onSuccess: () => window.location.reload() },
   )
   return { mutate, isLoading }
 }
@@ -126,6 +126,27 @@ export const useResetExample = () => {
   return { resetExample }
 }
 
+export const useCategorize = () => {
+  const { courseSlug, exampleSlug } = useParams()
+
+  const { mutateAsync: categorize, isLoading } = useMutation<
+    {
+      categories: Record<string, number[]>
+    },
+    AxiosError,
+    number[]
+  >({
+    mutationFn: (submissionIds) => {
+      const url = `/courses/${courseSlug}/examples/${exampleSlug}/categorize`
+      return axios.post(url, {
+        submissionIds,
+      })
+    },
+  })
+
+  return { categorize, isLoading }
+}
+
 export const useExamples = () => {
   const { courseSlug } = useParams()
 
@@ -163,7 +184,7 @@ export const useAssignment = () => {
   const { courseSlug, assignmentSlug } = useParams()
   return useQuery<AssignmentProps>(
     ["courses", courseSlug, "assignments", assignmentSlug],
-    { enabled: !!assignmentSlug }
+    { enabled: !!assignmentSlug },
   )
 }
 
@@ -172,7 +193,7 @@ export const useExample = (userId: string) => {
   const { courseSlug, exampleSlug } = useParams()
   const query = useQuery<TaskProps>(
     ["courses", courseSlug, "examples", exampleSlug, "users", userId],
-    { enabled: !timer }
+    { enabled: !timer },
   )
   // eslint-disable-next-line
   const { mutateAsync } = useMutation<any, AxiosError, any[]>(
@@ -181,7 +202,7 @@ export const useExample = (userId: string) => {
       onMutate: () => setTimer(Date.now() + 30000),
       onSettled: () => setTimer(undefined),
       onSuccess: query.refetch,
-    }
+    },
   )
   const submit = (data: NewSubmissionProps) =>
     mutateAsync([
@@ -205,7 +226,7 @@ export const useTask = (userId: string) => {
       "users",
       userId,
     ],
-    { enabled: !timer }
+    { enabled: !timer },
   )
   // eslint-disable-next-line
   const { mutateAsync } = useMutation<any, AxiosError, any[]>(
@@ -214,7 +235,7 @@ export const useTask = (userId: string) => {
       onMutate: () => setTimer(Date.now() + 30000),
       onSettled: () => setTimer(undefined),
       onSuccess: query.refetch,
-    }
+    },
   )
   const submit = (data: NewSubmissionProps) =>
     mutateAsync([
@@ -234,38 +255,49 @@ export const useTask = (userId: string) => {
 
 export const useCountdown = (start: number | null, end: number | null) => {
   const [timeLeftInSeconds, setTimeLeftInSeconds] = useState<number | null>(
-    null
+    null,
   )
   const [circleValue, setCircleValue] = useState<number | null>(null)
-  const requestRef = useRef<number | null>(null)
+
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const cancelledRef = useRef(false)
 
   useEffect(() => {
-    if (start === null || end === null) {
+    if (start === null || end === null || end <= start) {
+      setTimeLeftInSeconds(null)
+      setCircleValue(null)
       return
     }
 
-    const update = () => {
-      const total = end - start
+    cancelledRef.current = false
+    const total = end - start
+
+    const tick = () => {
+      if (cancelledRef.current) return
+
       const now = Date.now()
       const timeLeft = Math.max(0, end - now)
 
-      setTimeLeftInSeconds(Math.floor(timeLeft / 1000))
+      setTimeLeftInSeconds((prev) => {
+        const current = Math.floor(timeLeft / 1000)
+        return prev !== current ? current : prev
+      })
 
       const progress = Math.max(0, (timeLeft / total) * 100)
       setCircleValue(progress)
+
       if (timeLeft > 0) {
-        requestRef.current = requestAnimationFrame(update)
-      } else {
-        requestRef.current = null
+        timeoutRef.current = setTimeout(tick, 100)
       }
     }
 
-    update() // only called initially or when startUnix or endUnix changes
+    tick()
 
     return () => {
-      if (requestRef.current) {
-        cancelAnimationFrame(requestRef.current)
-        requestRef.current = null
+      cancelledRef.current = true
+      if (timeoutRef.current !== null) {
+        clearTimeout(timeoutRef.current)
+        timeoutRef.current = null
       }
     }
   }, [start, end])
@@ -290,7 +322,7 @@ export const useTimeframeFromSSE = () => {
       {
         headers: { Authorization: `Bearer ${token}` },
         retry: 3000,
-      }
+      },
     )
 
     const onTimeEvent = (e: MessageEvent) => {
@@ -350,7 +382,7 @@ export const useInspect = () => {
 
   if (!courseSlug || !exampleSlug) {
     throw new Error(
-      `Course Slug ${courseSlug} or example slug ${exampleSlug} undefined`
+      `Course Slug ${courseSlug} or example slug ${exampleSlug} undefined`,
     )
   }
 
@@ -374,7 +406,7 @@ export const useInspect = () => {
 export const useStudentSubmissions = () => {
   const { courseSlug, exampleSlug } = useParams()
 
-  return useQuery<SubmissionSsePayload[]>([
+  return useQuery<ExampleSubmissionsDTO>([
     "courses",
     courseSlug,
     "examples",
@@ -383,6 +415,19 @@ export const useStudentSubmissions = () => {
   ])
 }
 
+export const useExamplePointDistribution = (
+  options: UseQueryOptions<PointDistribution> = {},
+) => {
+  const { courseSlug, exampleSlug } = useParams()
+  return useQuery<PointDistribution>(
+    ["courses", courseSlug, "examples", exampleSlug, "point-distribution"],
+    {
+      enabled: options.enabled,
+      ...options,
+    },
+  )
+}
+
 export const useHeartbeat = () => {
   const { courseSlug } = useParams()
 
@@ -400,3 +445,24 @@ export const useHeartbeat = () => {
 
   return { sendHeartbeat }
 }
+
+const getStorageValue = <T,>(key: string, defaultValue: T) => {
+  const saved = localStorage.getItem(key)
+  if (!saved) return defaultValue
+  return JSON.parse(saved)
+}
+
+export const useLocalStorage = <T,>(
+  key: string,
+  defaultValue: T,
+): [T, Dispatch<SetStateAction<T>>] => {
+  const [value, setValue] = useState<T>(() =>
+    getStorageValue(key, defaultValue),
+  )
+
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(value))
+  }, [key, value])
+
+  return [value, setValue]
+}