Bitesize changes (change requests to events, linked bridge title, useEffect cleanup)

components/Sidebar/index.js

@@ -48,8 +48,8 @@ function Sidebar({ events, title }) {
         <Toolbar className={classes.toolbar} />
         <div className={classes.drawerContainer}>
           <List>
-            <Link href="/editor/32">
-              <Typography variant="h6" align="center" className={classes.title}>{title}</Typography>
+            <Link href={`/bridges/${events[0].bridge_id}`}>
+              <Typography variant="h6" align="center" className={classes.title}>{title || 'Untitled'}</Typography>
             </Link>
             <Divider />
             {events.slice().reverse().map((evt) => {

components/shared/dashboard/Navbar/index.js

@@ -63,8 +63,10 @@ export default function Navbar() {
   };
 
   const menuUseEffect = () => {
+    let cancelled = false;
     const getBridges = async () => {
       // await axios.get('http://localhost:3001/bridges')
+      // if (!cancelled)
       //   .then((res) => {
       //     setBridges(res.data);
       //   });
@@ -76,6 +78,8 @@ export default function Navbar() {
     };
 
     getBridges();
+    // eslint-disable-next-line no-unused-vars
+    return () => { cancelled = true; };
   };
 
   // Determine the width of the 'Dashboard' link &

pages/requests/[slug].js → pages/events/[slug].js

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { Grid, makeStyles, Typography } from '@material-ui/core';
 import { Timeline } from '@material-ui/lab';
 
-import EventStatus from '../../components/requests/EventStatus';
-import FailedAttempts from '../../components/requests/FailedAttempts';
+import EventStatus from '../../components/events/EventStatus';
+import FailedAttempts from '../../components/events/FailedAttempts';
 import Navbar from '../../components/shared/dashboard/Navbar/index';
-import { SeedData } from '../../components/requests/SeedData';
+import { SeedData } from '../../components/events/SeedData';
 import Sidebar from '../../components/Sidebar';
-import TimelineAccordion from '../../components/requests/TimelineAccordion';
+import TimelineAccordion from '../../components/events/TimelineAccordion';
 import ProtectRoute from '../../utils/ProtectRoute';
 
 const useStyles = makeStyles(() => ({
@@ -24,7 +24,7 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-function Requests({
+function Events({
   event, sidebarEvents, title, url,
 }) {
   const classes = useStyles();
@@ -95,7 +95,7 @@ export async function getServerSideProps() {
   };
 }
 
-Requests.propTypes = {
+Events.propTypes = {
   title: PropTypes.string.isRequired,
   url: PropTypes.string.isRequired,
   event: PropTypes.shape({
@@ -120,4 +120,4 @@ Requests.propTypes = {
   ).isRequired,
 };
 
-export default Requests;
+export default Events;

src/contexts/auth.js

@@ -16,14 +16,16 @@ function AuthProvider({ children }) {
   // Helper function that enables us to fire off requests without
   // having the set the header token each time.
   useEffect(() => {
+    let userLoaded = false;
     async function loadUserFromCookies() {
       const token = Cookies.get('token');
-      if (token) {
+      if (!userLoaded && token) {
         api.defaults.headers['BRIDGE-JWT'] = token;
       }
     }
 
     loadUserFromCookies();
+    return () => { userLoaded = true; };
   }, []);
 
   // Fires off an api request to fetch the JWT.

utils/formatDate.js

@@ -1,8 +1,7 @@
 // formats ruby timestamps to a date and time string
-// ruby timestamp format: "2020-11-19T16:44:53.702Z";
+// ruby timestamp format: "2020-11-19 16:44:53";
 function formatDate(timeStamp) {
-  const date = timeStamp.split(' ')[0];
-  const time = timeStamp.split(' ')[1].split('.')[0];
+  const [date, time] = timeStamp.split(' ');
   return { date, time };
 }