From 7f72c7a37f6b27e4b186f8301aa599eb5f4d8af1 Mon Sep 17 00:00:00 2001 From: David Ballester Mena Date: Sat, 18 Apr 2020 12:41:22 +0200 Subject: [PATCH] feat: do not load local graphs until firebase auth is resolved --- .../authentication.component.js | 2 +- src/ducks/auth.duck.js | 8 +- src/scenes/welcome/welcome.component.js | 74 ++++++++++++++----- src/scenes/welcome/welcome.container.js | 5 +- src/services/google-auth.js | 4 +- 5 files changed, 69 insertions(+), 24 deletions(-) diff --git a/src/components/authentication/authentication.component.js b/src/components/authentication/authentication.component.js index 1da79b2..9ff76cd 100644 --- a/src/components/authentication/authentication.component.js +++ b/src/components/authentication/authentication.component.js @@ -13,7 +13,7 @@ export default function Authentication({ setAuth, setAuthProvider, isSignedIn, i const [error, setError] = useState(false); useEffect(() => { if (!authProvider) { - initializeAuthProvider(({ id, name, imageUrl }) => setAuth(id, name, imageUrl), setAuthProvider); + initializeAuthProvider(({ id, name, imageUrl }) => setAuth(id, name, imageUrl), setAuth, setAuthProvider); } }, [authProvider, setAuth, setAuthProvider]); if (!isSignedIn) { diff --git a/src/ducks/auth.duck.js b/src/ducks/auth.duck.js index 9080137..ee5b1ca 100644 --- a/src/ducks/auth.duck.js +++ b/src/ducks/auth.duck.js @@ -4,6 +4,7 @@ export const AUTH_UNSET = 'grapher/Auth/UNSET'; const initialState = { signedIn: false, + initialized: false, }; export default function reducer(state = initialState, action) { @@ -19,7 +20,8 @@ export default function reducer(state = initialState, action) { const { id, name, imageUrl } = action.payload; return { ...state, - signedIn: true, + initialized: true, + signedIn: !!id, id, name, imageUrl, @@ -89,3 +91,7 @@ export function getAuthProvider(state) { export function getId(state) { return authSelector(state).id; } + +export function isInitialized(state) { + return authSelector(state).initialized; +} diff --git a/src/scenes/welcome/welcome.component.js b/src/scenes/welcome/welcome.component.js index 0eb23cb..6e521a0 100644 --- a/src/scenes/welcome/welcome.component.js +++ b/src/scenes/welcome/welcome.component.js @@ -1,4 +1,4 @@ -import React, { forwardRef, useEffect } from 'react'; +import React, { forwardRef } from 'react'; import { Link as RouterLink } from 'react-router-dom'; import AppBar from '@material-ui/core/AppBar'; @@ -15,6 +15,7 @@ import { withStyles, useTheme } from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; import GitHubIcon from '@material-ui/icons/GitHub'; import Zoom from '@material-ui/core/Zoom'; +import Skeleton from '@material-ui/lab/Skeleton'; import NewGraphDialog from './new-graph'; import GraphCard from './graph-card'; @@ -53,13 +54,54 @@ const styles = (theme) => ({ }, }); -function Welcome({ openNewGraph, openGraph, graphNames, openImportGraph, readNames, classes }) { +function GridListWrapper({ className, children }) { const theme = useTheme(); const bigScreen = useMediaQuery(theme.breakpoints.up('md')); - useEffect(() => { - readNames(); - }, [readNames]); + return ( + + {children} + + ); +} + +function SkeletonGraphs({ show, className }) { + if (!show) { + return null; + } + return ( + + {new Array(5).fill(undefined).map((_, index) => ( + + + + ))} + + ); +} + +function GraphCards({ show, graphNames, openNewGraph, openGraph, className }) { + if (!show) { + return null; + } + return ( + + {graphNames.map(([graphId, graphName], index) => ( + + + openGraph(graphId)} /> + + + ))} + + + + + + + ); +} +function Welcome({ openNewGraph, openGraph, graphNames, openImportGraph, isAuthInitialized, classes }) { return ( <> @@ -89,20 +131,14 @@ function Welcome({ openNewGraph, openGraph, graphNames, openImportGraph, readNam Import graph - - {graphNames.map(([graphId, graphName], index) => ( - - - openGraph(graphId)} /> - - - ))} - - - - - - + + diff --git a/src/scenes/welcome/welcome.container.js b/src/scenes/welcome/welcome.container.js index 13f0bfd..46ffa4b 100644 --- a/src/scenes/welcome/welcome.container.js +++ b/src/scenes/welcome/welcome.container.js @@ -2,12 +2,14 @@ import { connect } from 'react-redux'; import Welcome from './welcome.component'; import { openDialog, DIALOG_IDS } from '../../ducks/dialog.duck'; -import { getGraphNamesAsArray, readNames } from './welcome.duck'; +import { getGraphNamesAsArray } from './welcome.duck'; import { openGraph } from '../../ducks/navigation.duck'; +import { isInitialized } from '../../ducks/auth.duck'; function mapStateToProps(state) { return { graphNames: getGraphNamesAsArray(state), + isAuthInitialized: isInitialized(state), }; } @@ -16,7 +18,6 @@ function mapDispatchToProps(dispatch) { openNewGraph: () => dispatch(openDialog(DIALOG_IDS.NEW_GRAPH)), openGraph: (graphId) => dispatch(openGraph(graphId)), openImportGraph: () => dispatch(openDialog(DIALOG_IDS.IMPORT_GRAPH)), - readNames: () => dispatch(readNames()), }; } diff --git a/src/services/google-auth.js b/src/services/google-auth.js index d248d0b..f75d0a4 100644 --- a/src/services/google-auth.js +++ b/src/services/google-auth.js @@ -14,7 +14,7 @@ function getUserData(user) { }; } -export function initializeAuthProvider(onUserLoggedIn, setAuthProvider) { +export function initializeAuthProvider(onUserLoggedIn, onUserNotLoggedIn, setAuthProvider) { const authProvider = new firebase.auth.GoogleAuthProvider(); authProvider.addScope('https://www.googleapis.com/auth/firebase.database'); setAuthProvider(authProvider); @@ -22,6 +22,8 @@ export function initializeAuthProvider(onUserLoggedIn, setAuthProvider) { onAuthStateChangedUnsubscribe = firebase.auth().onAuthStateChanged((currentUser) => { if (!!currentUser) { onUserLoggedIn(getUserData(currentUser)); + } else { + onUserNotLoggedIn(); } }); }