react-router frontend, fixing backend issues, adding /api

2021-12-27 22:51:16 -05:00
parent eda6e3fc5b
commit e84f57692a
16 changed files with 370 additions and 371 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8000,9 +8000,9 @@
      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
    },
    "history": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/history/-/history-5.1.0.tgz",
-      "integrity": "sha512-zPuQgPacm2vH2xdORvGGz1wQMuHSIB56yNAy5FnLuwOwgSYyPKptJtcMm6Ev+hRGeS+GzhbmRacHzvlESbFwDg==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz",
+      "integrity": "sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==",
      "requires": {
        "@babel/runtime": "^7.7.6"
      }
@@ -14161,20 +14161,30 @@
      "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
    },
    "react-router": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.0.2.tgz",
-      "integrity": "sha512-8/Wm3Ed8t7TuedXjAvV39+c8j0vwrI5qVsYqjFr5WkJjsJpEvNSoLRUbtqSEYzqaTUj1IV+sbPJxvO+accvU0Q==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
+      "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==",
      "requires": {
-        "history": "^5.1.0"
+        "history": "^5.2.0"
+      },
+      "dependencies": {
+        "history": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz",
+          "integrity": "sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==",
+          "requires": {
+            "@babel/runtime": "^7.7.6"
+          }
+        }
      }
    },
    "react-router-dom": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.0.2.tgz",
-      "integrity": "sha512-cOpJ4B6raFutr0EG8O/M2fEoyQmwvZWomf1c6W2YXBZuFBx8oTk/zqjXghwScyhfrtnt0lANXV2182NQblRxFA==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz",
+      "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==",
      "requires": {
-        "history": "^5.1.0",
-        "react-router": "6.0.2"
+        "history": "^5.2.0",
+        "react-router": "6.2.1"
      }
    },
    "react-scripts": {
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,7 +18,8 @@
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "react-jss": "^10.9.0",
-    "react-router-dom": "^6.0.2",
+    "react-router": "^6.2.1",
+    "react-router-dom": "^6.2.1",
    "react-scripts": "4.0.3",
    "web-vitals": "^2.1.2"
  },
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,11 +1,13 @@
 import React, {useState, useEffect, createContext} from 'react';
 import HomePage from './components/pages/HomePage';
-import Locations from './components/pages/Locations'
+import Locations from './components/pages/Locations';
+import RoomsPage from './components/pages/RoomsPage';
+import { Routes, Route, useNavigate } from "react-router-dom";
 import { Modal, Button, Text, Group, TextInput, Loader, AppShell } from '@mantine/core';
 import { useDebouncedValue, useLocalStorageValue } from '@mantine/hooks';
 import { useNotifications } from '@mantine/notifications';

-import { backendAPI } from './services/backend-api';
+import { backendAPI, defaultURLS } from './services/backend-api';


 import SideBar from './components/SideBar';
@@ -21,19 +23,22 @@ function App() {
  // Main nav/sidebar appshell openend
  const [shellOpened, setShellOpened] = useState(false)
  const [isLoading, setIsLoading] = useState(true)
-  const [currentPage, setCurrentPage] = useState("home")
+  const [currentPage, setCurrentPage] = useState({"path": "home", "id": -1})

  const [serverConfig, setServerConfig] = useState({})

  const notifications = useNotifications();
+  const navigate = useNavigate();



  useEffect(() => {
+    navigate("/")// Reset to homepage on new load anywhere in the app
    setIsLoading(true)
    async function fetchSettings() {
      backendAPI.get('/config').then(results => {
-        results.data.baseURL = results.config.baseURL
+        // console.log("FULL RESULTS: ", results.config.baseURL)
+        results.data.baseURL = defaultURLS.baseURL
        console.log("CONFIG: ", results.data)
        setServerConfig(results.data)
        notifications.showNotification({
@@ -58,14 +63,22 @@ function App() {

  }, [])

+  useEffect(() => {
+    console.log("Page Change!", currentPage)
+
+  }, [currentPage])
+

  function showPage() {
-    switch (currentPage) {
+    switch (currentPage.path) {
      case "home":
        return <HomePage />
      case "locations":
-        return <Locations />
-    
+        console.log("RETURNING LOCATIONS: ", currentPage)
+        return <Locations setCurrentPage={setCurrentPage} id={currentPage.id}/>
+      case "rooms":
+        console.log("RETURNING ROOMS: ", currentPage)
+        return <RoomsPage setCurrentPage={setCurrentPage} id={currentPage.id} />
      default:
        break;
    }
@@ -80,7 +93,12 @@ function App() {
            navbar={<SideBar opened={shellOpened} setCurrentPage={setCurrentPage}/>}
            header={<AppHeader opened={shellOpened} setOpened={setShellOpened}/>}
          >
-            {showPage()}
+            <Routes>
+              <Route path="/" element={<HomePage />} />
+              <Route path="locations" element={<Locations />} />
+              <Route path="rooms" element={<RoomsPage />} />
+              
+            </Routes>
        </AppShell>
    </APIContext.Provider>
    
--- a/frontend/src/components/SideBar.js
+++ b/frontend/src/components/SideBar.js
@@ -1,5 +1,6 @@
 import React, {useState } from 'react';
 import { Navbar, Text, Group, ThemeIcon, Button, UnstyledButton } from '@mantine/core';
+import { Link } from 'react-router-dom';
 import { createStyles } from '@mantine/styles';
 import { BsMap } from 'react-icons/bs'

@@ -37,10 +38,6 @@ function SideBar(props) {
    const { classes } = useStyles();
    const [activePage, setActivePage] = useState("")

-    function handlePageChange(page) {
-        props.setCurrentPage(page)
-        setActivePage(page)
-      }

    return (
        <Navbar
@@ -51,14 +48,18 @@ function SideBar(props) {
            hidden={!props.opened}
            width={{ base: 200, breakpoints: { sm: '100%', lg: 300 } }}
        >
-            <UnstyledButton className={activePage === "locations" ? classes.activeButton : classes.button} onClick={() => handlePageChange("locations")} >
+            <Button leftIcon={<BsMap />} variant="white" className={activePage === "locations" ? classes.activeButton : classes.button} component={Link} to="/locations" onClick={() => setActivePage("locations")} >
+                Locations
+            </Button>
+
+            {/* <UnstyledButton component={Link} to="/locations" className={activePage === "locations" ? classes.activeButton : classes.button} >
                <Group>
                    <BsMap />
                    <Text>Locations</Text>
                </Group>

-            </UnstyledButton>
-            <UnstyledButton className={activePage === "rooms" ? classes.activeButton : classes.button} onClick={() => handlePageChange("rooms")} >
+            </UnstyledButton> */}
+            <UnstyledButton component={Link} to="/about" className={activePage === "rooms" ? classes.activeButton : classes.button} onClick={() => setActivePage("rooms")} >
                <Group>
                    <BsMap />
                    <Text>Rooms</Text>
--- a/frontend/src/components/pages/Locations.js
+++ b/frontend/src/components/pages/Locations.js
@@ -6,7 +6,7 @@ import { useNotifications } from '@mantine/notifications';
 import { backendAPI } from '../../services/backend-api';


-function LocationsPage() {
+function LocationsPage(props) {
    // const [opened, setOpened] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [locations, setLocations] = useState([])
@@ -16,10 +16,12 @@ function LocationsPage() {
    const notifications = useNotifications();

    useEffect(() => {
+        console.log("LOADING LOCATIONS PAGE!")
        setIsLoading(true)
        async function fetchSettings() {
          backendAPI.get('/locations').then(results => {
            console.log("CONFIG IN LOCATIONS: ", serverConfig)
+            console.log("LOCATIONS: ", results.data)
            setLocations(results.data)
            setIsLoading(false)
          }).catch(err => {
@@ -42,9 +44,10 @@ function LocationsPage() {
    return (
        <>
        <Center>{ isLoading && <Loader size="xl" variant="bars" />}</Center>
+        <Center><Text>Locations</Text></Center>
        <SimpleGrid cols={4} spacing="xl">
            { locations.map((location, idx) => 
-                <Card key={`${idx}-${location.Name}`} shadow="sm" padding="md">
+                <Card key={`${idx} - ${location.ID}`} component="a" onClick={(e) => {props.setCurrentPage({"path": "rooms", "id": 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>
--- a/frontend/src/components/pages/RoomsPage.js
+++ b/frontend/src/components/pages/RoomsPage.js
@@ -0,0 +1,71 @@
+import React, {useState, useEffect, useContext, createContext} from 'react';
+import { APIContext } from '../../App';
+import { Text, Loader, Center, Card, Image, Badge, Button, SimpleGrid, Group } from '@mantine/core'
+import { useNotifications } from '@mantine/notifications';
+
+import { backendAPI } from '../../services/backend-api';
+
+
+function RoomsPage(props) {
+    // const [opened, setOpened] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [rooms, setLocations] = useState([])
+
+    const serverConfig = useContext(APIContext);
+
+    const notifications = useNotifications();
+
+    useEffect(() => {
+        setIsLoading(true)
+        async function fetchSettings() {
+            let url = `/rooms`
+            console.log("CURRENT PAGE IN ROOMS: ", props.id)
+            if (props.id !== -1) {
+                url = `/rooms/${props.id}`
+            }
+            backendAPI.get(url).then(results => {
+                console.log("CONFIG IN LOCATIONS: ", serverConfig)
+                setLocations(results.data)
+                setIsLoading(false)
+            }).catch(err => {
+                notifications.showNotification({
+                title: 'Backend Notice',
+                message: `Failed to fetch rooms from backend! ${err}`,
+                autoClose: false,
+                color: "red",
+                })
+                setIsLoading(false)
+            })
+    
+        }
+        fetchSettings();
+        
+
+    }, [])
+
+
+    return (
+        <>
+        <Center>{ isLoading && <Loader size="xl" variant="bars" />}</Center>
+        <SimpleGrid cols={4} spacing="xl">
+            { rooms.map((room, idx) => 
+                <Card key={`${room.ID}`} component="a" onClick={(e) => {props.setCurrentPage({"path": "rooms", "id": room.ID})}} shadow="sm" padding="md">
+                    <Card.Section>
+                        {room.CoverPhoto ? <Image src={`${serverConfig.baseURL}/photos/rooms/${room.Name}/${room.CoverPhoto}`}></Image> : <Text>No Photo</Text>}
+                    </Card.Section>
+                    <Group position="apart">
+                        <Text weight={500}>{room.Name}</Text>
+                        {/* <Badge color="pink" variant="light">
+                            On Sale
+                        </Badge> */}
+                    </Group>
+                    <Text size="sm">{room.Description}</Text>
+                </Card>
+            )}
+        </SimpleGrid>
+        </>
+
+    );
+}
+
+export default RoomsPage;
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { NotificationsProvider } from '@mantine/notifications';
+import { BrowserRouter } from 'react-router-dom';

 //setup api
 //const backendPort = process.env.REACT_APP_BACKEND_PORT
@@ -10,8 +11,10 @@ import { NotificationsProvider } from '@mantine/notifications';

 ReactDOM.render(
  <React.StrictMode>
-    <NotificationsProvider>    
-      <App />
+    <NotificationsProvider>
+      <BrowserRouter>   
+        <App />
+      </BrowserRouter> 
    </NotificationsProvider>
  </React.StrictMode>,
  document.getElementById('root')
--- a/frontend/src/services/backend-api.js
+++ b/frontend/src/services/backend-api.js
@@ -2,12 +2,19 @@ import axios from 'axios';


 let baseURL = ""
+let baseAPIURL = "/api"

 if (process.env.NODE_ENV !== 'production') {
  baseURL = 'http://localhost:3500'
+  baseAPIURL = 'http://localhost:3500/api'
+}
+
+export const defaultURLS = {
+  baseURL: baseURL,
+  baseAPIURL: baseAPIURL
 }

 export const backendAPI = axios.create({
-	baseURL: baseURL
+	baseURL: baseAPIURL
  })