make getEdgeFilters reusable selector, fix issue when there are no pr…

…ompts
complexdatacollective · Dec 5, 2024 · 898f7b6 · 898f7b6
1 parent 32b0ddc
commit 898f7b6
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 34 deletions.
diff --git a/src/components/sections/Filter.js b/src/components/sections/Filter.js
@@ -33,30 +33,24 @@ const Filter = () => {
   );
 
   // get edge creation and display values for edges across all prompts
-  // will be used to conditionally render a warning tip
-
-  // start by getting the prompts
-  const prompts = useSelector((state) => getFormValue(state, 'prompts'));
-
-  const promptsWithEdges = prompts.filter(
-    (prompt) => prompt?.edges?.create || prompt?.edges?.display,
-  );
-
-  const edgeCreationValues = promptsWithEdges.map(
-    (prompt) => prompt.edges.create,
-  );
-
-  const edgeDisplayValues = promptsWithEdges.flatMap(
-    (prompt) => prompt.edges.display,
-  );
-
   let shouldShowWarning = false;
+  const prompts = useSelector((state) => getFormValue(state, 'prompts'));
 
-  if (edgeCreationValues.length > 0 || edgeDisplayValues.length > 0) {
-    shouldShowWarning = getEdgeFilteringWarning(
-      currentValue.rules,
-      [...edgeCreationValues, ...edgeDisplayValues],
-    );
+  if (prompts) {
+    const edgeCreationValues = prompts
+      .filter((prompt) => prompt?.edges?.create)
+      .map((prompt) => prompt.edges.create);
+
+    const edgeDisplayValues = prompts
+      .filter((prompt) => prompt?.edges?.display)
+      .flatMap((prompt) => prompt.edges.display);
+
+    if (edgeCreationValues.length > 0 || edgeDisplayValues.length > 0) {
+      shouldShowWarning = getEdgeFilteringWarning(
+        currentValue.rules,
+        [...edgeCreationValues, ...edgeDisplayValues],
+      );
+    }
   }
 
   const handleToggleChange = useCallback(

diff --git a/src/components/sections/SociogramPrompts/PromptFieldsEdges.js b/src/components/sections/SociogramPrompts/PromptFieldsEdges.js
@@ -7,7 +7,7 @@ import { change, Field, formValueSelector } from 'redux-form';
 import * as Fields from '@codaco/ui/lib/components/Fields';
 import { Section, Row } from '@components/EditorLayout';
 import Tip from '../../Tip';
-import { getEdgeFilteringWarning, getEdgesForSubject } from './selectors';
+import { getEdgeFilteringWarning, getEdgeFilters, getEdgesForSubject } from './selectors';
 
 const DisplayEdges = ({ form, entity, type }) => {
   const dispatch = useDispatch();
@@ -30,11 +30,7 @@ const DisplayEdges = ({ form, entity, type }) => {
     dispatch(change(form, 'edges.display', displayEdgesWithCreatedEdge));
   }, [createEdge]);
 
-  // get the current filters from the stage
-  const getStageValue = formValueSelector('edit-stage');
-  const currentFilters = useSelector((state) => getStageValue(state, 'filter'));
-  const edgeFilters = currentFilters.rules.filter((rule) => rule.type === 'edge');
-
+  const edgeFilters = useSelector((state) => getEdgeFilters(state));
   const shouldShowNetworkFilterWarning = getEdgeFilteringWarning(edgeFilters, displayEdges);
 
   return (

diff --git a/src/components/sections/SociogramPrompts/PromptFieldsTapBehaviour.js b/src/components/sections/SociogramPrompts/PromptFieldsTapBehaviour.js
@@ -9,7 +9,7 @@ import Tip from '@components/Tip';
 import EntitySelectField from '../fields/EntitySelectField/EntitySelectField';
 import DetachedField from '../../DetachedField';
 import VariablePicker from '../../Form/Fields/VariablePicker/VariablePicker';
-import { getHighlightVariablesForSubject, getEdgeFilteringWarning } from './selectors';
+import { getHighlightVariablesForSubject, getEdgeFilteringWarning, getEdgeFilters } from './selectors';
 import { actionCreators as codebookActions } from '../../../ducks/modules/protocol/codebook';
 
 // TODO: Move this somewhere else!
@@ -104,11 +104,7 @@ const TapBehaviour = ({
 
   const selectedValue = useSelector((state) => getFormValue(state, 'edges.create'));
 
-  // get the current edge filters from the stage
-  const getStageValue = formValueSelector('edit-stage');
-  const currentFilters = useSelector((state) => getStageValue(state, 'filter'));
-  const edgeFilters = currentFilters.rules.filter((rule) => rule.type === 'edge');
-
+  const edgeFilters = useSelector((state) => getEdgeFilters(state));
   const showNetworkFilterWarning = getEdgeFilteringWarning(edgeFilters, [selectedValue]);
 
   return (

diff --git a/src/components/sections/SociogramPrompts/selectors.js b/src/components/sections/SociogramPrompts/selectors.js
@@ -1,6 +1,7 @@
 import { getCodebook } from '@selectors/protocol';
 import { getVariableOptionsForSubject } from '@selectors/codebook';
 import { asOptions } from '@selectors/utils';
+import { formValueSelector } from 'redux-form';
 
 export const getLayoutVariablesForSubject = (state, { entity, type }) => {
   const variableOptions = getVariableOptionsForSubject(state, { entity, type });
@@ -33,6 +34,18 @@ export const getEdgesForSubject = (state) => {
   return codebookOptions;
 };
 
+export const getEdgeFilters = (state) => {
+  const getStageValue = formValueSelector('edit-stage');
+  const currentFilters = getStageValue(state, 'filter');
+
+  if (!currentFilters || !currentFilters.rules) {
+    return [];
+  }
+  const edgeFilters = currentFilters.rules.filter((rule) => rule.type === 'edge');
+
+  return edgeFilters;
+};
+
 // compare selected edges to edge filters
 // there are four cases to consider:
 // 1. selected edge is in the filters with rule EXISTS -- no warning