fix search

package.json

@@ -57,6 +57,7 @@
     "postcss-custom-media": "^6.0.0",
     "postcss-easy-import": "3.0.0",
     "postcss-nested": "2.1.2",
+    "query-string": "^6.13.1",
     "react": "^16.13.1",
     "react-dom": "16.12.0",
     "react-router": "^5.2.0",

src/components/App.tsx

@@ -3,13 +3,19 @@ import classNames from 'classnames';
 import Header from './Header/Header';
 import Footer from './Footer/Footer';
 import Router from './Router';
-import { BrowserRouter, Switch, Route, Redirect, useParams } from 'react-router-dom';
+import {BrowserRouter, Switch, Route, Redirect, useParams, useLocation} from 'react-router-dom';
 import radardata from '../rd.json';
 import { Item } from '../model';
 
+const useQuery = () => {
+  return new URLSearchParams(useLocation().search);
+}
+
 const RouterWithPageParam = () => {
   const { page } = useParams();
-  return <Router pageName={page} items={radardata.items as Item[]} releases={radardata.releases as string[]}/>;
+  const query = useQuery();
+
+  return <Router pageName={page} search={query.get('search') || ''} items={radardata.items as Item[]} releases={radardata.releases as string[]}/>;
 };
 
 export default function App() {

src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, MouseEventHandler } from 'react';
+import React, { useState, useRef } from 'react';
 import classNames from 'classnames';
 import Branding from '../Branding/Branding';
 import Link from '../Link/Link';
@@ -6,6 +6,7 @@ import LogoLink from '../LogoLink/LogoLink';
 import Search from '../Search/Search';
 import { radarNameShort } from '../../config';
 import { useHistory } from 'react-router-dom';
+import qs from 'query-string';
 
 export default function Header({ pageName }: { pageName: string }) {
   const [searchOpen, setSearchOpen] = useState(false);
@@ -21,10 +22,15 @@ export default function Header({ pageName }: { pageName: string }) {
     setSearchOpen(false);
   };
 
-  const handleSearchChange = setSearch;
+  const handleSearchChange = (value: string) => {
+    setSearch(value)
+  };
 
   const handleSearchSubmit = () => {
-    history.location.search = search;
+    history.push({
+      pathname: '/techradar/overview.html',
+      search: qs.stringify({search: search}),
+    })
 
     setSearchOpen(false);
     setSearch('');
@@ -45,17 +51,17 @@ export default function Header({ pageName }: { pageName: string }) {
       <div className='nav'>
         <div className='nav__item'>
           <Link pageName='help-and-about-tech-radar' className='icon-link'>
-            <span className='icon icon--question icon-link__icon'></span>How to Use {radarNameShort}?
+            <span className='icon icon--question icon-link__icon'/>How to Use {radarNameShort}?
           </Link>
         </div>
         <div className='nav__item'>
           <Link pageName='overview' className='icon-link'>
-            <span className='icon icon--overview icon-link__icon'></span>Technologies Overview
+            <span className='icon icon--overview icon-link__icon'/>Technologies Overview
           </Link>
         </div>
         <div className='nav__item'>
           <button className='icon-link' onClick={handleOpenClick}>
-            <span className='icon icon--search icon-link__icon'></span>Search
+            <span className='icon icon--search icon-link__icon'/>Search
           </button>
           <div className={classNames('nav__search', { 'is-open': searchOpen })}>
             <Search value={search} onClose={closeSearch} onSubmit={handleSearchSubmit} onChange={handleSearchChange} open={searchOpen} ref={searchRef} />

src/components/LogoLink/LogoLink.tsx

@@ -6,7 +6,7 @@ import './logo-link.scss';
 export default function LogoLink({ small = false }: { small?: boolean }) {
   return (
     <Link pageName='index' className={classNames('logo-link', { 'logo-link--small': small })}>
-      <span className='logo-link__icon icon icon--back'></span>
+      <span className='logo-link__icon icon icon--back'/>
       <span className='logo-link__slide'>
         <img className='logo-link__img' src={assetUrl('logo.svg')} width='150px' height='60px' alt={radarNameShort} />
         <span className='logo-link__text'>{radarNameShort}</span>

src/components/PageOverview/PageOverview.tsx

@@ -16,7 +16,7 @@ const containsSearchTerm = (text = '', term = '') => {
 };
 
 type PageOverviewProps = {
-  rings: Ring[];
+  rings: readonly ('all' | Ring)[];
   search: string;
   items: Item[];
   leaving: boolean;

src/components/Router.tsx

@@ -5,13 +5,14 @@ import PageHelp from './PageHelp/PageHelp';
 import PageQuadrant from './PageQuadrant/PageQuadrant';
 import PageItem from './PageItem/PageItem';
 import PageItemMobile from './PageItemMobile/PageItemMobile';
-import {quadrants, getItemPageNames, isMobileViewport} from '../config';
+import {quadrants, getItemPageNames, isMobileViewport, rings} from '../config';
 import {Item} from '../model';
 
 type RouterProps = {
     pageName: string
     items: Item[]
     releases: string[]
+    search: string
 }
 
 enum page {
@@ -44,7 +45,7 @@ const getPageByName = (items: Item[], pageName: string): page => {
     return page.notFound;
 };
 
-export default function Router({pageName, items, releases}: RouterProps) {
+export default function Router({pageName, items, releases, search}: RouterProps) {
     const [statePageName, setStatePageName] = useState(pageName);
     const [leaving, setLeaving] = useState(false);
     const [nextPageName, setNextPageName] = useState<string>('');
@@ -75,7 +76,7 @@ export default function Router({pageName, items, releases}: RouterProps) {
         case page.index:
             return <PageIndex leaving={leaving} items={items} onLeave={handlePageLeave} releases={releases}/>;
         case page.overview:
-            return <PageOverview items={items} rings={[]} search={''} leaving={leaving} onLeave={handlePageLeave}/>;
+            return <PageOverview items={items} rings={rings} search={search} leaving={leaving} onLeave={handlePageLeave}/>;
         case page.help:
             return <PageHelp leaving={leaving} onLeave={handlePageLeave}/>;
         case page.quadrant:

src/components/Search/Search.tsx

@@ -1,6 +1,7 @@
 import React, { FormEvent } from 'react';
 import classNames from 'classnames';
 import './search.scss';
+
 type SearchProps = {
   onClose?: () => void;
   onSubmit?: () => void;
@@ -22,7 +23,7 @@ function Search({ value, onChange, onClose, open = false, onSubmit = () => {} }:
   };
 
   const handleClose = (e: React.MouseEvent) => {
-    // e.preventDefault();
+    e.preventDefault();
     if (onClose != null) {
       onClose();
     }

src/config.ts

@@ -11,6 +11,7 @@ export const quadrants = [
 ];
 
 export const rings = [
+  'all',
   'adopt',
   'trial',
   'assess',

yarn.lock

@@ -9379,6 +9379,15 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
+query-string@^6.13.1:
+  version "6.13.1"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.13.1.tgz#d913ccfce3b4b3a713989fe6d39466d92e71ccad"
+  integrity sha512-RfoButmcK+yCta1+FuU8REvisx1oEzhMKwhLUNcepQTPGcNMp1sIqjnfCtfnvGSQZQEhaBHvccujtWoUV3TTbA==
+  dependencies:
+    decode-uri-component "^0.2.0"
+    split-on-first "^1.0.0"
+    strict-uri-encode "^2.0.0"
+
 querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -10593,6 +10602,11 @@ spdy@^4.0.1:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
+split-on-first@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
+  integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
+
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -10721,6 +10735,11 @@ strict-uri-encode@^1.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
   integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
 
+strict-uri-encode@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
+  integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
+
 string-length@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"