Merge pull request #9 from pehovorka/dev

3.4.0 Feature/display district names
pehovorka · Jul 3, 2021 · 2c206ea · 2c206ea
2 parents 24d99fd + e1a8706
commit 2c206ea
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "covid-obce",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "private": true,
   "homepage": "https://covidvobcich.cz",
   "dependencies": {

diff --git a/src/components/layout/appbar/SearchField/SearchField.js b/src/components/layout/appbar/SearchField/SearchField.js
@@ -12,7 +12,7 @@ import {
   SET_SNACKBAR_MESSAGE,
 } from "../../../../utils/municipalitiesReducer";
 import { MUNICIPALITY_NAMES_SEARCH_QUERY } from "../../../../utils/queries";
-import { useStyles } from "./SearchField.style";
+import { useSearchFieldStyles, useOptionsStyles } from "./SearchField.style";
 
 export default function SearchField({ inputRef }) {
   const dispatch = useMunicipalitiesDispatch();
@@ -36,7 +36,8 @@ export default function SearchField({ inputRef }) {
     }
   }, [obce.data, obce.loading, obce.error, inputValue, dispatch]);
 
-  const classes = useStyles();
+  const searchFieldStyles = useSearchFieldStyles();
+  const optionsStyles = useOptionsStyles();
 
   const filterOptions = createFilterOptions({
     trim: true,
@@ -45,7 +46,7 @@ export default function SearchField({ inputRef }) {
   return (
     <Autocomplete
       id="obce-search"
-      classes={classes}
+      classes={searchFieldStyles}
       openOnFocus
       noOptionsText={"Žádné výsledky"}
       loadingText={"Načítám..."}
@@ -91,6 +92,12 @@ export default function SearchField({ inputRef }) {
       clearOnBlur={false}
       autoHighlight={true}
       filterOptions={filterOptions}
+      renderOption={(option) => (
+        <>
+          <span>{option.obec_nazev}</span>
+          <span className={optionsStyles.districtText}>(okres {option.okres_nazev})</span>
+        </>
+      )}
       renderInput={(params) => (
         <TextField
           {...params}

diff --git a/src/components/layout/appbar/SearchField/SearchField.style.js b/src/components/layout/appbar/SearchField/SearchField.style.js
@@ -1,6 +1,6 @@
 import { makeStyles } from "@material-ui/core";
 
-export const useStyles = makeStyles(() => ({
+export const useSearchFieldStyles = makeStyles(() => ({
   inputRoot: {
     color: "#fff",
   },
@@ -9,5 +9,13 @@ export const useStyles = makeStyles(() => ({
   },
   clearIndicator: {
     color: "#fff",
-  },
+  }
+}));
+
+export const useOptionsStyles = makeStyles(() => ({
+  districtText: {
+    color: "#666",
+    marginLeft: ".3rem",
+    fontSize: ".8rem"
+  }
 }));
diff --git a/src/utils/queries.js b/src/utils/queries.js
@@ -24,6 +24,7 @@ export const MUNICIPALITY_NAMES_SEARCH_QUERY = gql`
     obce(obec_nazev: $obec_nazev, datum: "2020-11-05") {
       obec_nazev
       obec_kod
+      okres_nazev
     }
   }
 `;