From 4b57a4cf7cf852567b650f01ecb887bd069e7fb8 Mon Sep 17 00:00:00 2001 From: Anand Kumar Date: Mon, 2 Jan 2023 08:39:53 +0530 Subject: [PATCH] bfix: fix filters and add completed status --- frontend/components/Filter.jsx | 167 +++++++++++------------- frontend/components/RepoComponent.jsx | 113 +++++++++------- frontend/components/RepoList.jsx | 6 +- frontend/pages/participation/index.jsx | 172 ++++++++++++++++++------- frontend/styles/modules/Filter.scss | 5 +- 5 files changed, 276 insertions(+), 187 deletions(-) diff --git a/frontend/components/Filter.jsx b/frontend/components/Filter.jsx index 05c429d..d1a7e0e 100644 --- a/frontend/components/Filter.jsx +++ b/frontend/components/Filter.jsx @@ -1,96 +1,83 @@ import React from "react"; import { useEffect, useState } from "react"; -import NavItem from "./NavItem" -const Filter = () => { - var screenwidth = window.innerWidth; - var marginActiveFilter, marginInactiveFilter; - if (screenwidth < 576) { - marginInactiveFilter = "-2.25rem" - marginActiveFilter = "-1.05rem"; - } - else { - marginInactiveFilter = "-5.5rem" - marginActiveFilter = "-4.3rem"; - } - const [margin, changeMargin] = useState(marginInactiveFilter); - const [count, setCount] = useState(0); - const [easy, setEasy] = useState(); - const [medium, setMedium] = useState(); - const [hard, setHard] = useState(); - const [claim, setClaim] = useState(); - const [unclaim, setUnclaim] = useState(); - useEffect(() => { - if (count != 0) //currently the when a filter is selected the drop down moves a little right - changeMargin(marginActiveFilter) //so this was applied to change the css of the dropdown menu cause no better fix - else //came to mind the value of margin is changing but it not refected in inspect element - changeMargin(marginInactiveFilter) - console.log(margin); - }, [count]); - return ( - <> -
{/* the pink orb showing the number of filters applied */} - {count != 0 ? ( - {count} - ) : ( - <> - - )} -
- -
-

Filter

-
-
- -
- -
-
- - - - - -
-
- - ); +const Filter = ({ + difficultyFilters, + statusFilters, + count, + updateDifficultyFilters, + updateStatusFilters, +}) => { + var screenwidth = window.innerWidth; + var marginActiveFilter, marginInactiveFilter; + if (screenwidth < 576) { + marginInactiveFilter = "-2.25rem"; + marginActiveFilter = "-1.05rem"; + } else { + marginInactiveFilter = "-5.5rem"; + marginActiveFilter = "-4.3rem"; + } + const [margin, changeMargin] = useState(marginInactiveFilter); + useEffect(() => { + if (count != 0) + //currently the when a filter is selected the drop down moves a little right + changeMargin(marginActiveFilter); + //so this was applied to change the css of the dropdown menu cause no better fix + //came to mind the value of margin is changing but it not refected in inspect element + else changeMargin(marginInactiveFilter); + console.log(margin); + }, [count]); + return ( + <> +
+ {count != 0 ? {count} : <>} +
+
+

Filter

+
+
+ +
+
+
+ {difficultyFilters && + Array.from(difficultyFilters).map(([filterItem, value], index) => { + return ( + + ); + })} + {statusFilters && + Array.from(statusFilters).map(([filterItem, value], index) => { + return ( + + ); + })} +
+
+ + ); }; export default Filter; diff --git a/frontend/components/RepoComponent.jsx b/frontend/components/RepoComponent.jsx index 9255e41..2ffc8da 100644 --- a/frontend/components/RepoComponent.jsx +++ b/frontend/components/RepoComponent.jsx @@ -4,9 +4,10 @@ import Loader from "./Loader"; import axios from "axios"; import { useCallback } from "react"; import { signIn } from "next-auth/react"; -import useUserStore from '../store/userStore'; +import useUserStore from "../store/userStore"; -const UNCLAIMED_CARD_COLOR = "linear-gradient(90deg, rgba(50, 18, 138, 0.207) 0%, rgba(80, 41, 189, 0.207) 0.01%, rgba(170, 28, 100, 0.237) 58.85%, rgba(233, 69, 96, 0.3) 100%), linear-gradient(90deg, #1D0F44 0%, #3D0E3D 100%)"; +const UNCLAIMED_CARD_COLOR = + "linear-gradient(90deg, rgba(50, 18, 138, 0.207) 0%, rgba(80, 41, 189, 0.207) 0.01%, rgba(170, 28, 100, 0.237) 58.85%, rgba(233, 69, 96, 0.3) 100%), linear-gradient(90deg, #1D0F44 0%, #3D0E3D 100%)"; const Repo = ({ Card, refetch }) => { const { data: session } = useSession(); @@ -14,79 +15,103 @@ const Repo = ({ Card, refetch }) => { const [loading, setLoading] = useState(false); - const claimUnclaimIssue = useCallback(async(event, unclaim = false) => { - setLoading(true); - event.preventDefault(); - try { - await axios.post( - `${process.env.NEXT_PUBLIC_BACKEND_URL}api/${unclaim ? 'un' : ''}claim-issue/`, - { - access_token: session.accessToken, - id_token: session.user.id, - issue: Card.issueUrl, - } - ); - } catch (error) { - console.error(error); - } finally { - setLoading(false); - refetch(); - } - }, [session?.user?.id, session?.accessToken, Card.issueUrl, refetch]) + const claimUnclaimIssue = useCallback( + async (event, unclaim = false) => { + setLoading(true); + event.preventDefault(); + try { + await axios.post( + `${process.env.NEXT_PUBLIC_BACKEND_URL}api/${ + unclaim ? "un" : "" + }claim-issue/`, + { + access_token: session.accessToken, + id_token: session.user.id, + issue: Card.issueUrl, + } + ); + } catch (error) { + console.error(error); + } finally { + setLoading(false); + refetch(); + } + }, + [session?.user?.id, session?.accessToken, Card.issueUrl, refetch] + ); const handleClaimIssue = claimUnclaimIssue; - const handleUnclaimIssue = (event) => claimUnclaimIssue(event,true); - + const handleUnclaimIssue = (event) => claimUnclaimIssue(event, true); + const renderClaimButton = () => { - const isLoggedIn = session?.user?.id && session?.accessToken && user; - if(!isLoggedIn) { + const isLoggedIn = session?.user?.id && session?.accessToken && user; + if (!isLoggedIn) { // If not logged in, show login button return ( - - ) + ); + } + + if (Card.completed) { + return ( + + ); } - if(Card.claim && Card.assignee === user.username) { + if (Card.claim && Card.assignee === user.username) { return ( // If logged in and issue is claimed by the user, show unclaim button - - ) + ); } // If logged in and issue is claimed by someone else, show nothing - if(!Card.claim) { + if (!Card.claim) { // If logged in and issue is unclaimed, show claime button return ( - ) + ); } - } + }; - if(loading) { - return + if (loading) { + return ; } return ( -
+
{Card.tag}
-
- MENTOR : {Card.mentor} -
+
MENTOR : {Card.mentor}
{!Card.claim ? ( -
- ASSIGNEE : None -
+
ASSIGNEE : None
) : ( -
- ASSIGNEE : {Card.assignee} -
+
ASSIGNEE : {Card.assignee}
)}
{renderClaimButton()} diff --git a/frontend/components/RepoList.jsx b/frontend/components/RepoList.jsx index 761ba7f..b58a6ea 100644 --- a/frontend/components/RepoList.jsx +++ b/frontend/components/RepoList.jsx @@ -3,9 +3,9 @@ import Repo from "./RepoComponent"; const ReposToContribute = ({ list, refetch }) => (
- {list.map((card) => ( - - ))} + {list.map((card, index) => ( + + ))}
); diff --git a/frontend/pages/participation/index.jsx b/frontend/pages/participation/index.jsx index 20d1416..2f9aca9 100644 --- a/frontend/pages/participation/index.jsx +++ b/frontend/pages/participation/index.jsx @@ -1,9 +1,7 @@ import ReposToContribute from "../../components/RepoList"; import Loader from "../../components/Loader"; import Filter from "../../components/Filter"; -import { useEffect, useState } from "react"; -import React from "react"; -import { useSession } from "next-auth/react"; +import React, { useEffect, useState, useMemo } from "react"; import Info from "../../components/Info"; const axios = require("axios").default; @@ -16,74 +14,158 @@ const PARTICIPATION_DETAILS = [ ]; export default function Home() { + let repos = useMemo(() => [], []); const [margin, setMargin] = useState(); const [CardData, setCardData] = useState([]); const [loading, setLoading] = useState(true); + const [filterCount, setFilterCount] = useState(0); + const [difficultyFilters, setDifficultyFilters] = useState( + new Map([ + ["Easy", false], + ["Medium", false], + ["Hard", false], + ]) + ); + const [statusFilters, setStatusFilters] = useState( + new Map([ + ["Claimed", false], + ["Unclaimed", false], + ["Completed", false], + ]) + ); + + let updateDifficultyFilters = (item) => { + let currValue = difficultyFilters.get(item); + + if (currValue) setFilterCount((prevFilterCount) => prevFilterCount - 1); + else setFilterCount((prevFilterCount) => prevFilterCount + 1); + + setDifficultyFilters( + (prevDifficultyFilter) => + new Map(prevDifficultyFilter.set(item, !currValue)) + ); + }; + + let updateStatusFilters = (item) => { + let currValue = statusFilters.get(item); + + if (currValue) setFilterCount((prevFilterCount) => prevFilterCount - 1); + else setFilterCount((prevFilterCount) => prevFilterCount + 1); + + setStatusFilters( + (prevStatusFilter) => new Map(prevStatusFilter.set(item, !currValue)) + ); + }; + + let updateFilteredRepos = () => { + let filteredRepos = repos.filter( + (item) => checkDifficultyFilter(item) && checkStatusFilter(item) + ); + setCardData(filteredRepos); + }; const fetchRepos = async () => { setLoading(true); try { - const { data } = await axios.get( - `${process.env.NEXT_PUBLIC_BACKEND_URL}api/get-all-issues/` - ); - let repos = []; - data.forEach(async (element) => { - var repoInfo = element.issue.split("/"); - repos = JSON.parse(JSON.stringify(repos)); - repos.push({ - repoName: repoInfo[3], - tag: element.issueDifficulty, - issueTitle: element.issueName, - mentor: element.mentorId, - claim: element.assigneeId ? true : false, - assignee: element.assigneeId, - issueUrl: element.issue, + const { data } = await axios.get( + `${process.env.NEXT_PUBLIC_BACKEND_URL}api/get-all-issues/` + ); + repos.length = 0; // clear the array + data.forEach(async (element) => { + var repoInfo = element.issue.split("/"); + repos.push({ + repoName: repoInfo[3], + tag: element.issueDifficulty, + issueTitle: element.issueName, + mentor: element.mentorId, + claim: element.assigneeId ? true : false, + assignee: element.assigneeId, + issueUrl: element.issue, + completed: element.completed, + }); }); - setCardData(JSON.parse(JSON.stringify(repos))); - }); } catch (error) { console.error(error); } finally { setLoading(false); } + updateFilteredRepos(); }; - useEffect(() => { if (window.innerWidth < 576) { setMargin("2.5rem"); - } - else { + } else { setMargin("6.25rem"); } fetchRepos(); }, []); + let checkDifficultyFilter = (item) => { + let isFilterEmpty = true; + for (let [filter, value] of difficultyFilters) { + if (value === true) { + isFilterEmpty = false; + break; + } + } + + if (isFilterEmpty) return true; + return difficultyFilters.get(item.tag); + }; + + let checkStatusFilter = (item) => { + let isFilterEmpty = true; + for (let [filter, value] of statusFilters) { + if (value === true) { + isFilterEmpty = false; + break; + } + } + + if (isFilterEmpty) return true; + + if (item.completed) return statusFilters.get("Completed"); + if (item.claim) return statusFilters.get("Claimed"); + if (!item.claim) return statusFilters.get("Unclaimed"); + }; + + useEffect(() => { + updateFilteredRepos(); + }, [difficultyFilters, statusFilters]); + if (loading) { return ; - } - - return ( - <> -
-
-

PICK YOUR ISSUES

- {/* */} + } else { + return ( + <> +
+
+

PICK YOUR ISSUES

+ {/* */} + +
-
-
+
-
- - -
- - ); +
+ + +
+ + ); + } } diff --git a/frontend/styles/modules/Filter.scss b/frontend/styles/modules/Filter.scss index 3de6e97..396c6bc 100644 --- a/frontend/styles/modules/Filter.scss +++ b/frontend/styles/modules/Filter.scss @@ -56,7 +56,8 @@ .medium, .hard, -.claimed { +.claimed, +.unclaimed { height: 2.4rem; width: 100%; border: 0.2rem solid white; @@ -65,7 +66,7 @@ cursor: pointer; } -.unclaimed { +.completed { background: transparent; height: 2.4rem; width: 100%;