Merge pull request #12 from denisstasyev/sem2-hw5

Домашнее задание 5
denisstasyev · May 22, 2019 · ff0e0f9 · ff0e0f9
2 parents 00e4de9 + 034e3ba
commit ff0e0f9
Show file tree

Hide file tree

Showing 14 changed files with 51 additions and 154 deletions.
diff --git a/src/components/Chat/Chat.js b/src/components/Chat/Chat.js
@@ -16,18 +16,18 @@ class Chat extends React.Component {
   render() {
     return (
       <div className={styles["chat"]}>
-        <MessageList onMessage={this.onMessage.bind(this)} />
-        <ExtrasPanel onMessage={this.onMessage.bind(this)} />
-        <MessageForm onMessage={this.onMessage.bind(this)} />
+        <MessageList onMessage={this.onMessage} />
+        <ExtrasPanel onMessage={this.onMessage} />
+        <MessageForm onMessage={this.onMessage} />
       </div>
     );
   }
 
-  onMessage(message) {
+  onMessage = message => {
     this.state.worker.then(worker => {
       worker.port.postMessage(message);
     });
-  }
+  };
 
   getSharedWorker() {
     const workerFile = new Blob([`(${workerCode})(self)`], {
@@ -37,10 +37,7 @@ class Chat extends React.Component {
       const reader = new FileReader();
       reader.addEventListener("loadend", event => {
         const worker = new SharedWorker(event.target.result);
-        worker.port.addEventListener(
-          "message",
-          this.onWorkerMessage.bind(this)
-        );
+        worker.port.addEventListener("message", this.onWorkerMessage);
         worker.port.start();
         window.addEventListener("beforeunload", () => {
           worker.port.postMessage("disconnect");
@@ -52,17 +49,15 @@ class Chat extends React.Component {
     });
   }
 
-  onWorkerMessage(event) {
-    console.log(event.data[0]);
-    console.log(event.data[1]);
+  onWorkerMessage = event => {
     sendToServer(event.data[0], event.data[1]).then(response => {
       if (response) {
         console.log("Delivered!");
       } else {
         console.log("Not delivered!");
       }
     });
-  }
+  };
 }
 
 export default Chat;
diff --git a/src/components/Chat/ExtrasPanel/FileButton/FileButton.js b/src/components/Chat/ExtrasPanel/FileButton/FileButton.js
@@ -7,20 +7,20 @@ import * as actionTypes from "store/actionTypes/actionTypes";
 import ImageFileButton from "static/Chat/MessageForm/FileButton/paperclip.svg";
 
 class FileButton extends React.Component {
-  onFileSelect(event) {
+  onFileSelect = event => {
     event.preventDefault();
-    var files = Array.from(event.target.files);
+    let files = Array.from(event.target.files);
 
     files.forEach(function(file) {
-      var reader = new FileReader();
-      reader.onload = function() {
+      const reader = new FileReader();
+      reader.onload = () => {
         this.props.handleFileSelect(file);
         this.props.onMessage([null, file]);
-      }.bind(this);
+      };
 
       reader.readAsDataURL(file);
     }, this);
-  }
+  };
 
   render() {
     return (
@@ -39,7 +39,7 @@ class FileButton extends React.Component {
           className={styles["file-button__input"]}
           id="file-button__input"
           type="file"
-          onChange={this.onFileSelect.bind(this)}
+          onChange={this.onFileSelect}
           multiple
         />
       </div>

diff --git a/src/components/Chat/ExtrasPanel/LocationButton/LocationButton.js b/src/components/Chat/ExtrasPanel/LocationButton/LocationButton.js
@@ -5,7 +5,7 @@ import styles from "./styles.module.css";
 import * as actionTypes from "store/actionTypes/actionTypes";
 
 class LocationButton extends React.Component {
-  sendMyLocation() {
+  sendMyLocation = () => {
     if (!navigator.geolocation) {
       alert("Geolocation is not supported by your browser!");
       return;
@@ -23,13 +23,13 @@ class LocationButton extends React.Component {
     }
 
     navigator.geolocation.getCurrentPosition(success.bind(this), error);
-  }
+  };
 
   render() {
     return (
       <button
         className={styles["location-button"]}
-        onClick={this.sendMyLocation.bind(this)}
+        onClick={this.sendMyLocation}
       />
     );
   }

diff --git a/src/components/Chat/ExtrasPanel/ReactionButton/ReactionButton.js b/src/components/Chat/ExtrasPanel/ReactionButton/ReactionButton.js
@@ -5,21 +5,21 @@ import styles from "./styles.module.css";
 import * as actionTypes from "store/actionTypes/actionTypes";
 
 class ReactionButton extends React.Component {
-  sendReaction() {
+  sendReaction = () => {
     this.props.handleSendText(this.props.text);
     this.props.onMessage([this.props.text, null]);
-  }
+  };
 
-  updateText() {
+  updateText = () => {
     this.props.handleUpdateText(this.props.text);
-  }
+  };
 
   render() {
     return (
       <span
         className={styles[this.props.name]}
-        onClick={this.updateText.bind(this)}
-        onDoubleClick={this.sendReaction.bind(this)}
+        onClick={this.updateText}
+        onDoubleClick={this.sendReaction}
       />
     );
   }

diff --git a/src/components/Chat/MessageForm/SendButton/SendButton.js b/src/components/Chat/MessageForm/SendButton/SendButton.js
@@ -5,19 +5,19 @@ import styles from "./styles.module.css";
 import * as actionTypes from "store/actionTypes/actionTypes";
 
 class SendButton extends React.Component {
-  onSubmit(event) {
+  onSubmit = event => {
     event.preventDefault();
     this.props.handleSubmit(this.props.text);
     this.props.onMessage([this.props.text, null]);
-  }
+  };
 
   render() {
     return (
       <button
         className={
           this.props.text.length > 0 ? styles["send-button"] : styles["hidden"]
         }
-        onClick={this.onSubmit.bind(this)}
+        onClick={this.onSubmit}
       />
     );
   }

diff --git a/src/components/Chat/MessageForm/TextMessageForm/TextMessageForm.js b/src/components/Chat/MessageForm/TextMessageForm/TextMessageForm.js
@@ -5,31 +5,28 @@ import styles from "./styles.module.css";
 import * as actionTypes from "store/actionTypes/actionTypes";
 
 class TextMessageForm extends React.Component {
-  onChange(event) {
+  onChange = event => {
     event.preventDefault();
     this.props.handleRewriteText(event.target.value);
-  }
+  };
 
-  onSubmit(event) {
+  onSubmit = event => {
     event.preventDefault();
     if (this.props.text.length > 0) {
       this.props.handleSendText(this.props.text);
       this.props.onMessage([this.props.text, null]);
     }
-  }
+  };
 
   render() {
     return (
-      <form
-        className={styles["text-message-form"]}
-        onSubmit={this.onSubmit.bind(this)}
-      >
+      <form className={styles["text-message-form"]} onSubmit={this.onSubmit}>
         <input
           className={styles["text-message-form__input"]}
           value={this.props.text}
           type="text"
           placeholder="Enter your message"
-          onChange={this.onChange.bind(this)}
+          onChange={this.onChange}
         />
       </form>
     );

diff --git a/src/components/Chat/MessageList/Message/Message.js b/src/components/Chat/MessageList/Message/Message.js
@@ -9,26 +9,6 @@ import reactionTypeList from "../../reactionTypes";
 const imagePattern = /^image\.*/;
 
 class Message extends React.Component {
-  // constructor(props) {
-  //   super(props);
-  //   this.state = {
-  //     delivered: "not yet"
-  //   };
-  // }
-
-  // sendAndUpdate(text, file) {
-  //   if (this.state.delivered === "not yet") {
-  //     this.setState({ delivered: "pending" });
-  //     sendToServer(text, file).then(response => {
-  //       if (response) {
-  //         this.setState({ delivered: "true" });
-  //       } else {
-  //         this.setState({ delivered: "false" });
-  //       }
-  //     });
-  //   }
-  // }
-
   sanitize = string => {
     const map = {
       "&": "&amp;",
@@ -47,7 +27,7 @@ class Message extends React.Component {
     return this.sanitize(text);
   };
 
-  handleReaction(text) {
+  handleReaction = text => {
     let result = text;
     result = this.preventXSSAttack(result);
     reactionTypeList.forEach(reaction => {
@@ -68,7 +48,7 @@ class Message extends React.Component {
       }
     });
     return { __html: result };
-  }
+  };
 
   render() {
     return (

diff --git a/src/components/Chat/MessageList/MessageList.js b/src/components/Chat/MessageList/MessageList.js
@@ -8,10 +8,10 @@ import { Message } from "./Message";
 import * as actionTypes from "store/actionTypes/actionTypes";
 
 class MessageList extends React.Component {
-  scrollToBottom() {
+  scrollToBottom = () => {
     const messagesContainer = ReactDOM.findDOMNode(this);
     messagesContainer.scrollTop = messagesContainer.scrollHeight;
-  }
+  };
 
   componentDidMount() {
     this.scrollToBottom();
@@ -21,29 +21,29 @@ class MessageList extends React.Component {
     this.scrollToBottom();
   }
 
-  handleDragAndDrop(event) {
+  handleDragAndDrop = event => {
     event.preventDefault();
     let files = Array.from(event.dataTransfer.files);
 
     files.forEach(function(file) {
-      let reader = new FileReader();
-      reader.onload = function() {
+      const reader = new FileReader();
+      reader.onload = () => {
         this.props.handleFileSelect(file);
         this.props.onMessage([null, file]);
-      }.bind(this);
+      };
 
       reader.readAsDataURL(file);
     }, this);
-  }
+  };
 
   render() {
     return (
       <div
         className={styles["message-list"]}
-        onDrop={this.handleDragAndDrop.bind(this)}
-        onDragEnter={this.handleDragAndDrop.bind(this)}
-        onDragOver={this.handleDragAndDrop.bind(this)}
-        onDragLeave={this.handleDragAndDrop.bind(this)}
+        onDrop={this.handleDragAndDrop}
+        onDragEnter={this.handleDragAndDrop}
+        onDragOver={this.handleDragAndDrop}
+        onDragLeave={this.handleDragAndDrop}
       >
         {this.props.messageList.map((message, idx) => {
           return (

diff --git a/src/store/actionTypes/actionTypes.js b/src/store/actionTypes/actionTypes.js
@@ -1,8 +1,3 @@
-// export const UPDATE_DATA_MESSAGE_FORM = "UPDATE_DATA_MESSAGE_FORM";
-// export const DELETE_TEXT_MESSAGE_FORM = "DELETE_TEXT_MESSAGE_FORM";
-
-// export const UPDATEDELIVER = "UPDATE_DELIVERY";
-
 export const AUTH_START = "AUTH_START";
 export const AUTH_SUCCESS = "AUTH_SUCCESS";
 export const AUTH_FAILED = "AUTH_FAILED";

diff --git a/src/store/reducers/chatList.js b/src/store/reducers/chatList.js
@@ -1,16 +1,8 @@
-/*import * as actionTypes from '../actionTypes/actionTypes';
-import { updateObject } from '../utility';*/
-
 const initialState = {
   chatList: []
 };
 
 const reducer = (state = initialState, action) => {
-  /*    switch (action.type) {
-        case actionTypes.SEND_TEXT:
-            return updateObject(state, {chatList: state.chatList.concat(
-                                {name: '', unreadNum: 0})});
-    }*/
   return state;
 };
 

diff --git a/src/store/reducers/messageList.js b/src/store/reducers/messageList.js
@@ -11,19 +11,10 @@ const initialState = {
       file: "",
       isMy: false,
       time: getTime()
-      // delivered: false
     }
   ]
 };
 
-/*
-const updateDeliver = (state, action) => {
-  const updatedMessageList =
-    state.messageList; //.filter(result => result.id !== action.resultElId)
-  return updateObject(state, { messageList: updatedMessageList });
-};
-*/
-
 const reducer = (state = initialState, action) => {
   // eslint-disable-next-line default-case
   switch (action.type) {
@@ -36,7 +27,6 @@ const reducer = (state = initialState, action) => {
           file: "",
           isMy: true,
           time: getTime()
-          // delivered: false
         })
       });
     case actionTypes.SEND_FILE:
@@ -48,14 +38,8 @@ const reducer = (state = initialState, action) => {
           file: action.file,
           isMy: true,
           time: getTime()
-          // delivered: false
         })
       });
-
-    /*
-    case actionTypes.UPDATE_DELIVERY_STATUS:
-      return updateDeliver(state, action);
-    */
   }
 
   return state;

diff --git a/src/store/reducers/user.js b/src/store/reducers/user.js
@@ -1,6 +1,3 @@
-/*import * as actionTypes from '../actionTypes/actionTypes';
-import { updateObject } from '../utility';*/
-
 const initialState = {
   user: {
     name: "",
@@ -9,11 +6,6 @@ const initialState = {
 };
 
 const reducer = (state = initialState, action) => {
-  /*switch (action.type) {
-        case actionTypes.SEND_TEXT:
-            return updateObject(state, {user: state.concat(
-                                {name: state.name, isAuthorized: state.isAuthorized})});
-    }*/
   return state;
 };