From cf88a86925af39d3634c7143764a35e5c639cfea Mon Sep 17 00:00:00 2001 From: Hemu21 Date: Mon, 26 Feb 2024 18:17:18 +0530 Subject: [PATCH 1/2] bookmark endpoint Fix --- cypress/e2e/authed_tests/visit_routes.cy.js | 9 + .../e2e/unauthed_test/visit_routes.spec.cy.js | 9 + src/components/BookmarksPage/index.jsx | 388 ++++++++++++++++++ src/components/BookmarksPage/styles.jsx | 100 +++++ src/components/Topbar/Activity/index.jsx | 6 +- src/routes.jsx | 6 + 6 files changed, 515 insertions(+), 3 deletions(-) create mode 100644 src/components/BookmarksPage/index.jsx create mode 100644 src/components/BookmarksPage/styles.jsx diff --git a/cypress/e2e/authed_tests/visit_routes.cy.js b/cypress/e2e/authed_tests/visit_routes.cy.js index 79d76e00..8a6e88d8 100644 --- a/cypress/e2e/authed_tests/visit_routes.cy.js +++ b/cypress/e2e/authed_tests/visit_routes.cy.js @@ -84,6 +84,15 @@ describe("Authenticated Route Access Test | CodeLabz", () => { }); }); + it("Visit Bookmarks Page - Passing", function () { + cy.visit(`${this.base_url}bookmarks`); + cy.wait(5000); + + cy.location().should(loc => { + expect(loc.href).to.eq(`${this.base_url}bookmarks`); + }); + }); + it("Visit Organization Page - Passing", function () { cy.visit(`${this.base_url}org/codelabzorg`); cy.wait(5000); diff --git a/cypress/e2e/unauthed_test/visit_routes.spec.cy.js b/cypress/e2e/unauthed_test/visit_routes.spec.cy.js index 76dc5abd..0a9ac579 100644 --- a/cypress/e2e/unauthed_test/visit_routes.spec.cy.js +++ b/cypress/e2e/unauthed_test/visit_routes.spec.cy.js @@ -74,6 +74,15 @@ describe("Unauthenticated Routes Access Test | CodeLabz", () => { }); }); + it("Forbid Visit Bookmarks Page - Passing", function () { + cy.visit(`${this.base_url}bookmarks`); + cy.wait(5000); + + cy.location().should(loc => { + expect(loc.href).to.eq(`${this.base_url}login`); + }); + }); + it("Forbid Visit Organization Page - Passing", function () { cy.visit(`${this.base_url}org/settings/codelabzorg`); cy.wait(5000); diff --git a/src/components/BookmarksPage/index.jsx b/src/components/BookmarksPage/index.jsx new file mode 100644 index 00000000..1eaa71db --- /dev/null +++ b/src/components/BookmarksPage/index.jsx @@ -0,0 +1,388 @@ +import React, { useEffect, useState } from "react"; +import Card from "@mui/material/Card"; +import CardComponent from "../CodelabCard/index"; +import Typography from "@mui/material/Typography"; +import BottomNavigation from "@mui/material/BottomNavigation"; +import BottomNavigationAction from "@mui/material/BottomNavigationAction"; +import Box from "@mui/material/Box"; +import Grid from "@mui/material/Grid"; +import Divider from "@mui/material/Divider"; +import ListItem from "@mui/material/ListItem"; +import ListItemText from "@mui/material/ListItemText"; +import List from "@mui/material/List"; +import Tabs from "@mui/material/Tabs"; +import Tab from "@mui/material/Tab"; +import TabContext from "@mui/lab/TabContext"; +import TabPanel from "@mui/lab/TabPanel"; +import EventAvailableIcon from "@mui/icons-material/EventAvailable"; +import EventSeatIcon from "@mui/icons-material/EventSeat"; +import SupervisorAccountIcon from "@mui/icons-material/SupervisorAccount"; +import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt"; +import useStyles from "./styles"; +import SideBar from "../SideBar/index"; +import TagCard from "../CardTabs/Tags/index"; +import EventsCard from "../CardTabs/Events/index"; +import OrgUser from "../../assets/images/org-user.svg"; +import UserCard from "../CardTabs/Users/index"; +import NewCodelabz from "../Topbar/NewCodelabz"; +import CardWithPicture from "../Card/CardWithPicture"; +import CardWithoutPicture from "../Card/CardWithoutPicture"; +import Activity from "../Topbar/Activity"; +import useWindowSize from "../../helpers/customHooks/useWindowSize"; +import NewTutorial from "../Tutorials/NewTutorial"; +import { useDispatch, useSelector } from "react-redux"; +import { useFirebase, useFirestore } from "react-redux-firebase"; +import { + getTutorialFeedData, + getTutorialFeedIdArray +} from "../../store/actions/tutorialPageActions"; +import { UserIsAllowedUserDashboard } from "../../auth"; + +function BookmarkPage({ background = "white", textColor = "black" }) { + const classes = useStyles(); + const dispatch = useDispatch(); + const firebase = useFirebase(); + const firestore = useFirestore(); + const [value, setValue] = useState(2); + const [selectedTab, setSelectedTab] = useState("1"); + const [visibleModal, setVisibleModal] = useState(false); + const currentUser = firebase.auth().currentUser; + const [idList,setIdList]=useState([]) + const [footerContent, setFooterContent] = useState([ + { name: "Help", link: "https://dev.codelabz.io/" }, + { name: "About", link: "https://dev.codelabz.io/" }, + { name: "Content Policy", link: "https://dev.codelabz.io/" }, + { name: "Terms", link: "https://dev.codelabz.io/" }, + { name: "Privacy Policy", link: "https://dev.codelabz.io/" }, + { + name: `CodeLabz @${new Date().getFullYear()}`, + link: "https://dev.codelabz.io/" + } + ]); + + const windowSize = useWindowSize(); + const [openMenu, setOpen] = useState(false); + const toggleSlider = () => { + setOpen(!openMenu); + }; + const [upcomingEvents, setUpEvents] = useState([ + { + name: "Google Summer of Code", + img: [OrgUser], + date: "25 March, 2022" + }, + { + name: "Google Summer of Code", + img: [OrgUser], + date: "25 March, 2022" + }, + { + name: "Google Summer of Code", + img: [OrgUser], + date: "25 March, 2022" + }, + { + name: "Google Summer of Code", + img: [OrgUser], + date: "25 March, 2022" + } + ]); + const [tags, setTags] = useState([ + "HTML", + "JavaScript", + "Css", + "Python", + "React", + "Java", + "HTML", + "JavaScript", + "Css", + "Python", + "React", + "HTML", + "JavaScript", + "Css", + "Python", + "React", + "Java", + "HTML", + "JavaScript", + "Css", + "Python", + "React" + ]); + + const [usersToFollow, setUsersToFollow] = useState([ + { + name: "Janvi Thakkar", + img: [OrgUser], + desg: "Software Engineer", + onClick: {} + }, + { + name: "Janvi Thakkar", + img: [OrgUser], + desg: "Software Engineer", + onClick: {} + }, + { + name: "Janvi Thakkar", + img: [OrgUser], + desg: "Software Engineer", + onClick: {} + }, + { + name: "Janvi Thakkar", + img: [OrgUser], + desg: "Software Engineer", + onClick: {} + } + ]); + + const [contributors, setContributors] = useState([ + { + name: "Janvi Thakkar", + img: [OrgUser], + desg: "Software Engineer", + onClick: {} + }, + { + name: "Janvi Thakkar", + img: [OrgUser], + desg: "Software Engineer", + onClick: {} + }, + { + name: "Janvi Thakkar", + img: [OrgUser], + desg: "Software Engineer", + onClick: {} + }, + { + name: "Janvi Thakkar", + img: [OrgUser], + desg: "Software Engineer", + onClick: {} + } + ]); + + const profileData = useSelector(({ firebase: { profile } }) => profile); + useEffect(() => { + const getFeed = async () => { + const tutorialIdArray = await getTutorialFeedIdArray(profileData.uid)( + firebase, + firestore, + dispatch + ); + getTutorialFeedData(tutorialIdArray)(firebase, firestore, dispatch); + }; + getFeed(); + setIdList(profileData.bookmarks) + }, []); + const tutorials = useSelector( + ({ + tutorialPage: { + feed: { homepageFeedArray } + } + }) => homepageFeedArray + ); + + const notification = () => {}; + const handleChange = (event, newValue) => { + setValue(newValue); + }; + const handleTabChange = (event, newValue) => { + setSelectedTab(newValue); + }; + const closeModal = () => { + setVisibleModal(prev => !prev); + }; + return ( + + + + {windowSize.width > 750 && ( + + + + + + )} + + + closeModal(e)} + /> + + + + + + + {tutorials.map(tutorial => { + + return !tutorial?.featured_image ? ( + + ) : ( + + ); + })} + + + + } + value="1" + style={{ width: "25%" }} + /> + } + value="2" + style={{ width: "25%" }} + /> + } + value="3" + style={{ width: "25%" }} + /> + } + value="4" + style={{ width: "25%" }} + /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default UserIsAllowedUserDashboard(BookmarkPage); diff --git a/src/components/BookmarksPage/styles.jsx b/src/components/BookmarksPage/styles.jsx new file mode 100644 index 00000000..069d3bce --- /dev/null +++ b/src/components/BookmarksPage/styles.jsx @@ -0,0 +1,100 @@ +import { makeStyles } from "@mui/styles"; + +const useStyles = makeStyles(theme => ({ + wrapper: { + display: "flex", + alignItems: "top", + justifyContent: "center", + height: "100%", + background: "#f2f2f2" + }, + mainBody: { + display: "flex", + alignContent: "center", + justifyContent: "center", + height: "100%", + margin: "1rem 0 2rem 0", + flexDirection: "column" + }, + sideBody: { + display: "flex", + alignContent: "center", + justifyContent: "center", + width: "fit-content", + margin: "1rem 1rem 2rem 1rem", + height: "100%", + flexDirection: "column", + [theme.breakpoints.down(960)]: { + display: "none" + }, + maxWidth: "300px" + }, + cardBody: { + display: "flex", + justifyContent: "space-between", + width: "100%", + alignItems: "center", + direction: "column" + }, + sort: { + width: "100%", + display: "flex", + alignItems: "center", + justifyContent: "space-between", + flexDirection: "row", + margin: "0rem 0 0rem 0" + }, + sortedList: { + display: "flex", + alignItems: "center", + justifyContent: "space-around", + flexDirection: "row", + width: "auto", + [theme.breakpoints.down(750)]: { + display: "none" + } + }, + navigation: { + "&:selcted": { + border: "2px solid black" + } + }, + sideCard: { + display: "flex", + alignItems: "center", + justifyContent: "center", + flexDirection: "column", + maxHeight: "35rem", + margin: "0 0 2rem 0", + background: "white", + boxShadow: ".5px 2px 5px gray" + }, + + leftSideCard: { + display: "flex", + alignItems: "left", + justifyContent: "center", + flexDirection: "column", + maxHeight: "35rem", + margin: "0 0 2rem 0", + background: "white", + boxShadow: ".5px 2px 5px gray" + }, + + outerSideBar: { + minWidth: "100%" + }, + contentPart: { + height: "100%", + display: "flex", + flexDirection: "row", + justifyContent: "center", + maxWidth: "1400px" + }, + card: { + padding: "6px", + margin: "0 0.5rem 0 0.5rem" + } +})); + +export default useStyles; diff --git a/src/components/Topbar/Activity/index.jsx b/src/components/Topbar/Activity/index.jsx index ae6199c2..df27de89 100644 --- a/src/components/Topbar/Activity/index.jsx +++ b/src/components/Topbar/Activity/index.jsx @@ -7,7 +7,7 @@ import EmojiEventsIcon from "@mui/icons-material/EmojiEvents"; import { makeStyles } from "@mui/styles"; import Card from "@mui/material/Card"; import CardContent from "@mui/material/CardContent"; - +import {useLocation} from "react-router-dom" const useStyles = makeStyles(theme => ({ root: { display: "flex", @@ -21,7 +21,7 @@ const useStyles = makeStyles(theme => ({ function Activity() { const classes = useStyles(); const [List, setList] = useState(1); - + const location = useLocation().pathname; const acitvitylist = [ { id: 1, @@ -45,7 +45,7 @@ function Activity() {
- Activity + {location=="/"?"Activity":"Bookmarks"} { const profile = useSelector(({ firebase: { profile } }) => profile); @@ -106,6 +107,11 @@ const Routes = () => { path={"/forgotpassword"} render={props => } /> + <>} + /> Date: Mon, 26 Feb 2024 18:37:30 +0530 Subject: [PATCH 2/2] fixing the error --- src/components/BookmarksPage/index.jsx | 11 +++++++---- src/components/Topbar/Activity/index.jsx | 6 ++++-- src/routes.jsx | 6 +++++- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/src/components/BookmarksPage/index.jsx b/src/components/BookmarksPage/index.jsx index 1eaa71db..7bbd5c87 100644 --- a/src/components/BookmarksPage/index.jsx +++ b/src/components/BookmarksPage/index.jsx @@ -47,7 +47,7 @@ function BookmarkPage({ background = "white", textColor = "black" }) { const [selectedTab, setSelectedTab] = useState("1"); const [visibleModal, setVisibleModal] = useState(false); const currentUser = firebase.auth().currentUser; - const [idList,setIdList]=useState([]) + const [idList, setIdList] = useState([]); const [footerContent, setFooterContent] = useState([ { name: "Help", link: "https://dev.codelabz.io/" }, { name: "About", link: "https://dev.codelabz.io/" }, @@ -177,7 +177,7 @@ function BookmarkPage({ background = "white", textColor = "black" }) { getTutorialFeedData(tutorialIdArray)(firebase, firestore, dispatch); }; getFeed(); - setIdList(profileData.bookmarks) + setIdList(profileData.bookmarks); }, []); const tutorials = useSelector( ({ @@ -241,8 +241,11 @@ function BookmarkPage({ background = "white", textColor = "black" }) { - {tutorials.map(tutorial => { - + {tutorials.map((tutorial,i) => { + let obj = idList.find(o => o.id === tutorial.tutorial_id) + if(obj==false && idList[i].isSave==false){ + return <> + } return !tutorial?.featured_image ? ( ) : ( diff --git a/src/components/Topbar/Activity/index.jsx b/src/components/Topbar/Activity/index.jsx index df27de89..daf7cefc 100644 --- a/src/components/Topbar/Activity/index.jsx +++ b/src/components/Topbar/Activity/index.jsx @@ -7,7 +7,7 @@ import EmojiEventsIcon from "@mui/icons-material/EmojiEvents"; import { makeStyles } from "@mui/styles"; import Card from "@mui/material/Card"; import CardContent from "@mui/material/CardContent"; -import {useLocation} from "react-router-dom" +import { useLocation } from "react-router-dom"; const useStyles = makeStyles(theme => ({ root: { display: "flex", @@ -45,7 +45,9 @@ function Activity() {
- {location=="/"?"Activity":"Bookmarks"} + + {location == "/" ? "Activity" : "Bookmarks"} + { <>} + render={props => ( + <> + + + )} />