mitoc · fpagnoux · Sep 15, 2025 · Sep 15, 2025 · Sep 15, 2025 · Sep 15, 2025
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,53 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import react from "eslint-plugin-react";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  { ignores: ["dist", "build"] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    plugins: {
+      react,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+      "react/jsx-uses-react": "error",
+      "react/jsx-uses-vars": "error",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          argsIgnorePattern: "^_",
+          destructuredArrayIgnorePattern: "^_",
+          ignoreRestSiblings: true,
+        },
+      ],
+      "@typescript-eslint/no-explicit-any": "warn",
+      "no-console": "warn",
+      "prefer-const": "error",
+    },
+    settings: {
+      react: {
+        version: "17.0",
+      },
+    },
+  }
+);
diff --git a/index.html b/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" type="image/png" href="https://mitoc.mit.edu/images/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="MIT Outing Club gear database"
+    />
+    <link rel="apple-touch-icon" href="https://mitoc.mit.edu/images/favicon.ico" />
+    <title>MITOC Gear</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
   "name": "mitoc-gear-ui",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
@@ -22,53 +23,40 @@
     "react-bootstrap": "^2.7.0",
     "react-datepicker": "^4.7.0",
     "react-dom": "^17.0.2",
-    "react-hook-form": "^7.30.0",
+    "react-hook-form": "^7.52.0",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
-    "react-scripts": "^5.0.1",
     "react-select": "^5.3.0",
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@types/jest": "^24.0.0",
+    "@eslint/js": "^9.35.0",
     "@types/node": "^24.4.0",
     "@types/react": "^18.0.9",
     "@types/react-modal": "^3.16.3",
     "@types/react-redux": "^7.1.7",
+    "@vitejs/plugin-react": "^5.0.2",
+    "eslint": "^9.35.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.4.0",
     "prettier": "^3.1.1",
-    "typescript": "^5.9.2"
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.44.0",
+    "vite": "^7.1.5"
   },
   "scripts": {
-    "start": "REACT_APP_API_URL=http://127.0.0.1:8000 react-scripts start",
-    "build": "react-scripts build",
-    "build-next": "PUBLIC_URL=\"/next/\" react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "start": "VITE_API_URL=http://127.0.0.1:8000 vite",
+    "build": "vite build",
+    "preview": "vite preview",
     "prettier:fix": "prettier --write 'src/**/*.{ts,tsx}'",
     "prettier": "prettier --check 'src/**/*.{ts,tsx}'",
     "lint:fix": "eslint --fix src",
     "lint": "eslint src",
     "ts": "tsc --noEmit"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,17 +5,18 @@ import {
   Route,
   Switch,
 } from "react-router-dom";
+import { useLoadCurrentUser, usePermissions } from "src/redux/auth";
 
-import { refreshCsrfToken } from "apiClient/client";
-import BaseLayout from "components/BaseLayout";
-import { ApprovalsPage } from "pages/Approvals";
-import { AddNewApproval } from "pages/Approvals/AddNewApproval";
-import { GearInventoryPage } from "pages/Inventory/GearInventoryPage";
-import { ApproveDeskCreditPage } from "pages/OfficeHours/ApproveDeskCreditPage";
-import { MyOfficeHoursHistory } from "pages/OfficeHours/MyOfficeHoursHistory";
-import { OfficeHoursHistory } from "pages/OfficeHours/OfficeHoursHistory";
-import { RequestDeskCreditPage } from "pages/OfficeHours/RequestDeskCreditPage";
-import { ChangePassword } from "pages/People/PersonProfile/PersonChangePassword";
+import { refreshCsrfToken } from "src/apiClient/client";
+import BaseLayout from "src/components/BaseLayout";
+import { ApprovalsPage } from "src/pages/Approvals";
+import { AddNewApproval } from "src/pages/Approvals/AddNewApproval";
+import { GearInventoryPage } from "src/pages/Inventory/GearInventoryPage";
+import { ApproveDeskCreditPage } from "src/pages/OfficeHours/ApproveDeskCreditPage";
+import { MyOfficeHoursHistory } from "src/pages/OfficeHours/MyOfficeHoursHistory";
+import { OfficeHoursHistory } from "src/pages/OfficeHours/OfficeHoursHistory";
+import { RequestDeskCreditPage } from "src/pages/OfficeHours/RequestDeskCreditPage";
+import { ChangePassword } from "src/pages/People/PersonProfile/PersonChangePassword";
 
 import { AllGearPage, GearItemPage } from "./pages/Gear";
 import { AddNewGear } from "./pages/Gear/AddNewGear";
@@ -25,7 +26,6 @@ import { RequestPasswordReset } from "./pages/LogIn/RequestPasswordReset";
 import { OfficeHoursPage } from "./pages/OfficeHours";
 import { PeoplePage, PersonPage } from "./pages/People";
 import { AddNewPerson } from "./pages/People/AddNewPerson";
-import { useLoadCurrentUser, usePermissions } from "./redux/auth";
 
 function App() {
   const { loggedIn, isLoading } = useLoadCurrentUser();
@@ -39,7 +39,7 @@ function App() {
   }, [loggedIn]);
 
   return (
-    <Router basename={process.env.PUBLIC_URL}>
+    <Router basename="/">
       <BaseLayout>
         <Switch>
           <Route path="/login">

diff --git a/src/apiClient/approvals.ts b/src/apiClient/approvals.ts
@@ -1,4 +1,4 @@
-import { toIsoDate } from "lib/fmtDate";
+import { toIsoDate } from "src/lib/fmtDate";
 import { request } from "./client";
 import { GearTypeWithShorthand } from "./gear";
 import { PersonBase } from "./people";

diff --git a/src/apiClient/client.ts b/src/apiClient/client.ts
@@ -1,8 +1,8 @@
 import { APIErrorType } from "./types";
 
 type Data = { [key: string]: any };
 
-const API_BASE = process.env.REACT_APP_API_URL || "";
+const API_BASE = import.meta.env.VITE_API_URL || "";
 
 export const API_HOST = API_BASE + "/api/v1";
 
@@ -11,7 +11,7 @@
  method: string,
  data?: Data,
  maxRetry?: number,
 ): Promise<any> {
  return requestInternal({
    path,
    method,
@@ -34,7 +34,7 @@
  body?: BodyInit;
  maxRetry?: number;
  contentType?: string;
 }): Promise<any> {
  const { path, method, data, maxRetry = 3, body: rawBody, contentType } = args;
  if (maxRetry <= 0) {
    return;
@@ -89,11 +89,11 @@
  }
 }

 function getQueryParams(data?: Record<string, any>) {
  return new URLSearchParams(data);
 }

 let _csrfToken: any = null;

 async function getCsrfToken() {
  if (_csrfToken == null) {

diff --git a/src/components/BaseLayout/Header.tsx b/src/components/BaseLayout/Header.tsx
@@ -1,12 +1,12 @@
-import { newApprovalUI } from "featureFlags";
+import { newApprovalUI } from "src/featureFlags";
 import { useEffect } from "react";
 import { Link, useHistory } from "react-router-dom";
 import styled from "styled-components";
 
-import { User } from "apiClient/types";
-import { PersonLink } from "components/PersonLink";
-import { logOut, useCurrentUser, usePermissions } from "redux/auth";
-import { useAppDispatch, useConfig } from "redux/hooks";
+import { User } from "src/apiClient/types";
+import { PersonLink } from "src/components/PersonLink";
+import { logOut, useCurrentUser, usePermissions } from "src/redux/auth";
+import { useAppDispatch, useConfig } from "src/redux/hooks";
 
 export function Header() {
   const { user } = useCurrentUser();

diff --git a/src/components/GearItemSelect.tsx b/src/components/GearItemSelect.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
-import { useGearList } from "redux/api";
+import { useGearList } from "src/redux/api";
 
-import { GearSummary } from "apiClient/gear";
+import { GearSummary } from "src/apiClient/gear";
 
 import { Select } from "./Select";
 import { useDebounce } from "./useDebounce";

diff --git a/src/components/GearLink.tsx b/src/components/GearLink.tsx
@@ -1,5 +1,5 @@
-import { gearDbApi } from "redux/api";
 import { LinkProps } from "react-router-dom";
+import { gearDbApi } from "src/redux/api";
 
 import { PrefetchLink } from "./PrefetchLink";
 

diff --git a/src/components/GearLocationSelect.tsx b/src/components/GearLocationSelect.tsx
@@ -1,8 +1,8 @@
 import { useCallback } from "react";
 import Select, { MultiValue } from "react-select";
 
-import { useGetGearLocationsQuery } from "redux/api";
-import { GearLocation } from "apiClient/gear";
+import { useGetGearLocationsQuery } from "src/redux/api";
+import { GearLocation } from "src/apiClient/gear";
 
 type GearLocationOption = GearLocation & {
   value: number;

diff --git a/src/components/GearTypeSelect.tsx b/src/components/GearTypeSelect.tsx
@@ -1,8 +1,8 @@
 import { useCallback } from "react";
 import ReactSelect, { MultiValue } from "react-select";
 
-import { useGetGearTypesQuery } from "redux/api";
-import { GearType as APIGearType } from "apiClient/gear";
+import { useGetGearTypesQuery } from "src/redux/api";
+import { GearType as APIGearType } from "src/apiClient/gear";
 
 import { Select } from "./Select";
 

diff --git a/src/components/GroupSelect.tsx b/src/components/GroupSelect.tsx
@@ -1,8 +1,8 @@
 import { useCallback } from "react";
 import Select, { MultiValue } from "react-select";
 
-import { PeopleGroup } from "apiClient/people";
-import { useGetGroupsQuery } from "redux/api";
+import { PeopleGroup } from "src/apiClient/people";
+import { useGetGroupsQuery } from "src/redux/api";
 
 type GroupOption = PeopleGroup & {
   value: number;