Merge 63de4da into 13b02bc

andela · Feb 14, 2019 · 9d89be1 · 9d89be1
2 parents 13b02bc + 63de4da
commit 9d89be1
Show file tree

Hide file tree

Showing 10 changed files with 378 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -45,6 +45,7 @@
     "react-dom": "^16.7.0",
     "react-redux": "^6.0.0",
     "react-router-dom": "^4.3.1",
+    "react-tinymce": "^0.7.0",
     "react-toastify": "^4.5.2",
     "redux": "^4.0.1",
     "redux-mock-store": "^1.5.3",

diff --git a/public/index.html b/public/index.html
@@ -27,6 +27,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>LearnGround</title>
   </head>
+
   <body>
     <!--Import jQuery before materialize.js -->
     <script
@@ -46,6 +47,9 @@
         const instances = M.Modal.init(elems);
       });
     </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/tinymce.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/jquery.tinymce.min.js"></script>
     <div id="app"></div>
   </body>
 </html>
diff --git a/src/app/App.jsx b/src/app/App.jsx
@@ -3,7 +3,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import { Home } from './home';
 import { Signup } from './signup';
 import { Login } from './login';
-import Article from './article';
+import { Article, CreateArticle } from './article';
 import Footer from './footer';
 import Navbar from './navBar/NavbarComponent';
 import { Subject } from './subject';
@@ -20,6 +20,7 @@ const App = () => (
         <Route path="/login" component={Login} exact />
         <Route path="/subject" component={Subject} exact />
         <Route path="/articles" component={Article} exact />
+        <Route path="/create-article" component={CreateArticle} exact />
       </Switch>
       <Footer />
     </Fragment>

diff --git a/src/app/article/CreateArticleComponent.jsx b/src/app/article/CreateArticleComponent.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import Editor from './EditorComponent';
+import './create-article.scss';
+
+const CreateArticleComponent = () => {
+  return (
+    <div className="create-wrapper">
+      <div className="create-container">
+        <div className="content-container">
+          <div className="create-author-details">
+            <div className="author-photo" />
+            <div className="create-author-name">
+              <div className="create-auth-name">Tom Henkins</div>
+            </div>
+          </div>
+          <div className="create-form">
+            <form className="article-form">
+              <input type="text" placeholder="Title" />
+              <select
+                name="category"
+                defaultValue=""
+                className="browser-default"
+                required
+              >
+                <option value="" disabled>
+                  Select Category
+                </option>
+                <option value="mathematics">Mathematics</option>
+                <option value="arts">Arts</option>
+                <option value="science">Science</option>
+                <option value="engineering">Engineering</option>
+                <option value="technology">Technology</option>
+              </select>
+              <input type="text" placeholder="Description" />
+              <div className="create-article-text">
+                <Editor />
+              </div>
+              <div className="create-article-button">
+                <button type="submit">POST</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateArticleComponent;
diff --git a/src/app/article/CreateArticleContainer.js b/src/app/article/CreateArticleContainer.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import CreateArticleComponent from './CreateArticleComponent';
+
+const CreateArticleContainer = () => {
+  return <CreateArticleComponent />;
+};
+
+export default CreateArticleContainer;
diff --git a/src/app/article/EditorComponent.jsx b/src/app/article/EditorComponent.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import TinyMCE from 'react-tinymce';
+
+const Editor = () => {
+  return (
+    <TinyMCE
+      placeholder="<p>This is the initial content of the editor</p>"
+      config={{
+        plugins: 'autolink link image lists print preview',
+        toolbar: 'undo redo | bold italic | alignleft aligncenter alignright',
+        width: '100%',
+        height: '30%',
+      }}
+    />
+  );
+};
+
+export default Editor;
diff --git a/src/app/article/__snapshots__/article.test.js.snap b/src/app/article/__snapshots__/article.test.js.snap
@@ -306,3 +306,119 @@ exports[`Article Container should render the Article Page 1`] = `
   </ArticleComponent>
 </ArticleContainer>
 `;
+
+exports[`CreateArticle should render the CreateArticleComponent 1`] = `
+<div
+  className="create-wrapper"
+>
+  <div
+    className="create-container"
+  >
+    <div
+      className="content-container"
+    >
+      <div
+        className="create-author-details"
+      >
+        <div
+          className="author-photo"
+        />
+        <div
+          className="create-author-name"
+        >
+          <div
+            className="create-auth-name"
+          >
+            Tom Henkins
+          </div>
+        </div>
+      </div>
+      <div
+        className="create-form"
+      >
+        <form
+          className="article-form"
+        >
+          <input
+            placeholder="Title"
+            type="text"
+          />
+          <select
+            className="browser-default"
+            defaultValue=""
+            name="category"
+            required={true}
+          >
+            <option
+              disabled={true}
+              value=""
+            >
+              Select Category
+            </option>
+            <option
+              value="mathematics"
+            >
+              Mathematics
+            </option>
+            <option
+              value="arts"
+            >
+              Arts
+            </option>
+            <option
+              value="science"
+            >
+              Science
+            </option>
+            <option
+              value="engineering"
+            >
+              Engineering
+            </option>
+            <option
+              value="technology"
+            >
+              Technology
+            </option>
+          </select>
+          <input
+            placeholder="Description"
+            type="text"
+          />
+          <div
+            className="create-article-text"
+          >
+            <Editor />
+          </div>
+          <div
+            className="create-article-button"
+          >
+            <button
+              type="submit"
+            >
+              POST
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CreateArticle should render the CreateArticleContainer 1`] = `<CreateArticleComponent />`;
+
+exports[`CreateArticle should render the EditorComponent 1`] = `
+<TinyMCE
+  config={
+    Object {
+      "height": "30%",
+      "plugins": "autolink link image lists print preview",
+      "toolbar": "undo redo | bold italic | alignleft aligncenter alignright",
+      "width": "100%",
+    }
+  }
+  content=""
+  placeholder="<p>This is the initial content of the editor</p>"
+/>
+`;
diff --git a/src/app/article/article.test.js b/src/app/article/article.test.js
@@ -1,6 +1,9 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import ArticleContainer from './ArticleContainer';
+import CreateArticleContainer from './CreateArticleContainer';
+import CreateArticleComponent from './CreateArticleComponent';
+import EditorComponent from './EditorComponent';
 
 describe('Article Container', () => {
   it('should render the Article Page', () => {
@@ -9,3 +12,23 @@ describe('Article Container', () => {
     expect(component).toMatchSnapshot();
   });
 });
+
+describe('CreateArticle', () => {
+  it('should render the CreateArticleContainer', () => {
+    const component = shallow(<CreateArticleContainer />);
+    expect(component.exists()).toBe(true);
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should render the CreateArticleComponent', () => {
+    const component = shallow(<CreateArticleComponent />);
+    expect(component.exists()).toBe(true);
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should render the EditorComponent', () => {
+    const component = shallow(<EditorComponent />);
+    expect(component.exists()).toBe(true);
+    expect(component).toMatchSnapshot();
+  });
+});