feature(notification) user notification opt-in/opt-out feature

update edit profile component write tests [Finishes #166816075]
andela · Sep 3, 2019 · d511571 · d511571
1 parent 35585b8
commit d511571
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 5 deletions.
diff --git a/src/components/EditProfile/editProfile.scss b/src/components/EditProfile/editProfile.scss
@@ -35,3 +35,21 @@
     min-width: 268px;
   }
 }
+.edit-notification {
+  p {
+    font-size: 15px;
+  }
+}
+
+.activate {
+  color: #0000ff;
+  text-decoration: underline;
+}
+
+.edit-profile-container input[type='checkbox'] {
+  min-width: 0px;
+  margin: 0px;
+  height: 15px;
+  width: 95%;
+  font-size: 10px;
+}
diff --git a/src/components/EditProfile/index.jsx b/src/components/EditProfile/index.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable react/display-name */
@@ -11,6 +12,7 @@ import './editProfile.scss';
 
 const EditProfile = React.forwardRef((props, ref) => {
   const image = props.selectedImage ? props.selectedImage : props.image;
+  const isNotifyActive = props.isNotifyActive;
   return (
     <Modal
       show={props.showEditModal}
@@ -89,6 +91,18 @@ const EditProfile = React.forwardRef((props, ref) => {
               customClassName="edit-profile-text-area"
             />
           </div>
+          <div className="display-flex edit-notification">
+            <p>Turn your notification</p>
+            {isNotifyActive ? (
+              <div className="pl-2 activate" onClick={props.notifyHandler}>
+                <p>off</p>
+              </div>
+            ) : (
+              <div className="pl-2 activate" onClick={props.notifyHandler}>
+                <p>on</p>
+              </div>
+            )}
+          </div>
           <div>
             <Button customClassName="edit-profile-submit">Submit</Button>
           </div>
@@ -108,7 +122,9 @@ EditProfile.propTypes = {
   handleShow: PropTypes.func,
   updateHandler: PropTypes.func,
   imageHandler: PropTypes.func,
-  handleChange: PropTypes.func
+  handleChange: PropTypes.func,
+  isNotifyActive: PropTypes.bool,
+  notifyHandler: PropTypes.func
 };
 
 export default EditProfile;
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
@@ -165,6 +165,18 @@ button .navbar-light .navbar-toggler {
     font-size: 8px;
   }
 }
+.notification {
+  display: flex;
+  padding: 10px 14px;
+  .toggle-button {
+    width: 45px;
+    height: 16px;
+  }
+  button {
+    width: 23px;
+    height: 23px;
+  }
+}
 
 @media (max-width: 991px) {
   .m-all {

diff --git a/src/components/Input/index.jsx b/src/components/Input/index.jsx
@@ -9,6 +9,7 @@ const Input = ({
   handleBlur,
   handleChange,
   name,
+  type,
   ...customProps
 }) => {
   const themeColorClass = lightTheme
@@ -19,6 +20,7 @@ const Input = ({
       {...customProps}
       placeholder={placeholder}
       onChange={handleChange}
+      type={type}
       onBlur={handleBlur}
       className={`input ${themeColorClass} ${customClassName}`}
       name={name}
@@ -32,6 +34,8 @@ Input.propTypes = {
   name: PropTypes.string.isRequired,
   placeholder: PropTypes.string.isRequired,
   handleChange: PropTypes.func,
-  handleBlur: PropTypes.func
+  handleBlur: PropTypes.func,
+  attribute: PropTypes.string,
+  type: PropTypes.string
 };
 export default Input;
diff --git a/src/components/ProfileNavbar/index.jsx b/src/components/ProfileNavbar/index.jsx
@@ -26,9 +26,11 @@ export class ProfileNavbar extends Component {
       bio: {
         value: ''
       }
-    }
+    },
+    isNotifyActive: true
   };
   componentDidMount() {
+    this.setState({ isNotifyActive: this.props.auth.user.isNotifyActive });
     if (!this.props.auth.user.userName) {
       this.setState({
         showEditModal: true
@@ -101,6 +103,12 @@ export class ProfileNavbar extends Component {
     this.setState({ userData: updatedUserData });
   };
 
+  handleNotify = () => {
+    this.state.isNotifyActive === true
+      ? this.setState({ isNotifyActive: false })
+      : this.setState({ isNotifyActive: true });
+  };
+
   updateHandler = async e => {
     e.preventDefault();
     const formData = new FormData();
@@ -117,6 +125,7 @@ export class ProfileNavbar extends Component {
       'userName',
       this.state.userData.userName.value || this.props.userName
     );
+    formData.append('isNotifyActive', this.state.isNotifyActive);
     formData.append('bio', this.state.userData.bio.value || this.props.bio);
     formData.append('image', this.state.image);
 
@@ -205,6 +214,8 @@ export class ProfileNavbar extends Component {
           imageHandler={this.imageHandler}
           selectedImage={this.state.selectedImage}
           userNameRequired={!!this.props.auth.user.userName}
+          isNotifyActive={this.state.isNotifyActive}
+          notifyHandler={this.handleNotify}
           image={
             this.props.image ||
             'https://res.cloudinary.com/fxola/image/upload/v1562711912/ezkc4mj7pktwzqhmrbpt.png'
@@ -229,7 +240,8 @@ ProfileNavbar.propTypes = {
   image: PropTypes.string,
   selectedImage: PropTypes.string,
   userName: PropTypes.string,
-  bio: PropTypes.string
+  bio: PropTypes.string,
+  isNotifyActive: PropTypes.bool
 };
 export const mapStateToProps = state => {
   return {

diff --git a/src/components/ProfileNavbar/index.spec.js b/src/components/ProfileNavbar/index.spec.js
@@ -61,6 +61,7 @@ describe('<ProfileNavbar />', () => {
         </BrowserRouter>
       </Provider>
     );
+
 
     profileNav.find('.edit-first-name').simulate('change', {
       target: { name: 'firstName', value: 'Damilola' }
@@ -145,4 +146,64 @@ describe('<ProfileNavbar />', () => {
     };
     shallow(<ProfileNavbar {...prop} />);
   });
+
+  it('should render handleNotify method', () => {
+    const prop = {
+      lightTheme: false,
+      active: 'followers',
+      firstName: 'Damilola',
+      lastName: 'Adekoya',
+      auth: {
+        user: {
+          firstName: 'damilola',
+          userName: ''
+        }
+      }
+    };
+    const component = shallow(<ProfileNavbar {...prop} />);
+    const instance = component.instance();
+    jest.spyOn(instance, 'handleNotify');
+    instance.handleNotify('new');
+    expect(instance.handleNotify).toHaveBeenCalled();
+  });
+
+  it('should render handleClose method', () => {
+    const prop = {
+      lightTheme: false,
+      active: 'followers',
+      firstName: 'Damilola',
+      lastName: 'Adekoya',
+      auth: {
+        user: {
+          firstName: 'damilola',
+          userName: ''
+        }
+      }
+    };
+    const component = shallow(<ProfileNavbar {...prop} />);
+    const instance = component.instance();
+    jest.spyOn(instance, 'handleClose');
+    instance.handleClose('new');
+    expect(instance.handleClose).toHaveBeenCalled();
+  });
+
+  it('should render handleOpen method', () => {
+    const prop = {
+      lightTheme: false,
+      active: 'followers',
+      firstName: 'Damilola',
+      lastName: 'Adekoya',
+      auth: {
+        user: {
+          firstName: 'damilola',
+          userName: ''
+        }
+      }
+    };
+    const component = shallow(<ProfileNavbar {...prop} />);
+    const instance = component.instance();
+    jest.spyOn(instance, 'handleShow');
+    instance.handleShow('new');
+    expect(instance.handleShow).toHaveBeenCalled();
+  });
 });
diff --git a/src/views/ReadArticlePage/followAuthor.spec.js b/src/views/ReadArticlePage/followAuthor.spec.js
@@ -5,6 +5,7 @@ import { shallow } from 'enzyme';
 import readArticleReducer from './readArticle.reducer';
 import loginReducer from '../LoginPage/login.reducer';
 import configureStore from 'redux-mock-store';
+
 import thunk from 'redux-thunk';
 import {
   followAuthorRequest,

diff --git a/src/views/ReadArticlePage/index.jsx b/src/views/ReadArticlePage/index.jsx
@@ -243,7 +243,10 @@ export class ReadArticle extends Component {
           </div>
           <div className="row create-comment-section">
             <div className="col-sm-12 col-md-12 create-comment-container">
-              <CreateComment {...this.props.match} />
+              <CreateComment
+                {...this.props.match}
+                token={this.props.auth.user.token}
+              />
             </div>
           </div>
           <ReportModal