[WIP] Add event year picker

src/components/EventListSearchCard/index.js

@@ -44,6 +44,17 @@ const useStyles = makeStyles(theme => ({
   button: {
     marginLeft: theme.spacing(1),
   },
+  closed: {
+    transform: "rotate(90deg)",
+  },
+  open: {
+    transform: "rotate(0)",
+  },
+  filterIcon: {
+    transition: theme.transitions.create(["transform"], {
+      duration: theme.transitions.duration.short,
+    }),
+  },
 }));
 
 const EventListSearchCard = ({ events }) => {
@@ -89,7 +100,13 @@ const EventListSearchCard = ({ events }) => {
           margin="none"
         />
         {hasDistricts && (
-          <IconButton onClick={toggleFilterOpen}>
+          <IconButton
+            onClick={toggleFilterOpen}
+            className={[
+              classes.filterIcon,
+              filterOpen ? classes.open : classes.closed,
+            ].join(" ")}
+          >
             <Badge badgeContent={filters.size} color="secondary">
               <FilterListIcon />
             </Badge>

src/components/EventYearPicker/index.js

@@ -0,0 +1,57 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { makeStyles } from "@material-ui/core/styles";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+import Select from "@material-ui/core/Select";
+import Router from "next/router";
+
+const MIN_YEAR = 1992;
+
+const useStyles = makeStyles(theme => ({
+  formControl: {
+    margin: theme.spacing(1),
+    minWidth: 120,
+  },
+  selectEmpty: {
+    marginTop: theme.spacing(5),
+  },
+}));
+
+const EventYearPicker = ({ selectedYear }) => {
+  const classes = useStyles();
+
+  const maxYear = 2020; // TODO: pull this from the /status endpoint
+  const years = Array.from(
+    Array(maxYear - MIN_YEAR + 1),
+    (v, i) => maxYear - i
+  );
+
+  const updateYear = React.useCallback(event => {
+    const year = event.target.value;
+    const as = `/events/${year}`;
+
+    Router.push(`/events/${year}`, as, {
+      shallow: true,
+    });
+  }, []);
+
+  return (
+    <FormControl className={classes.formControl}>
+      <Select value={selectedYear} onChange={updateYear}>
+        {years.map(year => (
+          <MenuItem key={year} value={year}>
+            {year}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+};
+
+EventYearPicker.propTypes = {
+  selectedYear: PropTypes.number,
+  years: PropTypes.array,
+};
+
+export default React.memo(EventYearPicker);

src/components/EventYearPicker/index.test.js

@@ -0,0 +1,8 @@
+/* eslint-env jest */
+import React from "react";
+import { shallow } from "enzyme";
+import Component from "./index.js";
+
+it("Renders without crashing", () => {
+  shallow(<Component years={[2020, 2019]} />);
+});

src/pages/events.js

@@ -10,19 +10,14 @@ import useQueryParam from "../lib/useQueryParam";
 import useQueryParamSet from "../lib/useQueryParamSet";
 import notFoundError from "../lib/notFoundError";
 import Page from "../components/Page";
-import { makeStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
 import EventListSearchCard from "../components/EventListSearchCard";
+import EventYearPicker from "../components/EventYearPicker";
 import GroupedEventList from "../components/GroupedEventList";
 import Event from "../database/Event";
 
-const useStyles = makeStyles({
-  sideNav: {},
-});
-
 const Events = ({ year, refetchOnLoad }) => {
-  const classes = useStyles();
   const [rawEvents, eventsFetchStatus, refetchEvents] = useData(
     state => getYearEventsFetchStatus(state, year),
     state => getYearEvents(state, year),
@@ -80,7 +75,7 @@ const Events = ({ year, refetchOnLoad }) => {
       </Typography>
       <Grid container spacing={2}>
         <Grid item xs={12} md={3} lg={2}>
-          <div className={classes.sideNav}>TODO: YEAR PICKER & SECTIONS</div>
+          <EventYearPicker selectedYear={year} />
         </Grid>
         <Grid item xs={12} md={9} lg={10}>
           <EventListSearchCard events={rawEvents} />
@@ -93,7 +88,7 @@ const Events = ({ year, refetchOnLoad }) => {
 };
 
 Events.getInitialProps = async ({ reduxStore, query }) => {
-  let year = 2019;
+  let year = 2020; // TODO: pull this from the /status endpoint
   if (query.year) {
     year = parseInt(query.year, 10);
   }