profile dropdown

src/App.js

@@ -14,7 +14,7 @@ export const AuthContext = createContext();
 function App() {
   const[isLoggedIn, setIsLoggedIn] = useState(false);
   const[user, setUser] = useState(null);
-
+  console.log(user);
   const state = {
     user,
     setUser,

src/component/ProductIndex.jsx

@@ -10,7 +10,7 @@ export default function ProductIndex() {
   const [categories, setCategories] = useState([]);
   const [activeCategory, setActiveCategory] = useState("");
 
-  console.log(displayProducts);
+  // console.log(displayProducts);
   const fetchProducts = async () => {
     const res = await fetch(`${Config.inventoryUrl}`);
     if (res.ok) {

src/component/session/LoginButton.jsx

@@ -8,13 +8,14 @@ const clientId = `${google_ClientID}.apps.googleusercontent.com`;
 
 function LoginButton({}){
 
-    const { isLoggedIn, setIsLoggedIn } = useContext(AuthContext);
-
+    const { isLoggedIn, setIsLoggedIn,setUser } = useContext(AuthContext);
     const onSuccessLogin = (res) =>{
         setIsLoggedIn(true);
-        const { tokenId, profileObj } = res;    
+        const { tokenId, profileObj } = res;
+        setUser(profileObj);
     };
 
+
     const onFailure = (res) =>{
         setIsLoggedIn(false);
     };
@@ -32,6 +33,7 @@ function LoginButton({}){
                 onSuccess= {onSuccessLogin}
                 onFailure= {onFailure}
                 cookiePolicy={'single_host_origin'}
+                isSignedIn={true}
             />
             </div>
         </div>

src/component/session/LoginButtonPage.css

@@ -2,4 +2,5 @@
     padding: 50px;
     justify-content: center;
 
-}
\ No newline at end of file
+}
+

src/component/session/LogoutButton.jsx

 import React, {useContext} from 'react';
 import {GoogleLogout} from 'react-google-login';
 import {AuthContext} from "../../App";
-
+import { Dropdown } from 'react-bootstrap';
+import "./LogoutDropDown.css";
 const google_ClientID = process.env.REACT_APP_GOOGLE_CLIENT_ID;
 const clientId = `${google_ClientID}.apps.googleusercontent.com`;
 
 function LogoutButton(){
 
-    const { isLoggedIn, setIsLoggedIn } = useContext(AuthContext);
+    const { isLoggedIn, setIsLoggedIn, user , setUser } = useContext(AuthContext);
 
     const onSuccessLogout= (res) =>{
         setIsLoggedIn(false);
@@ -15,11 +16,22 @@ function LogoutButton(){
 
     return(
         <div>
-            <GoogleLogout
+            <Dropdown>
+                <Dropdown.Toggle  className="dropdown">
+                    <img className="profile-pic" src={user.imageUrl}/>
+                    {user.name}
+                </Dropdown.Toggle>
+                <Dropdown.Menu>
+                <Dropdown.Item>Profile</Dropdown.Item>
+                <Dropdown.Item><GoogleLogout
+                render={props => (<div onClick={props.onClick}>Logout</div>)}
                 clientId= {clientId}
                 buttonText="Logout"
                 onLogoutSuccess={onSuccessLogout}
-            />
+            /></Dropdown.Item>
+                </Dropdown.Menu>
+            </Dropdown>
+
         </div>
     );
 }

src/component/session/LogoutDropDown.css

+.profile-pic{
+    position: relative;
+    width: 28px;
+    height: 28px;
+    overflow: hidden;
+    border-radius: 50%;
+    padding: 2px;
+}
+
+.dropdown{
+    color:#EBEBEB;
+    background-color: transparent;
+    
+}
+
+.dropdown:hover{
+    color:#CCCDCF;
+    background-color: transparent;
+}
+