feature/search-page (#120)

* Install query-string

* WIP, gather the event ids

* WIP, render event card

* Refactor list of cards into a cards container

* Move the search_type into search page dir
Add main search state type

* Implement search page

* Implement search container

* Remove council members from search type
Remove date range filter from home search bar

* Remove search_type from project constants

* Add link to card container

* Use cards container in events container

* Add empty search events page

* Change to first-of-type

* Fallback to false for option

* Change the comittees in search events state to a record<string, boolean>

* Implement search events page

* Implement search events container

* Remove props from home search bar

* Move the fetching search result logic into a react hook

* Add search bar, search page title

* Keep only the search state prop

* Keep the top 50% style

* Use the searbar, search page title

* Change to h1

* Remove the initial get call to get events, and let the container get the
events

* Refactor page container as a flex container

* Refactor the show more events into show more cards

* Refactor the fetch events msg into fetch cards status

* Set initial fetch state to true

* Refactor batch size into a project constant

* Refactor the data fetching logic into useFetchData

* Remove unused hooks

* Rewrite fetch hook in events container

* Refactor into use search cards hook

* Include the function creator in dep array

* Install react-hooks linting

* Move up the handle search code

* Add page titles to /search and /events/search

* Allow popup to close on click outside

* handle search on popupclose

* Merge fetch and filter/sort into one step

* Change to size 6

* Remove margin from h1

* Refactor filters container

* Combine the margin bottom

* Remove not needed onOpen callback

* Comment out /search page
Route to /events/search from the landing page

* Weighted relevance is default sorting algo
Change the labels of sorting options

.eslintrc.js

@@ -4,6 +4,7 @@ module.exports = {
       "plugin:@typescript-eslint/recommended",
       "prettier",
       "prettier/@typescript-eslint",
+      "plugin:react-hooks/recommended",
   ],
   "env": {
       "mocha": true

package.json

@@ -82,6 +82,7 @@
     "eslint": "~6.6",
     "eslint-config-prettier": "~6.7",
     "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "gh-pages": "^3.1.0",
     "html-webpack-plugin": "^5.3.2",
     "husky": "~3.1",
@@ -124,6 +125,7 @@
     "lodash": "^4.17.21",
     "moment": "^2.24.0",
     "n-gram": "^2.0.1",
+    "query-string": "^7.0.1",
     "react-highlight-words": "^0.17.0",
     "react-localization": "^1.0.17",
     "react-responsive": "^8.2.0",

src/app/App.tsx

@@ -3,21 +3,25 @@ import { HashRouter as Router, Route, Switch } from "react-router-dom";
 import styled from "@emotion/styled";
 
 import { useAppConfigContext } from "./AppConfigContext";
+import useDocumentTitle from "../hooks/useDocumentTitle";
 
 import { Header } from "../components/Layout/Header";
 import { Footer } from "../components/Layout/Footer";
 import { HomePage } from "../pages/HomePage";
-import { SearchPage } from "../pages/SearchPage";
+/* import { SearchPage } from "../pages/SearchPage"; */
+import { SearchEventsPage } from "../pages/SearchEventsPage";
 import { EventPage } from "../pages/EventPage";
 import { EventsPage } from "../pages/EventsPage";
 import { PersonPage } from "../pages/PersonPage";
 import { PeoplePage } from "../pages/PeoplePage";
-import useDocumentTitle from "../hooks/useDocumentTitle";
+
+import { SEARCH_TYPE } from "../pages/SearchPage/types";
+
 import { strings } from "../assets/LocalizedStrings";
+import { screenWidths } from "../styles/mediaBreakpoints";
 
 import "@mozilla-protocol/core/protocol/css/protocol.css";
 import "semantic-ui-css/semantic.min.css";
-import { screenWidths } from "../styles/mediaBreakpoints";
 
 const FlexContainer = styled.div({
   // The App takes up at least 100% of the view height
@@ -54,13 +58,16 @@ function App() {
               <Route exact path="/">
                 <HomePage />
               </Route>
-              <Route exact path="/search">
+              {/* <Route exact path="/search">
                 <SearchPage />
-              </Route>
-              <Route exact path="/events">
+              </Route> */}
+              <Route exact path={`/${SEARCH_TYPE.EVENT}`}>
                 <EventsPage />
               </Route>
-              <Route exact path="/events/:id">
+              <Route exact path={`/${SEARCH_TYPE.EVENT}/search`}>
+                <SearchEventsPage />
+              </Route>
+              <Route exact path={`/${SEARCH_TYPE.EVENT}/:id`}>
                 <EventPage />
               </Route>
               <Route exact path="/people">

src/components/Filters/EventsFilter/EventsFilter.tsx

@@ -1,30 +1,15 @@
 import React, { FC, useState } from "react";
-import styled from "@emotion/styled";
 
 import Body from "../../../models/Body";
 
+import { FiltersContainer } from "../FiltersContainer";
 import { FilterPopup } from "../FilterPopup";
 import { Filter } from "../useFilter";
 import { SelectDateRange } from "../SelectDateRange";
 import { SelectSorting } from "../SelectSorting";
 import { SortOption } from "../SelectSorting/getSortingText";
 import { SelectTextFilterOptions } from "../SelectTextFilterOptions";
 
-import { screenWidths } from "../../../styles/mediaBreakpoints";
-
-const Filters = styled.div({
-  display: "flex",
-  flexDirection: "column",
-  gap: 4,
-  [`@media (min-width:${screenWidths.tablet})`]: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    "& > div:last-of-type": {
-      marginLeft: "auto",
-    },
-  },
-});
-
 interface EventsFilterProps {
   allBodies: Body[];
   filters: Filter<any>[];
@@ -57,7 +42,7 @@ const EventsFilter: FC<EventsFilterProps> = ({
   };
 
   return (
-    <Filters>
+    <FiltersContainer>
       <div>
         <FilterPopup
           name={committeeFilter.name}
@@ -114,7 +99,7 @@ const EventsFilter: FC<EventsFilterProps> = ({
           />
         </FilterPopup>
       </div>
-    </Filters>
+    </FiltersContainer>
   );
 };
 

src/components/Filters/FilterPopup/FilterPopup.tsx

@@ -124,6 +124,8 @@ const FilterPopup: FunctionComponent<FilterPopupProps> = ({
     return errors;
   }, [hasRequiredError, hasLimitError, name, limit]);
 
+  const onClose = () => setPopupIsOpen(false);
+
   const togglePopupIsOpen = () => {
     setPopupIsOpen((prev) => !prev);
   };
@@ -147,6 +149,7 @@ const FilterPopup: FunctionComponent<FilterPopupProps> = ({
         context={mountNodeRef.current || undefined}
         on="click"
         open={popupIsOpen}
+        onClose={onClose}
         pinned={true}
         offset={[0, -5]}
         position="bottom left"

src/components/Filters/FiltersContainer/FiltersContainer.tsx

@@ -0,0 +1,18 @@
+import styled from "@emotion/styled";
+
+import { screenWidths } from "../../../styles/mediaBreakpoints";
+
+const FiltersContainer = styled.div({
+  display: "flex",
+  flexDirection: "column",
+  gap: 4,
+  [`@media (min-width:${screenWidths.tablet})`]: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    "& > div:last-of-type:not(:first-of-type), & > button:last-of-type": {
+      marginLeft: "auto",
+    },
+  },
+});
+
+export default FiltersContainer;

src/components/Filters/FiltersContainer/index.ts

@@ -0,0 +1 @@
+export { default as FiltersContainer } from "./FiltersContainer";

src/components/Filters/SelectTextFilterOptions/SelectTextFilterOptions.tsx

@@ -95,7 +95,7 @@ const SelectTextFilterOptions: FunctionComponent<SelectTextFilterOptionsProps> =
                 type="checkbox"
                 name={option.name}
                 id={`form-checkbox-control-${option.name}`}
-                checked={state[option.name]}
+                checked={state[option.name] || false}
                 disabled={option.disabled}
                 onChange={onChange}
               />