Extract Slider Label to own component

website/src/components/Survey/LabelSliderGroup.tsx

@@ -0,0 +1,60 @@
+import { Grid, Slider, SliderFilledTrack, SliderThumb, SliderTrack, useColorMode } from "@chakra-ui/react";
+import { useId, useState } from "react";
+import { colors } from "styles/Theme/colors";
+
+// TODO: consolidate with FlaggableElement
+interface LabelSliderGroupProps {
+  labelIDs: Array<string>;
+  onChange: (sliderValues: number[]) => unknown;
+  isDisabled?: boolean;
+}
+
+export const LabelSliderGroup = ({ labelIDs, onChange, isDisabled }: LabelSliderGroupProps) => {
+  const [sliderValues, setSliderValues] = useState<number[]>(Array.from({ length: labelIDs.length }).map(() => 0));
+
+  return (
+    <Grid templateColumns="auto 1fr" rowGap={1} columnGap={3}>
+      {labelIDs.map((labelId, idx) => (
+        <CheckboxSliderItem
+          key={idx}
+          labelId={labelId}
+          sliderValue={sliderValues[idx]}
+          sliderHandler={(sliderValue) => {
+            const newState = sliderValues.slice();
+            newState[idx] = sliderValue;
+            onChange(sliderValues);
+            setSliderValues(newState);
+          }}
+          isDisabled={isDisabled}
+        />
+      ))}
+    </Grid>
+  );
+};
+
+function CheckboxSliderItem(props: {
+  labelId: string;
+  sliderValue: number;
+  sliderHandler: (newVal: number) => unknown;
+  isDisabled: boolean;
+}) {
+  const id = useId();
+  const { colorMode } = useColorMode();
+
+  const labelTextClass = colorMode === "light" ? `text-${colors.light.text}` : `text-${colors.dark.text}`;
+
+  return (
+    <>
+      <label className="text-sm" htmlFor={id}>
+        {/* TODO: display real text instead of just the id */}
+        <span className={labelTextClass}>{props.labelId}</span>
+      </label>
+      <Slider defaultValue={0} isDisabled={props.isDisabled} onChangeEnd={(val) => props.sliderHandler(val / 100)}>
+        <SliderTrack>
+          <SliderFilledTrack />
+          <SliderThumb />
+        </SliderTrack>
+      </Slider>
+    </>
+  );
+}

website/src/components/Tasks/LabelTask.tsx

@@ -1,12 +1,12 @@
-import { Box, Grid, Slider, SliderFilledTrack, SliderThumb, SliderTrack } from "@chakra-ui/react";
-import { Text, useColorMode, useColorModeValue } from "@chakra-ui/react";
-import { useEffect, useId, useState } from "react";
+import { Box } from "@chakra-ui/react";
+import { Text, useColorModeValue } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
 import { MessageView } from "src/components/Messages";
 import { MessageTable } from "src/components/Messages/MessageTable";
 import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import { TaskSurveyProps } from "src/components/Tasks/Task";
 import { TaskType } from "src/types/Task";
-import { colors } from "styles/Theme/colors";
+import { LabelSliderGroup } from "src/components/Survey/LabelSliderGroup";
 
 export const LabelTask = ({
   task,
@@ -70,60 +70,3 @@ export const LabelTask = ({
     </div>
   );
 };
-
-// TODO: consolidate with FlaggableElement
-interface LabelSliderGroupProps {
-  labelIDs: Array<string>;
-  onChange: (sliderValues: number[]) => unknown;
-  isDisabled?: boolean;
-}
-
-export const LabelSliderGroup = ({ labelIDs, onChange, isDisabled }: LabelSliderGroupProps) => {
-  const [sliderValues, setSliderValues] = useState<number[]>(Array.from({ length: labelIDs.length }).map(() => 0));
-
-  return (
-    <Grid templateColumns="auto 1fr" rowGap={1} columnGap={3}>
-      {labelIDs.map((labelId, idx) => (
-        <CheckboxSliderItem
-          key={idx}
-          labelId={labelId}
-          sliderValue={sliderValues[idx]}
-          sliderHandler={(sliderValue) => {
-            const newState = sliderValues.slice();
-            newState[idx] = sliderValue;
-            onChange(sliderValues);
-            setSliderValues(newState);
-          }}
-          isDisabled={isDisabled}
-        />
-      ))}
-    </Grid>
-  );
-};
-
-function CheckboxSliderItem(props: {
-  labelId: string;
-  sliderValue: number;
-  sliderHandler: (newVal: number) => unknown;
-  isDisabled: boolean;
-}) {
-  const id = useId();
-  const { colorMode } = useColorMode();
-
-  const labelTextClass = colorMode === "light" ? `text-${colors.light.text}` : `text-${colors.dark.text}`;
-
-  return (
-    <>
-      <label className="text-sm" htmlFor={id}>
-        {/* TODO: display real text instead of just the id */}
-        <span className={labelTextClass}>{props.labelId}</span>
-      </label>
-      <Slider defaultValue={0} isDisabled={props.isDisabled} onChangeEnd={(val) => props.sliderHandler(val / 100)}>
-        <SliderTrack>
-          <SliderFilledTrack />
-          <SliderThumb />
-        </SliderTrack>
-      </Slider>
-    </>
-  );
-}