Feature

client/modules/App/App.css

@@ -3,4 +3,4 @@
   width: 100%;
   padding: 15px;
   margin: 0 auto;
-}
+}

client/modules/App/App.js

@@ -1,85 +1,117 @@
 import React, { Component } from 'react';
+
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 
-// Import Style
-import styles from './App.css';
+import { connect } from 'react-redux';// Import Style
+
+import styles from './App.css';// Import Components
 
-// Import Components
 import Helmet from 'react-helmet';
+
 import Header from './components/Header/Header';
-import Footer from './components/Footer/Footer';
 
-// Import Actions
+import Footer from './components/Footer/Footer';// 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
+ // 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>
-        {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>
-      </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);

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;
+}

client/modules/App/components/CustomComponents/Comp.js

@@ -0,0 +1,114 @@
+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']}`}
+                      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;