Group settings by category and display with category title.

web-ui/src/pages/SettingsPage.jsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { UPDATE_TOAST } from '../context/actions';
 import { AppContext } from '../context/AppContext';
-import { Button } from '@mui/material';
+import { Button, Typography } from '@mui/material';
 import {
   SettingsBoolean,
   SettingsColor,
@@ -11,6 +11,7 @@ import {
 } from '../components/settings';
 import { putOption, postOption, getAllOptions } from '../api/settings';
 import { selectCsrfToken } from '../context/selectors';
+import { titleCase } from '../helpers/strings';
 import './SettingsPage.css';
 
 const displayName = 'SettingsPage';
@@ -42,35 +43,48 @@ const SettingsPage = () => {
         option.exists = option.id != '00000000-0000-0000-0000-000000000000';
       }
 
-      // Store them and upate the state.
-      setSettingsControls(allOptions);
+      // Sort the options by category, store them, and upate the state.
+      setSettingsControls(
+        allOptions.sort((l, r) => l.category.localeCompare(r.category)));
     };
     fetchData();
   }, []);
 
-  /* 
-    for specific settings, add a handleFunction to the settings object
-    format should be handleSetting and then add it to the handlers object
-    with the setting name as the key
-  */
+  // For specific settings, add a handleFunction to the settings object.
+  // Format should be handleSetting and then add it to the handlers object
+  // with the setting name as the key.
   const handleLogoUrl = file => {
     if (csrf) {
-      // TODO: need to have a storage bucket to upload the file to
+      // TODO: Need to upload the file to a storage bucket...
+      dispatch({
+        type: UPDATE_TOAST,
+        payload: {
+          severity: 'warning',
+          toast: "The Logo URL setting has yet to be implemented.",
+        }
+      });
     }
   };
 
-  const handlePulseEmailFrequency = (event) => {
-    const key = 'PULSE_EMAIL_FREQUENCY';
+  const keyedHandler = (key, event) => {
     if (handlers[key]) {
       handlers[key].setting.value = event.target.value;
       setState({update: true});
     }
   };
 
+  const handlePulseEmailFrequency = (event) => {
+    keyedHandler('PULSE_EMAIL_FREQUENCY', event);
+  };
+
   const handlers = {
     // File handlers do not modify settings values and, therefore, do not
-    // need to keep a reference to the setting object.
-    LOGO_URL: handleLogoUrl,
+    // need to keep a reference to the setting object.  However, they do need
+    // a file reference object.
+    LOGO_URL: {
+      onChange: handleLogoUrl,
+      setting: fileRef,
+    },
 
     // All others need to provide an `onChange` method and a `setting` object.
     PULSE_EMAIL_FREQUENCY: {
@@ -86,16 +100,16 @@ const SettingsPage = () => {
         if (setting.type.toUpperCase() === 'FILE') {
           return {
             ...setting,
-            handleFunction: handler,
-            fileRef: fileRef
+            handleFunction: handler.onChange,
+            fileRef: handler.setting,
           };
         }
 
         handler.setting = setting;
         return { ...setting, handleChange: handler.onChange };
       }
 
-      console.log(`WARNING: No handler for ${setting.name}`);
+      console.warn(`WARNING: No handler for ${setting.name}`);
       return setting;
     });
   };
@@ -164,8 +178,22 @@ const SettingsPage = () => {
   return (
     <div className="settings-page">
       {updatedSettingsControls.map((componentInfo, index) => {
+        const categories = {};
         const Component = componentMapping[componentInfo.type.toUpperCase()];
-        return <Component key={index} {...componentInfo} />;
+        const info = {...componentInfo, name: titleCase(componentInfo.name)};
+        if (categories[info.category]) {
+          return <Component key={index} {...info} />;
+        } else {
+          categories[info.category] = true;
+          return (
+            <>
+            <Typography variant="h4"
+                        sx={{textDecoration: 'underline'}}
+                        display="inline">{titleCase(info.category)}</Typography>
+            <Component key={index} {...info} />
+            </>
+          );
+        }
       })}
       <div className="buttons">
         <Button