Merge pull request #3 from oslabs-beta/kirk_jessica/merge_attempt_wit…

…h_UI/ux_merge Successfully merged updates from branch(UI/UX merge).
open-source-labs · Feb 17, 2022 · 27322b6 · 27322b6
2 parents fbf9cb1 + 0c7342c
commit 27322b6
Show file tree

Hide file tree

Showing 30 changed files with 113,812 additions and 58,403 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,4 +1,9 @@
 {
+  "globals": {
+    "NodeJS": true,
+    "JSX": true,
+    "Electron": true
+  },
   "plugins": ["react", "prettier"],
   "parser": "babel-eslint",
   "parserOptions": {

diff --git a/.gitignore b/.gitignore
@@ -44,5 +44,4 @@ __tests__/**/__snapshots__
 .Spotlight-V100
 .Trashes
 ehthumbs.db
-Thumbs.db
-
+Thumbs.db
diff --git a/app/components/Contact.tsx b/app/components/Contact.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
 import React, { useContext } from 'react';
 import '../stylesheets/Contact.scss';
 import { DashboardContext } from '../context/DashboardContext';

diff --git a/app/components/FirstLaunch.tsx b/app/components/FirstLaunch.tsx
diff --git a/app/components/Occupied.tsx b/app/components/Occupied.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
 import React, { useContext, useEffect, useState, useRef, forwardRef } from 'react';
 
 // MATERIAL UI METHODS
@@ -49,8 +50,8 @@ type ClickEvent = React.MouseEvent<HTMLElement>;
 
 const Occupied = React.memo(() => {
   const { setServicesData } = useContext(ApplicationContext);
-  const { applications, getApplications, deleteApp, mode, getMode } = useContext(DashboardContext);
-  const { commsData, setCommsData, fetchCommsData } = useContext(CommsContext);
+  const { applications, getApplications, deleteApp, mode } = useContext(DashboardContext);
+  const { commsData } = useContext(CommsContext);
   const [open, setOpen] = useState<boolean>(false);
   const [addOpen, setAddOpen] = useState<boolean>(false);
   const [addsOpen, setAddsOpen] = useState<boolean>(false);
@@ -67,7 +68,7 @@ const Occupied = React.memo(() => {
   }, []);
 
   // Ask user for deletetion confirmation
-  const confirmDelete = (event: ClickEvent, app: string, i: number) => {
+  const confirmDelete = (event: ClickEvent, application: string, i: number) => {
     const message = `The application '${app}' will be permanently deleted. Continue?`;
     if (confirm(message)) deleteApp(i);
   };
@@ -82,8 +83,9 @@ const Occupied = React.memo(() => {
     }
   };
 
-  //Conditional Rendering of UI Modals for Light and Dark Mode
-  const useStylesDark = makeStyles<Theme, StyleProps>(theme => ({
+  // Conditional Rendering of UI Modals for Light and Dark Mode
+  // Theme, StyleProps
+  const useStylesDark = makeStyles<StyleProps>(theme => ({
     // ALL CARDS
     paper: {
       display: 'flex',
@@ -136,7 +138,7 @@ const Occupied = React.memo(() => {
       // color: '#ffffff', // dark mode
     },
   }));
-  const useStylesLight = makeStyles<Theme, StyleProps>(theme => ({
+  const useStylesLight = makeStyles<StyleProps>(theme => ({
     // ALL CARDS
     paper: {
       display: 'flex',
@@ -190,8 +192,7 @@ const Occupied = React.memo(() => {
     },
   }));
 
-  let classes =
-    mode === 'light mode' ? useStylesLight({} as StyleProps) : useStylesDark({} as StyleProps);
+  const classes = mode === 'light mode' ? useStylesLight({}) : useStylesDark({}); // {} as StyleProps
 
   // update notification count based on statuscode >= 400
   const notification = commsData
@@ -216,7 +217,7 @@ const Occupied = React.memo(() => {
                 <input
                   className="form"
                   id="textInput"
-                  placeholder={'Search...'}
+                  placeholder="Search..."
                   onChange={e => setSearchTerm(e.target.value)}
                   type="text"
                   name="search"
@@ -233,8 +234,8 @@ const Occupied = React.memo(() => {
               </span>
               <DashboardIcon className="navIcon" id="dashboardIcon" />
             </div>
-
-            <div className="notificationsIconArea" onClick={updateNotification}>
+            {/* onClick={updateNotification} */}
+            <div className="notificationsIconArea">
               <span className="notificationsTooltip">
                 You have {notification ? notification.length : 0} new alerts
               </span>
@@ -249,24 +250,24 @@ const Occupied = React.memo(() => {
         </header>
 
         <div className="cardContainer">
-          <div className="card" id={`card-add`}>
+          <div className="card" id="card-add">
             <Button className={classes.paper} onClick={() => setAddOpen(true)}>
               <AddCircleOutlineTwoToneIcon className={classes.icon} />
             </Button>
           </div>
           {applications
             .filter((db: any) => db[0].toLowerCase().includes(searchTerm.toLowerCase()))
-            .map((app: string[], i: number | any | string | undefined) => (
-              <div className="card" key={`card-${i}`} id={`card-${app[1]}`}>
+            .map((application: string[], i: number | any | string | undefined) => (
+              <div className="card" key={`card-${i}`} id={`card-${application[1]}`}>
                 <Card
                   key={`card-${i}`}
                   className={classes.paper}
                   variant="outlined"
-                  onClick={event => handleClick(event, app[0], i)}
+                  onClick={event => handleClick(event, application[0], i)}
                 >
                   <div className="databaseIconContainer">
                     <div className="databaseIconHeader">
-                      {app[1] === 'SQL' ? (
+                      {application[1] === 'SQL' ? (
                         <img className="databaseIcon" alt="SQL" />
                       ) : (
                         <img className="databaseIcon" alt="MongoDB" />
@@ -278,34 +279,39 @@ const Occupied = React.memo(() => {
                     avatar={
                       <IconButton
                         id="iconButton"
-                        ref={element => (delRef.current[i] = element)}
+                        ref={element => {
+                          delRef.current[i] = element;
+                        }}
                         className={classes.iconbutton}
                         aria-label="Delete"
-                        onClick={event => confirmDelete(event, app[0], i)}
+                        onClick={event => confirmDelete(event, application[0], i)}
                       >
                         <HighlightOffIcon
                           className={classes.btnStyle}
                           id="deleteIcon"
-                          ref={element => (delRef.current[i] = element)}
+                          ref={element => {
+                            delRef.current[i] = element;
+                          }}
                         />
                       </IconButton>
                     }
-                  ></CardHeader>
+                  />
                   <CardContent>
                     <p id="databaseName">Database Name:</p>
-                    <Typography className={classes.fontStyles}>{app[0]}</Typography>
+                    <Typography className={classes.fontStyles}>{application[0]}</Typography>
                   </CardContent>
                   <hr className="cardLine" />
 
                   <div className="cardFooter">
                     <UpdateIcon className="cardFooterIcon" />
                     <em>
-                      <p id="cardFooterText">{app[3]}</p>
+                      <p id="cardFooterText">{application[3]}</p>
                     </em>
                   </div>
                 </Card>
               </div>
             ))}
+
           <Modal open={addOpen} onClose={() => setAddOpen(false)}>
             <AddModal setOpen={setAddOpen} />
           </Modal>

diff --git a/app/components/Occupied_darkmode.tsx b/app/components/Occupied_darkmode.tsx
@@ -60,7 +60,7 @@ const Occupied = React.memo(() => {
   }, []);
 
   // Ask user for deletetion confirmation
-  const confirmDelete = (event: ClickEvent, app: string, i: number) => {
+  const confirmDelete = (event: ClickEvent, application: string, i: number) => {
     const message = `The application '${app}' will be permanently deleted. Continue?`;
     if (confirm(message)) deleteApp(i);
   };
@@ -75,7 +75,7 @@ const Occupied = React.memo(() => {
     }
   };
 
-  const useStyles = makeStyles<Theme, StyleProps>(theme => ({
+  const useStyles = makeStyles<StyleProps>(theme => ({
     // ALL CARDS
     paper: {
       display: 'flex',
@@ -129,15 +129,19 @@ const Occupied = React.memo(() => {
     }
   }));
 
-  const classes = useStyles({} as StyleProps);
+  const classes = useStyles({});
 
   return (
     <div className="entireArea">
       <div className="dashboardArea">
         <header className="mainHeader">
           <section className="header" id="leftHeader">
-            <span><ListIcon className="icon" id="listIcon" /></span>
-            <span><p id="dashboard">Dashboard</p></span>
+            <span>
+              <ListIcon className="icon" id="listIcon" />
+            </span>
+            <span>
+              <p id="dashboard">Dashboard</p>
+            </span>
           </section>
           <section className="header" id="rightHeader">
             <form className="form">
@@ -153,7 +157,6 @@ const Occupied = React.memo(() => {
               <span className="dashboardTooltip">You have {applications.length} active databases</span>
               <DashboardIcon className="navIcon" id="dashboardIcon" />
             </div>
-
             <div className="notificationsIconArea">
               <span className="notificationsTooltip">You have no new alerts</span>
               < NotificationsIcon className="navIcon" id="notificationsIcon" />
@@ -167,54 +170,57 @@ const Occupied = React.memo(() => {
         </header>
 
         <div className="cardContainer">
-          <div className="card" id={`card-add`}>
+          <div className="card" id="card-add">
             <Button className={classes.paper} onClick={() => setAddOpen(true)}>
               <AddCircleOutlineTwoToneIcon className={classes.icon} />
             </Button>
           </div>
-          {applications.map((app: string[], i: number | any | string | undefined) => (
+          {applications.map((application: string[], i: number | any | string | undefined) => (
             <div className="card" key={`card-${i}`} id={`card-${i}`}>
               <Card
                 key={`card-${i}`}
                 className={classes.paper}
                 variant="outlined"
                 onClick={event => handleClick(event, app[0], i)}
               >
-
-                  <div className="databaseIconContainer">
-                    <div className="databaseIconHeader">
-                      {/** dark mode */}
-                      <img className="databaseIcon" src="../assets/mongo-icon-green-light.png" alt="MongoDB"></img>
-                    </div>
+                <div className="databaseIconContainer">
+                  <div className="databaseIconHeader">
+                    {/** dark mode */}
+                    <img className="databaseIcon" src="../assets/mongo-icon-green-light.png" alt="MongoDB"></img>
                   </div>
-
-                  <CardHeader
-                    avatar={
-                      <IconButton
-                        id="iconButton"
-                        ref={element => (delRef.current[i] = element)}
-                        className={classes.iconbutton}
-                        aria-label="Delete"
-                        onClick={event => confirmDelete(event, app[0], i)}
-                      >
-                        <HighlightOffIcon 
-                        className={classes.btnStyle} 
-                        id="deleteIcon" 
-                        ref={element => (delRef.current[i] = element)} 
-                        />
-                      </IconButton>
-                    }
-                  >
-                  </CardHeader>
+                </div>
+                <CardHeader
+                  avatar={
+                    <IconButton
+                      id="iconButton"
+                      ref={element => {
+                        delRef.current[i] = element
+                      }}
+                      className={classes.iconbutton}
+                      aria-label="Delete"
+                      onClick={event => confirmDelete(event, app[0], i)}
+                    >
+                      <HighlightOffIcon
+                        className={classes.btnStyle}
+                        id="deleteIcon"
+                        ref={element => {
+                          delRef.current[i] = element;
+                        }}
+                      />
+                    </IconButton>
+                  }
+                />
                 <CardContent>
                   <p id="databaseName">Database Name:</p>
                   <Typography className={classes.fontStyles}>{app[0]}</Typography>
                 </CardContent>
-                <hr className="cardLine"/>
+                <hr className="cardLine" />
 
                 <div className="cardFooter">
                   <UpdateIcon className="cardFooterIcon"/>
-                  <em><p id="cardFooterText">Just updated</p></em>
+                  <em>
+                    <p id="cardFooterText">Just updated</p>
+                  </em>
                 </div>
               </Card>
             </div>

diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx
@@ -16,7 +16,7 @@ const Settings: React.SFC = React.memo(() => {
   const { changeMode } = useContext(DashboardContext);
   const handleClick = (mode: string) => {
     changeMode(mode);
-  }
+  };
 
   return (
     <div className="settings">

diff --git a/app/components/Home.tsx → app/components/SignUp.tsx b/app/components/Home.tsx → app/components/SignUp.tsx
@@ -26,7 +26,7 @@ const adminUser = {
 };
 
 // removed props as it was not being used
-const Home = React.memo(() => {
+const SignUp = React.memo(() => {
   // const [open, setOpen] = useState<boolean>(false);
   const [loginInfo, setLoginInfo] = React.useState<PersonProps>({
     email: '',
@@ -59,7 +59,7 @@ const Home = React.memo(() => {
   return (
     <div className="home">
       <p className="welcomeMessage">
-        Welcome Back To Chronos! Your all-in-one application monitoring tool
+        Welcome back to Chronos! Your all-in-one application monitoring tool
       </p>
 
       <form className="form" onSubmit={submitLogin}>
@@ -98,4 +98,4 @@ const Home = React.memo(() => {
   );
 });
 
-export default Home;
+export default SignUp;
diff --git a/app/containers/Archived.tsx b/app/containers/Archived.tsx
@@ -81,7 +81,7 @@ const GraphsContainer = ({ match }: IMatch) => {
   useEffect(() => {
     if (live) {
       setIntervalID(
-        setInterval(function () {
+        setInterval(() => {
           fetchCommsData();
           fetchHealthData(service);
           fetchDockerData(service);
@@ -110,7 +110,8 @@ const GraphsContainer = ({ match }: IMatch) => {
         <button onClick={() => setLive(!live)}>
           {live ? (
             <div>
-              <span className="dot"></span>Live
+              <span className="dot" />
+              Live
             </div>
           ) : (
             <div>Gather Live Data</div>