Merge branch 'release/0.1.7'

.eslintrc

@@ -4,9 +4,10 @@
     "airbnb/rules/react",
   ],
   "plugins": [
+    "@typescript-eslint",
     "simple-import-sort"
   ],
-  "parser": "babel-eslint",
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": 2018,
     "sourceType": "module"
@@ -27,10 +28,24 @@
     "import/prefer-default-export": "warn",
     "import/named": "warn",
     "import/no-named-as-default": "off",
-    "arrow-parens": 0,
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ],
+    "@typescript-eslint/type-annotation-spacing": ["warn", { "before": false, "after": true, "overrides": { "colon": { "before": true, "after": true }, "arrow": { "before": true, "after": true }  } }],
+    'arrow-parens': ['error', 'as-needed'],
     "no-nested-ternary": "off",
-    "no-unused-vars": "warn",
-    "no-unused-expressions": "warn",
+    "no-unused-expressions": "off",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "no-useless-constructor": "off",
+    "@typescript-eslint/no-useless-constructor": "warn",
     "space-before-function-paren": ["warn", "always"],
     "no-spaced-func": "off",
     "func-call-spacing": ["warn", "always"],
@@ -46,6 +61,7 @@
     "no-trailing-spaces": "warn",
     "indent": ["warn", 2],
     "semi": ["warn", "always"],
+    "no-param-reassign": ["warn", { "props": true, "ignorePropertyModificationsFor": ["draft"] }],
     "simple-import-sort/sort": [
       1,
       {
@@ -90,8 +106,13 @@
   "settings": {
     "import/resolver": {
       "node": {
-        "moduleDirectory": ["node_modules", "src", "src/components"]
+        "moduleDirectory": ["node_modules", "src", "src/components"],
+        "extensions": [".js",".jsx",".ts",".tsx"]
       }
+    },
+    "import/extensions": [".js",".jsx",".ts",".tsx"],
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts",".tsx"]
     }
   },
   "overrides": [

package.json

@@ -4,24 +4,24 @@
   "version": "0.1.0",
   "private": false,
   "scripts": {
-    "env:path": "cross-env NODE_PATH=src:src/components",
-    "start": "cross-env NODE_PATH=src:src/components react-scripts start",
-    "build": "$npm_execpath run env:path react-scripts build",
-    "test": "$npm_execpath run env:path react-scripts test",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "analyze": "source-map-explorer 'build/static/js/*.js'",
+    "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "storybook": "$npm_execpath run env:path start-storybook -p 9009 -s public",
-    "build-storybook": "$npm_execpath run env:path build-storybook -s public",
+    "storybook": "start-storybook -p 9009 -s public",
+    "build-storybook": "build-storybook -s public",
     "postbuild": "gzipper --verbose --brotli ./build && gzipper --verbose ./build && ./tools/moveBuildFolder.sh",
     "generate": "python tools/generate-component.py",
-    "lint:css": "stylelint './src/**/*.js'"
+    "lint:css": "stylelint './src/**/*.js' './src/**/*.ts*'"
   },
   "husky": {
     "hooks": {
       "pre-commit": "$npm_execpath lint-staged"
     }
   },
   "lint-staged": {
-    "src/**/*.{js,jsx,json,scss}": [
+    "src/**/*.{js,jsx,ts,tsx,json,scss}": [
       "eslint --fix",
       "stylelint",
       "git add"
@@ -50,6 +50,17 @@
     "@material-ui/icons": "^4.2.1",
     "@material-ui/pickers": "^3.2.9",
     "@sparcs-kaist/react-grid-layout": "^0.18.0",
+    "@types/jest": "^25.1.4",
+    "@types/jsonwebtoken": "^8.3.8",
+    "@types/lodash": "^4.14.149",
+    "@types/node": "^13.9.1",
+    "@types/react": "^16.9.23",
+    "@types/react-dom": "^16.9.5",
+    "@types/react-helmet": "^5.0.15",
+    "@types/react-redux": "^7.1.7",
+    "@types/react-router-dom": "^5.1.3",
+    "@types/redux-actions": "^2.6.1",
+    "@types/styled-components": "^5.0.1",
     "animate.css": "^3.7.2",
     "awesome-debounce-promise": "^2.1.0",
     "axios": "^0.19.0",
@@ -69,9 +80,11 @@
     "immer": "^5.1.0",
     "immutable": "^4.0.0-rc.12",
     "jsonwebtoken": "^8.5.1",
+    "lodash": "^4.17.15",
     "lodash.debounce": "^4.0.8",
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
+    "lodash.set": "^4.3.2",
     "lodash.throttle": "^4.1.1",
     "lodash.uniq": "^4.5.0",
     "lodash.uniqby": "^4.7.0",
@@ -144,11 +157,12 @@
     "prettier": "^1.19.1",
     "regenerator-runtime": "^0.13.3",
     "require-context.macro": "^1.0.4",
+    "source-map-explorer": "^2.3.1",
     "stylelint": "^12.0.1",
     "stylelint-config-recommended": "^3.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.9.0",
-    "typescript": "^3.7.5"
+    "typescript": "^3.8.3"
   },
   "license": "MIT"
 }

public/main.js

@@ -0,0 +1,44 @@
+// Modules to control application life and create native browser window
+const {app, BrowserWindow} = require('electron')
+const path = require('path')
+
+function createWindow () {
+  // Create the browser window.
+  const mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js')
+    },
+    frame: false,
+  })
+
+  // and load the index.html of the app.
+  mainWindow.loadFile(`file://${path.join (__dirname, '../deploy/index.html')}`)
+
+  // Open the DevTools.
+  // mainWindow.webContents.openDevTools()
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.whenReady().then(() => {
+  createWindow()
+
+  app.on('activate', function () {
+    // On macOS it's common to re-create a window in the app when the
+    // dock icon is clicked and there are no other windows open.
+    if (BrowserWindow.getAllWindows().length === 0) createWindow()
+  })
+})
+
+// Quit when all windows are closed.
+app.on('window-all-closed', function () {
+  // On macOS it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') app.quit()
+})
+
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and require them here.

src/boot.js

@@ -1,12 +1,15 @@
 import 'devtools-detect';
 
+import moment from 'moment';
+
 import store from 'store';
 import { checkAuth } from 'store/reducers/auth';
 import { initialize } from 'store/reducers/upload';
 import axios from 'lib/axios';
-import serializer from 'lib/immutable';
 import storage from 'lib/storage';
 
+import { parseJSON } from './lib/utils';
+
 const pwaInstallPromptListener = () => {
   window.addEventListener ('beforeinstallprompt', e => {
     // Prevent Chrome 67 and earlier from automatically showing the prompt
@@ -45,11 +48,16 @@ export default () => {
     throttle ('scroll', 'optimizedScroll');
   }) ());
 
+
   pwaInstallPromptListener ();
 
-  const uploadPersist = storage.getItem ('uploadPersist', false);
+  const uploadPersist = storage.getItem ('uploadPersist');
   if (uploadPersist) {
-    store.dispatch (initialize (serializer.parse (uploadPersist)));
+    if (uploadPersist.date) {
+      store.dispatch (initialize (uploadPersist));
+    } else {
+      storage.removeItem ('uploadPersist');
+    }
   }
 
   const token = storage.getItem ('token');
@@ -61,6 +69,7 @@ export default () => {
 };
 
 window.addEventListener ('devtoolschange', () => {
+  if (process.env.NODE_ENV !== 'production') return;
   import ('static/images/recruitAscii').then (asciiArt => {
     // eslint-disable-next-line no-console
     console.log (asciiArt.default);

src/components/atoms/Button/Button.js

@@ -9,7 +9,7 @@ const Button = ({
 }) => (
   <StyledButton
     {...props}
-    onClick={(event) => {
+    onClick={event => {
       if (typeof onClick === 'function') onClick (event);
       if (to) history.push (to);
     }}

src/components/atoms/InputBase/InputBase.js

@@ -14,7 +14,7 @@ const useStyles = makeStyles ({
   },
 });
 
-const InputBase = (props) => {
+const InputBase = props => {
   const classes = useStyles ();
   return <MInputBase className={classes.root} {...props} />;
 };

src/components/atoms/Modal/Modal.js

@@ -38,7 +38,7 @@ const ModalWrapper = styled.div`
   justify-content: center;
 `;
 
-const Modal = (props) => (
+const Modal = props => (
   <Portal>
     <ModalWrapper>
       {props.children}

src/components/atoms/TwoCol/TwoCol.js

@@ -7,6 +7,8 @@ const colMixin = css`
   display: flex;
   flex-direction: column;
   flex: ${props => props.flex} 0 0;
+  flex-shrink: 0;
+  flex-basis: auto;
   min-width: 0;
   ${media.tablet (css`
     flex: ${props => props.flex};
@@ -39,10 +41,11 @@ const TwoCol = styled.section`
   display: flex;
   width: 100%;
   flex-wrap: wrap;
+  flex-shrink: 0;
+  flex-basis: auto;
   ${props => (props.mobileWrap ? css`
     flex-direction: column;
-  ` : css`
-  `)};
+  ` : '')};
  
   ${media.tablet (css`
     flex-direction: row;

src/components/containers/ChannelTalk.js → src/components/containers/ChannelTalk.tsx

@@ -1,29 +1,21 @@
-import { useEffect, useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useEffect } from 'react';
+import { RouteComponentProps, useLocation } from 'react-router-dom';
 import { useSelector } from 'react-redux';
+import { get } from 'lodash';
 import queryString from 'query-string';
+import { IState } from 'types/store.d';
 
 import ChannelService from 'lib/channel_io';
 import { isAuthedSelector } from 'lib/utils';
 
-const ChannelTalk = ({ match }) => {
+const ChannelTalk = ({ match } : RouteComponentProps<{top : string}>) => {
   const { search, pathname } = useLocation ();
   const { top } = match.params;
   const isAuthenticated = useSelector (isAuthedSelector);
-  const infoImmutable = useSelector (state => state.getIn (['auth', 'info']));
-  const info = useMemo (() => infoImmutable.toJS (), [infoImmutable]);
-  const {
-    _id,
-    username,
-    koreanName,
-    groups,
-    flags,
-    email,
-    profilePhoto,
-  } = info;
+  const info = useSelector ((state : IState) => get (state, ['auth', 'info']));
 
   useEffect (() => {
-    // if (process.env.NODE_ENV !== 'production') return;
+    if (process.env.NODE_ENV !== 'production') return;
     if (top === 'settings') {
       ChannelService.shutdown ();
       return;
@@ -38,7 +30,16 @@ const ChannelTalk = ({ match }) => {
       pluginKey: '5fe8c634-bcbd-4499-ba99-967191a2ef77',
     };
     if (isAuthenticated) {
-      if (!_id) return;
+      if (!info) return;
+      const {
+        _id,
+        username,
+        koreanName,
+        groups,
+        flags,
+        email,
+        profilePhoto,
+      } = info;
       Object.assign (settings, {
         userId: _id,
         profile: {
@@ -52,7 +53,7 @@ const ChannelTalk = ({ match }) => {
       });
     }
     ChannelService.boot (settings);
-  }, [search, isAuthenticated, infoImmutable, top, pathname]);
+  }, [search, isAuthenticated, info, top, pathname]);
   return null;
 };
 

src/components/containers/ScrollToTop.js → src/components/containers/ScrollToTop.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useLocation, useParams } from 'react-router-dom';
 
-const ScrollToTop = ({ updateWithPath }) => {
+const ScrollToTop = ({ updateWithPath } : { updateWithPath : boolean }) => {
   const { route } = useParams ();
   const { pathname } = useLocation ();
   useEffect (() => {

src/components/organisms/AuthCallback/AuthCallback.js

@@ -11,7 +11,7 @@ const AuthCallback = ({ location, history }) => {
     const { code, state } = queryString.parse (location.search);
     if (code && state) {
       dispatch (loginCallback (code, state))
-        .then ((res) => {
+        .then (res => {
           const referrer = storage.getItem ('referrer');
           if (referrer) {
             storage.removeItem ('referrer');
@@ -20,7 +20,7 @@ const AuthCallback = ({ location, history }) => {
           }
           history.replace (`/${res.user.username}`);
         })
-        .catch ((error) => {
+        .catch (error => {
           alert (error.message);
           history.replace ('/');
         });

src/components/organisms/GroupBox/GroupBoxP.js

@@ -14,7 +14,7 @@ const GroupBox = ({ group, ...props }) => {
   const {
     name, profilePhoto, zabosCount, followersCount, recentUpload, isPending,
   } = group;
-  const timePast = recentUpload ? getLabeledTimeDiff (recentUpload, true, true, true, true, true, true) : '없음';
+  const timePast = recentUpload ? getLabeledTimeDiff (recentUpload, 60, 60, 24, 7, 5, 12) : '없음';
   const stats = [{
     name: '올린 자보',
     value: zabosCount,

src/components/organisms/GroupBox/GroupBoxS.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
+import get from 'lodash.get';
 
 import SuperTooltip from 'atoms/SuperTooltip';
 
@@ -16,7 +17,7 @@ const GroupBoxS = ({ group, ...props }) => {
   const {
     name, profilePhoto, subtitle,
   } = group;
-  const width = useSelector (state => state.getIn (['app', 'windowSize', 'width']));
+  const width = useSelector (state => get (state, ['app', 'windowSize', 'width']));
   const nameRef = useRef (null);
   const [showTooltip, setShowTooltip] = useState (false);
   useEffect (() => { setShowTooltip (isElemWidthOverflown (nameRef.current)); }, [nameRef, width]);