From ef71e5554385b67bbcf7d44cafe26898f71e65af Mon Sep 17 00:00:00 2001 From: muerwre Date: Tue, 23 Jul 2019 19:00:48 +0700 Subject: [PATCH] code cleanup --- src/components/flow/Cell/index.tsx | 26 ++++++++++++ src/components/flow/Cell/styles.scss | 17 ++++++++ src/components/flow/TestGrid/index.tsx | 21 +++++----- src/components/flow/TestGrid/style.scss | 41 ------------------- src/components/login/LoginForm/index.tsx | 12 +++--- src/components/main/Header/index.tsx | 4 +- src/components/main/SidePane/index.tsx | 1 + src/components/main/SidePane/styles.scss | 3 +- src/containers/App.tsx | 6 +-- src/containers/FlowLayout/index.tsx | 6 +-- src/containers/LoginLayout/index.tsx | 6 +-- src/containers/MainLayout/index.tsx | 7 ++-- .../MainLayout/{style.scss => styles.scss} | 0 src/index.html | 1 + src/index.tsx | 4 +- src/redux/store.ts | 4 +- src/redux/user/actions.ts | 4 +- src/redux/user/api.ts | 6 +-- src/redux/user/reducer.ts | 4 +- src/redux/user/sagas.ts | 8 ++-- src/utils/api/index.ts | 4 +- tsconfig.json | 21 +++++----- webpack.config.js | 11 +---- 23 files changed, 108 insertions(+), 109 deletions(-) create mode 100644 src/components/flow/Cell/index.tsx create mode 100644 src/components/flow/Cell/styles.scss rename src/containers/MainLayout/{style.scss => styles.scss} (100%) diff --git a/src/components/flow/Cell/index.tsx b/src/components/flow/Cell/index.tsx new file mode 100644 index 00000000..bd9f8c59 --- /dev/null +++ b/src/components/flow/Cell/index.tsx @@ -0,0 +1,26 @@ +import React, { FC } from 'react'; +import * as styles from './styles.scss'; + +interface IProps { + height?: number; + width?: number; + title?: string; +} + +const Cell: FC = ({ + width = 1, + height = 1, + title, +}) => ( +
+ { title &&
{title}
} +
+); + +export { Cell }; diff --git a/src/components/flow/Cell/styles.scss b/src/components/flow/Cell/styles.scss new file mode 100644 index 00000000..5b4d68cd --- /dev/null +++ b/src/components/flow/Cell/styles.scss @@ -0,0 +1,17 @@ +.cell { + padding: $gap / 4; + box-sizing: border-box; + display: flex; + flex: 0 0; + background: $cell_bg; + border-radius: 4px; + + @include outer_shadow(); +} + +.title { + font-family: 'Montserrat'; + font-weight: 700; + font-size: 32px; + text-transform: uppercase; +} diff --git a/src/components/flow/TestGrid/index.tsx b/src/components/flow/TestGrid/index.tsx index be1ad186..db3f5af7 100644 --- a/src/components/flow/TestGrid/index.tsx +++ b/src/components/flow/TestGrid/index.tsx @@ -1,19 +1,20 @@ import * as React from 'react'; import classnames from 'classnames'; +import { Cell } from "~/components/flow/Cell"; const style = require('./style.scss'); export const TestGrid = () => (
-
-
-
-
-
-
-
-
-
-
+ + + + + +
); diff --git a/src/components/flow/TestGrid/style.scss b/src/components/flow/TestGrid/style.scss index 3c460158..99ecf6e3 100644 --- a/src/components/flow/TestGrid/style.scss +++ b/src/components/flow/TestGrid/style.scss @@ -18,47 +18,6 @@ $cols: $content_width / $cell; grid-row-gap: $grid_line; } -.cell { - padding: $gap / 4; - box-sizing: border-box; - display: flex; - flex: 0 0; - background: $cell_bg; - border-radius: 4px; - - @include outer_shadow(); - //&::after { - // content: ' '; - // background: transparentize(white, 0.9); - // width: 100%; - // height: 100%; - //} -} - -.vert_2 { - grid-row-end: span 2; -} - -.vert_3 { - grid-row-end: span 3; -} - -.vert_4 { - grid-row-end: span 3; -} - -.hor_2 { - grid-column-end: span 2; -} - -.hor_3 { - grid-column-end: span 3; -} - -.hor_4 { - grid-column-end: span 4; -} - .pad_last { grid-column-end: $cols + 1; } diff --git a/src/components/login/LoginForm/index.tsx b/src/components/login/LoginForm/index.tsx index e4af94a6..bc1ac13e 100644 --- a/src/components/login/LoginForm/index.tsx +++ b/src/components/login/LoginForm/index.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import { TextInput } from "$components/input/TextInput"; -import { Button } from "$components/input/Button"; +import { TextInput } from "~/components/input/TextInput"; +import { Button } from "~/components/input/Button"; import { connect } from 'react-redux'; import { bindActionCreators } from "redux"; -import { userSendLoginRequest, userSetLoginError } from "$redux/user/actions"; -import { IUserFormStateLogin, IUserState } from "$redux/user/reducer"; -import { Info } from "$components/input/Info"; +import { userSendLoginRequest, userSetLoginError } from "~/redux/user/actions"; +import { IUserFormStateLogin, IUserState } from "~/redux/user/reducer"; +import { Info } from "~/components/input/Info"; -const login = require('$containers/LoginLayout/style'); +const login = require('~/containers/LoginLayout/style'); const style = require('./style.scss'); interface ILoginFormProps { diff --git a/src/components/main/Header/index.tsx b/src/components/main/Header/index.tsx index de7ad802..439c8a97 100644 --- a/src/components/main/Header/index.tsx +++ b/src/components/main/Header/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import { Logo } from "$components/main/Logo"; +import { Logo } from "~/components/main/Logo"; import { connect } from 'react-redux'; -import { IUserProfile, IUserState } from "$redux/user/reducer"; +import { IUserProfile, IUserState } from "~/redux/user/reducer"; const style = require('./style.scss'); diff --git a/src/components/main/SidePane/index.tsx b/src/components/main/SidePane/index.tsx index 1a580d9c..9b17f5c9 100644 --- a/src/components/main/SidePane/index.tsx +++ b/src/components/main/SidePane/index.tsx @@ -21,6 +21,7 @@ export const SidePane = ({ }) => { return (
+
diff --git a/src/components/main/SidePane/styles.scss b/src/components/main/SidePane/styles.scss index 8a39eba7..6f129f53 100644 --- a/src/components/main/SidePane/styles.scss +++ b/src/components/main/SidePane/styles.scss @@ -21,7 +21,8 @@ &:global(.logo) { color: white; height: (54px * 1.5) + $gap / 2; - background: url('http://vault48.org/pixmaps/logo.png') no-repeat -20px -40px #191919; + //background: url('http://vault48.org/pixmaps/logo.png') no-repeat -20px -40px #191919; + background: white; // #c1543d background-size: 140px; font-weight: 600; diff --git a/src/containers/App.tsx b/src/containers/App.tsx index 22fbf38b..bc493b6f 100644 --- a/src/containers/App.tsx +++ b/src/containers/App.tsx @@ -3,10 +3,10 @@ import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import { hot } from 'react-hot-loader'; import { ConnectedRouter } from "connected-react-router"; -import { history } from "$redux/store"; +import { history } from "~/redux/store"; import { NavLink, Switch, Route } from 'react-router-dom'; -import { FlowLayout } from "$containers/FlowLayout"; -import { LoginLayout } from "$containers/LoginLayout"; +import { FlowLayout } from "~/containers/FlowLayout"; +import { LoginLayout } from "~/containers/LoginLayout"; interface IAppProps {} interface IAppState {} diff --git a/src/containers/FlowLayout/index.tsx b/src/containers/FlowLayout/index.tsx index f28224f8..30cc5ed9 100644 --- a/src/containers/FlowLayout/index.tsx +++ b/src/containers/FlowLayout/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import { MainLayout } from "$containers/MainLayout"; -import { HeroPlaceholder } from "$components/flow/HeroPlaceholder"; -import { TestGrid } from "$components/flow/TestGrid"; +import { MainLayout } from "~/containers/MainLayout"; +import { HeroPlaceholder } from "~/components/flow/HeroPlaceholder"; +import { TestGrid } from "~/components/flow/TestGrid"; // const style = require('./style.scss'); export const FlowLayout = () => ( diff --git a/src/containers/LoginLayout/index.tsx b/src/containers/LoginLayout/index.tsx index 57bfd79e..cb364ca2 100644 --- a/src/containers/LoginLayout/index.tsx +++ b/src/containers/LoginLayout/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import { LoginForm } from '$components/login/LoginForm'; -import { Header } from "$components/main/Header"; -import { GodRays } from "$components/main/GodRays"; +import { LoginForm } from '~/components/login/LoginForm'; +import { Header } from "~/components/main/Header"; +import { GodRays } from "~/components/main/GodRays"; const style = require('./style.scss'); diff --git a/src/containers/MainLayout/index.tsx b/src/containers/MainLayout/index.tsx index 1c303ff8..bb7ac411 100644 --- a/src/containers/MainLayout/index.tsx +++ b/src/containers/MainLayout/index.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; -import { SidePane } from "$components/main/SidePane"; +import { SidePane } from "~/components/main/SidePane"; +import { Header } from "~/components/main/Header"; -const style = require('./style.scss'); +import * as styles from './styles.scss'; export const MainLayout = ({ children }) => ( -
+
{ //
} diff --git a/src/containers/MainLayout/style.scss b/src/containers/MainLayout/styles.scss similarity index 100% rename from src/containers/MainLayout/style.scss rename to src/containers/MainLayout/styles.scss diff --git a/src/index.html b/src/index.html index 6fe9461f..d7db637b 100644 --- a/src/index.html +++ b/src/index.html @@ -4,6 +4,7 @@ + <%= htmlWebpackPlugin.options.title %> diff --git a/src/index.tsx b/src/index.tsx index dfc3c511..80ee80bb 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -8,8 +8,8 @@ import * as React from 'react'; import { render } from 'react-dom'; import { Provider } from 'react-redux'; import { PersistGate } from 'redux-persist/integration/react'; -import { configureStore } from '$redux/store'; -import App from '$containers/App'; +import { configureStore } from '~/redux/store'; +import App from '~/containers/App'; require('./styles/main.scss'); diff --git a/src/redux/store.ts b/src/redux/store.ts index ddde92df..f9d55d38 100644 --- a/src/redux/store.ts +++ b/src/redux/store.ts @@ -4,8 +4,8 @@ import { persistStore, persistReducer } from 'redux-persist'; import storage from 'redux-persist/lib/storage'; import createSagaMiddleware from 'redux-saga'; import { connectRouter } from 'connected-react-router' -import userReducer from '$redux/user/reducer'; -import userSaga from '$redux/user/sagas'; +import userReducer from '~/redux/user/reducer'; +import userSaga from '~/redux/user/sagas'; import { createBrowserHistory } from 'history'; import { PersistConfig, Persistor } from "redux-persist/es/types"; import { routerMiddleware } from 'connected-react-router' diff --git a/src/redux/user/actions.ts b/src/redux/user/actions.ts index 0074719a..3de9721e 100644 --- a/src/redux/user/actions.ts +++ b/src/redux/user/actions.ts @@ -1,5 +1,5 @@ -import { USER_ACTIONS } from "$redux/user/constants"; -import { IUserProfile } from "$redux/user/reducer"; +import { USER_ACTIONS } from "~/redux/user/constants"; +import { IUserProfile } from "~/redux/user/reducer"; export const userSendLoginRequest = ({ username, password diff --git a/src/redux/user/api.ts b/src/redux/user/api.ts index 0b688624..104a74f3 100644 --- a/src/redux/user/api.ts +++ b/src/redux/user/api.ts @@ -1,6 +1,6 @@ -import { api, authMiddleware } from "$utils/api"; -import { API } from "$constants/api"; -import { IApiUser } from "$redux/user/constants"; +import { api, authMiddleware } from "~/utils/api"; +import { API } from "~/constants/api"; +import { IApiUser } from "~/redux/user/constants"; export const apiUserLogin = ( { username, password }: diff --git a/src/redux/user/reducer.ts b/src/redux/user/reducer.ts index 8d317ded..883c7dcc 100644 --- a/src/redux/user/reducer.ts +++ b/src/redux/user/reducer.ts @@ -1,6 +1,6 @@ import { createReducer } from 'reduxsauce'; -import * as ActionCreators from "$redux/user/actions"; -import { USER_ACTIONS } from "$redux/user/constants"; +import * as ActionCreators from "~/redux/user/actions"; +import { USER_ACTIONS } from "~/redux/user/constants"; export interface IUserProfile { id: number, diff --git a/src/redux/user/sagas.ts b/src/redux/user/sagas.ts index 621db035..bd530c0e 100644 --- a/src/redux/user/sagas.ts +++ b/src/redux/user/sagas.ts @@ -1,9 +1,9 @@ import { call, put, takeLatest } from 'redux-saga/effects'; import { SagaIterator } from 'redux-saga'; -import { IApiUser, USER_ACTIONS, USER_ERRORS, USER_STATUSES } from "$redux/user/constants"; -import * as ActionCreators from '$redux/user/actions'; -import { apiUserLogin } from "$redux/user/api"; -import { userSetLoginError, userSetUser } from "$redux/user/actions"; +import { IApiUser, USER_ACTIONS, USER_ERRORS, USER_STATUSES } from "~/redux/user/constants"; +import * as ActionCreators from '~/redux/user/actions'; +import { apiUserLogin } from "~/redux/user/api"; +import { userSetLoginError, userSetUser } from "~/redux/user/actions"; import { push } from 'connected-react-router' function* sendLoginRequestSaga({ username, password }: ReturnType): SagaIterator { diff --git a/src/utils/api/index.ts b/src/utils/api/index.ts index 45012ee1..d0417e75 100644 --- a/src/utils/api/index.ts +++ b/src/utils/api/index.ts @@ -1,6 +1,6 @@ import axios from 'axios'; -import { API } from "$constants/api"; -import { store } from '$redux/store'; +import { API } from "~/constants/api"; +import { store } from '~/redux/store'; import { push } from "connected-react-router"; export const authMiddleware = r => { diff --git a/tsconfig.json b/tsconfig.json index 3ee6e9a6..5af29fb9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,25 +5,24 @@ "sourceMap": true, "noImplicitAny": false, "allowSyntheticDefaultImports": true, - "esModuleInterop": true, + "removeComments": true, "module": "commonjs", - "target": "es6", + "moduleResolution": "node", + "esModuleInterop": true, + "target": "es2018", + "isolatedModules": true, "jsx": "react", "lib": [ "es2015", "DOM", "es6" ], - "baseUrl": "./", + "baseUrl": ".", "paths": { - "$components/*": [ "src/components/*" ], - "$containers/*": [ "src/containers/*" ], - "$constants/*": [ "src/constants/*" ], - "$sprites/*": [ "src/sprites/*" ], - "$config/*": [ "./config/*" ], - "$styles/*": [ "src/styles/*" ], - "$redux/*": [ "src/redux/*" ], - "$utils/*": [ "src/utils/*" ] + "~/*": ["src/*"] } }, "include": [ "./src/**/*", "./custom.d.ts" + ], + "exclude": [ + "./__tests__/**/*" ] } diff --git a/webpack.config.js b/webpack.config.js index 8d1bbba7..9d5d11a7 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -25,14 +25,7 @@ const devtool = isDevelopment ? 'cheap-module-eval-source-map' : 'source-map'; const resolve = { alias: { 'react-dom': '@hot-loader/react-dom', - $components: join(__dirname, 'src/components'), - $containers: join(__dirname, 'src/containers'), - $constants: join(__dirname, 'src/constants'), - $sprites: join(__dirname, 'src/sprites'), - $config: join(__dirname, './config'), - $styles: join(__dirname, 'src/styles'), - $redux: join(__dirname, 'src/redux'), - $utils: join(__dirname, 'src/utils'), + '~': join(__dirname, 'src'), }, extensions: ['*', '.ts', '.tsx', '.js', '.jsx', '.json', '.scss'] }; @@ -171,7 +164,7 @@ module.exports = () => { }, devServer: { historyApiFallback: true, - port: 8000, + port: 4848, // host: '192.168.88.40', contentBase: 'dist', publicPath: '/',