Merge branch 'develop' into ft-likedislike-article-reducers-#162414128

andela · Mar 5, 2019 · b1eb739 · b1eb739
2 parents 35c22a6 + 6d42b32
commit b1eb739
Show file tree

Hide file tree

Showing 11 changed files with 249 additions and 96 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,18 +49,20 @@
     "@babel/runtime": "^7.3.1",
     "autoprefixer": "^9.4.7",
     "axios": "^0.18.0",
+    "cloudinary-react": "^1.1.0",
     "dotenv": "^6.2.0",
     "dotenv-webpack": "^1.7.0",
-    "cloudinary-react": "^1.1.0",
     "enzyme": "^3.8.0",
     "express": "^4.16.4",
+    "history": "^4.7.2",
     "jwt-decode": "^2.2.0",
     "medium-editor": "^5.23.3",
     "normalize.css": "^8.0.1",
     "postcss-loader": "^3.0.0",
-    "prop-types": "^15.6.2",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
+    "prettier": "^1.16.4",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.3",
+    "react-dom": "^16.8.3",
     "react-medium-editor": "^1.8.1",
     "react-redux": "^6.0.0",
     "react-responsive-carousel": "^3.1.47",

diff --git a/src/components/FormContainer/FormContainer.scss b/src/components/FormContainer/FormContainer.scss
@@ -1,13 +1,4 @@
-@import "../../styles/partials/colors";
-@import "../../styles/partials/fonts";
-
-body {
-  font: {
-    family: roboto;
-    weight: 100;
-  }
-
-}
+@import "../../styles/partials/styles";
 
 .ui {
   &.modal {
@@ -86,4 +77,24 @@ h5.baseText {
   :hover {
     color: $primarycolor
   }
+}
+@media (min-width: 768px) and (max-width: 767px) {
+  .ui {
+    &.modal {
+
+      &.authModal {
+        width:80%;
+      }
+    }
+  }   
+}
+@media (max-width: 340px) {
+  .ui {
+    &.modal {
+
+      &.authModal {
+        width:100%;
+      }
+    }
+  }   
 }
diff --git a/src/components/FormContainer/FormContainer.test.js b/src/components/FormContainer/FormContainer.test.js
@@ -2,9 +2,14 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import FormContainer from '.';
 
-describe('SignIn Form', () => {
+describe('Form Container component', () => {
   it('should matches the snapshot', () => {
     const wrapper = shallow(<FormContainer />);
     expect(wrapper).toMatchSnapshot();
   });
+  it.only('should simulate on click', () => {
+    const wrapper = shallow(<FormContainer />);
+    wrapper.instance().handleClose();
+    expect(wrapper).toBeDefined();
+  });
 });
diff --git a/src/components/FormContainer/__snapshots__/FormContainer.test.js.snap b/src/components/FormContainer/__snapshots__/FormContainer.test.js.snap
@@ -1,44 +1,47 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SignIn Form should matches the snapshot 1`] = `
-<Modal
-  centered={true}
-  className="authModal"
-  closeOnDimmerClick={true}
-  closeOnDocumentClick={false}
-  dimmer={true}
-  eventPool="Modal"
-  onClose={[Function]}
-  open={true}
-  size="mini"
->
-  <ModalContent>
-    <h2
-      className="header headerTitle"
-    >
-      sign in
-    </h2>
-    <hr
-      className="headerBotton"
-    />
-    <ModalDescription>
-      <ModalDivider
-        text="or sign in with"
-      />
-      <SocialIcons />
-      <h5
-        className="baseText"
+exports[`Form Container component should matches the snapshot 1`] = `
+<Fragment>
+  <RedirectLoader />
+  <Modal
+    centered={true}
+    className="authModal"
+    closeOnDimmerClick={true}
+    closeOnDocumentClick={false}
+    dimmer={true}
+    eventPool="Modal"
+    onClose={[Function]}
+    open={true}
+    size="mini"
+  >
+    <ModalContent>
+      <h2
+        className="header headerTitle"
       >
-        Create an account
-         
-        <Link
-          replace={false}
-          to="/signin"
+        sign in
+      </h2>
+      <hr
+        className="headerBotton"
+      />
+      <ModalDescription>
+        <ModalDivider
+          text="or sign in with"
+        />
+        <SocialIcons />
+        <h5
+          className="baseText"
         >
-          sign up
-        </Link>
-      </h5>
-    </ModalDescription>
-  </ModalContent>
-</Modal>
+          Create an account
+           
+          <Link
+            replace={false}
+            to="/signin"
+          >
+            sign up
+          </Link>
+        </h5>
+      </ModalDescription>
+    </ModalContent>
+  </Modal>
+</Fragment>
 `;
diff --git a/src/components/FormContainer/index.jsx b/src/components/FormContainer/index.jsx
@@ -1,11 +1,16 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import createHistory from 'history/createBrowserHistory';
 import { Link } from 'react-router-dom';
 import { Modal } from 'semantic-ui-react';
 import SocialIcons from '../SocialComponent';
 import ModalDivider from '../ModalDivider';
+import RedirectLoader from '../Loader';
 import './FormContainer.scss';
 
+const history = createHistory({ forceRefresh: true });
+
+
 class ModalComponent extends React.Component {
   constructor(props) {
     super(props);
@@ -17,32 +22,35 @@ class ModalComponent extends React.Component {
 
   handleClose() {
     this.setState({ open: false });
+    history.push(history.location.pathname);
   }
 
   render() {
-    const {
-      title, baseText, link, formLink, children
-    } = this.props;
+    const { title, baseText, link, formLink, children } = this.props;
     const { open } = this.state;
     return (
-      <Modal size="mini" open={open} onClose={this.handleClose} className="authModal">
-        <Modal.Content>
-          <h2 className="header headerTitle">{title}</h2>
-          <hr className="headerBotton" />
-          <Modal.Description>
-            <Fragment>{children}</Fragment>
-            <ModalDivider text={`or ${title} with`} />
-            <SocialIcons />
-            <h5 className="baseText">
-              {baseText}
+      <Fragment>
+        <RedirectLoader />
+        <Modal size="mini" open={open} onClose={this.handleClose} className="authModal">
+          <Modal.Content>
+            <h2 className="header headerTitle">{title}</h2>
+            <hr className="headerBotton" />
+            <Modal.Description>
+              <Fragment>{children}</Fragment>
+              <ModalDivider text={`or ${title} with`} />
+              <SocialIcons />
+              <h5 className="baseText">
+                {baseText}
               &nbsp;
-              <Link to={`/${formLink}`}>
-                {link}
-              </Link>
-            </h5>
-          </Modal.Description>
-        </Modal.Content>
-      </Modal>
+                <Link to={`/${formLink}`}>
+                  {link}
+                </Link>
+              </h5>
+            </Modal.Description>
+          </Modal.Content>
+        </Modal>
+      </Fragment>
+
     );
   }
 }

diff --git a/src/components/ShareArticle/ShareArticle.test.js b/src/components/ShareArticle/ShareArticle.test.js
@@ -4,7 +4,8 @@ import ShareArticle from '.';
 
 describe('Share Article Component', () => {
   it('should rendered share Article Icons without crashing', () => {
-    const wrapper = shallow(<ShareArticle />);
+    const wrapper = shallow(<ShareArticle
+    title="news" />);
     expect(wrapper).toMatchSnapshot();
   });
 });
diff --git a/src/components/ShareArticle/__snapshots__/ShareArticle.test.js.snap b/src/components/ShareArticle/__snapshots__/ShareArticle.test.js.snap
@@ -24,7 +24,7 @@ exports[`Share Article Component should rendered share Article Icons without cra
         "ah-Krypton",
       ]
     }
-    title=" "
+    title="news"
     url="https://krypton-ah-fe-stage.herokuapp.com/article/ "
     windowHeight={400}
     windowWidth={550}
@@ -39,7 +39,7 @@ exports[`Share Article Component should rendered share Article Icons without cra
   </CreatedButton>
   <CreatedButton
     description=" "
-    title=" "
+    title="news"
     url="https://krypton-ah-fe-stage.herokuapp.com/article/ "
     windowHeight={600}
     windowWidth={750}
@@ -54,7 +54,7 @@ exports[`Share Article Component should rendered share Article Icons without cra
   </CreatedButton>
   <CreatedButton
     separator=" "
-    title=" "
+    title="news"
     url="https://krypton-ah-fe-stage.herokuapp.com/article/ "
     windowHeight={400}
     windowWidth={550}
@@ -72,7 +72,7 @@ exports[`Share Article Component should rendered share Article Icons without cra
 https://krypton-ah-fe-stage.herokuapp.com/article/ "
     onClick={[Function]}
     openWindow={false}
-    subject=" "
+    subject="news"
     url="https://krypton-ah-fe-stage.herokuapp.com/article/ "
   >
     <Icon