Merge pull request #20 from oslabs-beta/feature/example

Feature/example

Author: stephenhyang

app/App.tsx

@@ -7,7 +7,6 @@ import './index.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(() => {
-  console.log('test')
   return (
     <div>
       <Splash />

app/components/ApplicationsCard/ApplicationsCard.tsx

@@ -15,56 +15,53 @@ const ApplicationsCard = (props) => {
   const { application, i, setModal, classes } = props
   const { deleteApp,user,applications } = useContext(DashboardContext)
   const { setAppIndex, setApp, setServicesData, app,example,connectToDB,setChart } = useContext(ApplicationContext)
-  const [ cardName,dbType,dbURI,description,serviceType ] = applications[i]
+  const [ cardName,dbType,dbURI,description,serviceType ] = application
 
   //dynamic refs
-  const delRef = useRef<any>([]);
+  // const delRef = useRef<any>([]);
 
   const navigate = useNavigate();
 
   // 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,
     selectedService: string,
     i: number
   ) => {
-    //delRef refers to the delete button
-    if (delRef.current[i] && !delRef.current[i].contains(event.target)) {
+    const services = ['auth','client','event-bus','items','inventory','orders']
+    // if (delRef.current[i] && !delRef.current[i].contains(event.target)) {
+      setAppIndex(i);
+      setApp(selectedApp);
       if (
         selectedService === 'AWS' ||
         selectedService === 'AWS/EC2' ||
         selectedService === 'AWS/ECS' ||
         selectedService === 'AWS/EKS'
       ) {
-        setAppIndex(i);
-        setApp(selectedApp);
         navigate(`/aws/:${app}`, { state: { typeOfService: selectedService } });
       } 
       else if(example) {
-        setAppIndex(i);
-        setApp(selectedApp);
         setServicesData([]);
         setChart('communications')
 
         connectToDB(user, i, app, dbURI, dbType)
+        navigate(`/applications/example/${services.join(' ')}`)
       }
       else {
-        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'})
       }
-    }
+    // }
   };
 
   // Asks user to confirm deletion
-  const confirmDelete = (event: ClickEvent, application: string, i: number) => {
+  const confirmDelete = (event: ClickEvent, i: number) => {
+    event.stopPropagation()
     const message = `The application '${app}' will be permanently deleted. Continue?`;
-    if (confirm(message)) deleteApp(i);
+    if (confirm(message)) deleteApp(i,"");
   };
 
   return (
@@ -73,41 +70,29 @@ const ApplicationsCard = (props) => {
         key={`card-${i}`}
         className={classes.paper}
         variant="outlined"
-        onClick={event => handleClick(event, application[0], application[3], i)}
+        onClick={() => handleClick(application[0], application[3], i)}
       >
         <div className="databaseIconContainer">
           <div className="databaseIconHeader">
-            {/* {application[1] === 'SQL' ? (
-              <img className="databaseIcon" alt="SQL" />
-            ) : (
-              <img className="databaseIcon" alt="MongoDB" />
-            )} */}
           </div>
         </div>
 
         <CardHeader
           avatar={
             <IconButton
               id="iconButton"
-              ref={element => {
-                delRef.current[i] = element;
-              }}
               className={classes.iconbutton}
               aria-label="Delete"
-              onClick={event => confirmDelete(event, application[0], i)}
+              onClick={event => confirmDelete(event, i)}
             >
               <HighlightOffIcon
                 className={classes.btnStyle}
                 id="deleteIcon"
-                ref={element => {
-                  delRef.current[i] = element;
-                }}
               />
             </IconButton>
           }
         />
         <CardContent>
-          {/* <p id="databaseName">Name:</p> */}
           <Typography noWrap id="databaseName" className={classes.fontStyles}>
             {application[0]}
           </Typography>

app/components/Occupied/Occupied.tsx

@@ -34,11 +34,10 @@ import DashboardIcons from '../DashboardIcons/DashboardIcons';
 import ApplicationsCard from '../ApplicationsCard/ApplicationsCard';
 
 import { useStylesLight, useStylesDark } from './helpers/muiHelper'
-import { Link } from 'react-router-dom';
 
 //v10: Memoized function, without any props. Should theoretically be called only once.
 const Occupied = React.memo(() => {
-  const { setServicesData, app,example } = useContext(ApplicationContext);
+  const { setServicesData, app, example } = useContext(ApplicationContext);
   const { user, applications, getApplications, mode } = useContext(DashboardContext);
   const [ modal,setModal ] = useState({isOpen:false,type:''})
   const { appIndex } = useContext(ApplicationContext);
@@ -74,7 +73,7 @@ const Occupied = React.memo(() => {
       <div 
         className="cardContainer"
       >
-
+        {!example &&
         <div 
           className="card" 
           id="card-add"
@@ -88,26 +87,24 @@ const Occupied = React.memo(() => {
             />
           </Button>
         </div>
+        }
 
         {applications
-          .filter((db: any) => db[0].toLowerCase().includes(searchTerm.toLowerCase()))
           .map((application: string[], i: any) => {
-            const services = ['auth','client','event-bus','items','inventory','orders']
-            console.log({app,services})
+            const description = application[3]
+            const cardName = application[0]
+            const isFiltered = cardName.toLowerCase().includes(searchTerm.toLowerCase())
+
+            if((!example && description === "Example") || !isFiltered) return <></>
             return (
-              <Link 
-                to={services.length > 0 ? `/applications/example/${services.join(' ')}` : '#'}
-               className=''>
-                <ApplicationsCard
-                  key={crypto.randomUUID()}
-                  application={application}
-                  i={i}
-                  setModal={setModal}
-                  classes={classes}
-                />
-            </Link>
-            )
-          })}
+              <ApplicationsCard
+                key={crypto.randomUUID()}
+                application={application}
+                i={i}
+                setModal={setModal}
+                classes={classes}
+              />
+            )})}
 
         <Modal 
           open={modal.isOpen} 

app/containers/SidebarContainer/SidebarContainer.tsx

@@ -13,11 +13,12 @@ import { DashboardContext } from '../../context/DashboardContext';
 
 const SidebarContainer = React.memo(() => {
   // Extract invervalID from ApplicationContext. Initival value: intervalID = null
-  const { intervalID, setExample } = useContext(ApplicationContext);
+  const { intervalID,example,setExample,setAppIndex,setApp,setServicesData,setChart } = 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);
+  const { addApp,setApplications,deleteApp } = 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.
@@ -28,17 +29,53 @@ const SidebarContainer = React.memo(() => {
   };
 
   const handleExample = () => {
-    setExample(true);
 
-    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);
-  };
+    setExample(true)
+
+    const examplesData = {
+      microServicesMongoFields: {
+        typeOfService: 'Microservices',
+        database: 'MongoDB',
+        URI: "mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.2.5",
+        name: 'Microservices-Mongo',
+        description: 'Mongo Microservices Example'
+      },
+      microServicesSQLFields: {
+        typeOfService: 'Microservices',
+        database: 'SQL',
+        URI: "mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.2.5",
+        name: 'Microservices-SQL',
+        description: 'SQL Microservices Example'
+      }
+      ,
+      dockerMongoData: {
+        typeOfService: 'Docker',
+        database: 'MongoDB',
+        URI: "mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.2.5",
+        name: 'Docker-Mongo',
+        description: 'Docker Example'
+      },
+      dockerSQLData: {
+        typeOfService: 'Docker',
+        database: 'SQL',
+        URI: "mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.2.5",
+        name: 'Docker-SQL',
+        description: 'Docker Example'
+      }
+    }
+
+    addApp(examplesData)
+  }
+
+  const handleExitExample = () => {
+    setExample(false)
+    // setApplications([])
+    setAppIndex(0);
+    setApp('');
+    setServicesData([]);
+    setChart('communications')
+    deleteApp(0,'all')
+  }
 
   return (
     <div className="sidebar-container" id="mySidebar">
@@ -99,9 +136,23 @@ const SidebarContainer = React.memo(() => {
             &emsp;Contact
           </Link>
           <Link className="sidebar-link" to="/" id="dash" onClick={handleClick}>
-            <button className="example-button" onClick={() => handleExample()}>
-              EXAMPLE
-            </button>
+            {!example ?
+            
+              <button 
+                className="example-button"
+                onClick={() => handleExample()}
+              >
+                  EXAMPLE
+              </button>
+              :
+              <button
+                className="example-button"
+                onClick={() => handleExitExample()}
+              >
+                EXIT EXAMPLE
+              </button>
+            
+            }       
           </Link>
         </div>
       </div>

app/context/ApplicationContext.tsx

@@ -41,7 +41,8 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
   // v10: Invoked by connectToDB, passing in app (card title)
   const fetchServicesNames = useCallback((application: string) => {
     // console.log('Hi, inside ApplicationConext - fetchServicesNames callback. Sending servicesRequest to ipcMain.');
-    // console.log('app when fetch services name: ', application);
+    console.log('app when fetch services name: ', application);
+    console.log(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

app/context/DashboardContext.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 /* eslint-disable no-throw-literal */
 import React, { useState, createContext, useCallback } from 'react';
+import { ApplicationContext } from './ApplicationContext';
 const { ipcRenderer } = window.require('electron');
 
 interface IFields {
@@ -27,6 +28,7 @@ interface AwsFields {
 
 export const DashboardContext = createContext<any>(null);
 
+
 /**
  * MANAGES THE FOLLOWING DATA AND ACTIONS:
  * @property  {Array} applications List of all applications, their description, database type and creation date
@@ -42,26 +44,29 @@ const DashboardContextProvider = React.memo((props: any) => {
   const children = props.children;
 
   // Initial user will always be the guest
+
   const [user, setUser] = useState<string>('guest');
   const [applications, setApplications] = useState<string[][]>([]);
-  // console.log({applications})
+  console.log({applications})
   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 addApp = useCallback((fields: any) => {
+    
+    for(let field of Object.keys(fields)) {
+      const { typeOfService, database, URI, name, description } = fields[field];
+      const result = ipcRenderer.sendSync(
+        'addApp',
+        JSON.stringify([name, database, URI, description, typeOfService])
+      );
+      setApplications(result);
+    }
+    
 
-    const result = ipcRenderer.sendSync(
-      'addApp',
-      JSON.stringify([name, database, URI, description, typeOfService])
-    );
-    setApplications(result);
-    // console.log('the current application that was added is : ', result);
   }, []);
 
   const addAwsApp = useCallback((awsFields: AwsFields) => {
@@ -75,8 +80,8 @@ const DashboardContextProvider = React.memo((props: any) => {
     // console.log('the current application that was added is : ', result)
   }, []);
 
-  const deleteApp = useCallback((index: number) => {
-    const result = ipcRenderer.sendSync('deleteApp', index);
+  const deleteApp = useCallback((index: number,action:string) => {
+    const result = ipcRenderer.sendSync('deleteApp', index,action);
     setApplications(result);
   }, []);
 

app/modals/AddModal/AddModal.tsx

@@ -16,7 +16,7 @@ interface IFields {
 }
 
 interface IDashboard {
-  addApp: (fields: IFields) => void;
+  addApp: (fields:any) => void;
   setApplications: any;
 }
 
@@ -26,7 +26,7 @@ type FormElement = React.FormEvent<HTMLFormElement>;
 const AddModal: React.FC<TModalSetter> = React.memo(({ setModal }) => {
   const { addApp }: IDashboard = useContext(DashboardContext);
 
-  const [fields, setFields] = useState<IFields>({
+  const [fields, setFields] = useState<any>({
     typeOfService: 'Docker',
     database: 'SQL',
     URI: '',
@@ -39,7 +39,7 @@ const AddModal: React.FC<TModalSetter> = React.memo(({ setModal }) => {
     event.preventDefault();
     // const newApp = [name, database, URI, description, typeOfService];
     // setApplications(prev => [...prev, ...newApp])
-    addApp(fields);
+    addApp({fields});
     setModal({isOpen:false,type:''})
   };