diff --git a/reddit-front/src/components/HomePageCards/BestHotNewCard.jsx b/reddit-front/src/components/HomePageCards/BestHotNewCard.jsx index 7d4a0c12..7ac76a47 100644 --- a/reddit-front/src/components/HomePageCards/BestHotNewCard.jsx +++ b/reddit-front/src/components/HomePageCards/BestHotNewCard.jsx @@ -1,14 +1,14 @@ /* eslint-disable no-console */ /* eslint-disable eqeqeq */ /* eslint-disable */ -import Box from "@mui/material/Box"; -import { BsThreeDots } from "react-icons/bs"; -import { IoMdRocket } from "react-icons/io"; -import { HiOutlineChevronDown } from "react-icons/hi"; -import { HiOutlineArrowTrendingUp } from "react-icons/hi2"; -import { AiOutlineToTop, AiOutlineStar, AiOutlineFire } from "react-icons/ai"; -import { useState } from "react"; -import Menu from "@mui/material/Menu"; +import Box from '@mui/material/Box'; +import { BsThreeDots } from 'react-icons/bs'; +import { IoMdRocket } from 'react-icons/io'; +import { HiOutlineChevronDown } from 'react-icons/hi'; +import { HiOutlineArrowTrendingUp } from 'react-icons/hi2'; +import { AiOutlineToTop, AiOutlineStar, AiOutlineFire } from 'react-icons/ai'; +import { useState } from 'react'; +import Menu from '@mui/material/Menu'; import { StyledButton, CreatePostCardRoot, @@ -16,7 +16,7 @@ import { StyledMenuItem, CreatePostCardButtonsRoot, CreatePostCardOneButtonRoot -} from "./HomePageCards.style"; +} from './HomePageCards.style'; /** * @typedef {PropType} states @@ -33,8 +33,8 @@ import { export default function BestHotNewCard({ clickedObject }) { const [clickedButton, setClickedButton] = useState(0); const [anchorEl, setAnchorEl] = useState(null); - const [clickedItem, setClickedItem] = useState("Today"); - const [clickedButtonItem, setClickedButtonItem] = useState("Best"); + const [clickedItem, setClickedItem] = useState('Today'); + const [clickedButtonItem, setClickedButtonItem] = useState('Best'); const open = Boolean(anchorEl); const buttonIcons = { @@ -42,31 +42,31 @@ export default function BestHotNewCard({ clickedObject }) { Best: ( ), Hot: ( ), New: ( ), Top: ( ), Rising: ( ) }; @@ -78,7 +78,7 @@ export default function BestHotNewCard({ clickedObject }) { /** * closes the Rising Menu */ const handleClose = () => { - clickedObject.sort = "Rising"; + clickedObject.sort = 'Rising'; clickedObject.time = null; console.log(clickedObject); setAnchorEl(null); @@ -94,12 +94,12 @@ export default function BestHotNewCard({ clickedObject }) { * closes the Today Menu */ const handleCloseTodayMenu = (clicked) => { if (clicked == null) { - console.log(" Error"); + console.log(' Error'); } if (clicked != null) { setClickedItem(clicked); buttonClickedHandler(3, clicked); - console.log("No Error"); + console.log('No Error'); } setAnchorElTodayMenu(null); }; @@ -115,22 +115,22 @@ export default function BestHotNewCard({ clickedObject }) { setClickedButton(sort); console.log(clickedButton); if (sort == 0) { - clickedObject.sort = "Best"; + clickedObject.sort = 'Best'; clickedObject.time = null; console.log(clickedObject); } if (sort == 1) { - clickedObject.sort = "Hot"; + clickedObject.sort = 'Hot'; clickedObject.time = null; console.log(clickedObject); } if (sort == 2) { - clickedObject.sort = "New"; + clickedObject.sort = 'New'; clickedObject.time = null; console.log(clickedObject); } if (sort == 3) { - clickedObject.sort = "Top"; + clickedObject.sort = 'Top'; clickedObject.time = time; console.log(clickedObject); } @@ -140,25 +140,25 @@ export default function BestHotNewCard({ clickedObject }) { const handleCloseButtonMenu = (clicked) => { console.log(clickedButton); // بيتغير متأخر ليه ؟ if (clicked == null) { - console.log(" Error"); + console.log(' Error'); } - if (clicked == "Best") { + if (clicked == 'Best') { setClickedButtonItem(clicked); buttonClickedHandler(0, null); - console.log("0"); - } else if (clicked == "Hot") { + console.log('0'); + } else if (clicked == 'Hot') { setClickedButtonItem(clicked); buttonClickedHandler(1, null); - } else if (clicked == "New") { + } else if (clicked == 'New') { setClickedButtonItem(clicked); buttonClickedHandler(2, null); - } else if (clicked == "Top") { - buttonClickedHandler(3, "Today"); + } else if (clicked == 'Top') { + buttonClickedHandler(3, 'Today'); setClickedButtonItem(clicked); - } else if (clicked == "Rising") { + } else if (clicked == 'Rising') { setClickedButtonItem(clicked); - clickedObject.sort = "Rising"; + clickedObject.sort = 'Rising'; clickedObject.time = null; console.log(clickedObject); } @@ -169,24 +169,27 @@ export default function BestHotNewCard({ clickedObject }) { return ( - + {buttonIcons[clickedButtonItem]}   {clickedButtonItem}   - + handleCloseButtonMenu(null)} MenuListProps={{ - "aria-labelledby": "basic-buttonMenu" + 'aria-labelledby': 'basic-buttonMenu' }} > - - handleCloseButtonMenu("Best")}> - + + handleCloseButtonMenu('Best')}> +   Best - handleCloseButtonMenu("Hot")}> - + handleCloseButtonMenu('Hot')}> +   Hot - handleCloseButtonMenu("New")}> - + handleCloseButtonMenu('New')}> +   New - handleCloseButtonMenu("Top")}> - + handleCloseButtonMenu('Top')}> +   Top - handleCloseButtonMenu("Rising")}> - + handleCloseButtonMenu('Rising')}> +   Rising @@ -224,16 +242,16 @@ export default function BestHotNewCard({ clickedObject }) { buttonClickedHandler(0, null)} >  Best @@ -241,16 +259,16 @@ export default function BestHotNewCard({ clickedObject }) { buttonClickedHandler(1, null)} >  Hot @@ -258,16 +276,16 @@ export default function BestHotNewCard({ clickedObject }) { buttonClickedHandler(2, null)} >  New @@ -275,16 +293,16 @@ export default function BestHotNewCard({ clickedObject }) { buttonClickedHandler(3, "Today")} + onClick={() => buttonClickedHandler(3, 'Today')} >  Top @@ -293,20 +311,23 @@ export default function BestHotNewCard({ clickedObject }) { <>   {clickedItem} - + handleCloseTodayMenu(null)} MenuListProps={{ - "aria-labelledby": "basic-buttonTodayMenu" + 'aria-labelledby': 'basic-buttonTodayMenu' }} > - - handleCloseTodayMenu("Now")}> + + handleCloseTodayMenu('Now')}> Now handleCloseTodayMenu("Today")} + onClick={() => handleCloseTodayMenu('Today')} > Today handleCloseTodayMenu("This Week")} + onClick={() => handleCloseTodayMenu('This Week')} > This Week handleCloseTodayMenu("This Month")} + onClick={() => handleCloseTodayMenu('This Month')} > This Month handleCloseTodayMenu("This Year")} + onClick={() => handleCloseTodayMenu('This Year')} > This Year handleCloseTodayMenu("All Time")} + onClick={() => handleCloseTodayMenu('All Time')} > All Time @@ -355,13 +376,16 @@ export default function BestHotNewCard({ clickedObject }) { - + - +   Rising diff --git a/reddit-front/src/components/Layout/AppBar/AppBar.Style.jsx b/reddit-front/src/components/Layout/AppBar/AppBar.Style.jsx index 3188e546..eb379e8e 100644 --- a/reddit-front/src/components/Layout/AppBar/AppBar.Style.jsx +++ b/reddit-front/src/components/Layout/AppBar/AppBar.Style.jsx @@ -210,30 +210,21 @@ export const LogInBox = styled('div')(({ theme }) => ({ })); export const BackToTop = styled('div')(({ theme }) => ({ - borderRadius: '1rem', + borderRadius: '2rem', backgroundColor: '#1484D6', padding: '0.3rem 1.5rem', position: 'fixed', + 'button:hover': { + color: 'white' + }, [theme.breakpoints.up('xs')]: { - top: '48.5rem', - left: '11rem' + top: '95%', + left: '50%' }, [theme.breakpoints.up('sm')]: { - top: '48.5rem', - left: '26rem' - }, - [theme.breakpoints.up('md')]: { - top: '48.5rem', - left: '40rem' - }, - [theme.breakpoints.up('lg')]: { - top: '48.5rem', - left: '55rem' + top: '94.5%', + left: '70%' } - // [theme.breakpoints.up('xl')]: { - // top: '44rem', - // left: '65rem' - // } })); export const MessageAlert = styled('div')(({ theme }) => ({ diff --git a/reddit-front/src/components/Layout/AppBar/AppBar.jsx b/reddit-front/src/components/Layout/AppBar/AppBar.jsx index 1d074542..da195297 100644 --- a/reddit-front/src/components/Layout/AppBar/AppBar.jsx +++ b/reddit-front/src/components/Layout/AppBar/AppBar.jsx @@ -14,12 +14,12 @@ import ProfileLogin from '../ProfileLogging/ProfileLogging'; * @param {string} topid this an id for nav bar used when back to top button to scroll up to it * @return {React.Component} the navigation bar of the site */ -function AppBarReddit({ topid }) { +function AppBarReddit() { const { isAuth, user } = useSelector((state) => state.auth); // const user = useSelector((state) => state.user); return ( - + {isAuth && } diff --git a/reddit-front/src/pages/HomePage/HomePage.jsx b/reddit-front/src/pages/HomePage/HomePage.jsx index 60457b72..78222413 100644 --- a/reddit-front/src/pages/HomePage/HomePage.jsx +++ b/reddit-front/src/pages/HomePage/HomePage.jsx @@ -14,7 +14,7 @@ import HomeCreatePostCard from '../../components/HomePageCards/HomeCreatePostCar import { useEffect, useState } from 'react'; import getUser from '../../services/requests/getUser'; import { AuthActions } from '../../store/slices/AuthSlice'; - +import BackTop from '../../components/BackToTop/BackToTop'; const communities = [ { name: 'My Community', @@ -132,6 +132,7 @@ export default function HomePage() { )} + );