Merge pull request #13 from oslabs-beta/elena/updatingToDB

Elena/updating to db

Author: elenaatencio

app/components/Login.tsx

@@ -14,7 +14,8 @@ const Login = React.memo(() => {
    * Function that will be called when the form button is clicked
    * It handles submitting the login information
    */
-
+  // v10: ipcRenderer returning a string with the response of user mode (light or dark).
+  // There is currently no redirection after failed login.
   const handleSubmit = (e: any) => {
     e.preventDefault();
     const inputFields: HTMLInputElement[] = e.currentTarget.querySelectorAll('input');
@@ -24,7 +25,8 @@ const Login = React.memo(() => {
     // inputFields.forEach(input => (input.value = ''));
     const response: boolean | string = ipcRenderer.sendSync('login', { username, password });
     if (typeof (response) === 'string') {
-      console.log('response', response)
+      console.log('Hi, login successful and response string (mode) is:', response);
+      console.log('Redirected to Occupied from Login.');
       setUser(username);
       setMode(response);
       navigate('/');

app/components/Occupied.tsx

@@ -55,9 +55,18 @@ interface StyleProps {
 }
 type ClickEvent = React.MouseEvent<HTMLElement>;
 
+// type OccupiedProps = {
+//   switch: any;
+//   setSwitch: any;
+// };
+
+//v10: Memoized function, witouth any props. Should theoretically be called only once.
 const Occupied = React.memo(() => {
+  console.log('Hi, inside Occupied. Memoize function invoked');
+
   const { awsData, fetchAwsData, fetchAwsAppInfo, setLoadingState } = useContext(AwsContext);
   const { setServicesData, app, setApp } = useContext(ApplicationContext);
+  // const { user, getApplications, deleteApp, mode } = useContext(DashboardContext);
   const { user, applications, getApplications, deleteApp, mode } = useContext(DashboardContext);
   const { commsData } = useContext(CommsContext);
   const [serviceModalOpen, setServiceModalOpen] = useState<boolean>(false);
@@ -75,12 +84,16 @@ const Occupied = React.memo(() => {
   // const [showAwsContainer, setShowAwsContainer] = useState(false);
   const navigate = useNavigate();
 
+
   // Grab services and applications whenever the user changes
+  // v10: Runs once when Occupied is memoized, and subsequently when user is updated.
   useEffect(() => {
+    console.log('Hi, inside Occupied.ts useEffect function.');
     setServicesData([]);
     getApplications();
   }, [user]);
 
+
   // Dynamic refs
   const delRef = useRef<any>([]);
 
@@ -91,6 +104,8 @@ const Occupied = React.memo(() => {
   };
 
   // Handle clicks on Application cards
+  // v10 info: when card is clicked (not on the delete button) if the service is an AWS instance,
+  // you are redirected to AWSGraphsContainer passing in the state object containing typeOfService
   const handleClick = (
     event: ClickEvent,
     selectedApp: string,
@@ -106,9 +121,14 @@ const Occupied = React.memo(() => {
         selectedService === 'AWS/EKS'
       ) {
         setAppIndex(i);
+        // setApp is never invoked, function is not established?
         setApp(selectedApp);
         navigate(`/aws/:${app}`, { state: { typeOfService: selectedService } });
       } else {
+        console.log('In handleClick Method (local) in Occupied.tsx');
+        console.log('The following are the new values for appIndex, app, servicesData, and serviceModalOpen:');
+        console.log(i, ' ', selectedApp, ' ', 'N/A ', serviceModalOpen );
+      
         setAppIndex(i);
         setApp(selectedApp);
         setServicesData([]);

app/containers/MainContainer.tsx

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

app/context/ApplicationContext.tsx

@@ -20,6 +20,7 @@ export const ApplicationContext = React.createContext<any>(null);
 const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props => {
   const children = props.children;
   const [servicesData, setServicesData] = useState([]);
+  // v10 note: there is not function for setApp so app is never updated.
   const [app, setApp] = useState<string>('');
   const [savedMetrics, setSavedMetrics] = useState({});
   const [appIndex, setAppIndex] = useState<number>(0);
@@ -54,26 +55,38 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
    * 4. Remove the listener for `servicesResponse`
    * @param application - application name
    */  
+  // v10: Invoked by connectToDB, passing in app (card title)
   const fetchServicesNames = useCallback((application: string) => {
-    console.log('app when fetch services name', application);
+    console.log('Hi, inside ApplicationConext - fetchServicesNames callback. Sending servicesRequest to ipcMain.');
+    console.log('app when fetch services name: ', application);
     // setApp(application);
 
     ipcRenderer.send('servicesRequest');
 
     ipcRenderer.on('servicesResponse', (event: Electron.Event, data: any) => {
       let result: any;
       // Parse JSON data into object
-      if (tryParseJSON(data)) result = JSON.parse(data);
+      // if (tryParseJSON(data)) result = JSON.parse(data);
+      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');
     });
   }, []);
 
-  const connectToDB = useCallback((username: string, index: number, application: string, URI: string) => {
+    /**
+   * @function connectToTB - invoked in Services Modal when Service Modal component is first rendered or when useEffect invoked.
+   *  creates an event emitter that connects to the user provided URI for the service (should be the database URI...)
+   * v10 notes: seems to only be set up for local instances, not when a cloud based service is clicked, causes an issue since a user provided 
+   * database should not exist...
+   * @params application - is the name of the card taht was clicked on
+   */
+  const connectToDB = useCallback((username: string, index: number, application: string, URI: string, databaseType: string) => {
+    console.log('Hi, inside ApplicationContext, connectToDB function was invoked.');
     ipcRenderer.removeAllListeners('databaseConnected');
-    ipcRenderer.send('connect', username, index, URI);
-
+    ipcRenderer.send('connect', username, index, URI, databaseType);
     ipcRenderer.on('databaseConnected', (event: Electron.Event, data: any) => {
       fetchServicesNames(application);
     });

app/context/AwsContext.tsx

@@ -69,13 +69,22 @@ const AwsContextProvider: React.FC<Props> = React.memo(({ children }) => {
 
   };
 
+  /**
+ * @event   fetchAWSAppInfo - invoked in AWSGraphsContainer
+ * @desc    
+ * @params  username: 
+ *          index: 
+ */
+  
   const fetchAwsAppInfo = (username: string, index: number) => {
+    console.log('Hi, AwsContext -> fetchAwsAppInfo was invoked.');
     ipcRenderer.removeAllListeners('awsAppInfoResponse');
-
+    console.log('fetchAAWSAppInfo was invoked for card index: ', index);
+    console.log('Sending request to ipcMain.on for channel awsAppInfoRequest...');
     ipcRenderer.send('awsAppInfoRequest', username, index);
     ipcRenderer.on('awsAppInfoResponse', (event: Electron.Event, res: any) => {
       const appInfo = JSON.parse(res);
-
+      console.log('received response: ', appInfo);
       setAwsAppInfo(appInfo);
     });
   };

app/context/DashboardContext.tsx

@@ -42,24 +42,29 @@ const DashboardContextProvider = React.memo((props: any) => {
   const children = props.children;
 
   // Initial user will always be the guest
-  const [user, setUser] = useState('guest');
-  const [applications, setApplications] = useState<string[]>([]);
+  const [user, setUser] = useState<string>('guest');
+  const [applications, setApplications] = useState<string[][]>([]);
   const [mode, setMode] = useState<string>('light');
 
+  
   const getApplications = useCallback(() => {
     const result = ipcRenderer.sendSync('getApps');
     setApplications(result);
   }, []);
 
   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('the current application that was added is : ', 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);
   }, []);
 
   const addAwsApp = useCallback((awsFields: AwsFields) => {

app/modals/AddModal.tsx

@@ -13,6 +13,7 @@ interface IFields {
 
 interface IDashboard {
   addApp: (fields: IFields) => void;
+  setApplications: any;
 }
 
 interface AddModalProps {
@@ -23,7 +24,7 @@ type InputElement = React.ChangeEvent<HTMLSelectElement | HTMLInputElement | HTM
 type FormElement = React.FormEvent<HTMLFormElement>;
 
 const AddModal: React.FC<AddModalProps> = React.memo(({ setOpen }) => {
-  const { addApp }: IDashboard = useContext(DashboardContext);
+  const { addApp, setApplications }: IDashboard = useContext(DashboardContext);
 
   const [fields, setFields] = useState<IFields>({
     typeOfService: 'Docker',
@@ -36,6 +37,8 @@ const AddModal: React.FC<AddModalProps> = React.memo(({ setOpen }) => {
   // Submit form data and save to database
   const handleSubmit = (event: FormElement) => {
     event.preventDefault();
+    // const newApp = [name, database, URI, description, typeOfService];
+    // setApplications(prev => [...prev, ...newApp])
     addApp(fields);
     setOpen(false); // Close modal on submit
   };

app/modals/ServicesModal.tsx

@@ -17,10 +17,16 @@ interface IService {
   microservice: string;
 }
 
+// v10: Seems to never have been updated for cloud-based info...
+// servicesModal is re-rendered depending on i and application passed in...
 const ServicesModal: React.FC<ServicesModalProps> = React.memo(({ i, app }) => {
-  const { user, applications } = useContext(DashboardContext)
-  console.log('hereerer', useContext(DashboardContext))
-  console.log('aappp', applications[i][2])
+  console.log('Hi, inside ServicesModal. Memoize function invoked in ServicesModal.');
+  console.log('ServicesModal current props (index, app): ', i, ' ', app);
+
+  const { user, applications } = useContext(DashboardContext);
+  console.log('user from Dashboard Context:', user);
+  console.log('applications from Dashboard Context: ', applications);
+  console.log('applications[i][2]: ', applications[i][2]);
   const { servicesData, connectToDB } = useContext(ApplicationContext);
   const [services, setServices] = useState<Array<string>>([]);
 
@@ -33,10 +39,19 @@ const ServicesModal: React.FC<ServicesModalProps> = React.memo(({ i, app }) => {
     }
   };
 
+  // v10: connectToDB function definition in Application Context.
+  // parameters for connectToDB call: user, i (index), app (card title), app URL (url on card)
+  // applications[i][2] refers to the user provided URI
+  // adding database type to make connection and fetchServiceNames more efficient
   useEffect(() => {
-    connectToDB(user, i, app, applications[i][2]);
+    console.log('Hi, inside useEffect in ServicesModal. Calling connectToDB function.');
+    console.log("Passing the following parameters for user, i, app, applications, ");
+    console.log(user, ' ', i, ' ', app, ' ', applications, applications[i][1]);
+    connectToDB(user, i, app, applications[i][2], applications[i][1]);
   }, [i]);
 
+
+
   return (
     <div className="servicesContainer">
       {!servicesData.length ? (

electron/databases/mongo.ts

@@ -1,15 +1,26 @@
 import mongoose from 'mongoose';
 // import { MongoError } from 'mongodb';
-
+const testURL = 'mongodb+srv://seconddbtest:[email protected]/?retryWrites=true&w=majority';
 // Mongoose connection wrapped in function that takes the index of the selected database as the parameter. This index is used to target the correct database for querying.
 const connectMongoose = async (i:number, URI: string) => {
   try {
-    await mongoose.connection.close();
+    // await mongoose.connection.close();
     const db = await mongoose.connect(URI);
 
     return db;
   } catch (err) {
     console.log(`${__dirname}/mongo.ts/connectMongoose: ${err}`);
   }
 };
+
+// const connectMongoose = async (i: number, URI: string) => {
+//   try {
+//     const db2 = mongoose.createConnection(testURL);
+//     console.log('connection to user provided db established..');
+//     return db2;
+//   } catch (error) {
+//     console.log('Error connecting to second db... ', error);
+//   }
+// }
+
 export default connectMongoose;

electron/models/ServicesModel.ts

@@ -17,3 +17,4 @@ const ServicesSchema = new Schema({
 });
 
 export default mongoose.model<IService>('services', ServicesSchema);
+// export default ServicesSchema;