refactor: reduce code duplications

src/pages/MarkingPage/HorizontalMarkingPane.tsx

@@ -14,7 +14,7 @@ import { FC, useEffect, useState } from 'react'
 
 import '../../index.css'
 import { Question } from '../../types/exam'
-import { numberToLetter, numberToRoman } from '../../utils/common'
+import { hasPrefix, numberToLetter, numberToRoman } from '../../utils/common'
 
 interface HorizontalMarkingPaneProps {
   questions: Record<number, Question>
@@ -38,16 +38,9 @@ const HorizontalMarkingPane: FC<HorizontalMarkingPaneProps> = ({
     setHorizontalMarkingState((current) => mapValues(current, () => value))
   }
 
-  function visibleByPrefix(collection: Record<string, boolean>, prefix: string) {
-    return some(
-      pickBy(collection, (v, k) => k.startsWith(`${prefix}-`)),
-      Boolean
-    )
-  }
-
   function handleBulkUpdateByPrefix(prefix: string) {
     setHorizontalMarkingState((current) => {
-      let newValue = !visibleByPrefix(current, prefix)
+      let newValue = !hasPrefix(keys(pickBy(current, (v, _) => v)), prefix)
       return mapValues(current, (v, k) => (k.startsWith(`${prefix}-`) ? newValue : v))
     })
   }

src/pages/MarkingPage/MarkableSubmission.tsx

@@ -9,6 +9,7 @@ import Section from '../../components/questionStructure/Section'
 import { ReadOnlyTaskFactory, TaskProps } from '../../components/questionStructure/Task/readonly'
 import { Answer, Question as QuestionType } from '../../types/exam'
 import { MarkRoot, Student } from '../../types/marking'
+import { hasPrefix } from '../../utils/common'
 import MarkInputPanel from './MarkInputPanel'
 import QuestionHeader from './QuestionHeader'
 
@@ -35,12 +36,10 @@ const MarkableSubmission: FC<MarkableSubmissionProps> = ({
   lookupAnswer,
   saveMark,
 }) => {
-  const visibleByPrefix = (p: string) => visibleSectionIDs.some((id) => id.startsWith(p))
-
   return (
     <Box>
       {Object.entries(questions)
-        .filter(([q, _]) => visibleByPrefix(`${q}-`))
+        .filter(([q, _]) => hasPrefix(visibleSectionIDs, `${q}-`))
         .map(([q_, question]) => {
           const q = Number(q_)
           return (
@@ -49,7 +48,7 @@ const MarkableSubmission: FC<MarkableSubmissionProps> = ({
                 <QuestionHeader number={q_} title={question.title} />
                 <Question instructions={question.instructions}>
                   {Object.entries(question.parts)
-                    .filter(([p, _]) => visibleByPrefix(`${q}-${p}-`))
+                    .filter(([p, _]) => hasPrefix(visibleSectionIDs, `${q}-${p}-`))
                     .map(([p_, part]) => {
                       const p = Number(p_)
                       return (
@@ -60,7 +59,7 @@ const MarkableSubmission: FC<MarkableSubmissionProps> = ({
                           marksContribution={sum(map(part.sections, 'maximumMark'))}
                         >
                           {Object.entries(part.sections)
-                            .filter(([s, _]) => visibleByPrefix(`${q}-${p}-${s}`))
+                            .filter(([s, _]) => hasPrefix(visibleSectionIDs, `${q}-${p}-${s}`))
                             .map(([s_, section], i) => {
                               const s = Number(s_)
                               const sectionId = `${q}-${p}-${s}`

src/pages/MarkingPage/Scrollspy/index.tsx

@@ -4,7 +4,7 @@ import React, { FC } from 'react'
 
 import { Question as QuestionType } from '../../../types/exam'
 import { MarkRoot } from '../../../types/marking'
-import { numberToLetter, numberToRoman } from '../../../utils/common'
+import { hasPrefix, numberToLetter, numberToRoman } from '../../../utils/common'
 import { ScrollspyItem } from './ScrollspyItem'
 
 interface ScrollspyProps {
@@ -15,8 +15,6 @@ interface ScrollspyProps {
 }
 
 const Scrollspy: FC<ScrollspyProps> = ({ questions, marks, activeId, visibleSectionIDs }) => {
-  const visibleByPrefix = (p: string) => visibleSectionIDs.some((id) => id.startsWith(p))
-
   function currentQuestionMark(q: number): number | undefined {
     let relevantMarks = marks.filter((m) => m.question === q && !isNil(m.mark))
     return isEmpty(relevantMarks) ? undefined : sumBy(relevantMarks, 'mark')
@@ -34,7 +32,7 @@ const Scrollspy: FC<ScrollspyProps> = ({ questions, marks, activeId, visibleSect
   return (
     <Flex direction="column" gap="6" m="4" p="4">
       {Object.entries(questions)
-        .filter(([q, _]) => visibleByPrefix(`${q}-`))
+        .filter(([q, _]) => hasPrefix(visibleSectionIDs, `${q}-`))
         .map(([q_, question]) => {
           const q = Number(q_)
           const partial = currentQuestionMark(q)
@@ -52,7 +50,7 @@ const Scrollspy: FC<ScrollspyProps> = ({ questions, marks, activeId, visibleSect
                 {Object.entries(question.parts).map(([p_, part]) => {
                   const p = Number(p_)
                   return Object.entries(part.sections)
-                    .filter(([s, _]) => visibleByPrefix(`${q}-${p}-${s}`))
+                    .filter(([s, _]) => hasPrefix(visibleSectionIDs, `${q}-${p}-${s}`))
                     .map(([s_, section]) => {
                       const s = Number(s_)
                       const partial = currentSectionMark(q, p, s)

src/utils/common.ts

@@ -34,3 +34,7 @@ export function numberToRoman(num: number): string {
     return result + numeral.repeat(repeatCount)
   }, '')
 }
+
+export function hasPrefix(collection: string[], prefix: string): boolean {
+  return collection.some((s) => s.startsWith(prefix))
+}