Setting a simpler task path structure, Adding some layout to the task types, and fixing a ui bug in the rating task

website/src/components/RatingRadioGroup.tsx

@@ -1,8 +1,7 @@
-import { chakra, Box, HStack, useRadio, useRadioGroup } from "@chakra-ui/react";
+import { Box, HStack, useRadio, useRadioGroup } from "@chakra-ui/react";
 
 const RatingRadioButton = (props) => {
-  const { option, ...radioProps } = props;
-  const { getInputProps, getCheckboxProps } = useRadio(radioProps);
+  const { state, getInputProps, getCheckboxProps } = useRadio(props);
 
   const input = getInputProps();
   const checkbox = getCheckboxProps();
@@ -27,25 +26,33 @@ const RatingRadioButton = (props) => {
         px={5}
         py={3}
       >
-        {option}
+        {props.children}
       </Box>
     </Box>
   );
 };
 
 const RatingRadioGroup = (props) => {
-  const { min, max, onChange, ...rest } = props;
-  const { value, getRadioProps, getRootProps } = useRadioGroup({
-    defaultValue: min,
+  const { min, max, onChange } = props;
+  const { getRadioProps, getRootProps } = useRadioGroup({
+    name: "rating",
+    defaultValue: `${min}`,
     onChange: onChange,
   });
-  const options = Array.from(new Array(1 + max - min), (x, i) => i + min);
+  const group = getRootProps();
+
+  const options = Array.from(new Array(1 + max - min), (x, i) => `${i + min}`);
 
   return (
-    <HStack {...getRootProps()}>
-      {options.map((option) => (
-        <RatingRadioButton key={option} option={option} {...getRadioProps({ value: option })} />
-      ))}
+    <HStack {...group}>
+      {options.map((option) => {
+        const radio = getRadioProps({ value: option });
+        return (
+          <RatingRadioButton key={option} {...radio}>
+            {option}
+          </RatingRadioButton>
+        );
+      })}
     </HStack>
   );
 };