ft(get-community-messages): get all community messages

- set up component - set up action - set up reducer - set up community message page - consume endpoint from backend - write test for component, action, and reducer [Delievers #167288243]
andela · Jul 29, 2019 · a0d11b4 · a0d11b4
1 parent abfe366
commit a0d11b4
Show file tree

Hide file tree

Showing 20 changed files with 593 additions and 145 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,15 +45,18 @@
     "jquery": "^3.4.1",
     "jwt-decode": "^2.2.0",
     "mini-css-extract-plugin": "^0.7.0",
+    "moment-timezone": "^0.5.26",
     "prop-types": "^15.7.2",
     "query-string": "^5.1.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-moment": "^0.9.2",
     "react-redux": "^7.1.0",
     "react-router": "^5.0.1",
     "react-router-dom": "^5.0.1",
     "react-router-hash-link": "^1.2.1",
     "react-router-redux": "^4.0.8",
+    "react-spinners": "^0.5.13",
     "reactstrap": "^8.0.0",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0",

diff --git a/src/components/Card/card.scss b/src/components/Card/card.scss
@@ -3,7 +3,6 @@ $base-color: #fff;
   background: $base-color;
   border-radius: 5px;
   margin: auto;
-  z-index: 1000;
 
   @media screen and (max-width: 420px) {
     width: 300px;

diff --git a/src/components/ChangePassword/ChangePassword.js b/src/components/ChangePassword/ChangePassword.js
@@ -14,7 +14,6 @@ import Footer from '../Footer/Footer';
 import { Header } from '../Header/Header';
 import { Heading } from '../Heading/Heading';
 
-
 export class ChangePassword extends Component {
   constructor(props) {
     super(props);
@@ -65,56 +64,58 @@ export class ChangePassword extends Component {
   }
 
   render() {
-    const { error, confirmPassword, password,
-      passwordFieldError, confirmPasswordFieldError, success } = this.state;
+    const { error, confirmPassword, password, passwordFieldError,
+      confirmPasswordFieldError, success } = this.state;
 
     const { loading } = this.props;
     return (
-      <div className="containers">
-        <div className="bg-image" />
+      <div>
         <Header />
-        <Card>
-          <CardBody>
-            <CardSubtitle>
-              <FontAwesomeIcon icon="lock" className="FontAwesomeIcon" />
-            </CardSubtitle>
-            <Heading title="Change Password" />
-            <CardText>Enter a new password to change your password</CardText>
-            <div className="error">{error}</div>
-            <div className="success">{success}</div>
-            <FormGroup>
-              <Input
-                placeholder="Password"
-                className="input"
-                id="password"
-                onChange={e => this.handleInput(e)}
-                name="password"
-                value={password}
-                type="password"
-              />
-              <div className="error">{passwordFieldError}</div>
-            </FormGroup>
-            <FormGroup>
-              <Input
-                placeholder="Confirm Password"
-                className="input"
-                id="password2"
-                onChange={e => this.handleInput(e)}
-                name="confirmPassword"
-                value={confirmPassword}
-                type="password"
+        <div className="containers">
+          <div className="bg-image" />
+          <Card>
+            <CardBody>
+              <CardSubtitle>
+                <FontAwesomeIcon icon="lock" className="FontAwesomeIcon" />
+              </CardSubtitle>
+              <Heading title="Change Password" />
+              <CardText>Enter a new password to change your password</CardText>
+              <div className="error">{error}</div>
+              <div className="success">{success}</div>
+              <FormGroup>
+                <Input
+                  placeholder="Password"
+                  className="input"
+                  id="password"
+                  onChange={e => this.handleInput(e)}
+                  name="password"
+                  value={password}
+                  type="password"
+                />
+                <div className="error">{passwordFieldError}</div>
+              </FormGroup>
+              <FormGroup>
+                <Input
+                  placeholder="Confirm Password"
+                  className="input"
+                  id="password2"
+                  onChange={e => this.handleInput(e)}
+                  name="confirmPassword"
+                  value={confirmPassword}
+                  type="password"
+                />
+                <div className="error">{confirmPasswordFieldError}</div>
+              </FormGroup>
+              <Button
+                classname="buttons"
+                type="button"
+                onClick={this.handleSubmit}
+                text={loading ? 'Loading...' : 'Change Password'}
               />
-              <div className="error">{confirmPasswordFieldError}</div>
-            </FormGroup>
-            <Button
-              classname="buttons"
-              type="button"
-              onClick={this.handleSubmit}
-              text={loading ? 'Loading...' : 'Change Password'}
-            />
-          </CardBody>
-        </Card>
-        <Footer />
+            </CardBody>
+          </Card>
+          <Footer />
+        </div>
       </div>
     );
   }

diff --git a/src/components/Community/Community.js b/src/components/Community/Community.js
@@ -2,7 +2,9 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter, Link } from 'react-router-dom';
 import { connect } from 'react-redux';
+import Moment from 'react-moment';
 import Header from '../Header/Header';
+import Spinner from '../Spinner/Spinner';
 import Footer from '../Footer/Footer';
 import Sidebar from '../Sidebar/Sidebar';
 import Input from '../Inputs/Input';
@@ -13,47 +15,28 @@ import sideLogo from '../../assets/images/logo.png';
 
 export class Community extends PureComponent {
   state = {
-    messages: [
-      {
-        title: 'communication',
-        post:
-          'Nonverbal communication describes the processes of conveying a type of information in the form of non-linguistic representations. Examples of nonverbal communication include haptic communication, chronemic communication, gestures, body language, facial expressions, eye contact etc. Nonverbal communication also relates to the intent of a message. Examples of intent are voluntary, intentional movements like shaking a hand or winking, as well as involuntary, such as sweating.[3] Speech also contains nonverbal elements known as paralanguage, e.g. rhythm, intonation, tempo, and stress. It affects communication most at the subconscious level and establishes trust. Likewise, written texts include nonverbal elements such as handwriting style, the spatial arrangement of words and the use of emoticons to convey emotion.',
-        author: 'bolaji',
-        key: 1,
-        role: 'trainer',
-      },
-      {
-        title: 'Dealing with customer',
-        post:
-          'Your company’s most vital asset is its customers, so you need to make sure you’re dealing with your customers properly. Without them, you would not, and could not, exist in business. Sure, you can attract new customers with unique products, free gifts, or reducing your prices; but if you’re not creating relationships with them, they’re not going to return or recommend you.',
-        author: 'chisom',
-        key: 2,
-        role: 'learner',
-      },
-      {
-        title: 'communication',
-        post: 'communication is the key',
-        author: 'chisom',
-        key: 2,
-        role: 'trainer',
-      },
-      {
-        title: 'communication',
-        post: 'communication is the key',
-        author: 'chisom',
-        key: 4,
-        role: 'learner',
-      },
-    ],
+    messages: [],
   };
 
   componentDidMount() {
-    const { getCommunityMessages } = this.props;
-    getCommunityMessages();
+    const getCommMessages = async () => {
+      const { getCommunityMessages } = this.props;
+      await getCommunityMessages();
+      const { messages } = this.props;
+      this.setState({ messages });
+    };
+    getCommMessages();
   }
 
   render() {
+    const spinner = (
+      <div className="spinner-position">
+        <Spinner />
+      </div>
+    );
+
     const { messages } = this.state;
+    const { loading } = this.props;
     return (
       <div>
         <Header />
@@ -90,15 +73,28 @@ export class Community extends PureComponent {
               <hr />
             </div>
             <div className="posts">
-              {messages.map(msg => (
-                <div className="posts_section">
-                  <h4 className="post_title">{msg.title}</h4>
-                  <p className="post_body">{msg.post}</p>
-                  <p className="poster_name">{msg.author}</p>
-                  <p className="poster_role">{msg.role}</p>
-                  <hr />
-                </div>
-              ))}
+              {loading ? (
+                spinner
+              ) : (
+                messages.map(msg => (
+                  <div className="posts_section" key={msg && msg.id}>
+                    <h4 className="post_title">
+                      {msg.owner && msg.owner.lastName}
+                      {' '}
+                      {msg.owner && msg.owner.firstName}
+                    </h4>
+                    <p className="timeCreated">
+                      <Moment local format="LLLL">
+                        {msg.createdAt}
+                      </Moment>
+                    </p>
+                    <p className="post_body">{msg.body}</p>
+                    <p className="poster_name">{msg.owner && msg.owner.userName}</p>
+                    <p className="poster_role">{msg.owner && msg.owner.role}</p>
+                    <hr />
+                  </div>
+                ))
+              )}
             </div>
           </div>
         </div>
@@ -108,14 +104,23 @@ export class Community extends PureComponent {
   }
 }
 
-const mapStateToProps = state => ({});
+const mapStateToProps = state => ({
+  loading: state.community.isLoading,
+  messages: state.community.allMessages,
+  error: state.community.error,
+});
 
 const mapDispatchToProps = {
   getCommunityMessages: () => actions.getCommunityMessages(),
 };
 
 Community.propTypes = {
   getCommunityMessages: PropTypes.func,
+  loading: PropTypes.bool,
+  messages: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    body: PropTypes.string,
+  })),
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Community));
diff --git a/src/components/Community/community.scss b/src/components/Community/community.scss
@@ -8,6 +8,28 @@ $form-color: #f3994a;
   flex-direction: row;
   padding-left: 60px;
 
+  .spinner-icon-container {
+    height: 80px;
+    left: 60%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 125px;
+  }
+
+  .spinner_overlay {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 2;
+    cursor: pointer;
+  }
+
   @media screen and (max-width: 700px) {
     padding-left: 0;
   }
@@ -29,6 +51,8 @@ $form-color: #f3994a;
   .main_sec {
     padding: 1rem;
     width: 90%;
+    margin-top: 50px;
+
     .input_section {
       textarea,
       #inp {
@@ -71,13 +95,19 @@ $form-color: #f3994a;
         padding: 1rem;
 
         .post_title {
-          margin-bottom: 2px;
           font-size: 20px;
+          display: inline;
+        }
+
+        .timeCreated {
+          display: inline-block;
+          margin-left: 5%;
+          color: $body-color;
         }
 
         .post_body {
           margin-top: 5px;
-          color: $body-color;
+          color: $border;
         }
 
         .poster_name {