|
| 1 | +import React, { useState, useEffect, useCallback } from "react"; |
| 2 | +import { graphql, navigate } from "gatsby"; |
| 3 | +import { Button, Col, Form, FormGroup, Input, Row } from "reactstrap"; |
| 4 | +import Select from "react-select"; |
| 5 | +import SEO from "../../components/SEO/SEO"; |
| 6 | +import Layout from "../../layout"; |
| 7 | +import ModuleListing from "../../components/modules/ModuleListing"; |
| 8 | +import withLocation from "../../components/common/withLocation"; |
| 9 | +import useJsSearch from "../../components/modules/useJsSearch"; |
| 10 | + |
| 11 | +// TODO: factor this out into it's own component in components/modules. |
| 12 | +function SearchForm({ searchParams, allTags, setSearchParams }) { |
| 13 | + const options = allTags.sort().map((t) => ({ value: t, label: t })); |
| 14 | + |
| 15 | + return ( |
| 16 | + <Form role="search" method="GET"> |
| 17 | + <Row form classNames="justify-content-center" id="search-form"> |
| 18 | + <Col md="4"> |
| 19 | + <FormGroup> |
| 20 | + <Select |
| 21 | + form |
| 22 | + isMulti |
| 23 | + name="tags" |
| 24 | + placeholder="Tags..." |
| 25 | + className="search-input" |
| 26 | + classNamePrefix="react-select" |
| 27 | + options={options} |
| 28 | + onChange={(e) => { |
| 29 | + searchParams.delete("tag"); |
| 30 | + e.forEach((t) => searchParams.append("tag", t.value)); |
| 31 | + setSearchParams(searchParams); |
| 32 | + }} |
| 33 | + defaultValue={searchParams |
| 34 | + .getAll("tag") |
| 35 | + .filter((x) => x) |
| 36 | + .map((t) => ({ value: t, label: t }))} |
| 37 | + /> |
| 38 | + </FormGroup> |
| 39 | + </Col> |
| 40 | + <Col md="8"> |
| 41 | + <FormGroup> |
| 42 | + <Input |
| 43 | + type="search" |
| 44 | + className="search-input" |
| 45 | + name="keywords" |
| 46 | + bsSize="lg" |
| 47 | + aria-controls="search-results-count" |
| 48 | + onChange={(e) => { |
| 49 | + if (e.target.value) { |
| 50 | + searchParams.set("term", e.target.value); |
| 51 | + } else { |
| 52 | + searchParams.delete("term"); |
| 53 | + } |
| 54 | + setSearchParams(searchParams); |
| 55 | + }} |
| 56 | + placeholder="Search..." |
| 57 | + value={searchParams.get("term") || ""} |
| 58 | + /> |
| 59 | + </FormGroup> |
| 60 | + </Col> |
| 61 | + </Row> |
| 62 | + </Form> |
| 63 | + ); |
| 64 | +} |
| 65 | + |
| 66 | +export function Head({ data: { site } }) { |
| 67 | + return <SEO title={`Modules | ${site.metadata.title}`} />; |
| 68 | +} |
| 69 | + |
| 70 | +function Search({ data, searchParams: initialSearchParams }) { |
| 71 | + const MODULES_PER_PAGE = 9; |
| 72 | + |
| 73 | + const allModules = data.modules.nodes; |
| 74 | + const allTags = allModules.reduce((acc, m) => { |
| 75 | + m.moduleTxt.tags.forEach((t) => acc.add(t)); |
| 76 | + return acc; |
| 77 | + }, new Set()); |
| 78 | + |
| 79 | + // build search index for all modules |
| 80 | + const { search } = useJsSearch(allModules); |
| 81 | + |
| 82 | + const [searchParams, setSearchParams] = useState(initialSearchParams); |
| 83 | + const [searchDirty, setSearchDirty] = useState(true); |
| 84 | + const [filteredModules, setFilteredModules] = useState(allModules); |
| 85 | + const [noResults, setNoResults] = useState( |
| 86 | + "Filter by tags or type a search term to show matching modules." |
| 87 | + ); |
| 88 | + |
| 89 | + const updateSearchParams = useCallback( |
| 90 | + (params) => { |
| 91 | + setSearchParams(params); |
| 92 | + setSearchDirty(true); |
| 93 | + }, |
| 94 | + [setSearchParams, setSearchDirty] |
| 95 | + ); |
| 96 | + |
| 97 | + useEffect(() => { |
| 98 | + if (searchDirty) { |
| 99 | + const tags = searchParams.getAll("tag").filter((x) => x); |
| 100 | + const term = searchParams.get("term") || ""; |
| 101 | + const hasSearchParams = term || tags.length > 0; |
| 102 | + let result = []; |
| 103 | + if (hasSearchParams) { |
| 104 | + // filter based on searched term |
| 105 | + const searchResults = term ? search(term) : allModules; |
| 106 | + // filter based on tags |
| 107 | + result = searchResults.filter((m) => |
| 108 | + tags.every((t) => m.moduleTxt.tags.includes(t)) |
| 109 | + ); |
| 110 | + } |
| 111 | + setFilteredModules(result); |
| 112 | + setSearchDirty(false); |
| 113 | + navigate(`?${searchParams.toString()}`); |
| 114 | + } |
| 115 | + }, [searchDirty, searchParams, allModules, search]); |
| 116 | + |
| 117 | + useEffect(() => { |
| 118 | + if (!searchParams.get("term") && !searchParams.get("tag")) { |
| 119 | + setNoResults( |
| 120 | + "Filter by tags or type a search term to show matching modules." |
| 121 | + ); |
| 122 | + } else if (filteredModules.length) { |
| 123 | + setNoResults(""); |
| 124 | + } else { |
| 125 | + setNoResults("No modules found matching the search criteria."); |
| 126 | + } |
| 127 | + }, [searchParams, filteredModules]); |
| 128 | + |
| 129 | + // "Load More" functionality based on https://www.erichowey.dev/writing/load-more-button-and-infinite-scroll-in-gatsby/ |
| 130 | + const [modules, setModules] = useState( |
| 131 | + filteredModules.slice(0, MODULES_PER_PAGE) |
| 132 | + ); |
| 133 | + const [loadMore, setLoadMore] = useState(false); |
| 134 | + const [hasMore, setHasMore] = useState(allModules.length > MODULES_PER_PAGE); |
| 135 | + |
| 136 | + // reset number of shown modules when the result changes |
| 137 | + useEffect(() => { |
| 138 | + setModules(filteredModules.slice(0, MODULES_PER_PAGE)); |
| 139 | + }, [filteredModules]); |
| 140 | + |
| 141 | + // show more results if there are more available and the user requested to load more |
| 142 | + useEffect(() => { |
| 143 | + if (loadMore && hasMore) { |
| 144 | + const nextModules = filteredModules.slice( |
| 145 | + 0, |
| 146 | + modules.length + MODULES_PER_PAGE |
| 147 | + ); |
| 148 | + setModules(nextModules); |
| 149 | + } |
| 150 | + setLoadMore(false); |
| 151 | + }, [loadMore, hasMore, filteredModules, modules.length]); |
| 152 | + |
| 153 | + // compute whether there are more results to show whenever the list of results changes |
| 154 | + useEffect(() => { |
| 155 | + setHasMore(modules.length < filteredModules.length); |
| 156 | + }, [modules, filteredModules]); |
| 157 | + |
| 158 | + return ( |
| 159 | + <Layout title="Modules"> |
| 160 | + <div className="module-container"> |
| 161 | + <Row> |
| 162 | + <Col md="12"> |
| 163 | + <SearchForm |
| 164 | + searchParams={searchParams} |
| 165 | + allTags={[...allTags]} |
| 166 | + setSearchParams={updateSearchParams} |
| 167 | + /> |
| 168 | + </Col> |
| 169 | + </Row> |
| 170 | + <Row className="justify-content-center"> |
| 171 | + <ModuleListing defaultCover={data.defaultCover} modules={modules} /> |
| 172 | + </Row> |
| 173 | + {noResults ? ( |
| 174 | + <Row className="justify-content-center"> |
| 175 | + <p>{noResults}</p> |
| 176 | + </Row> |
| 177 | + ) : null} |
| 178 | + {hasMore ? ( |
| 179 | + <Row className="justify-content-center"> |
| 180 | + <Button onClick={() => setLoadMore(true)}>Load More</Button> |
| 181 | + </Row> |
| 182 | + ) : null} |
| 183 | + </div> |
| 184 | + </Layout> |
| 185 | + ); |
| 186 | +} |
| 187 | + |
| 188 | +export const query = graphql` |
| 189 | + query AllModules { |
| 190 | + modules: allTerasologyModule(sort: { name: ASC }) { |
| 191 | + nodes { |
| 192 | + name |
| 193 | + description |
| 194 | + url |
| 195 | + moduleTxt { |
| 196 | + description |
| 197 | + tags |
| 198 | + } |
| 199 | + } |
| 200 | + } |
| 201 | + defaultCover: file(relativePath: { eq: "logos/defaultCardcover.jpg" }) { |
| 202 | + childImageSharp { |
| 203 | + gatsbyImageData |
| 204 | + } |
| 205 | + } |
| 206 | + site { |
| 207 | + metadata: siteMetadata { |
| 208 | + title |
| 209 | + } |
| 210 | + } |
| 211 | + } |
| 212 | +`; |
| 213 | + |
| 214 | +export default withLocation(Search); |
0 commit comments