Merge pull request #7 from oslabs-beta/mergedev

Merge mergedev into dev

Author: troyprejusa

.gitignore

@@ -1,14 +1,13 @@
 # JS Project-Specific #
 #######################
 # node_modules
-dist
-build
+/dist
+/build
 release-builds
 coverage
 __tests__/**/__snapshots__
 .env
-users.json
-test_users.json
+databases.txt
 
 # Compiled source #
 ###################
@@ -48,3 +47,5 @@ test_users.json
 ehthumbs.db
 Thumbs.db
 node_modules
+
+out/

.vscode/launch.json

@@ -1,6 +1,15 @@
 {
     "version": "0.2.0",
     "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "File",
+            "skipFiles": [
+                "<node_internals>/**",
+            ],
+            "program": "${file}"
+        },
         {
             "type": "node",
             "request": "launch",

__tests__/test_settings.json

@@ -1 +1,14 @@
-{"setupRequired":false,"services":[["chronosDB","MongoDB","mongodb+srv://jj289:[email protected]/chronosDB?retryWrites=true&w=majority","","Dec 13, 2022 2:58 PM"],["test","MongoDB","mongodb+srv://troyprejusa:[email protected]/test?retryWrites=true&w=majority","","Dec 13, 2022 5:14 PM"]],"mode":"light mode","splash":true,"landingPage":"dashBoard"}
+{
+	"services": [
+		[
+			"chronosDB",
+			"MongoDB",
+			"mongodb+srv://troyprejusa:[email protected]/test?retryWrites=true&w=majority",
+			"",
+			"Dec 19, 2022 4:50 PM"
+		]
+	],
+	"mode": "light",
+	"splash": true,
+	"landingPage": "dashBoard"
+}

app/App.tsx

@@ -4,7 +4,13 @@ import DashboardContainer from './containers/DashboardContainer';
 import './stylesheets/scrollBar.scss';
 
 const App: React.FC = React.memo(() => {
-  return <DashboardContainer />;
+  return (
+    <>
+      <Splash />
+      <DashboardContainer />
+    </>
+
+  )
 });
 
 export default App;

app/charts/RouteChart.jsx

@@ -160,7 +160,7 @@ const RouteChart = React.memo(() => {
   //   },
   // };
 
-  if (communicationsData[0].endpoint !== '/') {
+  if (communicationsData.length > 0 && communicationsData[0].endpoint !== '/') {
     return (
       <div className="traceContainer">
         <span id="tracesTitle">Route Traces</span>

app/components/About.tsx

@@ -7,7 +7,7 @@ const About: React.FC = React.memo(() => {
   const { mode } = useContext(DashboardContext.DashboardContext);
 
   const currentMode =
-    mode === 'light mode' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
+    mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
 
   return (
     <div className="about">

app/components/AwaitingApproval.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 function AwaitingApproval() {
-  const history = useHistory();
-  const reroute = () => history.push('/');
+  const navigate = useNavigate();
+  const reroute = () => navigate('/');
   return (
     <div className="home">
       <p className="welcomeMessage" data-testid="awaitingApprovalMessage">

app/components/Contact.tsx

@@ -8,7 +8,7 @@ const Contact = React.memo(() => {
   const { mode } = useContext(DashboardContext);
 
   const currentMode =
-    mode === 'light mode' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
+    mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
 
   return (
     <div className="contact">

app/components/Copyright.tsx

@@ -5,7 +5,7 @@ import '../stylesheets/Applications.scss';
 
 export interface CopyrightProps {}
 
-const Copyright: React.SFC = React.memo(() => {
+const Copyright: React.FC = React.memo(() => {
   const useStyles = makeStyles(theme => ({
     copyright: {
       fontFamily: 'Roboto',

app/components/Header.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate} from 'react-router-dom';
 import { ApplicationContext } from '../context/ApplicationContext';
 import { DashboardContext } from '../context/DashboardContext';
 import '../stylesheets/Header.scss';
@@ -13,7 +13,7 @@ export interface HeaderProps {
 }
 
 const Header: React.FC<HeaderProps> = React.memo(({ app, service, setLive, live }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const { servicesData } = useContext(ApplicationContext);
   const { mode } = useContext(DashboardContext);
   const [selectModal, setSelectModal] = useState(false);
@@ -53,12 +53,12 @@ const Header: React.FC<HeaderProps> = React.memo(({ app, service, setLive, live
 
   const handleServices = () => {
     const joinedServices = selectedServices.join(' ');
-    history.replace(joinedServices);
+    navigate(joinedServices);
     setLive(false);
   };
 
   const currentModeCSS =
-    mode === 'light mode' ? lightAndDark.lightModeHeader : lightAndDark.darkModeHeader;
+    mode === 'light' ? lightAndDark.lightModeHeader : lightAndDark.darkModeHeader;
 
   return (
     <div className="microservice-header" style={currentModeCSS} data-testid="Header">