Search: show CategoryPanel after search

pages/category/[[...key]].ts

@@ -0,0 +1 @@
+export { default } from '../../src/components/App/App';

src/components/App/App.tsx

@@ -16,6 +16,7 @@ import { FeaturePreview } from '../FeaturePreview/FeaturePreview';
 import { TitleAndMetaTags } from '../../helpers/TitleAndMetaTags';
 import { InstallDialog } from '../HomepagePanel/InstallDialog';
 import { setIntlForSSR } from '../../services/intl';
+import { CategoryPanel } from '../CategoryPanel/CategoryPanel';
 
 const usePersistMapView = () => {
   const { view } = useMapStateContext();
@@ -72,6 +73,7 @@ const IndexWithProviders = () => {
       <SearchBox />
       <Loading />
       {featureShown && <FeaturePanel />}
+      {router.pathname === '/category/[[...key]]' && <CategoryPanel />}
       <HomepagePanel />
       {router.pathname === '/install' && <InstallDialog />}
       <Map />

src/components/CategoryPanel/CategoryPanel.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useRouter } from 'next/router';
+import {
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemProps,
+  ListItemText,
+  Typography,
+} from '@material-ui/core';
+import {
+  PanelFooter,
+  PanelScrollbars,
+  PanelWrapper,
+} from '../utils/PanelHelpers';
+import { ClosePanelButton } from '../utils/ClosePanelButton';
+import { presets } from '../../services/tagging/data';
+import { getPresetTranslation } from '../../services/tagging/translations';
+
+export const Content = styled.div`
+  padding: 20px 2em 0 2em;
+
+  a.maptiler {
+    display: block;
+    color: inherit;
+    text-align: center;
+    margin: 1em 0;
+
+    strong {
+      color: ${({ theme }) => theme.palette.link};
+      font-weight: normal;
+    }
+
+    &:hover {
+      text-decoration: none;
+
+      & strong {
+        text-decoration: underline;
+      }
+    }
+  }
+`;
+
+function ListItemLink(props: ListItemProps<'a', { button?: true }>) {
+  return <ListItem button component="a" {...props} />; // eslint-disable-line react/jsx-props-no-spreading
+}
+
+export const CategoryPanel = () => {
+  const router = useRouter();
+  const { key } = router.query;
+  const preset = presets[Array.isArray(key) ? key.join('/') : key];
+  if (!preset) {
+    return null;
+  }
+
+  const { presetKey, name } = preset;
+  const heading = getPresetTranslation(presetKey) ?? name ?? presetKey;
+
+  return (
+    <PanelWrapper>
+      <PanelScrollbars>
+        <ClosePanelButton right onClick={() => {}} />
+        <Content>
+          <Typography variant="h5" gutterBottom>
+            Hledání: {heading}
+          </Typography>
+        </Content>
+
+        <List component="nav" aria-label="main mailbox folders">
+          <ListItemLink href="/asdf">
+            <ListItemIcon>AA</ListItemIcon>
+            <ListItemText primary="Inbox" />
+          </ListItemLink>
+        </List>
+
+        <PanelFooter />
+      </PanelScrollbars>
+    </PanelWrapper>
+  );
+};

src/components/SearchBox/onSelectedFactory.ts

@@ -65,6 +65,10 @@ export const onSelectedFactory =
         setOverpassLoading(true);
       }, 300);
 
+      // change url to /category, fetching will be done there
+      console.log(option.preset.presetForSearch, 'asdf'); // eslint-disable-line no-console
+      Router.push(`/category/${option.preset.presetForSearch.key}`);
+
       performOverpassSearch(bbox, tags)
         .then((geojson) => {
           const count = geojson.features.length;

src/services/intl.tsx

@@ -5,6 +5,7 @@ import { MessagesType, TranslationId } from './types';
 import { isBrowser, isServer } from '../components/helpers';
 import { getServerIntl } from './intlServer';
 import { publishDbgObject } from '../utils';
+import { fetchSchemaTranslations } from './tagging/translations'; // eslint-disable-line import/no-cycle
 
 type Values = { [variable: string]: string | number };
 
@@ -71,6 +72,7 @@ if (isBrowser()) {
 export const setIntlForSSR = async (ctx) => {
   if (isServer()) {
     setIntl(await getServerIntl(ctx));
+    await fetchSchemaTranslations(); // TODO import cycle
   }
 };
 

src/services/tagging/translations.ts

@@ -1,6 +1,6 @@
 import { fetchJson } from '../fetch';
 import { Field } from './types/Fields';
-import { intl } from '../intl';
+import { intl } from '../intl'; // eslint-disable-line import/no-cycle
 import { publishDbgObject } from '../../utils';
 
 // https://cdn.jsdelivr.net/npm/@openstreetmap/id-tagging-schema@6.1.0/dist/translations/en.min.json