added comments to ApplicationContext for following data flow

Author: CODE.IO

app/App.tsx

@@ -5,6 +5,7 @@ import './stylesheets/scrollBar.scss';
 
 
 // this is the fitness gram pacer test
+// React memo helps with rendering optimization. The components within React memo will only be rerendered if prompt has changed
 const App: React.FC = React.memo(() => {
   return (
     <div>

app/components/Splash.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import '../stylesheets/Splash.scss';
 
+//Chronos logo when first starting the electron app. Has the picture for 4 seconds. 
 const Splash: React.FC = React.memo(props => {
   const [visible, setVisible] = useState(true);
 

app/containers/DashboardContainer.tsx

@@ -13,12 +13,22 @@ import AwsContextProvider from '../context/AwsContext';
 import '../stylesheets/Dashboard.scss';
 
 const DashboardContainer = React.memo(() => {
+
   const [visible, setVisible] = 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
+   */
   useEffect(() => {
     setTimeout(() => setVisible(true), 4000);
   }, []);
 
+  /**
+   * 1. Provide access to use ReactRouter
+   * 2. Provide access to serveral Context Providers (a.k.a Data Bank), including Application, Dashboard, Comms, Docker, Health, Event, Query, Aws
+   * 3. Child Component: SidebarContainer and MainContainer
+   */
   return (
     <>
       {visible && (

app/containers/SidebarContainer.tsx

@@ -11,7 +11,8 @@ import { ApplicationContext } from '../context/ApplicationContext';
 import { AwsContext } from '../context/AwsContext';
 
 const SidebarContainer = React.memo(props => {
-  const { intervalID } = useContext(ApplicationContext);
+  
+  const { intervalID } = useContext  (ApplicationContext);
   const { isLoading, setLoadingState } = useContext(AwsContext);
 
   // clear interval and set loading state to true when leaving graph containers

app/context/ApplicationContext.tsx

@@ -24,8 +24,13 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
   const [savedMetrics, setSavedMetrics] = useState({});
   const [appIndex, setAppIndex] = useState<number>(0);
   const [intervalID, setIntervalID] = useState<NodeJS.Timeout | null>(null);
-
-  function tryParseJSON(jsonString: any) {
+  
+  /**
+ * @function tryParseJson - a function that will parse the JSON data into an object. If there is any error during parsing (a.k.a there is a circular inside the JSON data), console log the error
+ * @param jsonString - JSON data that is received from backend
+ * @return an object with all information from backend
+ */
+  function tryParseJSON(jsonString: string) {
     try {
       const o = JSON.parse(jsonString);
 
@@ -38,6 +43,17 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
     return false;
   }
 
+  /**
+   * @function fetchServicesNames - a function that will take an application name and update the state of `serviceData` based on backend response
+   * 1. Take in an application name
+   * 
+   * 2. Send a `servicesRequest` to backend
+   * 
+   * 3. Upon `servicesResponse`, parse the received JSON data and assign it to `servicesData`
+   * 
+   * 4. Remove the listener for `servicesResponse`
+   * @param application - application name
+   */  
   const fetchServicesNames = useCallback((application: string) => {
     console.log('app when fetch services name', application);
     // setApp(application);
@@ -46,13 +62,20 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
 
     ipcRenderer.on('servicesResponse', (event: Electron.Event, data: any) => {
       let result: any;
+      // Parse JSON data into object
       if (tryParseJSON(data)) result = JSON.parse(data);
       console.log('result from ipcrenderer services response is: ', result);
       setServicesData(result);
       ipcRenderer.removeAllListeners('servicesResponse');
     });
   }, []);
 
+  /**
+   * @function connectToDB - a function that ensure database is connected with passed-in `username` and `index`. After that, invoke `fetchServicesName`, passing in `application`
+   * @param username - 
+   * @param index -
+   * @param application - application name
+   */
   const connectToDB = useCallback((username: string, index: number, application: string) => {
     ipcRenderer.removeAllListeners('databaseConnected');
     ipcRenderer.send('connect', username, index);
@@ -62,6 +85,9 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
     });
   }, []);
 
+  /**
+   * @function getSavedMetrics - a function that will wait for backend `savedMetricsResponse` to update metrics using `setSavedMetrics`
+   */
   const getSavedMetrics = useCallback(() => {
     ipcRenderer.send('savedMetricsRequest');
     ipcRenderer.on('savedMetricsResponse', (event: Electron.Event, data: any) => {