Exit example implemented

Clicking example now populates cards that are not wrapped in
a link component. This allows the app to work the traditional
way and with our example button. useNavigate hook was used in
appplication card component to facilitate. Users can now also
click exit example button to reset all states and use the app
the traditional way.

Author: mdtagg

app/components/ApplicationsCard/ApplicationsCard.tsx

@@ -31,6 +31,7 @@ const ApplicationsCard = (props) => {
     selectedService: string,
     i: number
   ) => {
+    const services = ['auth','client','event-bus','items','inventory','orders']
     //delRef refers to the delete button
     if (delRef.current[i] && !delRef.current[i].contains(event.target)) {
       if (
@@ -50,6 +51,7 @@ const ApplicationsCard = (props) => {
         setChart('communications')
 
         connectToDB(user, i, app, dbURI, dbType)
+        navigate(`/applications/example/${services.join(' ')}`)
       }
       else {
         setAppIndex(i);

app/components/Occupied/Occupied.tsx

@@ -38,7 +38,7 @@ 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 +74,7 @@ const Occupied = React.memo(() => {
       <div 
         className="cardContainer"
       >
-
+        {!example &&
         <div 
           className="card" 
           id="card-add"
@@ -88,26 +88,22 @@ 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]
+            if(!example && description === "Example") 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.tsx

@@ -14,11 +14,11 @@ 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 } = 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.
@@ -31,18 +31,46 @@ const SidebarContainer = React.memo(() => {
   const handleExample = () => {
 
     setExample(true)
+
+    // const examplesData = {
+    //   microServicesFields: {
+    //     typeOfService: 'Microservices',
+    //     database: 'MongoDB',
+    //     URI: "mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.2.5",
+    //     name: 'Microservices',
+    //     description: 'Example'
+    //   },
+      
+    //   ,
+    //   dockerData: {
+    //     typeOfService: 'Docker',
+    //     database: 'MongoDB',
+    //     URI: "mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.2.5",
+    //     name: 'Docker',
+    //     description: 'Example'
+    //   }
+    // }
 
     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'
+      name: 'Microservices',
+      description: 'Example'
     }
 
     addApp(fields)
   }
 
+  const handleExitExample = () => {
+    setExample(false)
+    setApplications([])
+    setAppIndex(0);
+    setApp('');
+    setServicesData([]);
+    setChart('communications')
+  }
+
   return (
     <div className="sidebar-container" id="mySidebar">
       <div className="sidebar">
@@ -102,13 +130,25 @@ 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

@@ -64,7 +64,7 @@ const DashboardContextProvider = React.memo((props: any) => {
       JSON.stringify([name, database, URI, description, typeOfService])
     );
     setApplications(result);
-    console.log({result})
+    // console.log({result})
     // console.log('the current application that was added is : ', result);
   }, []);
 

examples/docker/auth/src/app.ts

@@ -19,7 +19,7 @@ chronos.docker();
 app.use(
   cors({
     credentials: true,
-    origin: 'http://localhost:5000',
+    origin: 'http://localhost:5001',
   })
 );
 app.use(express.json());

examples/docker/inventory/src/app.ts

@@ -19,7 +19,7 @@ chronos.docker();
 app.use(
   cors({
     credentials: true,
-    origin: 'http://localhost:5000',
+    origin: 'http://localhost:5001',
   })
 );
 app.use(express.json());

examples/docker/items/src/app.ts

@@ -19,7 +19,7 @@ chronos.docker();
 app.use(
   cors({
     credentials: true,
-    origin: 'http://localhost:5000',
+    origin: 'http://localhost:5001',
   })
 );
 app.use(express.json());

examples/docker/orders/src/app.ts

@@ -19,7 +19,7 @@ chronos.docker();
 app.use(
   cors({
     credentials: true,
-    origin: 'http://localhost:5000',
+    origin: 'http://localhost:5001',
   })
 );
 

examples/microservices/auth/src/app.ts

@@ -19,7 +19,7 @@ app.use(trackingMiddleware);
 app.use(
   cors({
     credentials: true,
-    origin: 'http://localhost:5000',
+    origin: 'http://localhost:5001',
   })
 );
 app.use(express.json());