feat(front): add years

dataesr · Jul 23, 2024 · 388192a · 388192a
1 parent 3a85c37
commit 388192a
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 14 deletions.
diff --git a/project/front/src/components/input/index.tsx b/project/front/src/components/input/index.tsx
@@ -2,14 +2,17 @@ import { Container, SearchBar, Col, Row } from "@dataesr/dsfr-plus"
 import useUrl from "../../hooks/useUrl"
 
 const MATCHER_TYPES = [
-  { label: "Country", key: "country" },
-  { label: "ROR", key: "ror" },
-  { label: "RNSR", key: "rnsr" },
-  { label: "Paysage", key: "paysage" },
+  { label: "Country", key: "country", year: false },
+  { label: "ROR", key: "ror", year: false },
+  { label: "RNSR", key: "rnsr", year: true },
+  { label: "grid.ac", key: "grid", year: false },
 ]
 
+const YEARS = Array.from({ length: (2011 - 2023) / -1 + 1 }, (_, i) => 2023 + i * -1)
+
 export default function Input() {
-  const { currentQuery, currentMatcher, handleQueryChange, handleMatcherChange } = useUrl()
+  const { currentQuery, currentMatcher, currentYear, handleQueryChange, handleMatcherChange, handleYearChange } = useUrl()
+  const enableYear: boolean = MATCHER_TYPES.find((matcher) => matcher.key == currentMatcher).year
 
   return (
     <Container className="bg-input">
@@ -24,7 +27,7 @@ export default function Input() {
             onSearch={(value) => handleQueryChange(value.toLowerCase())}
           />
         </Col>
-        <Col xs="12" sm="4" lg="4">
+        <Col xs="12" sm="2" lg="2">
           <select
             className="fr-select"
             defaultValue={currentMatcher || "DEFAULT"}
@@ -40,6 +43,23 @@ export default function Input() {
             ))}
           </select>
         </Col>
+        <Col xs="12" sm="2" lg="2">
+          <select
+            className="fr-select"
+            defaultValue={currentYear || "DEFAULT"}
+            disabled={!enableYear}
+            onChange={(year) => handleYearChange(year.target.value)}
+          >
+            <option key="DEFAULT" value="DEFAULT" disabled>
+              Select a year
+            </option>
+            {YEARS.map((year) => (
+              <option key={year} value={year}>
+                {year}
+              </option>
+            ))}
+          </select>
+        </Col>
       </Row>
     </Container>
   )

diff --git a/project/front/src/components/results/index.tsx b/project/front/src/components/results/index.tsx
@@ -9,9 +9,9 @@ import Home from "../home"
 import { MatchIds } from "../../types/data"
 
 export default function Results() {
-  const { currentQuery, currentMatcher } = useUrl()
+  const { currentQuery, currentMatcher, currentYear } = useUrl()
   const [currentTitle, setTitle] = useState(currentQuery)
-  const { data, isFetching, error } = useMatch(currentQuery, currentMatcher)
+  const { data, isFetching, error } = useMatch(currentQuery, currentMatcher, currentYear)
 
   useEffect(() => setTitle(currentQuery), [currentQuery])
 
@@ -21,7 +21,7 @@ export default function Results() {
 
   if (isFetching) return <Fetching />
 
-  if (!data) return <div>no data?</div>
+  if (!data) return null
 
   console.log("data", data)
 

diff --git a/project/front/src/hooks/useMatch.tsx b/project/front/src/hooks/useMatch.tsx
@@ -2,8 +2,9 @@ import { useQuery } from "@tanstack/react-query"
 import { useMemo } from "react"
 import { API_MATCH_URL } from "../config/api"
 
-const fetchMatch = async (query: string, matcher: string) => {
+const fetchMatch = async (query: string, matcher: string, year: string) => {
   const body = { type: matcher, query: query }
+  if (year) body["year"] = year
 
   const response = await fetch(API_MATCH_URL, {
     method: "POST",
@@ -16,10 +17,10 @@ const fetchMatch = async (query: string, matcher: string) => {
   return data
 }
 
-export default function useMatch(query: string, matcher: string) {
+export default function useMatch(query: string, matcher: string, year: string) {
   const { data, error, isFetching } = useQuery({
-    queryKey: ["match", query, matcher],
-    queryFn: () => fetchMatch(query, matcher),
+    queryKey: ["match", query, matcher, year],
+    queryFn: () => fetchMatch(query, matcher, year),
     staleTime: 1000 * 60 * 5,
   })
 

diff --git a/project/front/src/hooks/useUrl.tsx b/project/front/src/hooks/useUrl.tsx
@@ -5,6 +5,7 @@ export default function useUrl() {
   const [searchParams, setSearchParams] = useSearchParams()
   const currentQuery = searchParams.get("q") || ""
   const currentMatcher = searchParams.get("matcher") || ""
+  const currentYear = searchParams.get("year") || ""
 
   const handleQueryChange = useCallback(
     (query: string) => {
@@ -17,6 +18,15 @@ export default function useUrl() {
   const handleMatcherChange = useCallback(
     (matcher: string) => {
       searchParams.set("matcher", matcher)
+      searchParams.delete("year")
+      setSearchParams(searchParams)
+    },
+    [searchParams, setSearchParams]
+  )
+
+  const handleYearChange = useCallback(
+    (year: string) => {
+      searchParams.set("year", year)
       setSearchParams(searchParams)
     },
     [searchParams, setSearchParams]
@@ -26,10 +36,12 @@ export default function useUrl() {
     return {
       currentQuery,
       currentMatcher,
+      currentYear,
       handleQueryChange,
       handleMatcherChange,
+      handleYearChange,
     }
-  }, [currentQuery, currentMatcher, handleQueryChange, handleMatcherChange])
+  }, [currentQuery, currentMatcher, currentYear, handleQueryChange, handleMatcherChange, handleYearChange])
 
   return values
 }