Add meta context wrapper

package.json

@@ -28,6 +28,7 @@
     "react": "^16.4.1",
     "react-addons-css-transition-group": "^15.6.2",
     "react-dom": "^16.4.1",
+    "react-helmet": "^5.2.0",
     "react-media": "^1.8.0",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
@@ -48,6 +49,7 @@
     "@types/react": "^16.4.11",
     "@types/react-addons-css-transition-group": "^15.0.5",
     "@types/react-dom": "^16.0.7",
+    "@types/react-helmet": "^5.0.8",
     "@types/react-router": "^4.0.30",
     "@types/react-router-dom": "^4.3.0",
     "@types/react-select": "^2.0.2",

src/components/App/index.tsx

@@ -1,7 +1,14 @@
 import * as React from "react";
 
 import { ApolloConsumer } from "react-apollo";
-import { Footer, MainMenu, MainMenuNavOverlay, MobileNav, SearchOverlay } from "..";
+import {
+  Footer,
+  MainMenu,
+  MainMenuNavOverlay,
+  MetaConsumer,
+  MobileNav,
+  SearchOverlay
+} from "..";
 import { CartOverlay } from "../CartOverlay";
 import CartProvider from "../CartProvider";
 import { LoginOverlay } from "../LoginOverlay";
@@ -14,20 +21,23 @@ import "./scss/index.scss";
 const App: React.SFC<{}> = () => (
   <ApolloConsumer>
     {client => (
-      <CartProvider apolloClient={client}>
-        <header>
-          <MainMenu />
-        </header>
-        <Routes />
-        <Footer />
-        <CartOverlay />
-        <LoginOverlay />
-        <PasswordOverlay />
-        <MobileNav />
-        <MainMenuNavOverlay />
-        <NotificationOverlay />
-        <SearchOverlay />
-      </CartProvider>
+      <>
+        <MetaConsumer />
+        <CartProvider apolloClient={client}>
+          <header>
+            <MainMenu />
+          </header>
+          <Routes />
+          <Footer />
+          <CartOverlay />
+          <LoginOverlay />
+          <PasswordOverlay />
+          <MobileNav />
+          <MainMenuNavOverlay />
+          <NotificationOverlay />
+          <SearchOverlay />
+        </CartProvider>
+      </>
     )}
   </ApolloConsumer>
 );

src/components/Meta/MetaWrapper.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+import { default as MetaConsumer } from "./consumer";
+import { MetaContextInterface, Provider as MetaProvider } from "./context";
+
+interface MetaWrapperProps {
+  meta: MetaContextInterface;
+  children: React.ReactNode;
+}
+
+const MetaWrapper: React.SFC<MetaWrapperProps> = ({ children, meta }) => (
+  <MetaProvider value={meta}>
+    <MetaConsumer>{children}</MetaConsumer>
+  </MetaProvider>
+);
+
+export default MetaWrapper;

src/components/Meta/consumer.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { Helmet } from "react-helmet";
+
+import { Consumer as MetaConsumer } from "./context";
+
+class Consumer extends React.Component {
+  render() {
+    return (
+      <MetaConsumer>
+        {({ title, description, image, type, url, custom }) => (
+          <>
+            <Helmet
+              title={title}
+              meta={[
+                { name: "description", content: description },
+                { property: "og:url", content: url },
+                { property: "og:type", content: type },
+                { property: "og:image", content: image },
+                ...custom
+              ]}
+            />
+            {this.props.children}
+          </>
+        )}
+      </MetaConsumer>
+    );
+  }
+}
+
+export default Consumer;

src/components/Meta/context.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { META_DEFAULTS } from "../../core/config";
+
+type MetaProps = JSX.IntrinsicElements["meta"];
+
+export interface MetaContextInterface {
+  title?: string;
+  description?: string;
+  url?: string;
+  image?: string;
+  type?: string;
+  custom?: MetaProps[];
+}
+
+export const { Provider, Consumer } = React.createContext<MetaContextInterface>(
+  META_DEFAULTS
+);

src/components/Meta/index.ts

@@ -0,0 +1,3 @@
+export { Provider as MetaProvider, MetaContextInterface } from "./context";
+export { default as MetaConsumer } from "./consumer";
+export { default as MetaWrapper } from "./MetaWrapper";

src/components/Meta/provider.tsx

@@ -0,0 +1,10 @@
+// import * as React from "react";
+// import { Helment } from "react-helmet";
+
+// import { Provider as MetaProvider } from "./context";
+
+// class Provider extends React.Component {
+//   render() {
+//     return <MetaProvider>{this.props.children}</MetaProvider>;
+//   }
+// }

src/components/MobileNav/NavList.tsx

@@ -24,7 +24,6 @@ class NavList extends React.PureComponent<NavListProps, NavListState> {
     parent: null
   };
 
-
   handleShowSubItems = (item: NavItem) => {
     this.setState({ parent: item, displayedItems: item.children });
   };
@@ -63,13 +62,9 @@ class NavList extends React.PureComponent<NavListProps, NavListState> {
     return (
       <ul>
         {parent ? (
-          <li className="side-nav__menu-item side-nav__menu-item--parent">
-            <span
-              className="side-nav__menu-item-back"
-              onClick={this.handleGoBack}
-            >
-              <ReactSVG path={backIcon} />{" "}
-              {parent.name}
+          <li className="side-nav__menu-item side-nav__menu-item-back">
+            <span onClick={this.handleGoBack}>
+              <ReactSVG path={backIcon} /> {parent.name}
             </span>
           </li>
         ) : (

src/components/MobileNav/scss/index.scss

@@ -2,19 +2,19 @@
 
 .side-nav {
   $item-height: 3.7rem;
-  width: 30rem;
   max-width: calc(100vw - 5rem);
+  width: 30rem;
 
   &__menu-item {
     border-bottom: 1px solid $gray-light;
+    display: grid;
     height: $item-height;
 
     &-link,
-    &-back {
+    &-back span {
       align-items: center;
       color: $base-font-color;
       display: flex;
-      display: flex;
       font-weight: 600;
       padding: $spacer;
       text-decoration: none;
@@ -27,7 +27,8 @@
     }
 
     &-logo {
-      padding: $spacer;
+      align-self: center;
+      padding: 0.75rem $spacer;
 
       svg {
         width: 5rem;
@@ -58,7 +59,8 @@
     }
 
     &-more {
-      padding: $spacer $spacer * 2;
+      align-self: center;
+      padding: 1.25rem 1.75rem;
     }
 
     &-back {
@@ -87,7 +89,6 @@
 
     &--has-subnavigation,
     &--parent {
-      display: grid;
       grid-template-columns: 1fr $item-height;
     }
 

src/components/index.ts

@@ -43,3 +43,9 @@ export { MainMenu, MainMenuNavOverlay } from "./MainMenu";
 export { MobileNav } from "./MobileNav";
 export { NavLink } from "./NavLink";
 export { SearchOverlay } from "./SearchOverlay";
+export {
+  MetaConsumer,
+  MetaProvider,
+  MetaContextInterface,
+  MetaWrapper
+} from "./Meta";

src/core/config.ts

@@ -36,3 +36,11 @@ export const SOCIAL_MEDIA = [
     path: require("../images/youtube-icon.svg")
   }
 ];
+
+export const META_DEFAULTS = {
+  description: "PWA Storefront",
+  image: `${window.location.origin}${require("../images/logo.svg")}`,
+  title: "Saleor",
+  type: "website",
+  url: window.location.href
+};

src/views/Collection/queries.ts

@@ -19,6 +19,8 @@ export const collectionProductsQuery = gql`
       id
       slug
       name
+      seoDescription
+      seoTitle
       backgroundImage {
         url
       }

src/views/Collection/types/Collection.ts

@@ -17,6 +17,8 @@ export interface Collection_collection {
   id: string;
   slug: string;
   name: string;
+  seoDescription: string | null;
+  seoTitle: string | null;
   backgroundImage: Collection_collection_backgroundImage | null;
 }