feat: Sort project cards #13
Conversation
|
Few suggestions:
|
|
|
src/assets/up-arrow.png
Outdated
There was a problem hiding this comment.
It might be better/easier to just use a library like react-icons or fontawesome.
There was a problem hiding this comment.
or even just use something stupid like ^ and v lol, or check if the font supports emojis
There was a problem hiding this comment.
Emojis look like garbage on Windows. And icons can be used for other things later.
There was a problem hiding this comment.
in that case react-icons is already a dependency, so should be an easy change @Waqibsk
Looks great! Is the arrow for representing asc/desc? In that case it would be better to separate it from the dropdown since it looks like it is the dropdown's icon. |
src/assets/up-arrow.png
Outdated
There was a problem hiding this comment.
or even just use something stupid like ^ and v lol, or check if the font supports emojis
src/styles/sections/CardGrid.css
Outdated
| .gh-card-grid.all { | ||
| grid-template-columns: repeat(3, 1fr); | ||
|
|
||
| grid-template-columns: repeat(2, 1fr); |
There was a problem hiding this comment.
could you make this more responsive? 3, 1fr on large screens, 2 on medium etc
| import React, { useState } from "react"; | ||
| import "../styles/components/SortDropdown.css"; | ||
| import downArrow from "../assets/down.png"; | ||
| import upArrow from "../assets/up-arrow.png"; | ||
| import { SortDropdownProps } from "../utils/types"; | ||
| const SortDropdown: React.FC<SortDropdownProps> = ({ | ||
| setSortField, | ||
| setSortType, | ||
| sortField, | ||
| sortType, | ||
| }) => { | ||
| const [showMenu, setShowMenu] = useState(false); | ||
|
|
||
| const toggleSort = () => { | ||
| setSortType(sortType === "desc" ? "asc" : "desc"); | ||
| } | ||
| const toggleDropdown = () => { | ||
| setShowMenu(!showMenu); | ||
| }; | ||
| const handleSortField = (field: string) => { | ||
| setSortField(field); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className={`dropdown ${showMenu ? "show" : ""}`}> | ||
| <div className="sort-button"> | ||
| <button disabled={window.innerWidth >= 760} onClick={toggleDropdown}> | ||
| Sort by:{" "}{sortField.charAt(0).toUpperCase()+sortField.slice(1)} | ||
| </button> | ||
| <div className="sort-Arrow-container" onClick={(e) => { | ||
| e.stopPropagation(); | ||
| toggleSort(); | ||
| }}> | ||
| <img src={sortType === "desc" ? downArrow : upArrow} className="sort-Arrow" alt="▼" /> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
| <div className={`dropdown-content ${showMenu ? "show" : ""}`}> | ||
| <div className={`dropdown-item ${"name" === sortField ? "selected" : ""}`} onClick={() => handleSortField("name")}> | ||
| {" "} | ||
|
|
||
| Name | ||
| </div> | ||
| <div className={`dropdown-item ${"forks" === sortField ? "selected" : ""}`} onClick={() => handleSortField("forks")}> | ||
| <span | ||
|
|
||
| ></span> | ||
| Forks | ||
| </div> | ||
| <div className={`dropdown-item ${"stars" === sortField ? "selected" : ""}`} onClick={() => handleSortField("stars")}> | ||
|
|
||
| Stars | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default SortDropdown; |
There was a problem hiding this comment.
can we add another field? current behaviour is to fetch repo data by last updated, which means we get to see currently active repos on the top
in get_repos.py
# notice sort:updated
response = requests.get(url, params={'sort':'updated', 'per_page': 100, 'type': 'public'}) if that could be the default that would be great, feel free to add other fields if you like
also while your dropdown is nice and simple, could you look into a more modular filter system like as below?
let me know if you feel like any other fields are necessary. If you think these are enough then a dropdown is sufficient
src/pages/Projects.tsx
Outdated
| const Projects = () => { | ||
| const repoList: REPO_DATA_TYPE[] = RepoData as REPO_DATA_TYPE[] | ||
|
|
||
| const [sortField, setSortField] = useState("name"); |
There was a problem hiding this comment.
set the default field as the updated one as mentioned above
src/pages/Projects.tsx
Outdated
| const repoList: REPO_DATA_TYPE[] = RepoData as REPO_DATA_TYPE[] | ||
|
|
||
| const [sortField, setSortField] = useState("name"); | ||
| const [sortType,setSortType]=useState("asc") |
There was a problem hiding this comment.
and for forks, stars and updated it would be better to set the default order as descending
|
Made the changes ... |
|
slight nitpick the dropdown takes full width on smaller screens so hovering anywhere in that empty area opens up the menu, but idc rn merging, good work again |
|
hey the dropdown was not working in smaller screens ....so pls look into #16 |
3 participants
Description
Fixes issue #8 (partially ......search bar not yet implemented )
Type of change
How Has This Been Tested?
1.On larger screens, the dropdown menu appears on hover.
2.On smaller screens, it appears on click.