refactor: extract render into methods (#81)

front/src/components/table/table-header/FilterDropdownButton.tsx

@@ -53,17 +53,7 @@ export function FilterDropdownButton({
     setSelectedFilterOperand(filterOperands[0]);
   }, []);
 
-  return (
+  const renderSelectOptionItems = filterOperands.map((filterOperand, index) => (
-    <DropdownButton
-      label="Filter"
-      isActive={filters.length > 0}
-      isUnfolded={isUnfolded}
-      setIsUnfolded={setIsUnfolded}
-      resetState={resetState}
-    >
-      {selectedFilter
-        ? isOptionUnfolded
-          ? filterOperands.map((filterOperand, index) => (
     <DropdownButton.StyledDropdownItem
       key={`select-filter-operand-${index}`}
       onClick={() => {
@@ -73,8 +63,24 @@ export function FilterDropdownButton({
     >
       {filterOperand.label}
     </DropdownButton.StyledDropdownItem>
-            ))
+  ));
-          : [
+
+  const renderSelectFilterITems = availableFilters.map((filter, index) => (
+    <DropdownButton.StyledDropdownItem
+      key={`select-filter-${index}`}
+      onClick={() => {
+        setSelectedFilter(filter);
+      }}
+    >
+      <DropdownButton.StyledIcon>
+        {filter.icon && <FontAwesomeIcon icon={filter.icon} />}
+      </DropdownButton.StyledIcon>
+      {filter.label}
+    </DropdownButton.StyledDropdownItem>
+  ));
+
+  function renderFilterDropdown(selectedFilter: FilterType) {
+    return [
       <DropdownButton.StyledDropdownTopOption
         key={'selected-filter'}
         onClick={() => setSelectedFilter(undefined)}
@@ -115,20 +121,22 @@ export function FilterDropdownButton({
           {value}
         </DropdownButton.StyledDropdownItem>
       )),
-            ]
+    ];
-        : availableFilters.map((filter, index) => (
+  }
-            <DropdownButton.StyledDropdownItem
+
-              key={`select-filter-${index}`}
+  return (
-              onClick={() => {
+    <DropdownButton
-                setSelectedFilter(filter);
+      label="Filter"
-              }}
+      isActive={filters.length > 0}
+      isUnfolded={isUnfolded}
+      setIsUnfolded={setIsUnfolded}
+      resetState={resetState}
     >
-              <DropdownButton.StyledIcon>
+      {selectedFilter
-                {filter.icon && <FontAwesomeIcon icon={filter.icon} />}
+        ? isOptionUnfolded
-              </DropdownButton.StyledIcon>
+          ? renderSelectOptionItems
-              {filter.label}
+          : renderFilterDropdown(selectedFilter)
-            </DropdownButton.StyledDropdownItem>
+        : renderSelectFilterITems}
-          ))}
     </DropdownButton>
   );
 }