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

@@ -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;
+}

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

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;

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>
   )
 }
 

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>
   )
 }