Itw

package.json

@@ -4,12 +4,12 @@
   "private": true,
   "dependencies": {
     "aphrodite": "^2.2.2",
-    "express": "^4.16.3",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-redux": "^5.0.7",
     "react-scripts": "1.1.4",
-    "redux": "^4.0.0"
+    "redux": "^4.0.0",
+    "redux-thunk": "^2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,79 +1,41 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { connect } from 'react-redux'
-import {
-  addAnswer,
-  addQuestion,
-  changeMessage,
-  removeMessage,
-  incrementCounter,
-  decrementCounter,
-} from './actionCreators'
+import { css, StyleSheet } from 'aphrodite/no-important'
+
+import { addAnswer, addQuestion, changeMessage, removeMessage } from './store/actionCreators'
 import Button from './components/Button.js'
 import MessagesToType from './components/MessagesToType'
-import { MessagesToShow } from './components/MessagesToShow'
-import { StyleSheet, css } from 'aphrodite/no-important'
+import MessagesToShow from './components/MessagesToShow'
 
-class App extends Component {
-  render() {
-    return (
-      <div className={css(styles.mainContainer)}>
-        <div className={css(styles.writeSection)}>
-          <div className={css(styles.buttonContainer)}>
-            <Button
-              onClick={this.props.addQuestion}
-              color="white"
-              text="Add question"
-              size="long"
-            />
-            <Button onClick={this.props.addAnswer} color="blue" text="See answer" size="long" />
-          </div>
-          <div className={css(styles.buttonContainer)}>
-            <Button
-              onClick={this.props.incrementCounter}
-              color="white"
-              text="Counter +"
-              size="long"
-            />
-            <Button
-              onClick={this.props.decrementCounter}
-              color="blue"
-              text="Counter -"
-              size="long"
-            />
-          </div>
-          <div className={css(styles.counter)}>Start counting: {this.props.counter}</div>
-          <div>
-            <div>
-              {this.props.messages.map((value, index) => (
-                <MessagesToType
-                  index={index}
-                  value={value.text}
-                  type={value.type}
-                  key={'write-q' + index}
-                  handleChangeMessage={this.props.changeMessage}
-                  handleRemoveMessage={this.props.removeMessage}
-                />
-              ))}
-            </div>
-          </div>
+const App = props => {
+  return (
+    <div className={css(styles.mainContainer)}>
+      <div className={css(styles.writeSection)}>
+        <div className={css(styles.buttonContainer)}>
+          <Button onClick={props.addQuestion} color="white" text="Add question" size="long" />
+          <Button onClick={props.addAnswer} color="blue" text="Add answer" size="long" />
         </div>
-        <div className={css(styles.seeSection)}>
-          <div>
-            {this.props.messages.map((item, index, array) => (
-              <MessagesToShow
-                key={'see-q' + index}
-                index={index}
-                item={item.text}
-                type={item.type}
-                hasCounter={index === array.length - 1}
-                counter={this.props.counter}
-              />
-            ))}
-          </div>
+        <div>
+          {props.messages.map((value, index) => (
+            <MessagesToType
+              index={index}
+              value={value.text}
+              type={value.type}
+              key={'write-q' + index}
+              handleChangeMessage={props.changeMessage}
+              handleRemoveMessage={props.removeMessage}
+            />
+          ))}
         </div>
       </div>
-    )
-  }
+
+      <div className={css(styles.seeSection)}>
+        {props.messages.map((item, index, array) => (
+          <MessagesToShow key={'see-q' + index} index={index} item={item.text} type={item.type} />
+        ))}
+      </div>
+    </div>
+  )
 }
 
 const styles = StyleSheet.create({
@@ -102,26 +64,17 @@ const styles = StyleSheet.create({
     width: '50%',
     boxSizing: 'border-box',
   },
-  counter: {
-    padding: '2rem',
-    backgroundColor: 'yellow',
-    fontWeight: 'bold',
-    marginBottom: '2rem',
-  },
 })
 
 const mapStateToProps = state => ({
   messages: state.chat,
-  counter: state.counter,
 })
 
 const mapDispatchToProps = {
   addQuestion,
   addAnswer,
   changeMessage,
   removeMessage,
-  incrementCounter,
-  decrementCounter,
 }
 
 export default connect(

src/components/Button.js

@@ -22,11 +22,9 @@ class Button extends React.Component {
     }
 
     return (
-      <div>
-        <button className={css(buttonStyles)} onClick={this.props.onClick}>
-          {this.props.text}
-        </button>
-      </div>
+      <button className={css(buttonStyles)} onClick={this.props.onClick}>
+        {this.props.text}
+      </button>
     )
   }
 }

src/components/MessagesToShow.js

@@ -1,8 +1,8 @@
 import React from 'react'
-import carla from '../carla.png'
+import carla from '../assets/carla.png'
 import { StyleSheet, css } from 'aphrodite/no-important'
 
-function MessagesToShow(props) {
+const MessagesToShow = props => {
   const type = props.type
 
   let messageContainer = [styles.messageContainer]
@@ -18,10 +18,7 @@ function MessagesToShow(props) {
   return (
     <div className={css(messageContainer)} key={`questionToShow-${props.index}`}>
       <img className={css(avatar)} src={carla} alt="Avatar of Carla" />
-      <div className={css(message)}>
-        {props.item}&nbsp;
-        {props.hasCounter && <span>The current counter is {props.counter}</span>}
-      </div>
+      <div className={css(message)}>{props.item}</div>
     </div>
   )
 }
@@ -64,4 +61,4 @@ const styles = StyleSheet.create({
   },
 })
 
-export { MessagesToShow }
+export default MessagesToShow

src/fakeApi.js

@@ -0,0 +1,3 @@
+export const getQuestionMessage = () => {
+  return 'Question message'
+}

src/index.js

@@ -1,23 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import './index.css'
+import Provider from 'react-redux/es/components/Provider'
+
 import App from './App'
-import registerServiceWorker from './registerServiceWorker'
 import store from './store'
-import Provider from 'react-redux/es/components/Provider'
-// import { loadQuestions } from './actionCreators'
 
 ReactDOM.render(
   <Provider store={store}>
     <App />
   </Provider>,
   document.getElementById('root')
 )
-
-// fetch('/polish')
-//   .then(res => res.json())
-//   .then(result => {
-//     store.dispatch(loadQuestions(result))
-//   })
-
-registerServiceWorker()