BOD-2 More cleanup after fixing JWT tokens.

This commit is contained in:
Patrick Fic
2020-03-24 18:59:56 -07:00
parent 1c4a5d5b63
commit 1409ef058c
11 changed files with 38 additions and 359 deletions

View File

@@ -16,7 +16,6 @@
"apollo-link-retry": "^2.2.15",
"apollo-link-ws": "^1.0.19",
"axios": "^0.19.2",
"chart.js": "^2.9.3",
"dotenv": "^8.2.0",
"firebase": "^7.12.0",
"graphql": "^14.6.0",
@@ -33,7 +32,6 @@
"react-i18next": "^11.3.4",
"react-icons": "^3.9.0",
"react-image-file-resizer": "^0.2.1",
"react-image-gallery": "^1.0.6",
"react-moment": "^0.9.7",
"react-number-format": "^4.4.1",
"react-pdf": "^4.1.0",
@@ -45,7 +43,7 @@
"redux-persist": "^6.0.0",
"redux-saga": "^1.1.3",
"reselect": "^4.0.0",
"source-map-explorer": "^2.3.1",
"styled-components": "^5.0.1",
"subscriptions-transport-ws": "^0.9.16",
"twilio": "^3.41.1"
@@ -75,6 +73,7 @@
"devDependencies": {
"@apollo/react-testing": "^3.1.3",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2"
"enzyme-adapter-react-16": "^1.15.2",
"source-map-explorer": "^2.3.1"
}
}

View File

@@ -6,26 +6,17 @@ import { split } from "apollo-link";
import { setContext } from "apollo-link-context";
import { HttpLink } from "apollo-link-http";
import apolloLogger from "apollo-link-logger";
import { RetryLink } from "apollo-link-retry";
import { WebSocketLink } from "apollo-link-ws";
import { getMainDefinition } from "apollo-utilities";
import React, { Component } from "react";
import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
import SpinnerComponent from "../components/loading-spinner/loading-spinner.component";
import { auth } from "../firebase/firebase.utils";
import errorLink from "../graphql/apollo-error-handling";
import App from "./App";
import { RetryLink } from "apollo-link-retry";
import { auth } from "../firebase/firebase.utils";
export default class AppContainer extends Component {
// constructor() {
// super();
// }
state = {
client: null,
loaded: false
};
async componentDidMount() {
constructor() {
super();
const httpLink = new HttpLink({
uri: process.env.REACT_APP_GRAPHQL_ENDPOINT
});
@@ -34,36 +25,25 @@ export default class AppContainer extends Component {
uri: process.env.REACT_APP_GRAPHQL_ENDPOINT_WS,
options: {
//lazy: true,
reconnect: true,
connectionParams: () => {
const token = localStorage.getItem("token");
if (token) {
return {
headers: {
authorization: token ? `Bearer ${token}` : ""
}
};
}
}
reconnect: true
// connectionParams: () => {
// const token = localStorage.getItem("token");
// if (token) {
// return {
// headers: {
// authorization: token ? `Bearer ${token}` : ""
// }
// };
// }
// }
}
});
// const wsLink = new WebSocketLink({
// uri: websocketUrl,
// options: {
// reconnect: true
// },
// webSocketImpl: ws
// });
const subscriptionMiddleware = {
applyMiddleware: async (options, next) => {
options.authToken = await auth.currentUser.getIdToken(true);
next();
}
};
// add the middleware to the web socket link via the Subscription Transport client
wsLink.subscriptionClient.use([subscriptionMiddleware]);
const link = split(
@@ -87,28 +67,7 @@ export default class AppContainer extends Component {
httpLink
);
// const authLink = setContext((_, { headers }) => {
// const token = localStorage.getItem("token");
// console.log("In the auth link");
// //Check to see if the token has expired. If it has, then
// if (token) {
// return {
// headers: {
// ...headers,
// authorization: token ? `Bearer ${token}` : ""
// }
// };
// } else {
// return { headers };
// }
// });
const authLink = setContext((_, { headers }) => {
// return AsyncTokenLookup()
// .then((userToken) => {
// token = userToken;
// return { token };
// })
return auth.currentUser.getIdToken().then(token => {
if (token) {
return {
@@ -123,35 +82,6 @@ export default class AppContainer extends Component {
});
});
// const authLink = new ApolloLink((operation, forward) => {
// console.log("The new auth link");
// const token = localStorage.getItem("token");
// auth.currentUser.
// auth.currentUser.getIdToken().then(t => {
// console.log("token", token);
// if (token) {
// operation.setContext({
// headers: {
// Authorization: `Bearer ${token}`
// }
// });
// operation.setContext({
// headers: {
// Authorization: `Bearer ${token}`
// }
// });
// return forward(operation);
// }
// });
// return forward(operation);
// });
const middlewares = [];
if (process.env.NODE_ENV === "development") {
middlewares.push(apolloLogger);
}
const retryLink = new RetryLink({
delay: {
initial: 300,
@@ -164,27 +94,25 @@ export default class AppContainer extends Component {
}
});
const middlewares = [];
if (process.env.NODE_ENV === "development") {
middlewares.push(apolloLogger);
}
middlewares.push(retryLink.concat(errorLink.concat(authLink.concat(link))));
const cache = new InMemoryCache();
const client = new ApolloClient({
link: ApolloLink.from(middlewares),
cache,
connectToDevTools: true
});
this.setState({
client,
loaded: true
});
this.state = { client };
}
render() {
const { client, loaded } = this.state;
if (!loaded) {
return <SpinnerComponent message='Connecting to Bodyshop.app Database' />;
}
const { client } = this.state;
return (
<ApolloProvider client={client}>

View File

@@ -1,27 +1 @@
@import "~antd/dist/antd.css";
/* .ant-layout-header {
position: absolute;
top: 0px;
left: 0px;
height: 5vh;
right: 0px;
overflow: hidden;
}
.ant-layout-content {
position: absolute;
top: 5vh;
bottom: 3vh;
left: 0px;
right: 0px;
overflow: auto;
}
.ant-layout-footer {
position: absolute;
bottom: 0px;
height: 3vh;
left: 0px;
right: 0px;
overflow: hidden;
} */
@import "~antd/dist/antd.css";

View File

@@ -38,7 +38,7 @@ export default connect(
const { t } = useTranslation();
if (currentUser && currentUser.language)
i18next.changeLanguage(currentUser.language, (err, t) => {
i18next.changeLanguage(currentUser.language, err => {
if (err)
return console.log("Error encountered when changing languages.", err);
});
@@ -51,7 +51,7 @@ export default connect(
<div>
<Switch>
<ErrorBoundary>
<Suspense fallback={<LoadingSpinner message='In Suspense.' />}>
<Suspense fallback={<LoadingSpinner message='App.Js Suspense' />}>
<Route exact path='/' component={LandingPage} />
<Route exact path='/unauthorized' component={Unauthorized} />

View File

@@ -18,7 +18,7 @@ export default function JobDetailCardsDocumentsComponent({ loading, data }) {
<CardTemplate
loading={loading}
title={t("jobs.labels.cards.documents")}
extraLink={`/manage/jobs/${data.id}#documents`}
extraLink={`/manage/jobs/${data.id}?documents`}
>
{data.documents.length > 0 ? (
<Carousel autoplay>

View File

@@ -6,40 +6,8 @@ import "firebase/database";
const config = JSON.parse(process.env.REACT_APP_FIREBASE_CONFIG);
firebase.initializeApp(config);
export const createUserProfileDocument = async (userAuth, additionalData) => {
//Needs to be redone to write to GQL database.
console.log("userAuth from firebase Utils", userAuth);
if (!userAuth) return;
const userRef = firestore.doc(`users/${userAuth.uid}`);
const snapShot = await userRef.get();
if (!snapShot.exists) {
const { displayName, email } = userAuth;
const createdAt = new Date();
try {
await userRef.set({
displayName,
email,
createdAt,
...additionalData
});
} catch (error) {
console.log("error creating user", error.message);
}
}
return userRef;
};
export const auth = firebase.auth();
export const firestore = firebase.firestore();
const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: "select_account" });
export default firebase;
export const getCurrentUser = () => {

View File

@@ -1,5 +1,4 @@
import { onError } from "apollo-link-error";
import { auth } from "../firebase/firebase.utils";
//https://stackoverflow.com/questions/57163454/refreshing-a-token-with-apollo-client-firebase-auth
const errorLink = onError(
@@ -11,40 +10,6 @@ const errorLink = onError(
)
);
if (networkError) console.log(`[Network error]: ${networkError}`);
let expired = false;
if (graphQLErrors) {
if (graphQLErrors[0].message.includes("JWTExpired")) {
expired = true;
}
}
if (networkError) {
if (networkError.message.includes("JWTExpired")) {
expired = true;
}
}
if (expired) {
//User access token has expired
console.log("Old Token", window.localStorage.getItem("token"));
// Let's refresh token through async request
auth.currentUser.getIdToken(true).then(token => {
if (token) {
console.log("Got the new token.", token);
window.localStorage.setItem("token", token);
const oldHeaders = operation.getContext().headers;
operation.setContext({
headers: {
...oldHeaders,
authorization: token ? `Bearer ${token}` : ""
}
});
console.log(operation.getContext());
return forward(operation);
}
});
}
}
);

View File

@@ -1,43 +1,26 @@
import { useQuery } from "@apollo/react-hooks";
import { notification } from "antd";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import AlertComponent from "../../components/alert/alert.component";
import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries";
import { setBodyshop } from "../../redux/user/user.actions";
import { selectBodyshop } from "../../redux/user/user.selectors";
import ManagePage from "./manage.page.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
});
const mapDispatchToProps = dispatch => ({
setBodyshop: bs => dispatch(setBodyshop(bs))
});
function ManagePageContainer({ match, setBodyshop, bodyshop }) {
function ManagePageContainer({ match, setBodyshop }) {
const { error, data } = useQuery(QUERY_BODYSHOP, {
fetchPolicy: "network-only"
});
const { t } = useTranslation();
if (error) {
notification["error"]({ message: t("bodyshop.errors.loading") });
}
useEffect(() => {
if (data) setBodyshop(data.bodyshops[0]);
}, [data, setBodyshop]);
if (!bodyshop)
return <LoadingSpinner message={t("general.labels.loadingshop")} />;
if (error) return <AlertComponent message={error.message} type='error' />;
return <ManagePage match={match} />;
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(ManagePageContainer);
export default connect(null, mapDispatchToProps)(ManagePageContainer);

View File

@@ -1,90 +1,5 @@
import {
all
// call, put, takeLatest
} from "redux-saga/effects";
//import { auth, getCurrentUser } from "../../firebase/firebase.utils";
// import { toggleChatVisible } from "./messaging.actions";
// import MessagingActionTypes from "./messaging.types";
// export function* getSnapshotFromUserAuth(userAuth) {
// try {
// const userRef = yield call(createUserProfileDocument, userAuth);
// //const userSnapshot = yield userRef.get();
// } catch (error) {
// yield put(signInFailure(error));
// }
// }
// export function* signInWithEmail({ payload: { email, password } }) {
// try {
// const { user } = yield auth.signInWithEmailAndPassword(email, password);
// yield put(
// signInSuccess({
// uid: user.uid,
// email: user.email,
// displayName: user.displayName,
// authorized: true
// })
// );
// } catch (error) {
// yield put(signInFailure(error));
// }
// }
// //This is the listener fo rthe call, and when it finds it, it triggers somethign else.
// export function* onEmailSignInStart() {
// yield takeLatest(UserActionTypes.EMAIL_SIGN_IN_START, signInWithEmail);
// }
// export function* isUserAuthenticated() {
// try {
// const user = yield getCurrentUser();
// if (!user) {
// yield put(unauthorizedUser());
// return;
// }
// let token = yield user.getIdToken();
// localStorage.setItem("token", token);
// window.sessionStorage.setItem(`lastTokenRefreshTime`, new Date());
// yield put(
// signInSuccess({
// uid: user.uid,
// email: user.email,
// displayName: user.displayName,
// authorized: true
// })
// );
// } catch (error) {
// yield put(signInFailure(error));
// }
// }
// export function* onCheckUserSession() {
// yield takeLatest(UserActionTypes.CHECK_USER_SESSION, isUserAuthenticated);
// }
// export function* signOutStart() {
// try {
// yield auth.signOut();
// yield put(signOutSuccess());
// localStorage.removeItem("token");
// } catch (error) {
// yield put(signOutFailure(error.message));
// }
// }
// export function* onSignOutStart() {
// yield takeLatest(UserActionTypes.SIGN_OUT_START, signOutStart);
// }
import { all } from "redux-saga/effects";
export function* messagingSagas() {
yield all([
// call(onGoogleSignInStart),
// call(onEmailSignInStart),
// call(onCheckUserSession),
// call(onSignOutStart)
// call(onEmailSignUpStart),
// call(onEmailSignUpSuccess)
]);
yield all([]);
}

View File

@@ -8,7 +8,7 @@ export default ({ component: Component, isAuthorized, ...rest }) => {
isAuthorized === true ? (
<Component {...props} />
) : (
<Redirect to="/unauthorized" />
<Redirect to='/login' />
)
}
/>

View File

@@ -3877,29 +3877,6 @@ chardet@^0.7.0:
resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
chart.js@^2.9.3:
version "2.9.3"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.3.tgz#ae3884114dafd381bc600f5b35a189138aac1ef7"
integrity sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==
dependencies:
chartjs-color "^2.1.0"
moment "^2.10.2"
chartjs-color-string@^0.6.0:
version "0.6.0"
resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
dependencies:
color-name "^1.0.0"
chartjs-color@^2.1.0:
version "2.4.1"
resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
dependencies:
chartjs-color-string "^0.6.0"
color-convert "^1.9.3"
cheerio@^1.0.0-rc.3:
version "1.0.0-rc.3"
resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.3.tgz#094636d425b2e9c0f4eb91a46c05630c9a1a8bf6"
@@ -4098,7 +4075,7 @@ collection-visit@^1.0.0:
map-visit "^1.0.0"
object-visit "^1.0.0"
color-convert@^1.9.0, color-convert@^1.9.1, color-convert@^1.9.3:
color-convert@^1.9.0, color-convert@^1.9.1:
version "1.9.3"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -8328,11 +8305,6 @@ lodash.clone@^4.5.0:
resolved "https://registry.yarnpkg.com/lodash.clone/-/lodash.clone-4.5.0.tgz#195870450f5a13192478df4bc3d23d2dea1907b6"
integrity sha1-GVhwRQ9aExkkeN9Lw9I9LeoZB7Y=
lodash.debounce@^4.0.8:
version "4.0.8"
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
lodash.escape@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
@@ -8413,11 +8385,6 @@ lodash.templatesettings@^4.0.0:
dependencies:
lodash._reinterpolate "^3.0.0"
lodash.throttle@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
lodash.uniq@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -8849,7 +8816,7 @@ mkdirp@^0.5.3:
dependencies:
minimist "^1.2.5"
moment@^2.10.2, moment@^2.24.0:
moment@^2.24.0:
version "2.24.0"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
@@ -11378,19 +11345,6 @@ react-image-file-resizer@^0.2.1:
resolved "https://registry.yarnpkg.com/react-image-file-resizer/-/react-image-file-resizer-0.2.1.tgz#ee081bd41798ff960eea1a56b1a86ba317fecf11"
integrity sha512-uvhNj2NKMUraVKIrsmPNZgWn34b7fjEcuWAyMXUrVb06gedNtOalOBxVwXYocd4KnZRFv2/ilmAE4KEzIkj4aA==
react-image-gallery@^1.0.6:
version "1.0.6"
resolved "https://registry.yarnpkg.com/react-image-gallery/-/react-image-gallery-1.0.6.tgz#cbbef85973e72bb01b5d331de68f884654f47b2f"
integrity sha512-RbbZypXY4JxwVCSBlUfPWnb4SVeDWsS1Bg2bxpVXO7wPbjpJaxolto19WUhNDmFur4GSnIvVj72F03opOj3zIA==
dependencies:
clsx "^1.0.4"
lodash.debounce "^4.0.8"
lodash.isequal "^4.5.0"
lodash.throttle "^4.1.1"
prop-types "^15.5.8"
react-swipeable "^5.2.0"
resize-observer-polyfill "^1.5.0"
react-images@^0.5.16:
version "0.5.19"
resolved "https://registry.yarnpkg.com/react-images/-/react-images-0.5.19.tgz#9339570029e065f9f28a19f03fdb5d9d5aa109d3"
@@ -11593,13 +11547,6 @@ react-scrolllock@^2.0.1:
exenv "^1.2.2"
react-prop-toggle "^1.0.2"
react-swipeable@^5.2.0:
version "5.5.1"
resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-5.5.1.tgz#48ae6182deaf62f21d4b87469b60281dbd7c4a76"
integrity sha512-EQObuU3Qg3JdX3WxOn5reZvOSCpU4fwpUAs+NlXSN3y+qtsO2r8VGkVnOQzmByt3BSYj9EWYdUOUfi7vaMdZZw==
dependencies:
prop-types "^15.6.2"
react-test-renderer@^16.0.0-0:
version "16.13.0"
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.13.0.tgz#39ba3bf72cedc8210c3f81983f0bb061b14a3014"