From 1409ef058ced9aca0b0860785859954a44db6974 Mon Sep 17 00:00:00 2001 From: Patrick Fic Date: Tue, 24 Mar 2020 18:59:56 -0700 Subject: [PATCH] BOD-2 More cleanup after fixing JWT tokens. --- client/package.json | 7 +- client/src/App/App.container.jsx | 116 ++++-------------- client/src/App/App.css | 28 +---- client/src/App/App.js | 4 +- .../job-detail-cards.documents.component.jsx | 2 +- client/src/firebase/firebase.utils.js | 32 ----- client/src/graphql/apollo-error-handling.js | 35 ------ .../pages/manage/manage.page.container.jsx | 25 +--- client/src/redux/messaging/messaging.sagas.js | 89 +------------- client/src/utils/private-route.js | 2 +- client/yarn.lock | 57 +-------- 11 files changed, 38 insertions(+), 359 deletions(-) diff --git a/client/package.json b/client/package.json index 4eefe5e0e..772b9ab11 100644 --- a/client/package.json +++ b/client/package.json @@ -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" } } diff --git a/client/src/App/App.container.jsx b/client/src/App/App.container.jsx index 62d7e7b1c..8c6e155fe 100644 --- a/client/src/App/App.container.jsx +++ b/client/src/App/App.container.jsx @@ -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 ; - } + const { client } = this.state; return ( diff --git a/client/src/App/App.css b/client/src/App/App.css index e497f630b..bc8c8182d 100644 --- a/client/src/App/App.css +++ b/client/src/App/App.css @@ -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"; \ No newline at end of file diff --git a/client/src/App/App.js b/client/src/App/App.js index fa2bb5fd2..231d0f616 100644 --- a/client/src/App/App.js +++ b/client/src/App/App.js @@ -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(
- }> + }> diff --git a/client/src/components/job-detail-cards/job-detail-cards.documents.component.jsx b/client/src/components/job-detail-cards/job-detail-cards.documents.component.jsx index 5df1f41ed..5c3713097 100644 --- a/client/src/components/job-detail-cards/job-detail-cards.documents.component.jsx +++ b/client/src/components/job-detail-cards/job-detail-cards.documents.component.jsx @@ -18,7 +18,7 @@ export default function JobDetailCardsDocumentsComponent({ loading, data }) { {data.documents.length > 0 ? ( diff --git a/client/src/firebase/firebase.utils.js b/client/src/firebase/firebase.utils.js index 5d2d7eafe..ed1b758d9 100644 --- a/client/src/firebase/firebase.utils.js +++ b/client/src/firebase/firebase.utils.js @@ -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 = () => { diff --git a/client/src/graphql/apollo-error-handling.js b/client/src/graphql/apollo-error-handling.js index ea2d7fb62..ccd1b7aef 100644 --- a/client/src/graphql/apollo-error-handling.js +++ b/client/src/graphql/apollo-error-handling.js @@ -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); - } - }); - } } ); diff --git a/client/src/pages/manage/manage.page.container.jsx b/client/src/pages/manage/manage.page.container.jsx index 20a00a5cf..5ad4641eb 100644 --- a/client/src/pages/manage/manage.page.container.jsx +++ b/client/src/pages/manage/manage.page.container.jsx @@ -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 ; + if (error) return ; return ; } -export default connect( - mapStateToProps, - mapDispatchToProps -)(ManagePageContainer); +export default connect(null, mapDispatchToProps)(ManagePageContainer); diff --git a/client/src/redux/messaging/messaging.sagas.js b/client/src/redux/messaging/messaging.sagas.js index b897fedf5..e9ffa9a1a 100644 --- a/client/src/redux/messaging/messaging.sagas.js +++ b/client/src/redux/messaging/messaging.sagas.js @@ -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([]); } diff --git a/client/src/utils/private-route.js b/client/src/utils/private-route.js index 9b905e843..cbfccd627 100644 --- a/client/src/utils/private-route.js +++ b/client/src/utils/private-route.js @@ -8,7 +8,7 @@ export default ({ component: Component, isAuthorized, ...rest }) => { isAuthorized === true ? ( ) : ( - + ) } /> diff --git a/client/yarn.lock b/client/yarn.lock index 4fbf9a330..16a468c07 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -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"