Merge branch 'master' of https://github.com/Pelps12/refactored-fiesta

components/Header.js

@@ -3,14 +3,22 @@ import Navbar from "./Navbar";
 import Navigation from "./Navigation";
 import MobileNavigation from "./MobileNavigation";
 import { MdOutlineAccountCircle } from "react-icons/md";
-import { useState } from "react";
 import navStyle from "../styles/DesktopNav.module.css";
 import {CgCloseO} from "react-icons/cg";
 import IconLinks from "./IconLinks";
 import { RiUser3Line } from "react-icons/ri";
 import { FaRegUser } from "react-icons/fa";
+import { useState, useEffect } from 'react';
+import { useSession, signOut } from 'next-auth/react';
 
 const Header = () => {
+  const { data: session, status } = useSession();
+  const [auth, setAuth] = useState(false);
+  useEffect(() => {
+    if (status === 'authenticated' && session.role === 'seller') {
+      setAuth(true);
+    }
+  }, [session]);
   const [open, setOpen] = useState(false);
   const hamburgerIcon = <FaRegUser className={navStyle.hamburger} size='30px' color="white" onClick={()=> setOpen(!open)}/>;
   const closeIcon = <CgCloseO className={navStyle.hamburger} size='40px' color="white" onClick={()=> setOpen(!open)}/>;
@@ -22,7 +30,7 @@ const Header = () => {
       <Navigation/>
       <MobileNavigation/>
       <div className={sliderStyles.btnIcon}>
-      <a className={sliderStyles.navAnchor} href="/seller"><button className={sliderStyles.navBtn}>Become a Seller</button></a>
+      {auth ? <a className={sliderStyles.navAnchor} href="/seller"><button className={sliderStyles.navBtn}>Become a Seller</button></a> : <a className={sliderStyles.navAnchor} href="/seller"><button className={sliderStyles.navBtn}>Become a Seller</button></a>}
       {/* <a className={sliderStyles.navAnchor} href=""><button className={sliderStyles.navBtn}><MdOutlineAccountCircle size={33}/></button></a> */}
       <nav className={sliderStyles.navIcon}>
         {open ? closeIcon : hamburgerIcon}

components/IconLinks.js

@@ -1,19 +1,35 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import iconStyles from '../styles/IconLink.module.css';
 import Link from 'next/link';
+import { useState } from 'react';
+import { useSession, signOut } from 'next-auth/react';
+
+
 
 const IconLinks = () => {
+  const { data: session, status } = useSession();
+  const [auth, setAuth] = useState(false);
+  useEffect(() => {
+    if (status === 'authenticated') {
+      setAuth(true);
+    }
+  }, [session])
+  function handleSubmit(e) {
+    e.preventDefault();
+    signOut();
+  }
   return (
     <div className={iconStyles.action}>
-        <div className={iconStyles.menu}>
-           <h3>First Last</h3>
-            <ul>
-                <li><a href="/register">Sign Upp</a></li>
-                <li><a href="/login">Log In</a></li>
-                <li><a href="">My Profile</a></li>
-            </ul>
-        </div>
-
+      <div className={iconStyles.menu}>
+        {auth ? <h3>{session.user.name}</h3> : null}
+        <ul>
+          <li>{auth ? <a href="/register">Messages</a> : <a href="/register">Sign Up</a>}</li>
+          {auth ? null : <li><a href="/login">Log In</a></li>}
+          {auth ? <li><a href="">Account</a></li> : null}
+          {auth ? <li><a onClick={handleSubmit}>Sign Out</a></li> : null}
+        </ul>
+      </div>
+
     </div>
   )
 }

components/SellerForm.js

@@ -170,6 +170,9 @@ const SellerForm = () => {
                         </div>
 
                 </form>
+                <div className={formStyle.inputBox}>
+                            <input type="submit" value="Create" />
+                        </div>
                 </div>
             </div>
         </div>

styles/IconLink.module.css

@@ -45,7 +45,7 @@
 .action .menu ul li{
     list-style: none;
     padding: 10px 0;
-    border-top: 1px solid rgba(0,0,0,0.5);
+    border-top: 0px solid rgba(0,0,0,0.5);
     display: flex;
     align-items: center;
 }

styles/NavLinks.module.css

@@ -16,7 +16,7 @@
 
 
 .navAnchor:hover{
-    background-color: white;
+
 }
 .navList{
     /* display: inline-block;

styles/SellerForm.module.css

@@ -40,15 +40,14 @@
    border-bottom: 4px solid orange;
    display: inline-block;
    letter-spacing: 1px;
+   white-space: nowrap;
 }
 
 .wrapper .content .formBox .inputBox{
-    margin-bottom: 20px;
+    margin-bottom: 2%;
 }
 
-.wrapper .content .formBox .inputBox{
-    margin-bottom: 20px;
-}
+
 
 .wrapper .content .formBox .inputBox input{
     width: 100%;