Feature 2230 Prettier

web-ui/package.json

@@ -48,13 +48,14 @@
     "universal-cookie": "^4.0.4"
   },
   "scripts": {
-    "start": "vite",
+    "build-storybook": "storybook build",
     "build": "vite build",
-    "serve": "vite preview",
-    "test": "vitest",
     "coverage": "vitest run --coverage --watch=false",
+    "format": "prettier --write 'src/**/*.{css,html,js,jsx}'",
+    "serve": "vite preview",
+    "start": "vite",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "test": "vitest"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -88,7 +89,7 @@
     "jest-fetch-mock": "^3.0.3",
     "jsdom": "^24.0.0",
     "msw": "^2.2.13",
-    "prettier": "2.8.1",
+    "prettier": "3.2.5",
     "prop-types": "^15.8.1",
     "react-test-renderer": "^18.2.0",
     "storybook": "^8.0.4",

web-ui/src/App.css

@@ -9,9 +9,9 @@
 }
 
 @media print {
-    :root {
-      --nav-width: 0px;
-    }
+  :root {
+    --nav-width: 0px;
+  }
 
   .App {
     padding-left: 0;

web-ui/src/App.jsx

@@ -1,56 +1,56 @@
-import React from "react";
-import { Router } from "react-router-dom";
-import { ErrorBoundary } from "react-error-boundary";
-import { createBrowserHistory } from "history";
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { ErrorBoundary } from 'react-error-boundary';
+import { createBrowserHistory } from 'history';
 
-import Routes from "./components/routes/Routes";
-import Menu from "./components/menu/Menu";
-import ErrorFallback from "./pages/ErrorBoundaryPage";
-import { AppContextProvider } from "./context/AppContext";
-import SnackBarWithContext from "./components/snackbar/SnackBarWithContext";
-import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
-import { LocalizationProvider } from "@mui/x-date-pickers";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
+import Routes from './components/routes/Routes';
+import Menu from './components/menu/Menu';
+import ErrorFallback from './pages/ErrorBoundaryPage';
+import { AppContextProvider } from './context/AppContext';
+import SnackBarWithContext from './components/snackbar/SnackBarWithContext';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 
-import "./App.css";
+import './App.css';
 
 const customHistory = createBrowserHistory();
 
 const theme = createTheme({
   palette: {
     primary: {
-      light: "#6085d9",
-      main: "#2559a7",
-      dark: "#003177",
-      contrastText: "#fff",
+      light: '#6085d9',
+      main: '#2559a7',
+      dark: '#003177',
+      contrastText: '#fff'
     },
     secondary: {
-      light: "#ffe8a2",
-      main: "#feb672",
-      dark: "#c88645",
-      contrastText: "#000",
+      light: '#ffe8a2',
+      main: '#feb672',
+      dark: '#c88645',
+      contrastText: '#000'
     },
     background: {
-      default: "#F5F5F6",
-      paper: "#fff",
-    },
+      default: '#F5F5F6',
+      paper: '#fff'
+    }
   },
   components: {
     MuiCssBaseline: {
       styleOverrides: {
         body: {
-          fontSize: "0.875rem",
+          fontSize: '0.875rem',
           lineHeight: 1.43,
-          letterSpacing: "0.01071rem",
-        },
-      },
+          letterSpacing: '0.01071rem'
+        }
+      }
     },
     MuiTextField: {
       defaultProps: {
-        variant: "standard",
-      },
-    },
-  },
+        variant: 'standard'
+      }
+    }
+  }
 });
 
 function App() {
@@ -64,9 +64,9 @@ function App() {
                 <Menu />
                 <div
                   style={{
-                    display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "center",
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center'
                   }}
                   className="App"
                 >

web-ui/src/api/actionitem.js

@@ -1,30 +1,38 @@
-import { resolve } from "./api.js";
+import { resolve } from './api.js';
 
-const actionItemUrl = "/services/action-items"
+const actionItemUrl = '/services/action-items';
 
 export const createActionItem = async (actionItem, cookie) => {
   return resolve({
-    method: "post",
+    method: 'post',
     url: actionItemUrl,
     data: actionItem,
-    headers: { "X-CSRF-Header": cookie, "Accept": "application/json", "Content-Type": "application/json;charset=UTF-8" },
+    headers: {
+      'X-CSRF-Header': cookie,
+      Accept: 'application/json',
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
   });
 };
 
 export const updateActionItem = async (actionItem, cookie) => {
   return resolve({
-    method: "put",
+    method: 'put',
     url: actionItemUrl,
     data: actionItem,
-    headers: { "X-CSRF-Header": cookie, "Accept": "application/json", "Content-Type": "application/json;charset=UTF-8" },
+    headers: {
+      'X-CSRF-Header': cookie,
+      Accept: 'application/json',
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
   });
 };
 
 export const deleteActionItem = async (id, cookie) => {
   return resolve({
-    method: "delete",
+    method: 'delete',
     url: `${actionItemUrl}/${id}`,
-    headers: { "X-CSRF-Header": cookie, "Accept": "application/json" },
+    headers: { 'X-CSRF-Header': cookie, Accept: 'application/json' }
   });
 };
 
@@ -33,16 +41,15 @@ export const findActionItem = async (checkinId, createdById, cookie) => {
     url: actionItemUrl,
     params: {
       checkinid: checkinId,
-      createdbyid: createdById,
+      createdbyid: createdById
     },
-    headers: { "X-CSRF-Header": cookie, "Accept": "application/json" },
+    headers: { 'X-CSRF-Header': cookie, Accept: 'application/json' }
   });
 };
 
 export const getActionItem = async (id, cookie) => {
   return resolve({
     url: `${actionItemUrl}/?id=${id}`,
-    headers: { "X-CSRF-Header": cookie, "Accept": "application/json" },
+    headers: { 'X-CSRF-Header': cookie, Accept: 'application/json' }
   });
 };
-

web-ui/src/api/agenda.js

@@ -1,30 +1,38 @@
-import { resolve } from "./api.js";
+import { resolve } from './api.js';
 
-const agendaURL = "/services/agenda-items";
+const agendaURL = '/services/agenda-items';
 
 export const createAgendaItem = async (agendaItem, cookie) => {
   return resolve({
-    method: "POST",
+    method: 'POST',
     url: agendaURL,
     data: agendaItem,
-    headers: { "X-CSRF-Header": cookie, "Accept": "application/json", "Content-Type": "application/json;charset=UTF-8" },
+    headers: {
+      'X-CSRF-Header': cookie,
+      Accept: 'application/json',
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
   });
 };
 
 export const updateAgendaItem = async (agendaItem, cookie) => {
   return resolve({
-    method: "PUT",
+    method: 'PUT',
     url: agendaURL,
     data: agendaItem,
-    headers: { "X-CSRF-Header": cookie, "Accept": "application/json", "Content-Type": "application/json;charset=UTF-8" },
+    headers: {
+      'X-CSRF-Header': cookie,
+      Accept: 'application/json',
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
   });
 };
 
 export const deleteAgendaItem = async (id, cookie) => {
   return resolve({
-    method: "DELETE",
+    method: 'DELETE',
     url: `${agendaURL}/${id}`,
-    headers: { "X-CSRF-Header": cookie, "Accept": "application/json" },
+    headers: { 'X-CSRF-Header': cookie, Accept: 'application/json' }
   });
 };
 
@@ -33,15 +41,15 @@ export const getAgendaItem = async (checkinId, createdById, cookie) => {
     url: agendaURL,
     params: {
       checkinid: checkinId,
-      createdbyid: createdById,
+      createdbyid: createdById
     },
-    headers: { "X-CSRF-Header": cookie, "Accept": "application/json" },
+    headers: { 'X-CSRF-Header': cookie, Accept: 'application/json' }
   });
 };
 
 export const getAgendaItemById = async (id, cookie) => {
   return resolve({
     url: `${agendaURL}/?id=${id}`,
-    headers: { "X-CSRF-Header": cookie, "Accept": "application/json" },
+    headers: { 'X-CSRF-Header': cookie, Accept: 'application/json' }
   });
 };

web-ui/src/api/api.js

@@ -1,17 +1,20 @@
-import { UPDATE_TOAST } from "../context/actions";
+import { UPDATE_TOAST } from '../context/actions';
 import qs from 'qs';
 
 export const BASE_API_URL = import.meta.env.VITE_APP_API_URL
   ? import.meta.env.VITE_APP_API_URL
-  : "http://localhost:8080";
+  : 'http://localhost:8080';
 
-export const getAvatarURL = (email) =>
+export const getAvatarURL = email =>
   BASE_API_URL +
-  "/services/member-profiles/member-photos/" +
+  '/services/member-profiles/member-photos/' +
   encodeURIComponent(email);
 
 function fetchAbsolute(fetch) {
-  return baseUrl => (url, otherParams) => url.startsWith('/') ? fetch(baseUrl + url, { credentials: 'include', ...otherParams }) : fetch(url, { credentials: 'include', ...otherParams })
+  return baseUrl => (url, otherParams) =>
+    url.startsWith('/')
+      ? fetch(baseUrl + url, { credentials: 'include', ...otherParams })
+      : fetch(url, { credentials: 'include', ...otherParams });
 }
 
 let myFetch = null;
@@ -20,7 +23,7 @@ export const getMyFetch = async () => {
   if (!myFetch) {
     myFetch = fetchAbsolute(fetch)(BASE_API_URL);
 
-/*
+    /*
    I'm not sure this was working before, but we need to figure out an approach for fetch. I will
    open an issue for this.
 
@@ -53,11 +56,11 @@ export const getMyFetch = async () => {
   */
   }
   return myFetch;
-}
+};
 
-export const resolve = async (payload) => {
+export const resolve = async payload => {
   let { url } = payload;
-  const { params = null, data = null, ...rest} = payload;
+  const { params = null, data = null, ...rest } = payload;
   const myFetch = await getMyFetch();
 
   // Convert params to fetch style...
@@ -69,29 +72,29 @@ export const resolve = async (payload) => {
   const promise = myFetch(url, rest);
   const resolved = {
     payload: null,
-    error: null,
+    error: null
   };
 
   resolved.payload = await promise;
-  if(!resolved.payload.ok) {
+  if (!resolved.payload.ok) {
     const statusText = resolved.payload.statusText;
     resolved.error = await resolved.payload.json();
     if (window.snackDispatch) {
       window.snackDispatch({
         type: UPDATE_TOAST,
         payload: {
-          severity: "error",
-          toast: resolved?.error?.message || statusText,
-        },
+          severity: 'error',
+          toast: resolved?.error?.message || statusText
+        }
       });
     }
   } else {
-    const contentType = resolved.payload.headers.get("Content-Type");
-    const contentLength = resolved.payload.headers.get("Content-Length");
-    if (contentType && contentType.indexOf("text/csv") !== -1) {
+    const contentType = resolved.payload.headers.get('Content-Type');
+    const contentLength = resolved.payload.headers.get('Content-Length');
+    if (contentType && contentType.indexOf('text/csv') !== -1) {
       resolved.payload.data = await resolved.payload.blob();
     } else if (contentLength && contentLength > 0) {
-      if (contentType && contentType.indexOf("application/json") !== -1) {
+      if (contentType && contentType.indexOf('application/json') !== -1) {
         resolved.payload.data = await resolved.payload.json();
       } else {
         resolved.payload.data = await resolved.payload.text();