Files
bodyshop/client/src/App/App.js
2019-12-11 18:50:48 -08:00

112 lines
3.5 KiB
JavaScript

import React, { useEffect } from "react";
import { useApolloClient, useQuery } from "@apollo/react-hooks";
import { Switch, Route, Redirect } from "react-router-dom";
import firebase from "../firebase/firebase.utils";
import "./App.css";
//Component Imports
import LandingPage from "../pages/landing/landing.page";
import ManagePage from "../pages/manage/manage.page";
import PrivateRoute from "../utils/private-route";
import SignInPage from "../pages/sign-in/sign-in.page";
import Unauthorized from "../pages/unauthorized/unauthorized.component";
import { auth } from "../firebase/firebase.utils";
import { GET_CURRENT_USER } from "../graphql/local.queries";
import LoadingSpinner from "../components/loading-spinner/loading-spinner.component";
import AlertComponent from "../components/alert/alert.component";
import SignOut from "../components/sign-out/sign-out.component";
import { UPSERT_USER } from "../graphql/user.queries";
export default () => {
const apolloClient = useApolloClient();
useEffect(() => {
//Run the auth code only on the first render.
const unsubscribeFromAuth = auth.onAuthStateChanged(async user => {
if (user) {
let token;
token = await user.getIdToken();
const idTokenResult = await user.getIdTokenResult();
const hasuraClaim =
idTokenResult.claims["https://hasura.io/jwt/claims"];
if (hasuraClaim) {
} else {
// Check if refresh is required.
const metadataRef = firebase
.database()
.ref("metadata/" + user.uid + "/refreshTime");
metadataRef.on("value", async () => {
// Force refresh to pick up the latest custom claims changes.
token = await user.getIdToken(true);
});
}
apolloClient.writeData({
data: {
currentUser: {
email: user.email,
displayName: user.displayName,
token,
uid: user.uid,
photoUrl: user.photoURL,
__typename: "currentUser"
}
}
});
//add the bearer token to the headers.
localStorage.setItem("token", token);
apolloClient
.mutate({
mutation: UPSERT_USER,
variables: { authEmail: user.email, authToken: user.uid }
})
.then()
.catch(error => {
console.log("Upsert error!!!!", error);
});
} else {
apolloClient.writeData({ data: { currentUser: null } });
localStorage.removeItem("token");
}
});
return function cleanup() {
unsubscribeFromAuth();
};
}, [apolloClient]);
const HookCurrentUser = useQuery(GET_CURRENT_USER);
if (HookCurrentUser.loading) return <LoadingSpinner />;
if (HookCurrentUser.error)
return <AlertComponent message={HookCurrentUser.error.message} />;
return (
<div>
<SignOut />
<Switch>
<Route exact path="/" component={LandingPage} />
<Route exact path="/unauthorized" component={Unauthorized} />
<Route
exact
path="/signin"
render={() =>
HookCurrentUser.data.currentUser ? (
<Redirect to="/manage" />
) : (
<SignInPage />
)
}
/>
<PrivateRoute
isAuthorized={HookCurrentUser.data.currentUser ? true : false}
path="/manage"
component={ManagePage}
/>
</Switch>
</div>
);
};