Merge pull request #4 from instat/ott-67-project-configuration

Ott 67 project configuration

.eslintignore

@@ -1,4 +0,0 @@
-src/types/*
-src/api/operations/**/*.tsx
-src/react-app-env.d.ts
-src/serviceWorker.ts

.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',
+  ]
+}

.storybook/preview-head.html

@@ -0,0 +1,47 @@
+<link
+href='https://fonts.googleapis.com/css?family=PT+Sans:400,700&amp;amp;subset=cyrillic,latin'
+rel='stylesheet' type='text/css'/>
+<style>
+  *, *:before, *:after {
+    box-sizing: border-box;
+  }
+
+  body {
+    min-height: 100vh;
+    margin: 20;
+    padding: 20;
+    font-family: Montserrat, Tahoma, sans-serif;
+    font-size: 12px;
+    line-height: 12px;
+    color: #000;
+  }
+
+  h1, h2, h3, h4, h5, h6, p, ul, li {
+    margin: 0;
+    padding: 0;
+    font-size: 12px;
+    line-height: 12px;
+  }
+
+  ul, li {
+    list-style: none;
+  }
+
+  a {
+    text-decoration: none;
+    color: #000;
+  }
+
+  fieldset {
+    margin: 0;
+    min-width: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  button, input, select, textarea {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+</style>

.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))

codegen.yml

@@ -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

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],

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",
@@ -62,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"
   },

src/api/operations/User/queries.graphql

@@ -1,8 +0,0 @@
-query User {
-  __schema {
-     types {
-       name
-       kind
-     }
-  }
-}

src/api/operations/User/queries.tsx

@@ -1,3 +0,0 @@
-// autgenerated using https://graphql-code-generator.com/
-
-export {}

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',
+}

src/config/index.tsx

@@ -1 +1,3 @@
 export * from './routes'
+export * from './pages'
+export * from './authKeys'

src/config/pages.tsx

@@ -0,0 +1,3 @@
+export const PAGES = {
+  login: '/login',
+}

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`

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)
+}

src/helpers/callApi/clearUserAuthInfo.tsx

@@ -0,0 +1,6 @@
+import { AUTH_KEYS } from 'config'
+
+export const clearUserAuthInfo = () => {
+  localStorage.removeItem(AUTH_KEYS.idToken)
+  localStorage.removeItem(AUTH_KEYS.authUser)
+}

src/helpers/callApi/getRequestConfig.tsx

@@ -0,0 +1,29 @@
+import { AUTH_KEYS } from 'config'
+
+import { loadIdToken } from './loadIdToken'
+import { TRequestConfig } from './types'
+
+export const getRequestConfig = (
+  config: TRequestConfig,
+  signal?: AbortSignal,
+) => {
+  const requestConfig = {
+    ...config,
+    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')
+  }
+
+  const token = loadIdToken()
+
+  if (token) {
+    requestConfig.headers.set(AUTH_KEYS.headerToken, token)
+  }
+
+  return requestConfig
+}

src/helpers/callApi/getResponseData.tsx

@@ -0,0 +1,3 @@
+export const getResponseData = (proc: string) => (response: any) => (
+  response?.data?.[0]?.[proc]
+)

src/helpers/callApi/index.tsx

@@ -0,0 +1,36 @@
+import { TCallApi } from './types'
+import { parseJSON } from './parseJSON'
+import { checkStatus } from './checkStatus'
+import { getRequestConfig } from './getRequestConfig'
+import { logoutIfUnauthorized } from './logoutIfUnauthorized'
+
+export const callApiBase = ({
+  abortSignal,
+  config,
+  url,
+}: TCallApi) => {
+  const requestConfig = getRequestConfig(config, abortSignal)
+
+  // eslint-disable-next-line no-console
+  console.log(
+    '%c callApi from module - config ',
+    'color: white; background-color: #95B46A',
+    config,
+  )
+
+  return fetch(url, requestConfig)
+}
+
+export const callApi = ({
+  abortSignal,
+  config,
+  url,
+}: TCallApi) => (
+  callApiBase({
+    abortSignal,
+    config,
+    url,
+  }).then(checkStatus)
+    .then(parseJSON)
+    .catch(logoutIfUnauthorized)
+)

src/helpers/callApi/loadIdToken.tsx

@@ -0,0 +1 @@
+export const loadIdToken = () => localStorage.getItem('id_token')

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)
+}

src/helpers/callApi/parseJSON.tsx

@@ -0,0 +1 @@
+export const parseJSON = (response: Response) => response.json()

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}
+  `
+}

src/helpers/callApi/types.tsx

@@ -0,0 +1,11 @@
+export type TRequestConfig = {
+  body?: any,
+  headers?: Headers,
+  method?: string,
+}
+
+export type TCallApi = {
+  abortSignal?: AbortSignal,
+  config: TRequestConfig,
+  url: string,
+}

src/helpers/index.tsx

@@ -1 +1 @@
-export {}
+export * from './callApi'

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(
   <React.StrictMode>
-    <ApolloProvider client={client}>
-      <App />
-    </ApolloProvider>
+    <App />
   </React.StrictMode>,
   document.getElementById('root'),
 )

src/react-app-env.d.ts

@@ -1 +1,2 @@
+// eslint-disable-next-line spaced-comment
 /// <reference types="react-scripts" />

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.
 

src/types/index.tsx

@@ -1,3 +0,0 @@
-// autgenerated using https://graphql-code-generator.com/
-
-export {}