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

97
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 firebase from "../firebase/firebase.utils";
@@ -6,32 +7,33 @@ import "./App.css";
//Component Imports
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 SignInPage from "../pages/sign-in/sign-in.page";
import Unauthorized from "../pages/unauthorized/unauthorized.component";
import { auth } from "../firebase/firebase.utils";
class App extends React.Component {
unsubscribeFromAuth = null;
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";
componentDidMount() {
const { setCurrentUser } = this.props;
console.log("DIDMOUNT");
this.unsubscribeFromAuth = auth.onAuthStateChanged(async user => {
console.log("Current User:", user);
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) {
const token = await user.getIdToken();
let token;
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
@@ -39,39 +41,51 @@ class App extends React.Component {
.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
});
token = await user.getIdToken(true);
});
}
// 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.
localStorage.setItem("token", token);
} else {
setCurrentUser({
email: null,
displayName: null,
token: null
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 {
apolloClient.writeData({ data: { currentUser: null } });
localStorage.removeItem("token");
}
});
}
componentWillUnmount() {
this.unsubscribeFromAuth();
}
return function cleanup() {
unsubscribeFromAuth();
};
}, [apolloClient]);
render() {
console.log(
"###Debug (App.js) | Props Current User: ",
this.props.currentUser.email
);
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} />
@@ -79,7 +93,7 @@ class App extends React.Component {
exact
path="/signin"
render={() =>
this.props.currentUser.email != null ? (
HookCurrentUser.data.currentUser ? (
<Redirect to="/manage" />
) : (
<SignInPage />
@@ -87,14 +101,11 @@ class App extends React.Component {
}
/>
<PrivateRoute
isAuthorized={this.props.currentUser.email != null}
isAuthorized={HookCurrentUser.data.currentUser ? true : false}
path="/manage"
component={Manage}
component={ManagePage}
/>
</Switch>
</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 "./header.styles.scss";
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 => {
console.log("click ", e);
// this.setState({
// 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 (
<Menu
theme="dark"
className="header"
onClick={handleClick}
selectedKeys={selectedNavItem}
selectedKeys="Home"
mode="horizontal"
>
{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 { Form, Icon, Input, Button, Alert } from "antd";
import { UPSERT_USER } from "../../graphql/user.queries";
class SignInForm extends React.Component {
constructor() {
super();
@@ -24,16 +23,6 @@ class SignInForm extends React.Component {
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();
} catch (error) {
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>
<Content>
<Row align="middle">
<Col span="2" offset="8">
<Col span={2} offset={8}>
<div>
<img
src={Logo}
@@ -25,12 +25,12 @@ export default function SignInFormContainer() {
/>
</div>
</Col>
<Col span="6">
<Col span={6}>
<Typography.Title>Bodyshop.app</Typography.Title>
</Col>
</Row>
<Row>
<Col span="8" offset="8">
<Col span={8} offset={8}>
<SignInFormComponent apolloClient={client} />
</Col>
</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";
export default class SignOut extends Component {
state = {
redirect: false
};
export default function SignOut({ match }) {
const signOut = async () => {
signOut = async () => {
try {
await firebase.auth().signOut();
console.log("match", match);
this.setState({
redirect: true
});
} catch (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 {
currentUser: { email: null, displayName: null },
__typename: "State",
currentUser: null,
selectedNavItem: "Home",
recentItems: [],
whiteBoardLeftSiderVisible: true

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

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

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

@@ -20,11 +20,3 @@ export const GET_SELECTED_NAV_ITEM = gql`
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 }]
on_conflict: { constraint: users_pkey, update_columns: [authid] }
) {
data {
returning {
authid
}
}

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

@@ -1,12 +1,12 @@
import React from "react";
import { Typography } from "antd";
import HeaderContainer from "../../components/header/header.container";
import HeaderComponent from "../../components/header/header.component";
export default function LandingPage() {
return (
<div>
<HeaderContainer landingHeader />
<HeaderComponent landingHeader />
<Typography.Title>
Welcome to bodyshop.app.
</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 JobsPage from "../jobs/jobs.page";
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 { Layout } from "antd";
@@ -16,7 +16,7 @@ export default function Manage({ match }) {
return (
<Layout>
<Header>
<HeaderComponentContainer />
<HeaderComponent />
</Header>
<Content>

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

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

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

@@ -1,6 +1,7 @@
import React from "react";
import { Route, Redirect } from "react-router-dom";
export default ({ component: Component, isAuthorized, ...rest }) => (
export default ({ component: Component, isAuthorized, ...rest }) => {
return (
<Route
{...rest}
render={props =>
@@ -12,3 +13,4 @@ export default ({ component: Component, isAuthorized, ...rest }) => (
}
/>
);
};