Merge pull request #216 from mp-access/213-improve-example-status-context

213 improve example status context

Author: mmhlego

src/components/Hooks.tsx

@@ -60,17 +60,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 }
 }
@@ -79,7 +79,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 }
 }
@@ -121,6 +121,17 @@ export const useExtendExample = () => {
   return { extendExampleDuration }
 }
 
+export const useInteractiveExample = (options: UseQueryOptions = {}) => {
+  const { courseSlug } = useParams()
+
+  return useQuery<InteractiveExampleDTO>(
+    ["courses", courseSlug, "examples", "interactive"],
+    {
+      enabled: options.enabled,
+    },
+  )
+}
+
 export const useTerminate = () => {
   const { courseSlug, exampleSlug } = useParams()
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -175,7 +186,7 @@ export const useCategorize = () => {
 }
 
 export const useExamples = (
-  options: UseQueryOptions<PointDistribution> = {}
+  options: UseQueryOptions<PointDistribution> = {},
 ) => {
   const { courseSlug } = useParams()
 
@@ -186,7 +197,7 @@ export const useExamples = (
 
 export const usePendingSubmissions = (
   userId: string,
-  options: UseQueryOptions<PointDistribution> = {}
+  options: UseQueryOptions<PointDistribution> = {},
 ) => {
   const { courseSlug, exampleSlug } = useParams()
   return useQuery<NewSubmissionProps[]>(
@@ -202,7 +213,7 @@ export const usePendingSubmissions = (
     {
       enabled: options.enabled,
       refetchOnMount: "always",
-    }
+    },
   )
 }
 
@@ -242,7 +253,7 @@ export const useAssignment = () => {
   const { courseSlug, assignmentSlug } = useParams()
   return useQuery<AssignmentProps>(
     ["courses", courseSlug, "assignments", assignmentSlug],
-    { enabled: !!assignmentSlug }
+    { enabled: !!assignmentSlug },
   )
 }
 
@@ -251,15 +262,15 @@ export const useExample = (userId: string) => {
   const { courseSlug, exampleSlug } = useParams()
   const query = useQuery<TaskProps>(
     ["courses", courseSlug, "examples", exampleSlug, "users", userId],
-    { enabled: !timer, refetchOnMount: "always" }
+    { enabled: !timer, refetchOnMount: "always" },
   )
   // eslint-disable-next-line
   const { mutateAsync } = useMutation<any, AxiosError, any[]>(
     ["submit", courseSlug, "exampels", exampleSlug],
     {
       onMutate: () => setTimer(Date.now() + 30000),
       onSettled: () => setTimer(undefined),
-    }
+    },
   )
   const submit = (data: NewSubmissionProps) =>
     mutateAsync([
@@ -283,7 +294,7 @@ export const useTask = (userId: string) => {
       "users",
       userId,
     ],
-    { enabled: !timer }
+    { enabled: !timer },
   )
   // eslint-disable-next-line
   const { mutateAsync } = useMutation<any, AxiosError, any[]>(
@@ -292,7 +303,7 @@ export const useTask = (userId: string) => {
       onMutate: () => setTimer(Date.now() + 30000),
       onSettled: () => setTimer(undefined),
       onSuccess: query.refetch,
-    }
+    },
   )
   const submit = (data: NewSubmissionProps) =>
     mutateAsync([
@@ -312,7 +323,7 @@ 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)
 
@@ -416,7 +427,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`,
     )
   }
 
@@ -450,15 +461,15 @@ export const useStudentSubmissions = () => {
 }
 
 export const useExamplePointDistribution = (
-  options: UseQueryOptions<PointDistribution> = {}
+  options: UseQueryOptions<PointDistribution> = {},
 ) => {
   const { courseSlug, exampleSlug } = useParams()
   return useQuery<PointDistribution>(
     ["courses", courseSlug, "examples", exampleSlug, "point-distribution"],
     {
       enabled: options.enabled,
       ...options,
-    }
+    },
   )
 }
 
@@ -488,10 +499,10 @@ const getStorageValue = <T,>(key: string, defaultValue: T) => {
 
 export const useLocalStorage = <T,>(
   key: string,
-  defaultValue: T
+  defaultValue: T,
 ): [T, Dispatch<SetStateAction<T>>] => {
   const [value, setValue] = useState<T>(() =>
-    getStorageValue(key, defaultValue)
+    getStorageValue(key, defaultValue),
   )
 
   useEffect(() => {

src/context/ExampleStatusContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, useEffect, useState } from "react"
 import { useParams } from "react-router-dom"
-import { useExamples } from "../components/Hooks"
+import { useInteractiveExample } from "../components/Hooks"
 
 type ExampleStatusContextType =
   | {
@@ -27,24 +27,25 @@ export const ExampleStatusProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
   const { courseSlug } = useParams()
-  const { data: examples } = useExamples({ enabled: !!courseSlug })
+  const { data: interactiveExampleDTO } = useInteractiveExample({
+    enabled: !!courseSlug,
+  })
   const [status, setStatus] = useState<ExampleStatusContextType>({
     hasInteractive: false,
   })
 
   useEffect(() => {
-    if (!courseSlug || !examples) return
-
-    const interactiveExample = examples.find(
-      (example) => example.status === "Interactive",
-    )
+    if (!courseSlug || !interactiveExampleDTO) return
 
-    if (interactiveExample) {
-      setStatus({ hasInteractive: true, exampleSlug: interactiveExample.slug })
+    if (interactiveExampleDTO.exampleSlug) {
+      setStatus({
+        hasInteractive: true,
+        exampleSlug: interactiveExampleDTO.exampleSlug,
+      })
     } else {
       setStatus({ hasInteractive: false })
     }
-  }, [courseSlug, examples])
+  }, [courseSlug, interactiveExampleDTO])
 
   const setInteractive = (slug: string) =>
     setStatus({ hasInteractive: true, exampleSlug: slug })

src/types.d.ts

@@ -279,3 +279,7 @@ declare interface ExampleSubmissionsDTO extends ExampleInformation {
 declare interface ExampleResetSsePayload {
   exampleSlug: string
 }
+
+declare interface InteractiveExampleDTO {
+  exampleSlug: string | null
+}