feat(layout): move logout and user info to header

ComposableWeb · Feb 10, 2020 · a9b62b2 · a9b62b2
1 parent 5cc6555
commit a9b62b2
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 23 deletions.
diff --git a/packages/poolbase-app/src/app/components/Header.tsx b/packages/poolbase-app/src/app/components/Header.tsx
@@ -1,10 +1,32 @@
 import React from 'react';
 import { useColorMode } from 'theme-ui';
+import Router from 'next/router';
 
-export default function Header() {
+import logout from '../utils/auth/logout';
+
+export default function Header({authUser}) {
   const [colorMode, setColorMode] = useColorMode();
   return (
     <header>
+      <p>You're signed in. Email: {authUser.email}</p>
+      <p
+        style={{
+          display: 'inlinelock',
+          color: 'blue',
+          textDecoration: 'underline',
+          cursor: 'pointer',
+        }}
+        onClick={async () => {
+          try {
+            await logout();
+            Router.push('/');
+          } catch (e) {
+            console.error(e);
+          }
+        }}
+      >
+        Log out
+      </p>
       <button onClick={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}>
         Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
       </button>

diff --git a/packages/poolbase-app/src/app/components/PageLayout.tsx b/packages/poolbase-app/src/app/components/PageLayout.tsx
@@ -1,10 +1,9 @@
 import React, { Props } from 'react';
 import { get } from 'lodash/object';
 import Link from 'next/link';
-import Router from 'next/router';
 import { Styled } from 'theme-ui';
 
-import logout from '../utils/auth/logout';
+
 import { PropsWithAuthUserInfo } from '../interfaces';
 import withAuthUserInfo from '../utils/pageWrappers/withAuthUserInfo';
 import Header from './Header';
@@ -24,26 +23,7 @@ const PageLayout: React.FC<PropsWithAuthUserInfo> = props => {
         </div>
       ) : (
         <div>
-          <Header />
-          <p>You're signed in. Email: {AuthUser.email}</p>
-          <p
-            style={{
-              display: 'inlinelock',
-              color: 'blue',
-              textDecoration: 'underline',
-              cursor: 'pointer',
-            }}
-            onClick={async () => {
-              try {
-                await logout();
-                Router.push('/')
-              } catch (e) {
-                console.error(e);
-              }
-            }}
-          >
-            Log out
-          </p>
+          <Header authUser={AuthUser} />
           <div>{children}</div>
         </div>
       )}