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

BOD-36 #comment Issue encountered when changing loading status from parent container in App.Container.jsx. No issues when changing status from another component.

Browse Source
This commit is contained in:
Patrick Fic
2020-03-17 12:05:21 -07:00
parent ca457c76ab
commit b114a34bb5
5 changed files with 290 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,12 +13,22 @@ import SpinnerComponent from "../components/loading-spinner/loading-spinner.comp
//import { shouldRefreshToken, refreshToken } from "../graphql/middleware";
import errorLink from "../graphql/apollo-error-handling";
import App from "./App";
import { connect } from "react-redux";
import {
endLoading,
startLoading
} from "../redux/application/application.actions";
const mapDispatchToProps = dispatch => ({
startLoading: () => dispatch(startLoading()),
endLoading: () => dispatch(endLoading())
});
class AppContainer extends Component {
state = {
client: null,
loaded: false
};
async componentDidMount() {
const httpLink = new HttpLink({
uri: process.env.REACT_APP_GRAPHQL_ENDPOINT
@@ -81,6 +91,24 @@ class AppContainer extends Component {
if (process.env.NODE_ENV === "development") {
middlewares.push(apolloLogger);
}
//New
// const startLoad = new ApolloLink((operation, forward) => {
// console.log("Starting", operation);
// this.props.startLoading();
// return forward(operation);
// });
// const endLoad = new ApolloLink((operation, forward) => {
// return forward(operation).map(response => {
// console.log("Completed", operation);
// this.props.endLoading();
// return response;
// });
// });
// middlewares.push(startLoad, endLoad);
//End new
middlewares.push(errorLink.concat(authLink.concat(link)));
const cache = new InMemoryCache();
@@ -101,7 +129,6 @@ class AppContainer extends Component {
render() {
const { client, loaded } = this.state;
if (!loaded) {
return <SpinnerComponent />;
}
@@ -114,4 +141,4 @@ class AppContainer extends Component {
}
}
export default AppContainer;
export default connect(null, mapDispatchToProps)(AppContainer);

52
client/src/components/_test/test.component.jsx
View File

@@ -1,6 +1,10 @@
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
startLoading,
endLoading
} from "../../redux/application/application.actions";
import { setEmailOptions } from "../../redux/email/email.actions";
import T, {
Subject
@@ -11,31 +15,37 @@ const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser
});
const mapDispatchToProps = dispatch => ({
setEmailOptions: e => dispatch(setEmailOptions(e))
setEmailOptions: e => dispatch(setEmailOptions(e)),
load: () => dispatch(startLoading()),
endload: () => dispatch(endLoading())
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(function Test({ setEmailOptions }) {
)(function Test({ setEmailOptions, load, endload }) {
return (
<button
onClick={() =>
setEmailOptions({
messageOptions: {
from: { name: "Kavia Autobody", address: "noreply@bodyshop.app" },
to: "patrickwf@gmail.com",
replyTo: "snaptsoft@gmail.com",
subject: Subject
},
template: T,
queryConfig: [
EMAIL_APPOINTMENT_CONFIRMATION,
{ variables: { id: "91bb31dd-ea87-4cfc-bbe2-2ec754dcb861" } }
]
})
}
>
Set email config.
</button>
<div>
<button
onClick={() =>
setEmailOptions({
messageOptions: {
from: { name: "Kavia Autobody", address: "noreply@bodyshop.app" },
to: "patrickwf@gmail.com",
replyTo: "snaptsoft@gmail.com",
subject: Subject
},
template: T,
queryConfig: [
EMAIL_APPOINTMENT_CONFIRMATION,
{ variables: { id: "91bb31dd-ea87-4cfc-bbe2-2ec754dcb861" } }
]
})
}
>
Set email config.
</button>
<button onClick={() => load()}>Load</button>
<button onClick={() => endload()}>Stop</button>
</div>
);
});

63
client/src/components/global-loading-bar/global-loading-bar.component.jsx
View File

@@ -1,9 +1,8 @@
import React, { useEffect } from "react";
import { Progress } from "antd";
import LoadingBar from "react-top-loading-bar";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectLoading } from "../../redux/application/application.selectors";
import { useNProgress } from "@tanem/react-nprogress";
const mapStateToProps = createStructuredSelector({
loading: selectLoading
@@ -12,29 +11,43 @@ const mapStateToProps = createStructuredSelector({
export default connect(mapStateToProps, null)(GlobalLoadingHeader);
function GlobalLoadingHeader({ loading }) {
console.log("loading", loading);
let l;
useEffect(() => {
if (l) {
if (loading) {
l.continuousStart();
} else {
l.complete();
}
}
}, [loading, l]);
const { animationDuration, isFinished, progress } = useNProgress({
isAnimating: loading
});
return (
<div>
<LoadingBar height={3} onRef={ref => (l = ref)} />
<button onClick={() => l.continuousStart()}>
Start Continuous Bar Loading
</button>
<button onClick={() => l.staticStart()}>Start Static Bar Loading</button>
<button onClick={() => l.complete()}>Complete</button>
<br />
<button onClick={() => l.add(10)}>Add 10</button>
<button onClick={() => l.add(10)}>Add 30</button>
<div
style={{
opacity: isFinished ? 0 : 1,
pointerEvents: "none",
transition: `opacity ${animationDuration}ms linear`
}}
>
<div
style={{
background: "#29d",
height: 4,
left: 0,
marginLeft: `${(-1 + progress) * 100}%`,
position: "fixed",
top: 0,
transition: `margin-left ${animationDuration}ms linear`,
width: "100%",
zIndex: 1031
}}
>
<div
style={{
boxShadow: "0 0 10px #29d, 0 0 5px #29d",
display: "block",
height: "100%",
opacity: 1,
position: "absolute",
right: 0,
transform: "rotate(3deg) translate(0px, -4px)",
width: 100
}}
/>
</div>
</div>
);
}