From 7207d98c7ac853f05054931d7e241a44e160f23b Mon Sep 17 00:00:00 2001
From: cursorial <cursorial@users.noreply.github.com>
Date: Wed, 16 Jun 2021 13:32:10 +0100
Subject: [PATCH] refactor(examples:thoughts): Create a reusable Layout
 component for page layout (#253)

Fixes #252

In order to remove duplication for the TopNavbar and the TagsSidebar on
these pages we need a base Layout component. This PR eliminates the
duplication we were seeing before.

Co-authored-by: Michael Curry <michael.curry@thebeansgroup.com>
---
 examples/thoughts/ext/Layout.css      | 12 ++++++++++++
 examples/thoughts/ext/Layout.js       | 16 ++++++++++++++++
 examples/thoughts/ext/Main.css        | 13 -------------
 examples/thoughts/ext/MainPage.js     | 15 ++++-----------
 examples/thoughts/ext/ThoughtsPage.js | 22 ++++++++--------------
 5 files changed, 40 insertions(+), 38 deletions(-)
 create mode 100644 examples/thoughts/ext/Layout.css
 create mode 100644 examples/thoughts/ext/Layout.js

diff --git a/examples/thoughts/ext/Layout.css b/examples/thoughts/ext/Layout.css
new file mode 100644
index 000000000..ffdd460c3
--- /dev/null
+++ b/examples/thoughts/ext/Layout.css
@@ -0,0 +1,12 @@
+.layout-root {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.layout-content {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+}
diff --git a/examples/thoughts/ext/Layout.js b/examples/thoughts/ext/Layout.js
new file mode 100644
index 000000000..3539cd9ce
--- /dev/null
+++ b/examples/thoughts/ext/Layout.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import TopNavbar from './TopNavbar'
+import TagsSidebar from './TagsSidebar'
+import './Layout.css'
+
+const Layout = ({ user, activeTag, children }) => (
+  <div className='layout-root'>
+    <TopNavbar user={user} />
+    <div className='layout-content'>
+      <TagsSidebar active={activeTag} />
+      {children}
+    </div>
+  </div>
+)
+
+export default Layout
diff --git a/examples/thoughts/ext/Main.css b/examples/thoughts/ext/Main.css
index a408f7a1b..88bcc79fe 100644
--- a/examples/thoughts/ext/Main.css
+++ b/examples/thoughts/ext/Main.css
@@ -4,19 +4,6 @@
     box-sizing: border-box;
 }
 
-.main-page {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.main-container {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-}
-
 button.plain {
     border: none;
     outline: none;
diff --git a/examples/thoughts/ext/MainPage.js b/examples/thoughts/ext/MainPage.js
index c6b856726..69a6aa1af 100644
--- a/examples/thoughts/ext/MainPage.js
+++ b/examples/thoughts/ext/MainPage.js
@@ -4,11 +4,10 @@ import { useHistory } from 'react-router-dom'
 
 import './Main.css'
 import './Thought.css'
-import TagsSidebar from './TagsSidebar.js'
-import TopNavbar from './TopNavbar.js'
 import { getTagColor } from './tag.js'
 
 import createThought from '@wasp/actions/createThought'
+import Layout from './Layout'
 
 // TODO:
 //   - Rename this file to Thought.js.
@@ -29,16 +28,10 @@ import createThought from '@wasp/actions/createThought'
 //   - Refactor and improve code.
 
 const MainPage = ({ user }) => {
-  // TODO: Remove duplication! layout, navbar, sidebar, ...
   return (
-    <div className="main-page">
-      <TopNavbar user={user} />
-
-      <div className="main-container">
-        <TagsSidebar />
-        <Thought />
-      </div>
-    </div>
+    <Layout user={user}>
+      <Thought />
+    </Layout>
   )
 }
 
diff --git a/examples/thoughts/ext/ThoughtsPage.js b/examples/thoughts/ext/ThoughtsPage.js
index 243e5032c..cd710070f 100644
--- a/examples/thoughts/ext/ThoughtsPage.js
+++ b/examples/thoughts/ext/ThoughtsPage.js
@@ -1,12 +1,10 @@
 import React from 'react'
+import Layout from './Layout'
 import ReactMarkdown from 'react-markdown'
 import { useLocation } from 'react-router-dom'
 
-import './Main.css'
 import './ThoughtsPage.css'
 import { getTagColor } from './tag.js'
-import TagsSidebar from './TagsSidebar.js'
-import TopNavbar from './TopNavbar.js'
 
 import getThoughts from '@wasp/queries/getThoughts'
 import { useQuery } from '@wasp/queries'
@@ -18,19 +16,15 @@ const ThoughtsPage = (props) => {
   // TODO: Handle possible errors and fetching.
   const { data: thoughts } = useQuery(getThoughts, { tagName: tag })
 
-  // TODO: Duplication! layout, navbar, sidebar, ...
   return (
-    <div className="main-page">
-      <TopNavbar user={props.user} />
-
-      <div className="main-container">
-        <TagsSidebar active={tag || '_all'} />
-
-        <div className="center-container">
-          <ThoughtsList thoughts={thoughts} />
-        </div>
+    <Layout
+      user={props.user}
+      activeTag={tag || '_all'}
+    >
+      <div className="center-container">
+        <ThoughtsList thoughts={thoughts} />
       </div>
-    </div>
+    </Layout>
   )
 }