created components

package.json

@@ -6,8 +6,11 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "bootstrap": "^4.6.0",
     "react": "^17.0.2",
+    "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },

src/App.js

@@ -1,23 +1,33 @@
-import logo from './logo.svg';
+import React, { useState } from "react";
-import './App.css';
+import { BrowserRouter, Route, Switch } from "react-router-dom";
+import Nav from "./components/Nav";
+import Signin from "./components/auth/Signin";
+import Signup from "./components/auth/Signup";
+import Pools from "./components/Pools";
+import Pool from "./components/Pool";
+import Profile from "./components/Profile";
+import CreatePool from "./components/CreatePool";
+import Main from "./components/Main";
+import "bootstrap/dist/css/bootstrap.min.css";
+import "bootstrap/dist/js/bootstrap.bundle.min";
+import "./App.css";
+import ProtectedRoute from "./components/ProtectedRoute.js";
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
+      <BrowserRouter>
-        <img src={logo} className="App-logo" alt="logo" />
+        <Nav />
-        <p>
+        <Switch>
-          Edit <code>src/App.js</code> and save to reload.
+          <Route component={Signup} path="/register" />
-        </p>
+          <Route component={Signin} path="/login" />
-        <a
+          <Route component={Main} path="/about" />
-          className="App-link"
+          <ProtectedRoute component={CreatePool} path="/create_pool" />
-          href="https://reactjs.org"
+          <ProtectedRoute component={Pools} path="/pool" />
-          target="_blank"
+          <ProtectedRoute component={Pool} path="/pool/:id" />
-          rel="noopener noreferrer"
+          <ProtectedRoute component={Profile} path="/profile" />
-        >
+        </Switch>
-          Learn React
+      </BrowserRouter>
-        </a>
-      </header>
     </div>
   );
 }

src/components/CreatePool.js

@@ -0,0 +1,83 @@
+import React, { useState, useEffect } from "react";
+
+const CreatePool = (props) => {
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const requestOptions = {
+      method: "Pool",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+      body: JSON.stringify({ Poolid: props.id }),
+    };
+    fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`, requestOptions)
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data);
+      });
+  };
+  return (
+    <div
+      className="bg-dark"
+      style={{ minHeight: "100vh", fontFamily: "Courier New" }}
+    >
+      <div
+        className="container card card-body text-left "
+        style={{ backgroundColor: "#F1EAE8" }}
+      >
+        <form onSubmit={onSubmit}>
+          <div className="form-group">
+            <h1 className="form-title" style={{ fontFamily: "Impact" }}>
+              Create Pool
+            </h1>
+            <label className="" for="title">
+              Pool Title:{" "}
+            </label>
+            <input
+              type="text"
+              id="title"
+              name="title"
+              className="form-control d-flex"
+              placeholder="Enter title here..."
+            ></input>
+          </div>
+          <div className="form-group">
+            <label className="" for="title">
+              Pool Capacity:
+            </label>
+            <input
+              type="number"
+              id="capacity"
+              name="capacity"
+              className="form-control d-flex"
+              placeholder="5"
+            ></input>
+          </div>
+          <div className="form-group">
+            <label className="" for="title">
+              Pool Description:
+            </label>
+            <textarea
+              type="text"
+              id="Pool-text"
+              name="Pool-text"
+              style={{ height: "200px" }}
+              className="form-control"
+              placeholder="Enter text here..."
+            ></textarea>
+          </div>
+
+          <input
+            className="btn btn-success text-left"
+            type="submit"
+            value="Submit"
+          />
+          <br />
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default CreatePool;

src/components/Nav.js

@@ -0,0 +1,40 @@
+import React from "react";
+
+const Nav = (props) => {
+  return (
+    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
+      <button
+        className="navbar-toggler"
+        type="button"
+        data-toggle="collapse"
+        data-target="#navbarNavDropdown"
+        aria-controls="navbarNavDropdown"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span className="navbar-toggler-icon"></span>
+      </button>
+      <div className="collapse navbar-collapse" id="navbarNavDropdown">
+        <ul className="navbar-nav mr-auto">
+          <li className="nav-item">
+            <a className="nav-link text-white" href="/about">
+              Carpool <span className="sr-only">(current)</span>
+            </a>
+          </li>
+          <li className="nav-item">
+            <a className="nav-link text-white" href="/profile">
+              Profile <span className="sr-only">(current)</span>
+            </a>
+          </li>
+          <li className="nav-item">
+            <a className="nav-link text-white" href="/posts">
+              Posts
+            </a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  );
+};
+
+export default Nav;

src/components/ProtectedRoute.js

@@ -0,0 +1,82 @@
+import React from "react";
+import { Route, Redirect } from "react-router-dom";
+
+const ProtectedRoute = ({ component: Component, ...rest }) => {
+  const isAuthenticated = async () => {
+    try {
+      const requestOptions = {
+        method: "GET",
+        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+      };
+      const response = await fetch(
+        `${process.env.REACT_APP_API_ENDPOINT}/profile`,
+        requestOptions
+      );
+
+      console.log(`Checking status! ${response.status}`);
+      if (response.status === 200) {
+        return true;
+      } else {
+        const requestOptions = {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: { refresh: localStorage.getItem("refresh") },
+        };
+        const response = await fetch(
+          `${process.env.REACT_APP_API_ENDPOINT}/token/refresh/`,
+          requestOptions
+        );
+
+        const data = response.json();
+
+        localStorage.setItem("token", data.access);
+
+        return false;
+      }
+    } catch (e) {
+      const requestOptions = {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: { refresh: localStorage.getItem("refresh") },
+      };
+      const response = await fetch(
+        `${process.env.REACT_APP_API_ENDPOINT}/token/refresh/`,
+        requestOptions
+      );
+
+      const data = response.json();
+
+      localStorage.setItem("token", data.access);
+
+      return false;
+    }
+  };
+
+  return (
+    <Route
+      {...rest}
+      render={(props) => {
+        if (isAuthenticated()) {
+          return <Component {...props} {...rest} />;
+        } else {
+          return (
+            <Redirect
+              to={{
+                pathname: "/login",
+                state: {
+                  from: props.location,
+                },
+              }}
+            />
+          );
+        }
+      }}
+    />
+  );
+};
+
+export default ProtectedRoute;