From ea40b9b6d46f7e21f66d677a49d4c4f97e20497b Mon Sep 17 00:00:00 2001
From: wdvrd <kostya_poslushnoi@rambler.ru>
Date: Tue, 4 Jun 2019 21:30:58 +0300
Subject: [PATCH]  Please enter the commit message for your changes. Lines
 starting  with '#' will be ignored, and an empty message aborts the commit.

 On branch add-comment
 Changes to be committed:
	new file:   client/modules/Post/components/PostListItem/Comment.js
        new file:   client/modules/Post/components/PostListItem/CommentList.js
	new file:   client/modules/Post/components/PostListItem/Input.js
	modified:   client/modules/Post/components/PostListItem/PostListItem.js
	modified:   package-lock.json
	modified:   package.json
---
 .../Post/components/PostListItem/Comment.js   |  51 +++++
 .../components/PostListItem/CommentList.js    |  21 ++
 .../Post/components/PostListItem/Input.js     |  66 +++++++
 .../components/PostListItem/PostListItem.js   |  77 ++++++--
 package-lock.json                             | 179 ++++++++++++++++--
 package.json                                  |   8 +-
 6 files changed, 372 insertions(+), 30 deletions(-)
 create mode 100644 client/modules/Post/components/PostListItem/Comment.js
 create mode 100644 client/modules/Post/components/PostListItem/CommentList.js
 create mode 100644 client/modules/Post/components/PostListItem/Input.js

diff --git a/client/modules/Post/components/PostListItem/Comment.js b/client/modules/Post/components/PostListItem/Comment.js
new file mode 100644
index 000000000..40e911fd4
--- /dev/null
+++ b/client/modules/Post/components/PostListItem/Comment.js
@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from "react";
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  margin-top: 10px;
+  padding: 0 15px;
+  background: #edf6f7;
+`;
+
+const Button = styled.button`
+  cursor: pointer;
+  font-size: 12px;
+  width: 5vw;
+  height: 20px;
+  border-radius: 10px;
+  background: #e1f7fa;
+  outline: none;
+  margin-top: 10px;
+`;
+
+function Comment(props) {
+  const [showEdit, setShowEdit] = useState(false);
+  const [editText, setEditText] = useState("");
+  useEffect(() => {
+    setEditText(props.text);
+  }, [props.text]);
+
+  const testFunction = e => {
+    props.updateComment(props.id, editText);
+    setEditText("");
+    setShowEdit(!showEdit);
+    e.preventDefault;
+  };
+  return (
+    <Wrapper>
+      <h3>{props.name}</h3>
+      {!showEdit ? (
+        <p>{props.text}</p>
+      ) : (
+        <form onSubmit={e => testFunction(e)}>
+          <input value={editText} onChange={e => setEditText(e.target.value)} />
+        </form>
+      )}
+
+      <Button onClick={() => props.deleteComment(props.id)}>Delete</Button>
+      <Button onClick={() => setShowEdit(!showEdit)}>Edit</Button>
+    </Wrapper>
+  );
+}
+
+export default Comment;
diff --git a/client/modules/Post/components/PostListItem/CommentList.js b/client/modules/Post/components/PostListItem/CommentList.js
new file mode 100644
index 000000000..c91d5d967
--- /dev/null
+++ b/client/modules/Post/components/PostListItem/CommentList.js
@@ -0,0 +1,21 @@
+import React from "react";
+import Comment from "./Comment";
+
+function CommentList(props) {
+  return (
+    <div>
+      {props.arrComment.map(val => (
+        <Comment
+          updateComment={props.updateComment}
+          deleteComment={props.deleteComment}
+          key={val.id}
+          name={val.name}
+          text={val.text}
+          id={val.id}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default CommentList;
diff --git a/client/modules/Post/components/PostListItem/Input.js b/client/modules/Post/components/PostListItem/Input.js
new file mode 100644
index 000000000..f5f7308a5
--- /dev/null
+++ b/client/modules/Post/components/PostListItem/Input.js
@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Field = styled.input`
+  margin-top: 5px;
+  width: 30vw;
+  font-size: 18px;
+  height: 30px;
+  padding: 0.5rem;
+  outline: none;
+  border: none;
+  border-radius: 10px;
+  background: #e1f7fa;
+  border-bottom: 1px solid #f5feff;
+`;
+
+const Button = styled.button`
+  cursor: pointer;
+  font-size: 15px;
+  width: 10vw;
+  height: 25px;
+  border-radius: 10px;
+  background: #e1f7fa;
+  outline: none;
+  margin-top: 10px;
+`;
+
+function Input(props) {
+  const [name, setName] = useState("");
+  const [comment, setComment] = useState("");
+
+  return (
+    <Form
+      onSubmit={e => {
+        props.getComment(name, comment);
+        setName("");
+        setComment("");
+        e.preventDefault();
+      }}
+    >
+      <Field
+        required
+        placeholder="name"
+        value={name}
+        type="text"
+        onChange={e => setName(e.target.value)}
+      />
+
+      <Field
+        placeholder="comment"
+        required
+        value={comment}
+        type="text"
+        onChange={e => setComment(e.target.value)}
+      />
+      <Button type="submit">Add</Button>
+    </Form>
+  );
+}
+
+export default Input;
diff --git a/client/modules/Post/components/PostListItem/PostListItem.js b/client/modules/Post/components/PostListItem/PostListItem.js
index 2925e2199..6af896ebe 100644
--- a/client/modules/Post/components/PostListItem/PostListItem.js
+++ b/client/modules/Post/components/PostListItem/PostListItem.js
@@ -1,22 +1,73 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Link } from 'react-router';
-import { FormattedMessage } from 'react-intl';
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Link } from "react-router";
+import { FormattedMessage } from "react-intl";
+import Input from "./Input";
+import CommentList from "./CommentList";
+import update from "react-addons-update";
 
 // Import Style
-import styles from './PostListItem.css';
+import styles from "./PostListItem.css";
 
 function PostListItem(props) {
+  const [comment, setComment] = useState([]);
+  const [show, setShow] = useState(false);
+
+  const getComment = (a, b) => {
+    const id = Math.round(Math.random() * 10000);
+    const obj = { name: a, text: b, id };
+
+    setComment([...comment, obj]);
+    setShow(!show);
+  };
+
+  const updateComment = (id, text) => {
+    const index = comment.findIndex(value => value.id === id);
+    const clone = comment;
+    const edit = update(clone, {
+      [index]: {
+        text: { $set: text }
+      }
+    });
+    setComment(edit);
+  };
+
+  const deleteComment = id => {
+    const newList = comment.filter(val => val.id !== id);
+    setComment(newList);
+  };
+
   return (
-    <div className={styles['single-post']}>
-      <h3 className={styles['post-title']}>
-        <Link to={`/posts/${props.post.slug}-${props.post.cuid}`} >
+    <div className={styles["single-post"]}>
+      <h3 className={styles["post-title"]}>
+        <Link to={`/posts/${props.post.slug}-${props.post.cuid}`}>
           {props.post.title}
         </Link>
       </h3>
-      <p className={styles['author-name']}><FormattedMessage id="by" /> {props.post.name}</p>
-      <p className={styles['post-desc']}>{props.post.content}</p>
-      <p className={styles['post-action']}><a href="#" onClick={props.onDelete}><FormattedMessage id="deletePost" /></a></p>
+      <p className={styles["author-name"]}>
+        <FormattedMessage id="by" /> {props.post.name}
+      </p>
+      <p className={styles["post-desc"]}>{props.post.content}</p>
+      <div className={styles["wrapper-div"]}>
+        <p className={styles["post-action"]}>
+          <a href="#" onClick={props.onDelete}>
+            <FormattedMessage id="deletePost" />
+          </a>
+        </p>
+        <p className={styles["post-action"]}>
+          <a href="#" onClick={() => setShow(!show)}>
+            <FormattedMessage id="Add Comment" />
+          </a>
+        </p>
+      </div>
+      {show && <Input getComment={getComment} />}
+      {!show && (
+        <CommentList
+          updateComment={updateComment}
+          deleteComment={deleteComment}
+          arrComment={comment}
+        />
+      )}
       <hr className={styles.divider} />
     </div>
   );
@@ -28,9 +79,9 @@ PostListItem.propTypes = {
     title: PropTypes.string.isRequired,
     content: PropTypes.string.isRequired,
     slug: PropTypes.string.isRequired,
-    cuid: PropTypes.string.isRequired,
+    cuid: PropTypes.string.isRequired
   }).isRequired,
-  onDelete: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired
 };
 
 export default PostListItem;
diff --git a/package-lock.json b/package-lock.json
index 14a36b319..f7d213d25 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,62 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@babel/helper-annotate-as-pure": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz",
+      "integrity": "sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q==",
+      "requires": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "@babel/helper-module-imports": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz",
+      "integrity": "sha512-aP/hlLq01DWNEiDg4Jn23i+CXxW/owM4WpDLFUbpjxe4NS3BhLVZQ5i7E0ZrxuQ/vwekIeciyamgB1UIYxxM6A==",
+      "requires": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "@babel/types": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.4.4.tgz",
+      "integrity": "sha512-dOllgYdnEFOebhkKCjzSVFqw/PmmB8pH6RGOWkY4GsboQNd47b1fBThBSwlHAq9alF9vc1M3+6oqR47R50L0tQ==",
+      "requires": {
+        "esutils": "^2.0.2",
+        "lodash": "^4.17.11",
+        "to-fast-properties": "^2.0.0"
+      },
+      "dependencies": {
+        "lodash": {
+          "version": "4.17.11",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
+          "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
+        },
+        "to-fast-properties": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+        }
+      }
+    },
+    "@emotion/is-prop-valid": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz",
+      "integrity": "sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==",
+      "requires": {
+        "@emotion/memoize": "0.7.1"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz",
+      "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.3.tgz",
+      "integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg=="
+    },
     "@types/node": {
       "version": "10.5.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-10.5.1.tgz",
@@ -860,6 +916,17 @@
         "estraverse": "^4.1.1"
       }
     },
+    "babel-plugin-styled-components": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz",
+      "integrity": "sha512-sQVKG8irFXx14ZfaK1bBePirfkacl3j8nZwSZK+ZjsbnadRHKQTbhXbe/RB1vT6Vgkz45E+V95LBq4KqdhZUNw==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.0.0",
+        "@babel/helper-module-imports": "^7.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.10"
+      }
+    },
     "babel-plugin-syntax-async-functions": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz",
@@ -929,8 +996,7 @@
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
-      "dev": true
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
     },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
@@ -2191,6 +2257,11 @@
         "map-obj": "^1.0.0"
       }
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
     "caniuse-api": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-1.6.1.tgz",
@@ -2895,6 +2966,11 @@
         }
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -3026,6 +3102,16 @@
         }
       }
     },
+    "css-to-react-native": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.1.tgz",
+      "integrity": "sha512-yO+oEx1Lf+hDKasqQRVrAvzMCz825Huh1VMlEEDlRWyAhFb/FWb6I0KpEF1PkyKQ7NEdcx9d5M2ZEWgJAsgPvQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^3.3.0"
+      }
+    },
     "css-what": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.0.tgz",
@@ -7339,6 +7425,11 @@
         "mimic-fn": "^1.0.0"
       }
     },
+    "memoize-one": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.4.tgz",
+      "integrity": "sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA=="
+    },
     "memory-fs": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.3.0.tgz",
@@ -13685,8 +13776,7 @@
     "postcss-value-parser": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz",
-      "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=",
-      "dev": true
+      "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU="
     },
     "postcss-zindex": {
       "version": "2.2.0",
@@ -14180,14 +14270,14 @@
       }
     },
     "react": {
-      "version": "16.4.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.4.1.tgz",
-      "integrity": "sha512-3GEs0giKp6E0Oh/Y9ZC60CmYgUPnp7voH9fbjWsvXtYFb4EWtgQub0ADSq0sJR0BbHc4FThLLtzlcFaFXIorwg==",
+      "version": "16.8.6",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz",
+      "integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==",
       "requires": {
-        "fbjs": "^0.8.16",
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
-        "prop-types": "^15.6.0"
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.13.6"
       }
     },
     "react-addons-test-utils": {
@@ -14196,6 +14286,15 @@
       "integrity": "sha1-wStu/cIkfBDae4dw0YUICnsEcVY=",
       "dev": true
     },
+    "react-addons-update": {
+      "version": "15.6.2",
+      "resolved": "https://registry.npmjs.org/react-addons-update/-/react-addons-update-15.6.2.tgz",
+      "integrity": "sha1-5TdTxbNIh5dFEMiC1/sHWFHV5QQ=",
+      "requires": {
+        "fbjs": "^0.8.9",
+        "object-assign": "^4.1.0"
+      }
+    },
     "react-base16-styling": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.5.3.tgz",
@@ -14236,14 +14335,14 @@
       }
     },
     "react-dom": {
-      "version": "16.4.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.4.1.tgz",
-      "integrity": "sha512-1Gin+wghF/7gl4Cqcvr1DxFX2Osz7ugxSwl6gBqCMpdrxHjIFUS7GYxrFftZ9Ln44FHw0JxCFD9YtZsrbR5/4A==",
+      "version": "16.8.6",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz",
+      "integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==",
       "requires": {
-        "fbjs": "^0.8.16",
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
-        "prop-types": "^15.6.0"
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.13.6"
       }
     },
     "react-helmet": {
@@ -15063,6 +15162,15 @@
       "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
       "dev": true
     },
+    "scheduler": {
+      "version": "0.13.6",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz",
+      "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
     "schema-utils": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.3.0.tgz",
@@ -15911,6 +16019,49 @@
         "schema-utils": "^0.3.0"
       }
     },
+    "styled-components": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.2.1.tgz",
+      "integrity": "sha512-zBSMOJW1zfQ1rASGHJ5dHXIkn3VoOGLtQAYhkd4Ib7e+eI//uwMJWsI65JRe3aGrN2Xx8IT9jxxnVSXt9LaLCw==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@emotion/is-prop-valid": "^0.7.3",
+        "@emotion/unitless": "^0.7.0",
+        "babel-plugin-styled-components": ">= 1",
+        "css-to-react-native": "^2.2.2",
+        "memoize-one": "^5.0.0",
+        "prop-types": "^15.5.4",
+        "react-is": "^16.6.0",
+        "stylis": "^3.5.0",
+        "stylis-rule-sheet": "^0.0.10",
+        "supports-color": "^5.5.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.8.6",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
+          "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "stylis": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
+      "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
+    },
+    "stylis-rule-sheet": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
+      "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
+    },
     "superagent": {
       "version": "1.8.5",
       "resolved": "https://registry.npmjs.org/superagent/-/superagent-1.8.5.tgz",
diff --git a/package.json b/package.json
index f0fa1f581..f8bd3f1ba 100644
--- a/package.json
+++ b/package.json
@@ -43,15 +43,17 @@
     "limax": "^1.3.0",
     "mongoose": "^4.4.20",
     "prop-types": "^15.6.2",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "react-helmet": "^5.2.0",
     "react-intl": "^2.1.2",
     "react-redux": "^4.4.5",
     "react-router": "^3.2.1",
     "redux": "^3.5.2",
     "redux-thunk": "^2.1.0",
-    "sanitize-html": "^1.11.4"
+    "sanitize-html": "^1.11.4",
+    "styled-components": "^4.2.1",
+    "react-addons-update": "^15.6.2"
   },
   "devDependencies": {
     "ava": "^0.15.2",