Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bfix: fix filters and add completed status #72

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

bfix: fix filters and add completed status #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 77 additions & 90 deletions frontend/components/Filter.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<>
<div className="filterDropDown"> {/* the pink orb showing the number of filters applied */}
{count != 0 ? (
<span class="dot" >{count}</span>
) : (
<>
</>
)}
<div className="filter">

<div>
<p>Filter</p>
</div>
<div className="filterIcon">
<img src="/images/filter_icon.svg" />
</div>

</div>
<div className="filterMenu" style={{ marginLeft: margin }}>
<button className="easy"
style={{ background: easy }} //different names given to background of each button for togglig
onClick={() => {
if (easy == undefined) { setEasy("#E95F8D"); setCount(count + 1) } //function changes the color of the div everytime it is
else { setEasy(); setCount(count - 1) } // clicked and accordingly the count is altered
}}> {/* //the rest of the four buttons are also similar */}
<div>easy</div>
</button>
<button className="medium"
style={{ background: medium }}
onClick={() => {
if (medium == undefined) { setMedium("#E95F8D"); setCount(count + 1) }
else { setMedium(); setCount(count - 1) }
}}>
<div>medium</div>
</button>
<button className="hard"
style={{ background: hard }}
onClick={() => {
if (hard == undefined) { setHard("#E95F8D"); setCount(count + 1) }
else { setHard(); setCount(count - 1) }
}}>
<div>hard</div>
</button>
<button className="claimed"
style={{ background: claim }}
onClick={() => {
if (claim == undefined) { setClaim("#E95F8D"); setCount(count + 1) }
else { setClaim(); setCount(count - 1) }
}}>
<div>claimed</div>
</button>
<button className="unclaimed"
style={{ background: unclaim }}
onClick={() => {
if (unclaim == undefined) { setUnclaim("#E95F8D"); setCount(count + 1) }
else { setUnclaim(); setCount(count - 1) }
}}>
<div>unclaimed</div>
</button>
</div>
</div>
</>
);
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 (
<>
<div className="filterDropDown">
{count != 0 ? <span className="dot">{count}</span> : <></>}
<div className="filter">
<div>
<p>Filter</p>
</div>
<div className="filterIcon">
<img src="/images/filter_icon.svg" />
</div>
</div>
<div className="filterMenu" style={{ marginLeft: margin }}>
{difficultyFilters &&
Array.from(difficultyFilters).map(([filterItem, value], index) => {
return (
<button
key={index}
className={filterItem.toLowerCase()}
style={{
backgroundColor: value ? "#E95F8D" : "transparent",
}}
onClick={() => {
updateDifficultyFilters(filterItem);
}}
>
<div>{filterItem}</div>
</button>
);
})}
{statusFilters &&
Array.from(statusFilters).map(([filterItem, value], index) => {
return (
<button
key={index}
className={filterItem.toLowerCase()}
style={{
backgroundColor: value ? "#E95F8D" : "transparent",
}}
onClick={() => {
updateStatusFilters(filterItem);
}}
>
<div>{filterItem}</div>
</button>
);
})}
</div>
</div>
</>
);
};

export default Filter;
113 changes: 66 additions & 47 deletions frontend/components/RepoComponent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,89 +4,114 @@ 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();
const user = useUserStore((store) => store.user);

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 (
<button className="button" onClick={() => signIn('github')}>
<button className="button" onClick={() => signIn("github")}>
Login
</button>
)
);
}

if (Card.completed) {
return (
<button
className="button"
style={{
backgroundColor: "#E95F8D",
borderColor: "#E95F8D",
color: "#FFF",
}}
>
Completed
</button>
);
}

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
<button className="button"
<button
className="button"
onClick={handleUnclaimIssue}
style={{
backgroundColor: "#E95F8D",
borderColor: "#E95F8D",
color: "#FFF"
color: "#FFF",
}}
>
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 (
<button className="button" onClick={handleClaimIssue}>
Claim
</button>
)
);
}
}
};

if(loading) {
return <Loader />
if (loading) {
return <Loader />;
}

return (
<div className="repobox" style={{ background: Card.claim ? 'none' : UNCLAIMED_CARD_COLOR }}>
<div
className="repobox"
style={{ background: Card.claim ? "none" : UNCLAIMED_CARD_COLOR }}
>
<div className="cardTag">{Card.tag}</div>
<div className="issueDetails">
<div>
<h4>
<i>{Card.repoName}</i> - {' '}
<i>{Card.repoName}</i> -{" "}
<b className="issue">
<a href={Card.issueUrl} target="_blank" rel="noreferrer">
{Card.issueTitle}
Expand All @@ -96,17 +121,11 @@ const Repo = ({ Card, refetch }) => {
</div>
<div className="buttonWrap">
<div>
<div className="mentor">
MENTOR : {Card.mentor}
</div>
<div className="mentor">MENTOR : {Card.mentor}</div>
{!Card.claim ? (
<div className='assignee'>
ASSIGNEE : None
</div>
<div className="assignee">ASSIGNEE : None</div>
) : (
<div className='assignee'>
ASSIGNEE : {Card.assignee}
</div>
<div className="assignee">ASSIGNEE : {Card.assignee}</div>
)}
</div>
{renderClaimButton()}
Expand Down
6 changes: 3 additions & 3 deletions frontend/components/RepoList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import Repo from "./RepoComponent";
const ReposToContribute = ({ list, refetch }) => (
<div className="repodialogue">
<div className="scroll">
{list.map((card) => (
<Repo Card={card} key={card.issueTitle} refetch={refetch} />
))}
{list.map((card, index) => (
<Repo Card={card} key={index} refetch={refetch} />
))}
</div>
</div>
);
Expand Down
Loading