追加

.env.dev

@@ -1 +1,2 @@
-REACT_APP_API_ENDPOINT=
+# API
+REACT_APP_API_ENDPOINT=wss://

.github/workflows/eslint.yml

@@ -1,8 +1,6 @@
 name: ESlint
 
 on:
-  push:
-    branches: [master]
   pull_request:
     branches: [master]
 
@@ -15,12 +13,12 @@ jobs:
         node-version: [10]
 
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
-      - name: yarn install, eslint
+      - name: yarn install and eslint
         run: |
           yarn
           yarn lint

README.md

@@ -13,3 +13,20 @@ npm run lint-fix
 # API
 
 https://github.com/bokotomo/WorkMode-api
+
+## メモ
+
+・reduxHooks はモーダル処理だけに限定して使用してみてる。  
+あまり広く使いすぎると関心がごちゃごちゃになるので、reduxhooks は用途を制限して使う方がいい気がしてる。  
+・onClick とかの Dom から呼び出す関数名には、on プレフィックスを付けてる。
+
+## Check Production
+
+check production by nginx and docker
+
+```
+cd ./infrastructure/docker
+docker-compose up -d
+
+// open http://localhost:9998
+```

infrastructure/docker/docker-compose.yml

@@ -1,13 +1,8 @@
-version: "3.7"
+version: '3.7'
 services:
-    work-mode-front:
-      build:
-        context: .
-        dockerfile: Dockerfile
-      container_name: "work-mode"
-      volumes:
-        - ../../:/src
-      tty: true
-      expose:
-        - 80
-      privileged: true
+  work-mode-front-prod:
+    image: nginx:1.17-alpine
+    ports:
+      - '9998:80'
+    volumes:
+      - ../../build:/usr/share/nginx/html

package.json

@@ -7,17 +7,17 @@
     "@fortawesome/free-brands-svg-icons": "^5.13.0",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@fortawesome/react-fontawesome": "^0.1.9",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.4.0",
+    "@testing-library/user-event": "^7.2.1",
+    "@types/jest": "^24.9.1",
     "@types/node": "^12.12.25",
     "@types/react": "^16.9.19",
     "@types/react-beautiful-dnd": "^12.1.2",
     "@types/react-dom": "^16.9.5",
     "@types/react-modal": "^3.10.5",
     "@types/react-redux": "^7.1.7",
-    "@types/redux-thunk": "^2.1.0",
-    "@types/jest": "^24.9.1",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.4.0",
-    "@testing-library/user-event": "^7.2.1",
+    "@types/react-router-dom": "^5.1.5",
     "dotenv": "^8.2.0",
     "moment": "^2.24.0",
     "react": "^16.12.0",
@@ -27,12 +27,14 @@
     "react-dom": "^16.12.0",
     "react-modal": "^3.11.2",
     "react-redux": "^7.1.3",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "^3.4.1",
     "redux": "^4.0.5",
-    "redux-thunk": "^2.3.0",
+    "redux-saga": "^1.1.3",
     "typescript": "^3.7.5",
     "typescript-fsa": "^3.0.0",
-    "typescript-fsa-reducers": "^1.2.1"
+    "typescript-fsa-reducers": "^1.2.1",
+    "typestyle": "^2.1.0"
   },
   "scripts": {
     "start": "npm run lint-fix && react-app-rewired start",

src/App.tsx

@@ -1,22 +1,16 @@
 import React from 'react';
-import Modal from 'react-modal';
+import { BrowserRouter, Route } from 'react-router-dom';
 import { withCookies } from 'react-cookie';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { fab } from '@fortawesome/free-brands-svg-icons';
-import {
-  faPlus,
-  faCaretDown,
-  faThumbsUp,
-  faEdit,
-  faTimes,
-  faMoon,
-} from '@fortawesome/free-solid-svg-icons';
-import TopPageContainer from './containers/TopPageContainer';
+import '@/setting/fontawesome';
+import '@/setting/reactmodal';
+import TopPageContainer from '@/containers/TopPage';
+import { ValidationPage } from '@/components/validation/Base';
 
-Modal.setAppElement('#root');
-
-library.add(fab, faPlus, faCaretDown, faThumbsUp, faEdit, faTimes, faMoon);
-
-const App: React.FC = () => <TopPageContainer />;
+const App: React.FC = () => (
+  <BrowserRouter>
+    <Route path="/" exact component={TopPageContainer} />
+    <Route path="/validation" component={ValidationPage} />
+  </BrowserRouter>
+);
 
 export default withCookies(App);

src/components/atom/MessageLineBar.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 export const MessageLineBar: React.FC = () => (
   <div
     style={{
-      background: '#3e547a',
+      background: '#2F466B',
       height: 1,
     }}
   />

src/components/atom/UserIconItem.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { style } from '@/css/style';
+
+interface Props {
+  readonly name: string;
+  readonly color: string;
+}
+export const UserIconItem: React.FC<Props> = (props) => {
+  const getTopName = (name: string) => name.slice(0, 1);
+  const css = {
+    item: style({
+      position: 'relative',
+      width: 40,
+      height: 40,
+      lineHeight: '40px',
+      background: props.color,
+      borderRadius: 40,
+      margin: 'auto',
+      color: '#ffffffad',
+      textAlign: 'center',
+      fontSize: 20,
+      fontWeight: 900,
+    }),
+    activeMark: style({
+      position: 'absolute',
+      background: '#48BB33',
+      border: '1px solid #8EBD84',
+      borderRadius: 10,
+      width: 10,
+      height: 10,
+      right: 0,
+      bottom: 0,
+    }),
+  };
+  return (
+    <div className={css.item}>
+      <div className={css.activeMark} />
+      {getTopName(props.name)}
+    </div>
+  );
+};

src/components/atom/UserIconItemMessage.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { style } from '@/css/style';
+
+interface Props {
+  readonly name: string;
+  readonly color: string;
+}
+export const UserIconItemMessage: React.FC<Props> = (props) => {
+  const getTopName = (name: string) => name.slice(0, 1);
+  const css = {
+    item: style({
+      width: 50,
+      height: 50,
+      borderRadius: 50,
+      cursor: 'pointer',
+      lineHeight: '50px',
+      background: props.color,
+      margin: 'auto',
+      color: '#ffffffad',
+      textAlign: 'center',
+      fontSize: 20,
+      fontWeight: 900,
+    }),
+  };
+  return <div className={css.item}>{getTopName(props.name)}</div>;
+};