Merge pull request #11 from ymyqwe/feature/improve_eslint_config

Feature/improve eslint config

Author: ymyqwe

.eslintrc

@@ -3,8 +3,13 @@
   "parserOptions": {
     "sourceType": "module"
   },
-  "extends": ["google", "eslint:recommended", "plugin:react/recommended"],
+  "extends": ["alloy", "alloy/react", "alloy/typescript"],
   "plugins": ["react", "@typescript-eslint"],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
   "rules": {
     "no-console": 1,
     "react/prop-types": 0,

.eslintrc.js

@@ -3,8 +3,13 @@ module.exports = {
   parserOptions: {
     sourceType: 'module'
   },
-  extends: ['google', 'eslint:recommended', 'plugin:react/recommended'],
+  extends: ['alloy', 'alloy/react', 'alloy/typescript'],
   plugins: ['react', '@typescript-eslint'],
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  },
   rules: {
     'no-console': 1,
     'react/prop-types': 0,

package-lock.json

@@ -43,6 +43,7 @@
     "babel-preset-react": "^6.22.0",
     "clean-webpack-plugin": "^2.0.1",
     "css-loader": "^3.2.0",
+    "eslint-config-alloy": "^3.5.0",
     "eslint-plugin-react": "^7.11.1",
     "express": "^4.14.1",
     "file-loader": "^3.0.1",
@@ -66,7 +67,7 @@
     "@typescript-eslint/eslint-plugin": "^2.7.0",
     "@typescript-eslint/parser": "^2.7.0",
     "cross-env": "^6.0.3",
-    "eslint": "^6.6.0",
+    "eslint": "^6.8.0",
     "eslint-config-google": "^0.11.0",
     "open-browsers": "^1.1.1",
     "webpack-cli": "^3.3.0",

package.json

@@ -1,9 +1,18 @@
 import React, { Component } from 'react';
 
-interface MyProps { socket: any; myId: string; myName: string }
-interface MyState { socket: any; message: string; myId: string; myName: string }
+interface MyProps {
+  socket: any;
+  myId: string;
+  myName: string;
+}
+interface MyState {
+  socket: any;
+  message: string;
+  myId: string;
+  myName: string;
+}
 export default class ChatInput extends Component<MyProps, MyState> {
-  constructor(props) {
+  public constructor(props: MyProps) {
     super(props);
     this.state = {
       socket: props.socket,
@@ -14,25 +23,26 @@ export default class ChatInput extends Component<MyProps, MyState> {
   }
 
   // 监控input变化
-  handleChange(e) {
+  public handleChange(e: React.ChangeEvent<HTMLInputElement>) {
     this.setState({ message: e.target.value });
   }
 
   // 点击提交或按回车
 
-  handleClick(e) {
+  public handleClick(e: MouseEvent) {
     e.preventDefault();
     this.sendMessage();
   }
-  handleKeyPress(e) {
-    if (e.key == 'Enter') {
+
+  public handleKeyPress(e: KeyboardEvent): boolean {
+    if (e.key === 'Enter') {
       this.sendMessage();
     }
     return false;
   }
 
   // 发送聊天信息
-  sendMessage() {
+  public sendMessage(): boolean {
     const message = this.state.message;
     const socket = this.state.socket;
     if (message) {
@@ -46,7 +56,7 @@ export default class ChatInput extends Component<MyProps, MyState> {
     }
     return false;
   }
-  render() {
+  public render(): JSX.Element {
     return (
       <div className="bottom-area">
         <div className="input-box">

src/components/ChatInput.tsx

@@ -5,15 +5,15 @@ import { Context } from '../context';
 
 // 生成消息id
 const generateMsgId = () => {
-  return new Date().getTime() + '' + Math.floor(Math.random() * 899 + 100);
+  return String(new Date().getTime()) + Math.floor(Math.random() * 899 + 100);
 };
 
 // 时间格式
 const generateTime = () => {
   const hour = new Date().getHours();
   const minute = new Date().getMinutes();
-  const hourText = hour === 0 ? '00' : hour + '';
-  const minuteText = minute < 10 ? '0' + minute : minute + '';
+  const hourText = hour === 0 ? '00' : String(hour);
+  const minuteText = minute < 10 ? '0' + minute : String(minute);
   return hourText + ':' + minuteText;
 };
 

src/components/ChatRoom.tsx

@@ -2,10 +2,10 @@ import React, { useContext, useEffect, useRef } from 'react';
 import { Context } from '../context';
 
 const Message = (props) => {
-  if (props.msgType == 'system') {
+  if (props.msgType === 'system') {
     return (
       <div className="one-message system-message">
-        {props.msgUser} {props.action == 'login' ? '进入了聊天室' : '离开了聊天室'} <span className="time">&nbsp;{props.time}</span>
+        {props.msgUser} {props.action === 'login' ? '进入了聊天室' : '离开了聊天室'} <span className="time">&nbsp;{props.time}</span>
       </div>
     );
   } else {
@@ -33,7 +33,7 @@ const Messages = (props) => {
   return (
     <div className="messages" ref={messageList}>
       {messages.map((message) => (
-        <Message key={message.msgId} msgType={message.type} msgUser={message.username} action={message.action} isMe={uid == message.uid ? true : false} time={message.time} />
+        <Message key={message.msgId} msgType={message.type} msgUser={message.username} action={message.action} isMe={uid === message.uid ? true : false} time={message.time} />
       ))}
     </div>
   );

src/components/Messages.tsx

@@ -9,7 +9,7 @@ const userState = (username) => {
 };
 
 const generateUid = () => {
-  return new Date().getTime() + '' + Math.floor(Math.random() * 999 + 1);
+  return String(new Date().getTime()) + Math.floor(Math.random() * 999 + 1);
 };
 
 const App = (props) => {
@@ -24,7 +24,7 @@ const App = (props) => {
     state.socket.emit('login', { uid, username });
   };
   const handleKeyPress = (e) => {
-    if (e.key == 'Enter') {
+    if (e.key === 'Enter') {
       handleLogin();
     }
     return false;

src/container/App.tsx

@@ -3,7 +3,17 @@ import io from 'socket.io-client';
 
 const Context = createContext(null);
 
-const initValue = {
+interface StateType {
+  username: string;
+  uid: string;
+  socket: any;
+  messages: [];
+  onlineUsers: { [key: string]: string };
+  onlineCount: number;
+  userhtml: string;
+}
+
+const initValue: StateType = {
   username: '',
   uid: '',
   socket: io(),
@@ -51,7 +61,13 @@ const userMessage = (usrMsg: UserMessage, state): object => {
     messages: state.messages.concat(usrMsg.message)
   };
 };
-function reducer(state, action) {
+interface Payload extends UserMessage, SystemMessage, Login {}
+interface ActionType {
+  type: string;
+  payload: Payload;
+}
+
+const reducer = (state: StateType, action: ActionType): StateType => {
   // console.log(state, action);
   switch (action.type) {
     case 'login':
@@ -63,7 +79,7 @@ function reducer(state, action) {
     default:
       return state;
   }
-}
+};
 
 const ContextProvider = (props) => {
   const [state, dispatch] = useReducer(reducer, initValue);