admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Complete rewrite of local state management.

Browse Source
This commit is contained in:
Patrick Fic
2019-12-06 23:30:15 -08:00
parent 8a72294c91
commit 4f3d917e06
17 changed files with 366 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/package.json
View File

@@ -4,9 +4,10 @@
"private": true,
"license": "UNLICENSED",
"dependencies": {
"@apollo/react-hooks": "^3.1.3",
"antd": "^3.26.0",
"apollo-boost": "^0.4.4",
"apollo-link-context": "^1.0.19",
"apollo-link-logger": "^1.2.3",
"dotenv": "^8.2.0",
"firebase": "^7.5.0",
"graphql": "^14.5.8",

112
client/src/App/App.container.jsx
View File

@@ -1,91 +1,29 @@
//Baselined on https://blog.hasura.io/authentication-and-authorization-using-hasura-and-firebase/
import React from "react";
import { Mutation, Query } from "react-apollo";
import { GET_CURRENT_USER, SET_CURRENT_USER } from "../graphql/local.queries";
import React, { useState, useEffect } from "react";
import firebase from "../firebase/firebase.utils";
import App from "./App";
import { gql } from "apollo-boost";
import { HttpLink } from "apollo-link-http";
import ApolloClient from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import Spin from "../components/loading-spinner/loading-spinner.component";
const UPSERT_USER = gql`
mutation upsert_user($authEmail: String!, $authToken: String!) {
insert_users(
objects: [{ email: $authEmail, authid: $authToken }]
on_conflict: { constraint: users_pkey, update_columns: [authid] }
) {
returning {
authid
}
}
}
`;
const SET_CURRENT_USER = gql`
mutation SetCurrentUser($user: User!) {
setCurrentUser(user: $user) @client
}
`;
const client = new ApolloClient({
link: new HttpLink({
uri: process.env.REACT_APP_GRAPHQL_ENDPOINT
}),
cache: new InMemoryCache()
});
export default function Auth() {
const [authState, setAuthState] = useState({ status: "loading" });
useEffect(() => {
return firebase.auth().onAuthStateChanged(async user => {
if (user) {
console.log("Current User:", user);
client
.mutate({
mutation: UPSERT_USER,
variables: { authEmail: user.email, authToken: user.uid }
})
.then(r => console.log("Successful Upsert", r))
.catch(error => console.log("Upsert error!!!!", error));
const token = await user.getIdToken();
const idTokenResult = await user.getIdTokenResult();
const hasuraClaim =
idTokenResult.claims["https://hasura.io/jwt/claims"];
if (hasuraClaim) {
setAuthState({ status: "in", user, token });
} 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.
const token = await user.getIdToken(true);
setAuthState({ status: "in", user, token });
});
}
} else {
setAuthState({ status: "out" });
}
});
}, []);
let content;
if (authState.status === "loading") {
content = <Spin />;
} else {
content = (
<>
<App authState={authState} />
</>
);
}
return <div className="app-container">{content}</div>;
}
export default () => {
return (
<Query query={GET_CURRENT_USER}>
{({ loading, error, data: { currentUser } }) => {
if (loading) return <Spin />;
if (error) return error.message;
return (
<Mutation mutation={SET_CURRENT_USER}>
{setCurrentUser => (
<App
currentUser={currentUser}
setCurrentUser={user => {
setCurrentUser({ variables: { user } });
}}
/>
)}
</Mutation>
);
}}
</Query>
);
};

78
client/src/App/App.container.jsx.bak Normal file
View File

@@ -0,0 +1,78 @@
//Baselined on https://blog.hasura.io/authentication-and-authorization-using-hasura-and-firebase/
import React, { useState, useEffect } from "react";
import firebase from "../firebase/firebase.utils";
import App from "./App";
import { gql } from "apollo-boost";
import { HttpLink } from "apollo-link-http";
import ApolloClient from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import Spin from "../components/loading-spinner/loading-spinner.component";
const UPSERT_USER = gql`
mutation upsert_user($authEmail: String!, $authToken: String!) {
insert_users(
objects: [{ email: $authEmail, authid: $authToken }]
on_conflict: { constraint: users_pkey, update_columns: [authid] }
) {
returning {
authid
}
}
}
`;
export default function Auth() {
const [authState, setAuthState] = useState({ status: "loading" });
useEffect(() => {
return firebase.auth().onAuthStateChanged(async user => {
if (user) {
console.log("Current User:", user);
client
.mutate({
mutation: UPSERT_USER,
variables: { authEmail: user.email, authToken: user.uid }
})
.then(r => console.log("Successful Upsert", r))
.catch(error => console.log("Upsert error!!!!", error));
const token = await user.getIdToken();
const idTokenResult = await user.getIdTokenResult();
const hasuraClaim =
idTokenResult.claims["https://hasura.io/jwt/claims"];
if (hasuraClaim) {
setAuthState({ status: "in", user, token });
} 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.
const token = await user.getIdToken(true);
setAuthState({ status: "in", user, token });
});
}
} else {
setAuthState({ status: "out" });
}
});
}, []);
let content;
if (authState.status === "loading") {
content = <Spin />;
} else {
content = (
<>
<App authState={authState} />
</>
);
}
return <div className="app-container">{content}</div>;
}

148
client/src/App/App.js
View File

@@ -1,71 +1,105 @@
import React from "react";
import { Switch, Route, Redirect } from "react-router";
import { ApolloProvider } from "react-apollo";
import { HttpLink } from "apollo-link-http";
import ApolloClient from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { resolvers, typeDefs } from "../graphql/resolvers";
import initialState from "../graphql/initial-state";
import { gql } from "apollo-boost";
//Styling imports
import { Switch, Route } from "react-router-dom";
import firebase from "../firebase/firebase.utils";
import "./App.css";
//Component Imports
import LandingPage from "../pages/landing/landing.page";
import Manage from "../pages/manage/manage.page";
import PrivateRoute from "../utils/private-route";
import SignInContainer from "../pages/sign-in/sign-in.container";
import SignInPage from "../pages/sign-in/sign-in.page";
import Unauthorized from "../pages/unauthorized/unauthorized.component";
const graphqlEndpoint = process.env.REACT_APP_GRAPHQL_ENDPOINT;
import { auth } from "../firebase/firebase.utils";
export default function App({ authState }) {
const isIn = authState.status === "in";
const headers = isIn ? { Authorization: `Bearer ${authState.token}` } : {};
const httpLink = new HttpLink({
uri: graphqlEndpoint,
headers
});
const client = new ApolloClient({
link: httpLink,
cache: new InMemoryCache(),
resolvers,
typeDefs
});
class App extends React.Component {
unsubscribeFromAuth = null;
//Init local state.
client.writeData({
data: {
...initialState,
currentUser: {
__typename: null,
email: authState.user ? authState.user.email : null,
displayName: authState.user ? authState.user.displayName : null
componentDidMount() {
const { setCurrentUser } = this.props;
this.unsubscribeFromAuth = auth.onAuthStateChanged(async user => {
console.log("Current User:", user);
if (user) {
// client
// .mutate({
// mutation: UPSERT_USER,
// variables: { authEmail: user.email, authToken: user.uid }
// })
// .then(r => console.log("Successful Upsert", r))
// .catch(error => console.log("Upsert error!!!!", error));
const token = await user.getIdToken();
const idTokenResult = await user.getIdTokenResult();
const hasuraClaim =
idTokenResult.claims["https://hasura.io/jwt/claims"];
if (hasuraClaim) {
setCurrentUser({
email: user.email,
displayName: user.displayName,
token
});
} 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.
const token = await user.getIdToken(true);
setCurrentUser({
email: user.email,
displayName: user.displayName,
token
});
});
}
//add the bearer token to the headers.
localStorage.setItem("token", token);
} else {
setCurrentUser({
email: null,
displayName: null,
token: null
});
localStorage.removeItem("token");
}
}
});
});
}
return (
<ApolloProvider client={client}>
<div>{authState.status}</div>
<Switch>
<Route exact path="/" component={LandingPage} />
<Route exact path="/unauthorized" component={Unauthorized} />
<Route
exact
path="/signin"
render={() =>
authState.status == "in" ? (
<Redirect to="/manage" />
) : (
<SignInContainer />
)
}
/>
{/* <Route path="/signin" component={SignInContainer} /> */}
<PrivateRoute isAuthorized={isIn} path="/manage" component={Manage} />
</Switch>
</ApolloProvider>
);
componentWillUnmount() {
this.unsubscribeFromAuth();
}
render() {
return (
<div>
<Switch>
<Route exact path="/" component={LandingPage} />
<Route exact path="/unauthorized" component={Unauthorized} />
{/* <Route
exact
path="/signin"
render={() =>
this.props.currentUser.email != null ? (
<Redirect to="/manage" />
) : (
<SignInContainer />
)
}
/> */}
<Route path="/signin" component={SignInPage} />
<PrivateRoute
isAuthorized={this.props.currentUser.email != null}
path="/manage"
component={Manage}
/>
</Switch>
</div>
);
}
}
export default App;

71
client/src/App/App.js.bak Normal file
View File

@@ -0,0 +1,71 @@
import React from "react";
import { Switch, Route, Redirect } from "react-router";
import { ApolloProvider } from "react-apollo";
import { HttpLink } from "apollo-link-http";
import ApolloClient from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { resolvers, typeDefs } from "../graphql/resolvers";
import initialState from "../graphql/initial-state";
import { gql } from "apollo-boost";
//Styling imports
import "./App.css";
//Component Imports
import LandingPage from "../pages/landing/landing.page";
import Manage from "../pages/manage/manage.page";
import PrivateRoute from "../utils/private-route";
import SignInContainer from "../pages/sign-in/sign-in.container";
import Unauthorized from "../pages/unauthorized/unauthorized.component";
const graphqlEndpoint = process.env.REACT_APP_GRAPHQL_ENDPOINT;
export default function App({ authState }) {
const isIn = authState.status === "in";
const headers = isIn ? { Authorization: `Bearer ${authState.token}` } : {};
const httpLink = new HttpLink({
uri: graphqlEndpoint,
headers
});
const client = new ApolloClient({
link: httpLink,
cache: new InMemoryCache(),
resolvers,
typeDefs
});
//Init local state.
client.writeData({
data: {
...initialState,
currentUser: {
__typename: null,
email: authState.user ? authState.user.email : null,
displayName: authState.user ? authState.user.displayName : null
}
}
});
return (
<ApolloProvider client={client}>
<div>{authState.status}</div>
<Switch>
<Route exact path="/" component={LandingPage} />
<Route exact path="/unauthorized" component={Unauthorized} />
<Route
exact
path="/signin"
render={() =>
authState.status == "in" ? (
<Redirect to="/manage" />
) : (
<SignInContainer />
)
}
/>
{/* <Route path="/signin" component={SignInContainer} /> */}
<PrivateRoute isAuthorized={isIn} path="/manage" component={Manage} />
</Switch>
</ApolloProvider>
);
}

8
client/src/components/header/header.component.jsx
View File

@@ -1,4 +1,4 @@
import React, { Component, useState } from "react";
import React from "react";
import { Link } from "react-router-dom";
import { Menu, Icon } from "antd";
import "./header.styles.scss";
@@ -7,9 +7,9 @@ import SignOut from "../sign-out/sign-out.component";
export default ({ selectedNavItem, navItems }) => {
const handleClick = e => {
console.log("click ", e);
this.setState({
current: e.key
});
// this.setState({
// current: e.key
// });
};
return (

6
client/src/components/sign-in-form/sign-in-form.component.jsx
View File

@@ -65,11 +65,7 @@ class SignInForm extends React.Component {
Log in
</Button>
</Form.Item>
{errorMessage ? (
<Alert message={errorMessage} type="error" />
) : (
null
)}
{errorMessage ? <Alert message={errorMessage} type="error" /> : null}
</Form>
);
}

8
client/src/components/sign-out/sign-out.component.jsx
View File

@@ -1,13 +1,11 @@
import React, { useState } from "react";
import React from "react";
import firebase from "../../firebase/firebase.utils";
export default function SignOut() {
const [authState, setAuthState] = useState();
const signOut = async () => {
try {
const p = await firebase.auth().signOut();
setAuthState({ status: "out" });
await firebase.auth().signOut();
console.log("Signin out!");
} catch (error) {
console.log(error);
}

34
client/src/graphql/client.js Normal file
View File

@@ -0,0 +1,34 @@
import ApolloClient from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { HttpLink } from "apollo-link-http";
import { setContext } from "apollo-link-context";
import { resolvers, typeDefs } from "./resolvers";
import apolloLogger from "apollo-link-logger";
import { ApolloLink } from "apollo-boost";
const httpLink = new HttpLink({
uri: process.env.REACT_APP_GRAPHQL_ENDPOINT
});
const authLink = setContext((_, { headers }) => {
// get the authentication token from local storage if it exists
const token = localStorage.getItem("token");
// return the headers to the context so httpLink can read them
if (token) {
return {
headers: {
...headers,
authorization: token ? `Bearer ${token}` : ""
}
};
} else {
return { headers };
}
});
export const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache({ addTypename: false }),
typeDefs,
resolvers
});

3
client/src/graphql/initial-state.js
View File

@@ -1,7 +1,8 @@
export default {
currentUser: {
email: null,
displayName: null
displayName: null,
token: null
},
selectedNavItem: "Home",
recentItems: []

17
client/src/graphql/local.queries.js Normal file
View File

@@ -0,0 +1,17 @@
import { gql } from "apollo-boost";
export const SET_CURRENT_USER = gql`
mutation SetCurrentUser($user: User!) {
setCurrentUser(user: $user) @client {
email
}
}
`;
export const GET_CURRENT_USER = gql`
{
currentUser @client {
email
}
}
`;

9
client/src/graphql/metadata.queries.js
View File

@@ -21,14 +21,7 @@ export const GET_SELECTED_NAV_ITEM = gql`
}
`;
export const GET_CURRENT_USER = gql`
query GetCurrentUser {
currentUser @client {
email
displayName
}
}
`;
// export const SET_CURRENT_USER = gql`
// mutation SetCurrentUser($user User!){

15
client/src/graphql/resolvers.js
View File

@@ -1,20 +1,15 @@
import { gql } from "apollo-boost";
import { GET_CURRENT_USER } from "./local.queries";
export const typeDefs = gql`
extend type Mutation {
SetCurrentUser(user: User!): User!
}
type User {
displayName: String!,
email: String!,
photoUrl: String!
}
`;
const GET_CURRENT_USER = gql`
{
currentUser @client
extend type User {
email: String!
displayName: String!
token: String!
}
`;

21
client/src/index.js
View File

@@ -5,14 +5,27 @@ import { BrowserRouter } from "react-router-dom";
import * as serviceWorker from "./serviceWorker";
import "./index.css";
import { default as App } from "./App/App.container";
import AppContainer from "./App/App.container";
import { ApolloProvider } from "react-apollo";
import { client } from "./graphql/client";
import initialState from "./graphql/initial-state";
require("dotenv").config();
//Init local state.
client.writeData({
data: {
...initialState
}
});
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
<ApolloProvider client={client}>
<BrowserRouter>
<AppContainer />
</BrowserRouter>
</ApolloProvider>,
document.getElementById("root")
);

25
client/src/pages/sign-in/sign-in.container.jsx
View File

@@ -1,25 +0,0 @@
import React from "react";
import { Query } from "react-apollo";
import { Alert } from "antd";
import Spin from "../../components/loading-spinner/loading-spinner.component";
// import Skeleton from "../loading-skeleton/loading-skeleton.component";
import { GET_CURRENT_USER } from "../../graphql/metadata.queries";
import SignInPage from "./sign-in.page";
const SignInContainer = () => {
return (
<Query query={GET_CURRENT_USER}>
{({ loading, error, data: { currentUser } }) => {
if (loading) return <Spin />;
if (error) return <Alert message={error.message} />;
return <SignInPage signedIn={currentUser.email ? true : false} />;
}}
</Query>
);
};
export default SignInContainer;

12
client/src/pages/sign-in/sign-in.page.jsx
View File

@@ -1,14 +1,6 @@
import React from "react";
import SignInComponent from "../../components/sign-in-form/sign-in-form.component";
import { Redirect } from "react-router-dom";
export default ({signedIn}) => {
console.log(signedIn)
return (
<div>
<SignInComponent />
</div>
);
export default () => {
return <SignInComponent />;
};

13
client/yarn.lock
View File

@@ -2189,6 +2189,14 @@ apollo-client@^2.6.4:
tslib "^1.9.3"
zen-observable "^0.8.0"
apollo-link-context@^1.0.19:
version "1.0.19"
resolved "https://registry.yarnpkg.com/apollo-link-context/-/apollo-link-context-1.0.19.tgz#3c9ba5bf75ed5428567ce057b8837ef874a58987"
integrity sha512-TUi5TyufU84hEiGkpt+5gdH5HkB3Gx46npNfoxR4of3DKBCMuItGERt36RCaryGcU/C3u2zsICU3tJ+Z9LjFoQ==
dependencies:
apollo-link "^1.2.13"
tslib "^1.9.3"
apollo-link-error@^1.0.3:
version "1.1.12"
resolved "https://registry.yarnpkg.com/apollo-link-error/-/apollo-link-error-1.1.12.tgz#e24487bb3c30af0654047611cda87038afbacbf9"
@@ -2216,6 +2224,11 @@ apollo-link-http@^1.3.1:
apollo-link-http-common "^0.2.15"
tslib "^1.9.3"
apollo-link-logger@^1.2.3:
version "1.2.3"
resolved "https://registry.yarnpkg.com/apollo-link-logger/-/apollo-link-logger-1.2.3.tgz#1f3e6f7849ce7a7e3aa822141fe062cfa278b1e1"
integrity sha512-GaVwdHyXmawfvBlHfZkFkBHH3+YH7wibzSCc4/YpIbPVtbtZqi0Qop18w++jgpw385W083DMOdYe2eJsKkZdag==
apollo-link@^1.0.0, apollo-link@^1.0.6, apollo-link@^1.2.13:
version "1.2.13"
resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-1.2.13.tgz#dff00fbf19dfcd90fddbc14b6a3f9a771acac6c4"