feat(follow and unfollow users) Users should be able to follow each o…

…ther [#167484558]

.eslintrc.json

@@ -34,7 +34,8 @@
     "arrow-body-style": "warn",
     "arrow-parens": "off",
     "no-console": "off",
-    "comma-dangle": "off"
+    "comma-dangle": "off",
+    "no-shadow": "off"
   },
   "root": true
 }

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@ckeditor/ckeditor5-build-classic": "^12.4.0",
     "@ckeditor/ckeditor5-editor-classic": "^12.1.4",
+    "@ckeditor/ckeditor5-build-inline": "^12.4.0",
     "@ckeditor/ckeditor5-react": "^1.1.3",
     "axios": "^0.19.0",
     "ckeditor-cloudinary-uploader-adapter": "^1.1.3",
@@ -26,6 +27,7 @@
     "jest-localstorage-mock": "^2.4.0",
     "jsonwebtoken": "^8.5.1",
     "jwt-decode": "^2.2.0",
+    "moment": "^2.24.0",
     "node-sass": "^4.12.0",
     "querystring": "^0.2.0",
     "lodash": "^4.17.15",

src/app/App.js

@@ -5,15 +5,17 @@ import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import './App.scss';
 import GetAllArticles from '../feature/articles/getArticles/GetAllArticlesComponent';
+import GetSingleArticle from '../feature/articles/getSingleArticle/GetSingleArticleComponent';
 import CreateArticle from '../feature/articles/createArticle/CreateArticleComponent';
 import ProtectedRoutes from '../feature/protectedRoutes/ProtectedRoutesComponent';
 import Nav from './routes/Nav';
 import SignUp from '../feature/auth/signup/SignUpComponent';
 import Login from '../feature/auth/login/LoginComponent';
 import ForgotPassword from '../feature/Reset Password/forgot password/ForgotPasswordComponent';
 import ResetPassword from '../feature/Reset Password/reset password/ResetPasswordComponent';
-import SingleArticle from '../feature/article/getSingleArticle/ReadSingleArticleComponent';
-import FollowComponent from '../feature/followUnfollow/FollowUnfollow';
+// import SingleArticle from '../feature/article/getSingleArticle/ReadSingleArticleComponent';
+import FollowUnfollowComponent from '../feature/followUnfollow/FollowUnfollowComponent';
+// import SingleArticle from '../feature/article/getSingleArticle/ReadSingleArticleComponent';
 
 toast.configure();
 function App() {
@@ -31,12 +33,15 @@ function App() {
             component={ResetPassword}
           />
           <Route exact path="/" component={GetAllArticles} />
+          <ProtectedRoutes path="/Create" component={CreateArticle} />
           <Route path="/login" component={Login} />
           <Route path="/Signup" component={SignUp} />
-          <Route path="/articles/:slug" component={SingleArticle} />
+          {/* <Route path="/articles/:slug" component={SingleArticle} /> */}
           <ProtectedRoutes path="/Create" component={CreateArticle} />
-          <Route path="/profiles/:userName/follow" component={FollowComponent} />
-          <Route path="/profiles/:userName/unfollow" component={FollowComponent} />
+          <Route path="/profiles/:userName/follow" component={FollowUnfollowComponent} />
+          <Route path="/profiles/:userName/unfollow" component={FollowUnfollowComponent} />
+          {/* // <Route path="/articles/:slug" component={SingleArticle} /> */}
+          <Route path="/articles/:slug" component={GetSingleArticle} />
         </Switch>
       </BrowserRouter>
     </div>

src/app/config/ckeditorConfig.js

@@ -48,7 +48,7 @@ const editorConfigs = {
     'undo',
     'redo'
   ],
-  blockToolbar: ['heading', 'blockQuote', 'imageUpload'],
+  blockToolbar: ['heading', 'blockQuote', 'imageUpload', 'ImageResize', 'ImageStyle'],
   removePlugins: ['List', 'Table', 'TableToolbar', 'MediaEmbed'],
   extraPlugins: [UploadAdapterPlugin]
 };

src/app/reducers/index.js

@@ -8,6 +8,7 @@ import article from '../../feature/articles/createArticle/createArticleReducer';
 import getAllArticles from '../../feature/articles/getArticles/GetAllArticleReducer';
 import followReducer from '../../feature/followUnfollow/followUnfollowReducer';
 
+import getSingleArticle from '../../feature/articles/getSingleArticle/GetSingleArticleReducer';
 
 export default combineReducers({
   login: loginReducer,
@@ -17,5 +18,6 @@ export default combineReducers({
   resetPassword: resetPasswordReducer,
   crateArticle: article,
   getAllArticles,
-  followAuthor: followReducer
+  followAuthor: followReducer,
+  getSingleArticle
 });

src/feature/articles/__tests__/CreateArticleAction.test.js

@@ -42,6 +42,23 @@ describe('Create Article success', () => {
       expect(dispatchedTypes).toEqual(expectedAction);
     });
   });
+
+  test('login testing error', () => {
+    const expected = {
+      status: 400,
+      error: 'SERVER ERROR!  Please contact the administartor'
+    };
+    moxios.stubRequest(/.*/, {
+      response: expected
+    });
+    const mockArticles = {
+      description: 'I knew that would happen soon but i kept it inside',
+      body: 'I knew that would happen soon but i kept it inside'
+    };
+    return store.dispatch(createArticle(mockArticles)).then(() => {
+      expect(store.getActions().length).toEqual(1);
+    });
+  });
 });
 
 describe('Create article fail', () => {
@@ -84,10 +101,20 @@ describe('Create article fail', () => {
       request.respondWith({
         status: 400,
         response: {
-          error: 'SERVER ERROR!  Please contact the administartor'
+          error: 'SERVER ERROR!  Please contact the administartor',
+          data: {
+            error: 'title is requiredB'
+          }
         }
       });
     });
+    const expected = {
+      status: 400,
+      error: 'SERVER ERROR!  Please contact the administartor'
+    };
+    moxios.stubRequest('/.*', {
+      response: expected
+    });
     const mockArticles = {
       title: 'So I the last one standing',
       description: 'I knew that would happen soon but i kept it inside',

src/feature/articles/__tests__/CreateArticleComponent.test.js

@@ -5,8 +5,6 @@ import '@ckeditor/ckeditor5-react';
 import '@ckeditor/ckeditor5-build-classic';
 import { CreateArticle } from '../createArticle/CreateArticleComponent';
 
-jest.mock('@ckeditor/ckeditor5-react');
-jest.mock('@ckeditor/ckeditor5-build-classic');
 const renderCreateArtilce = args => {
   const initialProps = {
     article: {},

src/feature/articles/constants.js

@@ -2,3 +2,9 @@ export const CREATE_ARTICLE_SUCCESS = 'CREATE_ARTICLE_SUCCESS';
 export const CREATE_ARTICLE_FAIL = 'CREATE_ARTICLE_FAIL';
 export const GET_ARTICLES_SUCCESS = 'GET_ARTICLES_SUCCESS';
 export const GET_ARTICLES_FAIL = 'GET_ARTICLES_FAIL';
+export const GET_SINGLE_ARTICLE_SUCCESS = 'GET_SINGLE_ARTICLE_SUCCESS';
+export const GET_SINGLE_ARTICLE_FAIL = 'GET_SINGLE_ARTICLE_FAIL';
+export const LIKE_ARTICLE_SUCCESS = 'GET_SINGLE_ARTICLE_SUCCESS';
+export const DISLIKE_ARTICLE_FAIL = 'GET_SINGLE_ARTICLE_FAIL';
+export const LIKE_ARTICLE_FAIL = 'GET_SINGLE_ARTICLE_SUCCESS';
+export const DISLIKE_ARTICLE_SUCCESS = 'GET_SINGLE_ARTICLE_FAIL';

src/feature/articles/createArticle/CreateArticleComponent.js

@@ -25,24 +25,23 @@ export class CreateArticle extends Component {
   };
 
   handleSubmit = event => {
-    const {
-      title, description, tags, category, body
-    } = this.state;
+    const { title, description, tags, category, body } = this.state;
     const { createArticle } = this.props;
     event.preventDefault();
-    createArticle({
-      title,
-      description,
-      tags,
-      category,
-      body,
-    }, this.props);
+    createArticle(
+      {
+        title,
+        description,
+        tags,
+        category,
+        body
+      },
+      this.props
+    );
   };
 
   render() {
-    const {
-      title, description, tags, category, body
-    } = this.state;
+    const { title, description, tags, category, body } = this.state;
     return (
       <div className="mainDiv">
         <div className="input input--form">

src/feature/articles/createArticle/createArticle.scss

@@ -11,13 +11,18 @@ $btn-font-color: #4887c2;
   border: none;
   font-size: 16px;
   padding: 5px;
-  width: 100%;
   height: 50px;
   margin-bottom: 3px;
+  width: 99%;
   &:focus {
     outline-width: thin;
   }
 }
+
+div .ck-editor__editable {
+  min-height: 250px;
+}
+
 div .ck-editor__editable {
   min-height: 250px;
 }
@@ -42,6 +47,8 @@ div .ck-editor__editable {
   .mainDiv {
     margin: 0.5rem auto;
   }
+}
+@media screen and (max-width: 576px) {
   .btn {
     &__create {
       margin-left: 30%;

src/feature/articles/createArticle/createArticleAction.js

@@ -11,7 +11,6 @@ const createArticle = (
   props
 ) => async dispatch => {
   const token = localStorage.getItem('token');
-
   const axiosConfig = {
     headers: {
       'Content-Type': 'application/json',

src/feature/articles/createArticle/createArticleReducer.js

@@ -1,6 +1,5 @@
 import { CREATE_ARTICLE_SUCCESS, CREATE_ARTICLE_FAIL } from '../constants';
 
-
 export const initialState = {
   article: {}
 };

src/feature/articles/getArticles/GetAllArticles.scss

@@ -52,8 +52,8 @@
       width: 30%;
     }
 
-    &__image-box {
-      width: 60%;
+    img &__image-box {
+      width: 30%;
     }
 
     &__content {
@@ -98,6 +98,12 @@
           font-weight: bold;
         }
       }
+      hr {
+        margin-top: 2em;
+        width: 95%;
+        border: 0.5px solid #000000;
+        margin-bottom: 0;
+      }
     }
   }
 }