missing u for storybook

Author: bubulux

apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx

@@ -1,4 +1,4 @@
-import type { JSX } from "react";
+import type { JSX, useState } from "react";
 
 import { MenuList } from "@lib-components";
 
@@ -9,23 +9,29 @@ import { useSelectionState } from "@app-ui/navigation/partials/OptionConcepts/ho
 
 type TProps = {
   concepts: string[];
-  onSearch: (value: string) => void;
+  /* must be initialized with { concept: [] } */
+  useCheckedValuesState: typeof useState<Record<string, string[]>>;
+  onSearch: () => void;
+  isReqestingConcepts: boolean;
+  disableButton: boolean;
 };
 
 export default function OptionConcepts({
   concepts,
   onSearch,
+  isReqestingConcepts,
+  useCheckedValuesState,
+  disableButton,
 }: TProps): JSX.Element {
   const classes = useOptionConceptsClasses();
-  const { checkedValues, onChange } = useSelectionState();
+  const { checkedValues, onChange } = useSelectionState(useCheckedValuesState);
   return (
     <OptionLayoutTemplate
       header="Search through recongizable concepts"
-      subtitle="Choose from the given list below"
-      onSearch={() => {
-        onSearch(checkedValues.concept[0]);
-      }}
-      disabledSearch={checkedValues.concept.length === 0}
+      subtitle="Choose one from the given list below"
+      onClick={onSearch}
+      disableClick={disableButton}
+      isLoading={isReqestingConcepts}
     >
       <MenuList
         className={classes.list}

apps/frontend/ui/src/navigation/partials/OptionConcepts/hooks.ts

@@ -1,10 +1,14 @@
-import { useState } from "react";
+import type { useState } from "react";
 import type { MenuProps as TMenuProps } from "@fluentui/react-components";
 
-function useSelectionState() {
-  const [checkedValues, setCheckedValues] = useState<Record<string, string[]>>({
-    concept: [],
-  });
+/**
+ * @param useCheckedValuesState needs to be initialized with { concept: [] }
+ */
+function useSelectionState(
+  useCheckedValuesState: typeof useState<Record<string, string[]>>,
+) {
+  const [checkedValues, setCheckedValues] = useCheckedValuesState();
+
   const onChange: TMenuProps["onCheckedValueChange"] = (
     _,
     { name, checkedItems },