Bugfixing (#7)

* trying to fix load problem * fixed path problem and menu * added batch to all posts and corrected name prop * fixed bugs and added pagehead component
tegner · Jun 21, 2018 · b5bce11 · b5bce11
1 parent cbea061
commit b5bce11
Show file tree

Hide file tree

Showing 13 changed files with 1,715 additions and 966 deletions.
diff --git a/content/posts/light-afternoon-shower.md b/content/posts/light-afternoon-shower.md
@@ -3,6 +3,7 @@ title: "Light Afternoon Shower"
 date: "2017-06-09"
 brewed: "2017-06-09"
 bottled: "N/A"
+batch: "20170609"
 ibu: "60"
 srm: "1"
 abv: "4%"

diff --git a/content/posts/mosekonen-brygger.md b/content/posts/mosekonen-brygger.md
@@ -3,6 +3,7 @@ title: "Mosekonen brygger"
 date: "2018-05-04"
 brewed: "2018-04-18"
 bottled: "2018-05-04"
+batch: "20180504"
 ibu: "18"
 srm: "9"
 abv: "5.4%"

diff --git a/content/posts/mr-white-ipa.md b/content/posts/mr-white-ipa.md
@@ -3,6 +3,7 @@ title: "Mr. White IPA"
 date: "2017-03-21"
 brewed: "2017-03-21"
 bottled: "N/A"
+batch: "20170321"
 ibu: "45"
 srm: "N/A"
 abv: "5.5%"

diff --git a/package.json b/package.json
@@ -5,8 +5,9 @@
   "main": "index.js",
   "scripts": {
     "start": "phenomic start",
-    "build": "npm run lint && phenomic build",
-    "lint": "prettier ./public/**/*.css --write && prettier ./src/*.js --single-quote --write"
+    "preview": "phenomic preview",
+    "build": "phenomic build",
+    "prebuild": "prettier ./public/**/*.css --write && prettier ./src/*.js --single-quote --write"
   },
   "author": "tegner",
   "license": "ISC",
@@ -21,6 +22,12 @@
     "react-router": "^3.2.1"
   },
   "phenomic": {
+    "content": {
+      "": {
+        "root": "content",
+        "globs": ["**/*"]
+      }
+    },
     "presets": [
       "@phenomic/preset-react-app"
     ]

diff --git a/public/css/biglink.css b/public/css/biglink.css
@@ -1,6 +1,7 @@
 .biglink {
   align-items: flex-end;
   background: #888;
+  background-position: center;
   color: #000;
   display: flex;
   font-size: 18px;

diff --git a/src/BigLink.js b/src/BigLink.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import Head from 'react-helmet';
-import { Router, Route, browserHistory, Link } from 'react-router';
+import { Link } from 'react-router';
 
 const BigLink = ({ props }) => (
   <Link

diff --git a/src/BlogPostComponent.js b/src/BlogPostComponent.js
@@ -1,15 +1,12 @@
 import React from 'react';
-import Head from 'react-helmet';
-import { Router, Route, browserHistory, Link } from 'react-router';
 import {
   withPhenomicApi,
   query,
   BodyRenderer,
   textRenderer
 } from '@phenomic/preset-react-app/lib/client';
 import { Layout } from './Layout';
-import { PageError } from './PageError';
-import { Menu, MenuContainer } from './Menu';
+import { PageHead } from './PageHead';
 
 class BlogPost extends React.Component {
   constructor(props) {
@@ -19,19 +16,16 @@ class BlogPost extends React.Component {
   componentDidMount() {}
 
   render() {
-    const { hasError, isLoading, page, posts } = this.props;
+    const { isLoading, page } = this.props;
     return (
       <div>
         {!isLoading &&
           page.node && (
-            <Layout>
-              <Head>
-                <title>Tegner bryggers - {page.node.title}</title>
-                <meta
-                  name="description"
-                  content={textRenderer(page.node.body).slice(0, 150) + '…'}
-                />
-              </Head>
+            <Layout name={page.node.batch}>
+              <PageHead
+                title={'Tegner bryggers -' + page.node.title}
+                description={textRenderer(page.node.body).slice(0, 150) + '…'}
+              />
               <article>
                 <header className="post-header">
                   <h1>{page.node.title}</h1>
@@ -84,7 +78,7 @@ class BlogPost extends React.Component {
 }
 
 const BlogPostContainer = withPhenomicApi(BlogPost, props => ({
-  page: query({ path: 'content/posts', id: props.params.splat })
+  page: query({ path: 'posts', id: props.params.splat })
 }));
 
 export { BlogPostContainer };
diff --git a/src/Home.js b/src/Home.js
@@ -1,27 +1,18 @@
 import React from 'react';
-import Head from 'react-helmet';
-import { Router, Route, browserHistory, Link } from 'react-router';
-import {
-  createApp,
-  withPhenomicApi,
-  query,
-  BodyRenderer,
-  textRenderer
-} from '@phenomic/preset-react-app/lib/client';
+import { Link } from 'react-router';
+import { withPhenomicApi, query } from '@phenomic/preset-react-app/lib/client';
 import { Layout } from './Layout';
 import { BigLink } from './BigLink';
+import { PageHead } from './PageHead';
 
 const Home = ({ isLoading, posts }) => (
   <div>
     {!isLoading && (
       <Layout name="home">
-        <Head>
-          <title>Tegner Bryggers</title>
-          <meta
-            name="description"
-            content="Tegner bryggers - Hjemmebryggeri, log over bryg"
-          />
-        </Head>
+        <PageHead
+          title="Tegner bryggers"
+          description="Tegner bryggers - Hjemmebryggeri, log over bryg"
+        />
         <div className="home-content">
           <h1>Tegner bryggers</h1>
           <p>Hjemmebryggeri på Amager, startet April 2017</p>
@@ -58,18 +49,7 @@ const Home = ({ isLoading, posts }) => (
 );
 
 const HomeContainer = withPhenomicApi(Home, props => ({
-  posts: query({ path: 'content/posts', limit: 5, after: props.params.after })
+  posts: query({ path: 'posts', limit: 5, after: props.params.after })
 }));
 
 export { HomeContainer };
-
-// <div>
-//   {posts.node &&
-//     posts.node.next && (
-//       <Link to={`/after/${posts.node.next}/`}>Older posts</Link>
-//   )}
-//   {posts.node &&
-//     posts.node.previous && (
-//       <Link to={posts.node.previousPageIsFirst ? `/` : `/after/${posts.node.previous}/`}>Newer posts</Link>
-//     )}
-// </div>
diff --git a/src/Layout.js b/src/Layout.js
@@ -1,19 +1,12 @@
 import React from 'react';
 import Head from 'react-helmet';
 import { Logo } from './Logo';
-// import '../public/css/style.css'
 import { MenuContainer } from './Menu';
 import { Styling } from './Styling';
 
 const Layout = props => {
   return (
     <div className="blog page-container">
-      <Head>
-        <html lang="en" /> {/* this is valid react-helmet usage! */}
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link href="/favicon.png" rel="icon" type="image/png" />
-      </Head>
       <header className="header">
         <a href="/" className="header-logo">
           <Logo />

diff --git a/src/Menu.js b/src/Menu.js
@@ -1,33 +1,11 @@
 import React from 'react';
-import Head from 'react-helmet';
-import { Router, Route, browserHistory, Link } from 'react-router';
-import {
-  createApp,
-  withPhenomicApi,
-  query,
-  BodyRenderer,
-  textRenderer
-} from '@phenomic/preset-react-app/lib/client';
-
-const MenuToggler = function(ev, obj) {
-  if (ev) {
-    ev.preventDefault();
-    ev.stopPropagation();
-  }
-
-  let menuElement = document.getElementById('menu');
-  if (menuElement !== null) {
-    if (obj && obj.onlyClose) {
-      menuElement.classList.remove('menu--opened');
-    } else {
-      menuElement.classList.toggle('menu--opened');
-    }
-  }
-};
+import { Link } from 'react-router';
+import { withPhenomicApi, query } from '@phenomic/preset-react-app/lib/client';
 
 class Menu extends React.Component {
   constructor(props) {
     super(props);
+    console.log('menu props', props);
     this.state = {
       closed: true
     };
@@ -39,7 +17,8 @@ class Menu extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (this.props.name !== nextProps.name) {
+    console.log('componentWillReceiveProps', nextProps, this.props);
+    if (this.props.postName !== nextProps.postName) {
       this.setState({ closed: true });
     }
   }
@@ -104,7 +83,7 @@ class Menu extends React.Component {
 }
 
 const MenuContainer = withPhenomicApi(Menu, props => ({
-  posts: query({ path: 'content/posts', limit: 12 })
+  posts: query({ path: 'posts', limit: 12 })
 }));
 
 export { MenuContainer, Menu };
diff --git a/src/PageHead.js b/src/PageHead.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import Head from 'react-helmet';
+import { Styling } from './Styling';
+
+export class PageHead extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { title, description } = this.props;
+    return (
+      <Head>
+        <html lang="da" /> {/* this is valid react-helmet usage! */}
+        <title>{title}</title>
+        <meta name="description" content={description} />
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link href="/favicon.png" rel="icon" type="image/png" />
+        <Styling />
+      </Head>
+    );
+  }
+}
diff --git a/src/PostListContainer.js b/src/PostListContainer.js
@@ -1,24 +1,21 @@
 import React from 'react';
-import Head from 'react-helmet';
-import { Router, Route, browserHistory, Link } from 'react-router';
-import {
-  createApp,
-  withPhenomicApi,
-  query,
-  BodyRenderer,
-  textRenderer
-} from '@phenomic/preset-react-app/lib/client';
+import { Link } from 'react-router';
+import { withPhenomicApi, query } from '@phenomic/preset-react-app/lib/client';
 import { Layout } from './Layout';
 import { BigLink } from './BigLink';
-import { MenuToggler } from './Menu';
+import { PageHead } from './PageHead';
 
 const PostList = ({ hasError, isLoading, posts }) => {
   if (hasError) {
     return <PageError error={page.error} />;
   }
 
   return (
-    <Layout>
+    <Layout name="allposts">
+      <PageHead
+        title="Tegner Bryggers - Alle indlæg"
+        description="Liste over alle indlæg"
+      />
       <h1 className="list-head">Alle indlæg</h1>
       {isLoading && 'Loading...'}
       {!isLoading &&
@@ -54,7 +51,7 @@ const PostList = ({ hasError, isLoading, posts }) => {
 };
 
 const PostListContainer = withPhenomicApi(PostList, props => ({
-  posts: query({ path: 'content/posts', limit: 12, after: props.params.after })
+  posts: query({ path: 'posts', limit: 12, after: props.params.after })
 }));
 
 export { PostListContainer };