Fix warnings/errors

components/Dashboard/Card.js

@@ -29,8 +29,8 @@ const useStyles = makeStyles((theme) => ({
 function Card({ bridge, index }) {
   const classes = useStyles();
 
-  const completedAt = (bridge.completedAt
-    && new Date(bridge.completedAt).toDateString())
+  const latestRequest = (bridge.latestRequest
+    && new Date(bridge.latestRequest).toDateString())
     || 'No requests';
 
   const updatedAt = new Date(bridge.updatedAt).toDateString();
@@ -72,7 +72,7 @@ function Card({ bridge, index }) {
 
           <Grid item xs container direction="column" className={classes.values}>
             <Typography variant="subtitle1" id={`card-completedAt-${index}`}>
-              {completedAt}
+              {latestRequest}
             </Typography>
 
             <Typography variant="subtitle1" id={`card-updateAt-${index}`}>
@@ -126,9 +126,9 @@ Card.propTypes = {
     title: PropTypes.string.isRequired,
     updatedAt: PropTypes.string.isRequired,
     eventCount: PropTypes.number.isRequired,
-    completedAt: PropTypes.string,
+    latestRequest: PropTypes.string,
     active: PropTypes.bool.isRequired,
-    eventId: PropTypes.number.isRequired,
+    eventId: PropTypes.number,
   }).isRequired,
   index: PropTypes.number.isRequired,
 };

components/Editor/BridgeTestCard/index.js

@@ -90,7 +90,6 @@ export default BridgeTestCard;
 BridgeTestCard.propTypes = {
   values: PropTypes.shape({
     outboundUrl: PropTypes.string.isRequired,
-    method: PropTypes.string.isRequired,
     retries: PropTypes.string.isRequired,
     delay: PropTypes.string.isRequired,
     headers: PropTypes.arrayOf(

components/Editor/EnvironmentVariablesCard/index.js

@@ -56,9 +56,7 @@ function EnvironmentVariablesCard({ environmentVariables }) {
       <AccordionSummary
         icon={<ExpandMoreIcon />}
         title="Environment variables"
-        subtitle="Keep Your Secrets Safe"
-        tooltip
-        tooltipMessage="Environment variables are encrypted for data protection. You will not be able to view the value after saving."
+        subtitle="Encrypted To Keep Your Secrets Safe"
       />
       <AccordionDetails>
         <Grid container spacing={2}>

components/Editor/PayloadCard/index.js

@@ -65,7 +65,7 @@ function PayloadCard({ isEditView, values }) {
                 className={classes.payloadContainer}
               >
 
-                <CodeMirror readOnly isEditView={isEditView} />
+                <CodeMirror readOnly isEditView={isEditView} id="latestPayload" />
               </Container>
             </AccordionDetails>
           </Accordion>
@@ -85,7 +85,6 @@ PayloadCard.propTypes = {
   isEditView: PropTypes.bool.isRequired,
   values: PropTypes.shape({
     outboundUrl: PropTypes.string.isRequired,
-    method: PropTypes.string.isRequired,
     retries: PropTypes.string.isRequired,
     delay: PropTypes.string.isRequired,
     headers: PropTypes.arrayOf(

components/Editor/index.js

@@ -203,27 +203,31 @@ function Editor({ bridge, isEditView }) {
                         Send your events here:
                       </Typography>
                       <Typography variant="h6">
-                        {slug ? (`https://api.bridgeapi.dev/${slug}`) : ('Autogenerated on save')}
+                        {slug ? `https://api.bridgeapi.dev/${slug}` : 'Autogenerated on save.'}
                       </Typography>
                     </Grid>
                   </Grid>
                   <Grid item sm={4} md={4} lg={4} container justify="flex-end">
                     <Grid>
-                      <ActionsDialog
-                        active={active}
-                        open={actionsDialogOpen}
-                        onClose={() => setActionsDialogOpen(false)}
-                        bridgeSlug={slug}
-                      />
-                      <Button
-                        onClick={() => setActionsDialogOpen(true)}
-                        variant="outlined"
-                        color="secondary"
-                        className={classes.action}
-                        id="actions-button"
-                      >
-                        Actions
-                      </Button>
+                      {slug && (
+                        <>
+                          <ActionsDialog
+                            active={active}
+                            open={actionsDialogOpen}
+                            onClose={() => setActionsDialogOpen(false)}
+                            bridgeSlug={slug}
+                          />
+                          <Button
+                            onClick={() => setActionsDialogOpen(true)}
+                            variant="outlined"
+                            color="secondary"
+                            className={classes.action}
+                            id="actions-button"
+                          >
+                            Actions
+                          </Button>
+                        </>
+                      )}
                       <Button id="save-btn" onClick={submitForm} variant="contained" color="secondary">Save</Button>
                     </Grid>
                   </Grid>
@@ -313,7 +317,6 @@ Editor.propTypes = {
     events: PropTypes.arrayOf(
       PropTypes.shape({
         id: PropTypes.number.isRequired,
-        bridge_id: PropTypes.number.isRequired,
         completed: PropTypes.bool,
         completed_at: PropTypes.string,
         data: PropTypes.string,

components/Event/InboundAccordion.js

@@ -101,7 +101,7 @@ function TimelineAccordion({ request }) {
                   Payload:
                 </Typography>
 
-                <CodeMirror readOnly isEditView data={request.payload} />
+                <CodeMirror readOnly id="codemirror-inbound" isEditView data={request.payload} />
               </Grid>
             </AccordionDetails>
           </Accordion>

components/Event/OutboundAccordion.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import React from 'react';
 import {
   Accordion,
   AccordionDetails,
@@ -21,7 +22,7 @@ import CodeMirror from '../Codemirror';
 
 import { hourMinutes } from '../../utils/formatDate';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
   root: {
     width: '100%',
   },
@@ -52,8 +53,9 @@ const useStyles = makeStyles({
   },
   bold: {
     fontWeight: '700',
+    margin: theme.spacing(0, 1, 0, 2),
   },
-});
+}));
 
 function OutboundAccordion({ request }) {
   const classes = useStyles();
@@ -97,32 +99,28 @@ function OutboundAccordion({ request }) {
 
                 <Typography>
                   Headers:
-                  {' '}
-                  <ul>
-                    {request.headers.map((header) => (
-                      <li key={`${header.key}`}>
-                        <Typography display="inline" className={classes.bold}>
-                          {header.key}
-                          :
-                        </Typography>
-                        {'  '}
-                        <Typography display="inline">
-                          {header.value}
-                        </Typography>
-                      </li>
-                    ))}
-                  </ul>
-
                 </Typography>
 
+                {request.headers.map((header) => (
+                  <div style={{ display: 'flex' }} key={`${header.key}`}>
+                    <Typography variant="body1" className={classes.bold}>
+                      {header.key}
+                      :
+                    </Typography>
+                    <Typography variant="body1">
+                      {header.value}
+                    </Typography>
+                  </div>
+                ))}
+
                 <Typography
                   variant="subtitle1"
                   className={classes.payloadHeader}
                 >
                   Payload:
                 </Typography>
 
-                <CodeMirror readOnly isEditView data={request.payload} />
+                <CodeMirror readOnly id="codemirror-outbound" isEditView data={request.payload} />
               </Grid>
             </AccordionDetails>
           </Accordion>

components/Event/ResponseAccordion.js

@@ -109,7 +109,7 @@ function ResponseAccordion({ request }) {
                   Payload:
                 </Typography>
 
-                <CodeMirror readOnly isEditView data={request.payload} />
+                <CodeMirror readOnly id="codemirror-response" isEditView data={request.payload} />
               </Grid>
             </AccordionDetails>
           </Accordion>

components/Sidebar/ListItem.js

@@ -37,8 +37,13 @@ function ListItem({
 export default ListItem;
 
 ListItem.propTypes = {
-  statusCode: PropTypes.number.isRequired,
-  completedAt: PropTypes.string.isRequired,
+  statusCode: PropTypes.number,
+  completedAt: PropTypes.string,
   completed: PropTypes.bool.isRequired,
   eventId: PropTypes.number.isRequired,
 };
+
+ListItem.defaultProps = {
+  statusCode: null,
+  completedAt: null,
+};

components/Sidebar/index.js

@@ -76,6 +76,7 @@ function Sidebar({ events, bridgeSlug, title }) {
                     statusCode={event.statusCode}
                     completed={event.completed}
                     eventId={event.id}
+                    key={event.id}
                   />
                 ))
               )}

components/shared/Footer/index.js

@@ -32,7 +32,7 @@ function Footer({ handleOpen }) {
         </Container>
 
         <Container maxWidth="md" style={{ marginTop: '0.5rem' }}>
-          <Grid item spacing={3} maxWidth>
+          <Grid item>
             <Typography style={{ fontWeight: 'bold' }}>
               About Us
             </Typography>

pages/bridge/[id].js

@@ -45,7 +45,7 @@ Show.propTypes = {
     active: PropTypes.bool.isRequired,
     slug: PropTypes.string.isRequired,
     outboundUrl: PropTypes.string.isRequired,
-    method: PropTypes.string.isRequired,
+    httpMethod: PropTypes.string.isRequired,
     retries: PropTypes.number.isRequired,
     delay: PropTypes.number.isRequired,
     headers: PropTypes.arrayOf(

pages/dashboard.js

@@ -33,7 +33,13 @@ function Dashboard({ bridges }) {
           <Grid container spacing={2} id="dashboard-card-container">
 
             {bridges && bridges.length > 0
-              ? (bridges.map((bridge, idx) => <Card bridge={bridge} key={bridge} index={idx} />))
+              ? (bridges.map((bridge, idx) => (
+                <Card
+                  bridge={bridge}
+                  key={bridge.updatedAt}
+                  index={idx}
+                />
+              )))
               : (
                 <Grid item xs={12}>
                   <Typography
@@ -72,9 +78,8 @@ Dashboard.propTypes = {
     PropTypes.shape({
       title: PropTypes.string.isRequired,
       updatedAt: PropTypes.string.isRequired,
-      lastRequest: PropTypes.string.isRequired,
-      requests: PropTypes.string.isRequired,
-      eventId: PropTypes.string.isRequired,
+      lastRequest: PropTypes.string,
+      eventId: PropTypes.number,
     }),
   ).isRequired,
 };

pages/events/[slug].js

@@ -129,8 +129,7 @@ Events.propTypes = {
     completed: PropTypes.bool.isRequired,
     aborted: PropTypes.bool.isRequired,
     id: PropTypes.number.isRequired,
-    bridgeId: PropTypes.number.isRequired,
-    completedAt: PropTypes.string.isRequired,
+    completedAt: PropTypes.string,
     data: PropTypes.shape({
       inbound: PropTypes.shape({
         dateTime: PropTypes.string.isRequired,
@@ -171,8 +170,7 @@ Events.propTypes = {
       completed: PropTypes.bool.isRequired,
       aborted: PropTypes.bool.isRequired,
       id: PropTypes.number.isRequired,
-      bridgeId: PropTypes.number.isRequired,
-      completedAt: PropTypes.string.isRequired,
+      completedAt: PropTypes.string,
       data: PropTypes.shape({
         inbound: PropTypes.shape({
           dateTime: PropTypes.string.isRequired,

specs/fixtures/bridges.json

@@ -15,6 +15,7 @@
       },
       "created_at": "2020-11-24T13:49:08.508Z",
       "updated_at": "2020-11-25T15:33:12.740Z",
+      "latest_request": "2020-11-25T15:33:12.740Z",
       "user_id": 3,
       "active": true,
       "eventCount": 1,

utils/formatDate.js

@@ -9,7 +9,7 @@ export default formatDate;
 
 export const hourMinutes = (timestamp) => {
   const date = new Date(timestamp);
-  const minutes = date.getMinutes();
+  let minutes = String(date.getMinutes());
   let hour = date.getHours();
   let amPm;
 
@@ -21,9 +21,16 @@ export const hourMinutes = (timestamp) => {
     hour -= 12;
   } else if (hour === 12) {
     amPm = 'PM';
+  } else if (hour < 10) {
+    hour = `0${hour}`;
+    amPm = 'AM';
   } else {
     amPm = 'AM';
   }
 
+  if (minutes.length === 1) {
+    minutes = `0${minutes}`;
+  }
+
   return `${hour}:${minutes}${amPm}`;
 };