add language selector

src/LandingPage.js

@@ -8,6 +8,9 @@ import React, { useState } from "react";
 import { gql, useQuery } from "@apollo/client";
 import { richTextFields, seoFields } from "./graphQLFragments";
 import getSeo from "./utils/getSeo";
+import { useLocation } from 'react-router-dom';
+import { getLanguage } from './utils/queryString';
+import { languages } from './components/LanguageSelector';
 
 const useStyles = makeStyles((theme) => ({
   sections: {
@@ -129,17 +132,17 @@ function LandingPage(props) {
   `;
 
   const landingPageQuery = gql`
-    query LandingPageQuery($codename: String!) {
-      landingPage(codename: $codename) {
+    query LandingPageQuery($codename: String!, $language: String!) {
+      landingPage(codename: $codename, languageFilter: {languageCodename: $language}) {
         ...LandingPageFields
       }
     }
     ${landingPageFields}
   `;
 
   const navigationAndLandingPageQuery = gql`
-    query NavigationAndLandingPageQuery($codename: String!) {
-      navigationItem(codename: $codename) {
+    query NavigationAndLandingPageQuery($codename: String!, $language: String!) {
+      navigationItem(codename: $codename, languageFilter: {languageCodename: $language}) {
         _seo {
           ...SeoFields
         }
@@ -158,11 +161,12 @@ function LandingPage(props) {
 
   const [sectionItems, setSectionItems] = useState(null);
   const [seo, setSeo] = useState({});
+    const language = getLanguage(useLocation()) || languages[0].codename;
 
   const { loading, error } = useQuery(
     props.seo ? landingPageQuery : navigationAndLandingPageQuery,
     {
-      variables: { codename: props.codename },
+      variables: { codename: props.codename, language: language},
       onCompleted: (data) => {
         if (props.seo) {
           setSectionItems(data.landingPage.sections.items);

src/components/Action.js

@@ -1,12 +1,19 @@
 import get from "lodash.get";
 import { Button } from "@material-ui/core";
 import { Link, Icon } from ".";
+import { useLocation } from 'react-router-dom';
 
 function Action(props) {
-  const { action } = props;
+  const search = useLocation().search;
+
+  const getHrefFromUrlSlugAndPreserveQueryString = (navigationItem) => {
+    return `${get(navigationItem, "slug")}${search}`
+  }
+
+  const { action, size } = props;
   const navigationItem = get(action, "navigationItem", null);
   const href = navigationItem._system_.type.codename === "external_url" ?
-               get(navigationItem, "url") : get(navigationItem, "slug");
+               get(navigationItem, "url") : getHrefFromUrlSlugAndPreserveQueryString(navigationItem);
   const action_options = get(action, "options.items", []);
 
 
@@ -38,7 +45,7 @@ function Action(props) {
       startIcon={iconPosition && iconPosition === "left" && <Icon icon={icon} />}
       endIcon={iconPosition && iconPosition === "right" && <Icon icon={icon} />}
       underline="none"
-      size={props.size}
+      size={size}
       href={href}
       {...config}
       {...options}>

src/components/Header.js

@@ -4,6 +4,7 @@ import Typography from "@material-ui/core/Typography";
 import { makeStyles } from "@material-ui/core/styles";
 import { Action, Image, Link, SideDrawer } from ".";
 import { Container, Hidden } from "@material-ui/core";
+import LanguageSelector from './LanguageSelector';
 
 
 const useStyles = makeStyles((theme) => ({
@@ -47,6 +48,7 @@ function Header({ asset, title, mainMenuActions }) {
               <div className={classes.mainMenu}>
                 {mainMenuActions.map((navigationItem, index) =>
                     <Action key={index} action={navigationItem} />)}
+                <LanguageSelector/>
               </div>
             </Hidden>
             <Hidden mdUp>

src/components/LanguageSelector.js

@@ -0,0 +1,43 @@
+import React from "react";
+import MuiSelect from "@material-ui/core/Select";
+import { useHistory } from 'react-router-dom';
+import { makeStyles, MenuItem } from '@material-ui/core';
+import { getLanguage, setLanguage } from '../utils/queryString';
+
+const useStyles = makeStyles((theme) => ({
+  selectLanguage: {
+    clear: 'both',
+    borderBottom: 'none'
+  },
+}));
+
+export const languages = [{
+        name: "EN",
+        codename: "default"
+    },
+    {
+        name: "CZ",
+        codename: "cz"
+    }
+];
+
+function LanguageSelector() {
+  const history = useHistory();
+  const classes = useStyles();
+  const handleClick = ({target}) => {
+    history.push(setLanguage(history.location, target.value));
+  }
+  return (
+    <MuiSelect
+        value={getLanguage(history.location)}
+        onChange={handleClick}
+        className={classes.selectLanguage}
+        displayEmpty
+        renderValue={value => !value ? <em>{languages[0].name}</em> : languages.find(language => language.codename === value).name}
+    >
+      {languages.map((language, index) => <MenuItem key={`languageSelectorItem${index}`} value={language.codename}>{language.name}</MenuItem>)}
+    </MuiSelect>
+  );
+}
+
+export default LanguageSelector;

src/components/SideDrawer.js

@@ -2,6 +2,7 @@ import { Drawer, IconButton, List, ListItem } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import { useState } from "react";
 import { Action, Icon } from ".";
+import LanguageSelector from './LanguageSelector';
 
 const useStyles = makeStyles({
   list: {
@@ -42,6 +43,9 @@ const SideDrawer = (props) => {
             <Action action={navigationItem} />
           </ListItem>
         ))}
+        <ListItem key="language" >
+          <LanguageSelector/>
+        </ListItem>
       </List>
     </div>
   );

src/components/index.js

@@ -11,6 +11,7 @@ import FormField from "./FormField";
 import RichText from "./RichText";
 import CtaButtons from "./CtaButtons";
 import GraphQLLoader from "./GraphQLLoader";
+import LanguageSelector from "./LanguageSelector";
 
 export {
   CtaButtons,
@@ -25,5 +26,23 @@ export {
   RichText,
   SideDrawer,
   Icon,
-  GraphQLLoader
-};
+  GraphQLLoader,
+  LanguageSelector
+};
+
+export default {
+  CtaButtons,
+  FormField,
+  UnknownComponent,
+  Layout,
+  Header,
+  Link,
+  Filter,
+  Action,
+  Image,
+  RichText,
+  SideDrawer,
+  Icon,
+  GraphQLLoader,
+  LanguageSelector
+};

src/index.js

@@ -1,47 +1,59 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import ReactGA from 'react-ga';
-import App from './App';
-import { HelmetProvider } from 'react-helmet-async';
-import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
-import { name, version } from "../package.json";
-
-const PREVIEW_API_KEY = process.env.REACT_APP_KONTENT_PREVIEW_API_KEY;
-const GQL_ENDPOINT = process.env.REACT_APP_KONTENT_GRAPHQL_ENDPOINT ||
-    (PREVIEW_API_KEY ? "https://preview-graphql.kontent.ai" : "https://graphql.kontent.ai");
-const PROJECT_ID = process.env.REACT_APP_KONTENT_PROJECT_ID || "ad25961e-f934-01dc-e1fa-f4dd41b84df2";
-const GA_TOKEN = process.env.REACT_APP_GA_ANALYTICS_TOKEN;
-
-const authorizationHeader = PREVIEW_API_KEY ? {
-    'Authorization': `Bearer ${PREVIEW_API_KEY}`
-} : {};
-
-const client = new ApolloClient({
-    cache: new InMemoryCache({
-        // https://github.com/apollographql/apollo-client/issues/7648#issuecomment-968969367
-        // possibleTypes: {
-        //     _Item: [
-        //         "LandingPage",
-        //         "ListingPage",
-        //         "SimplePage"
-        //     ]
-        // }
-    }),
-    uri: `${GQL_ENDPOINT}/${PROJECT_ID}`,
-    headers: Object.assign({
-        'X-KC-SOURCE': `${name};${version}`
-    }, authorizationHeader)
-});
-
-GA_TOKEN && ReactGA.initialize(GA_TOKEN);
-
-ReactDOM.render(
-    <React.StrictMode>
-        <HelmetProvider>
-            <ApolloProvider client={client}>
-                <App initializeAnalytics={!!GA_TOKEN}/>
-            </ApolloProvider>
-        </HelmetProvider>
-    </React.StrictMode>,
-    document.getElementById('root')
-);
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactGA from 'react-ga';
+import App from './App';
+import { createBrowserHistory } from 'history';
+import { HelmetProvider } from 'react-helmet-async';
+import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { name, version } from "../package.json";
+
+const PREVIEW_API_KEY = process.env.REACT_APP_KONTENT_PREVIEW_API_KEY;
+const GQL_ENDPOINT = process.env.REACT_APP_KONTENT_GRAPHQL_ENDPOINT ||
+    (PREVIEW_API_KEY ? "https://preview-graphql.kontent.ai" : "https://graphql.kontent.ai");
+const PROJECT_ID = process.env.REACT_APP_KONTENT_PROJECT_ID || "ad25961e-f934-01dc-e1fa-f4dd41b84df2";
+const GA_TOKEN = process.env.REACT_APP_GA_ANALYTICS_TOKEN;
+
+const authorizationHeader = PREVIEW_API_KEY ? {
+    'Authorization': `Bearer ${PREVIEW_API_KEY}`
+} : {};
+
+const client = new ApolloClient({
+    cache: new InMemoryCache({
+        // https://github.com/apollographql/apollo-client/issues/7648#issuecomment-968969367
+        // possibleTypes: {
+        //     _Item: [
+        //         "LandingPage",
+        //         "ListingPage",
+        //         "SimplePage"
+        //     ]
+        // }
+    }),
+    uri: `${GQL_ENDPOINT}/${PROJECT_ID}`,
+    headers: Object.assign({
+        'X-KC-SOURCE': `${name};${version}`
+    }, authorizationHeader)
+});
+
+const history = createBrowserHistory();
+
+if (GA_TOKEN) {
+    ReactGA.initialize(GA_TOKEN);
+    history.listen(location => {
+        ReactGA.set({ page: location.pathname });
+        ReactGA.pageview(location.pathname);
+    });
+}
+
+ReactDOM.render(
+    <React.StrictMode>
+        <HelmetProvider>
+            <ApolloProvider client={client}>
+                <Router history={history} basename={process.env.PUBLIC_URL}>
+                    <App />
+                </Router>
+            </ApolloProvider>
+        </HelmetProvider>
+    </React.StrictMode>,
+    document.getElementById('root')
+);