Merge pull request #11 from tngraves/logOut

Log out and New Modal

Author: J-DannyMartinez

app/components/Occupied.tsx

@@ -27,6 +27,7 @@ import PersonIcon from '@material-ui/icons/Person';
 import UpdateIcon from '@material-ui/icons/Update';
 // MODALS
 import AddModal from '../modals/AddModal';
+import AddsModal from '../modals/AddsModal';
 import ServicesModal from '../modals/ServicesModal';
 
 // STYLESHEETS
@@ -53,6 +54,7 @@ const Occupied = React.memo(() => {
   const { commsData, setCommsData, fetchCommsData } = useContext(CommsContext);
   const [open, setOpen] = useState<boolean>(false);
   const [addOpen, setAddOpen] = useState<boolean>(false);
+  const [addsOpen, setAddsOpen] = useState<boolean>(false);
   const [index, setIndex] = useState<number>(0);
   const [app, setApp] = useState<string>('');
   const [searchTerm, setSearchTerm] = useState<string>('');
@@ -236,12 +238,9 @@ const Occupied = React.memo(() => {
                     < NotificationsIcon className="navIcon" id="notificationsIcon" />
                     <Badge badgeContent={notification ? notification.length : 0} color="secondary"/>
               </div>
-            
-
-            <div className="personIconArea">
-              <span className="personTooltip">You are not logged in</span>
-              <PersonIcon className="navIcon" id="personIcon" />
-            </div>
+              <Button className= "personTooltip" onClick={() => setAddsOpen(true)}>Logged In
+                <PersonIcon className="navIcon" id="personIcon" />
+              </Button>
           </section>
         </header>
 
@@ -305,6 +304,11 @@ const Occupied = React.memo(() => {
           <Modal open={addOpen} onClose={() => setAddOpen(false)}>
             <AddModal setOpen={setAddOpen} />
           </Modal>
+
+          <Modal open={addsOpen} onClose={() => setAddsOpen(false)}>
+            <AddsModal setOpen={setAddsOpen} />
+          </Modal>
+
           <Modal open={open} onClose={() => setOpen(false)}>
             <ServicesModal key={`key-${index}`} i={index} app={app} />
           </Modal>

app/modals/AddsModal.tsx

@@ -48,6 +48,10 @@ const AddsModal: React.FC<AddsModalProps> = React.memo(({ setOpen }) => {
 
     });
   };
+  function myFunction() {
+    location.replace("/")
+  }
+
 //uncomment below to bring back database, description-TG
   // const { database, URI, name, description } = fields;
   const { URI, name } = fields;
@@ -59,105 +63,28 @@ const AddsModal: React.FC<AddsModalProps> = React.memo(({ setOpen }) => {
 
       </div>
       <form onSubmit={handleSubmit}>
-        {/* <p>Required*</p> */}
-        <div>
-          {/* <label htmlFor="db-type">
-            Type<span>*</span>
-          </label> */}
-          {/* <select id="db-type" name="database" value={database} onChange={e => handleChange(e)}>
-            <option value="SQL">SQL</option>
-            <option value="MongoDB">MongoDB</option>
-          </select> */}
-        </div>
-        {/* <div>
-          <label htmlFor="db-uri">
-            EMAIL<span>*</span>
-          </label>
-          <input
-             id="db-uri"
-             name="URI"
-             value={Email}
-            onChange={e => handleChange(e)}
-            placeholder="EMAIL ADDRESS"
-            required
-          />
-        </div> */}
+       
 
         <div>
           <label htmlFor="db-uri">
             <span></span>
           </label>
-          {/* <input
-            id="db-uri"
-            name="URI"
-            value={URI}
-            onChange={e => handleChange(e)}
-            placeholder="ENTER EMAIL ADDDRESS"
-            required
-          /> */}
+       
         </div>
         <div>
         <label htmlFor="db-name">
 
             <p><h4>ACCESS LEVEL: </h4></p>
           </label>
 
-          
-          {/* <label htmlFor="db-name">
-            PASSWORD<span>*</span>
-          </label> */}
-          {/* <input
-            id="db-name"
-            type="text"
-            name="name"
-            value={name}
-            onChange={e => handleChange(e)}
-            placeholder="ENTER PASSWORD"
-            required
-          /> */}
+        
         </div>
         <div>
-          {/* <label htmlFor="db-desc">Description</label>
-          <textarea
-            id="db-desc"
-            name="description"
-            value={description}
-            onChange={e => handleChange(e)}
-            placeholder="Add a short description"
-          /> */}
+      
         </div>
         <button>Cancel</button>
         <br></br>
-        <button onClick={e =>(alert('Are you sure you want to log out?'))}>Log Out</button>
-        {/* <!-- sign up with Google button --> */}
-    {/* <div className="col-lg-14"> */}
-      {/* <div className="card">
-         <div className="card-body"> */}
-          {/* href makes a request to the following path-->change as needed --> */}
-          {/* <button className= 'googleL'>
-          <a className="btn btn-block btn-social btn-google" href="/auth/google" role="button">
-            <i className="fab fa-google"></i>
-            Google Sign Up */}
-          {/* </a>
-          </button>
-        </div> */}
-       {/* </div>
-      </div> */}
-   
-    {/* <div className="col-sm-10">
-      <div className="card">
-        <div className="card-body"> 
-          <button className= 'googleS'>
-          {/* <!-- href makes a request to the following path-->change as needed --> */}
-          {/* <a className="btn btn-block btn-social btn-google" href="/auth/google" role="button">
-            <i className="fab fa-google"></i>
-            Google Sign In
-          </a>
-          </button>
-        </div>
-      </div>
-    // </div> */} 
-    
+        <button className="link" id="submitBtn" type="submit" onClick={myFunction}>Log Out</button>
     </form>
   </div>
   );