From 9e7e96b2a27dee99ee17b071edf23a4096102ee0 Mon Sep 17 00:00:00 2001 From: "mirlan.maksitaliev" Date: Fri, 5 Jun 2020 13:00:41 +0600 Subject: [PATCH 1/4] refactor(ott-67): removed gql config --- .eslintignore | 4 ---- codegen.yml | 22 ---------------------- commitlint.config.js | 2 +- package.json | 12 ------------ src/api/operations/User/queries.graphql | 8 -------- src/api/operations/User/queries.tsx | 3 --- src/config/routes.tsx | 2 +- src/index.tsx | 11 +---------- src/react-app-env.d.ts | 1 + src/{api => }/requests/index.tsx | 0 src/{api => }/requests/login.tsx | 0 src/serviceWorker.ts | 1 + src/types/index.tsx | 3 --- 13 files changed, 5 insertions(+), 64 deletions(-) delete mode 100644 .eslintignore delete mode 100644 codegen.yml delete mode 100644 src/api/operations/User/queries.graphql delete mode 100644 src/api/operations/User/queries.tsx rename src/{api => }/requests/index.tsx (100%) rename src/{api => }/requests/login.tsx (100%) delete mode 100644 src/types/index.tsx diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index ff53e248..00000000 --- a/.eslintignore +++ /dev/null @@ -1,4 +0,0 @@ -src/types/* -src/api/operations/**/*.tsx -src/react-app-env.d.ts -src/serviceWorker.ts diff --git a/codegen.yml b/codegen.yml deleted file mode 100644 index 7801e848..00000000 --- a/codegen.yml +++ /dev/null @@ -1,22 +0,0 @@ -overwrite: true -schema: '' -documents: src/api/operations/**/*.graphql -generates: - src/types/index.tsx: - plugins: - - typescript - src/: - preset: - near-operation-file - presetConfig: - extension: .tsx - baseTypesPath: types - plugins: - - typescript-operations - - typescript-react-apollo - config: - withComponent: false - withHOC: false - withHooks: true -config: - typesPrefix: T diff --git a/commitlint.config.js b/commitlint.config.js index c0dfabc3..df2285be 100644 --- a/commitlint.config.js +++ b/commitlint.config.js @@ -2,7 +2,7 @@ const Configuration = { extends: ['@commitlint/config-conventional'], /** Any rules defined here will override rules from - * @commitlint/config-conventional **/ + * @commitlint/config-conventional */ rules: { 'body-max-length': [2, 'always', 120], 'body-min-length': [2, 'always', 3], diff --git a/package.json b/package.json index 226771b8..4fdba62a 100644 --- a/package.json +++ b/package.json @@ -3,22 +3,16 @@ "version": "0.1.0", "private": true, "scripts": { - "prestart ": "yarn generate", "start": "react-scripts start", "build": "GENERATE_SOURCEMAP=false react-scripts build && gzipper --verbose ./build", "test": "react-scripts test --testMatch '**/__tests__/*' --passWithNoTests --watchAll=false", "test:watch": "react-scripts test --testMatch '**/__tests__/*'", "eject": "react-scripts eject", - "generate": "graphql-codegen --config codegen.yml", "lint": "eslint 'src/**/*.{ts,tsx}'", "storybook": "start-storybook -p 9009 -s public", "build-storybook": "build-storybook -s public" }, "dependencies": { - "@apollo/react-common": "^3.1.4", - "@apollo/react-hooks": "^3.1.5", - "apollo-boost": "^0.4.9", - "graphql": "^15.0.0", "lodash": "^4.17.15", "react": "^16.13.1", "react-dom": "^16.13.1", @@ -27,12 +21,6 @@ "devDependencies": { "@commitlint/cli": "^8.3.5", "@commitlint/config-conventional": "^8.3.4", - "@graphql-codegen/cli": "1.15.0", - "@graphql-codegen/import-types-preset": "^1.15.0", - "@graphql-codegen/near-operation-file-preset": "^1.15.0", - "@graphql-codegen/typescript": "1.15.0", - "@graphql-codegen/typescript-operations": "1.15.0", - "@graphql-codegen/typescript-react-apollo": "1.15.0", "@storybook/addon-actions": "^5.3.19", "@storybook/addon-docs": "^5.3.19", "@storybook/addon-links": "^5.3.19", diff --git a/src/api/operations/User/queries.graphql b/src/api/operations/User/queries.graphql deleted file mode 100644 index 14ec1c2c..00000000 --- a/src/api/operations/User/queries.graphql +++ /dev/null @@ -1,8 +0,0 @@ -query User { - __schema { - types { - name - kind - } - } -} diff --git a/src/api/operations/User/queries.tsx b/src/api/operations/User/queries.tsx deleted file mode 100644 index bbbcc5b7..00000000 --- a/src/api/operations/User/queries.tsx +++ /dev/null @@ -1,3 +0,0 @@ -// autgenerated using https://graphql-code-generator.com/ - -export {} diff --git a/src/config/routes.tsx b/src/config/routes.tsx index 2f03b423..7cc14d50 100644 --- a/src/config/routes.tsx +++ b/src/config/routes.tsx @@ -1,2 +1,2 @@ export const API_ROOT = '' -export const GRAPHQL = `${API_ROOT}/graphql` +export const DATA_URL = `${API_ROOT}/data` diff --git a/src/index.tsx b/src/index.tsx index 93c34645..519bd6e4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,22 +1,13 @@ import React from 'react' import ReactDOM from 'react-dom' -import ApolloClient from 'apollo-boost' -import { ApolloProvider } from '@apollo/react-hooks' -import { GRAPHQL } from 'config' import { App } from 'features/App' import * as serviceWorker from './serviceWorker' -const client = new ApolloClient({ - uri: GRAPHQL, -}) - ReactDOM.render( - - - + , document.getElementById('root'), ) diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts index 6431bc5f..d3e30f32 100644 --- a/src/react-app-env.d.ts +++ b/src/react-app-env.d.ts @@ -1 +1,2 @@ +// eslint-disable-next-line spaced-comment /// diff --git a/src/api/requests/index.tsx b/src/requests/index.tsx similarity index 100% rename from src/api/requests/index.tsx rename to src/requests/index.tsx diff --git a/src/api/requests/login.tsx b/src/requests/login.tsx similarity index 100% rename from src/api/requests/login.tsx rename to src/requests/login.tsx diff --git a/src/serviceWorker.ts b/src/serviceWorker.ts index 425d17b1..5656739b 100644 --- a/src/serviceWorker.ts +++ b/src/serviceWorker.ts @@ -1,3 +1,4 @@ +/* eslint-disable */ // This optional code is used to register a service worker. // register() is not called by default. diff --git a/src/types/index.tsx b/src/types/index.tsx deleted file mode 100644 index bbbcc5b7..00000000 --- a/src/types/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -// autgenerated using https://graphql-code-generator.com/ - -export {} From 0d93512e5462daf0120694646577fcfce03fafc8 Mon Sep 17 00:00:00 2001 From: "mirlan.maksitaliev" Date: Fri, 5 Jun 2020 13:01:07 +0600 Subject: [PATCH 2/4] refactor(ott-67): copied callApi helper from hockey --- src/helpers/callApi/checkStatus.tsx | 7 ++++ src/helpers/callApi/clearUserAuthInfo.tsx | 4 +++ src/helpers/callApi/getRequestConfig.tsx | 35 +++++++++++++++++++ src/helpers/callApi/getResponseData.tsx | 3 ++ src/helpers/callApi/index.tsx | 42 +++++++++++++++++++++++ src/helpers/callApi/loadIdToken.tsx | 1 + src/helpers/callApi/parseJSON.tsx | 1 + src/helpers/callApi/removeCookie.tsx | 11 ++++++ src/helpers/callApi/types.tsx | 14 ++++++++ src/helpers/index.tsx | 2 +- 10 files changed, 119 insertions(+), 1 deletion(-) create mode 100644 src/helpers/callApi/checkStatus.tsx create mode 100644 src/helpers/callApi/clearUserAuthInfo.tsx create mode 100644 src/helpers/callApi/getRequestConfig.tsx create mode 100644 src/helpers/callApi/getResponseData.tsx create mode 100644 src/helpers/callApi/index.tsx create mode 100644 src/helpers/callApi/loadIdToken.tsx create mode 100644 src/helpers/callApi/parseJSON.tsx create mode 100644 src/helpers/callApi/removeCookie.tsx create mode 100644 src/helpers/callApi/types.tsx diff --git a/src/helpers/callApi/checkStatus.tsx b/src/helpers/callApi/checkStatus.tsx new file mode 100644 index 00000000..4b3b206a --- /dev/null +++ b/src/helpers/callApi/checkStatus.tsx @@ -0,0 +1,7 @@ +export const checkStatus = (response: Response) => { + if (!response.ok) { + return Promise.reject(new Error(response.statusText)) + } + + return Promise.resolve(response) +} diff --git a/src/helpers/callApi/clearUserAuthInfo.tsx b/src/helpers/callApi/clearUserAuthInfo.tsx new file mode 100644 index 00000000..c48925f4 --- /dev/null +++ b/src/helpers/callApi/clearUserAuthInfo.tsx @@ -0,0 +1,4 @@ +export const clearUserAuthInfo = () => { + localStorage.removeItem('id_token') + localStorage.removeItem('AuthUser') +} diff --git a/src/helpers/callApi/getRequestConfig.tsx b/src/helpers/callApi/getRequestConfig.tsx new file mode 100644 index 00000000..8bbf113e --- /dev/null +++ b/src/helpers/callApi/getRequestConfig.tsx @@ -0,0 +1,35 @@ +import isString from 'lodash/isString' + +import { loadIdToken } from './loadIdToken' +import { TRequestAbortController, TRequestConfig } from './types' + +export const getRequestConfig = ( + config: TRequestConfig, + abortController?: TRequestAbortController, +) => { + const requestConfig = { + method: 'POST', + ...config, + headers: new Headers(), + } + + if (config.body && !isString(config.body)) { + requestConfig.body = JSON.stringify(config.body) + } + + if (config.body) { + requestConfig.headers.set('Content-Type', 'application/json') + } + + if (abortController) { + requestConfig.signal = abortController.signal + } + + const token = loadIdToken() + + if (token) { + requestConfig.headers.set('x-auth-token', token) + } + + return requestConfig +} diff --git a/src/helpers/callApi/getResponseData.tsx b/src/helpers/callApi/getResponseData.tsx new file mode 100644 index 00000000..149ace17 --- /dev/null +++ b/src/helpers/callApi/getResponseData.tsx @@ -0,0 +1,3 @@ +export const getResponseData = (proc: string) => (response: any) => ( + response?.data?.[0]?.[proc] +) diff --git a/src/helpers/callApi/index.tsx b/src/helpers/callApi/index.tsx new file mode 100644 index 00000000..fa8ef94f --- /dev/null +++ b/src/helpers/callApi/index.tsx @@ -0,0 +1,42 @@ +import { TCallApi } from './types' +import { parseJSON } from './parseJSON' +import { checkStatus } from './checkStatus' +import { removeCookie } from './removeCookie' +import { clearUserAuthInfo } from './clearUserAuthInfo' +import { getRequestConfig } from './getRequestConfig' + +export * from './getResponseData' + +export const callApi = ({ + abortController, + config, + url, +}: TCallApi) => { + const requestConfig = getRequestConfig(config, abortController) + + // eslint-disable-next-line no-console + console.log( + '%c callApi from module - config ', + 'color: white; background-color: #95B46A', + config, + ) + + return fetch(url, requestConfig) + .then(checkStatus) + .then(parseJSON) + .catch((error) => { + if (error.message === 'Unauthorized') { + clearUserAuthInfo() + removeCookie('token') + + if (window.location.pathname !== '/login') { + localStorage.setItem('backLocation', window.location.pathname) + window.location.pathname = '/login' + } + } + + // eslint-disable-next-line no-console + console.error(error) + return Promise.reject(error) + }) +} diff --git a/src/helpers/callApi/loadIdToken.tsx b/src/helpers/callApi/loadIdToken.tsx new file mode 100644 index 00000000..c1f70feb --- /dev/null +++ b/src/helpers/callApi/loadIdToken.tsx @@ -0,0 +1 @@ +export const loadIdToken = () => localStorage.getItem('id_token') diff --git a/src/helpers/callApi/parseJSON.tsx b/src/helpers/callApi/parseJSON.tsx new file mode 100644 index 00000000..12709130 --- /dev/null +++ b/src/helpers/callApi/parseJSON.tsx @@ -0,0 +1 @@ +export const parseJSON = (response: Response) => response.json() diff --git a/src/helpers/callApi/removeCookie.tsx b/src/helpers/callApi/removeCookie.tsx new file mode 100644 index 00000000..4118169c --- /dev/null +++ b/src/helpers/callApi/removeCookie.tsx @@ -0,0 +1,11 @@ +export const removeCookie = ( + name: string, + domain: string = '.instatscout.com', +) => { + document.cookie = ` + ${name}=; + expires='Thu, 01 Jan 1970 00:00:00 UTC'; + path=/; + domain=${domain} + ` +} diff --git a/src/helpers/callApi/types.tsx b/src/helpers/callApi/types.tsx new file mode 100644 index 00000000..cb2b105a --- /dev/null +++ b/src/helpers/callApi/types.tsx @@ -0,0 +1,14 @@ +export type TRequestConfig = { + [key: string]: any, + body?: any, + headers?: Headers, + signal?: any, +} + +export type TRequestAbortController = AbortController | null + +export type TCallApi = { + abortController?: TRequestAbortController, + config: TRequestConfig, + url: string, +} diff --git a/src/helpers/index.tsx b/src/helpers/index.tsx index 336ce12b..8842e651 100644 --- a/src/helpers/index.tsx +++ b/src/helpers/index.tsx @@ -1 +1 @@ -export {} +export * from './callApi' From 26725457f5bf13bc47ad552efa914006510aa04c Mon Sep 17 00:00:00 2001 From: "mirlan.maksitaliev" Date: Fri, 5 Jun 2020 15:02:00 +0600 Subject: [PATCH 3/4] refactor(ott-36): callApi changes --- src/config/authKeys.tsx | 7 ++++ src/config/index.tsx | 2 + src/config/pages.tsx | 3 ++ src/helpers/callApi/clearUserAuthInfo.tsx | 6 ++- src/helpers/callApi/getRequestConfig.tsx | 22 ++++------ src/helpers/callApi/index.tsx | 42 +++++++++----------- src/helpers/callApi/logoutIfUnauthorized.tsx | 22 ++++++++++ src/helpers/callApi/types.tsx | 7 +--- 8 files changed, 66 insertions(+), 45 deletions(-) create mode 100644 src/config/authKeys.tsx create mode 100644 src/config/pages.tsx create mode 100644 src/helpers/callApi/logoutIfUnauthorized.tsx diff --git a/src/config/authKeys.tsx b/src/config/authKeys.tsx new file mode 100644 index 00000000..a6199593 --- /dev/null +++ b/src/config/authKeys.tsx @@ -0,0 +1,7 @@ +export const AUTH_KEYS = { + authUser: 'AuthUser', + backLocation: 'backLocation', + cookieToken: 'token', + headerToken: 'x-auth-token', + idToken: 'id_token', +} diff --git a/src/config/index.tsx b/src/config/index.tsx index 49800c7a..bf81f61f 100644 --- a/src/config/index.tsx +++ b/src/config/index.tsx @@ -1 +1,3 @@ export * from './routes' +export * from './pages' +export * from './authKeys' diff --git a/src/config/pages.tsx b/src/config/pages.tsx new file mode 100644 index 00000000..f960c655 --- /dev/null +++ b/src/config/pages.tsx @@ -0,0 +1,3 @@ +export const PAGES = { + login: '/login', +} diff --git a/src/helpers/callApi/clearUserAuthInfo.tsx b/src/helpers/callApi/clearUserAuthInfo.tsx index c48925f4..1af1eeed 100644 --- a/src/helpers/callApi/clearUserAuthInfo.tsx +++ b/src/helpers/callApi/clearUserAuthInfo.tsx @@ -1,4 +1,6 @@ +import { AUTH_KEYS } from 'config' + export const clearUserAuthInfo = () => { - localStorage.removeItem('id_token') - localStorage.removeItem('AuthUser') + localStorage.removeItem(AUTH_KEYS.idToken) + localStorage.removeItem(AUTH_KEYS.authUser) } diff --git a/src/helpers/callApi/getRequestConfig.tsx b/src/helpers/callApi/getRequestConfig.tsx index 8bbf113e..e9eb7f3f 100644 --- a/src/helpers/callApi/getRequestConfig.tsx +++ b/src/helpers/callApi/getRequestConfig.tsx @@ -1,34 +1,28 @@ -import isString from 'lodash/isString' +import { AUTH_KEYS } from 'config' import { loadIdToken } from './loadIdToken' -import { TRequestAbortController, TRequestConfig } from './types' +import { TRequestConfig } from './types' export const getRequestConfig = ( config: TRequestConfig, - abortController?: TRequestAbortController, + signal?: AbortSignal, ) => { const requestConfig = { - method: 'POST', ...config, - headers: new Headers(), - } - - if (config.body && !isString(config.body)) { - requestConfig.body = JSON.stringify(config.body) + headers: config.headers || new Headers(), + method: config.method || 'POST', + signal, } if (config.body) { + requestConfig.body = JSON.stringify(config.body) requestConfig.headers.set('Content-Type', 'application/json') } - if (abortController) { - requestConfig.signal = abortController.signal - } - const token = loadIdToken() if (token) { - requestConfig.headers.set('x-auth-token', token) + requestConfig.headers.set(AUTH_KEYS.headerToken, token) } return requestConfig diff --git a/src/helpers/callApi/index.tsx b/src/helpers/callApi/index.tsx index fa8ef94f..93cd59a0 100644 --- a/src/helpers/callApi/index.tsx +++ b/src/helpers/callApi/index.tsx @@ -1,18 +1,15 @@ import { TCallApi } from './types' import { parseJSON } from './parseJSON' import { checkStatus } from './checkStatus' -import { removeCookie } from './removeCookie' -import { clearUserAuthInfo } from './clearUserAuthInfo' import { getRequestConfig } from './getRequestConfig' +import { logoutIfUnauthorized } from './logoutIfUnauthorized' -export * from './getResponseData' - -export const callApi = ({ - abortController, +export const callApiBase = ({ + abortSignal, config, url, }: TCallApi) => { - const requestConfig = getRequestConfig(config, abortController) + const requestConfig = getRequestConfig(config, abortSignal) // eslint-disable-next-line no-console console.log( @@ -22,21 +19,18 @@ export const callApi = ({ ) return fetch(url, requestConfig) - .then(checkStatus) - .then(parseJSON) - .catch((error) => { - if (error.message === 'Unauthorized') { - clearUserAuthInfo() - removeCookie('token') - - if (window.location.pathname !== '/login') { - localStorage.setItem('backLocation', window.location.pathname) - window.location.pathname = '/login' - } - } - - // eslint-disable-next-line no-console - console.error(error) - return Promise.reject(error) - }) } + +export const callApi = ({ + abortSignal, + config, + url, +}: TCallApi) => ( + callApiBase({ + abortSignal, + config, + url, + }).then(checkStatus) + .then(parseJSON) + .catch(logoutIfUnauthorized) +) diff --git a/src/helpers/callApi/logoutIfUnauthorized.tsx b/src/helpers/callApi/logoutIfUnauthorized.tsx new file mode 100644 index 00000000..a666d742 --- /dev/null +++ b/src/helpers/callApi/logoutIfUnauthorized.tsx @@ -0,0 +1,22 @@ +import { AUTH_KEYS, PAGES } from 'config' + +import { removeCookie } from './removeCookie' +import { clearUserAuthInfo } from './clearUserAuthInfo' + +export const logoutIfUnauthorized = (error: Error) => { + if (error.message === 'Unauthorized') { + clearUserAuthInfo() + removeCookie(AUTH_KEYS.cookieToken) + + const { pathname } = window.location + + if (pathname !== PAGES.login) { + localStorage.setItem(AUTH_KEYS.backLocation, pathname) + window.location.pathname = PAGES.login + } + } + + // eslint-disable-next-line no-console + console.error(error) + return Promise.reject(error) +} diff --git a/src/helpers/callApi/types.tsx b/src/helpers/callApi/types.tsx index cb2b105a..fe2212b3 100644 --- a/src/helpers/callApi/types.tsx +++ b/src/helpers/callApi/types.tsx @@ -1,14 +1,11 @@ export type TRequestConfig = { - [key: string]: any, body?: any, headers?: Headers, - signal?: any, + method?: string, } -export type TRequestAbortController = AbortController | null - export type TCallApi = { - abortController?: TRequestAbortController, + abortSignal?: AbortSignal, config: TRequestConfig, url: string, } From c34345fc09598d8f33f83f1510e061b0591a6897 Mon Sep 17 00:00:00 2001 From: "mirlan.maksitaliev" Date: Wed, 3 Jun 2020 18:57:32 +0600 Subject: [PATCH 4/4] chore(ott-36): storybook config update --- .storybook/main.js | 14 +++++------ .storybook/preview-head.html | 47 ++++++++++++++++++++++++++++++++++++ .storybook/preview.js | 7 ++++++ package.json | 1 + 4 files changed, 61 insertions(+), 8 deletions(-) create mode 100644 .storybook/preview-head.html create mode 100644 .storybook/preview.js diff --git a/.storybook/main.js b/.storybook/main.js index ab7f9c40..8ef6cf34 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -3,12 +3,10 @@ module.exports = { addons: [ '@storybook/addon-actions', '@storybook/addon-links', - '@storybook/preset-create-react-app', - { - name: "@storybook/addon-docs", - options: { - configureJSX: true, - }, - }, + '@storybook/addon-docs', + 'storybook-addon-styled-component-theme/dist/register', ], -}; + presets: [ + '@storybook/preset-create-react-app', + ] +} diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html new file mode 100644 index 00000000..ae1b4941 --- /dev/null +++ b/.storybook/preview-head.html @@ -0,0 +1,47 @@ + + diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 00000000..dd25eb0c --- /dev/null +++ b/.storybook/preview.js @@ -0,0 +1,7 @@ +import { addDecorator } from '@storybook/react' +import { withThemesProvider } from 'storybook-addon-styled-component-theme' + +import { lightTheme, darkTheme } from '../src/features/Theme/config' + +const themes = [darkTheme, lightTheme] +addDecorator(withThemesProvider(themes)) diff --git a/package.json b/package.json index 4fdba62a..54a5925e 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "gzipper": "^3.7.0", "husky": "^4.2.5", "lint-staged": "^10.2.7", + "storybook-addon-styled-component-theme": "^1.3.0", "ts-loader": "^7.0.5", "typescript": "^3.9.3" },