Skip to content

Teams Tab Can Sort by Team Size #55

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

Open
amishasao wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Teams Tab Can Sort by Team Size #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5d80bf2
Initial Commit: template for changes
amishasao Jan 25, 2025
9a3abc8
changed TeamDisplay to add a filter for team size -- still has a bug …
amishasao Jan 29, 2025
ca27156
changed TeamsDisplay to filter by team size in the frontend; API was …
amishasao Jan 29, 2025
f014665
updated typescript version to 5.7.3
amishasao Feb 19, 2025
3f5c053
attempt at editing package.json
amishasao Feb 20, 2025
e8c258f
added header before team filtering box & changed stylistic choices fo…
amishasao Feb 20, 2025
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
36 changes: 18 additions & 18 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,25 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@chakra-ui/icons": "^2.1.0",
"@chakra-ui/react": "^2.7.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@chakra-ui/icons": "^2.2.4",
"@chakra-ui/react": "^2.10.5",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@hex-labs/core": "^1.0.52",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.4.0",
"axios": "^1.7.9",
"axios-hooks": "^4.0.0",
"chakra-react-select": "^4.6.0",
"chakra-react-select": "4.10.1",
"firebase": "9.6.7",
"framer-motion": "^10.12.16",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.46.1",
"react-icons": "^4.11.0",
"react-router-dom": "^6.12.0",
"react-scripts": "5.0.1",
"framer-motion": "^10.18.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-hook-form": "7.46.1",
"react-icons": "^5.4.0",
"react-router-dom": "^6.28.2",
"react-scripts": "^5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
Expand All @@ -44,10 +44,10 @@
]
},
"devDependencies": {
"@hex-labs/prettier-config": "^1.3.1",
"@hex-labs/stylelint-config": "^1.3.1",
"eslint": "^8.45.0",
"prettier": "^3.0.0",
"@hex-labs/prettier-config": "^1.4.4",
"@hex-labs/stylelint-config": "^1.4.4",
"eslint": "^8.57.1",
"prettier": "^3.4.2",
"stylelint": "^15.10.2",
"typescript": "^5.1.3"
},
Expand Down
100 changes: 78 additions & 22 deletions src/components/teams/TeamsDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
ButtonGroup,
HStack,
Center,
Select,
} from "@chakra-ui/react";
import { ErrorScreen, Service, apiUrl, useAuth } from "@hex-labs/core";
import { TeamCardType } from "../../types/TeamCard";
Expand All @@ -16,6 +17,7 @@ import { limit } from "../outline/Display";
import useAxios from "axios-hooks";
import CreateTeamSection from "./sections/CreateTeamSection";
import OnTeamSection from "./sections/OnTeamSection";
import axios from "axios";

interface Props {
search: string;
Expand All @@ -27,16 +29,38 @@ const TeamsDisplay: React.FC<Props> = ({ search, teamsOffset, setTeamsOffset })
const { user } = useAuth();
const isMobile = useBreakpointValue({ base: true, md: false });
const [resultsText, setResultsText] = useState("Loading...");
const [memberCount, setMemberCount] = useState<string>("");
const [teamsData, setTeamsData] = useState<any>(null);

const [{ data }] = useAxios({
method: "GET",
url: apiUrl(Service.HEXATHONS, `/teams`),
params: {
hexathon: process.env.REACT_APP_HEXATHON_ID,
search,
offset: teamsOffset,
},
});
// const [{ teamsData }] = useAxios({
// method: "GET",
// url: apiUrl(Service.HEXATHONS, `/teams`),
// params: {
// hexathon: process.env.REACT_APP_HEXATHON_ID,
// search,
// offset: teamsOffset,
// },
// });

useEffect(() => {
const fetchTeams = async () => {
try {
const response = await axios.get(apiUrl(Service.HEXATHONS, `/teams`), {
params: {
hexathon: process.env.REACT_APP_HEXATHON_ID,
search,
offset: teamsOffset,
memberCount: memberCount || undefined,
},
});
setTeamsData(response.data);
} catch (error) {
console.error("Error fetching teams", error);
}
};

fetchTeams();
}, [search, teamsOffset, memberCount]);

const [{ data: userTeamData }] = useAxios({
method: "GET",
Expand All @@ -48,16 +72,20 @@ const TeamsDisplay: React.FC<Props> = ({ search, teamsOffset, setTeamsOffset })
});

useEffect(() => {
if (!data) {
if (!teamsData) {
setResultsText("Showing 0 results");
} else if (data.offset === undefined || data.total === undefined || data.teams.length === 0) {
setResultsText(`Showing ${data.teams.length} results`);
} else if (
teamsData.offset === undefined ||
teamsData.total === undefined ||
teamsData.teams.length === 0
) {
setResultsText(`Showing ${teamsData.teams.length} results`);
} else {
setResultsText(
`Showing ${data.offset + 1} to ${data.offset + data.teams.length} of ${data.total} results`
`Showing ${teamsData.offset + 1} to ${teamsData.offset + teamsData.teams.length} of ${teamsData.total} results`
);
}
}, [data]);
}, [teamsData]);

const onPreviousClicked = () => {
setTeamsOffset(teamsOffset - limit);
Expand All @@ -68,18 +96,23 @@ const TeamsDisplay: React.FC<Props> = ({ search, teamsOffset, setTeamsOffset })
};

const hasPrevious = useMemo(() => {
if (!data || data.offset === undefined) {
if (!teamsData || teamsData.offset === undefined) {
return false;
}
return data.offset && data.offset > 0;
}, [data]);
return teamsData.offset && teamsData.offset > 0;
}, [teamsData]);

const hasNext = useMemo(() => {
if (!data || data.offset === undefined || data.total === undefined || !data) {
if (
!teamsData ||
teamsData.offset === undefined ||
teamsData.total === undefined ||
!teamsData
) {
return false;
}
return data.total > data.offset + data.teams.length;
}, [data]);
return teamsData.total > teamsData.offset + teamsData.teams.length;
}, [teamsData]);

return (
<>
Expand All @@ -94,10 +127,33 @@ const TeamsDisplay: React.FC<Props> = ({ search, teamsOffset, setTeamsOffset })
</Center>
)}
</Center>
<Box paddingTop={"1.5%"} paddingBottom={"2.5%"} paddingLeft={"5%"} paddingRight={"5%"}>
<Text
paddingTop={"1.5%"}
paddingLeft={"5%"}
paddingRight={"5%"}
fontSize={"200%"}
fontWeight={"semibold"}
>
Filter by Team Size
</Text>
<Box paddingTop={"0.5%"} paddingBottom={"2.5%"} paddingLeft={"5%"} paddingRight={"5%"}>
<Select placeholder="All Teams" onChange={e => setMemberCount(e.target.value)}>
<option value="1">1 Member</option>
<option value="2">2 Members</option>
<option value="3">3 Members</option>
<option value="4">4 Members</option>
</Select>
<br></br>
<Flex flexWrap="wrap" justifyContent="space-evenly">
{data?.teams.map((team: TeamCardType) => <TeamCard key={team.name} {...team} />)}
{teamsData?.teams
.filter(
(team: TeamCardType) =>
!memberCount ||
(memberCount === "4"
? team.members.length >= 4
: team.members.length === parseInt(memberCount, 10))
)
.map((team: TeamCardType) => <TeamCard key={team.name} {...team} />)}
</Flex>
</Box>
<Box px={{ base: "4", md: "6" }} pb="5">
Expand Down
Loading