From 6ed630a4ffaffa1cc9af6a1033dc1dd4a5328f7a Mon Sep 17 00:00:00 2001
From: dleadbetter <>
Date: Mon, 13 May 2024 07:15:50 -0400
Subject: [PATCH] CDC #157 - Adding useUserDefinedColumns hook

---
 .../src/components/UserDefinedFieldsForm.js   | 11 +--
 .../src/constants/DataTypes.js                | 15 ++++
 .../src/hooks/UserDefinedFields.js            | 85 +++++++++++++++++++
 packages/user-defined-fields/src/index.js     |  3 +
 4 files changed, 104 insertions(+), 10 deletions(-)
 create mode 100644 packages/user-defined-fields/src/constants/DataTypes.js
 create mode 100644 packages/user-defined-fields/src/hooks/UserDefinedFields.js

diff --git a/packages/user-defined-fields/src/components/UserDefinedFieldsForm.js b/packages/user-defined-fields/src/components/UserDefinedFieldsForm.js
index 8c9e57e4..d5ec445f 100644
--- a/packages/user-defined-fields/src/components/UserDefinedFieldsForm.js
+++ b/packages/user-defined-fields/src/components/UserDefinedFieldsForm.js
@@ -10,6 +10,7 @@ import React, {
 } from 'react';
 import { Form } from 'semantic-ui-react';
 import _ from 'underscore';
+import { DataTypes } from '../constants/DataTypes';
 import UserDefinedFieldsService from '../services/UserDefinedFields';
 
 type Props = {
@@ -22,16 +23,6 @@ type Props = {
   tableName?: string
 };
 
-const DataTypes = {
-  boolean: 'Boolean',
-  date: 'Date',
-  number: 'Number',
-  richText: 'RichText',
-  select: 'Select',
-  string: 'String',
-  text: 'Text'
-};
-
 const UserDefinedFieldsForm: ComponentType<any> = (props: Props) => {
   const [fields, setFields] = useState([]);
 
diff --git a/packages/user-defined-fields/src/constants/DataTypes.js b/packages/user-defined-fields/src/constants/DataTypes.js
new file mode 100644
index 00000000..22266994
--- /dev/null
+++ b/packages/user-defined-fields/src/constants/DataTypes.js
@@ -0,0 +1,15 @@
+// @flow
+
+const DataTypes = {
+  boolean: 'Boolean',
+  date: 'Date',
+  number: 'Number',
+  richText: 'RichText',
+  select: 'Select',
+  string: 'String',
+  text: 'Text'
+};
+
+export {
+  DataTypes
+};
diff --git a/packages/user-defined-fields/src/hooks/UserDefinedFields.js b/packages/user-defined-fields/src/hooks/UserDefinedFields.js
new file mode 100644
index 00000000..66d6350e
--- /dev/null
+++ b/packages/user-defined-fields/src/hooks/UserDefinedFields.js
@@ -0,0 +1,85 @@
+// @flow
+
+import { BooleanIcon } from '@performant-software/semantic-components';
+import { Date as DateUtils } from '@performant-software/shared-components';
+import React, { useEffect, useMemo, useState } from 'react';
+import _ from 'underscore';
+import { DataTypes } from '../constants/DataTypes';
+import UserDefinedFieldsService from '../services/UserDefinedFields';
+
+/**
+ * Returns the loading state and list of user defined columns for the passed defineable ID and defineable type.
+ *
+ * @param defineableId
+ * @param defineableType
+ *
+ * @returns {{userDefinedColumns: [], loading: boolean}}
+ */
+const useUserDefinedColumns = (defineableId, defineableType) => {
+  const [fields, setFields] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  /**
+   * Memo-izes the columns.
+   *
+   * @type {[]}
+   */
+  const userDefinedColumns = useMemo(() => {
+    const columns = [];
+
+    _.each(fields, (field) => {
+      const column = {
+        name: field.column_name,
+        label: field.column_name,
+        hidden: true,
+        sortable: true
+      };
+
+      if (field.data_type === DataTypes.boolean) {
+        columns.push({
+          ...column,
+          render: (item) => (
+            <BooleanIcon
+              value={item.user_defined[field.uuid]}
+            />
+          )
+        });
+      }
+
+      if (field.data_type === DataTypes.date) {
+        columns.push({
+          ...column,
+          resolve: (item) => DateUtils.formatDate(item.user_defined[field.uuid])
+        });
+      }
+
+      if (field.data_type !== DataTypes.richText) {
+        columns.push({
+          ...column,
+          resolve: (item) => item.user_defined[field.uuid]
+        });
+      }
+    });
+
+    return columns;
+  }, [fields]);
+
+  /**
+   * Fetches the user defined fields for the passed defineable ID and defineable type.
+   */
+  useEffect(() => {
+    setLoading(true);
+
+    UserDefinedFieldsService
+      .fetchAll({ defineable_id: defineableId, defineable_type: defineableType })
+      .then(({ data }) => setFields(data.user_defined_fields))
+      .finally(() => setLoading(false));
+  }, [defineableId, defineableId]);
+
+  return {
+    loading,
+    userDefinedColumns
+  };
+};
+
+export default useUserDefinedColumns;
diff --git a/packages/user-defined-fields/src/index.js b/packages/user-defined-fields/src/index.js
index 8b26adda..1b595d84 100644
--- a/packages/user-defined-fields/src/index.js
+++ b/packages/user-defined-fields/src/index.js
@@ -7,6 +7,9 @@ export { default as UserDefinedFieldsEmbeddedList } from './components/UserDefin
 export { default as UserDefinedFieldsForm } from './components/UserDefinedFieldsForm';
 export { default as UserDefinedFieldsList } from './components/UserDefinedFieldsList';
 
+// Hooks
+export { default as useUserDefinedColumns } from './hooks/UserDefinedFields';
+
 // Services
 export { default as UserDefinedFieldsService } from './services/UserDefinedFields';