fixing getting room photos, reworking how routing works, added jotai for state management

frontend/package.json

@@ -3,25 +3,26 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@mantine/core": "^3.3.5",
-    "@mantine/dates": "^3.3.5",
-    "@mantine/dropzone": "^3.3.5",
-    "@mantine/hooks": "^3.3.5",
-    "@mantine/notifications": "^3.3.5",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
+    "@mantine/core": "^4.0.9",
+    "@mantine/dates": "^4.0.9",
+    "@mantine/dropzone": "^4.0.9",
+    "@mantine/hooks": "^4.0.9",
+    "@mantine/notifications": "^4.0.9",
+    "@testing-library/jest-dom": "^5.16.3",
+    "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
     "base-64": "^1.0.0",
-    "dayjs": "^1.10.7",
-    "npm-check-updates": "^12.0.3",
+    "dayjs": "^1.11.0",
+    "jotai": "^1.6.1",
+    "npm-check-updates": "^12.5.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-jss": "^10.9.0",
-    "react-router": "^6.2.1",
-    "react-router-dom": "^6.2.1",
-    "react-scripts": "4.0.3",
-    "web-vitals": "^2.1.2"
+    "react-router": "^6.2.2",
+    "react-router-dom": "^6.2.2",
+    "react-scripts": "5.0.0",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

frontend/src/App.js

@@ -1,4 +1,5 @@
-import React, {useState, useEffect, createContext} from 'react';
+import React, {useState, useEffect } from 'react';
+import { useAtom } from 'jotai';
 import HomePage from './components/pages/HomePage';
 import Locations from './components/pages/Locations';
 import RoomsPage from './components/pages/RoomsPage';
@@ -9,23 +10,20 @@ import { useNotifications } from '@mantine/notifications';
 
 import { backendAPI, defaultURLS } from './services/backend-api';
 
+import { serverConfigAtom } from './state/main'
+
 
 import SideBar from './components/SideBar';
 import AppHeader from './components/AppHeader';
 
 
-export const APIContext = createContext();
-
-
-
 
 function App() {
   // Main nav/sidebar appshell openend
   const [shellOpened, setShellOpened] = useState(false)
   const [isLoading, setIsLoading] = useState(true)
-  const [currentPage, setCurrentPage] = useState({"path": "home", "id": -1})
 
-  const [serverConfig, setServerConfig] = useState({})
+  const [, setServerConfig] = useAtom(serverConfigAtom)
 
   const notifications = useNotifications();
   const navigate = useNavigate();
@@ -80,11 +78,10 @@ function App() {
 
 
   return (
-    <APIContext.Provider value={serverConfig}>
         <AppShell
             navbarOffsetBreakpoint="sm" // navbarOffsetBreakpoint controls when navbar should no longer be offset with padding-left
             fixed       // fixed prop on AppShell will be automatically added to Header and Navbar
-            navbar={<SideBar opened={shellOpened} setCurrentPage={setCurrentPage}/>}
+            navbar={<SideBar opened={shellOpened} />}
             header={<AppHeader opened={shellOpened} setOpened={setShellOpened}/>}
           >
             <Routes>
@@ -94,8 +91,6 @@ function App() {
               
             </Routes>
         </AppShell>
-    </APIContext.Provider>
-    
   );
 }
 

frontend/src/components/SideBar.js

@@ -1,4 +1,6 @@
 import React, {useState } from 'react';
+import { useAtom } from 'jotai';
+import { activePageAtom } from '../state/main';
 import { Navbar, Text, Group, ThemeIcon, Button, UnstyledButton } from '@mantine/core';
 import { Link } from 'react-router-dom';
 import { createStyles } from '@mantine/styles';
@@ -36,7 +38,7 @@ const useStyles = createStyles((theme) => ({
 
 function SideBar(props) {
     const { classes } = useStyles();
-    const [activePage, setActivePage] = useState("")
+    const [activePage, setActivePage] = useAtom(activePageAtom)
 
 
     return (
@@ -59,7 +61,7 @@ function SideBar(props) {
                 </Group>
 
             </UnstyledButton> */}
-            <UnstyledButton component={Link} to="/about" className={activePage === "rooms" ? classes.activeButton : classes.button} onClick={() => setActivePage("rooms")} >
+            <UnstyledButton component={Link} to="/rooms" className={activePage === "rooms" ? classes.activeButton : classes.button} onClick={() => setActivePage("rooms")} >
                 <Group>
                     <BsMap />
                     <Text>Rooms</Text>

frontend/src/components/pages/HomePage.js

@@ -1,13 +1,15 @@
 import React, {useState, useEffect, useContext, createContext} from 'react';
 import APIContext from '../../App';
 import { Text } from '@mantine/core'
+import { useAtom } from 'jotai';
+import { serverConfigAtom } from '../../state/main'
 
 
 
 function HomePage() {
     const [opened, setOpened] = useState(false);
+    const [serverConfig] = useAtom(serverConfigAtom)
 
-    const serverConfig = useContext(APIContext);
 
 
     return (

frontend/src/components/pages/Locations.js

@@ -1,9 +1,11 @@
 import React, {useState, useEffect, useContext, createContext} from 'react';
-import { APIContext } from '../../App';
+import { useAtom } from 'jotai'
+import { activePageAtom, roomFilterAtom, serverConfigAtom } from '../../state/main';
 import { Text, Loader, Center, Card, Image, Badge, Button, SimpleGrid, Group } from '@mantine/core'
 import { useNavigate } from "react-router-dom";
 import { useNotifications } from '@mantine/notifications';
 
+
 import { backendAPI } from '../../services/backend-api';
 
 
@@ -11,8 +13,10 @@ function LocationsPage(props) {
     // const [opened, setOpened] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const [locations, setLocations] = useState([])
+    const [serverConfig] = useAtom(serverConfigAtom)
+    const [, setRoomsFilter] = useAtom(roomFilterAtom)
+    const [, setActivePage] = useAtom(activePageAtom)
 
-    const serverConfig = useContext(APIContext);
 
     const notifications = useNotifications();
     const navigate = useNavigate();
@@ -42,6 +46,13 @@ function LocationsPage(props) {
 
     }, [])
 
+    const navigateToRooms = (locationID) => {
+        console.log("Passedlocid: ", locationID)
+        setActivePage("rooms")
+        setRoomsFilter({"locationID": locationID})
+        navigate("/rooms")
+    }
+
 
     return (
         <>
@@ -49,7 +60,7 @@ function LocationsPage(props) {
         <Center><Text>Locations</Text></Center>
         <SimpleGrid cols={4} spacing="xl">
             { locations.map((location, idx) => 
-                <Card key={`${idx} - ${location.ID}`} component="a" onClick={(e) => {navigate("/rooms", { state: { locationID: location.ID}})}} shadow="sm" padding="md">
+                <Card key={`${idx} - ${location.ID}`} component="a" onClick={() => navigateToRooms(location.ID)} shadow="sm" padding="md">
                     <Card.Section>
                         {location.CoverPhoto ? <Image src={`${serverConfig.baseURL}/photos/locations/${location.Name}/${location.CoverPhoto}`}></Image> : <Text>No Photo</Text>}
                     </Card.Section>

frontend/src/components/pages/RoomsPage.js

@@ -1,5 +1,6 @@
 import React, {useState, useEffect, useContext, createContext} from 'react';
-import { APIContext } from '../../App';
+import { useAtom } from 'jotai'
+import { roomFilterAtom, serverConfigAtom } from '../../state/main';
 import { Text, Loader, Center, Card, Image, Badge, Button, SimpleGrid, Group } from '@mantine/core'
 import { useLocation } from "react-router-dom";
 import { useNotifications } from '@mantine/notifications';
@@ -11,8 +12,10 @@ function RoomsPage(props) {
     // const [opened, setOpened] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const [rooms, setRooms] = useState([])
+    const [filter, setFilter] = useState("");
+    const [serverConfig] = useAtom(serverConfigAtom)
+    const [roomFilter, setRoomFilter] = useAtom(roomFilterAtom)
 
-    const serverConfig = useContext(APIContext);
 
     const notifications = useNotifications();
     const {state} = useLocation();
@@ -22,8 +25,9 @@ function RoomsPage(props) {
         async function fetchSettings() {
             let url = `rooms`
             console.log("CURRENT STATE: ", state)
-            if (state) {
-                url = `rooms/${state.locationID}`
+            // if we are filtering by location
+            if (roomFilter.locationID) {
+                url = `rooms/${roomFilter.locationID}`
             }
             backendAPI.get(url).then(results => {
                 console.log("ROOMS: ", results)
@@ -45,6 +49,13 @@ function RoomsPage(props) {
 
     }, [])
 
+    // Check if filter changes for this page and refresh results
+    useEffect(() => {
+        console.log("CURRENT ROOM FILTER: ", roomFilter)
+
+    }, [roomFilter, setFilter])
+    
+
 
     return (
         <>
@@ -54,7 +65,7 @@ function RoomsPage(props) {
             { rooms.map((room, idx) => 
                 <Card key={`${room.ID}`} component="a" onClick={(e) => {}} shadow="sm" padding="md">
                     <Card.Section>
-                        {room.CoverPhoto ? <Image src={`${serverConfig.baseURL}/photos/rooms/${room.Name}/${room.CoverPhoto}`}></Image> : <Text>No Photo</Text>}
+                        {room.CoverPhoto ? <Image src={`${serverConfig.baseURL}/photos/locations/${room.CoverPhoto}`}></Image> : <Text>No Photo</Text>}
                     </Card.Section>
                     <Group position="apart">
                         <Text weight={500}>{room.Name}</Text>

frontend/src/state/main.js

@@ -0,0 +1,11 @@
+import { atom } from 'jotai'
+
+
+export const serverConfigAtom = atom({})
+
+// Pages state
+export const activePageAtom = atom({})
+
+// Filters for all pages to pass back and forth
+export const locationFilterAtom = atom({})
+export const roomFilterAtom = atom({})