Skip to content

Commit

Permalink
discontinued push
Browse files Browse the repository at this point in the history
  • Loading branch information
@dioveath
dioveath committed Nov 13, 2023
1 parent b46a868 commit 1088399
Show file tree
Hide file tree
Showing 10 changed files with 228 additions and 146 deletions.
23 changes: 23 additions & 0 deletions client/src/components/Navbar/NavData.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
export const NavData = [
{
title: 'Home',
path: '/dashboard',
},
{
title: 'Clips',
path: '/clips',
},
{
title: 'Leagues',
path: '/leagues',
},
{
title: 'Tourneys',
path: '/tourneys',
},
{
title: 'Market Place',
path: '/marketplace',
}
];

166 changes: 78 additions & 88 deletions client/src/components/Navbar/NavbarElements.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,27 @@
import React from 'react';
import styled, { css } from 'styled-components';
import tw from 'twin.macro';
import React from "react";
import styled, { css } from "styled-components";
import tw from "twin.macro";

import { Link, useNavigate } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { logout } from '../../redux/AuthSlice';
import { Link, useNavigate } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { logout } from "../../redux/AuthSlice";

import { slide as Menu } from 'react-burger-menu';
import { useMediaQuery } from 'react-responsive';
import { SCREENS } from '../Responsive';
import Button from '../Button';
import { Marginer } from '../Marginer';

import BurgerStyles from './BurgerMenuStyles';
import PuffLoader from 'react-spinners/PuffLoader';
import { useGetUserQuery } from '../../redux/UserApi';
import { slide as Menu } from "react-burger-menu";
import { useMediaQuery } from "react-responsive";
import { SCREENS } from "../Responsive";
import Button from "../Button";
import { Marginer } from "../Marginer";

import BurgerStyles from "./BurgerMenuStyles";
import PuffLoader from "react-spinners/PuffLoader";
import { useGetUserQuery } from "../../redux/UserApi";
import { NavData } from "./NavData";

export const NavContainer = styled.div`
${tw`flex px-4 md:px-2`}
${tw`flex px-4 md:px-2 gap-4`}
`;


export const LogoContainer = styled.div.attrs((props) => ({
export const LogoContainer = styled(Link).attrs((props) => ({
className: props.className,
}))`
${tw`flex items-center justify-center p-0 m-0`}
Expand All @@ -32,35 +31,36 @@ const UserContainer = styled.div`
${tw` flex justify-between `}
`;


const ListContainer = styled.ul`
${tw`z-20 flex flex-col items-center justify-center list-none sm:flex-row`}
`;

const NavItem = styled(Link)`
${tw`text-xs md:text-sm text-white font-semibold sm:px-2 md:px-5 cursor-pointer
const NavItem = styled(Link).attrs((props) => ({
className: props.className,
}))`
${(props) => (props.active === 'true' ? tw`text-white border-b-2` : tw`text-white border-b-2 border-transparent`)}
${tw`text-xs md:text-sm font-semibold sm:px-2 md:px-5 py-[17px] cursor-pointer
transition duration-300 ease-in-out hover:text-cornellred
`}
`;

const UserDesktopContainer = styled.div`
display: flex;
color: white;
font-size: 19px;
align-items: center;
gap: 1rem;
display: flex;
color: white;
font-size: 19px;
align-items: center;
gap: 1rem;
`;

const UserMobileContainer = styled.div`
display: flex;
flex-direction: column;
color: white;
font-size: 18px;
gap: 1rem;
display: flex;
flex-direction: column;
color: white;
font-size: 18px;
gap: 1rem;
`;


export function UserItems(){
export function UserItems() {
const { accessToken, userId } = useSelector((state) => state.auth);
const { data, isLoading } = useGetUserQuery(userId, { skip: !userId });

Expand All @@ -72,28 +72,29 @@ export function UserItems(){
const handleLogoutClick = (e) => {
e.preventDefault();
dispatch(logout());
navigate('/');
navigate("/");
};


return (
<UserContainer>
{ isAuth ? <UserDesktopContainer>
<Button type="outlined" to={ isLoading ? '' : `/dashboard` } {...{disabled: isLoading}}>
{ isLoading ? <PuffLoader color='white' size={14}/> : data?.gaming_name }
</Button>
{/* <Button text="Logout" onClick={handleLogoutClick}/> */}
</UserDesktopContainer>
: <UserDesktopContainer>
<Button text="Login" type="outlined" to="/auth/login"/>
<Button text="Register" to="/auth/register"/>
</UserDesktopContainer>
}
{isAuth ? (
<UserDesktopContainer>
<Button type="outlined" to={isLoading ? "" : `/dashboard`} {...{ disabled: isLoading }}>
{isLoading ? <PuffLoader color="white" size={14} /> : data?.gaming_name}
</Button>
{/* <Button text="Logout" onClick={handleLogoutClick}/> */}
</UserDesktopContainer>
) : (
<UserDesktopContainer>
<Button text="Login" type="outlined" to="/auth/login" />
<Button text="Register" to="/auth/register" />
</UserDesktopContainer>
)}
</UserContainer>
);
}

export function NavItems(){
export function NavItems({ page }) {
const { accessToken, userId } = useSelector((state) => state.auth);
const { data, isLoading } = useGetUserQuery(userId, { skip: !userId });
const isMobile = useMediaQuery({ maxWidth: SCREENS.sm });
Expand All @@ -102,38 +103,36 @@ export function NavItems(){

const isAuth = accessToken != null;

const handleLogoutClick = (e) => {
const handleLogoutClick = (e) => {
e.preventDefault();
dispatch(logout());
history.push('/');
};
history.push("/");
};

if(isMobile) {
if (isMobile) {
return (
<Menu right styles={BurgerStyles}>
<ListContainer>
<NavItem menu to="/" exact>
Home
</NavItem>
<NavItem menu to="/">
Leagues
</NavItem>
<NavItem menu to="/tourneys">
Tourneys
</NavItem>
<NavItem menu to="/">
About Us
</NavItem>
<NavItem menu to="/">
<hr/>
</NavItem>

{ isAuth && !isLoading ?
{NavData.map((item, index) => {
return (
<NavItem key={index} to={item.path} active={(item.path === "/" + page).toString()} className={'w-full'}>
{item.title}
</NavItem>
);
})}

{isAuth && !isLoading ? (
<UserMobileContainer>
<NavItem menu to={`/profile/${data.id}`}> {data.first_name} </NavItem>
<NavItem menu onClick={handleLogoutClick}> Logout </NavItem>
<NavItem menu to={`/profile/${data.id}`}>
{" "}
{data.first_name}{" "}
</NavItem>
<NavItem menu onClick={handleLogoutClick}>
{" "}
Logout{" "}
</NavItem>
</UserMobileContainer>
:
) : (
<UserMobileContainer>
<NavItem menu to="/auth/login">
Login
Expand All @@ -142,30 +141,21 @@ export function NavItems(){
Register
</NavItem>
</UserMobileContainer>
}

)}
</ListContainer>
</Menu>
);
}

return (
<ListContainer>
<NavItem to="/">
Home
</NavItem>
<NavItem to="/">
Clips
</NavItem>
<NavItem to="/">
Leagues
</NavItem>
<NavItem to="/tourneys">
Tourneys
</NavItem>
<NavItem to="/">
Market Place
</NavItem>
{NavData.map((item, index) => {
return (
<NavItem key={index} to={item.path} active={(item.path === "/" + page).toString()}>
{item.title}
</NavItem>
);
})}
</ListContainer>
);
}
27 changes: 10 additions & 17 deletions client/src/components/Navbar/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,22 @@ import React from "react";
import styled, { css } from "styled-components";
import tw from "twin.macro";

import {
NavContainer,
LogoContainer,
NavItems,
UserItems,
} from "./NavbarElements";
import { NavContainer, LogoContainer, NavItems, UserItems } from "./NavbarElements";
import { Logo } from "../Logo";
import { useMediaQuery } from "react-responsive";
import { SCREENS } from "../Responsive";

const NavbarContainer = styled.nav`
const NavbarContainer = styled.nav.attrs((props) => ({
className: props.className,
}))`
background-color: rgba(148, 27, 0, 0.7);
height: 56px;
z-index: 9999999;
top: 0;
left: 0;
@media only screen and (max-width: 640px) {
position: sticky;
}
${(props) => props.isMobile === "true" && tw`fixed top-0 left-0 w-full bg-transparent`}
${tw`
w-full
Expand All @@ -35,17 +30,15 @@ const NavbarContainer = styled.nav`
`}
`;

const Navbar = (props) => {
const Navbar = ({ page }) => {
const isMobile = useMediaQuery({ maxWidth: SCREENS.sm });
const isTablet = useMediaQuery({ maxWidth: SCREENS.md });

return (
<NavbarContainer>
<NavbarContainer isMobile={isMobile.toString()}>
<NavContainer>
<LogoContainer>
{isTablet ? <Logo size="20px" /> : <Logo />}
</LogoContainer>
<NavItems />
<LogoContainer to={'/'}>{isTablet ? <Logo size="20px" /> : <Logo />}</LogoContainer>
<NavItems page={page} />
</NavContainer>
<NavContainer>{!isMobile && <UserItems />}</NavContainer>
</NavbarContainer>
Expand Down
14 changes: 14 additions & 0 deletions client/src/containers/ClipsPage/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react'

export default function ClipsPage() {
return (
<article>
<div className="relative w-full h-[80%]">
<video className="absolute top-0 left-0 w-full h-full object-cover -z-10 bg-opacity-90" id="background-video" loop={true} muted={true} autoPlay={true} poster="">
<source src="http:https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
</article>
)
}
23 changes: 6 additions & 17 deletions client/src/containers/DashboardPage/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import { MdDashboard } from "react-icons/md";
import { RiLogoutCircleLine } from "react-icons/ri";
import { IoSettings } from "react-icons/io5";
import HomePage from "../HomePage";
import { useLocation } from "react-router-dom";

const PageContainer = styled.div`
background: radial-gradient(#1d0207, #0d0000);
Expand Down Expand Up @@ -93,6 +94,10 @@ export default function DashboardPage() {
const { userId } = useSelector((state) => state.auth);
const { isLoading, error } = useGetUserQuery(userId);

// get current path
const location = useLocation();
const currentPage = location.pathname.split("/")[1];

const [openRightSidebar, setOpenRightSidebar] = useState(false);
const contentWidth = openRightSidebar ? "w-[calc((100%-4rem)*8/10)]" : "w-full";

Expand All @@ -117,7 +122,7 @@ export default function DashboardPage() {

return (
<main className="h-screen">
<Navbar />
<Navbar page={currentPage}/>

<div className="flex flex-row h-[calc((100%-56px))]">
<ArenaBar />
Expand All @@ -127,22 +132,6 @@ export default function DashboardPage() {
{/* <aside className="w-[calc((100%-4rem)*2/10)] bg-pink-300 flex justify-center items-center">
</aside> */}
</div>

{/*
<div className="h-screen overflow-auto w-full">
<div className="h-[56px] bg-transparent"></div>
<div className="w-full flex justify-center">
<HomePage />
</div>
</div>
<RightSideBar open={openRightSidebar} setOpen={setOpenRightSidebar} /> */}

{/* <LeftSideBar menuItems={MenuItems} /> */}
{/* <PageContainer> */}
{/* <ContentContainer>{renderContent}</ContentContainer> */}
{/* </PageContainer> */}
</main>
);
}
Loading

0 comments on commit 1088399

Please sign in to comment.