UDCSL #28 - Updating ReferenceCodeFormDropdown to allow lookup of exi…

…sting reference tables (by key) and creation of new reference tables

packages/semantic-ui/src/components/ReferenceCodeFormDropdown.js

@@ -1,7 +1,7 @@
 // @flow
 
 import { ReferenceTablesService } from '@performant-software/shared-components';
-import React, { type ComponentType, useState } from 'react';
+import React, { type ComponentType, useEffect, useState } from 'react';
 import { Form } from 'semantic-ui-react';
 import EditModal from './EditModal';
 import ReferenceCodeDropdown from './ReferenceCodeDropdown';
@@ -16,17 +16,30 @@ type Props = {
 };
 
 const ReferenceCodeFormDropdown: ComponentType<any> = (props: Props) => {
-  const [modal, setModal] = useState(false);
-  const [key, setKey] = useState(0);
-
   const {
     error,
     label,
     required,
-    referenceTable,
+    referenceTable: key,
     ...rest
   } = props;
 
+  const [modal, setModal] = useState(false);
+  const [dropdownKey, setDropdownKey] = useState(0);
+  const [referenceTable, setReferenceTable] = useState({ key });
+
+  /**
+   * Looks up the existing reference table base on the passed key.
+   */
+  useEffect(() => (
+    ReferenceTablesService
+      .fetchByKey(key)
+      .then(({ data }) => setReferenceTable((prevTable) => ({
+        ...prevTable,
+        ...data.reference_table
+      })))
+  ), [key]);
+
   return (
     <>
       <Form.Input
@@ -35,33 +48,28 @@ const ReferenceCodeFormDropdown: ComponentType<any> = (props: Props) => {
           <ReferenceCodeFormLabel
             label={label}
             onClick={() => setModal(true)}
-            referenceTable={referenceTable}
+            referenceTable={referenceTable.key}
           />
         )}
         required={required}
       >
         <ReferenceCodeDropdown
           {...rest}
           id={referenceTable}
-          referenceTable={referenceTable}
-          key={key}
+          referenceTable={referenceTable.key}
+          key={dropdownKey}
         />
       </Form.Input>
       { modal && (
         <EditModal
           component={ReferenceTableModal}
-          item={{ id: referenceTable }}
+          item={referenceTable}
           onClose={() => setModal(false)}
-          onInitialize={(id) => (
-            ReferenceTablesService
-              .fetchOne(id)
-              .then(({ data }) => data.reference_table)
-          )}
           onSave={(record) => (
             ReferenceTablesService
               .save(record)
               .then(({ data }) => data.reference_table)
-              .then(() => setKey((prevKey) => prevKey + 1))
+              .then(() => setDropdownKey((prevKey) => prevKey + 1))
               .finally(() => setModal(false))
           )}
         />

packages/shared/src/services/ReferenceTables.js

@@ -7,6 +7,17 @@ import ReferenceTable from '../transforms/ReferenceTable';
  * Class responsible for handling all reference table API requests.
  */
 class ReferenceTables extends BaseService {
+  /**
+   * Calls the find_by_key API end point for reference tables.
+   *
+   * @param key
+   *
+   * @returns {Promise<AxiosResponse<any>>}
+   */
+  fetchByKey(key) {
+    return this.getAxios().get(`${this.getBaseUrl()}/find_by_key`, { params: { key } });
+  }
+
   /**
    * Returns the reference tables base URL.
    *