From a2c6040c79e5d619bea296f23fbde4dd20b87592 Mon Sep 17 00:00:00 2001
From: Narek <sahakyan.dev@gmail.com>
Date: Sat, 16 Feb 2019 14:02:04 +0100
Subject: [PATCH 1/6] Add/Remove comment

---
 .../App/components/CustomComponents/Comp.js   | 117 ++++++++++++++++++
 1 file changed, 117 insertions(+)
 create mode 100644 client/modules/App/components/CustomComponents/Comp.js

diff --git a/client/modules/App/components/CustomComponents/Comp.js b/client/modules/App/components/CustomComponents/Comp.js
new file mode 100644
index 000000000..0ec6bab2f
--- /dev/null
+++ b/client/modules/App/components/CustomComponents/Comp.js
@@ -0,0 +1,117 @@
+import React from 'react';
+import styles from './Comp.css'
+
+export class Comp extends React.Component{
+	constructor(props){
+		super(props);
+		this.state = {
+			arr : [{}],
+			click : false
+		}
+		this.addComment = this.addComment.bind(this);
+	}
+
+	// Initialize main array to push state comments
+	arr = [];
+
+
+	addComment(index){
+
+		let userName = this.refs.userName.value;
+		let userTitle = this.refs.title.value;
+		let userPost = this.refs.post.value;
+		let form = document.getElementById('inputForm');
+		let {arr} = this;
+
+		if(userName.length > 0 && userTitle.length > 0 && userPost.length > 0){
+			arr.push({
+				name : userName,
+				title : userTitle,
+				post : userPost,
+			})
+			this.setState({
+				arr,
+			})
+		}
+
+		form.reset();
+	}
+
+	removeComment(index){
+		const arr = this.arr;
+		arr.splice(index,1);
+		this.addState();
+	}
+
+	addState(){
+		const {arr} = this;
+		this.setState({
+			arr,
+		})
+	}
+
+
+
+	render(){
+		const {arr} = this;
+		const {click} = this.state;
+
+		return(
+			<div className={`${styles['parent']}`}>
+				<form id = "inputForm">
+					<input
+						type = "text"
+						ref='userName'
+						placeholder="Enter your name"
+						required
+					/>
+					<input
+						type = "text"
+						ref='title'
+						placeholder="Enter post title"
+						required
+					/>
+					<textarea
+						type = "text"
+						ref='post'
+						required
+					/>
+					<input
+						type="button"
+						value="Add comment"
+						onClick = {this.addComment}
+						className={`${styles['button']}`}
+					/>
+				</form>
+
+				{arr.map((elem,index)=>(
+					<div
+						className={`${styles['list']}`}
+
+					>
+						<ul>
+							<li>
+								<span>Name : </span>{elem.name} <br/>
+							</li>
+							<li>
+								<span>Title :</span> {elem.title} <br/>
+							</li>
+							<li>
+								<span>Comment :</span> {elem.post} <br/>
+							</li>
+						</ul>
+						<button
+							className={`${styles['list-button']}`}
+							onClick={()=>{this.removeComment(index)}}
+						>
+							Delete comment
+						</button>
+					</div>
+				))}
+			</div>
+		)
+
+	}
+}
+
+export default Comp;
\ No newline at end of file

From 05514f5e20c8f2eb2ceed9597b9c7aeeccfd3008 Mon Sep 17 00:00:00 2001
From: Narek <sahakyan.dev@gmail.com>
Date: Sat, 16 Feb 2019 15:05:15 +0100
Subject: [PATCH 2/6] Style changes

---
 .../App/components/CustomComponents/Comp.css  | 83 +++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 client/modules/App/components/CustomComponents/Comp.css

diff --git a/client/modules/App/components/CustomComponents/Comp.css b/client/modules/App/components/CustomComponents/Comp.css
new file mode 100644
index 000000000..be037d698
--- /dev/null
+++ b/client/modules/App/components/CustomComponents/Comp.css
@@ -0,0 +1,83 @@
+*{
+  font-size: 20px;
+}
+body {
+  background-color: #8D9440 !important;
+}
+
+form{
+  display: flex;
+  flex-direction: column;
+  margin-top: 50px;
+  width: 400px;
+  margin: auto;
+
+}
+input{
+  margin-top: 15px;
+  padding: 15px;
+  width: 100%;
+  margin-bottom: 20px;
+  border-radius: 5px;
+  outline-style: none;
+  border: 2px solid #b4b4b4;
+}
+textarea{
+  border-radius: 5px;
+  outline-style: none;
+  border: 2px solid #b4b4b4;
+  margin-top: 10px;
+}
+.button{
+  margin-top: 15px;
+  box-shadow: 0 0 5px 1px black;
+  outline-style: none;
+  background-color: #616247;
+  border: 1px solid #616247;
+  color: white;
+}
+.button:hover{
+  cursor: pointer;
+}
+body{
+  background-color: red;
+}
+.list{
+  margin: 40px 200px;
+}
+.list li{
+  list-style-type: none;
+  margin: 15px;
+}
+.list-button{
+  padding: 6px;
+  border-radius: 8px;
+  box-shadow: 0 0 5px 1px black;
+  outline-style: none;
+  background-color: #616247;
+  border: 1px solid #616247;
+  color: white;
+  font-size: 16px;
+}
+.list-button:hover{
+  cursor: pointer;
+}
+.list li span{
+  color: white;
+}
+.change-button{
+  margin-left: 10px;
+  padding: 6px;
+  border-radius: 8px;
+  box-shadow: 0 0 5px 1px black;
+  outline-style: none;
+  background-color: #616247;
+  border: 1px solid #616247;
+  color: white;
+  font-size: 16px;
+}
+
+div[class*='Comp']:hover{
+  opacity: 0.7;
+  cursor: pointer;
+}
\ No newline at end of file

From 8ca3a8675934de1abeaa42b0ee8923385314d559 Mon Sep 17 00:00:00 2001
From: Narek <sahakyan.dev@gmail.com>
Date: Sat, 16 Feb 2019 15:48:11 +0100
Subject: [PATCH 3/6] Article Edit

---
 client/modules/App/App.js                     | 28 +------------------
 .../App/components/CustomComponents/Comp.js   | 22 ++++++++++++++-
 2 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/client/modules/App/App.js b/client/modules/App/App.js
index 269df3d08..8c8e768c7 100644
--- a/client/modules/App/App.js
+++ b/client/modules/App/App.js
@@ -37,33 +37,7 @@ export class App extends Component {
   render() {
     return (
       <div>
-        {this.state.isMounted && !window.devToolsExtension && process.env.NODE_ENV === 'development' && <DevTools />}
-        <div>
-          <Helmet
-            title="MERN Starter - Blog App"
-            titleTemplate="%s - Blog App"
-            meta={[
-              { charset: 'utf-8' },
-              {
-                'http-equiv': 'X-UA-Compatible',
-                content: 'IE=edge',
-              },
-              {
-                name: 'viewport',
-                content: 'width=device-width, initial-scale=1',
-              },
-            ]}
-          />
-          <Header
-            switchLanguage={lang => this.props.dispatch(switchLanguage(lang))}
-            intl={this.props.intl}
-            toggleAddPost={this.toggleAddPostSection}
-          />
-          <div className={styles.container}>
-            {this.props.children}
-          </div>
-          <Footer />
-        </div>
+				<Comp/>
       </div>
     );
   }
diff --git a/client/modules/App/components/CustomComponents/Comp.js b/client/modules/App/components/CustomComponents/Comp.js
index 0ec6bab2f..17725a1ea 100644
--- a/client/modules/App/components/CustomComponents/Comp.js
+++ b/client/modules/App/components/CustomComponents/Comp.js
@@ -50,7 +50,27 @@ export class Comp extends React.Component{
 		})
 	}
 
+	editPost(index){
 
+		let arr = this.arr;
+		let name =  this.refs.userName;
+		let title =  this.refs.title;
+		let post =  this.refs.post;
+		let form = document.getElementById('inputForm');
+
+
+		let currentIndex = this.state.arr[index];
+		name.setAttribute('value', currentIndex.name);
+		title.setAttribute('value', currentIndex.title);
+		post.textContent = currentIndex.post;
+
+		arr[index].name = name.value;
+		arr[index].title = title.value;
+		arr[index].post = post.value;
+
+		this.addState();
+		form.reset();
+	}
 
 	render(){
 		const {arr} = this;
@@ -87,7 +107,7 @@ export class Comp extends React.Component{
 				{arr.map((elem,index)=>(
 					<div
 						className={`${styles['list']}`}
-
+						onClick={()=>this.editPost(index)}
 					>
 						<ul>
 							<li>

From 0ea60966dc72a34bfbd6bdb087ee1ca7fd827894 Mon Sep 17 00:00:00 2001
From: Narek <sahakyan.dev@gmail.com>
Date: Fri, 22 Feb 2019 14:00:39 +0100
Subject: [PATCH 4/6] Missing component bug fix, style changes

---
 client/modules/App/App.js                     |  19 +--
 .../App/components/CustomComponents/Comp.js   | 157 +++++++++++-------
 2 files changed, 101 insertions(+), 75 deletions(-)

diff --git a/client/modules/App/App.js b/client/modules/App/App.js
index 8c8e768c7..6668d00d9 100644
--- a/client/modules/App/App.js
+++ b/client/modules/App/App.js
@@ -2,23 +2,18 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-// Import Style
-import styles from './App.css';
 
 // Import Components
-import Helmet from 'react-helmet';
-import Header from './components/Header/Header';
-import Footer from './components/Footer/Footer';
+import Comp from './components/CustomComponents/Comp';
 
 // Import Actions
 import { toggleAddPost } from './AppActions';
-import { switchLanguage } from '../../modules/Intl/IntlActions';
 
-let DevTools;
-if (process.env.NODE_ENV === 'development') {
-  // eslint-disable-next-line global-require
-  DevTools = require('./components/DevTools').default;
-}
+// let DevTools;
+// if (process.env.NODE_ENV === 'development') {
+//   // eslint-disable-next-line global-require
+//   DevTools = require('./components/DevTools').default;
+// }
 
 export class App extends Component {
   constructor(props) {
@@ -37,7 +32,7 @@ export class App extends Component {
   render() {
     return (
       <div>
-				<Comp/>
+				<Comp />
       </div>
     );
   }
diff --git a/client/modules/App/components/CustomComponents/Comp.js b/client/modules/App/components/CustomComponents/Comp.js
index 17725a1ea..c389423c4 100644
--- a/client/modules/App/components/CustomComponents/Comp.js
+++ b/client/modules/App/components/CustomComponents/Comp.js
@@ -1,131 +1,162 @@
 import React from 'react';
-import styles from './Comp.css'
+import styles from './Comp.css';
 
-export class Comp extends React.Component{
-	constructor(props){
+class Comp extends React.Component {
+	constructor (props) {
 		super(props);
 		this.state = {
-			arr : [{}],
-			click : false
-		}
+			arr: [{}],
+			click: true,
+			textareaValue: '',
+			indexNum: 0,
+		};
 		this.addComment = this.addComment.bind(this);
+		this.editPost = this.editPost.bind(this);
+		this.addState = this.addState.bind(this);
+		this.removeComment = this.removeComment.bind(this);
+		this.handleChange = this.handleChange.bind(this);
 	}
 
-	// Initialize main array to push state comments
 	arr = [];
 
-
-	addComment(index){
-
-		let userName = this.refs.userName.value;
+	addComment() {
+		let userName = this.refs.name.value;
 		let userTitle = this.refs.title.value;
 		let userPost = this.refs.post.value;
 		let form = document.getElementById('inputForm');
-		let {arr} = this;
+		let { arr } = this;
 
-		if(userName.length > 0 && userTitle.length > 0 && userPost.length > 0){
+		if (userName.length > 0 && userTitle.length > 0 && userPost.length > 0) {
 			arr.push({
 				name : userName,
 				title : userTitle,
 				post : userPost,
-			})
+			});
 			this.setState({
 				arr,
-			})
+			});
+			form.reset();
 		}
+	}
 
-		form.reset();
+	handleChange(event) {
+		this.setState({ textareaValue: event.target.value });
 	}
 
-	removeComment(index){
+	removeComment(index) {
 		const arr = this.arr;
-		arr.splice(index,1);
+		arr.splice(index, 1);
 		this.addState();
 	}
 
-	addState(){
-		const {arr} = this;
+	addState() {
+		const { arr } = this;
 		this.setState({
 			arr,
-		})
+			click : true,
+		});
 	}
 
-	editPost(index){
+	editPost(index) {
+		this.setState({
+			click : false,
+			indexNum : index,
+		});
+
+		const arr = this.arr;
+		const name = this.refs.name;
+		const title = this.refs.title;
+		const post = this.refs.post;
+		const currentIndex = arr[index];
+
+		name.value = currentIndex.name;
+		title.value = currentIndex.title;
+		post.value = this.state.textareaValue;
+	}
 
+	savePost(index) {
 		let arr = this.arr;
-		let name =  this.refs.userName;
-		let title =  this.refs.title;
-		let post =  this.refs.post;
-		let form = document.getElementById('inputForm');
-
+		let name = this.refs.name;
+		let title = this.refs.title;
+		let post = this.refs.post;
+		let currentIndex = arr[index];
 
-		let currentIndex = this.state.arr[index];
-		name.setAttribute('value', currentIndex.name);
-		title.setAttribute('value', currentIndex.title);
-		post.textContent = currentIndex.post;
+		if (name.value.length > 0 && title.value.length > 0 && this.state.textareaValue.length > 0) {
+			currentIndex.name = name.value;
+			currentIndex.title = title.value;
+			currentIndex.post = this.state.textareaValue;
 
-		arr[index].name = name.value;
-		arr[index].title = title.value;
-		arr[index].post = post.value;
+			name.value = '';
+			title.value = '';
+			post.value = '';
 
-		this.addState();
-		form.reset();
+			this.setState({ click: true });
+		}
 	}
-
-	render(){
-		const {arr} = this;
-		const {click} = this.state;
-
-		return(
+	render() {
+		const { arr } = this;
+		const { click, indexNum } = this.state;
+		return (
 			<div className={`${styles['parent']}`}>
-				<form id = "inputForm">
+				<form id="inputForm">
 					<input
-						type = "text"
-						ref='userName'
+						type="text"
+						ref="name"
 						placeholder="Enter your name"
-						required
 					/>
 					<input
-						type = "text"
-						ref='title'
+						type="text"
+						ref="title"
 						placeholder="Enter post title"
-						required
 					/>
 					<textarea
-						type = "text"
-						ref='post'
-						required
+						type="text"
+						ref="post"
+						placeholder="Enter post"
+						value={this.setState.value}
+						onChange={this.handleChange}
 					/>
-					<input
+					{click && <input
 						type="button"
 						value="Add comment"
-						onClick = {this.addComment}
+						onClick={(this.addComment)}
 						className={`${styles['button']}`}
-					/>
+					/>}
 				</form>
 
-				{arr.map((elem,index)=>(
+				{arr.map((elem, index) => (
 					<div
 						className={`${styles['list']}`}
-						onClick={()=>this.editPost(index)}
 					>
 						<ul>
 							<li>
-								<span>Name : </span>{elem.name} <br/>
+								<span>Name : </span>{elem.name} <br />
 							</li>
 							<li>
-								<span>Title :</span> {elem.title} <br/>
+								<span>Title :</span> {elem.title} <br />
 							</li>
 							<li>
-								<span>Comment :</span> {elem.post} <br/>
+								<span>Comment :</span> {elem.post} <br />
 							</li>
 						</ul>
 						<button
 							className={`${styles['list-button']}`}
-							onClick={()=>{this.removeComment(index)}}
+							onClick={() => { this.removeComment(index); }}
 						>
 							Delete comment
-						</button>
+						</button >
+						{click && <button
+							className={`${styles['list-button']}`}
+							onClick={() => this.editPost(index)}
+						>
+							Edit comment
+						</button>}
+						{!click && index === indexNum && <button
+							onClick={() => this.savePost(index)}
+							className={`${styles['list-button']}`}
+						>
+							Save
+						</button>}
 					</div>
 				))}
 			</div>
@@ -134,4 +165,4 @@ export class Comp extends React.Component{
 	}
 }
 
-export default Comp;
\ No newline at end of file
+export default Comp;

From 69fd18da3bac4c6e3558ba74c05b2273221e47bc Mon Sep 17 00:00:00 2001
From: Narek <sahakyan.dev@gmail.com>
Date: Tue, 5 Mar 2019 17:16:05 +0100
Subject: [PATCH 5/6] Rebuild. add, edit, delete comment

---
 client/modules/App/App.css                    |   2 +-
 client/modules/App/App.js                     | 119 ++++++--
 .../App/components/CustomComponents/Comp.css  | 100 +++----
 .../App/components/CustomComponents/Comp.js   | 270 +++++++-----------
 .../components/PostListItem/PostListItem.css  |  28 +-
 .../components/PostListItem/PostListItem.js   |  59 +++-
 .../PostListItem/newComponent/Comp.css        |  44 +++
 .../PostListItem/newComponent/Comp.js         | 140 +++++++++
 .../newComponent/components/CommentLists.css  |  33 +++
 .../newComponent/components/CommentLists.js   |  43 +++
 .../newComponent/components/Inputs.css        |  39 +++
 .../newComponent/components/Inputs.js         |  60 ++++
 .../modules/Post/pages/PostListPage/First.js  |   0
 13 files changed, 681 insertions(+), 256 deletions(-)
 create mode 100644 client/modules/Post/components/PostListItem/newComponent/Comp.css
 create mode 100644 client/modules/Post/components/PostListItem/newComponent/Comp.js
 create mode 100644 client/modules/Post/components/PostListItem/newComponent/components/CommentLists.css
 create mode 100644 client/modules/Post/components/PostListItem/newComponent/components/CommentLists.js
 create mode 100644 client/modules/Post/components/PostListItem/newComponent/components/Inputs.css
 create mode 100644 client/modules/Post/components/PostListItem/newComponent/components/Inputs.js
 create mode 100644 client/modules/Post/pages/PostListPage/First.js

diff --git a/client/modules/App/App.css b/client/modules/App/App.css
index ce1fb454d..dbf58ab5b 100644
--- a/client/modules/App/App.css
+++ b/client/modules/App/App.css
@@ -3,4 +3,4 @@
   width: 100%;
   padding: 15px;
   margin: 0 auto;
-}
+}
\ No newline at end of file
diff --git a/client/modules/App/App.js b/client/modules/App/App.js
index 6668d00d9..d78b7513e 100644
--- a/client/modules/App/App.js
+++ b/client/modules/App/App.js
@@ -1,54 +1,117 @@
 import React, { Component } from 'react';
+
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 
+import { connect } from 'react-redux';// Import Style
+
+import styles from './App.css';// Import Components
+
+import Helmet from 'react-helmet';
+
+import Header from './components/Header/Header';
 
-// Import Components
-import Comp from './components/CustomComponents/Comp';
+import Footer from './components/Footer/Footer';// Import Actions
 
-// Import Actions
 import { toggleAddPost } from './AppActions';
 
-// let DevTools;
-// if (process.env.NODE_ENV === 'development') {
-//   // eslint-disable-next-line global-require
-//   DevTools = require('./components/DevTools').default;
-// }
+import { switchLanguage } from '../../modules/Intl/IntlActions';
+
+let DevTools;
+
+if (process.env.NODE_ENV === 'development') {
+ // eslint-disable-next-line global-require
+
+  DevTools = require('./components/DevTools').default;
+} export class App extends Component {
 
-export class App extends Component {
   constructor(props) {
     super(props);
+
     this.state = { isMounted: false };
-  }
+  } componentDidMount() {
+   this.setState({isMounted: true}); // eslint-disable-line
+  } toggleAddPostSection = () => {
+    this.props.dispatch(toggleAddPost());
+  }; render() {
+    return (
 
-  componentDidMount() {
-    this.setState({isMounted: true}); // eslint-disable-line
-  }
+     <div>
 
-  toggleAddPostSection = () => {
-    this.props.dispatch(toggleAddPost());
-  };
+       {this.state.isMounted && !window.devToolsExtension && process.env.NODE_ENV === 'development' && <DevTools />}
 
-  render() {
-    return (
-      <div>
-				<Comp />
-      </div>
-    );
+       <div>
+
+         <Helmet
+
+           title="MERN Starter - Blog App"
+
+           titleTemplate="%s - Blog App"
+
+           meta={[
+
+             { charset: 'utf-8' },
+
+             {
+
+               'http-equiv': 'X-UA-Compatible',
+
+               content: 'IE=edge',
+
+             },
+
+             {
+
+               name: 'viewport',
+
+               content: 'width=device-width, initial-scale=1',
+
+             },
+
+           ]}
+
+         />
+
+         <Header
+
+           switchLanguage={lang => this.props.dispatch(switchLanguage(lang))}
+
+           intl={this.props.intl}
+
+           toggleAddPost={this.toggleAddPostSection}
+
+         />
+
+         <div className={styles.container}>
+
+           {this.props.children}
+
+         </div>
+
+         <Footer />
+
+       </div>
+
+     </div>
+
+   );
   }
+
 }
 
 App.propTypes = {
+
   children: PropTypes.object.isRequired,
+
   dispatch: PropTypes.func.isRequired,
+
   intl: PropTypes.object.isRequired,
-};
 
-// Retrieve data from store as props
+};// Retrieve data from store as props
+
 function mapStateToProps(store) {
   return {
+
     intl: store.intl,
-  };
-}
 
-export default connect(mapStateToProps)(App);
+  };
+} export default connect(mapStateToProps)(App);
diff --git a/client/modules/App/components/CustomComponents/Comp.css b/client/modules/App/components/CustomComponents/Comp.css
index be037d698..ecfebaa32 100644
--- a/client/modules/App/components/CustomComponents/Comp.css
+++ b/client/modules/App/components/CustomComponents/Comp.css
@@ -1,83 +1,83 @@
 *{
-  font-size: 20px;
+    font-size: 20px;
 }
 body {
-  background-color: #8D9440 !important;
+    background-color: #8D9440 !important;
 }
 
 form{
-  display: flex;
-  flex-direction: column;
-  margin-top: 50px;
-  width: 400px;
-  margin: auto;
+    display: flex;
+    flex-direction: column;
+    margin-top: 50px;
+    width: 400px;
+    margin: auto;
 
 }
 input{
-  margin-top: 15px;
-  padding: 15px;
-  width: 100%;
-  margin-bottom: 20px;
-  border-radius: 5px;
-  outline-style: none;
-  border: 2px solid #b4b4b4;
+    margin-top: 15px;
+    padding: 15px;
+    width: 100%;
+    margin-bottom: 20px;
+    border-radius: 5px;
+    outline-style: none;
+    border: 2px solid #b4b4b4;
 }
 textarea{
-  border-radius: 5px;
-  outline-style: none;
-  border: 2px solid #b4b4b4;
-  margin-top: 10px;
+    border-radius: 5px;
+    outline-style: none;
+    border: 2px solid #b4b4b4;
+    margin-top: 10px;
 }
 .button{
-  margin-top: 15px;
-  box-shadow: 0 0 5px 1px black;
-  outline-style: none;
-  background-color: #616247;
-  border: 1px solid #616247;
-  color: white;
+    margin-top: 15px;
+    box-shadow: 0 0 5px 1px black;
+    outline-style: none;
+    background-color: #616247;
+    border: 1px solid #616247;
+    color: white;
 }
 .button:hover{
-  cursor: pointer;
+    cursor: pointer;
 }
 body{
-  background-color: red;
+    background-color: red;
 }
 .list{
-  margin: 40px 200px;
+    margin: 40px 200px;
 }
 .list li{
-  list-style-type: none;
-  margin: 15px;
+    list-style-type: none;
+    margin: 15px;
 }
 .list-button{
-  padding: 6px;
-  border-radius: 8px;
-  box-shadow: 0 0 5px 1px black;
-  outline-style: none;
-  background-color: #616247;
-  border: 1px solid #616247;
-  color: white;
-  font-size: 16px;
+    padding: 6px;
+    border-radius: 8px;
+    box-shadow: 0 0 5px 1px black;
+    outline-style: none;
+    background-color: #616247;
+    border: 1px solid #616247;
+    color: white;
+    font-size: 16px;
 }
 .list-button:hover{
-  cursor: pointer;
+    cursor: pointer;
 }
 .list li span{
-  color: white;
+    color: white;
 }
 .change-button{
-  margin-left: 10px;
-  padding: 6px;
-  border-radius: 8px;
-  box-shadow: 0 0 5px 1px black;
-  outline-style: none;
-  background-color: #616247;
-  border: 1px solid #616247;
-  color: white;
-  font-size: 16px;
+    margin-left: 10px;
+    padding: 6px;
+    border-radius: 8px;
+    box-shadow: 0 0 5px 1px black;
+    outline-style: none;
+    background-color: #616247;
+    border: 1px solid #616247;
+    color: white;
+    font-size: 16px;
 }
 
 div[class*='Comp']:hover{
-  opacity: 0.7;
-  cursor: pointer;
+    opacity: 0.7;
+    cursor: pointer;
 }
\ No newline at end of file
diff --git a/client/modules/App/components/CustomComponents/Comp.js b/client/modules/App/components/CustomComponents/Comp.js
index c389423c4..f3542d20d 100644
--- a/client/modules/App/components/CustomComponents/Comp.js
+++ b/client/modules/App/components/CustomComponents/Comp.js
@@ -1,168 +1,114 @@
 import React from 'react';
 import styles from './Comp.css';
 
-class Comp extends React.Component {
-	constructor (props) {
-		super(props);
-		this.state = {
-			arr: [{}],
-			click: true,
-			textareaValue: '',
-			indexNum: 0,
-		};
-		this.addComment = this.addComment.bind(this);
-		this.editPost = this.editPost.bind(this);
-		this.addState = this.addState.bind(this);
-		this.removeComment = this.removeComment.bind(this);
-		this.handleChange = this.handleChange.bind(this);
-	}
-
-	arr = [];
-
-	addComment() {
-		let userName = this.refs.name.value;
-		let userTitle = this.refs.title.value;
-		let userPost = this.refs.post.value;
-		let form = document.getElementById('inputForm');
-		let { arr } = this;
-
-		if (userName.length > 0 && userTitle.length > 0 && userPost.length > 0) {
-			arr.push({
-				name : userName,
-				title : userTitle,
-				post : userPost,
-			});
-			this.setState({
-				arr,
-			});
-			form.reset();
-		}
-	}
-
-	handleChange(event) {
-		this.setState({ textareaValue: event.target.value });
-	}
-
-	removeComment(index) {
-		const arr = this.arr;
-		arr.splice(index, 1);
-		this.addState();
-	}
-
-	addState() {
-		const { arr } = this;
-		this.setState({
-			arr,
-			click : true,
-		});
-	}
-
-	editPost(index) {
-		this.setState({
-			click : false,
-			indexNum : index,
-		});
-
-		const arr = this.arr;
-		const name = this.refs.name;
-		const title = this.refs.title;
-		const post = this.refs.post;
-		const currentIndex = arr[index];
-
-		name.value = currentIndex.name;
-		title.value = currentIndex.title;
-		post.value = this.state.textareaValue;
-	}
-
-	savePost(index) {
-		let arr = this.arr;
-		let name = this.refs.name;
-		let title = this.refs.title;
-		let post = this.refs.post;
-		let currentIndex = arr[index];
-
-		if (name.value.length > 0 && title.value.length > 0 && this.state.textareaValue.length > 0) {
-			currentIndex.name = name.value;
-			currentIndex.title = title.value;
-			currentIndex.post = this.state.textareaValue;
-
-			name.value = '';
-			title.value = '';
-			post.value = '';
-
-			this.setState({ click: true });
-		}
-	}
-	render() {
-		const { arr } = this;
-		const { click, indexNum } = this.state;
-		return (
-			<div className={`${styles['parent']}`}>
-				<form id="inputForm">
-					<input
-						type="text"
-						ref="name"
-						placeholder="Enter your name"
-					/>
-					<input
-						type="text"
-						ref="title"
-						placeholder="Enter post title"
-					/>
-					<textarea
-						type="text"
-						ref="post"
-						placeholder="Enter post"
-						value={this.setState.value}
-						onChange={this.handleChange}
-					/>
-					{click && <input
-						type="button"
-						value="Add comment"
-						onClick={(this.addComment)}
-						className={`${styles['button']}`}
-					/>}
-				</form>
-
-				{arr.map((elem, index) => (
-					<div
-						className={`${styles['list']}`}
-					>
-						<ul>
-							<li>
-								<span>Name : </span>{elem.name} <br />
-							</li>
-							<li>
-								<span>Title :</span> {elem.title} <br />
-							</li>
-							<li>
-								<span>Comment :</span> {elem.post} <br />
-							</li>
-						</ul>
-						<button
-							className={`${styles['list-button']}`}
-							onClick={() => { this.removeComment(index); }}
-						>
-							Delete comment
-						</button >
-						{click && <button
-							className={`${styles['list-button']}`}
-							onClick={() => this.editPost(index)}
-						>
-							Edit comment
-						</button>}
-						{!click && index === indexNum && <button
-							onClick={() => this.savePost(index)}
-							className={`${styles['list-button']}`}
-						>
-							Save
-						</button>}
-					</div>
-				))}
-			</div>
-		)
-
-	}
+export class Comp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      arr: [{}],
+      click: false,
+    };
+    this.addComment = this.addComment.bind(this);
+  }
+
+    // Initialize main array to push state comments
+  arr = [];
+
+
+  addComment(index) {
+    let userName = this.refs.userName.value;
+    let userTitle = this.refs.title.value;
+    let userPost = this.refs.post.value;
+    let form = document.getElementById('inputForm');
+    let { arr } = this;
+
+    if (userName.length > 0 && userTitle.length > 0 && userPost.length > 0) {
+      arr.push({
+        name: userName,
+        title: userTitle,
+        post: userPost,
+      });
+      this.setState({
+        arr,
+      });
+    }
+
+    form.reset();
+  }
+
+  removeComment(index) {
+    const arr = this.arr;
+    arr.splice(index, 1);
+    this.addState();
+  }
+
+  addState() {
+    const { arr } = this;
+    this.setState({
+      arr,
+    });
+  }
+
+
+  render() {
+    const { arr } = this;
+    const { click } = this.state;
+
+    return (
+            <div className={`${styles['parent']}`}>
+                <form id="inputForm">
+                    <input
+                      type="text"
+                      ref="userName"
+                      placeholder="Enter your name"
+                      required
+                    />
+                    <input
+                      type="text"
+                      ref="title"
+                      placeholder="Enter post title"
+                      required
+                    />
+                    <textarea
+                      type="text"
+                      ref="post"
+                      required
+                    />
+                    <input
+                      type="button"
+                      value="Add comment"
+                      onClick={this.addComment}
+                      className={`${styles['button']}`}
+                    />
+                </form>
+
+                {arr.map((elem, index) => (
+                    <div
+                      className={`${styles['list']}`}
+                      onClick={() => this.editPost(index)}
+                    >
+                        <ul>
+                            <li>
+                                <span>Name : </span>{elem.name} <br />
+                            </li>
+                            <li>
+                                <span>Title :</span> {elem.title} <br />
+                            </li>
+                            <li>
+                                <span>Comment :</span> {elem.post} <br />
+                            </li>
+                        </ul>
+                        <button
+                          className={`${styles['list-button']}`}
+                          onClick={() => { this.removeComment(index); }}
+                        >
+                            Delete comment
+                        </button>
+                    </div>
+                ))}
+            </div>
+        );
+  }
 }
 
 export default Comp;
diff --git a/client/modules/Post/components/PostListItem/PostListItem.css b/client/modules/Post/components/PostListItem/PostListItem.css
index 49b3345f2..323fc7d1e 100644
--- a/client/modules/Post/components/PostListItem/PostListItem.css
+++ b/client/modules/Post/components/PostListItem/PostListItem.css
@@ -36,7 +36,7 @@
 }
 
 .post-action a:hover{
-  color: #EF5350;
+  color: #03A9F4;
 }
 
 .divider{
@@ -56,3 +56,29 @@
   font-size: 16px;
   color: #555;
 }
+
+.form-button{
+  margin-top: 15px;
+  padding: 8px 16px;
+  box-shadow: 0 0 5px 1px black;
+  outline-style: none;
+  background: #03A9F4 !important;
+  border: 1px solid #03A9F4 !important;
+  color: white;
+  border-radius: 4px;
+}
+.add-comment{
+  color : white;
+  display: inline-block;
+  text-decoration: none;
+  font-size: 14px;
+  font-style: italic;
+  margin-left: 10px;
+}
+.add-comment:hover{
+  cursor: pointer;
+  color: #03A9F4;
+}
+.post-action{
+  display: inline-block !important;
+}
\ No newline at end of file
diff --git a/client/modules/Post/components/PostListItem/PostListItem.js b/client/modules/Post/components/PostListItem/PostListItem.js
index 2925e2199..89d6c095a 100644
--- a/client/modules/Post/components/PostListItem/PostListItem.js
+++ b/client/modules/Post/components/PostListItem/PostListItem.js
@@ -3,23 +3,54 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router';
 import { FormattedMessage } from 'react-intl';
 
+import Comp from './newComponent/Comp';
+
 // Import Style
 import styles from './PostListItem.css';
 
-function PostListItem(props) {
-  return (
-    <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>
-      <hr className={styles.divider} />
-    </div>
-  );
+class PostListItem extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: true,
+      click: true,
+    };
+  }
+
+  addComment = () => {
+    this.setState({
+      isOpen: !this.state.isOpen,
+      click: !this.state.click,
+
+    });
+  }
+
+  editState = (isOpen) => {
+    this.setState({ isOpen });
+  }
+
+  render() {
+    const { isOpen, click } = this.state;
+    let name;
+    isOpen === true ? name = 'Add comment' : name = 'Cencel';
+
+    return (
+      <div className={styles['single-post']}>
+        <h3 className={styles['post-title']}>
+          <Link to={`/posts/${this.props.post.slug}-${this.props.post.cuid}`} >
+            {this.props.post.title}
+          </Link>
+        </h3>
+        <p className={styles['author-name']}><FormattedMessage id="by" /> {this.props.post.name}</p>
+        <p className={styles['post-desc']}>{this.props.post.content}</p>
+        <p className={styles['post-action']}><a href="#" onClick={this.props.onDelete}><FormattedMessage id="deletePost" /></a></p>
+        <p className={styles['add-comment']} onClick={this.addComment}>{name}</p>
+        <hr className={styles.divider} />
+        {<Comp isOpen={isOpen} editState={this.editState} click={click} />}
+      </div>
+    );
+  }
+
 }
 
 PostListItem.propTypes = {
diff --git a/client/modules/Post/components/PostListItem/newComponent/Comp.css b/client/modules/Post/components/PostListItem/newComponent/Comp.css
new file mode 100644
index 000000000..95ca70366
--- /dev/null
+++ b/client/modules/Post/components/PostListItem/newComponent/Comp.css
@@ -0,0 +1,44 @@
+@import url('https://fonts.googleapis.com/css?family=Padauk');
+*{
+        font-family: 'Padauk', sans-serif;
+}
+body {
+    background-color: rgb(197, 197, 197) !important;
+}
+
+form{
+    margin-top: 50px;
+    width: 500px;
+    margin: auto;
+}
+input{
+    margin-top: 15px;
+    padding: 15px;
+    width: 100%;
+    margin-bottom: 20px;
+    border-radius: 5px;
+    outline-style: none;
+    border: 1px solid #ddd;
+}
+
+/* textarea{
+    border-radius: 5px;
+    outline-style: none;
+    border: 1px solid #ddd;
+    margin-top: 10px;
+} */
+body{
+    background-color: red;
+}
+.change-button{
+    margin-left: 10px;
+    padding: 6px;
+    border-radius: 8px;
+    box-shadow: 0 0 5px 1px black;
+    outline-style: none;
+    background-color: #616247;
+    border: 1px solid #616247;
+    color: white;
+    font-size: 16px;
+}
+
diff --git a/client/modules/Post/components/PostListItem/newComponent/Comp.js b/client/modules/Post/components/PostListItem/newComponent/Comp.js
new file mode 100644
index 000000000..5f618bb16
--- /dev/null
+++ b/client/modules/Post/components/PostListItem/newComponent/Comp.js
@@ -0,0 +1,140 @@
+import React from 'react';
+import styles from './Comp.css';
+import { InputName, TextArea, AddComment } from './Components/Inputs';
+import CommentLists from './Components/CommentLists';
+
+class Comp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      arr: [{}],
+      indexNum: 0,
+      click: true,
+      isOpen: false,
+    };
+
+    this.inputName = React.createRef();
+    this.textArea = React.createRef();
+    this.formRef = React.createRef();
+  }
+
+  arr = [];
+  inputValues = {
+    name: '',
+    comment: '',
+  }
+
+  changeInput = () => {
+    this.inputValues.name = this.inputName.current.value;
+    this.inputValues.comment = this.textArea.current.value;
+  }
+
+  addComment = () => {
+    let { name, comment } = this.inputValues;
+    let { arr } = this;
+
+    if (name.length > 0 && comment.length > 0) {
+      arr.push({
+        name,
+        comment,
+      });
+      this.setState({ arr });
+      this.formRef.current.reset();
+    }
+  }
+
+  editComment = (index) => {
+    if (this.state.isOpen) {
+      let name = this.inputName.current;
+      let comment = this.textArea.current;
+      let currentIndex = this.arr[index];
+
+      name.value = currentIndex.name;
+      comment.value = currentIndex.comment;
+
+      this.setState({
+        click: false,
+        indexNum: index,
+        isOpen: true,
+      });
+    }
+  };
+
+  saveComment = (index) => {
+    let name = this.inputName.current;
+        // let title = this.inputTitle.current;
+    let comment = this.textArea.current;
+    let currentIndex = this.arr[index];
+
+		if (name.value.length > 0 && title.value.length > 0 && comment.value.length > 0) {
+			currentIndex.name = name.value;
+			currentIndex.comment = comment.value;
+
+			name.value = '';
+			comment.value = '';
+
+			this.setState({ click: !this.state.click });
+		}
+  };
+
+  removeComment = (index) => {
+    const arr = this.arr;
+    arr.splice(index, 1);
+    this.addState();
+  };
+
+  addState = () => {
+    const { arr } = this;
+    this.setState({
+      arr,
+      click: true,
+    });
+  };
+
+  componentWillReceiveProps(nextProps) {
+    const { isOpen } = this.props;
+    if (nextProps.isOpen !== this.props.isOpen) {
+      if (isOpen) {
+        this.setState({ isOpen: true, click: true });
+      } else {
+        this.setState({ isOpen: false, click: false });
+      }
+    }
+  }
+
+
+  render() {
+    const { arr, inputName, changeInput, textArea, addComment, removeComment, editComment, saveComment, formRef } = this;
+    const { click, indexNum, isOpen } = this.state;
+    return (
+			<div className={styles['parent']}>
+			 {arr.map((elem, index) => (
+					<CommentLists
+						elem={elem}
+						index={index}
+						removeComment={removeComment}
+						editComment={editComment}
+						saveComment={saveComment}
+						click={click}
+						indexNum={indexNum}
+						isOpen={isOpen}
+					/>
+				))}
+					{isOpen && <form id="inputForm" ref={formRef}>
+							< InputName
+								inputName={inputName}
+								changeInput={changeInput}
+							/>
+
+							< TextArea
+								textArea={textArea}
+								changeInput={changeInput}
+							/>
+							{click && <AddComment addComment={addComment} />}
+					</form>}
+			</div>
+		);
+  }
+}
+
+export default Comp;
diff --git a/client/modules/Post/components/PostListItem/newComponent/components/CommentLists.css b/client/modules/Post/components/PostListItem/newComponent/components/CommentLists.css
new file mode 100644
index 000000000..c8396218e
--- /dev/null
+++ b/client/modules/Post/components/PostListItem/newComponent/components/CommentLists.css
@@ -0,0 +1,33 @@
+.list{
+    width: 500px;
+    font-size: 14px;
+    color: #888;
+}
+
+.list-button{
+    width: 25%;
+    border-radius: 4px;
+    outline-style: none;
+    background-color: #03A9F4;
+    border: 1px solid #03A9F4;
+    color: white;
+    font-size: 16px;
+    margin: 5px;
+}
+
+.list-button:hover{
+    cursor: pointer;
+}
+
+span{
+    color: white;
+}
+
+li{
+    list-style-type: none;
+    margin: 15px;
+}
+h3{
+    display: inline-block;
+    margin-left: 5px;
+}
\ No newline at end of file
diff --git a/client/modules/Post/components/PostListItem/newComponent/components/CommentLists.js b/client/modules/Post/components/PostListItem/newComponent/components/CommentLists.js
new file mode 100644
index 000000000..c25e0b0b5
--- /dev/null
+++ b/client/modules/Post/components/PostListItem/newComponent/components/CommentLists.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import styles from './CommentLists.css';
+
+const CommentLists = (props) => {
+  const { elem, index, click, indexNum, isOpen } = props;
+
+  return (
+            <div className={styles['list']}>
+                    <ul>
+                        <li>
+                            <span>Name : </span><h3>{elem.name}</h3><br />
+                        </li>
+{/*                        <li>
+                            <span>Title :</span><h3>{elem.title}</h3><br/>
+                        </li>*/}
+                        <li>
+                            <span>Comment </span> <br />{elem.comment} <br />
+                        </li>
+                    </ul>
+                    {isOpen && <button
+                      className={styles['list-button']}
+                      onClick={() => { props.removeComment(index); }}
+                    >
+                        Delete comment
+                    </button >}
+                    {isOpen && click && <button
+                      className={styles['list-button']}
+                      onClick={() => props.editComment(index)}
+                    >
+                        Edit comment
+                    </button>}
+                    {isOpen && !click && index === indexNum && <button
+                      onClick={() => props.saveComment(index)}
+                      className={styles['list-button']}
+                    >
+                        Save
+                    </button>}
+                </div>
+    );
+};
+
+
+export default CommentLists;
diff --git a/client/modules/Post/components/PostListItem/newComponent/components/Inputs.css b/client/modules/Post/components/PostListItem/newComponent/components/Inputs.css
new file mode 100644
index 000000000..2dd9a0d3d
--- /dev/null
+++ b/client/modules/Post/components/PostListItem/newComponent/components/Inputs.css
@@ -0,0 +1,39 @@
+.button-div{
+    display: inline-block;
+    padding: 8px 16px;
+    font-size: 18px;
+    color: #FFF;
+    background: #03A9F4;
+    border: 1px solid #03A9F4;
+    text-decoration: none;
+    border-radius: 4px;
+    width: 20%;
+}
+.button-div:hover{
+    cursor: pointer;
+}
+.input-div{
+    margin-bottom: 4px;
+    font-size: 16px;
+    line-height: normal;
+    padding: 12px 16px;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+    outline: none;
+    color: #212121;
+}
+
+.input-parent{
+    display: block;
+    margin-right: 20px;
+}
+.textarea-div{
+    min-height: 50px;
+    min-width: 200px;
+    max-width: 480px;
+    max-height: 300px;
+    border-radius: 5px;
+    outline-style: none;
+    border: 1px solid #ddd;
+    margin-top: 10px;
+}
\ No newline at end of file
diff --git a/client/modules/Post/components/PostListItem/newComponent/components/Inputs.js b/client/modules/Post/components/PostListItem/newComponent/components/Inputs.js
new file mode 100644
index 000000000..7de901c00
--- /dev/null
+++ b/client/modules/Post/components/PostListItem/newComponent/components/Inputs.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import styles from './Inputs.css';
+
+export const InputName = (props) => {
+  return (
+     <div className={styles['input-parent']}>
+       <input
+         className={styles['input-div']}
+         ref={props.inputName}
+         onChange={props.changeInput}
+         type="text"
+         placeholder="Enter your name"
+       />
+     </div>
+   );
+};
+
+ // export const InputTitle = (props) =>{
+ //    return(
+ //      <div className={styles["input-parent"]}>
+ //        <input
+ //         className={styles["input-div"]}
+ //         ref={props.inputTitle}
+ //         onChange={props.changeInput}
+ //         type = "text"
+ //         placeholder="Enter title"
+ //        />
+ //      </div>
+ //    )
+ //  }
+
+export const TextArea = (props) => {
+  return (
+      <div>
+        <textarea
+          ref={props.textArea}
+          onChange={props.changeInput}
+          className={styles['textarea-div']}
+          type="text"
+          placeholder="Write comment"
+          rows="5"
+          cols="72"
+        />
+      </div>
+    );
+};
+
+export const AddComment = (props) => {
+  return (
+      <div >
+       <input
+         type="button"
+         value="Submit"
+         onClick={(props.addComment)}
+         className={styles['button-div']}
+       />
+      </div>
+    );
+};
+
diff --git a/client/modules/Post/pages/PostListPage/First.js b/client/modules/Post/pages/PostListPage/First.js
new file mode 100644
index 000000000..e69de29bb

From cd54ee263e0da652bddde95b86fa034dfc2ef30c Mon Sep 17 00:00:00 2001
From: Narek <sahakyan.dev@gmail.com>
Date: Tue, 5 Mar 2019 21:10:33 +0100
Subject: [PATCH 6/6] hide comment form on submit

---
 .../PostListItem/newComponent/Comp.js         | 54 ++++++++++---------
 1 file changed, 28 insertions(+), 26 deletions(-)

diff --git a/client/modules/Post/components/PostListItem/newComponent/Comp.js b/client/modules/Post/components/PostListItem/newComponent/Comp.js
index 5f618bb16..8295a7bd6 100644
--- a/client/modules/Post/components/PostListItem/newComponent/Comp.js
+++ b/client/modules/Post/components/PostListItem/newComponent/Comp.js
@@ -40,10 +40,12 @@ class Comp extends React.Component {
       });
       this.setState({ arr });
       this.formRef.current.reset();
+      this.formRef.current.style.display = 'none';
     }
   }
 
   editComment = (index) => {
+    this.formRef.current.style.display = 'block';
     if (this.state.isOpen) {
       let name = this.inputName.current;
       let comment = this.textArea.current;
@@ -61,20 +63,20 @@ class Comp extends React.Component {
   };
 
   saveComment = (index) => {
-    let name = this.inputName.current;
-        // let title = this.inputTitle.current;
-    let comment = this.textArea.current;
-    let currentIndex = this.arr[index];
+    const name = this.inputName.current;
+    const comment = this.textArea.current;
+    const currentIndex = this.arr[index];
 
-		if (name.value.length > 0 && title.value.length > 0 && comment.value.length > 0) {
-			currentIndex.name = name.value;
-			currentIndex.comment = comment.value;
+    if (name.value.length > 0 && comment.value.length > 0) {
+      currentIndex.name = name.value;
+      currentIndex.comment = comment.value;
 
-			name.value = '';
-			comment.value = '';
+      name.value = '';
+      comment.value = '';
 
-			this.setState({ click: !this.state.click });
-		}
+      this.setState({ click: !this.state.click });
+    }
+    this.formRef.current.style.display = 'none';
   };
 
   removeComment = (index) => {
@@ -107,28 +109,28 @@ class Comp extends React.Component {
     const { arr, inputName, changeInput, textArea, addComment, removeComment, editComment, saveComment, formRef } = this;
     const { click, indexNum, isOpen } = this.state;
     return (
-			<div className={styles['parent']}>
-			 {arr.map((elem, index) => (
-					<CommentLists
-						elem={elem}
-						index={index}
-						removeComment={removeComment}
-						editComment={editComment}
-						saveComment={saveComment}
-						click={click}
-						indexNum={indexNum}
-						isOpen={isOpen}
+      <div className={styles['parent']}>
+			{arr.map((elem, index) => (
+				<CommentLists
+  elem={elem}
+  index={index}
+  removeComment={removeComment}
+  editComment={editComment}
+  saveComment={saveComment}
+  click={click}
+  indexNum={indexNum}
+  isOpen={isOpen}
 					/>
 				))}
 					{isOpen && <form id="inputForm" ref={formRef}>
 							< InputName
-								inputName={inputName}
-								changeInput={changeInput}
+  inputName={inputName}
+  changeInput={changeInput}
 							/>
 
 							< TextArea
-								textArea={textArea}
-								changeInput={changeInput}
+  textArea={textArea}
+  changeInput={changeInput}
 							/>
 							{click && <AddComment addComment={addComment} />}
 					</form>}