Merge branch 'main' into feat/navbar

src/components/team/creditEntry.tsx

@@ -5,10 +5,10 @@ import Row from "react-bootstrap/Row";
 import Modal from "react-bootstrap/Modal";
 
 import { TeamBadges } from "./teamBadges";
-import { TeamMemberNode } from "../../types/teamMemberNode";
+import { TeamMemberNode } from "../../types/graphql/teamMemberNode";
 import { GatsbyImage, getImage } from "gatsby-plugin-image";
 
-import TeamTag from "../../types/teamTag";
+import TeamTag from "../../types/team/teamTag";
 import { Theme } from "@mui/material";
 
 type CreditEntryArgs = {

src/components/team/filterMenu.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+
+import { Button, Menu } from "@mui/material";
+
+import { FilterMenuProps } from "../../types/team/filterMenuProps";
+
+const FilterMenu = (props: FilterMenuProps) => {
+	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+	const open = Boolean(anchorEl);
+	const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+
+	return (
+		<>
+			<Button
+				id="chip-filter-menu-button"
+				aria-controls={open ? "chip-filter-menu" : undefined}
+				aria-haspopup="true"
+				aria-expanded={open ? "true" : undefined}
+				onClick={handleClick}
+			>
+				Filters
+			</Button>
+			<Menu id="chip-filter-menu" anchorEl={anchorEl} open={open} onClose={handleClose}>
+				{props.elements}
+			</Menu>
+		</>
+	);
+};
+
+export default FilterMenu;

src/components/team/teamBadges.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import TeamTag from "../../types/teamTag";
+import TeamTag from "../../types/team/teamTag";
 import { Chip, Theme } from "@mui/material";
 import capitalizeWords from "../../capitalizeWords";
 

src/filters/teamEntryFilter.ts

@@ -1,5 +1,5 @@
 import { CreditEntry } from "../components/team/creditEntry";
-import { FilterChip } from "../types/filterChip";
+import { FilterChip } from "../types/team/filterChip";
 
 const teamEntryFilter = (
 	entries: React.JSX.Element[],

src/pages/team.tsx

@@ -4,10 +4,11 @@ import { graphql, PageProps } from "gatsby";
 
 import "bootstrap/dist/css/bootstrap.min.css";
 import { CreditEntry } from "../components/team/creditEntry";
-import { TeamMemberNode } from "../types/teamMemberNode";
+import { TeamMemberNode } from "../types/graphql/teamMemberNode";
 import {
 	Chip,
 	createTheme,
+	MenuItem,
 	SimplePaletteColorOptions,
 	TextField,
 	Theme,
@@ -17,14 +18,15 @@ import AddIcon from "@mui/icons-material/Add";
 
 import update from "immutability-helper";
 
-import { TeamTagColourNode } from "../types/teamTagColourNode";
-import TeamTag from "../types/teamTag";
+import { TeamTagColourNode } from "../types/graphql/teamTagColourNode";
+import TeamTag from "../types/team/teamTag";
 import ExtendablePalette from "../types/extendablePalette";
-import { FilterChip, FilterChipEntry } from "../types/filterChip";
+import { FilterChip, FilterChipEntry } from "../types/team/filterChip";
 
 import capitalizeWords from "../capitalizeWords";
 import teamEntryFilter from "../filters/teamEntryFilter";
 import Navbar from "../components/navbar";
+import FilterMenu from "../components/team/filterMenu";
 
 // TypeScript type def for the component state
 // https://stackoverflow.com/questions/46987816/using-state-in-react-with-typescript
@@ -212,38 +214,24 @@ export default class TeamPage extends React.PureComponent<
 							variant="outlined"
 							onChange={event => this.setState({ searchQuery: event.target.value })}
 						/>
-						{/**
-						 * Filter chips
-						 */}
-						{this.state.filterChip.map(entry => {
-							if (entry.enabled) {
+						<FilterMenu
+							elements={this.state.filterChip.map(entry => {
+								// Filter chips
 								return (
-									<span style={{ paddingLeft: 16 }}>
+									<MenuItem>
 										<Chip
+											variant={entry.enabled ? "filled" : "outlined"}
+											deleteIcon={entry.enabled ? <></> : <AddIcon />}
 											onClick={(event: any) => this.handleChipClick(event, entry)}
 											label={capitalizeWords(entry.tag.name)}
 											color={entry.tag.paletteName}
 											size="small"
 											sx={{ fontWeight: "bold" }}
 										/>
-									</span>
+									</MenuItem>
 								);
-							} else {
-								return (
-									<span style={{ paddingLeft: 16 }}>
-										<Chip
-											variant="outlined"
-											deleteIcon={<AddIcon />}
-											onClick={(event: any) => this.handleChipClick(event, entry)}
-											label={capitalizeWords(entry.tag.name)}
-											color={entry.tag.paletteName}
-											size="small"
-											sx={{ fontWeight: "bold" }}
-										/>
-									</span>
-								);
-							}
-						})}
+							})}
+						/>
 					</div>
 					{teamEntryFilter(this.entries, this.state.searchQuery, this.state.filterChip)}
 				</ThemeProvider>

src/types/team/filterMenuProps.ts

@@ -0,0 +1,3 @@
+export type FilterMenuProps = {
+	elements: React.JSX.Element[];
+};