Created new files(FirstLaunch, LandingPageContainer). Attempting to create a landing page for first-time users to choose to either start as an enterprise or start as an individual. Issues with dashboard.ts: ipcRenderer.sendSync.

Co-authored-by: Justin Kirk <[email protected]>
Co-authored-by: Alexander Holden <[email protected]>
Co-authored-by: William Owen <[email protected]>

Author: 4 people

.eslintrc.json

@@ -1,4 +1,9 @@
 {
+  "globals": {
+    "NodeJS": true,
+    "JSX": true,
+    "Electron": true
+  },
   "plugins": ["react", "prettier"],
   "parser": "babel-eslint",
   "parserOptions": {

app/components/FirstLaunch.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;

app/components/Home.tsx app/components/SignUp.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>

app/containers/Archived.tsx

@@ -32,7 +32,7 @@ export interface GraphsContainerProps {
   };
 }
 
-const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(function GraphsContainer (props) {
+const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(props => {
   const { app, service } = useParams<any>();
   const [live, setLive] = useState<boolean>(false);
   const [intervalID, setIntervalID] = useState<NodeJS.Timeout | null>(null);
@@ -44,7 +44,7 @@ const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(function Grap
   useEffect(() => {
     if (live) {
       setIntervalID(
-        setInterval(function () {
+        setInterval(() => {
           fetchCommsData(app, live);
           fetchHealthData(service);
           fetchDockerData(service);
@@ -78,15 +78,15 @@ const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(function Grap
             <LogsTable />
           </div>
         ) : (
-            <div className="graphs">
-              <SpeedChart />
-              <TemperatureChart />
-              <LatencyChart />
-              <MemoryChart />
-              <ProcessesChart />
-              <DockerChart />
-            </div>
-          )}
+          <div className="graphs">
+            <SpeedChart />
+            <TemperatureChart />
+            <LatencyChart />
+            <MemoryChart />
+            <ProcessesChart />
+            <DockerChart />
+          </div>
+        )}
       </div>
     </>
   );

app/containers/GraphsContainer.tsx

@@ -0,0 +1,19 @@
+import React, { useContext, useEffect } from 'react';
+import { Route, Switch } from 'react-router-dom';
+
+import SignUp from '../components/SignUp';
+import { DashboardContext } from '../context/DashboardContext';
+
+const LandingPageContainer = React.memo(() => {
+  const { landingPage, getLandingPage } = useContext(DashboardContext);
+
+  // useEffect(() => {
+  //   console.log('LP', landingPage);
+  //   getLandingPage();
+  // }, []);
+  // console.log('LP2', landingPage);
+
+  return <SignUp />;
+});
+
+export default LandingPageContainer;

app/containers/LandingPageContainer.tsx

@@ -1,8 +1,8 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
 // import GraphsContainer from './Archived';
-import Home from '../components/Home';
+import LandingPageContainer from './LandingPageContainer';
 import About from '../components/About';
 import Contact from '../components/Contact';
 import Settings from '../components/Settings';
@@ -21,11 +21,12 @@ const MainContainer = React.memo(() => {
   const { mode } = useContext(DashboardContext);
   const currentModeCSS =
     mode === 'light mode' ? lightAndDark.lightModeMain : lightAndDark.darkModeMain;
+
   return (
     <div className="main-container" style={currentModeCSS}>
       <div className="main-routes">
         <Switch>
-          <Route exact path="/" component={Home} />
+          <Route exact path="/" component={LandingPageContainer} />
           <Route exact path="/about" component={About} />
           <Route exact path="/contact" component={Contact} />
           <Route exact path="/settings" component={Settings} />

app/containers/MainContainer.tsx

@@ -26,12 +26,27 @@ export const DashboardContext = createContext<any>(null);
 const DashboardContextProvider = React.memo(({ children }: Props) => {
   const [applications, setApplications] = useState<string[]>([]);
   const [mode, setMode] = useState<string>('');
-  /**
+  const [landingPage, setLandingPage] = useState<string>('before');
+
+  /*
+   *  Sends a request for the existing landing page belonging to the
+   *  organization and sets landing page to it.
+   */
+  const getLandingPage = useCallback(() => {
+    console.log('36');
+    const result = ipcRenderer.sendSync('getLP');
+    console.log('38');
+    console.log(result);
+    setLandingPage(result[0]);
+  }, []);
+
+  /*
    * Sends a request for all existing applications belonging to a user
    * and sets the applications state to the list of app names
    * Also sends a request for the previously saved theme/mode
    * and sets the mode state to the retrieved settings
    */
+
   const getApplications = useCallback(() => {
     const result = ipcRenderer.sendSync('getApps');
     setApplications(result[0]);
@@ -74,7 +89,16 @@ const DashboardContextProvider = React.memo(({ children }: Props) => {
   }, []);
   return (
     <DashboardContext.Provider
-      value={{ applications, getApplications, addApp, deleteApp, mode, changeMode }}
+      value={{
+        landingPage,
+        getLandingPage,
+        applications,
+        getApplications,
+        addApp,
+        deleteApp,
+        mode,
+        changeMode,
+      }}
     >
       {children}
     </DashboardContext.Provider>

app/context/DashboardContext.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './stylesheets/index.scss';
-import App from './App';
 import { createMuiTheme, ThemeProvider } from '@material-ui/core';
+import App from './App';
 
 const theme = createMuiTheme({
   typography: {

app/index.tsx

@@ -16,7 +16,7 @@ const connectMongoose = async (i: number, URI: string) => {
     );
     // console.log(`${__dirname}/mongo.ts/connectMongoose: connected!`);
     return db;
-  } catch(err) {
+  } catch (err) {
     console.log(`${__dirname}/mongo.ts/connectMongoose: ${err}`);
   }
 };

electron/databases/mongo.ts

@@ -9,9 +9,12 @@ import fs from 'fs';
  */
 
 // Loads existing settings JSON and update settings to include new services entered by the user on 'submit' request
+ipcMain.on('getLP', message => {
+  message.returnValue = ['after'];
+});
 
 ipcMain.on('addApp', (message: IpcMainEvent, application: any) => {
-  // Retrives file contents from settings.json
+  // Retrieves file contents from settings.json
   const state = JSON.parse(
     fs.readFileSync(path.resolve(__dirname, '../user/settings.json')).toString('utf8')
   );
@@ -41,7 +44,7 @@ ipcMain.on('addApp', (message: IpcMainEvent, application: any) => {
 // Load settings.json and returns updated state back to the render process on ipc 'dashboard' request
 
 ipcMain.on('getApps', message => {
-  // Retrives file contents from settings.json for current Apps
+  // Retrieves file contents from settings.json for current Apps
   const state = JSON.parse(
     fs.readFileSync(path.resolve(__dirname, '../user/settings.json')).toString('utf8')
   );

electron/routes/dashboard.ts

@@ -21,7 +21,6 @@ let currentDatabaseType: string;
  */
 ipcMain.on('connect', async (message: Electron.IpcMainEvent, index: number) => {
   try {
-    
     // Extract databaseType and URI from settings.json at particular index
     // get index from application context
     const fileContents = fs.readFileSync(path.resolve(__dirname, '../user/settings.json'), 'utf8');
@@ -53,8 +52,6 @@ ipcMain.on('connect', async (message: Electron.IpcMainEvent, index: number) => {
  */
 ipcMain.on('servicesRequest', async (message: Electron.IpcMainEvent) => {
   try {
-   
-    
     let result: any;
 
     // Mongo Database
@@ -84,8 +81,6 @@ ipcMain.on('servicesRequest', async (message: Electron.IpcMainEvent) => {
  */
 ipcMain.on('commsRequest', async (message: Electron.IpcMainEvent) => {
   try {
-  
-    
     let result: any;
 
     // Mongo Database
@@ -117,7 +112,6 @@ ipcMain.on('commsRequest', async (message: Electron.IpcMainEvent) => {
  */
 ipcMain.on('healthRequest', async (message: Electron.IpcMainEvent, service: string) => {
   try {
-    
     let result: any;
 
     // Mongo Database
@@ -159,14 +153,12 @@ ipcMain.on('healthRequest', async (message: Electron.IpcMainEvent, service: stri
  */
 ipcMain.on('dockerRequest', async (message, service) => {
   try {
-    
     let result: any;
     // Mongo Database
     if (currentDatabaseType === 'MongoDB') {
       // Get document count
       let num = await DockerModelFunc(service).countDocuments();
-
-      //Get last 50 documents. If less than 50 documents, get all
+      // Get last 50 documents. If less than 50 documents, get all
       num = Math.max(num, 50);
       result = await DockerModelFunc(service).find().skip(num - 50);
     }

electron/routes/data.ts

@@ -16,6 +16,6 @@
       "Jul 3, 2020 7:12AM"
     ]
   ],
-  "mode":"light mode",
+  "mode":"dark mode",
   "splash": true
 }