Merge pull request #33 from hcp-uw/hash-router

hash router!!!

.gitignore

@@ -133,4 +133,6 @@ dist
 /starter-frontend/public/tinymce
 
 # Account key
-serviceAccountKey.json
+serviceAccountKey.json
+
+*build*

starter-frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "green-notes",
-  "homepage": "https://hcp-uw.github.io/green-notes",
+  "homepage": "https://hcp-uw.github.io/",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

starter-frontend/src/App.tsx

@@ -1,39 +1,39 @@
 import './App.css';
-import { useEffect, useState } from 'react';
-import axios from 'axios';
+import { Routes, Route } from 'react-router-dom';
 import Navbar from './components/navbar/Navbar';
-import { Outlet } from 'react-router-dom';
 import { AuthProvider } from "./contexts/AuthContext";
-import ErrorMessage from "./components/auth/ErrorMessage"
-
-
-const baseURL: string = 'http://localhost:3001';
+import ErrorMessage from "./components/auth/ErrorMessage";
+import ErrorPage from "./pages/error-page/error-page";
+import AboutUs from './pages/about-us/about-us';
+import Collaboration from './pages/collaboration/collaboration';
+import HomeScreen from './pages/home/Home';
+import { Note } from './pages/editor/editor';
+import { Notes } from './pages/notes/notes';
+import Profile from './pages/profile/profile';
+import Login from './pages/auth-pages/login';
+import Register from './pages/auth-pages/register';
+import NewProfile from './pages/edit-profile/EditProfile';
+import PrivateRoute from './components/auth/PrivateRoute';
 
 function App(): JSX.Element {
-  const [message, setMessage] = useState('');
-
-  // useEffect(() => {
-  //   axios.get(`${baseURL}/hello`)
-  //     .then(res => {
-  //       setMessage(res.data); 
-  //     })
-  //     .catch(error => {
-  //       console.error('error fetching data: ', error);
-  //     });
-  // }, []); 
-
-  // console.log(message);
   return (
-    <>
-    {/* wrapped everything in AuthProvider so
-    everything has access to authentication context */}
     <AuthProvider>
       <Navbar />
-      <Outlet />
+      <Routes>
+        <Route path="/" element={<HomeScreen />} />
+        <Route path="/about-us" element={<AboutUs />} />
+        <Route path="/collaboration" element={<PrivateRoute><Collaboration /></PrivateRoute>} />
+        <Route path="/note" element={<PrivateRoute><Note /></PrivateRoute>} />
+        <Route path="/notes" element={<PrivateRoute><Notes /></PrivateRoute>} />
+        <Route path="/profile" element={<PrivateRoute><Profile /></PrivateRoute>} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/register" element={<Register />} />
+        <Route path="/new-profile" element={<PrivateRoute><NewProfile /></PrivateRoute>} />
+        <Route path="*" element={<ErrorPage />} />
+      </Routes>
       <ErrorMessage />
     </AuthProvider>
-    </>
   );
 }
 
-export default App;
+export default App;

starter-frontend/src/index.js

@@ -1,79 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { HashRouter } from 'react-router-dom';
 import App from './App';
-import {
-  createBrowserRouter, 
-  RouterProvider,
-} from "react-router-dom";
-import ErrorPage from "./pages/error-page/error-page";
-// import "./App.css";
-import AboutUs from './pages/about-us/about-us';
-import Collaboration from './pages/collaboration/collaboration'
-import HomeScreen from './pages/home/Home';
-import { Note } from './pages/editor/editor';
-import { Notes } from './pages/notes/notes';
-import Profile from './pages/profile/profile';
-import Login from './pages/auth-pages/login';
-import Register from './pages/auth-pages/register';
-import NewProfile from'./pages/edit-profile/EditProfile';
-import PrivateRoute from './components/auth/PrivateRoute';
 
-// Private route element redirects people to login first
-// No real authentication yet, any fake email and password will do
-const router = createBrowserRouter([
-  {
-    path: "/", 
-    element: <App />,
-    errorElement: <ErrorPage />, 
-    children: [
-      { index: true, element: <HomeScreen />},
-      {
-        path: "about-us",
-        element: <AboutUs />,
-      }, 
-      {
-        path: "collaboration",
-        element: <PrivateRoute><Collaboration /></PrivateRoute>,
-      }, 
-      {
-        path: "note",
-        // Later change to
-        // path: "note/:noteId",
-        element: <PrivateRoute><Note /></PrivateRoute>,
-      }, 
-      {
-        //Later change to
-        //path: "notes/:folderId",
-        path: "notes",
-        element: <PrivateRoute><Notes /></PrivateRoute>,
-      }, 
-      {
-        path: "profile",
-        // Later change to
-        // path: "profile/:profileId", 
-        element: <PrivateRoute><Profile /></PrivateRoute>,
-      }, 
-      {
-        path: "login",
-        element: <Login />
-      },
-      {
-        path: "register",
-        element: <Register />
-      },
-      {
-        path: "new-profile",
-        element: <PrivateRoute><NewProfile /></PrivateRoute>
-      },
-
-
-    ]
-  }, 
-]);
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <RouterProvider router={router} />
+    <HashRouter>
+      <App />
+    </HashRouter>
   </React.StrictMode>
-);
+);