Merge 6f62fa3 into c9eb912

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@ckeditor/ckeditor5-build-classic": "^12.4.0",
     "@ckeditor/ckeditor5-editor-classic": "^12.1.4",
+    "@ckeditor/ckeditor5-image": "^14.0.0",
     "@ckeditor/ckeditor5-react": "^1.1.3",
     "axios": "^0.19.0",
     "ckeditor-cloudinary-uploader-adapter": "^1.1.3",

src/app/config/ckeditorConfig.js

@@ -34,7 +34,8 @@ class UploadAdapter {
 }
 
 function UploadAdapterPlugin(editor) {
-  editor.plugins.get('FileRepository').createUploadAdapter = loader => new UploadAdapter(loader);
+  editor.plugins.get('FileRepository').createUploadAdapter = loader =>
+    new UploadAdapter(loader);
 }
 
 const editorConfigs = {
@@ -46,10 +47,12 @@ const editorConfigs = {
     'blockQuote',
     'imageUpload',
     'undo',
-    'redo'
+    'redo',
+    'bulletedList',
+    'numberedList'
   ],
-  blockToolbar: ['heading', 'blockQuote', 'imageUpload'],
-  removePlugins: ['List', 'Table', 'TableToolbar', 'MediaEmbed'],
+  blockToolbar: ['heading', 'blockQuote', 'imageUpload', 'ImageStyle'],
+  removePlugins: ['Table', 'TableToolbar', 'MediaEmbed'],
   extraPlugins: [UploadAdapterPlugin]
 };
 

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

@@ -4,6 +4,7 @@ import { shallow } from 'enzyme';
 import '@ckeditor/ckeditor5-react';
 import '@ckeditor/ckeditor5-build-classic';
 import { CreateArticle } from '../createArticle/CreateArticleComponent';
+import dummyData from '../../../__mocks__/mockData';
 
 jest.mock('@ckeditor/ckeditor5-react');
 jest.mock('@ckeditor/ckeditor5-build-classic');
@@ -78,4 +79,16 @@ describe('On submit tests', () => {
     const button = wrapper.find('button');
     button.simulate('click', { preventDefault: jest.fn() });
   });
+  it('should test createArticle', () => {
+    const myFun = jest.fn().mockImplementation(() => undefined);
+    const instance = wrapper.instance();
+    const button = wrapper.find('button');
+    wrapper.instance().handleSubmit = myFun;
+    button.simulate('click');
+    const callAction = instance.handleSubmit(
+      dummyData.returnedArticleWithImage
+    );
+    expect(callAction).toBe(undefined);
+    expect(myFun).toHaveBeenCalledTimes(1);
+  });
 });

src/feature/articles/createArticle/CreateArticleComponent.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-shadow */
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { toast } from 'react-toastify';
 import CKEditor from '@ckeditor/ckeditor5-react';
 import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
 import createArticle from './createArticleAction';
@@ -25,24 +26,31 @@ export class CreateArticle extends Component {
   };
 
   handleSubmit = event => {
-    const {
-      title, description, tags, category, body
-    } = this.state;
+    const { title, description, tags, category, body } = this.state;
+    if (!title || !description || !body) {
+      return toast.error(
+        'Please fill in Title, Description and Body  to create an article',
+        {
+          position: toast.POSITION.TOP_CENTER
+        }
+      );
+    }
     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

@@ -15,26 +15,46 @@ $btn-font-color: #4887c2;
   height: 50px;
   margin-bottom: 3px;
   &:focus {
+    outline: solid $btn-font-color;
     outline-width: thin;
   }
+  &__body {
+    height: 100%;
+  }
 }
 div .ck-editor__editable {
   min-height: 250px;
 }
+.ck-content .image {
+  max-width: 50%;
+  height: 10% !important;
+  &:focus {
+    figcaption {
+      display: inline;
+      height: 80% !important;
+    }
+  }
+  .ck-placeholder {
+    display: none;
+    height: 80% !important;
+  }
+}
+
 .btn {
   border-radius: 20px;
   &:focus {
     outline: none;
   }
   &__create {
-    margin-top: 2em;
+    margin-top: 1em;
     margin-left: 89%;
     height: 2em;
     width: 6em;
     font-size: 18px;
     background-color: $btn-background-color;
     color: $btn-font-color;
     border-color: $btn-font-color;
+    margin-bottom: 2em;
   }
 }
 

src/feature/articles/createArticle/createArticleAction.js

@@ -18,13 +18,16 @@ const createArticle = (
       Authorization: token
     }
   };
-  const formData = {
+  let formData = {};
+  formData.tags = tags || '';
+  formData.category = category || '';
+
+  formData = {
     title,
     description,
-    tags,
-    category,
     body
   };
+
   try {
     const res = await axios.post(
       `${BACKEND_URL}/articles/`,

src/feature/articles/getArticles/GetAllArticles.scss

@@ -3,6 +3,13 @@
     text-decoration: none;
   }
 }
+.loader {
+  font-weight: bold;
+  font-size: 25px;
+  text-align: center;
+  position: absolute;
+  margin: 30% 0 0 30% !important;
+}
 .main--banner {
   position: absolute;
   left: 0;
@@ -148,6 +155,13 @@
       }
     }
   }
+  .article__error {
+    margin-left: -3em;
+    font-size: 12px;
+  }
+  .loader {
+    margin: 80% 0 0 30% !important;
+  }
 }
 
 @media (min-width: 768px) and (max-width: 1024px) {
@@ -170,6 +184,15 @@
       }
     }
   }
+  .article__error {
+    margin-left: 1em;
+    font-size: 20px;
+  }
+  .loader {
+    font-size: 20px;
+    font-weight: bold;
+    margin: 80% 0 0 30% !important;
+  }
 }
 @media (min-width: 1025px) {
   .main--banner {

src/feature/articles/getArticles/GetAllArticlesAction.js

@@ -6,10 +6,12 @@ import { BACKEND_URL } from '../../../app/common/config/appConfig';
 const getAllArticles = () => async dispatch => {
   try {
     const res = await axios.get(`${BACKEND_URL}/articles/`);
+
     dispatch({
       type: GET_ARTICLES_SUCCESS,
       payload: res.data
     });
+    return true;
   } catch (err) {
     const error = (await err.response)
       ? err.response.data.error