CDC #157 - Adding useUserDefinedColumns hook

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([]);
 

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
+};

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;

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';