feat(page common): stub page layout

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

Hide file tree

Showing 5 changed files with 63 additions and 71 deletions.
diff --git a/packages/poolbase-app/src/app/components/FirebaseAuth.tsx b/packages/poolbase-app/src/app/components/FirebaseAuth.tsx
@@ -18,7 +18,6 @@ const firebaseAuthConfig = {
       requireDisplayName: false,
     },
   ],
-  signInSuccessUrl: '/',
   credentialHelper: 'none',
 }
 

diff --git a/packages/poolbase-app/src/app/components/PageLayout.tsx b/packages/poolbase-app/src/app/components/PageLayout.tsx
@@ -0,0 +1,54 @@
+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';
+import FirebaseAuth from './FirebaseAuth';
+
+const PageLayout: React.FC<PropsWithAuthUserInfo> = props => {
+  const { AuthUserInfo, children } = props;
+  const AuthUser = get(AuthUserInfo, 'AuthUser', null);
+  return (
+    <div>
+      {!AuthUser ? (
+        <div>
+          <p>Sign in</p>
+          <div>
+            <FirebaseAuth />
+          </div>
+        </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>
+          <div>{children}</div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default withAuthUserInfo(PageLayout);
diff --git a/packages/poolbase-app/src/app/pages/_app.tsx b/packages/poolbase-app/src/app/pages/_app.tsx
@@ -2,18 +2,14 @@ import React from 'react';
 import App from 'next/app';
 import { ThemeProvider } from 'theme-ui';
 
-import Header from '../components/Header';
 import theme from '../theme';
 
 class MyApp extends App {
   render() {
     const { Component, pageProps } = this.props;
     return (
       <ThemeProvider theme={theme}>
-        <Header />
-        <main>
           <Component {...pageProps} />
-        </main>
       </ThemeProvider>
     );
   }

diff --git a/packages/poolbase-app/src/app/pages/auth.tsx b/packages/poolbase-app/src/app/pages/auth.tsx
diff --git a/packages/poolbase-app/src/app/pages/index.tsx b/packages/poolbase-app/src/app/pages/index.tsx
@@ -1,64 +1,24 @@
 import * as React from 'react';
 import { NextPage } from 'next';
-import { Styled } from 'theme-ui';
 import { get } from 'lodash/object';
-import Link from 'next/link';
-import Router from 'next/router';
 import withAuthUser from '../utils/pageWrappers/withAuthUser';
-import withAuthUserInfo from '../utils/pageWrappers/withAuthUserInfo';
-import logout from '../utils/auth/logout';
-import {PropsWithAuthUserInfo} from '../interfaces'
-import firebase from 'firebase/app';
 
+import firebase from 'firebase/app';
+import PageLayout from '../components/PageLayout'
 import initFirebase from '../utils/auth/initFirebase';
 initFirebase();
 
-type HomePageProps = PropsWithAuthUserInfo & {
+type HomePageProps = {
   data: any;
 };
 
 const HomePage = (props: HomePageProps) => {
-  const { AuthUserInfo, data } = props;
-  const AuthUser = get(AuthUserInfo, 'AuthUser', null);
+  const { data } = props;
   return (
-    <div>
-      <Styled.h1>Welcome</Styled.h1>
-      {!AuthUser ? (
-        <p>
-          You are not signed in.{' '}
-          <Link href={'/auth'}>
-            <a>Sign in</a>
-          </Link>
-        </p>
-      ) : (
-        <div>
-          <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('/auth');
-              } catch (e) {
-                console.error(e);
-              }
-            }}
-          >
-            Log out
-          </p>
-          <div>
-            {data.map(page => (
-              <h3 key={page.id}>{page.title}</h3>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
+    <PageLayout>
+      {data.map(page => (<h3 key={page.id}>{page.title}</h3>
+      ))}
+    </PageLayout>
   );
 };
 
@@ -86,4 +46,4 @@ HomePage.defaultProps = {
   AuthUserInfo: null,
 };
 
-export default withAuthUser(withAuthUserInfo(HomePage));
+export default withAuthUser(HomePage);