From 6cd7dcbddc2d2d445af8e43bd1a3c7858b6aae39 Mon Sep 17 00:00:00 2001 From: Bhavesh0301 Date: Tue, 21 Sep 2021 00:15:53 +0530 Subject: [PATCH 1/4] Tag search page Added --- src/Routes/index.js | 7 + src/components/CourseMediaCard/MediaCard.js | 10 +- src/constants/routes.js | 2 + src/pages/SearchTag/index.js | 154 ++++++++++++++++++++ 4 files changed, 169 insertions(+), 4 deletions(-) create mode 100644 src/pages/SearchTag/index.js diff --git a/src/Routes/index.js b/src/Routes/index.js index b8e16a5b..d225dc9b 100644 --- a/src/Routes/index.js +++ b/src/Routes/index.js @@ -14,6 +14,7 @@ import LessonsPlayer from "../pages/LessonsPlayer/index"; import DoubtForum from "../pages/MainLayoutPage/DoubtForum"; import Checkout from "../pages/Checkout"; import SearchSection from "../pages/SearchSection"; +import SearchTag from "../pages/SearchTag"; import DoubtDetailSection from "../pages/DoubtDetailSection"; import AboutMentorSection from "../pages/AboutMentorSection"; import AskQuestion from "../pages/AskQuestion/AskQuestion"; @@ -72,6 +73,12 @@ const Routes = () => ( + + + + + + diff --git a/src/components/CourseMediaCard/MediaCard.js b/src/components/CourseMediaCard/MediaCard.js index 70ecb096..28dfdc27 100644 --- a/src/components/CourseMediaCard/MediaCard.js +++ b/src/components/CourseMediaCard/MediaCard.js @@ -31,6 +31,7 @@ function MediaCard({ props, isDeleteButton, onClick, enrolledCourse }) { video_num, mentor, } = props; + let flag = false; const classes = useStyles(); @@ -44,7 +45,6 @@ function MediaCard({ props, isDeleteButton, onClick, enrolledCourse }) { onClick(); }, 700); }; - return ( - enrolledCourse ? history.push(`/enrolled-course/${id}`) : history.push(`/course/${_id}`) - } + onClick={() => !flag ? enrolledCourse ? history.push(`/enrolled-course/${id}`) : history.push(`/course/${_id}`) : console.log('')} > { + flag = 1; + history.push(`/tags?q=${items}`); + }} /> ))} diff --git a/src/constants/routes.js b/src/constants/routes.js index 34f52bb8..eafbf9ce 100644 --- a/src/constants/routes.js +++ b/src/constants/routes.js @@ -18,6 +18,8 @@ export const CHECKOUT = "/checkout"; export const SEARCH_SECTION = "/search"; +export const SEARCH_TAG = "/tags"; + export const DOUBT_QUESTIONS_DETAILS = "/doubt-forum/:id"; export const MENTOR_SECTION = "/mentor/:id"; diff --git a/src/pages/SearchTag/index.js b/src/pages/SearchTag/index.js new file mode 100644 index 00000000..1b5507b4 --- /dev/null +++ b/src/pages/SearchTag/index.js @@ -0,0 +1,154 @@ +import { + Box, + makeStyles, + Typography, + Container, + Paper, + FormControl, + NativeSelect, +} from "@material-ui/core"; +import React, { useState } from "react"; +import { useHistory, useLocation } from "react-router"; +import CourseList from "../../components/SearchComponents/CourseList"; +import FilterListIcon from "@material-ui/icons/FilterList"; +import { ALL_COURSE_CARD_ENDPOINT } from "../../constants/apiEndpoints"; +import { loadData } from "../../services/apiService"; +import useSWR from "swr"; + +function SearchTag(props) { + const classes = useStyles(); + + const location = useLocation(); + + const history = useHistory(); + + function useQuery() { + return new URLSearchParams(location.search); + } + + const query = useQuery().get("q"); + + const sort = useQuery().get("sort"); + + const { data: courseCardData } = useSWR(ALL_COURSE_CARD_ENDPOINT, loadData, { + revalidateOnFocus: false, + dedupingInterval: 100000, + }); + + const filterCourse = courseCardData?.filter((course) => { + let flag = false + course?.tags.filter((items) => { + items === query ? flag = true : flag = false + return false; + }) + return flag; + }); + console.log(sort); + + const [state, setState] = useState("all"); + + const handleChange = (event) => { + setState(event.target.value); + history.push(`/search?q=${query}&sort=${state}`); + console.log(event.target.value); + }; + + const filterList = ["Most Relevant", "Most Reviewed", "Highest Rated", "Newest"]; + + return ( + <> + + + + + {filterCourse?.length} results for "{query}" + + + + + + + Filter by + + + + + {filterList.map((items, index) => ( + + ))} + + + + + + {filterCourse?.map((items, index) => ( + + ))} + + + + ); +} + +const useStyles = makeStyles((theme) => ({ + container: { + position: "relative", + maxWidth: "85%", + }, + courseListContainer: { + maxWidth: "85%", + marginTop: theme.spacing(8), + marginBottom: theme.spacing(12), + [theme.breakpoints.down("sm")]: { + maxWidth: "95%", + marginTop: theme.spacing(6), + }, + }, + filterSection: { + background: theme.palette.primary.main, + height: "100%", + borderRadius: "0px", + marginTop: theme.spacing(4), + boxShadow: "0px 6px 12px -6px rgba(24, 39, 75, 0.12), 0px 8px 24px -4px rgba(24, 39, 75, 0.08)", + }, + title: { + paddingTop: theme.spacing(4), + paddingBottom: theme.spacing(6), + color: "#fff", + }, + dropdown: { + margin: theme.spacing(1), + textTransform: "none", + padding: theme.spacing(1), + borderRadius: "5px", + "&.MuiInput-underline:before": { + display: "none", + }, + "&.MuiInput-underline:after": { + display: "none", + }, + }, + filterIcon: { + color: "#333", + marginLeft: theme.spacing(2), + }, + formControl: { + width: "100%", + boxShadow: "0px 6px 14px -6px rgba(24, 39, 75, 0.12), 0px 10px 32px -4px rgba(24, 39, 75, 0.1)", + top: 65, + position: "absolute", + flexDirection: "row", + alignItems: "center", + background: "#fff", + margin: 8, + borderRadius: "5px", + height: 50, + [theme.breakpoints.down("sm")]: { + width: "85%", + }, + }, +})); + +export default SearchTag; From a43b6d718ea4d1563ff11487217f5759228838af Mon Sep 17 00:00:00 2001 From: Bhavesh0301 Date: Fri, 24 Sep 2021 20:51:43 +0530 Subject: [PATCH 2/4] Single Tag list created --- src/pages/SearchTag/index.js | 30 ++++++++++++++++++++++++++---- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/src/pages/SearchTag/index.js b/src/pages/SearchTag/index.js index 1b5507b4..022b9cef 100644 --- a/src/pages/SearchTag/index.js +++ b/src/pages/SearchTag/index.js @@ -7,7 +7,7 @@ import { FormControl, NativeSelect, } from "@material-ui/core"; -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { useHistory, useLocation } from "react-router"; import CourseList from "../../components/SearchComponents/CourseList"; import FilterListIcon from "@material-ui/icons/FilterList"; @@ -46,15 +46,30 @@ function SearchTag(props) { console.log(sort); const [state, setState] = useState("all"); - + const [tagState, setTagState] = useState("Select Tag"); const handleChange = (event) => { setState(event.target.value); - history.push(`/search?q=${query}&sort=${state}`); + history.push(`/tags?q=${query}&sort=${state}`); console.log(event.target.value); }; const filterList = ["Most Relevant", "Most Reviewed", "Highest Rated", "Newest"]; - + const tagListSet = new Set() + let tagList = ["Select Tag"]; + courseCardData?.map((course, index) => { + tagList = [...tagList, ...course?.tags.filter((items) => { + if (!tagListSet.has(items)) { + tagListSet.add(items); + return true; + } + return false; + })] + return true; + }); + useEffect(() => { + if (tagState !== "Select Tag") + history.push(`/tags?q=${tagState}`); + }, [tagState]) return ( <> @@ -79,6 +94,13 @@ function SearchTag(props) { ))} + setTagState(event.target.value)}> + {tagList.map((items, index) => + + )} + From 6f2e7e7dd9b8aeb12236775655032f4fec5b933a Mon Sep 17 00:00:00 2001 From: Bhavesh0301 Date: Fri, 24 Sep 2021 21:48:30 +0530 Subject: [PATCH 3/4] tag search Section added on search page --- src/pages/SearchSection/index.js | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/src/pages/SearchSection/index.js b/src/pages/SearchSection/index.js index 2dc997e9..26e4c25f 100644 --- a/src/pages/SearchSection/index.js +++ b/src/pages/SearchSection/index.js @@ -7,7 +7,7 @@ import { FormControl, NativeSelect, } from "@material-ui/core"; -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { useHistory, useLocation } from "react-router"; import CourseList from "../../components/SearchComponents/CourseList"; import FilterListIcon from "@material-ui/icons/FilterList"; @@ -40,6 +40,7 @@ function SearchSection(props) { console.log(sort); const [state, setState] = useState("all"); + const [tagState, setTagState] = useState("Select Tag"); const handleChange = (event) => { setState(event.target.value); @@ -48,6 +49,22 @@ function SearchSection(props) { }; const filterList = ["Most Relevant", "Most Reviewed", "Highest Rated", "Newest"]; + const tagListSet = new Set() + let tagList = ["Search by Tags"]; + courseCardData?.map((course, index) => { + tagList = [...tagList, ...course?.tags.filter((items) => { + if (!tagListSet.has(items)) { + tagListSet.add(items); + return true; + } + return false; + })] + return true; + }); + useEffect(() => { + if (tagState !== "Select Tag") + history.push(`/tags?q=${tagState}`); + }, [tagState]) return ( <> @@ -73,6 +90,13 @@ function SearchSection(props) { ))} + setTagState(event.target.value)}> + {tagList.map((items, index) => + + )} + From a4512bc52556abf14d8d8ef168afec6e06507a44 Mon Sep 17 00:00:00 2001 From: Bhavesh0301 Date: Fri, 24 Sep 2021 22:33:16 +0530 Subject: [PATCH 4/4] formated --- src/components/CourseMediaCard/MediaCard.js | 18 +- src/pages/SearchSection/index.js | 34 ++- src/pages/SearchTag/index.js | 306 ++++++++++---------- 3 files changed, 188 insertions(+), 170 deletions(-) diff --git a/src/components/CourseMediaCard/MediaCard.js b/src/components/CourseMediaCard/MediaCard.js index 28dfdc27..87ffd5b9 100644 --- a/src/components/CourseMediaCard/MediaCard.js +++ b/src/components/CourseMediaCard/MediaCard.js @@ -31,7 +31,7 @@ function MediaCard({ props, isDeleteButton, onClick, enrolledCourse }) { video_num, mentor, } = props; - let flag = false; + let flag = false; const classes = useStyles(); @@ -72,7 +72,13 @@ function MediaCard({ props, isDeleteButton, onClick, enrolledCourse }) { !flag ? enrolledCourse ? history.push(`/enrolled-course/${id}`) : history.push(`/course/${_id}`) : console.log('')} + onClick={() => + !flag + ? enrolledCourse + ? history.push(`/enrolled-course/${id}`) + : history.push(`/course/${_id}`) + : console.log("") + } > { - flag = 1; - history.push(`/tags?q=${items}`); - }} + onClick={() => { + flag = 1; + history.push(`/tags?q=${items}`); + }} /> ))} diff --git a/src/pages/SearchSection/index.js b/src/pages/SearchSection/index.js index 26e4c25f..73091db5 100644 --- a/src/pages/SearchSection/index.js +++ b/src/pages/SearchSection/index.js @@ -49,22 +49,24 @@ function SearchSection(props) { }; const filterList = ["Most Relevant", "Most Reviewed", "Highest Rated", "Newest"]; - const tagListSet = new Set() + const tagListSet = new Set(); let tagList = ["Search by Tags"]; courseCardData?.map((course, index) => { - tagList = [...tagList, ...course?.tags.filter((items) => { - if (!tagListSet.has(items)) { - tagListSet.add(items); - return true; - } - return false; - })] + tagList = [ + ...tagList, + ...course?.tags.filter((items) => { + if (!tagListSet.has(items)) { + tagListSet.add(items); + return true; + } + return false; + }), + ]; return true; }); useEffect(() => { - if (tagState !== "Select Tag") - history.push(`/tags?q=${tagState}`); - }, [tagState]) + if (tagState !== "Select Tag") history.push(`/tags?q=${tagState}`); + }, [tagState]); return ( <> @@ -90,12 +92,16 @@ function SearchSection(props) { ))} - setTagState(event.target.value)}> - {tagList.map((items, index) => + setTagState(event.target.value)} + > + {tagList.map((items, index) => ( - )} + ))} diff --git a/src/pages/SearchTag/index.js b/src/pages/SearchTag/index.js index 022b9cef..66670d6c 100644 --- a/src/pages/SearchTag/index.js +++ b/src/pages/SearchTag/index.js @@ -1,11 +1,11 @@ import { - Box, - makeStyles, - Typography, - Container, - Paper, - FormControl, - NativeSelect, + Box, + makeStyles, + Typography, + Container, + Paper, + FormControl, + NativeSelect, } from "@material-ui/core"; import React, { useEffect, useState } from "react"; import { useHistory, useLocation } from "react-router"; @@ -16,161 +16,167 @@ import { loadData } from "../../services/apiService"; import useSWR from "swr"; function SearchTag(props) { - const classes = useStyles(); + const classes = useStyles(); - const location = useLocation(); + const location = useLocation(); - const history = useHistory(); + const history = useHistory(); - function useQuery() { - return new URLSearchParams(location.search); - } + function useQuery() { + return new URLSearchParams(location.search); + } - const query = useQuery().get("q"); + const query = useQuery().get("q"); - const sort = useQuery().get("sort"); + const sort = useQuery().get("sort"); - const { data: courseCardData } = useSWR(ALL_COURSE_CARD_ENDPOINT, loadData, { - revalidateOnFocus: false, - dedupingInterval: 100000, - }); + const { data: courseCardData } = useSWR(ALL_COURSE_CARD_ENDPOINT, loadData, { + revalidateOnFocus: false, + dedupingInterval: 100000, + }); - const filterCourse = courseCardData?.filter((course) => { - let flag = false - course?.tags.filter((items) => { - items === query ? flag = true : flag = false - return false; - }) - return flag; - }); - console.log(sort); + const filterCourse = courseCardData?.filter((course) => { + let flag = false; + course?.tags.filter((items) => { + items === query ? (flag = true) : (flag = false); + return false; + }); + return flag; + }); + console.log(sort); - const [state, setState] = useState("all"); - const [tagState, setTagState] = useState("Select Tag"); - const handleChange = (event) => { - setState(event.target.value); - history.push(`/tags?q=${query}&sort=${state}`); - console.log(event.target.value); - }; + const [state, setState] = useState("all"); + const [tagState, setTagState] = useState("Select Tag"); + const handleChange = (event) => { + setState(event.target.value); + history.push(`/tags?q=${query}&sort=${state}`); + console.log(event.target.value); + }; - const filterList = ["Most Relevant", "Most Reviewed", "Highest Rated", "Newest"]; - const tagListSet = new Set() - let tagList = ["Select Tag"]; - courseCardData?.map((course, index) => { - tagList = [...tagList, ...course?.tags.filter((items) => { - if (!tagListSet.has(items)) { - tagListSet.add(items); - return true; - } - return false; - })] - return true; - }); - useEffect(() => { - if (tagState !== "Select Tag") - history.push(`/tags?q=${tagState}`); - }, [tagState]) - return ( - <> - - - - - {filterCourse?.length} results for "{query}" - - - - - - - Filter by - - - - - {filterList.map((items, index) => ( - - ))} - - setTagState(event.target.value)}> - {tagList.map((items, index) => - - )} - - - - - - {filterCourse?.map((items, index) => ( - - ))} - - - - ); + const filterList = ["Most Relevant", "Most Reviewed", "Highest Rated", "Newest"]; + const tagListSet = new Set(); + let tagList = ["Select Tag"]; + courseCardData?.map((course, index) => { + tagList = [ + ...tagList, + ...course?.tags.filter((items) => { + if (!tagListSet.has(items)) { + tagListSet.add(items); + return true; + } + return false; + }), + ]; + return true; + }); + useEffect(() => { + if (tagState !== "Select Tag") history.push(`/tags?q=${tagState}`); + }, [tagState]); + return ( + <> + + + + + {filterCourse?.length} results for "{query}" + + + + + + + Filter by + + + + + {filterList.map((items, index) => ( + + ))} + + setTagState(event.target.value)} + > + {tagList.map((items, index) => ( + + ))} + + + + + + {filterCourse?.map((items, index) => ( + + ))} + + + + ); } const useStyles = makeStyles((theme) => ({ - container: { - position: "relative", - maxWidth: "85%", - }, - courseListContainer: { - maxWidth: "85%", - marginTop: theme.spacing(8), - marginBottom: theme.spacing(12), - [theme.breakpoints.down("sm")]: { - maxWidth: "95%", - marginTop: theme.spacing(6), - }, - }, - filterSection: { - background: theme.palette.primary.main, - height: "100%", - borderRadius: "0px", - marginTop: theme.spacing(4), - boxShadow: "0px 6px 12px -6px rgba(24, 39, 75, 0.12), 0px 8px 24px -4px rgba(24, 39, 75, 0.08)", - }, - title: { - paddingTop: theme.spacing(4), - paddingBottom: theme.spacing(6), - color: "#fff", - }, - dropdown: { - margin: theme.spacing(1), - textTransform: "none", - padding: theme.spacing(1), - borderRadius: "5px", - "&.MuiInput-underline:before": { - display: "none", - }, - "&.MuiInput-underline:after": { - display: "none", - }, - }, - filterIcon: { - color: "#333", - marginLeft: theme.spacing(2), - }, - formControl: { - width: "100%", - boxShadow: "0px 6px 14px -6px rgba(24, 39, 75, 0.12), 0px 10px 32px -4px rgba(24, 39, 75, 0.1)", - top: 65, - position: "absolute", - flexDirection: "row", - alignItems: "center", - background: "#fff", - margin: 8, - borderRadius: "5px", - height: 50, - [theme.breakpoints.down("sm")]: { - width: "85%", - }, - }, + container: { + position: "relative", + maxWidth: "85%", + }, + courseListContainer: { + maxWidth: "85%", + marginTop: theme.spacing(8), + marginBottom: theme.spacing(12), + [theme.breakpoints.down("sm")]: { + maxWidth: "95%", + marginTop: theme.spacing(6), + }, + }, + filterSection: { + background: theme.palette.primary.main, + height: "100%", + borderRadius: "0px", + marginTop: theme.spacing(4), + boxShadow: "0px 6px 12px -6px rgba(24, 39, 75, 0.12), 0px 8px 24px -4px rgba(24, 39, 75, 0.08)", + }, + title: { + paddingTop: theme.spacing(4), + paddingBottom: theme.spacing(6), + color: "#fff", + }, + dropdown: { + margin: theme.spacing(1), + textTransform: "none", + padding: theme.spacing(1), + borderRadius: "5px", + "&.MuiInput-underline:before": { + display: "none", + }, + "&.MuiInput-underline:after": { + display: "none", + }, + }, + filterIcon: { + color: "#333", + marginLeft: theme.spacing(2), + }, + formControl: { + width: "100%", + boxShadow: "0px 6px 14px -6px rgba(24, 39, 75, 0.12), 0px 10px 32px -4px rgba(24, 39, 75, 0.1)", + top: 65, + position: "absolute", + flexDirection: "row", + alignItems: "center", + background: "#fff", + margin: 8, + borderRadius: "5px", + height: 50, + [theme.breakpoints.down("sm")]: { + width: "85%", + }, + }, })); export default SearchTag;