Finalize Sidebar and other fixes

components/Dashboard/Card.js

@@ -62,6 +62,9 @@ function Card({ bridge, index }) {
               <Typography variant="subtitle1">
                 Total Requests:
               </Typography>
+              <Typography variant="subtitle1">
+                State:
+              </Typography>
             </Grid>
           </Grid>
 
@@ -77,19 +80,29 @@ function Card({ bridge, index }) {
             <Typography variant="subtitle1" id={`card-eventCount-${index}`}>
               {bridge.eventCount || '0'}
             </Typography>
+
+            <Typography variant="subtitle1" id={`card-active-${index}`}>
+              {bridge.active ? 'Active' : 'Deactivated'}
+            </Typography>
           </Grid>
         </Grid>
 
         <Divider light className={classes.paddedDivider} />
         <Grid container spacing={2} style={{ textAlign: 'left' }}>
           <Grid item xs container spacing={2}>
             <Grid item xs>
-              {/* TODO: Should be request id */}
-              <Link href={`/events/${bridge.id}`}>
-                <Typography variant="subtitle1" color="secondary">
+              {bridge.eventId ? (
+                <Link href={`/events/${bridge.eventId}`}>
+                  <Typography variant="subtitle1" color="secondary">
+                    View Events
+                  </Typography>
+                </Link>
+              ) : (
+                <Typography variant="subtitle1">
                   View Events
                 </Typography>
-              </Link>
+              )}
+
             </Grid>
           </Grid>
         </Grid>
@@ -107,6 +120,8 @@ Card.propTypes = {
     updatedAt: PropTypes.string.isRequired,
     eventCount: PropTypes.number.isRequired,
     completedAt: PropTypes.string,
+    active: PropTypes.bool.isRequired,
+    eventId: PropTypes.number.isRequired,
   }).isRequired,
   index: PropTypes.number.isRequired,
 };

components/Editor/ActionsDialog/index.js

@@ -34,6 +34,20 @@ function ActionsDialog({
   const router = useRouter();
 
   const handleAbort = () => {
+    api.patch('/events/abort', {
+      bridge_id: id,
+    })
+      .then((res) => {
+        if (res.status === 200) {
+          setSuccessOpen(true);
+        }
+      })
+      .catch(() => {
+        setErrorOpen(true);
+        setTimeout(() => {
+          setErrorOpen(false);
+        }, 2500);
+      });
   };
 
   const handleActivate = async () => {

components/Editor/index.js

@@ -52,7 +52,6 @@ function Editor({ bridge, isEditView }) {
     method,
     headers,
     environmentVariables,
-    events,
     data,
     title,
   } = bridge;
@@ -99,7 +98,7 @@ function Editor({ bridge, isEditView }) {
   const generatePayload = (values) => ({
     active: values.active,
     title: values.title,
-    method: values.method,
+    http_method: values.method,
     outbound_url: values.outboundUrl,
     retries: values.retries,
     delay: values.delay,
@@ -140,7 +139,7 @@ function Editor({ bridge, isEditView }) {
   return (
     <>
       <Navbar />
-      <Sidebar events={events} title={title} />
+      <Sidebar events={bridge.events} bridgeId={bridge.id} title={title} />
 
       <Grid container item spacing={5} className={classes.root} sm={9} md={10}>
         <Grid item container wrap="nowrap">

components/Event/EventStatus.js

@@ -18,10 +18,11 @@ const useStyles = makeStyles({
 });
 
 function EventStatus({
-  eventCompleted, aborted, outbound, eventId,
+  eventCompleted, eventAborted, outbound, eventId,
 }) {
   const classes = useStyles();
   const [completed, setCompleted] = useState(eventCompleted);
+  const [aborted, setAborted] = useState(eventAborted);
   const [buttonDisable, setButtonDisable] = useState(false);
 
   const { statusCode, message } = (outbound.length >= 1 && outbound.slice(-1)[0].response);
@@ -33,7 +34,14 @@ function EventStatus({
 
   const handleAbort = async () => {
     setButtonDisable(true);
-    await api.patch(`/events/${eventId}/abort`);
+    await api.patch('/events/abort', {
+      event_id: eventId,
+    })
+      .then((res) => {
+        if (res.status === 200) {
+          setAborted(true);
+        }
+      });
     setCompleted(true);
   };
 
@@ -91,7 +99,7 @@ function EventStatus({
 export default EventStatus;
 
 EventStatus.propTypes = {
-  aborted: PropTypes.bool.isRequired,
+  eventAborted: PropTypes.bool.isRequired,
   eventCompleted: PropTypes.bool.isRequired,
   outbound: PropTypes.array.isRequired,
   eventId: PropTypes.number.isRequired,

components/Sidebar/ListItem.js

@@ -2,25 +2,34 @@ import {
   ListItem as MUIListItem,
   ListItemText,
   Typography,
+  Link,
 } from '@material-ui/core';
 import PropTypes from 'prop-types';
 
 function ListItem({
-  completedAt, statusCode, completed,
+  completed, completedAt, statusCode, eventId,
 }) {
   const timestamp = new Date(completedAt).toDateString();
+  let message = completed ? `${timestamp}` : 'Ongoing';
+  if (statusCode) {
+    message += ` - ${statusCode}`;
+  }
 
   return (
     <MUIListItem divider>
+
       <ListItemText>
-        <Typography
-          style={{ fontSize: '0.75em' }}
-          noWrap
-          align="center"
-        >
-          {completed ? `${timestamp} - ${statusCode}` : 'Ongoing' }
-        </Typography>
+        <Link href={`/events/${eventId}`}>
+          <Typography
+            style={{ fontSize: '0.75em' }}
+            noWrap
+            align="center"
+          >
+            {message}
+          </Typography>
+        </Link>
       </ListItemText>
+
     </MUIListItem>
   );
 }
@@ -31,4 +40,5 @@ ListItem.propTypes = {
   statusCode: PropTypes.number.isRequired,
   completedAt: PropTypes.string.isRequired,
   completed: PropTypes.bool.isRequired,
+  eventId: PropTypes.number.isRequired,
 };

components/Sidebar/index.js

@@ -1,4 +1,5 @@
 /* eslint-disable react/forbid-prop-types */
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import {
   Divider,
@@ -11,6 +12,7 @@ import {
 } from '@material-ui/core';
 
 import ListItem from './ListItem';
+import Loader from '../Loader';
 
 const useStyles = makeStyles(() => ({
   title: {
@@ -21,45 +23,59 @@ const useStyles = makeStyles(() => ({
     position: 'relative',
   },
   drawer: {
-    width: 180,
+    width: '180px',
   },
   drawerPaper: {
     width: 180,
   },
-  drawerContainer: {
-    overflow: 'auto',
+  drawerPaperNoOverflow: {
+    width: 180,
+    overflow: 'hidden',
   },
   toolbar: {
     minHeight: 46,
   },
 }));
 
-function Sidebar({ events, title }) {
+function Sidebar({ events, bridgeId, title }) {
   const classes = useStyles();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => setMounted(true), 1000);
+  }, []);
 
   return (
     <div className={classes.root}>
       <Drawer
         className={classes.drawer}
         variant="permanent"
         classes={{
-          paper: classes.drawerPaper,
+          paper: mounted ? classes.drawerPaper : classes.drawerPaperNoOverflow,
         }}
       >
         <Toolbar className={classes.toolbar} />
-        <div className={classes.drawerContainer}>
+        <div
+          style={{ overflow: mounted ? 'auto' : 'hidden' }}
+        >
           <List>
-            <Link href={`/bridges/${events[0] ? events[0].bridge_id : 'new'}`}>
+            <Link href={`/bridge/${bridgeId}`}>
               <Typography variant="h6" align="center" className={classes.title}>{title || 'Untitled'}</Typography>
             </Link>
             <Divider />
-            {events.map((event) => (
-              <ListItem
-                completedAt={event.completedAt}
-                statusCode={event.statusCode}
-                completed={event.completed}
-              />
-            ))}
+            {!mounted
+              ? (
+                <Loader />
+              ) : (
+                events && events.map((event) => (
+                  <ListItem
+                    completedAt={event.completedAt}
+                    statusCode={event.statusCode}
+                    completed={event.completed}
+                    eventId={event.id}
+                  />
+                ))
+              )}
           </List>
         </div>
       </Drawer>
@@ -72,4 +88,5 @@ export default Sidebar;
 Sidebar.propTypes = {
   events: PropTypes.array.isRequired,
   title: PropTypes.string.isRequired,
+  bridgeId: PropTypes.number.isRequired,
 };