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

Rewrote app to use hooks and fixed multiple re-renders.

Browse Source
This commit is contained in:
Patrick Fic
2019-12-11 18:39:27 -08:00
parent 5c7523e6bd
commit f333301f67
16 changed files with 162 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,4 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Mutation, Query } from "react-apollo";
import { GET_CURRENT_USER, SET_CURRENT_USER } from "../graphql/local.queries";
import App from "./App"; import App from "./App";
import Spin from "../components/loading-spinner/loading-spinner.component"; import Spin from "../components/loading-spinner/loading-spinner.component";
@@ -72,29 +70,17 @@ class AppContainer extends Component {
} }
middlewares.push(authLink.concat(link)); middlewares.push(authLink.concat(link));
const cache = new InMemoryCache({ addTypename: false }); const cache = new InMemoryCache();
const client = new ApolloClient({ const client = new ApolloClient({
link: ApolloLink.from(middlewares), link: ApolloLink.from(middlewares),
cache, cache,
typeDefs, typeDefs,
resolvers, resolvers
defaultOptions: {
watchQuery: {
fetchPolicy: "cache-and-network",
errorPolicy: "ignore"
},
query: {
fetchPolicy: "cache-and-network",
errorPolicy: "all"
}
}
}); });
client.writeData({ client.writeData({
data: { data: initialState
...initialState
}
}); });
try { try {
@@ -125,24 +111,7 @@ class AppContainer extends Component {
return ( return (
<ApolloProvider client={client}> <ApolloProvider client={client}>
<Query query={GET_CURRENT_USER}> <App />
{({ 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>
</ApolloProvider> </ApolloProvider>
); );
} }

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

@@ -1,4 +1,5 @@
import React from "react"; import React, { useEffect } from "react";
import { useApolloClient, useQuery } from "@apollo/react-hooks";
import { Switch, Route, Redirect } from "react-router-dom"; import { Switch, Route, Redirect } from "react-router-dom";
import firebase from "../firebase/firebase.utils"; import firebase from "../firebase/firebase.utils";
@@ -6,32 +7,33 @@ import "./App.css";
//Component Imports //Component Imports
import LandingPage from "../pages/landing/landing.page"; import LandingPage from "../pages/landing/landing.page";
import Manage from "../pages/manage/manage.page"; import ManagePage from "../pages/manage/manage.page";
import PrivateRoute from "../utils/private-route"; import PrivateRoute from "../utils/private-route";
import SignInPage from "../pages/sign-in/sign-in.page"; import SignInPage from "../pages/sign-in/sign-in.page";
import Unauthorized from "../pages/unauthorized/unauthorized.component"; import Unauthorized from "../pages/unauthorized/unauthorized.component";
import { auth } from "../firebase/firebase.utils"; import { auth } from "../firebase/firebase.utils";
class App extends React.Component { import { GET_CURRENT_USER } from "../graphql/local.queries";
unsubscribeFromAuth = null; 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";
componentDidMount() { import { UPSERT_USER } from "../graphql/user.queries";
const { setCurrentUser } = this.props;
console.log("DIDMOUNT"); export default () => {
this.unsubscribeFromAuth = auth.onAuthStateChanged(async user => { const apolloClient = useApolloClient();
console.log("Current User:", user);
useEffect(() => {
//Run the auth code only on the first render.
const unsubscribeFromAuth = auth.onAuthStateChanged(async user => {
if (user) { if (user) {
const token = await user.getIdToken(); let token;
token = await user.getIdToken();
const idTokenResult = await user.getIdTokenResult(); const idTokenResult = await user.getIdTokenResult();
const hasuraClaim = const hasuraClaim =
idTokenResult.claims["https://hasura.io/jwt/claims"]; idTokenResult.claims["https://hasura.io/jwt/claims"];
if (hasuraClaim) { if (hasuraClaim) {
setCurrentUser({
email: user.email,
displayName: user.displayName,
token
});
} else { } else {
// Check if refresh is required. // Check if refresh is required.
const metadataRef = firebase const metadataRef = firebase
@@ -39,62 +41,71 @@ class App extends React.Component {
.ref("metadata/" + user.uid + "/refreshTime"); .ref("metadata/" + user.uid + "/refreshTime");
metadataRef.on("value", async () => { metadataRef.on("value", async () => {
// Force refresh to pick up the latest custom claims changes. // Force refresh to pick up the latest custom claims changes.
const token = await user.getIdToken(true); token = await user.getIdToken(true);
setCurrentUser({
email: user.email,
displayName: user.displayName,
token
});
}); });
} }
// console.log('###Debug (app.js)| Token', token) 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. //add the bearer token to the headers.
localStorage.setItem("token", token); localStorage.setItem("token", token);
apolloClient
.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);
});
} else { } else {
setCurrentUser({ apolloClient.writeData({ data: { currentUser: null } });
email: null,
displayName: null,
token: null
});
localStorage.removeItem("token"); localStorage.removeItem("token");
} }
}); });
}
componentWillUnmount() { return function cleanup() {
this.unsubscribeFromAuth(); unsubscribeFromAuth();
} };
}, [apolloClient]);
render() { const HookCurrentUser = useQuery(GET_CURRENT_USER);
console.log( if (HookCurrentUser.loading) return <LoadingSpinner />;
"###Debug (App.js) | Props Current User: ", if (HookCurrentUser.error)
this.props.currentUser.email return <AlertComponent message={HookCurrentUser.error.message} />;
); return (
return ( <div>
<div> <SignOut />
<Switch> <Switch>
<Route exact path="/" component={LandingPage} /> <Route exact path="/" component={LandingPage} />
<Route exact path="/unauthorized" component={Unauthorized} /> <Route exact path="/unauthorized" component={Unauthorized} />
<Route <Route
exact exact
path="/signin" path="/signin"
render={() => render={() =>
this.props.currentUser.email != null ? ( HookCurrentUser.data.currentUser ? (
<Redirect to="/manage" /> <Redirect to="/manage" />
) : ( ) : (
<SignInPage /> <SignInPage />
) )
} }
/> />
<PrivateRoute <PrivateRoute
isAuthorized={this.props.currentUser.email != null} isAuthorized={HookCurrentUser.data.currentUser ? true : false}
path="/manage" path="/manage"
component={Manage} component={ManagePage}
/> />
</Switch> </Switch>
</div> </div>
); );
} };
}
export default App;

7
client/src/components/alert/alert.component.jsx Normal file
View File

@@ -0,0 +1,7 @@
import { Alert } from "antd";
import React from "react";
export default function AlertComponent({ props }) {
return <Alert {...props} />;
}

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

@@ -3,20 +3,41 @@ import { Link } from "react-router-dom";
import { Menu, Icon } from "antd"; import { Menu, Icon } from "antd";
import "./header.styles.scss"; import "./header.styles.scss";
import SignOut from "../sign-out/sign-out.component"; import SignOut from "../sign-out/sign-out.component";
import { useQuery } from "react-apollo";
import {
GET_LANDING_NAV_ITEMS,
GET_NAV_ITEMS
} from "../../graphql/metadata.queries";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import AlertComponent from "../alert/alert.component";
export default ({ landingHeader }) => {
let HookNavItems;
if (landingHeader) {
HookNavItems = useQuery(GET_LANDING_NAV_ITEMS);
} else {
HookNavItems = useQuery(GET_NAV_ITEMS);
}
export default ({ landingHeader, selectedNavItem, navItems }) => {
const handleClick = e => { const handleClick = e => {
console.log("click ", e); console.log("click ", e);
// this.setState({ // this.setState({
// current: e.key // current: e.key
// }); // });
}; };
if (HookNavItems.loading) return <LoadingSpinner />;
if (HookNavItems.error)
return <AlertComponent message={HookNavItems.error.message} />;
const navItems = JSON.parse(HookNavItems.data.masterdata_by_pk.value);
return ( return (
<Menu <Menu
theme="dark" theme="dark"
className="header" className="header"
onClick={handleClick} onClick={handleClick}
selectedKeys={selectedNavItem} selectedKeys="Home"
mode="horizontal" mode="horizontal"
> >
{navItems.map(navItem => ( {navItems.map(navItem => (

45
client/src/components/header/header.container.jsx
View File

@@ -1,45 +0,0 @@
import React from "react";
import { Query } from "react-apollo";
import { Alert } from "antd";
import Header from "./header.component";
import Spin from "../loading-spinner/loading-spinner.component";
// import Skeleton from "../loading-skeleton/loading-skeleton.component";
import {
GET_SELECTED_NAV_ITEM,
GET_LANDING_NAV_ITEMS,
GET_NAV_ITEMS
} from "../../graphql/metadata.queries";
const HeaderContainer = ({ landingHeader }) => {
let GET_METADATA;
if (landingHeader) GET_METADATA = GET_LANDING_NAV_ITEMS;
else GET_METADATA = GET_NAV_ITEMS;
return (
<Query query={GET_SELECTED_NAV_ITEM}>
{({ loading, error, data: { selectedNavItem } }) => {
return (
<Query query={GET_METADATA}>
{({ loading, error, data }) => {
if (loading) return <Spin />;
if (error) return <Alert message={error.message} />;
const parsedNavItems = JSON.parse(data.masterdata_by_pk.value);
return (
<Header
landingHeader={landingHeader}
selectedNavItem={selectedNavItem}
navItems={parsedNavItems}
/>
);
}}
</Query>
);
}}
</Query>
);
};
export default HeaderContainer;

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

@@ -2,7 +2,6 @@ import React from "react";
import { auth } from "../../firebase/firebase.utils"; import { auth } from "../../firebase/firebase.utils";
import { Form, Icon, Input, Button, Alert } from "antd"; import { Form, Icon, Input, Button, Alert } from "antd";
import { UPSERT_USER } from "../../graphql/user.queries";
class SignInForm extends React.Component { class SignInForm extends React.Component {
constructor() { constructor() {
super(); super();
@@ -24,16 +23,6 @@ class SignInForm extends React.Component {
password password
); );
apolloClient
.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);
});
this.props.form.resetFields(); this.props.form.resetFields();
} catch (error) { } catch (error) {
this.setState({ ...this.state, errorMessage: error.message }); this.setState({ ...this.state, errorMessage: error.message });

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

@@ -15,7 +15,7 @@ export default function SignInFormContainer() {
<Layout> <Layout>
<Content> <Content>
<Row align="middle"> <Row align="middle">
<Col span="2" offset="8"> <Col span={2} offset={8}>
<div> <div>
<img <img
src={Logo} src={Logo}
@@ -25,12 +25,12 @@ export default function SignInFormContainer() {
/> />
</div> </div>
</Col> </Col>
<Col span="6"> <Col span={6}>
<Typography.Title>Bodyshop.app</Typography.Title> <Typography.Title>Bodyshop.app</Typography.Title>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span="8" offset="8"> <Col span={8} offset={8}>
<SignInFormComponent apolloClient={client} /> <SignInFormComponent apolloClient={client} />
</Col> </Col>
</Row> </Row>

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

@@ -1,15 +1,33 @@
import React from "react"; import React, { Component } from "react";
import { Redirect } from "react-router-dom";
import firebase from "../../firebase/firebase.utils"; import firebase from "../../firebase/firebase.utils";
export default class SignOut extends Component {
state = {
redirect: false
};
export default function SignOut({ match }) { signOut = async () => {
const signOut = async () => {
try { try {
await firebase.auth().signOut(); await firebase.auth().signOut();
console.log("match", match); this.setState({
redirect: true
});
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
}; };
return <div onClick={signOut}>Sign Out</div>; renderRedirect = () => {
if (this.state.redirect) {
//return <Redirect to="/signin" />;
}
};
render() {
return (
<div>
{this.renderRedirect()}
<div onClick={this.signOut}>Sign Out</div>
</div>
);
}
} }

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

@@ -1,5 +1,6 @@
export default { export default {
currentUser: { email: null, displayName: null }, __typename: "State",
currentUser: null,
selectedNavItem: "Home", selectedNavItem: "Home",
recentItems: [], recentItems: [],
whiteBoardLeftSiderVisible: true whiteBoardLeftSiderVisible: true

6
client/src/graphql/local.queries.js
View File

@@ -12,6 +12,10 @@ export const GET_CURRENT_USER = gql`
{ {
currentUser @client { currentUser @client {
email email
displayName
token
uid
photoUrl
} }
} }
`; `;
@@ -20,4 +24,4 @@ export const GET_WHITE_BOARD_LEFT_SIDER_VISIBLE = gql`
{ {
whiteBoardLeftSiderVisible @client whiteBoardLeftSiderVisible @client
} }
`; `;

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

@@ -20,11 +20,3 @@ export const GET_SELECTED_NAV_ITEM = gql`
selectedNavItem @client selectedNavItem @client
} }
`; `;
// export const SET_CURRENT_USER = gql`
// mutation SetCurrentUser($user User!){
// setCurrentUser(currentUser: $user)
// }
// `;

2
client/src/graphql/user.queries.js
View File

@@ -6,7 +6,7 @@ export const UPSERT_USER = gql`
objects: [{ email: $authEmail, authid: $authToken }] objects: [{ email: $authEmail, authid: $authToken }]
on_conflict: { constraint: users_pkey, update_columns: [authid] } on_conflict: { constraint: users_pkey, update_columns: [authid] }
) { ) {
data { returning {
authid authid
} }
} }

4
client/src/pages/landing/landing.page.jsx
View File

@@ -1,12 +1,12 @@
import React from "react"; import React from "react";
import { Typography } from "antd"; import { Typography } from "antd";
import HeaderContainer from "../../components/header/header.container"; import HeaderComponent from "../../components/header/header.component";
export default function LandingPage() { export default function LandingPage() {
return ( return (
<div> <div>
<HeaderContainer landingHeader /> <HeaderComponent landingHeader />
<Typography.Title> <Typography.Title>
Welcome to bodyshop.app. Welcome to bodyshop.app.
</Typography.Title> </Typography.Title>

4
client/src/pages/manage/manage.page.jsx
View File

@@ -5,7 +5,7 @@ import { Route } from "react-router";
import WhiteBoardPage from "../white-board/white-board.page"; import WhiteBoardPage from "../white-board/white-board.page";
import JobsPage from "../jobs/jobs.page"; import JobsPage from "../jobs/jobs.page";
import JobsDetailPageContainer from "../jobs-detail/jobs-detail.page.container"; import JobsDetailPageContainer from "../jobs-detail/jobs-detail.page.container";
import HeaderComponentContainer from "../../components/header/header.container"; import HeaderComponent from "../../components/header/header.component";
import FooterComponent from "../../components/footer/footer.component"; import FooterComponent from "../../components/footer/footer.component";
import { Layout } from "antd"; import { Layout } from "antd";
@@ -16,7 +16,7 @@ export default function Manage({ match }) {
return ( return (
<Layout> <Layout>
<Header> <Header>
<HeaderComponentContainer /> <HeaderComponent />
</Header> </Header>
<Content> <Content>

2
client/src/pages/unauthorized/unauthorized.component.jsx
View File

@@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import { Typography } from "antd"; import { Typography } from "antd";
import HeaderContainer from "../../components/header/header.container"; import HeaderContainer from "../../components/header/header.component";
export default function Unauthorized() { export default function Unauthorized() {
return ( return (

26
client/src/utils/private-route.js
View File

@@ -1,14 +1,16 @@
import React from "react"; import React from "react";
import { Route, Redirect } from "react-router-dom"; import { Route, Redirect } from "react-router-dom";
export default ({ component: Component, isAuthorized, ...rest }) => ( export default ({ component: Component, isAuthorized, ...rest }) => {
<Route return (
{...rest} <Route
render={props => {...rest}
isAuthorized === true ? ( render={props =>
<Component {...props} /> isAuthorized === true ? (
) : ( <Component {...props} />
<Redirect to="/unauthorized" /> ) : (
) <Redirect to="/unauthorized" />
} )
/> }
); />
);
};