From ddf25fbb6559d93dd5b9105bd4a0a952fc72154b Mon Sep 17 00:00:00 2001
From: James <james@trbl.design>
Date: Mon, 19 Apr 2021 19:49:49 -0400
Subject: [PATCH] feat: modifies relationship field to react to changing
 relationTo

---
 .../forms/field-types/Relationship/index.tsx  | 30 +++++++++++++------
 .../Relationship/optionsReducer.ts            |  4 +--
 .../forms/field-types/Relationship/types.ts   |  8 ++---
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/admin/components/forms/field-types/Relationship/index.tsx b/src/admin/components/forms/field-types/Relationship/index.tsx
index 4d442ca6f8..4fb5cc4fbc 100644
--- a/src/admin/components/forms/field-types/Relationship/index.tsx
+++ b/src/admin/components/forms/field-types/Relationship/index.tsx
@@ -51,7 +51,6 @@ const Relationship: React.FC<Props> = (props) => {
   const formProcessing = useFormProcessing();
 
   const hasMultipleRelations = Array.isArray(relationTo);
-  const [relations] = useState(Array.isArray(relationTo) ? relationTo : [relationTo]);
   const [options, dispatchOptions] = useReducer(optionsReducer, required ? [] : [{ value: 'null', label: 'None' }]);
   const [lastFullyLoadedRelation, setLastFullyLoadedRelation] = useState(-1);
   const [lastLoadedPage, setLastLoadedPage] = useState(1);
@@ -108,6 +107,7 @@ const Relationship: React.FC<Props> = (props) => {
           addOptions(data, relation);
           setLastLoadedPage((l) => l + 1);
         } else {
+          const relations = Array.isArray(relationTo) ? relationTo : [relationTo];
           const { data, relation } = lastPage;
           addOptions(data, relation);
           setLastFullyLoadedRelation(relations.indexOf(relation));
@@ -115,15 +115,16 @@ const Relationship: React.FC<Props> = (props) => {
         }
       });
     }
-  }, [addOptions, api, collections, relations, search, serverURL]);
+  }, [addOptions, api, collections, relationTo, search, serverURL]);
 
   const getNextOptions = useCallback((params = {} as Record<string, unknown>) => {
     const clear = params?.clear;
+    const relations = Array.isArray(relationTo) ? relationTo : [relationTo];
 
     if (clear) {
       dispatchOptions({
-        type: 'REPLACE',
-        payload: required ? [] : [{ value: 'null', label: 'None' }],
+        type: 'CLEAR',
+        required,
       });
 
       setLastFullyLoadedRelation(-1);
@@ -137,7 +138,7 @@ const Relationship: React.FC<Props> = (props) => {
         lastLoadedPage,
       });
     }
-  }, [errorLoading, required, lastFullyLoadedRelation, relations, getResults, lastLoadedPage]);
+  }, [errorLoading, required, lastFullyLoadedRelation, relationTo, getResults, lastLoadedPage]);
 
   const findOptionsByValue = useCallback((): Option | Option[] => {
     if (value) {
@@ -246,6 +247,16 @@ const Relationship: React.FC<Props> = (props) => {
 
   useEffect(() => {
     const getFirstResults = async () => {
+      dispatchOptions({
+        type: 'CLEAR',
+        required,
+      });
+
+      setLastLoadedPage(1);
+      setLastFullyLoadedRelation(-1);
+      setHasLoadedFirstOptions(false);
+
+      const relations = Array.isArray(relationTo) ? relationTo : [relationTo];
       const res = await fetch(`${serverURL}${api}/${relations[0]}?limit=${maxResultsPerRequest}&depth=0`);
 
       if (res.ok) {
@@ -297,24 +308,25 @@ const Relationship: React.FC<Props> = (props) => {
     };
 
     getFirstResults();
-  }, [addOptions, api, relations, serverURL]);
+  }, [addOptions, api, required, relationTo, serverURL]);
 
   useEffect(() => {
     if (debouncedSearch) {
       dispatchOptions({
-        type: 'REPLACE',
-        payload: required ? [] : [{ value: 'null', label: 'None' }],
+        type: 'CLEAR',
+        required,
       });
 
       setLastLoadedPage(1);
       setLastFullyLoadedRelation(-1);
+      const relations = Array.isArray(relationTo) ? relationTo : [relationTo];
 
       getResults({
         relations,
         lastLoadedPage: 1,
       });
     }
-  }, [getResults, debouncedSearch, relations, required]);
+  }, [getResults, debouncedSearch, relationTo, required]);
 
   const classes = [
     'field-type',
diff --git a/src/admin/components/forms/field-types/Relationship/optionsReducer.ts b/src/admin/components/forms/field-types/Relationship/optionsReducer.ts
index 2eca143c19..8ea2dac561 100644
--- a/src/admin/components/forms/field-types/Relationship/optionsReducer.ts
+++ b/src/admin/components/forms/field-types/Relationship/optionsReducer.ts
@@ -16,8 +16,8 @@ const reduceToIDs = (options) => options.reduce((ids, option) => {
 
 const optionsReducer = (state: Option[], action: Action): Option[] => {
   switch (action.type) {
-    case 'REPLACE': {
-      return action.payload;
+    case 'CLEAR': {
+      return action.required ? [] : [{ value: 'null', label: 'None' }];
     }
 
     case 'ADD': {
diff --git a/src/admin/components/forms/field-types/Relationship/types.ts b/src/admin/components/forms/field-types/Relationship/types.ts
index a135cdf103..087131c0e3 100644
--- a/src/admin/components/forms/field-types/Relationship/types.ts
+++ b/src/admin/components/forms/field-types/Relationship/types.ts
@@ -17,9 +17,9 @@ export type Option = {
   options?: Option[]
 }
 
-type REPLACE = {
-  type: 'REPLACE'
-  payload: Option[]
+type CLEAR = {
+  type: 'CLEAR'
+  required: boolean
 }
 
 type ADD = {
@@ -30,7 +30,7 @@ type ADD = {
   collection: CollectionConfig
 }
 
-export type Action = REPLACE | ADD
+export type Action = CLEAR | ADD
 
 export type ValueWithRelation = {
   relationTo: string