PR suggestions - use props for state

Signed-off-by: Ian Bolton <[email protected]>
konveyor · Jun 18, 2024 · ef73291 · ef73291
1 parent 1e4f9ec
commit ef73291
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 32 deletions.
diff --git a/client/src/app/components/SimpleSelectCheckbox.tsx b/client/src/app/components/SimpleSelectCheckbox.tsx
@@ -35,15 +35,10 @@ export const SimpleSelectCheckbox: React.FC<ISimpleSelectBasicProps> = ({
   width,
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
-  const [selectedItems, setSelectedItems] = React.useState<string[]>([]);
   const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(
     [{ value: "show-all", label: "Show All", children: "Show All" }, ...options]
   );
 
-  React.useEffect(() => {
-    setSelectedItems(value || []);
-  }, [value]);
-
   React.useEffect(() => {
     const updatedOptions = [
       { value: "show-all", label: "Show All", children: "Show All" },
@@ -60,35 +55,29 @@ export const SimpleSelectCheckbox: React.FC<ISimpleSelectBasicProps> = ({
     _event: React.MouseEvent<Element, MouseEvent> | undefined,
     selectionValue: string | number | undefined
   ) => {
-    const value = selectionValue as string;
-    if (value === "show-all") {
-      if (selectedItems.length === options.length) {
-        setSelectedItems([]);
-        onChange([]);
-      } else {
-        const allItemValues = options.map((option) => option.value as string);
-        setSelectedItems(allItemValues);
-        onChange(allItemValues);
-      }
+    if (!value || !selectionValue) {
+      return;
+    }
+    let newValue: string[] = [];
+    if (selectionValue === "show-all") {
+      newValue =
+        value.length === options.length ? [] : options.map((opt) => opt.value);
     } else {
-      if (selectedItems.includes(value)) {
-        const newSelections = selectedItems.filter((item) => item !== value);
-        setSelectedItems(newSelections);
-        onChange(newSelections);
+      if (value.includes(selectionValue as string)) {
+        newValue = value.filter((item) => item !== selectionValue);
       } else {
-        const newSelections = [...selectedItems, value];
-        setSelectedItems(newSelections);
-        onChange(newSelections);
+        newValue = [...value, selectionValue as string];
       }
     }
+    onChange(newValue);
   };
 
   return (
     <Select
       role="menu"
       id={id}
       isOpen={isOpen}
-      selected={selectedItems}
+      selected={value}
       onSelect={onSelect}
       onOpenChange={setIsOpen}
       toggle={(toggleref: React.Ref<MenuToggleElement>) => (
@@ -101,9 +90,7 @@ export const SimpleSelectCheckbox: React.FC<ISimpleSelectBasicProps> = ({
           isExpanded={isOpen}
         >
           <span className={spacing.mrSm}>{placeholderText}</span>
-          {selectedItems.length > 0 && (
-            <Badge isRead>{selectedItems.length}</Badge>
-          )}
+          {value && value.length > 0 && <Badge isRead>{value.length}</Badge>}
         </MenuToggle>
       )}
       aria-label={toggleAriaLabel}
@@ -118,8 +105,8 @@ export const SimpleSelectCheckbox: React.FC<ISimpleSelectBasicProps> = ({
             onClick={() => onSelect(undefined, option.value)}
             isSelected={
               option.value === "show-all"
-                ? selectedItems.length === options.length
-                : selectedItems.includes(option.value as string)
+                ? value?.length === options.length
+                : value?.includes(option.value as string)
             }
             {...option}
           >

diff --git a/client/src/app/pages/applications/analysis-wizard/set-targets.tsx b/client/src/app/pages/applications/analysis-wizard/set-targets.tsx
@@ -61,7 +61,7 @@ export const SetTargets: React.FC<SetTargetsProps> = ({ applications }) => {
     )
   ).filter(Boolean);
 
-  const [provider, setProvider] = useState(initialProviders);
+  const [providers, setProviders] = useState(initialProviders);
 
   const handleOnSelectedCardTargetChange = (selectedLabelName: string) => {
     const otherSelectedLabels = formLabels?.filter((formLabel) => {
@@ -173,7 +173,7 @@ export const SetTargets: React.FC<SetTargetsProps> = ({ applications }) => {
       <SimpleSelectCheckbox
         placeholderText="Filter by language..."
         width={300}
-        value={provider}
+        value={providers}
         options={languageOptions?.map((language): SelectOptionProps => {
           return {
             children: <div>{language}</div>,
@@ -182,7 +182,7 @@ export const SetTargets: React.FC<SetTargetsProps> = ({ applications }) => {
           };
         })}
         onChange={(selection) => {
-          setProvider(selection as string[]);
+          setProviders(selection as string[]);
         }}
         toggleId="action-select-toggle"
       />
@@ -203,7 +203,7 @@ export const SetTargets: React.FC<SetTargetsProps> = ({ applications }) => {
               const isSelected = selectedTargets?.includes(id);
               if (
                 matchingTarget &&
-                provider?.some((p) => matchingTarget?.provider?.includes(p))
+                providers?.some((p) => matchingTarget?.provider?.includes(p))
               ) {
                 return (
                   <GalleryItem key={index}>