User Onboarding WIP

package.json

@@ -18,7 +18,9 @@
     "react-dom": "^16.13.1",
     "react-feather": "^2.0.8",
     "react-router-dom": "^5.2.0",
+    "react-router-scroll-top": "^0.2.1",
     "react-scripts": "3.4.1",
+    "react-toast-notifications": "^2.4.0",
     "react-xmasonry": "^3.0.3",
     "recharts": "^1.8.5",
     "tailwindcss": "^1.5.1",

src/App.js

@@ -1,23 +1,27 @@
-import React, { createContext, useState, useEffect } from 'react'
+import React, { useEffect } from 'react'
 import { Redirect, Route, Switch } from 'react-router-dom'
+import { ToastProvider } from 'react-toast-notifications'
+
+import Landing from './pages/Landing'
 
 import Header from './components/Header'
 import Sidebar from './components/Sidebar'
 import Dashboard from './pages/Dashboard'
-import Landing from './pages/Landing'
 import ReadingLibrary from './pages/ReadingLibrary'
 import ItemProfile from './pages/ItemProfile'
 
 import * as firebase from 'firebase'
 import firebaseConfig from './firebase.config'
 
 import { UserContainer } from './provider/containers'
+import { OnboardingContainer } from './provider/containers'
 
 firebase.initializeApp(firebaseConfig)
 
 function App() {
 
   const container = UserContainer.useContainer()
+  const newUser = true
 
   const {
     loggedIn, setLoggedIn,
@@ -48,31 +52,33 @@ function App() {
   }, [])
 
   return (
-    <>
+    <ToastProvider>
       { loggedIn ? (
-        <div className="flex" style={{ height: '120vh' }}>
-          <Sidebar />
-          <div className="mx-6 w-full flex flex-col h-screen">
-            <Header />
-            <Switch>
-              <Route exact path="/" component={Dashboard}>
-                <Redirect to="/dashboard" />
-              </Route>
-              <Route path="/dashboard" component={Dashboard} />
-              <Route exact path="/reading-library" component={ReadingLibrary} />
-              <Route path="/reading-library/:id" render={({ match }) => (<ItemProfile id={match.params.id} />)} />
-            </Switch>
-          </div>
-        </div>
-      ) : (
+          <OnboardingContainer.Provider>
+            <div className="flex" style={{ height: '120vh' }}>
+              <Sidebar />
+              <div className="mx-6 w-full flex flex-col h-screen">
+                <Header />
+                <Switch>
+                  <Route exact path="/" component={Dashboard}>
+                    <Redirect to="/dashboard" />
+                  </Route>
+                  <Route path="/dashboard" component={Dashboard} />
+                  <Route exact path="/reading-library" component={ReadingLibrary} />
+                  <Route path="/reading-library/:id" render={({ match }) => (<ItemProfile id={match.params.id} />)} />
+                </Switch>
+              </div>
+            </div>
+          </OnboardingContainer.Provider>
+        ) : (
           <>
             <Route exact path="/" component={Landing} />
             {/* <Redirect to="/" /> */}
           </>
         )
       }
-    </>
-  )
+    </ToastProvider>
+  );
 }
 
 export default App

src/components/Button/index.jsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 
 import { ButtonSize } from './style';
 
-export default function Button({ children, color, onClick, outline, size = 'md' }) {
+export default function Button({ children, className = '', color, onClick, outline, size = 'md' }) {
 
   let btnColor = ""
 
@@ -14,7 +14,7 @@ export default function Button({ children, color, onClick, outline, size = 'md'
     btnColor = `text-white bg-${color}-500 focus:outline-none hover:bg-${color}-600`
   }
 
-  const btnClass = classNames('font-semibold items-center flex justify-center items-center rounded-lg ', btnColor, {
+  const btnClass = classNames('font-semibold items-center flex justify-center items-center rounded-lg ', btnColor, className, {
     [`${ButtonSize.sm}`]: (size === 'sm'),
     [`${ButtonSize.md}`]: (size === 'md'),
     [`${ButtonSize.lg}`]: (size === 'lg'),

src/components/DropDown/index.jsx

@@ -1,10 +1,12 @@
 import React from 'react'
 
-export default function DropDown({ label, options }) {
+export default function Dropdown({ label, options }) {
 
   return (
-    <label className="block mt-4">
-      <span className="text-gray-700">{label}</span>
+    <label className="block">
+      { label &&
+        <span className="text-gray-700 mt-4">{label}</span>
+      }
       <select className="form-select mt-1 block w-full">
         { options.length &&
           options.map((option, id) => (

src/components/PageWrapper/index.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import { OnboardingContainer } from '../../provider/containers'
+
+import Onboarding from '../../pages/Onboarding/'
+
+export default function PageWrapper({ children }) {
+
+  const { initOnboarding } = OnboardingContainer.useContainer()
+
+  // TO DO: pull this from the state
+  const newUser = true
+
+  return (
+    <div className="mt-10">
+      {/* if it's a new user, then
+      render onboarding for all pages */}
+      { newUser && !initOnboarding
+        ? <Onboarding />
+        : {children}
+      }
+    </div>
+  )
+}