Merge branch 'master' into cleanup

.eslintrc.yml

@@ -0,0 +1,52 @@
+settings:
+  react:
+    version: detect
+
+env:
+  browser: true
+  es2021: true
+
+extends:
+  - standard
+  - plugin:react/recommended
+
+parserOptions:
+  ecmaVersion: latest
+  sourceType: module
+
+plugins:
+  - react
+
+overrides:
+  - files:
+      - "**/*.test.js"
+      - "**/*.test.jsx"
+      - "src/setupTests.js"
+      - "src/test/wait.js"
+    env:
+      jest: true
+
+# https://eslint.org/docs/latest/rules/
+rules:
+  comma-dangle:
+    - error
+    - always-multiline
+  generator-star-spacing: off
+  indent: off
+  multiline-ternary: off
+  no-unused-vars:
+    - error
+    - varsIgnorePattern: "^_"
+      args: none
+  quotes:
+    - error
+    - double
+    - avoidEscape: true
+  react/display-name: off
+  react/prop-types: off
+  react/react-in-jsx-scope: off
+  space-before-function-paren: off
+  semi:
+    - error
+    - always
+  no-var: error

.github/workflows/cicd.yml

@@ -51,7 +51,7 @@ jobs:
         run: npm test -- --ci --watchAll=false --coverage
 
       - name: "Upload coverage to Codecov"
-        uses: codecov/codecov-action@v4.0.1
+        uses: codecov/codecov-action@v4.1.1
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           files: coverage/coverage-final.json

package.json

@@ -17,6 +17,8 @@
   },
   "scripts": {
     "start": "react-scripts start",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx .",
+    "lint:fix": "eslint --fix --ext .js,.jsx,.ts,.tsx .",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "test:debug": "react-scripts --inspect-brk test --runInBand --no-cache",
@@ -48,6 +50,12 @@
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
+    "eslint": "^8.57.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.34.1",
     "fake-indexeddb": "^4.0.2",
     "flush-promises": "^1.0.2",
     "http-proxy-middleware": "^2.0.6"

src/App.jsx

@@ -39,7 +39,7 @@ const App = ({ ims, routerClass }) => {
   return (
     <Router>
       <Suspense fallback={<Loading what="page" />}>
-        <IMSContext.Provider value={{ ims: ims }}>
+        <IMSContext.Provider value={{ ims }}>
           <Routes>
             {/* Redirect root to IMS */}
             <Route path="/" element={<Navigate to={URLs.ims} />} />

src/URLs.js

@@ -1,4 +1,4 @@
-const imsURL = `/ims/`;
+const imsURL = "/ims/";
 const eventsURL = `${imsURL}events/`;
 const adminURL = `${imsURL}admin/`;
 

src/components/BagTable.jsx

@@ -11,7 +11,7 @@ const BagTable = () => {
 
   const [bag, setBag] = useState(undefined);
 
-  useBag({ setBag: setBag });
+  useBag({ setBag });
 
   const urls = bag ? bag.urls : null;
 

src/components/BagTable.test.jsx

@@ -42,7 +42,7 @@ describe("BagTable component", () => {
     });
     console._suppressErrors();
 
-    const spy = jest.spyOn(console, "warn");
+    jest.spyOn(console, "warn");
 
     renderWithIMSContext(<BagTable />, ims);
     await waitForURLBag();

src/components/Login.jsx

@@ -40,7 +40,7 @@ const Login = ({ children }) => {
     async function onLogin(event) {
       event.preventDefault();
       try {
-        await ims.login(username, { password: password });
+        await ims.login(username, { password });
       } catch (e) {
         const errorMessage = e.message;
         console.warn(`Login failed: ${errorMessage}`);

src/components/base/LabeledSelect.test.jsx

@@ -29,7 +29,7 @@ describe("LabeledSelect component", () => {
     "valueToName ($values.length)",
     ({ values }) => {
       const valueToName = (value) => {
-        if (value === undefined || value == "----") {
+        if (value === undefined || value === "----") {
           return "----";
         } else {
           return "***" + value + "***";

src/components/base/Select.jsx

@@ -2,6 +2,8 @@ import invariant from "invariant";
 
 import Form from "react-bootstrap/Form";
 
+const controlStatusTimeout = 1000;
+
 const controlClearStatus = (control) => {
   control.classList.remove("bg-warning");
   control.classList.remove("bg-success");
@@ -19,13 +21,13 @@ const controlHadSuccess = (control) => {
   controlClearStatus(control);
   control.classList.add("bg-success");
 
-  setTimeout(() => controlClearStatus(control), 1000);
+  setTimeout(() => controlClearStatus(control), controlStatusTimeout);
 };
 
-const controlHadError = (control, timeout) => {
+const controlHadError = (control) => {
   console.debug("Control had error", control);
   control.classList.add("bg-danger");
-  setTimeout(() => controlClearStatus(control), 1000);
+  setTimeout(() => controlClearStatus(control), controlStatusTimeout);
 };
 
 const controlDidChange = async (event, callback) => {
@@ -63,7 +65,7 @@ const Select = ({ id, width, value, setValue, values, valueToName }) => {
     <Form.Select
       id={id}
       size="sm"
-      style={{ flex: "initial", width: width }}
+      style={{ flex: "initial", width }}
       value={value}
       onChange={onChange}
     >

src/components/base/Select.test.jsx

@@ -8,8 +8,6 @@ import Label from "./Label";
 import Select from "./Select";
 
 describe("Select component", () => {
-  const values = ["1", "2", "3", "4"];
-
   test.each(selectOptionValues())(
     "start value selected ($values.length, $value)",
     ({ values, value }) => {
@@ -36,7 +34,7 @@ describe("Select component", () => {
     "valueToName ($values.length, $value)",
     ({ values, value }) => {
       const valueToName = (value) => {
-        if (value === undefined || value == "----") {
+        if (value === undefined || value === "----") {
           return "----";
         } else {
           return "***" + value + "***";

src/components/dispatch-queue/BottomToolBar.jsx

@@ -1,4 +1,9 @@
+import invariant from "invariant";
+
 const BottomToolBar = ({ table, incidents }) => {
+  invariant(table != null, "table argument is required");
+  invariant(incidents != null, "incidents argument is required");
+
   return "";
   // return (
   //   <Row>

src/components/dispatch-queue/DispatchQueue.jsx

@@ -26,7 +26,7 @@ const DispatchQueue = ({ event }) => {
   const [concentricStreetsByEvent, setConcentricStreetsByEvent] = useState();
 
   useConcentricStreetsByEvent({
-    setConcentricStreetsByEvent: setConcentricStreetsByEvent,
+    setConcentricStreetsByEvent,
   });
 
   // Fetch incident data
@@ -35,8 +35,8 @@ const DispatchQueue = ({ event }) => {
 
   useIncidents({
     eventID: event.id,
-    setIncidents: setIncidents,
-    searchInput: searchInput,
+    setIncidents,
+    searchInput,
   });
 
   const table = useDispatchQueueTable(incidents, concentricStreetsByEvent);

src/components/dispatch-queue/DispatchQueueTable.jsx

@@ -24,27 +24,31 @@ export const DispatchQueueTable = ({ table, event }) => {
         <Table striped hover id="queue_table" {...table.getTableProps()}>
           <thead>
             {table.headerGroups.map((headerGroup) => (
-              <tr {...headerGroup.getHeaderGroupProps()}>
+              <tr /* eslint-disable-line react/jsx-key */
+                {...headerGroup.getHeaderGroupProps()}
+              >
                 {headerGroup.headers.map((column) => (
-                  <th {...column.getHeaderProps()}>
+                  <th /* eslint-disable-line react/jsx-key */
+                    {...column.getHeaderProps()}
+                  >
                     {column.render("Header")}
                   </th>
                 ))}
               </tr>
             ))}
           </thead>
           <tbody {...table.getTableBodyProps()}>
-            {table.page.map((row, i) => {
+            {table.page.map((row, _i) => {
               table.prepareRow(row);
               return (
-                <tr
+                <tr /* eslint-disable-line react/jsx-key */
                   className="queue_incident_row"
                   onClick={() => handleRowClick(row.cells[0].value)}
                   {...row.getRowProps()}
                 >
                   {row.cells.map((cell) => {
                     return (
-                      <td
+                      <td /* eslint-disable-line react/jsx-key */
                         className={`queue_incident_${cell.column.id}`}
                         {...cell.getCellProps()}
                       >

src/components/dispatch-queue/format.test.jsx

@@ -236,7 +236,7 @@ describe("Table cell formatting functions", () => {
     });
     const location = new Location({
       name: "Treetop House",
-      address: address,
+      address,
     });
     const text = formatLocation(location, concentricStreets);
     expect(text).toEqual(
@@ -256,7 +256,7 @@ describe("Table cell formatting functions", () => {
       radialHour: 8,
       radialMinute: 37,
     });
-    const location = new Location({ address: address });
+    const location = new Location({ address });
     const text = formatLocation(location, concentricStreets);
     expect(text).toEqual(`${formatAddress(address, concentricStreets)}`);
   });

src/components/incident/Incident.jsx

@@ -31,12 +31,12 @@ const Incident = ({ incident }) => {
 
   useConcentricStreets({
     eventID: incident.eventID,
-    setConcentricStreets: setConcentricStreets,
+    setConcentricStreets,
   });
 
   // Incident State
 
-  const [incidentState, setIncidentState] = useState(incident.state);
+  // const [incidentState, setIncidentState] = useState(incident.state);
 
   const editIncident = (imsSetValue) => (value) =>
     imsSetValue(incident.eventID, incident.number, value);
@@ -51,7 +51,7 @@ const Incident = ({ incident }) => {
         <Col className="text-start" />
         <Col className="text-center">
           <SelectState
-            state={incidentState}
+            state={incident.state}
             setState={editIncident(ims.setIncidentState)}
           />
         </Col>

src/components/incident/LocationCard.test.jsx

@@ -30,10 +30,10 @@ describe("LocationCard component", () => {
           for (const hour of hours) {
             for (const minute of minutes) {
               yield new Location({
-                name: name,
+                name,
                 address: new RodGarettAddress({
-                  description: description,
-                  concentric: concentric,
+                  description,
+                  concentric,
                   radialHour: hour,
                   radialMinute: minute,
                 }),
@@ -118,7 +118,7 @@ describe("LocationCard component", () => {
         await userEvent.type(textField, name);
       }
 
-      if ((name || location.name) && name != location.name) {
+      if ((name || location.name) && name !== location.name) {
         expect(setName).toHaveBeenCalledWith(name == null ? "" : name);
       }
     },
@@ -154,7 +154,7 @@ describe("LocationCard component", () => {
 
     if (
       (description || location.description) &&
-      description != location.description
+      description !== location.description
     ) {
       expect(setDescription).toHaveBeenCalledWith(
         description == null ? "" : description,
@@ -198,7 +198,7 @@ describe("LocationCard component", () => {
 
       if (
         (concentricStreetID || location.address.concentric) &&
-        concentricStreetID != location.address.concentric
+        concentricStreetID !== location.address.concentric
       ) {
         expect(setConcentricStreet).toHaveBeenCalledWith(
           concentricStreetID == null ? "" : concentricStreetID,
@@ -238,7 +238,7 @@ describe("LocationCard component", () => {
 
       if (
         (hour || location.address.radialHour) &&
-        hour != location.address.radialHour
+        hour !== location.address.radialHour
       ) {
         expect(setHour).toHaveBeenCalledWith(hour == null ? "" : hour);
       }
@@ -276,7 +276,7 @@ describe("LocationCard component", () => {
 
       if (
         (minute || location.address.radialMinute) &&
-        minute != location.address.radialMinute
+        minute !== location.address.radialMinute
       ) {
         expect(setMinute).toHaveBeenCalledWith(minute == null ? "" : minute);
       }

src/components/incident/ReportEntry.test.jsx

@@ -13,10 +13,10 @@ describe("ReportEntry component: display", () => {
       const author = "bucket";
       const text = "lorem ipsum…\nthere once was a Khaki named Sam…\nI am";
       const reportEntry = new ReportEntryModel({
-        created: created,
-        author: author,
-        systemEntry: systemEntry,
-        text: text,
+        created,
+        author,
+        systemEntry,
+        text,
       });
 
       render(<ReportEntry reportEntry={reportEntry} />);

src/components/nav/EventDropdown.jsx

@@ -10,7 +10,7 @@ const EventDropdown = () => {
 
   const [events, setEvents] = useState(undefined);
 
-  useEvents({ setEvents: setEvents });
+  useEvents({ setEvents });
 
   // Render