Merge branch 'tt/vite' into tt/reduce-github-actions-build-time

azavea · Oct 14, 2022 · 8821782 · 8821782
2 parents ef9a504 + de00632
commit 8821782
Show file tree

Hide file tree

Showing 66 changed files with 2,474 additions and 9,544 deletions.
diff --git a/.gitignore b/.gitignore
@@ -31,7 +31,7 @@ vendor.bundle.js
 bundle.js.map
 dist/
 yarn-error.log
-src/app/public/data
+src/app/data
 
 # Bundled JS
 src/app/build

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -54,6 +54,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Split DrawMap commponents into Layers and DrawTools [#57](https://github.com/azavea/iow-boundary-tool/pull/57)
 - Make `Roles` enum an `IntEnum` subclass [#74](https://github.com/azavea/iow-boundary-tool/pull/74)
 - Drop `Role` table and refactor as choice field on User [#117](https://github.com/azavea/iow-boundary-tool/pull/117)
+- Return user information from login endpoint [#136](https://github.com/azavea/iow-boundary-tool/pull/136)
 
 ### Fixed
 

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -18,7 +18,7 @@ services:
     stdin_open: true
     working_dir: /usr/local/src
     environment:
-      - REACT_APP_GIT_COMMIT=${REACT_APP_GIT_COMMIT:-latest}
+      - VITE_GIT_COMMIT=${VITE_GIT_COMMIT:-latest}
       - CHOKIDAR_USEPOLLING=true
       - CHOKIDAR_INTERVAL=100
       - PORT=4545

diff --git a/src/app/craco.config.js b/src/app/craco.config.js
diff --git a/src/app/public/data/.gitkeep → src/app/data/.gitkeep b/src/app/public/data/.gitkeep → src/app/data/.gitkeep
diff --git a/src/app/public/favicon.ico → src/app/favicon.ico b/src/app/public/favicon.ico → src/app/favicon.ico
diff --git a/src/app/public/index.html → src/app/index.html b/src/app/public/index.html → src/app/index.html
@@ -2,33 +2,25 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="iow-boundary-tool"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <link rel="manifest" href="/manifest.json" />
     <title>Boundary Sync</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/app/public/logo192.png → src/app/logo192.png b/src/app/public/logo192.png → src/app/logo192.png
diff --git a/src/app/public/logo512.png → src/app/logo512.png b/src/app/public/logo512.png → src/app/logo512.png
diff --git a/src/app/public/manifest.json → src/app/manifest.json b/src/app/public/manifest.json → src/app/manifest.json
diff --git a/src/app/package.json b/src/app/package.json
@@ -33,15 +33,14 @@
     "react-redux": "^8.0.2",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "^5.0.1",
     "react-use": "^17.3.2",
     "redux": "^4.2.0",
     "redux-logger": "^3.0.6"
   },
   "scripts": {
-    "start": "craco start",
-    "build": "craco build",
-    "test": "craco test"
+    "start": "vite",
+    "build": "vite build",
+    "test": "vite test"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -59,10 +58,10 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.17.12",
-    "@craco/craco": "^6.4.3",
-    "babel-jest": "28.1.0",
+    "@vitejs/plugin-react": "^2.0.1",
+    "eslint": "^8.25.0",
+    "eslint-config-react-app": "^7.0.1",
     "prettier": "^2.6.2",
-    "prettier-loader": "^3.3.0"
+    "vite": "^3.0.7"
   }
 }
diff --git a/src/app/public/robots.txt → src/app/robots.txt b/src/app/public/robots.txt → src/app/robots.txt
diff --git a/src/app/src/App.js → src/app/src/App.jsx b/src/app/src/App.js → src/app/src/App.jsx
diff --git a/src/app/src/App.test.js → src/app/src/App.test.jsx b/src/app/src/App.test.js → src/app/src/App.test.jsx
diff --git a/...ts/DrawTools/DeletePolygonConfirmModal.js → ...s/DrawTools/DeletePolygonConfirmModal.jsx b/...ts/DrawTools/DeletePolygonConfirmModal.js → ...s/DrawTools/DeletePolygonConfirmModal.jsx
diff --git a/...app/src/components/DrawTools/DrawTools.js → ...pp/src/components/DrawTools/DrawTools.jsx b/...app/src/components/DrawTools/DrawTools.js → ...pp/src/components/DrawTools/DrawTools.jsx
diff --git a/.../components/DrawTools/EditPolygonModal.js → ...components/DrawTools/EditPolygonModal.jsx b/.../components/DrawTools/EditPolygonModal.js → ...components/DrawTools/EditPolygonModal.jsx
diff --git a/...p/src/components/DrawTools/EditToolbar.js → .../src/components/DrawTools/EditToolbar.jsx b/...p/src/components/DrawTools/EditToolbar.js → .../src/components/DrawTools/EditToolbar.jsx
@@ -18,16 +18,16 @@ import {
 } from '@heroicons/react/outline';
 import { CursorClickIcon } from '@heroicons/react/solid';
 
-import AddPolygonIcon from '../../img/AddPolygonIcon.js';
-import DeletePolygonConfirmModal from './DeletePolygonConfirmModal.js';
-import { useDialogController } from '../../hooks.js';
-import EditPolygonModal from './EditPolygonModal.js';
+import AddPolygonIcon from '../../img/AddPolygonIcon';
+import DeletePolygonConfirmModal from './DeletePolygonConfirmModal';
+import { useDialogController } from '../../hooks';
+import EditPolygonModal from './EditPolygonModal';
 import {
     cancelAddPolygon,
     startAddPolygon,
     toggleEditMode,
     togglePolygonVisibility,
-} from '../../store/mapSlice.js';
+} from '../../store/mapSlice';
 
 const POLYGON_BUTTON_WIDTH = 40;
 

diff --git a/...components/DrawTools/MapControlButtons.js → ...omponents/DrawTools/MapControlButtons.jsx b/...components/DrawTools/MapControlButtons.js → ...omponents/DrawTools/MapControlButtons.jsx
diff --git a/...mponents/DrawTools/useAddPolygonCursor.js → ...ponents/DrawTools/useAddPolygonCursor.jsx b/...mponents/DrawTools/useAddPolygonCursor.js → ...ponents/DrawTools/useAddPolygonCursor.jsx
diff --git a/...components/DrawTools/useEditingPolygon.js → ...omponents/DrawTools/useEditingPolygon.jsx b/...components/DrawTools/useEditingPolygon.js → ...omponents/DrawTools/useEditingPolygon.jsx
diff --git a/...components/DrawTools/useGeocoderResult.js → ...omponents/DrawTools/useGeocoderResult.jsx b/...components/DrawTools/useGeocoderResult.js → ...omponents/DrawTools/useGeocoderResult.jsx
diff --git a/...c/components/DrawTools/useTrackMapZoom.js → .../components/DrawTools/useTrackMapZoom.jsx b/...c/components/DrawTools/useTrackMapZoom.js → .../components/DrawTools/useTrackMapZoom.jsx
diff --git a/src/app/src/components/Geocoder.js → src/app/src/components/Geocoder.jsx b/src/app/src/components/Geocoder.js → src/app/src/components/Geocoder.jsx
diff --git a/src/app/src/components/Layers/Basemaps.js → src/app/src/components/Layers/Basemaps.jsx b/src/app/src/components/Layers/Basemaps.js → src/app/src/components/Layers/Basemaps.jsx
diff --git a/src/app/src/components/Layers/Layers.js → src/app/src/components/Layers/Layers.jsx b/src/app/src/components/Layers/Layers.js → src/app/src/components/Layers/Layers.jsx
diff --git a/...onents/Layers/MunicipalBoundariesLayer.js → ...nents/Layers/MunicipalBoundariesLayer.jsx b/...onents/Layers/MunicipalBoundariesLayer.js → ...nents/Layers/MunicipalBoundariesLayer.jsx
@@ -22,7 +22,7 @@ export default function MunicipalBoundariesLayer() {
     });
 
     useEffect(() => {
-        fetch(`${process.env.PUBLIC_URL}/data/muni.geo.json`)
+        fetch(new URL('../../../data/muni.geo.json', import.meta.url).href)
             .then(response => response.json())
             .then(setLayerData);
     }, []);

diff --git a/src/app/src/components/Layers/ParcelLayer.js → ...app/src/components/Layers/ParcelLayer.jsx b/src/app/src/components/Layers/ParcelLayer.js → ...app/src/components/Layers/ParcelLayer.jsx
diff --git a/.../components/Layers/ReferenceImageLayer.js → ...components/Layers/ReferenceImageLayer.jsx b/.../components/Layers/ReferenceImageLayer.js → ...components/Layers/ReferenceImageLayer.jsx
diff --git a/src/app/src/components/LoginForm.js → src/app/src/components/LoginForm.jsx b/src/app/src/components/LoginForm.js → src/app/src/components/LoginForm.jsx
diff --git a/src/app/src/components/Map.js → src/app/src/components/Map.jsx b/src/app/src/components/Map.js → src/app/src/components/Map.jsx
diff --git a/src/app/src/components/MapPanes.js → src/app/src/components/MapPanes.jsx b/src/app/src/components/MapPanes.js → src/app/src/components/MapPanes.jsx
diff --git a/...rc/components/ModalSections/FileUpload.js → ...c/components/ModalSections/FileUpload.jsx b/...rc/components/ModalSections/FileUpload.js → ...c/components/ModalSections/FileUpload.jsx
diff --git a/...rc/components/ModalSections/HowItWorks.js → ...c/components/ModalSections/HowItWorks.jsx b/...rc/components/ModalSections/HowItWorks.js → ...c/components/ModalSections/HowItWorks.jsx
diff --git a/.../components/ModalSections/Introduction.js → ...components/ModalSections/Introduction.jsx b/.../components/ModalSections/Introduction.js → ...components/ModalSections/Introduction.jsx
diff --git a/.../components/ModalSections/ModalSection.js → ...components/ModalSections/ModalSection.jsx b/.../components/ModalSections/ModalSection.js → ...components/ModalSections/ModalSection.jsx
diff --git a/src/app/src/components/NavBar.js → src/app/src/components/NavBar.jsx b/src/app/src/components/NavBar.js → src/app/src/components/NavBar.jsx
@@ -14,7 +14,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { ArrowLeftIcon, CogIcon, LogoutIcon } from '@heroicons/react/outline';
 import apiClient from '../api/client';
 import { API_URLS, NAVBAR_HEIGHT } from '../constants';
-import { logout, setSelectedUtility } from '../store/authSlice';
+import { logout, setUtilityByPwsid } from '../store/authSlice';
 
 const NAVBAR_VARIANTS = {
     DRAW: 'draw',
@@ -102,31 +102,33 @@ function ExitButton({ variant }) {
 function UtilityControl({ variant }) {
     const dispatch = useDispatch();
 
-    // placeholders
-    const utilities = ['Raleigh City of', 'Azavea Test Utility'];
-    const selectedUtility =
-        useSelector(state => state.auth.selectedUtility) || utilities[0];
+    const utilities = useSelector(state => state.auth.user.utilities);
+    const utility = useSelector(state => state.auth.utility);
 
-    return variant === NAVBAR_VARIANTS.SUBMISSION && utilities.length > 1 ? (
+    if (!utility) {
+        return null;
+    }
+
+    return variant === NAVBAR_VARIANTS.SUBMISSION && utilities?.length > 1 ? (
         <Select
             variant='filled'
             h='40px'
             w='250px'
-            value={selectedUtility}
+            value={utility.pwsid}
             onChange={e => {
-                dispatch(setSelectedUtility(e.target.value));
+                dispatch(setUtilityByPwsid(e.target.value));
             }}
             _focus={{ background: 'white' }}
         >
-            {utilities.map(u => {
+            {utilities.map(({ id, pwsid, name }) => {
                 return (
-                    <option key={u} value={u}>
-                        {u}
+                    <option key={id} value={pwsid}>
+                        {name}
                     </option>
                 );
             })}
         </Select>
     ) : (
-        <Text textStyle='selectedUtility'>{selectedUtility}</Text>
+        <Text textStyle='selectedUtility'>{utility.name}</Text>
     );
 }
diff --git a/src/app/src/components/PrivateRoute.js → src/app/src/components/PrivateRoute.jsx b/src/app/src/components/PrivateRoute.js → src/app/src/components/PrivateRoute.jsx
@@ -7,7 +7,7 @@ import { API_URLS } from '../constants';
 import { login, setLocationBeforeAuth } from '../store/authSlice';
 
 export default function PrivateRoute({ children }) {
-    const signedIn = useSelector(state => state.auth.signedIn);
+    const user = useSelector(state => state.auth.user);
     const location = useLocation();
     const navigate = useNavigate();
     const dispatch = useDispatch();
@@ -17,20 +17,20 @@ export default function PrivateRoute({ children }) {
     // Log in this user if they have an authenticated session
     // Handles losing Redux state on refresh
     useEffect(() => {
-        if (!signedIn) {
+        if (!user) {
             dispatch(setLocationBeforeAuth(location));
             apiClient
                 .get(API_URLS.LOGIN)
-                .then(() => {
-                    dispatch(login());
+                .then(({ data: user }) => {
+                    dispatch(login(user));
                 })
                 .catch(() => {
                     if (!locationIsLogin) {
                         navigate('/login');
                     }
                 });
         }
-    }, [signedIn, location, locationIsLogin, navigate, dispatch]);
+    }, [user, location, locationIsLogin, navigate, dispatch]);
 
     return locationIsLogin ? null : children;
 }
diff --git a/src/app/src/components/Sidebar.js → src/app/src/components/Sidebar.jsx b/src/app/src/components/Sidebar.js → src/app/src/components/Sidebar.jsx
diff --git a/...src/components/Submissions/ActivityLog.js → ...rc/components/Submissions/ActivityLog.jsx b/...src/components/Submissions/ActivityLog.js → ...rc/components/Submissions/ActivityLog.jsx
diff --git a/src/app/src/components/Submissions/Badges.js → ...app/src/components/Submissions/Badges.jsx b/src/app/src/components/Submissions/Badges.js → ...app/src/components/Submissions/Badges.jsx
diff --git a/...components/Submissions/Detail/DataGrid.js → ...omponents/Submissions/Detail/DataGrid.jsx b/...components/Submissions/Detail/DataGrid.js → ...omponents/Submissions/Detail/DataGrid.jsx
diff --git a/...c/components/Submissions/Detail/Detail.js → .../components/Submissions/Detail/Detail.jsx b/...c/components/Submissions/Detail/Detail.js → .../components/Submissions/Detail/Detail.jsx
diff --git a/...src/components/Submissions/Detail/Info.js → ...rc/components/Submissions/Detail/Info.jsx b/...src/components/Submissions/Detail/Info.js → ...rc/components/Submissions/Detail/Info.jsx
diff --git a/.../src/components/Submissions/Detail/Map.js → ...src/components/Submissions/Detail/Map.jsx b/.../src/components/Submissions/Detail/Map.js → ...src/components/Submissions/Detail/Map.jsx
diff --git a/src/app/src/components/Submissions/List.js → src/app/src/components/Submissions/List.jsx b/src/app/src/components/Submissions/List.js → src/app/src/components/Submissions/List.jsx
@@ -113,7 +113,9 @@ function TableRows() {
     }
 }
 
-function TableRow({ boundary: { id, location, pwsid, last_modified, status } }) {
+function TableRow({
+    boundary: { id, location, pwsid, last_modified, status },
+}) {
     const navigate = useNavigate();
 
     return (

diff --git a/src/app/src/components/WelcomeModal.js → src/app/src/components/WelcomeModal.jsx b/src/app/src/components/WelcomeModal.js → src/app/src/components/WelcomeModal.jsx
diff --git a/src/app/src/img/AddPolygonIcon.js → src/app/src/img/AddPolygonIcon.jsx b/src/app/src/img/AddPolygonIcon.js → src/app/src/img/AddPolygonIcon.jsx
diff --git a/src/app/src/index.js → src/app/src/index.jsx b/src/app/src/index.js → src/app/src/index.jsx
diff --git a/src/app/src/pages/Draw.js → src/app/src/pages/Draw.jsx b/src/app/src/pages/Draw.js → src/app/src/pages/Draw.jsx
diff --git a/src/app/src/pages/ForgotPassword.js → src/app/src/pages/ForgotPassword.jsx b/src/app/src/pages/ForgotPassword.js → src/app/src/pages/ForgotPassword.jsx
diff --git a/src/app/src/pages/Login.js → src/app/src/pages/Login.jsx b/src/app/src/pages/Login.js → src/app/src/pages/Login.jsx
@@ -22,8 +22,8 @@ export default function Login() {
                 email,
                 password,
             })
-            .then(() => {
-                dispatch(login());
+            .then(({ data: user }) => {
+                dispatch(login(user));
             })
             .catch(apiError => {
                 if (apiError.response?.status === API_STATUSES.REDIRECT) {
@@ -34,20 +34,20 @@ export default function Login() {
             });
     };
 
-    const signedIn = useSelector(state => state.auth.signedIn);
+    const user = useSelector(state => state.auth.user);
     const locationBeforeAuth = useSelector(
         state => state.auth.locationBeforeAuth
     );
 
     // Upon successful sign in, redirect if specified (e.g. by /login route)
     useEffect(() => {
-        if (signedIn) {
+        if (user) {
             navigate(locationBeforeAuth, { replace: true });
         }
         if (forgotPassword) {
             navigate('/forgot');
         }
-    }, [navigate, signedIn, forgotPassword, locationBeforeAuth]);
+    }, [navigate, user, forgotPassword, locationBeforeAuth]);
 
     return (
         <LoginForm>

diff --git a/src/app/src/pages/ResetPassword.js → src/app/src/pages/ResetPassword.jsx b/src/app/src/pages/ResetPassword.js → src/app/src/pages/ResetPassword.jsx
diff --git a/src/app/src/pages/Submissions.js → src/app/src/pages/Submissions.jsx b/src/app/src/pages/Submissions.js → src/app/src/pages/Submissions.jsx
diff --git a/src/app/src/pages/Welcome.js → src/app/src/pages/Welcome.jsx b/src/app/src/pages/Welcome.js → src/app/src/pages/Welcome.jsx
diff --git a/src/app/src/store/authSlice.js b/src/app/src/store/authSlice.js
@@ -1,42 +1,37 @@
 import { createSlice } from '@reduxjs/toolkit';
 
 const initialState = {
-    signedIn: false,
     locationBeforeAuth: '/welcome',
-    utilities: [],
-    selectedUtility: null,
+    user: false,
+    utility: null,
 };
 
 export const authSlice = createSlice({
     name: 'auth',
     initialState,
     reducers: {
-        login: state => {
-            state.signedIn = true;
+        login: (state, { payload: user }) => {
+            state.user = user;
+
+            if (user.utilities) {
+                state.utility = user.utilities[0];
+            }
         },
         logout: state => {
-            state.signedIn = false;
+            state.user = false;
         },
         setLocationBeforeAuth: (state, { payload: location }) => {
             if (!location.pathname.startsWith('/login')) {
                 state.locationBeforeAuth = location;
             }
         },
-        setUtilities: (state, { payload: utilities }) => {
-            state.utilities = utilities;
-        },
-        setSelectedUtility: (state, { payload: selectedUtility }) => {
-            state.selectedUtility = selectedUtility;
+        setUtilityByPwsid: (state, { payload: pwsid }) => {
+            state.utility = state.user.utilities.find(u => u.pwsid === pwsid);
         },
     },
 });
 
-export const {
-    login,
-    logout,
-    setLocationBeforeAuth,
-    setUtilities,
-    setSelectedUtility,
-} = authSlice.actions;
+export const { login, logout, setLocationBeforeAuth, setUtilityByPwsid } =
+    authSlice.actions;
 
 export default authSlice.reducer;
diff --git a/src/app/src/utils.js → src/app/src/utils.jsx b/src/app/src/utils.js → src/app/src/utils.jsx
diff --git a/src/app/vite.config.js b/src/app/vite.config.js
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+    plugins: [react()],
+    server: {
+        port: process.env.PORT,
+        host: true,
+    },
+});