Merge pull request #5 from oslabs-beta/mvp

Mvp

Author: sarhiri

app/components/Occupied/Occupied.tsx

@@ -56,7 +56,6 @@ const Occupied = React.memo(() => {
     <div 
       className="dashboardArea"
     >
-
       <header className="mainHeader">
         <section 
           className="header" 

app/containers/DashboardContainer.tsx

@@ -15,8 +15,6 @@ import '../stylesheets/Dashboard.scss';
 const DashboardContainer = React.memo(() => {
 
   const [visible, setVisible] = useState(false);
-  const [ example,setExample ] = useState(false);
-
   /**
    * When DashBoard Container first mounted, visible is default to false, so that the Splash component can be stay visible.
    * After 4 seconds, set the DashBoard Container visibility to true
@@ -43,10 +41,8 @@ const DashboardContainer = React.memo(() => {
                       <EventContextProvider>
                         <QueryContextProvider>
                           <AwsContextProvider>
-                            <SidebarContainer 
-                              setExample={setExample}
-                            />
-                            <MainContainer />
+                            <SidebarContainer />
+                            <MainContainer/>
                           </AwsContextProvider>
                         </QueryContextProvider>
                       </EventContextProvider>

app/containers/GraphsContainer.tsx

@@ -30,7 +30,7 @@ interface Params {
   service: string;
 }
 
-const GraphsContainer: React.FC = React.memo(props => {
+const GraphsContainer: React.FC = React.memo(() => {
   const navigate = useNavigate();
   const { app, service } = useParams<keyof Params>() as Params;
   const [live, setLive] = useState<boolean>(false);

app/containers/MainContainer.tsx

@@ -13,10 +13,11 @@ import AwsGraphsContainer from '../containers/AWSGraphsContainer';
 
 import '../stylesheets/MainContainer.scss';
 
-const MainContainer = React.memo(() => {
+const MainContainer = React.memo((props) => {
   const { mode, applications } = useContext(DashboardContext);
   const currentModeCSS = mode === 'light' ? lightAndDark.lightModeMain : lightAndDark.darkModeMain;
 
+
   return (
     <>
       <div className="main-container" style={currentModeCSS}>

app/containers/SidebarContainer.tsx

@@ -9,20 +9,16 @@ import SettingsIcon from '@material-ui/icons/Settings';
 import '../stylesheets/SidebarContainer.scss';
 import { ApplicationContext } from '../context/ApplicationContext';
 import { AwsContext } from '../context/AwsContext';
+import { DashboardContext } from '../context/DashboardContext';
 
-interface SidebarContainerProps {
-  setExample:React.Dispatch<React.SetStateAction<boolean>>
-}
-
-const SidebarContainer = React.memo((props:SidebarContainerProps) => {
-  const { setExample } = props;
+const SidebarContainer = React.memo(() => {
 
   // Extract invervalID from ApplicationContext. Initival value: intervalID = null
   const { intervalID } = useContext(ApplicationContext);
   // Extract isLoading and setLoading state from AwsContext. Initial value: isLoading = true
   const { isLoading, setLoadingState } = useContext(AwsContext);
   // clear interval and set loading state to true when leaving graph containers
-
+  const { addApp } = useContext(DashboardContext)
   /**
    * @function handleCLick - check if the 'intervalID' exists. If so, theres a timer running and the fuunction clears the timer using @function clearInterval - function.
    * Checks if variable 'isLoading' is false and if so the content is not loading and therefore, sets it to true using the setLoadingState function.
@@ -32,6 +28,17 @@ const SidebarContainer = React.memo((props:SidebarContainerProps) => {
     if (!isLoading) setLoadingState(true);
   };
 
+  const handleExample = () => {
+    const fields = {
+      typeOfService: 'Microservices',
+      database: 'MongoDB',
+      URI: "mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.2.5",
+      name: 'Example',
+      description: 'Microservices'
+    }
+    addApp(fields)
+  }
+
   return (
     <div className="sidebar-container" id="mySidebar">
       <div className="sidebar">
@@ -90,10 +97,10 @@ const SidebarContainer = React.memo((props:SidebarContainerProps) => {
             />
             &emsp;Contact
           </Link>
-          <Link className="sidebar-link" to="/applications/:Mike/:service" id="dash" onClick={handleClick}>
+          <Link className="sidebar-link" to="/" id="dash" onClick={handleClick}>
             <button 
               className="example-button"
-              onClick={() => setExample(true)}
+              onClick={() => handleExample()}
             >
                 EXAMPLE
             </button>

app/context/AwsContext.tsx

@@ -23,6 +23,7 @@ interface AwsAppInfo {
 }
 
 const AwsContextProvider: React.FC<Props> = React.memo(({ children }) => {
+
   const [awsData, setAwsData] = useState<AwsData>({ CPUUtilization: [], NetworkIn: [], NetworkOut: [], DiskReadBytes: [] })
   const [awsEcsData, setAwsEcsData] = useState<any>({});
   const [awsEksData, setAwsEksData] = useState<any>({});

app/context/DashboardContext.tsx

@@ -44,6 +44,7 @@ const DashboardContextProvider = React.memo((props: any) => {
   // Initial user will always be the guest
   const [user, setUser] = useState<string>('guest');
   const [applications, setApplications] = useState<string[][]>([]);
+  console.log({applications})
   const [mode, setMode] = useState<string>('light');
 
 
@@ -54,16 +55,12 @@ const DashboardContextProvider = React.memo((props: any) => {
 
   const addApp = useCallback((fields: IFields) => {
     const { typeOfService, database, URI, name, description } = fields;
-    const newApp = [name, database, URI, description, typeOfService];
-    console.log('what is the service that was passed into add app: ', typeOfService)
+    
     const result = ipcRenderer.sendSync(
       'addApp',
       JSON.stringify([name, database, URI, description, typeOfService])
     );
     setApplications(result);
-    // console.log('applications: ', applications);
-    // console.log('new app to add: ', newApp);
-    // setApplications([...applications, newApp]);
     console.log('the current application that was added is : ', result);
   }, []);
 
@@ -101,7 +98,7 @@ const DashboardContextProvider = React.memo((props: any) => {
         deleteApp,
         mode,
         setMode,
-        changeMode,
+        changeMode
       }}
     >
       {children}

app/modals/EnvModal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Typography } from '@material-ui/core';
+import { Typography } from '@material-ui/core';
 import '../stylesheets/EnvModal.scss';
 import { CloudQueue, Computer } from '@material-ui/icons';
 import { TModalSetter } from '../components/Occupied/types/Occupied';

app/stylesheets/SidebarContainer.scss

@@ -233,8 +233,9 @@
 .example-button {
   height:100px;
   width:100px;
-  color:yellow;
+  color:whitesmoke;
   cursor:pointer;
+  font-weight: 600;
 }
 
 .example-button:hover {