Merge pull request #4 from oslabs-beta/stateUpdate

State update

Author: stephenhyang

app/components/ApplicationsCard/ApplicationsCard.tsx

@@ -45,6 +45,7 @@ const ApplicationsCard = (props) => {
         setAppIndex(i);
         setApp(selectedApp);
         setServicesData([]);
+        //When we open the service modal a connection is made to the db in a useEffect inside of the service modal component
         setModal({isOpen:true,type:'serviceModal'})
       }
     }

app/containers/MainContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext,useState } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import About from '../components/About';
 import Contact from '../components/Contact';

app/context/ApplicationContext.tsx

@@ -41,12 +41,12 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
     // console.log('app when fetch services name: ', application);
     ipcRenderer.send('servicesRequest');
     ipcRenderer.on('servicesResponse', (event: Electron.Event, data: any) => {
+      //data here refers to the data coming the services document of the database
       let result: any;
       result = JSON.parse(data);
       console.log('result from ipcrenderer services response is: ', result);
       // console.log('Calling setServicesData passing in above result. Current servicesData is the following: ', servicesData);
       setServicesData(result);
-      // console.log('Leaving fetchedServicesNames function.');
       ipcRenderer.removeAllListeners('servicesResponse');
     });
 
@@ -61,6 +61,7 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
    */
   const connectToDB = useCallback((username: string, index: number, application: string, URI: string, databaseType: string) => {
     console.log('Hi, inside ApplicationContext, connectToDB function was invoked.');
+    /* ipcRenderer is referring to electron. The connect string is processed in data.ts inside of the electron folder at the root of the project */
     ipcRenderer.removeAllListeners('databaseConnected');
     ipcRenderer.send('connect', username, index, URI, databaseType);
     ipcRenderer.on('databaseConnected', (event: Electron.Event, data: any) => {

app/modals/ServicesModal.tsx

@@ -26,6 +26,7 @@ const ServicesModal: React.FC<ServicesModalProps> = React.memo(({ i, app }) => {
   const { user, applications } = useContext(DashboardContext);
   const { servicesData, connectToDB } = useContext(ApplicationContext);
   const [services, setServices] = useState<Array<string>>([]);
+  const [ cardName,dbType,dbURI,description,serviceType ] = applications[i]
 
   const toggleService = service => {
     if (services.includes(service)) {
@@ -42,7 +43,7 @@ const ServicesModal: React.FC<ServicesModalProps> = React.memo(({ i, app }) => {
   // adding database type to make connection and fetchServiceNames more efficient
   useEffect(() => {
     console.log('Hi, inside useEffect in ServicesModal. Calling connectToDB function.');
-    connectToDB(user, i, app, applications[i][2], applications[i][1]);
+    connectToDB(user, i, app, dbURI, dbType);
   }, [i]);