Merge pull request #1696 from Northeastern-Electric-Racing/1249-create-enum-pipe

#1249 Created displayEnum pipe and applied to settings page

Author: RChandler234

src/frontend/src/pages/SettingsPage/Settings.tsx

@@ -16,6 +16,7 @@ import { useCurrentUser, useCurrentUserSecureSettings, useSingleUserSettings } f
 import ErrorPage from '../ErrorPage';
 import UserSecureSettings from './UserSecureSettings/UserSecureSettings';
 import { useAllTeams } from '../../hooks/teams.hooks';
+import { displayEnum } from '../../utils/pipes';
 
 const NERSwitch = styled((props: SwitchProps) => (
   <Switch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
@@ -152,7 +153,7 @@ const Settings: React.FC = () => {
             <DetailDisplay label="Email ID" content={String(user.emailId)} />
           </Grid>
           <Grid item xs={12} sm={6} md={4} lg>
-            <DetailDisplay label="Role" content={user.role} />
+            <DetailDisplay label="Role" content={displayEnum(user.role)} />
           </Grid>
           <Grid item xs={12} sm={6} md={4} lg>
             <DetailDisplay

src/frontend/src/pages/SettingsPage/UserSettings/UserSettingsView.tsx

@@ -8,6 +8,7 @@ import { UserSettings } from 'shared';
 import ExternalLink from '../../../components/ExternalLink';
 import DetailDisplay from '../../../components/DetailDisplay';
 import { Box } from '@mui/system';
+import { displayEnum } from '../../../utils/pipes';
 
 export interface UserSettingsViewProps {
   settings: UserSettings;
@@ -26,7 +27,7 @@ const UserSettingsView: React.FC<UserSettingsViewProps> = ({ settings }) => {
   return (
     <Grid container spacing={2}>
       <Grid item xs={12} sm={6}>
-        <DetailDisplay label="Default Theme" content={settings.defaultTheme} />
+        <DetailDisplay label="Default Theme" content={displayEnum(settings.defaultTheme)} />
       </Grid>
       <Grid item xs={12} sm={6}>
         <SlackId settings={settings} />

src/frontend/src/tests/pages/SettingsPage/UserSettings/UserSettingsView.test.tsx

@@ -6,6 +6,7 @@
 import { render, screen } from '../../../test-support/test-utils';
 import { exampleUserSettingsLight } from '../../../test-support/test-data/user-settings.stub';
 import UserSettingsView from '../../../../pages/SettingsPage/UserSettings/UserSettingsView';
+import { displayEnum } from '../../../../utils/pipes';
 
 /**
  * Sets up the component under test with the desired values and renders it.
@@ -17,6 +18,6 @@ const renderComponent = () => {
 describe('user settings view component', () => {
   it('renders default theme', () => {
     renderComponent();
-    expect(screen.getByText(exampleUserSettingsLight.defaultTheme)).toBeInTheDocument();
+    expect(screen.getByText(displayEnum(exampleUserSettingsLight.defaultTheme))).toBeInTheDocument();
   });
 });

src/frontend/src/utils/pipes.ts

@@ -141,3 +141,17 @@ export const codeAndRefundSourceName = (refundSource: ClubAccount) => {
       return `${BUDGET_ACCOUNT_CODE} - ${refundSource}`;
   }
 };
+
+// Takes in an enum string to capitalize first letter of each word and gets rid of underscore
+export const displayEnum = (enumString: string) => {
+  enumString = enumString.toLowerCase();
+  while (enumString.indexOf('_') !== -1) {
+    enumString =
+      enumString.substring(0, enumString.indexOf('_')) +
+      ' ' +
+      enumString.charAt(enumString.indexOf('_') + 1).toUpperCase() +
+      enumString.slice(enumString.indexOf('_') + 2);
+  }
+  enumString = enumString.charAt(0).toUpperCase() + enumString.slice(1);
+  return enumString;
+};