apply double parenthesis for filter logic

Nickz22 · Oct 4, 2024 · 0e333b4 · 0e333b4
1 parent 87c36ad
commit 0e333b4
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git a/client/src/components/FilterContainer/FilterContainer.js b/client/src/components/FilterContainer/FilterContainer.js
@@ -353,7 +353,18 @@ const FilterContainer = ({
             logicErrors[0] ||
             "Use AND, OR, and numbers to create logic (e.g., 1 AND 2 OR 3)"
           }
-          onChange={(e) => handleLogicChange(e.target.value, onLogicChange)}
+          onChange={(e) => {
+            const value = e.target.value;
+
+            handleLogicChange(value, onLogicChange);
+          }}
+          onBlur={(e) => {
+            let value = e.target.value;
+            value = value.replace(/^\(\((.*)\)\)$/, "$1");
+            const formattedValue = `((${value}))`;
+
+            handleLogicChange(formattedValue, onLogicChange);
+          }}
         />
       </Box>
     </Box>

diff --git a/client/src/components/FilterContainer/useFilterLogic.js b/client/src/components/FilterContainer/useFilterLogic.js
@@ -122,16 +122,29 @@ export const useFilterLogic = (initialFilterContainer, initialFilterFields) => {
   );
 
   const handleAddFilter = useCallback(() => {
-    setFilterContainer((prevContainer) => ({
-      ...(prevContainer
-        ? prevContainer
-        : { filters: [], filterLogic: "", name: "", direction: "" }),
-      filters: [
-        ...prevContainer.filters,
-        { field: "", operator: "", value: "", dataType: "string" },
-      ],
-      filterLogic: prevContainer.filters.length === 0 ? "1" : `${prevContainer.filterLogic} AND ${prevContainer.filters.length + 1}`
-    }));
+    setFilterContainer((prevContainer) => {
+      const isInitialFilter = prevContainer.filters.length === 0;
+      const newFilterIndex = prevContainer.filters.length + 1;
+
+      const baseLogic = isInitialFilter
+        ? "1"
+        : `${prevContainer.filterLogic} AND ${newFilterIndex}`;
+
+      const formattedLogic = prevContainer.filterLogic.startsWith("((") && prevContainer.filterLogic.endsWith("))")
+        ? baseLogic
+        : `((${baseLogic}))`;
+
+      return {
+        ...(prevContainer
+          ? prevContainer
+          : { filters: [], filterLogic: "", name: "", direction: "" }),
+        filters: [
+          ...prevContainer.filters,
+          { field: "", operator: "", value: "", dataType: "string" },
+        ],
+        filterLogic: formattedLogic
+      }
+    });
   }, []);
 
   const handleDeleteFilter = useCallback(