diff --git a/package-lock.json b/package-lock.json index 44bebf7..c0a066b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1141,6 +1141,87 @@ "resolved": "https://registry.npmjs.org/@editorjs/list/-/list-1.5.0.tgz", "integrity": "sha512-LzZuJwJ2HxCkuaPrp3zYdQGvMC8dzXjewqWEBZ9mpq0fVwBAse4o9QB2mWvJxZ93UtLqQE7f9vrbHotG2uW9Qg==" }, + "@emotion/cache": { + "version": "10.0.29", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", + "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==", + "requires": { + "@emotion/sheet": "0.9.4", + "@emotion/stylis": "0.8.5", + "@emotion/utils": "0.11.3", + "@emotion/weak-memoize": "0.2.5" + } + }, + "@emotion/core": { + "version": "10.0.34", + "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.34.tgz", + "integrity": "sha512-Kcs8WHZG1NgaVFQsSpgN07G0xpfPAKUclwKvUqKrYrJovezl9uTz++1M4JfXHrgFVEiJ5QO46hMo1ZDDfvY/tw==", + "requires": { + "@babel/runtime": "^7.5.5", + "@emotion/cache": "^10.0.27", + "@emotion/css": "^10.0.27", + "@emotion/serialize": "^0.11.15", + "@emotion/sheet": "0.9.4", + "@emotion/utils": "0.11.3" + } + }, + "@emotion/css": { + "version": "10.0.27", + "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz", + "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==", + "requires": { + "@emotion/serialize": "^0.11.15", + "@emotion/utils": "0.11.3", + "babel-plugin-emotion": "^10.0.27" + } + }, + "@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + }, + "@emotion/serialize": { + "version": "0.11.16", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz", + "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==", + "requires": { + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/unitless": "0.7.5", + "@emotion/utils": "0.11.3", + "csstype": "^2.5.7" + } + }, + "@emotion/sheet": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz", + "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==" + }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, + "@emotion/utils": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" + }, + "@emotion/weak-memoize": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", + "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" + }, "@firebase/analytics": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.4.1.tgz", @@ -3217,6 +3298,30 @@ "object.assign": "^4.1.0" } }, + "babel-plugin-emotion": { + "version": "10.0.33", + "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz", + "integrity": "sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/serialize": "^0.11.16", + "babel-plugin-macros": "^2.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^1.0.5", + "find-root": "^1.1.0", + "source-map": "^0.5.7" + }, + "dependencies": { + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" + } + } + }, "babel-plugin-istanbul": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz", @@ -3327,6 +3432,11 @@ "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.6.tgz", "integrity": "sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA==" }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=" + }, "babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", @@ -6482,6 +6592,11 @@ "pkg-dir": "^3.0.0" } }, + "find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "find-up": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", @@ -12665,6 +12780,11 @@ "tiny-warning": "^1.0.0" } }, + "react-router-scroll-top": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/react-router-scroll-top/-/react-router-scroll-top-0.2.1.tgz", + "integrity": "sha512-rseL7IqA9wt1R/QIGbTFsO5O1bIXmd0f+W208rKsAYjedSrNCsu3Q8yLJZtBmdESakfAZJRGw5A6FJwRkbvQ+A==" + }, "react-scripts": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz", @@ -12757,6 +12877,42 @@ "react-transition-group": "^2.5.0" } }, + "react-toast-notifications": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/react-toast-notifications/-/react-toast-notifications-2.4.0.tgz", + "integrity": "sha512-8tkrbNh7LxkiFmtqAL/AiI55efIeI+fBk3c6ImsiZ0VObb4yvOq0cqYuJHyUiv9fuD2aBxvXGVH+n4Snt8qoWA==", + "requires": { + "@emotion/core": "^10.0.14", + "react-transition-group": "^4.3.0" + }, + "dependencies": { + "csstype": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.2.tgz", + "integrity": "sha512-ofovWglpqoqbfLNOTBNZLSbMuGrblAf1efvvArGKOZMBrIoJeu5UsAipQolkijtyQx5MtAzT/J9IHj/CEY1mJw==" + }, + "dom-helpers": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz", + "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, + "react-transition-group": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz", + "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + } + } + }, "react-transition-group": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", diff --git a/package.json b/package.json index 5214418..1fcca0a 100644 --- a/package.json +++ b/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", diff --git a/src/App.js b/src/App.js index 14c9e82..6c196a3 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,12 @@ -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' @@ -12,12 +14,14 @@ 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 ( - <> + { loggedIn ? ( -
- -
-
- - - - - - - ()} /> - -
-
- ) : ( + +
+ +
+
+ + + + + + + ()} /> + +
+
+ + ) : ( <> {/* */} ) } - - ) + + ); } export default App diff --git a/src/assets/img/people-reading.svg b/src/assets/img/people-reading.svg new file mode 100644 index 0000000..8ca5eda --- /dev/null +++ b/src/assets/img/people-reading.svg @@ -0,0 +1 @@ +people-reading \ No newline at end of file diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx index 9c87958..834153a 100644 --- a/src/components/Button/index.jsx +++ b/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'), diff --git a/src/components/DropDown/index.jsx b/src/components/DropDown/index.jsx index e75cacd..abf5bfa 100644 --- a/src/components/DropDown/index.jsx +++ b/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 ( -