diff --git a/src/App.tsx b/src/App.tsx index d6271f7e..dbd4fc33 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -35,82 +35,7 @@ import history from './history'; import FAQ from './containers/faq'; import Email from './containers/email'; import AddSites from './containers/addSites'; - -/* TEMPORORY AXIOS FIX */ -import { AxiosError, AxiosResponse } from 'axios'; -import store, { LOCALSTORAGE_STATE_KEY } from './store'; -import { asyncRequestIsComplete } from './utils/asyncRequest'; -import { isTokenValid } from './auth/ducks/selectors'; -import { refresh } from './auth/ducks/thunks'; -import { AppAxiosInstance } from './api/apiClient'; -import authClient from './auth/authClient'; -import protectedApiClient from './api/protectedApiClient'; - -const userAuthenticationExtraArgs = { - authClient, - protectedApiClient, -}; - -const INVALID_ACCESS_TOKEN = 'Given access token is expired or invalid'; - -// TODO Use throughout application -export interface AppError extends Omit { - readonly response: AxiosResponse; -} - -export const responseErrorInterceptor = async ( - error: AxiosError, -): Promise => { - const originalRequest = { - ...error.config, - _retry: true, - }; - - const tokens: UserAuthenticationReducerState['tokens'] = - store.getState().authenticationState.tokens; - - if ( - asyncRequestIsComplete(tokens) && - error?.response?.status === 401 && - error?.response?.data === INVALID_ACCESS_TOKEN && - isTokenValid(tokens.result.refreshToken) && - !(error.config as any)?._retry - ) { - await refresh(tokens.result.refreshToken)( - store.dispatch, - store.getState, - userAuthenticationExtraArgs, - ); - return AppAxiosInstance(originalRequest); - } - if ( - asyncRequestIsComplete(tokens) && - error?.response?.status === 401 && - error?.response?.data === INVALID_ACCESS_TOKEN && - !isTokenValid(tokens.result.refreshToken) - ) { - await logout()(store.dispatch, store.getState, userAuthenticationExtraArgs); - localStorage.removeItem(LOCALSTORAGE_STATE_KEY); - history.go(0); - } - return Promise.reject(error); -}; - -AppAxiosInstance.interceptors.response.use( - (response) => response, - responseErrorInterceptor, -); - -AppAxiosInstance.interceptors.request.use((config) => { - const tokens: UserAuthenticationReducerState['tokens'] = - store.getState().authenticationState.tokens; - if (asyncRequestIsComplete(tokens)) { - config.headers['X-Access-Token'] = tokens.result.accessToken; - } - return config; -}); - -/* end TEMPORORY AXIOS FIX */ +import { addAxiosInterceptors } from './auth/axios'; const AppLayout = styled(Layout)` min-height: 100vh; @@ -163,6 +88,9 @@ export interface MapStateProps { readonly lng: number; } +// temp fix - adding axios interceptors here as they aren't don't get added when in auth/axios.ts +addAxiosInterceptors(); + const App: React.FC = () => { const dispatch = useDispatch(); diff --git a/src/auth/axios.ts b/src/auth/axios.ts index a5d0c8a8..f9ed76cf 100644 --- a/src/auth/axios.ts +++ b/src/auth/axios.ts @@ -1,76 +1,76 @@ -// import { AxiosError, AxiosResponse } from 'axios'; -// import store, { LOCALSTORAGE_STATE_KEY } from '../store'; -// import { asyncRequestIsComplete } from '../utils/asyncRequest'; -// import { UserAuthenticationReducerState } from './ducks/types'; -// import { isTokenValid } from './ducks/selectors'; -// import { logout, refresh } from './ducks/thunks'; -// import { AppAxiosInstance } from '../api/apiClient'; -// import authClient from './authClient'; -// import protectedApiClient from '../api/protectedApiClient'; -// import history from '../history'; +import { AxiosError, AxiosResponse } from 'axios'; +import store, { LOCALSTORAGE_STATE_KEY } from '../store'; +import { asyncRequestIsComplete } from '../utils/asyncRequest'; +import { UserAuthenticationReducerState } from './ducks/types'; +import { isTokenValid } from './ducks/selectors'; +import { logout, refresh } from './ducks/thunks'; +import { AppAxiosInstance } from '../api/apiClient'; +import authClient from './authClient'; +import protectedApiClient from '../api/protectedApiClient'; +import history from '../history'; -// const userAuthenticationExtraArgs = { -// authClient, -// protectedApiClient, -// }; +const userAuthenticationExtraArgs = { + authClient, + protectedApiClient, +}; -// const INVALID_ACCESS_TOKEN = 'Given access token is expired or invalid'; +const INVALID_ACCESS_TOKEN = 'Given access token is expired or invalid'; -// // TODO Use throughout application -// export interface AppError extends Omit { -// readonly response: AxiosResponse; -// } +// TODO Use throughout application +export interface AppError extends Omit { + readonly response: AxiosResponse; +} -// export const responseErrorInterceptor = async ( -// error: AxiosError, -// ): Promise => { -// const originalRequest = { -// ...error.config, -// _retry: true, -// }; +export const responseErrorInterceptor = async ( + error: AxiosError, +): Promise => { + const originalRequest = { + ...error.config, + _retry: true, + }; -// const tokens: UserAuthenticationReducerState['tokens'] = -// store.getState().authenticationState.tokens; + const tokens: UserAuthenticationReducerState['tokens'] = + store.getState().authenticationState.tokens; -// if ( -// asyncRequestIsComplete(tokens) && -// error?.response?.status === 401 && -// error?.response?.data === INVALID_ACCESS_TOKEN && -// isTokenValid(tokens.result.refreshToken) && -// !(error.config as any)?._retry -// ) { -// await refresh(tokens.result.refreshToken)( -// store.dispatch, -// store.getState, -// userAuthenticationExtraArgs, -// ); -// return AppAxiosInstance(originalRequest); -// } -// if ( -// asyncRequestIsComplete(tokens) && -// error?.response?.status === 401 && -// error?.response?.data === INVALID_ACCESS_TOKEN && -// !isTokenValid(tokens.result.refreshToken) -// ) { -// await logout()(store.dispatch, store.getState, userAuthenticationExtraArgs); -// localStorage.removeItem(LOCALSTORAGE_STATE_KEY); -// history.go(0); -// } -// return Promise.reject(error); -// }; + if ( + asyncRequestIsComplete(tokens) && + error?.response?.status === 401 && + error?.response?.data === INVALID_ACCESS_TOKEN && + isTokenValid(tokens.result.refreshToken) && + !(error.config as any)?._retry + ) { + await refresh(tokens.result.refreshToken)( + store.dispatch, + store.getState, + userAuthenticationExtraArgs, + ); + return AppAxiosInstance(originalRequest); + } + if ( + asyncRequestIsComplete(tokens) && + error?.response?.status === 401 && + error?.response?.data === INVALID_ACCESS_TOKEN && + !isTokenValid(tokens.result.refreshToken) + ) { + await logout()(store.dispatch, store.getState, userAuthenticationExtraArgs); + localStorage.removeItem(LOCALSTORAGE_STATE_KEY); + history.go(0); + } + return Promise.reject(error); +}; -// AppAxiosInstance.interceptors.response.use( -// (response) => response, -// responseErrorInterceptor, -// ); +export const addAxiosInterceptors = () => { + AppAxiosInstance.interceptors.response.use( + (response) => response, + responseErrorInterceptor, + ); -// AppAxiosInstance.interceptors.request.use((config) => { -// const tokens: UserAuthenticationReducerState['tokens'] = -// store.getState().authenticationState.tokens; -// if (asyncRequestIsComplete(tokens)) { -// config.headers['X-Access-Token'] = tokens.result.accessToken; -// } -// return config; -// }); - -export {}; + AppAxiosInstance.interceptors.request.use((config) => { + const tokens: UserAuthenticationReducerState['tokens'] = + store.getState().authenticationState.tokens; + if (asyncRequestIsComplete(tokens)) { + config.headers['X-Access-Token'] = tokens.result.accessToken; + } + return config; + }); +}; diff --git a/src/auth/test/axios.test.ts b/src/auth/test/axios.test.ts index 08d6f384..3092edf9 100644 --- a/src/auth/test/axios.test.ts +++ b/src/auth/test/axios.test.ts @@ -10,8 +10,7 @@ import { import { AdminApiClientRoutes } from '../../api/protectedApiClient'; import { AxiosError } from 'axios'; import authClient from '../authClient'; -// import { responseErrorInterceptor } from '../axios'; -import { responseErrorInterceptor } from '../../App'; +import { responseErrorInterceptor } from '../axios'; import store, { C4CState } from '../../store'; import { AsyncRequestCompleted } from '../../utils/asyncRequest'; import { generateState } from './thunks.test'; diff --git a/src/containers/adminDashboard/index.tsx b/src/containers/adminDashboard/index.tsx index 667b3c92..fb75add0 100644 --- a/src/containers/adminDashboard/index.tsx +++ b/src/containers/adminDashboard/index.tsx @@ -17,8 +17,7 @@ import { Flex } from '../../components/themedComponents'; import SignupForm from '../../components/forms/signupForm'; import { SignupFormValues } from '../../components/forms/ducks/types'; import ProtectedApiClient from '../../api/protectedApiClient'; -// import { AppError } from '../../auth/axios'; -import { AppError } from '../../App'; +import { AppError } from '../../auth/axios'; import { getErrorMessage, n } from '../../utils/stringFormat'; import { SubmitButton } from '../../components/themedComponents'; import { diff --git a/src/containers/reports/index.tsx b/src/containers/reports/index.tsx index 31ac420f..7b9d5131 100644 --- a/src/containers/reports/index.tsx +++ b/src/containers/reports/index.tsx @@ -23,8 +23,7 @@ import { ReturnButton, } from '../../components/themedComponents'; import { CSVLink } from 'react-csv'; -// import { AppError } from '../../auth/axios'; -import { AppError } from '../../App'; +import { AppError } from '../../auth/axios'; import ExportDataForm from '../../components/forms/exportDataForm'; import { Routes } from '../../App'; diff --git a/src/utils/stringFormat.tsx b/src/utils/stringFormat.tsx index 182240df..9e0f94f2 100644 --- a/src/utils/stringFormat.tsx +++ b/src/utils/stringFormat.tsx @@ -7,8 +7,7 @@ import { SiteEntryField, } from '../containers/treePage/ducks/types'; import { NEIGHBORHOOD_IDS } from '../assets/content'; -// import { AppError } from '../auth/axios'; -import { AppError } from '../App'; +import { AppError } from '../auth/axios'; import { Coordinate } from '../components/mapComponents/ducks/types'; import { Websites } from '../constants'; import i18n from '../i18n/i18n'; diff --git a/src/utils/test/stringFormat.test.ts b/src/utils/test/stringFormat.test.ts index 385d19f5..e534e2b1 100644 --- a/src/utils/test/stringFormat.test.ts +++ b/src/utils/test/stringFormat.test.ts @@ -17,8 +17,7 @@ import { getDateString } from '../stringFormat'; import { shortHand } from '../stringFormat'; import { SHORT_HAND_NAMES } from '../../assets/content'; import { Entry, SiteEntryFields } from '../../containers/treePage/ducks/types'; -// import { AppError } from '../../auth/axios'; -import { AppError } from '../../App'; +import { AppError } from '../../auth/axios'; import { Websites } from '../../constants'; test('getMoneyString tests', () => {