- 
- Seller:
-
-
- {quantity} x {' '}
+
- {quantity} x {' '}
+
+
+
+
+ {quantity} x {' '}
+
{
width={25}
height={25}
/>
-
+
+
+ Current Bid:
+
+ {highest_bid}
+
+
-
-
- Current Bid:
- {highest_bid}
-
+
+ {bidders.map((bidder) => {
+ return (
+
+ 
+
+ );
+ })}
-
+
-
- {bidders.map((bidder) => {
- return (
-
-
-
- );
- })}
-
);
});
return (
- {isLoading ? 'Please wait...' : 'Ongoing Auctions:'}
- {auctionHandler}
+
+ {isLoading ? 'Loading Please wait...' : 'Ongoing Auctions'}
+
+ {auctionHandler}
);
};
diff --git a/components/NavBar/index.js b/components/NavBar/index.js
index 447807f..8d682f5 100644
--- a/components/NavBar/index.js
+++ b/components/NavBar/index.js
@@ -1,68 +1,234 @@
-import Link from 'next/link';
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
+import { useRouter } from 'next/router';
import styles from './navbar.module.css';
-import Image from 'next/image';
+import Link from 'next/link';
import GenericClosePopUp from '../Close-popup/GenericClosePopUp';
+import { USER_DATA_URL, LOGIN_URL, PATHS, NAV_MENU } from 'constants.js';
+import Dropdown from '@components/dropdown';
+import { CLOSE_DROPDOWN, OPEN_DROPDOWN } from 'redux/actionTypes';
+import { useDispatch, useSelector } from 'react-redux';
-const NavBar = ({ personData: { photo } }) => {
- const RDSLogo = '/assets/Real-Dev-Squad1x.png';
+const NavBar = () => {
+ const router = useRouter();
+ const dispatch = useDispatch();
+ const dropdownIsOpened = useSelector(
+ (state) => state.dropdownToggle.dropdownIsOpened
+ );
+ const RDS_LOGO = '/assets/Real-Dev-Squad1x.png';
+ const GITHUB_LOGO = '/assets/github.png';
+ const DEFAULT_AVATAR = '/assets/default_avatar.jpg';
+ const [userData, setUserData] = useState({});
const [toggle, setToggle] = useState(false);
+ const [isLoggedIn, setIsLoggedIn] = useState(false);
+ const [mountedComponent, setMountedComponent] = useState(false);
const navbarRef = useRef();
+
+ let authUrl = LOGIN_URL;
+ if (typeof window !== 'undefined') {
+ authUrl = `${LOGIN_URL}&state=${window.location.href}`;
+ }
+
GenericClosePopUp(navbarRef, () => {
setToggle(false);
});
+ useEffect(() => {
+ const fetchData = async () => {
+ await fetch(USER_DATA_URL, { credentials: 'include' })
+ .then((response) => {
+ if (!response.ok) {
+ setIsLoggedIn(false);
+ throw new Error(`${response.status} (${response.statusText})`);
+ }
+ return response.json();
+ })
+ .then((responseJson) => {
+ if (responseJson.incompleteUserDetails) {
+ window.open('https://my.realdevsquad.com/signup', '_blank');
+ }
+ setIsLoggedIn(true);
+ setUserData({
+ userName: responseJson.username,
+ firstName: responseJson.first_name,
+ profilePicture: responseJson.picture?.url ?? DEFAULT_AVATAR,
+ });
+ })
+ .catch((err) => {
+ console.error(err);
+ });
+ setMountedComponent(true);
+ };
+
+ fetchData();
+ }, []);
+ function toggleDropdownDispatch(e, dropdownIsOpened) {
+ e.stopPropagation();
+ dropdownIsOpened
+ ? dispatch({ type: CLOSE_DROPDOWN })
+ : dispatch({ type: OPEN_DROPDOWN });
+ }
return (
-
+
-
+ {
width={25}
height={25}
/>
-
+
+ + {quantity} x {' '} +
+
+
+
Current Bid:
+
+ {highest_bid}
+
+
-
- Current Bid:
-
+
-
- Current Bid:
- {highest_bid}
-
+
+ {bidders.map((bidder) => {
+ return (
+
+
+
+ );
+ })}
+
+
-
);
});
return (
- {bidders.map((bidder) => {
- return (
-
-
-
- );
- })}
-
-
-
);
};
diff --git a/components/NavBar/index.js b/components/NavBar/index.js
index 447807f..8d682f5 100644
--- a/components/NavBar/index.js
+++ b/components/NavBar/index.js
@@ -1,68 +1,234 @@
-import Link from 'next/link';
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
+import { useRouter } from 'next/router';
import styles from './navbar.module.css';
-import Image from 'next/image';
+import Link from 'next/link';
import GenericClosePopUp from '../Close-popup/GenericClosePopUp';
+import { USER_DATA_URL, LOGIN_URL, PATHS, NAV_MENU } from 'constants.js';
+import Dropdown from '@components/dropdown';
+import { CLOSE_DROPDOWN, OPEN_DROPDOWN } from 'redux/actionTypes';
+import { useDispatch, useSelector } from 'react-redux';
-const NavBar = ({ personData: { photo } }) => {
- const RDSLogo = '/assets/Real-Dev-Squad1x.png';
+const NavBar = () => {
+ const router = useRouter();
+ const dispatch = useDispatch();
+ const dropdownIsOpened = useSelector(
+ (state) => state.dropdownToggle.dropdownIsOpened
+ );
+ const RDS_LOGO = '/assets/Real-Dev-Squad1x.png';
+ const GITHUB_LOGO = '/assets/github.png';
+ const DEFAULT_AVATAR = '/assets/default_avatar.jpg';
+ const [userData, setUserData] = useState({});
const [toggle, setToggle] = useState(false);
+ const [isLoggedIn, setIsLoggedIn] = useState(false);
+ const [mountedComponent, setMountedComponent] = useState(false);
const navbarRef = useRef();
+
+ let authUrl = LOGIN_URL;
+ if (typeof window !== 'undefined') {
+ authUrl = `${LOGIN_URL}&state=${window.location.href}`;
+ }
+
GenericClosePopUp(navbarRef, () => {
setToggle(false);
});
+ useEffect(() => {
+ const fetchData = async () => {
+ await fetch(USER_DATA_URL, { credentials: 'include' })
+ .then((response) => {
+ if (!response.ok) {
+ setIsLoggedIn(false);
+ throw new Error(`${response.status} (${response.statusText})`);
+ }
+ return response.json();
+ })
+ .then((responseJson) => {
+ if (responseJson.incompleteUserDetails) {
+ window.open('https://my.realdevsquad.com/signup', '_blank');
+ }
+ setIsLoggedIn(true);
+ setUserData({
+ userName: responseJson.username,
+ firstName: responseJson.first_name,
+ profilePicture: responseJson.picture?.url ?? DEFAULT_AVATAR,
+ });
+ })
+ .catch((err) => {
+ console.error(err);
+ });
+ setMountedComponent(true);
+ };
+
+ fetchData();
+ }, []);
+ function toggleDropdownDispatch(e, dropdownIsOpened) {
+ e.stopPropagation();
+ dropdownIsOpened
+ ? dispatch({ type: CLOSE_DROPDOWN })
+ : dispatch({ type: OPEN_DROPDOWN });
+ }
return (
- {isLoading ? 'Please wait...' : 'Ongoing Auctions:'}
- {auctionHandler} ++ {isLoading ? 'Loading Please wait...' : 'Ongoing Auctions'} +
+{auctionHandler}