Authentication and major rewriting

src/pages/fields/Fields.js

-import React, { useState, useCallback, useEffect, memo, useRef } from 'react';
-import store from '../../store/index';
+import React, { useState, useCallback, useEffect, memo } from 'react';
 import {
   EuiForm,
   EuiPageContent,
@@ -16,6 +15,11 @@ import {
 } from '@elastic/eui';
 import { ShowAlert } from '../../components/Common';
 import Papa from 'papaparse';
+import {
+  getPublicFields,
+  deleteAllStdFields,
+  createStdField,
+} from '../../services/GatekeeperService';
 
 const renderFiles = (files) => {
   if (files && files.length > 0) {
@@ -33,7 +37,7 @@ const renderFiles = (files) => {
   }
 };
 
-const NewFieldsForm = memo(({ files, globalState, onFilePickerChange, onSaveField }) => {
+const NewFieldsForm = memo(({ files, onFilePickerChange, onSaveField }) => {
   return (
     <>
       <EuiForm component="form">
@@ -56,7 +60,7 @@ const NewFieldsForm = memo(({ files, globalState, onFilePickerChange, onSaveFiel
         </EuiFormRow>
         <EuiFormRow label="">
           {
-            <EuiButton fill onClick={onSaveField} isLoading={globalState.isLoading}>
+            <EuiButton fill onClick={onSaveField}>
               Load
             </EuiButton>
           }
@@ -66,69 +70,47 @@ const NewFieldsForm = memo(({ files, globalState, onFilePickerChange, onSaveFiel
   );
 });
 
-const StdFields = memo(
-  ({
-    stdFields,
-    stdFieldColumns,
-    tableref,
-    pagination,
-    sorting,
-    onTableChange,
-    onSelection,
-    search,
-    isLoading,
-  }) => {
-    return (
-      <>
-        <EuiForm component="form">
-          <EuiFormRow label="Uploaded standard fields" fullWidth>
-            <EuiInMemoryTable
-              // ref={tableref}
-              // itemId="id"
-              // isSelectable={true}
-              items={stdFields}
-              loading={isLoading}
-              columns={stdFieldColumns}
-              search={search}
-              pagination={true}
-              sorting={true}
-              // onChange={onTableChange}
-              // rowheader={"field_name"}
-              // selection={onSelection}
-            />
-          </EuiFormRow>
-        </EuiForm>
-      </>
-    );
-  }
-);
+const StdFields = memo(({ stdFields, stdFieldColumns }) => {
+  return (
+    <>
+      <EuiForm component="form">
+        <EuiFormRow label="Uploaded standard fields" fullWidth>
+          <EuiInMemoryTable
+            items={stdFields}
+            columns={stdFieldColumns}
+            search={{
+              box: {
+                incremental: true,
+              },
+            }}
+            pagination={true}
+            sorting={true}
+          />
+        </EuiFormRow>
+      </EuiForm>
+    </>
+  );
+});
 let debounceTimeoutId;
 let requestTimeoutId;
 
 const Fields = (props) => {
-  const [globalState, globalActions] = store();
   const [selectedTabNumber, setSelectedTabNumber] = useState(0);
   const [open, setOpen] = useState(false);
   const [alertMessage, setAlertMessage] = useState('');
   const [severity, setSeverity] = useState('info');
   const [files, setFiles] = useState();
-  const [fields, setFields] = useState([]);
+  const [loadedFields, setLoadedFields] = useState([]);
   const [stdFields, setStdFields] = useState([]);
-  const [pageIndex, setPageIndex] = useState(0);
-  const [pageSize, setPageSize] = useState(5);
-  const [sortDirection, setSortDirection] = useState('asc');
-  const [sortField, setSortField] = useState('field_name');
-  const [totalItemCount, setTotalItemCount] = useState(0);
-  const tableref = useRef();
-  const [isLoading, setIsLoading] = useState(false);
+  const [filteredFields, setFilteredFields] = useState([]);
 
   const loadStdFields = useCallback(async () => {
-    const fields = await globalActions.source.publicFields();
+    const fields = await getPublicFields();
     if (fields) {
-      setStdFields((prevFields) => [...prevFields, ...fields]);
-      setTotalItemCount(typeof fields === typeof undefined ? 0 : fields.length);
+      setStdFields(fields);
+      setFilteredFields(fields);
     }
-  }, [globalActions.source]);
+  }, []);
 
   useEffect(() => {
     // clean up controller
@@ -138,69 +120,25 @@ const Fields = (props) => {
     }
     // cancel subscription to useEffect
     return () => (isSubscribed = false);
-  }, [totalItemCount, loadStdFields]);
+  }, [loadStdFields]);
 
   const onQueryChange = ({ query }) => {
     clearTimeout(debounceTimeoutId);
-    clearTimeout(requestTimeoutId);
-
     debounceTimeoutId = setTimeout(() => {
-      setIsLoading(true);
-      requestTimeoutId = setTimeout(() => {
-        const items = stdFields.filter((field) => {
-          const normalizedFieldName =
-            `${field.field_name} ${field.Definition_and_comment}`.toLowerCase();
-          const normalizedQuery = query.text.toLowerCase();
-          return normalizedFieldName.indexOf(normalizedQuery) !== -1;
-        });
-        if (query.text !== '') {
-          setIsLoading(false);
-          setStdFields(items);
-        } else {
-          loadStdFields();
-        }
-      }, 1000);
+      const items = stdFields.filter((field) => {
+        const normalizedFieldName =
+          `${field.field_name} ${field.Definition_and_comment}`.toLowerCase();
+        const normalizedQuery = query.text.toLowerCase();
+        return normalizedFieldName.indexOf(normalizedQuery) !== -1;
+      });
+      if (query.text !== '') {
+        setFilteredFields(items);
+      } else {
+        setFilteredFields([]);
+      }
     }, 300);
   };
 
-  const search = {
-    onChange: onQueryChange,
-    box: {
-      incremental: true,
-    },
-  };
-
-  /*
-    const onSelection = {
-        selectable: source => !source.is_send,
-        onSelectionChange: onSelectionChange,
-        initialSelected: unsentSources,
-    }; */
-
-  const onTableChange = ({ page = {}, sort = {} }) => {
-    const { index: pageIndex, size: pageSize } = page;
-    const { field: sortField, direction: sortDirection } = sort;
-
-    setPageIndex(pageIndex);
-    setPageSize(pageSize);
-    setSortField(sortField);
-    setSortDirection(sortDirection);
-  };
-
-  const pagination = {
-    pageIndex: pageIndex,
-    pageSize: pageSize,
-    totalItemCount: totalItemCount,
-    pageSizeOptions: [3, 5, 8],
-  };
-
-  const sorting = {
-    sort: {
-      field: sortField,
-      direction: sortDirection,
-    },
-  };
-
   const onFilePickerChange = async (files) => {
     setFiles(files);
     await handleSelectedFile(files);
@@ -209,8 +147,8 @@ const Fields = (props) => {
   const handleSelectedFile = async (files) => {
     for (const file of files) {
       const reader = new FileReader();
-      await reader.readAsText(file);
       reader.onload = () => handleData(reader.result);
+      reader.readAsText(file);
     }
   };
 
@@ -230,38 +168,70 @@ const Fields = (props) => {
       });
 
       result.data.forEach((item) => {
+        // lowercase the key
+        Object.keys(item).forEach((key) => {
+          const lowercasedKey = key.toLowerCase();
+          if (key !== lowercasedKey) {
+            item[lowercasedKey] = item[key];
+            delete item[key];
+          }
+        });
         rows.push(item);
       });
 
       if (columns && rows) {
-        // (preColumns => ([...preColumns, ...columns]))
-        setFields((preRows) => [...preRows, ...rows]);
+        setLoadedFields((preRows) => [...preRows, ...rows]);
       }
     }
   };
 
   const onSaveField = async () => {
-    if (fields) {
-      await globalActions.source.truncateStdField();
+    if (loadedFields) {
+      await deleteAllStdFields();
+      try {
+        for (const field of loadedFields) {
+          const {
+            cardinality,
+            category,
+            definition_and_comment,
+            field_name,
+            field_type,
+            isoptional,
+            is_optional,
+            ispublic,
+            is_public,
+            obligation_or_condition,
+            values,
+            list_url,
+            default_display_fields
+          } = field;
 
-      await fields.forEach((item) => {
-        globalActions.source.createStdField(
-          item.Category,
-          item.Field_name,
-          item.Definition_and_comment,
-          item.Obligation_or_condition,
-          item.Field_type,
-          item.Cardinality,
-          item.Values,
-          item.is_public,
-          false
-        );
-      });
+          console.log("fields: ", field);
+          const isOptional = isoptional || is_optional;
+          const isPublic = ispublic || is_public;
+          const response = await createStdField(
+            cardinality,
+            category,
+            definition_and_comment,
+            field_name,
+            field_type,
+            isOptional?.toString().toLowerCase() === 'true',
+            isPublic?.toString().toLowerCase() === 'true',
+            obligation_or_condition,
+            values,
+              list_url,
+              default_display_fields
+          );
+        }
 
-      setOpen(true);
-      setAlertMessage('Standard fields added.');
-      setSeverity('success');
-      loadStdFields();
+        // Reload fields after processing
+        loadStdFields();
+      } catch (error) {
+        console.error('Unexpected error during field saving:', error);
+        setOpen(true);
+        setAlertMessage('An unexpected error occurred.');
+        setSeverity('error');
+      }
     }
   };
 
@@ -285,6 +255,18 @@ const Fields = (props) => {
       field: 'Obligation_or_condition',
       name: 'Obligation or condition',
     },
+    {
+      field: 'cardinality',
+      name: 'Cardinality',
+    },
+    {
+      field: 'default_display_fields',
+      name: 'Default display fields',
+    },
+    {
+      field: 'list_url',
+      name: 'List URL',
+    },
     {
       field: 'values',
       name: 'Values',
@@ -303,7 +285,6 @@ const Fields = (props) => {
           <br />
           <NewFieldsForm
             files={files}
-            globalState={globalState}
             onFilePickerChange={onFilePickerChange}
             onSaveField={onSaveField}
           />
@@ -316,16 +297,7 @@ const Fields = (props) => {
       content: (
         <>
           <br />
-          <StdFields
-            stdFields={stdFields}
-            stdFieldColumns={stdFieldColumns}
-            pagination={pagination}
-            sorting={sorting}
-            tableref={tableref}
-            onTableChange={onTableChange}
-            search={search}
-            loading={isLoading}
-          />
+          <StdFields stdFields={stdFields} stdFieldColumns={stdFieldColumns} />
         </>
       ),
     },