From 6ef3986812ee9a00d101398af83f89e48a6d0081 Mon Sep 17 00:00:00 2001
From: KhadijaMahanga <khadijamahanga@y7mail.com>
Date: Wed, 17 Jun 2020 12:31:09 +0300
Subject: [PATCH 1/9] update ES_URL

---
 src/config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config.js b/src/config.js
index da26bb26..bce07299 100644
--- a/src/config.js
+++ b/src/config.js
@@ -31,7 +31,7 @@ Disallow:
   ES_URL:
     process.env.NODE_ENV === "development"
       ? "http://localhost:9200"
-      : "https://search-cfa-openafrica-z56l24lkfbv5erjxxs76sevr3i.eu-west-1.es.amazonaws.com",
+      : "https://search.hurumap.org",
   MAPIT_URL: "https://mapit.hurumap.org",
   DEFAULT_LANG: "en",
   country: {},

From 193d6013778d500f6d7929092b4e4b0a60cf0c83 Mon Sep 17 00:00:00 2001
From: KhadijaMahanga <khadijamahanga@y7mail.com>
Date: Thu, 18 Jun 2020 09:42:00 +0300
Subject: [PATCH 2/9] mobile design + onclicks

---
 package.json                                  |   2 +-
 .../Navigation/DesktopNavigation/index.js     |   2 +-
 .../Navigation/MobileNavigation/index.js      | 104 ++++++++++--------
 src/components/Search.js                      |  88 +++++++++------
 src/config.js                                 |   2 +-
 yarn.lock                                     |  18 +--
 6 files changed, 127 insertions(+), 89 deletions(-)

diff --git a/package.json b/package.json
index 0f1a6347..724c7cc8 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "dependencies": {
     "@apollo/react-hooks": "^3.1.3",
     "@apollo/react-ssr": "^3.1.5",
-    "@appbaseio/reactivesearch": "^3.6.1",
+    "@appbaseio/reactivesearch": "^3.11.4",
     "@commons-ui/core": "^0.0.1-alpha.21",
     "@hurumap-ui/charts": "^0.3.5-alpha.14",
     "@hurumap-ui/content": "^0.3.5-alpha.23",
diff --git a/src/components/Navigation/DesktopNavigation/index.js b/src/components/Navigation/DesktopNavigation/index.js
index e4c2c94f..2b2b5744 100644
--- a/src/components/Navigation/DesktopNavigation/index.js
+++ b/src/components/Navigation/DesktopNavigation/index.js
@@ -128,7 +128,7 @@ function DesktopNavigation({ country, countries, navigation, ...props }) {
               ))}
             </Grid>
             <Grid item md={3}>
-              <Search size="large" />
+              <Search isMobile={false} />
             </Grid>
             <Grid item md={1} container justify="flex-start">
               <Link
diff --git a/src/components/Navigation/MobileNavigation/index.js b/src/components/Navigation/MobileNavigation/index.js
index dcc76e8e..f44a0b04 100644
--- a/src/components/Navigation/MobileNavigation/index.js
+++ b/src/components/Navigation/MobileNavigation/index.js
@@ -20,8 +20,10 @@ import MenuIcon from "@material-ui/icons/Menu";
 
 import IconButtonLink from "components/Link/IconButton";
 import Logo from "components/Navigation/Logo";
+import Search from "components/Search";
 
 import NavigationList from "./NavigationList";
+import { typography } from "@material-ui/system";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -73,6 +75,10 @@ const useStyles = makeStyles((theme) => ({
   link: {
     color: "white",
   },
+  searchIcon: {
+    color: "#D6D6D6",
+    fontSize: theme.typography.pxToRem(20),
+  }
 }));
 
 const Transition = React.forwardRef(function Transition(props, ref) {
@@ -82,12 +88,14 @@ const Transition = React.forwardRef(function Transition(props, ref) {
 function MobileNavigation({ country, countries, navigation, ...props }) {
   const classes = useStyles(props);
   const [open, setOpen] = React.useState(false);
+  const [showSearchBar, setShowSearchBar] = React.useState(false);
   const [dataNavigation, ...otherNavigations] = navigation || [];
   const handleClickOpen = () => {
     setOpen(true);
   };
   const handleClose = () => {
     setOpen(false);
+    setShowSearchBar(false);
   };
 
   return (
@@ -96,6 +104,18 @@ function MobileNavigation({ country, countries, navigation, ...props }) {
         <Logo />
       </Grid>
       <Grid item>
+        <IconButtonLink
+          aria-label="Open drawer"
+          className={classes.searchIcon}
+          edge="start"
+          href="/#"
+          onClick={() => {
+            setShowSearchBar(true);
+            handleClickOpen();
+          }}
+        >
+          <SearchIcon />
+        </IconButtonLink>
         <IconButtonLink
           aria-label="Open drawer"
           color="secondary"
@@ -103,7 +123,7 @@ function MobileNavigation({ country, countries, navigation, ...props }) {
           href="/#"
           onClick={handleClickOpen}
         >
-          <MenuIcon fontSize="large" />
+          <MenuIcon />
         </IconButtonLink>
         <Dialog
           fullScreen
@@ -113,50 +133,46 @@ function MobileNavigation({ country, countries, navigation, ...props }) {
           classes={{ root: classes.dialog, paper: classes.dialogPaper }}
         >
           <DialogActions className={classes.dialogActions}>
-            <IconButton
-              aria-label="search"
-              edge="start"
-              href="/search"
-              className={classes.button}
-            >
-              <SearchIcon fontSize="large" />
-            </IconButton>
-            <Grid container justify="flex-end" alignItems="center" spacing={1}>
-              <Grid item>
-                <Link
-                  href="/#"
-                  variant="overline"
-                  underline="none"
-                  className={classNames(
-                    classes.button,
-                    classes.languageButton,
-                    "active"
-                  )}
-                >
-                  En
-                </Link>
+            { showSearchBar ? (
+              <Search isMobile />
+            ): (
+              <Grid container justify="flex-start" alignItems="center" spacing={2}>
+                <Grid item>
+                  <Link
+                    href="/#"
+                    variant="overline"
+                    underline="none"
+                    className={classNames(
+                      classes.button,
+                      classes.languageButton,
+                      "active"
+                    )}
+                  >
+                    En
+                  </Link>
+                </Grid>
+                <Grid item>
+                  <Link
+                    href="/#"
+                    variant="overline"
+                    underline="none"
+                    className={classNames(classes.button, classes.languageButton)}
+                  >
+                    Fr
+                  </Link>
+                </Grid>
+                <Grid item>
+                  <Link
+                    href="/#"
+                    variant="overline"
+                    underline="none"
+                    className={classNames(classes.button, classes.languageButton)}
+                  >
+                    عربى
+                  </Link>
+                </Grid>
               </Grid>
-              <Grid item>
-                <Link
-                  href="/#"
-                  variant="overline"
-                  underline="none"
-                  className={classNames(classes.button, classes.languageButton)}
-                >
-                  Fr
-                </Link>
-              </Grid>
-              <Grid item>
-                <Link
-                  href="/#"
-                  variant="overline"
-                  underline="none"
-                  className={classNames(classes.button, classes.languageButton)}
-                >
-                  عربى
-                </Link>
-              </Grid>
-            </Grid>
+            )}
             <IconButton
               aria-label="close drawer"
               edge="start"
diff --git a/src/components/Search.js b/src/components/Search.js
index f0b7c8a1..90035bdd 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -4,21 +4,29 @@ import PropTypes from "prop-types";
 import { makeStyles } from "@material-ui/core/styles";
 import { IconButton, InputBase, Paper } from "@material-ui/core";
 import { Search as SearchIcon } from "@material-ui/icons";
+import { ReactiveBase, DataSearch } from '@appbaseio/reactivesearch';
+
+import config from 'config';
 
 const useStyles = makeStyles(({ breakpoints, typography }) => ({
   root: {
     alignItems: "center",
-    backgroundColor: "#EEEEEE",
-    border: "1px solid #9D9C9C",
-    borderRadius: 10,
-    boxShadow: "none",
     display: "flex",
     width: "100%",
   },
   input: {
+    backgroundColor: "#EEEEEE !important",
+    border: "1px solid #707070 !important",
+    borderRadius: typography.pxToRem(10),
+    boxShadow: "none",
     color: "#9D9C9C",
     flex: 1,
-    fontSize: typography.pxToRem(20),
+    fontSize: "0.8125rem !important",
+    [breakpoints.up("md")]: {
+      border: "1px solid #9D9C9C !important",
+      fontSize: "1.25rem !important",
+      lineHeight: typography.pxToRem(38/20),
+    },
   },
   inputInput: {
     flex: 1,
@@ -37,18 +45,14 @@ const useStyles = makeStyles(({ breakpoints, typography }) => ({
   },
   iconButton: {
     color: "#9D9C9C",
-    [breakpoints.up("md")]: {
-      paddingBottom: 0,
-      paddingTop: 0,
-    },
-    [breakpoints.up("xl")]: {
-      paddingBottom: `${typography.pxToRem(7)}`,
-      paddingTop: `${typography.pxToRem(7)}`,
-    },
+    fontSize: "1.5rem",
   },
+  inputIcon: {
+    top: typography.pxToRem(10),
+  }
 }));
 
-function Search({ ariaLabel, onClick, onChange, placeholder, ...props }) {
+function Search({ ariaLabel, isMobile, onClick, onChange, placeholder, ...props }) {
   const classes = useStyles(props);
   const [term, setTerm] = useState();
   const handleChange = (e) => {
@@ -75,32 +79,50 @@ function Search({ ariaLabel, onClick, onChange, placeholder, ...props }) {
   };
 
   return (
-    <Paper component="form" className={classes.root}>
-      <InputBase
-        inputProps={{ "aria-label": ariaLabel }}
-        onChange={handleChange}
-        onKeyPress={handleKeyPress}
-        placeholder={placeholder}
-        classes={{
-          root: classes.input,
-          input: classes.inputInput,
+    <ReactiveBase app="outbreak" url={config.ES_URL}>
+      <DataSearch
+        componentId="autoSuggest"
+        dataField={['post_title', 'post_content']}
+        highlight
+        autosuggest
+        queryFormat="and"
+        placeholder="Search for issues, topics, etc.."
+        showIcon={isMobile}
+        iconPosition="right"
+        icon={<SearchIcon className={classes.iconButton} />}
+        innerClass={{
+          input: classes.input,
+          icon: classes.inputIcon,
         }}
-        {...props}
-      />
-      <IconButton
-        onClick={handleClick}
-        className={classes.iconButton}
-        aria-label="search"
-      >
-        <SearchIcon style={{ fontSize: 42 }} />
-      </IconButton>
-    </Paper>
+        />
+      {/* <Paper component="form" className={classes.root}>
+        <InputBase
+          inputProps={{ "aria-label": ariaLabel }}
+          onChange={handleChange}
+          onKeyPress={handleKeyPress}
+          placeholder={placeholder}
+          classes={{
+            root: classes.input,
+            input: classes.inputInput,
+          }}
+          {...props}
+        />
+        <IconButton
+          onClick={handleClick}
+          className={classes.iconButton}
+          aria-label="search"
+        >
+          <SearchIcon style={{ fontSize: 42 }} />
+        </IconButton>
+      </Paper> */}
+    </ReactiveBase>
   );
 }
 
 Search.propTypes = {
   ariaLabel: PropTypes.string,
   placeholder: PropTypes.string,
+  isMobile: PropTypes.bool.isRequired,
 };
 
 Search.defaultProps = {
diff --git a/src/config.js b/src/config.js
index bce07299..ed7fc5cc 100644
--- a/src/config.js
+++ b/src/config.js
@@ -30,7 +30,7 @@ Disallow:
   WP_HURUMAP_DATA_API: `${WP_BACKEND_URL}/wp-json/hurumap-data`,
   ES_URL:
     process.env.NODE_ENV === "development"
-      ? "http://localhost:9200"
+      ? "https://search.hurumap.org"
       : "https://search.hurumap.org",
   MAPIT_URL: "https://mapit.hurumap.org",
   DEFAULT_LANG: "en",
diff --git a/yarn.lock b/yarn.lock
index ca3db63e..ce3c0b24 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -74,10 +74,10 @@
     "@apollo/react-hooks" "^3.1.5"
     tslib "^1.10.0"
 
-"@appbaseio/reactivecore@9.6.6":
-  version "9.6.6"
-  resolved "https://registry.yarnpkg.com/@appbaseio/reactivecore/-/reactivecore-9.6.6.tgz#f2e1f13a96b9c34139a286ab2e067d3fef0eb4e6"
-  integrity sha512-2YZn6F+60Lbz5NFl/SDmj3w9Y80fGSU4unmUJQCcwE8juDRrtwAEehODoto2QbeMxE/dRw2D65sToNILnl45hw==
+"@appbaseio/reactivecore@9.6.10":
+  version "9.6.10"
+  resolved "https://registry.yarnpkg.com/@appbaseio/reactivecore/-/reactivecore-9.6.10.tgz#ce1c88c318aec7a36b81340a23856707363d3f18"
+  integrity sha512-Icvk1cSQeZ5W10L6kwqwbIBT831WFOLrVJtm7r3dfzuCdu2ktEnEHH+9ZRgj4wlhpTnxQ+9d31D1etiPcgPr4Q==
   dependencies:
     cross-fetch "^3.0.4"
     prop-types "^15.6.0"
@@ -85,12 +85,12 @@
     redux-thunk "^2.3.0"
     xdate "^0.8.2"
 
-"@appbaseio/reactivesearch@^3.6.1":
-  version "3.10.1"
-  resolved "https://registry.yarnpkg.com/@appbaseio/reactivesearch/-/reactivesearch-3.10.1.tgz#60db7dc3ba0c2405bd0c34638c118da0923c8523"
-  integrity sha512-zk6tM5u2BhZOfLh2fCooF1WoCdH9GuHLejjX3IuWZrhRAsP3ni6/s/wuAFkLIKgd1iDj0DddNXWsB3gSxEi5cg==
+"@appbaseio/reactivesearch@^3.11.4":
+  version "3.11.4"
+  resolved "https://registry.yarnpkg.com/@appbaseio/reactivesearch/-/reactivesearch-3.11.4.tgz#0d2aa48ac902409d7245bd8c9c4b8ac3cee15da3"
+  integrity sha512-a2Bhsk0+R+J2wE91z7J6rrJOnACpNvfTeeHE79RX9QVSmhgCgcinr1/WahwUvsg7zpkTkKDGRwxvmMuVspITUw==
   dependencies:
-    "@appbaseio/reactivecore" "9.6.6"
+    "@appbaseio/reactivecore" "9.6.10"
     "@emotion/core" "^10.0.28"
     "@emotion/styled" "^10.0.27"
     appbase-js "^4.1.0"

From ca11569450f33eca06c32d8c2cc1f3bc89dc1f36 Mon Sep 17 00:00:00 2001
From: KhadijaMahanga <khadijamahanga@y7mail.com>
Date: Thu, 18 Jun 2020 09:56:32 +0300
Subject: [PATCH 3/9] autocomplete

---
 src/components/Search.js        | 109 +++++++++++++++++++-------------
 src/utils/sliceMultiLangData.js |  16 +++++
 2 files changed, 82 insertions(+), 43 deletions(-)
 create mode 100644 src/utils/sliceMultiLangData.js

diff --git a/src/components/Search.js b/src/components/Search.js
index 90035bdd..9f0499a2 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -1,11 +1,20 @@
-import React, { useState } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 
+import {
+  Grid,
+  MenuList,
+  Tooltip,
+  Typography,
+  MenuItem
+} from '@material-ui/core';
+
 import { makeStyles } from "@material-ui/core/styles";
-import { IconButton, InputBase, Paper } from "@material-ui/core";
 import { Search as SearchIcon } from "@material-ui/icons";
 import { ReactiveBase, DataSearch } from '@appbaseio/reactivesearch';
+import sliceMultiLangData from 'utils/sliceMultiLangData';
 
+import { useRouter } from 'next/router';
 import config from 'config';
 
 const useStyles = makeStyles(({ breakpoints, typography }) => ({
@@ -54,27 +63,14 @@ const useStyles = makeStyles(({ breakpoints, typography }) => ({
 
 function Search({ ariaLabel, isMobile, onClick, onChange, placeholder, ...props }) {
   const classes = useStyles(props);
-  const [term, setTerm] = useState();
-  const handleChange = (e) => {
-    setTerm(e.target.value);
-    if (onChange) {
-      onChange(e);
-    }
-  };
-  const handleClick = (e) => {
-    if (onClick) {
-      const ev = e;
-      ev.target.value = term;
-      onClick(ev);
-    }
-  };
-  const handleKeyPress = (e) => {
-    if (e.key === "Enter") {
-      // Do code here
-      e.preventDefault();
-      if (onClick) {
-        onClick(e);
-      }
+  const router = useRouter();
+
+  const handleInput = queryTerm => {
+    if (queryTerm.length > 0) {
+      router.push({
+        pathname: '/search',
+        query: { q: queryTerm, lang: language }
+      });
     }
   };
 
@@ -94,27 +90,54 @@ function Search({ ariaLabel, isMobile, onClick, onChange, placeholder, ...props
           input: classes.input,
           icon: classes.inputIcon,
         }}
+        onKeyDown={e => {
+          if (e.key === 'Enter') {
+            handleInput(e.target.value);
+          }
+        }}
+        onValueSelected={value => handleInput(value)}
+        parseSuggestion={suggestion => ({
+          label: (
+            <Typography color="textSecondary" noWrap>
+              {sliceMultiLangData(
+                suggestion.source.post_title,
+                language
+              )}
+            </Typography>
+          ),
+          value: sliceMultiLangData(
+            suggestion.source.post_title,
+            language
+          ),
+          source: suggestion.source
+        })}
+        render={({
+          data,
+          value,
+          downshiftProps: { isOpen, getItemProps }
+        }) => {
+          return isOpen && Boolean(value.length) ? (
+            <Grid container justify="flex-end">
+              <MenuList className={classes.searchResults}>
+                {data.slice(0, 10).map(suggestion => (
+                  <MenuItem
+                    key={`${suggestion.value}-${suggestion._click_id}`} // eslint-disable-line no-underscore-dangle
+                    {...getItemProps({ item: suggestion })}
+                  >
+                    <Tooltip
+                      title={suggestion.value}
+                      placement="bottom-start"
+                      classes={{ tooltip: classes.tooltip }}
+                    >
+                      {suggestion.label}
+                    </Tooltip>
+                  </MenuItem>
+                ))}
+              </MenuList>
+            </Grid>
+          ) : null;
+        }}
         />
-      {/* <Paper component="form" className={classes.root}>
-        <InputBase
-          inputProps={{ "aria-label": ariaLabel }}
-          onChange={handleChange}
-          onKeyPress={handleKeyPress}
-          placeholder={placeholder}
-          classes={{
-            root: classes.input,
-            input: classes.inputInput,
-          }}
-          {...props}
-        />
-        <IconButton
-          onClick={handleClick}
-          className={classes.iconButton}
-          aria-label="search"
-        >
-          <SearchIcon style={{ fontSize: 42 }} />
-        </IconButton>
-      </Paper> */}
     </ReactiveBase>
   );
 }
diff --git a/src/utils/sliceMultiLangData.js b/src/utils/sliceMultiLangData.js
new file mode 100644
index 00000000..6f11028c
--- /dev/null
+++ b/src/utils/sliceMultiLangData.js
@@ -0,0 +1,16 @@
+export default function sliceMultiLangData(value, lang) {
+  const langTerm = `[:${lang}]`;
+  const defaultLangTerm = '[:en]';
+
+  const availLangTerm = value.includes(langTerm) ? langTerm : defaultLangTerm;
+
+  const langIndex = value.indexOf(availLangTerm);
+
+  if (langIndex !== -1) {
+    const startIndex = langIndex + availLangTerm.length;
+    const endIndex = value.indexOf('[:', startIndex);
+
+    return value.slice(startIndex, endIndex);
+  }
+  return value;
+}

From aef6d45e1ccbd6af678c185329b9b90224714d67 Mon Sep 17 00:00:00 2001
From: KhadijaMahanga <khadijamahanga@y7mail.com>
Date: Thu, 18 Jun 2020 10:06:17 +0300
Subject: [PATCH 4/9] background image

---
 src/components/Hero/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Hero/index.js b/src/components/Hero/index.js
index d426a356..98338523 100644
--- a/src/components/Hero/index.js
+++ b/src/components/Hero/index.js
@@ -29,7 +29,7 @@ const useStyles = makeStyles(({ breakpoints, typography, widths }) => ({
     }
     return {
       flexGrow: 1,
-      backgroundImage: `url(${coronaImage})`,
+      backgroundImage: `url(${props.heroContent && props.heroContent.background_image? props.heroContent.background_image: coronaImage})`,
       backgroundRepeat: "no-repeat",
       backgroundPosition: "90% 2%",
       backgroundSize: "50%",
@@ -139,7 +139,7 @@ function Hero({ heroContent, isResearch, ...props }) {
     heroContent.component.length &&
     heroContent.component[0].acf_fc_layout === "image";
 
-  const classes = useStyles({ ...props, hasCarousel });
+  const classes = useStyles({ ...props, hasCarousel, heroContent });
 
   if (!heroContent) {
     return null;

From f8e689d2e66c54436cbb77db50be92e02a712110 Mon Sep 17 00:00:00 2001
From: KhadijaMahanga <khadijamahanga@y7mail.com>
Date: Thu, 18 Jun 2020 10:48:46 +0300
Subject: [PATCH 5/9] fix background position

---
 src/components/Hero/index.js | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/components/Hero/index.js b/src/components/Hero/index.js
index 98338523..9cc3f31e 100644
--- a/src/components/Hero/index.js
+++ b/src/components/Hero/index.js
@@ -31,19 +31,21 @@ const useStyles = makeStyles(({ breakpoints, typography, widths }) => ({
       flexGrow: 1,
       backgroundImage: `url(${props.heroContent && props.heroContent.background_image? props.heroContent.background_image: coronaImage})`,
       backgroundRepeat: "no-repeat",
-      backgroundPosition: "90% 2%",
-      backgroundSize: "50%",
+      backgroundPosition: "90% 5%",
+      backgroundSize: `${typography.pxToRem(136)} ${typography.pxToRem(127)}`,
       [breakpoints.up("md")]: {
-        backgroundPosition: "20% 30%",
-        backgroundSize: "75% 55%",
+        backgroundPosition: "50% 20%",
         padding: `${typography.pxToRem(20)} 0`,
+        backgroundSize: `${typography.pxToRem((widths.values.md * 587)/widths.values.xl)} ${typography.pxToRem((widths.values.md * 551)/widths.values.xl)}`,
       },
       [breakpoints.up("lg")]: {
-        backgroundPosition: "20% 90%",
-        backgroundSize: "70% 75%",
+        backgroundPosition: "40% 60%",
+        backgroundSize: `${typography.pxToRem((widths.values.lg * 587)/widths.values.xl)} ${typography.pxToRem((widths.values.lg * 551)/widths.values.xl)}`,
       },
       [breakpoints.up("xl")]: {
+        backgroundPosition: "40% 80%",
         padding: `${typography.pxToRem(59)} 0 ${typography.pxToRem(57)}`,
+        backgroundSize: `${typography.pxToRem(587)} ${typography.pxToRem(551)}`,
       },
     };
   },
@@ -64,19 +66,19 @@ const useStyles = makeStyles(({ breakpoints, typography, widths }) => ({
     },
   },
   heroImage: {
-    width: "315px",
-    height: "250px",
+    width: typography.pxToRem(315),
+    height: typography.pxToRem(250),
     [breakpoints.up("md")]: {
-      width: (widths.values.md * 536) / widths.values.xl,
-      height: (widths.values.md * 426) / widths.values.xl,
+      width: typography.pxToRem((widths.values.md * 536) / widths.values.xl),
+      height: typography.pxToRem((widths.values.md * 426) / widths.values.xl),
     },
     [breakpoints.up("lg")]: {
-      width: (widths.values.lg * 536) / widths.values.xl,
-      height: (widths.values.lg * 426) / widths.values.xl,
+      width: typography.pxToRem((widths.values.lg * 536) / widths.values.xl),
+      height: typography.pxToRem((widths.values.lg * 426) / widths.values.xl),
     },
     [breakpoints.up("xl")]: {
-      width: "536px",
-      height: "426px",
+      width: typography.pxToRem(536),
+      height: typography.pxToRem(426),
     },
   },
   title: {

From 8d9063b05fd4e24abca71e3e8779a29cc0faa5bb Mon Sep 17 00:00:00 2001
From: KhadijaMahanga <khadijamahanga@y7mail.com>
Date: Thu, 18 Jun 2020 17:31:02 +0300
Subject: [PATCH 6/9] search result styling

---
 src/components/Search.js | 88 ++++++++++++++++++++++------------------
 src/config.js            |  2 +-
 2 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/src/components/Search.js b/src/components/Search.js
index 9f0499a2..d68a0a82 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -14,10 +14,9 @@ import { Search as SearchIcon } from "@material-ui/icons";
 import { ReactiveBase, DataSearch } from '@appbaseio/reactivesearch';
 import sliceMultiLangData from 'utils/sliceMultiLangData';
 
-import { useRouter } from 'next/router';
 import config from 'config';
 
-const useStyles = makeStyles(({ breakpoints, typography }) => ({
+const useStyles = makeStyles(({ breakpoints, palette, typography, widths }) => ({
   root: {
     alignItems: "center",
     display: "flex",
@@ -37,42 +36,60 @@ const useStyles = makeStyles(({ breakpoints, typography }) => ({
       lineHeight: typography.pxToRem(38/20),
     },
   },
-  inputInput: {
-    flex: 1,
-    [breakpoints.up("md")]: {
-      paddingBottom: typography.pxToRem(7),
-      paddingLeft: typography.pxToRem(9),
-      paddingRight: typography.pxToRem(9),
-      paddingTop: typography.pxToRem(7),
-    },
-    [breakpoints.up("xl")]: {
-      paddingBottom: typography.pxToRem(15),
-      paddingLeft: typography.pxToRem(19),
-      paddingRight: typography.pxToRem(19),
-      paddingTop: typography.pxToRem(13),
-    },
-  },
   iconButton: {
     color: "#9D9C9C",
     fontSize: "1.5rem",
   },
   inputIcon: {
     top: typography.pxToRem(10),
-  }
+  },
+  searchBar: {
+    position: "relative",
+    maxWidth: typography.pxToRem(247),
+    [breakpoints.up("md")]: {
+      maxWidth: typography.pxToRem((widths.values.md * 390) /widths.values.xl),
+    },
+    [breakpoints.up("lg")]: {
+      maxWidth: typography.pxToRem((widths.values.lg * 390) /widths.values.xl),
+    },
+    [breakpoints.up("xl")]: {
+      maxWidth: typography.pxToRem(390),
+    },
+  },
+  searchResults: {
+    backgroundColor: "#FFFFFF",
+    border: "1px solid #707070",
+    position: "absolute",
+    boxShadow: "none",
+    marginTop: '1.25rem',
+    padding: '0.625rem',
+    zIndex: 1,
+    maxWidth: typography.pxToRem(247),
+    [breakpoints.up("md")]: {
+      maxWidth: typography.pxToRem((widths.values.md * 390) /widths.values.xl),
+    },
+    [breakpoints.up("lg")]: {
+      maxWidth: typography.pxToRem((widths.values.lg * 390) /widths.values.xl),
+    },
+    [breakpoints.up("xl")]: {
+      maxWidth: typography.pxToRem(390),
+    },
+    '& > li > p': {
+      fontFamily: typography.fontText,
+      fontSize: '1rem',
+      color: "#170F49",
+    },
+    [breakpoints.up('md')]: {
+      backgroundColor: "#EEEEEE",
+      '& > li > p': {
+        color: "#9D9C9C",
+      },
+    }
+  },
 }));
 
 function Search({ ariaLabel, isMobile, onClick, onChange, placeholder, ...props }) {
   const classes = useStyles(props);
-  const router = useRouter();
-
-  const handleInput = queryTerm => {
-    if (queryTerm.length > 0) {
-      router.push({
-        pathname: '/search',
-        query: { q: queryTerm, lang: language }
-      });
-    }
-  };
 
   return (
     <ReactiveBase app="outbreak" url={config.ES_URL}>
@@ -84,30 +101,25 @@ function Search({ ariaLabel, isMobile, onClick, onChange, placeholder, ...props
         queryFormat="and"
         placeholder="Search for issues, topics, etc.."
         showIcon={isMobile}
+        className={classes.searchBar}
         iconPosition="right"
         icon={<SearchIcon className={classes.iconButton} />}
         innerClass={{
           input: classes.input,
           icon: classes.inputIcon,
         }}
-        onKeyDown={e => {
-          if (e.key === 'Enter') {
-            handleInput(e.target.value);
-          }
-        }}
-        onValueSelected={value => handleInput(value)}
         parseSuggestion={suggestion => ({
           label: (
             <Typography color="textSecondary" noWrap>
               {sliceMultiLangData(
                 suggestion.source.post_title,
-                language
+                config.DEFAULT_LANG
               )}
             </Typography>
           ),
           value: sliceMultiLangData(
             suggestion.source.post_title,
-            language
+            config.DEFAULT_LANG
           ),
           source: suggestion.source
         })}
@@ -116,8 +128,7 @@ function Search({ ariaLabel, isMobile, onClick, onChange, placeholder, ...props
           value,
           downshiftProps: { isOpen, getItemProps }
         }) => {
-          return isOpen && Boolean(value.length) ? (
-            <Grid container justify="flex-end">
+          return isOpen && Boolean(value.length) && Boolean(data.length) ? (
               <MenuList className={classes.searchResults}>
                 {data.slice(0, 10).map(suggestion => (
                   <MenuItem
@@ -134,7 +145,6 @@ function Search({ ariaLabel, isMobile, onClick, onChange, placeholder, ...props
                   </MenuItem>
                 ))}
               </MenuList>
-            </Grid>
           ) : null;
         }}
         />
diff --git a/src/config.js b/src/config.js
index ed7fc5cc..bce07299 100644
--- a/src/config.js
+++ b/src/config.js
@@ -30,7 +30,7 @@ Disallow:
   WP_HURUMAP_DATA_API: `${WP_BACKEND_URL}/wp-json/hurumap-data`,
   ES_URL:
     process.env.NODE_ENV === "development"
-      ? "https://search.hurumap.org"
+      ? "http://localhost:9200"
       : "https://search.hurumap.org",
   MAPIT_URL: "https://mapit.hurumap.org",
   DEFAULT_LANG: "en",

From 4140040f3177ff827b559a6c24c37cafedbf5279 Mon Sep 17 00:00:00 2001
From: KhadijaMahanga <khadijamahanga@y7mail.com>
Date: Thu, 18 Jun 2020 17:45:19 +0300
Subject: [PATCH 7/9] minor fixes

---
 src/components/Search.js | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/components/Search.js b/src/components/Search.js
index d68a0a82..92e665fd 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -2,7 +2,6 @@ import React from "react";
 import PropTypes from "prop-types";
 
 import {
-  Grid,
   MenuList,
   Tooltip,
   Typography,
@@ -16,7 +15,7 @@ import sliceMultiLangData from 'utils/sliceMultiLangData';
 
 import config from 'config';
 
-const useStyles = makeStyles(({ breakpoints, palette, typography, widths }) => ({
+const useStyles = makeStyles(({ breakpoints, typography, widths }) => ({
   root: {
     alignItems: "center",
     display: "flex",
@@ -74,18 +73,16 @@ const useStyles = makeStyles(({ breakpoints, palette, typography, widths }) => (
     [breakpoints.up("xl")]: {
       maxWidth: typography.pxToRem(390),
     },
-    '& > li > p': {
-      fontFamily: typography.fontText,
-      fontSize: '1rem',
-      color: "#170F49",
-    },
     [breakpoints.up('md')]: {
       backgroundColor: "#EEEEEE",
-      '& > li > p': {
-        color: "#9D9C9C",
-      },
     }
   },
+  text: {
+    color: "#170F49",
+    [breakpoints.up("md")]: {
+      color: "#9D9C9C",
+    },
+  },
 }));
 
 function Search({ ariaLabel, isMobile, onClick, onChange, placeholder, ...props }) {
@@ -110,7 +107,7 @@ function Search({ ariaLabel, isMobile, onClick, onChange, placeholder, ...props
         }}
         parseSuggestion={suggestion => ({
           label: (
-            <Typography color="textSecondary" noWrap>
+            <Typography variant="caption" className={classes.text} noWrap>
               {sliceMultiLangData(
                 suggestion.source.post_title,
                 config.DEFAULT_LANG

From 1cc8f054fcc8a729d1e22ffffe58e4d78b198a96 Mon Sep 17 00:00:00 2001
From: KhadijaMahanga <khadijamahanga@y7mail.com>
Date: Thu, 18 Jun 2020 17:47:16 +0300
Subject: [PATCH 8/9] yarn lint fixes

---
 src/components/FeaturedData/index.js          |  4 +-
 src/components/Hero/index.js                  | 14 +++-
 .../Navigation/MobileNavigation/index.js      | 24 ++++--
 src/components/Search.js                      | 84 +++++++++----------
 src/utils/sliceMultiLangData.js               |  4 +-
 5 files changed, 73 insertions(+), 57 deletions(-)

diff --git a/src/components/FeaturedData/index.js b/src/components/FeaturedData/index.js
index 0fd7e254..a46276b6 100644
--- a/src/components/FeaturedData/index.js
+++ b/src/components/FeaturedData/index.js
@@ -21,10 +21,10 @@ const useStyles = makeStyles(({ breakpoints, typography, widths }) => ({
     display: "flex",
     alignItems: "flex-end",
     [breakpoints.up("md")]: {
-      marginTop: typography.pxToRem((widths.values.md * 21)/ widths.values.xl),
+      marginTop: typography.pxToRem((widths.values.md * 21) / widths.values.xl),
     },
     [breakpoints.up("lg")]: {
-      marginTop: typography.pxToRem((widths.values.lg * 21)/ widths.values.xl),
+      marginTop: typography.pxToRem((widths.values.lg * 21) / widths.values.xl),
     },
     [breakpoints.up("xl")]: {
       marginTop: typography.pxToRem(21),
diff --git a/src/components/Hero/index.js b/src/components/Hero/index.js
index 9cc3f31e..3676d425 100644
--- a/src/components/Hero/index.js
+++ b/src/components/Hero/index.js
@@ -29,18 +29,26 @@ const useStyles = makeStyles(({ breakpoints, typography, widths }) => ({
     }
     return {
       flexGrow: 1,
-      backgroundImage: `url(${props.heroContent && props.heroContent.background_image? props.heroContent.background_image: coronaImage})`,
+      backgroundImage: `url(${
+        props.heroContent && props.heroContent.background_image
+          ? props.heroContent.background_image
+          : coronaImage
+      })`,
       backgroundRepeat: "no-repeat",
       backgroundPosition: "90% 5%",
       backgroundSize: `${typography.pxToRem(136)} ${typography.pxToRem(127)}`,
       [breakpoints.up("md")]: {
         backgroundPosition: "50% 20%",
         padding: `${typography.pxToRem(20)} 0`,
-        backgroundSize: `${typography.pxToRem((widths.values.md * 587)/widths.values.xl)} ${typography.pxToRem((widths.values.md * 551)/widths.values.xl)}`,
+        backgroundSize: `${typography.pxToRem(
+          (widths.values.md * 587) / widths.values.xl
+        )} ${typography.pxToRem((widths.values.md * 551) / widths.values.xl)}`,
       },
       [breakpoints.up("lg")]: {
         backgroundPosition: "40% 60%",
-        backgroundSize: `${typography.pxToRem((widths.values.lg * 587)/widths.values.xl)} ${typography.pxToRem((widths.values.lg * 551)/widths.values.xl)}`,
+        backgroundSize: `${typography.pxToRem(
+          (widths.values.lg * 587) / widths.values.xl
+        )} ${typography.pxToRem((widths.values.lg * 551) / widths.values.xl)}`,
       },
       [breakpoints.up("xl")]: {
         backgroundPosition: "40% 80%",
diff --git a/src/components/Navigation/MobileNavigation/index.js b/src/components/Navigation/MobileNavigation/index.js
index f44a0b04..dc2afadb 100644
--- a/src/components/Navigation/MobileNavigation/index.js
+++ b/src/components/Navigation/MobileNavigation/index.js
@@ -23,7 +23,6 @@ import Logo from "components/Navigation/Logo";
 import Search from "components/Search";
 
 import NavigationList from "./NavigationList";
-import { typography } from "@material-ui/system";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -78,7 +77,7 @@ const useStyles = makeStyles((theme) => ({
   searchIcon: {
     color: "#D6D6D6",
     fontSize: theme.typography.pxToRem(20),
-  }
+  },
 }));
 
 const Transition = React.forwardRef(function Transition(props, ref) {
@@ -133,10 +132,15 @@ function MobileNavigation({ country, countries, navigation, ...props }) {
           classes={{ root: classes.dialog, paper: classes.dialogPaper }}
         >
           <DialogActions className={classes.dialogActions}>
-            { showSearchBar ? (
+            {showSearchBar ? (
               <Search isMobile />
-            ): (
-              <Grid container justify="flex-start" alignItems="center" spacing={2}>
+            ) : (
+              <Grid
+                container
+                justify="flex-start"
+                alignItems="center"
+                spacing={2}
+              >
                 <Grid item>
                   <Link
                     href="/#"
@@ -156,7 +160,10 @@ function MobileNavigation({ country, countries, navigation, ...props }) {
                     href="/#"
                     variant="overline"
                     underline="none"
-                    className={classNames(classes.button, classes.languageButton)}
+                    className={classNames(
+                      classes.button,
+                      classes.languageButton
+                    )}
                   >
                     Fr
                   </Link>
@@ -166,7 +173,10 @@ function MobileNavigation({ country, countries, navigation, ...props }) {
                     href="/#"
                     variant="overline"
                     underline="none"
-                    className={classNames(classes.button, classes.languageButton)}
+                    className={classNames(
+                      classes.button,
+                      classes.languageButton
+                    )}
                   >
                     عربى
                   </Link>
diff --git a/src/components/Search.js b/src/components/Search.js
index 92e665fd..69926a85 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -1,19 +1,14 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import {
-  MenuList,
-  Tooltip,
-  Typography,
-  MenuItem
-} from '@material-ui/core';
+import { MenuList, Tooltip, Typography, MenuItem } from "@material-ui/core";
 
 import { makeStyles } from "@material-ui/core/styles";
 import { Search as SearchIcon } from "@material-ui/icons";
-import { ReactiveBase, DataSearch } from '@appbaseio/reactivesearch';
-import sliceMultiLangData from 'utils/sliceMultiLangData';
+import { ReactiveBase, DataSearch } from "@appbaseio/reactivesearch";
+import sliceMultiLangData from "utils/sliceMultiLangData";
 
-import config from 'config';
+import config from "config";
 
 const useStyles = makeStyles(({ breakpoints, typography, widths }) => ({
   root: {
@@ -32,7 +27,7 @@ const useStyles = makeStyles(({ breakpoints, typography, widths }) => ({
     [breakpoints.up("md")]: {
       border: "1px solid #9D9C9C !important",
       fontSize: "1.25rem !important",
-      lineHeight: typography.pxToRem(38/20),
+      lineHeight: typography.pxToRem(38 / 20),
     },
   },
   iconButton: {
@@ -46,10 +41,10 @@ const useStyles = makeStyles(({ breakpoints, typography, widths }) => ({
     position: "relative",
     maxWidth: typography.pxToRem(247),
     [breakpoints.up("md")]: {
-      maxWidth: typography.pxToRem((widths.values.md * 390) /widths.values.xl),
+      maxWidth: typography.pxToRem((widths.values.md * 390) / widths.values.xl),
     },
     [breakpoints.up("lg")]: {
-      maxWidth: typography.pxToRem((widths.values.lg * 390) /widths.values.xl),
+      maxWidth: typography.pxToRem((widths.values.lg * 390) / widths.values.xl),
     },
     [breakpoints.up("xl")]: {
       maxWidth: typography.pxToRem(390),
@@ -60,22 +55,22 @@ const useStyles = makeStyles(({ breakpoints, typography, widths }) => ({
     border: "1px solid #707070",
     position: "absolute",
     boxShadow: "none",
-    marginTop: '1.25rem',
-    padding: '0.625rem',
+    marginTop: "1.25rem",
+    padding: "0.625rem",
     zIndex: 1,
     maxWidth: typography.pxToRem(247),
     [breakpoints.up("md")]: {
-      maxWidth: typography.pxToRem((widths.values.md * 390) /widths.values.xl),
+      maxWidth: typography.pxToRem((widths.values.md * 390) / widths.values.xl),
     },
     [breakpoints.up("lg")]: {
-      maxWidth: typography.pxToRem((widths.values.lg * 390) /widths.values.xl),
+      maxWidth: typography.pxToRem((widths.values.lg * 390) / widths.values.xl),
     },
     [breakpoints.up("xl")]: {
       maxWidth: typography.pxToRem(390),
     },
-    [breakpoints.up('md')]: {
+    [breakpoints.up("md")]: {
       backgroundColor: "#EEEEEE",
-    }
+    },
   },
   text: {
     color: "#170F49",
@@ -85,14 +80,21 @@ const useStyles = makeStyles(({ breakpoints, typography, widths }) => ({
   },
 }));
 
-function Search({ ariaLabel, isMobile, onClick, onChange, placeholder, ...props }) {
+function Search({
+  ariaLabel,
+  isMobile,
+  onClick,
+  onChange,
+  placeholder,
+  ...props
+}) {
   const classes = useStyles(props);
 
   return (
     <ReactiveBase app="outbreak" url={config.ES_URL}>
       <DataSearch
         componentId="autoSuggest"
-        dataField={['post_title', 'post_content']}
+        dataField={["post_title", "post_content"]}
         highlight
         autosuggest
         queryFormat="and"
@@ -105,7 +107,7 @@ function Search({ ariaLabel, isMobile, onClick, onChange, placeholder, ...props
           input: classes.input,
           icon: classes.inputIcon,
         }}
-        parseSuggestion={suggestion => ({
+        parseSuggestion={(suggestion) => ({
           label: (
             <Typography variant="caption" className={classes.text} noWrap>
               {sliceMultiLangData(
@@ -118,33 +120,29 @@ function Search({ ariaLabel, isMobile, onClick, onChange, placeholder, ...props
             suggestion.source.post_title,
             config.DEFAULT_LANG
           ),
-          source: suggestion.source
+          source: suggestion.source,
         })}
-        render={({
-          data,
-          value,
-          downshiftProps: { isOpen, getItemProps }
-        }) => {
+        render={({ data, value, downshiftProps: { isOpen, getItemProps } }) => {
           return isOpen && Boolean(value.length) && Boolean(data.length) ? (
-              <MenuList className={classes.searchResults}>
-                {data.slice(0, 10).map(suggestion => (
-                  <MenuItem
-                    key={`${suggestion.value}-${suggestion._click_id}`} // eslint-disable-line no-underscore-dangle
-                    {...getItemProps({ item: suggestion })}
+            <MenuList className={classes.searchResults}>
+              {data.slice(0, 10).map((suggestion) => (
+                <MenuItem
+                  key={`${suggestion.value}-${suggestion._click_id}`} // eslint-disable-line no-underscore-dangle
+                  {...getItemProps({ item: suggestion })}
+                >
+                  <Tooltip
+                    title={suggestion.value}
+                    placement="bottom-start"
+                    classes={{ tooltip: classes.tooltip }}
                   >
-                    <Tooltip
-                      title={suggestion.value}
-                      placement="bottom-start"
-                      classes={{ tooltip: classes.tooltip }}
-                    >
-                      {suggestion.label}
-                    </Tooltip>
-                  </MenuItem>
-                ))}
-              </MenuList>
+                    {suggestion.label}
+                  </Tooltip>
+                </MenuItem>
+              ))}
+            </MenuList>
           ) : null;
         }}
-        />
+      />
     </ReactiveBase>
   );
 }
diff --git a/src/utils/sliceMultiLangData.js b/src/utils/sliceMultiLangData.js
index 6f11028c..94a6e06e 100644
--- a/src/utils/sliceMultiLangData.js
+++ b/src/utils/sliceMultiLangData.js
@@ -1,6 +1,6 @@
 export default function sliceMultiLangData(value, lang) {
   const langTerm = `[:${lang}]`;
-  const defaultLangTerm = '[:en]';
+  const defaultLangTerm = "[:en]";
 
   const availLangTerm = value.includes(langTerm) ? langTerm : defaultLangTerm;
 
@@ -8,7 +8,7 @@ export default function sliceMultiLangData(value, lang) {
 
   if (langIndex !== -1) {
     const startIndex = langIndex + availLangTerm.length;
-    const endIndex = value.indexOf('[:', startIndex);
+    const endIndex = value.indexOf("[:", startIndex);
 
     return value.slice(startIndex, endIndex);
   }

From 95f2f955380c33d3cbd628a503476f3b322517db Mon Sep 17 00:00:00 2001
From: KhadijaMahanga <khadijamahanga@y7mail.com>
Date: Fri, 19 Jun 2020 09:45:21 +0300
Subject: [PATCH 9/9] only post title

---
 src/components/Search.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Search.js b/src/components/Search.js
index 69926a85..b4519a52 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -94,7 +94,7 @@ function Search({
     <ReactiveBase app="outbreak" url={config.ES_URL}>
       <DataSearch
         componentId="autoSuggest"
-        dataField={["post_title", "post_content"]}
+        dataField={["post_title"]}
         highlight
         autosuggest
         queryFormat="and"