Merge cb59b5f into e657b9e

src/app/App.js

@@ -15,6 +15,7 @@ import UpdateProfile from '../feature/profile/update_profile/UpdateProfileCompon
 import ForgotPassword from '../feature/Reset Password/forgot password/ForgotPasswordComponent';
 import ResetPassword from '../feature/Reset Password/reset password/ResetPasswordComponent';
 import UpdateArticle from '../feature/articles/updateArticle/UpdateArticleComponent';
+import Search from '../feature/articles/SearchArticle/SearchComponent';
 import '../../node_modules/font-awesome/css/font-awesome.min.css';
 
 toast.configure();
@@ -41,6 +42,7 @@ function App() {
             <Route exact path="/articles/:slug" component={GetSingleArticle} />
             <ProtectedRoutes path="/create" component={CreateArticle} />
             <ProtectedRoutes path="/article/:slug/update" component={UpdateArticle} />
+            <Route path="/search" component={Search} />
           </section>
         </Switch>
       </BrowserRouter>

src/app/reducers/index.js

@@ -12,6 +12,7 @@ import commentReducer from '../../feature/comment/CommentReducer';
 import socialReducer from '../../feature/auth/socialLogin/SocialReducer';
 import bookmarkReducer from '../../feature/bookmark/bookmarkReducer';
 import getSingleArticle from '../../feature/articles/getSingleArticle/GetSingleArticleReducer';
+import searchResult from '../../feature/articles/SearchArticle/SearchReducer';
 
 export default combineReducers({
   login: loginReducer,
@@ -26,5 +27,6 @@ export default combineReducers({
   getSingleArticle,
   social: socialReducer,
   comment: commentReducer,
-  bookmarking: bookmarkReducer
+  bookmarking: bookmarkReducer,
+  searchResult
 });

src/app/routes/NavBar.js

@@ -93,7 +93,9 @@ export class Navbar extends Component {
           <div className="right">
             <ul>
               <li>
-                <Link to="/">Home</Link>
+                <Link to="/search">
+                  <i className="fa fa-search" title="search" />
+                </Link>
               </li>
               <li>
                 <Link to="/login">Login</Link>
@@ -107,7 +109,9 @@ export class Navbar extends Component {
           <div className="right" id="right">
             <ul>
               <li>
-                <Link to="/">Home</Link>
+                <Link to="/search">
+                  <i className="fa fa-search" />
+                </Link>
               </li>
               <div className="notification-dropdown">
                 <li className="img-list-item notification-container">

src/feature/articles/SearchArticle/Search.scss

@@ -0,0 +1,101 @@
+.result-container {
+  width: 60%;
+  margin: 30px auto;
+
+  .result-link {
+    text-decoration: none;
+  }
+
+  .result-article {
+    display: flex;
+    width: 100%;
+    height: 200px;
+    margin-bottom: 20px;
+
+    &__image {
+      width: 30%;
+
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &__content {
+      width: 70%;
+
+      > h1 {
+        font-size: 20px;
+        margin: 0 0 10px 20px;
+        padding: 0;
+        color: black;
+        font-weight: bold;
+      }
+      > p {
+        margin: 0 0 0 20px;
+        color: #5c5a5a;
+      }
+
+      .description {
+        margin-bottom: 20px;
+        max-height: 42px;
+        overflow: hidden;
+      }
+
+      .time {
+        > span {
+          margin-right: 10px;
+          font-weight: bold;
+        }
+      }
+
+      .author {
+        margin-top: 15px;
+        > span {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+  .article-not-found {
+    text-align: center;
+    > p {
+      font-weight: bold;
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 1024px) {
+  .result-container {
+    width: 85%;
+  }
+}
+@media (max-width: 700px) {
+  .result-container {
+    width: 90%;
+    .result-article {
+      display: flex;
+      flex-wrap: wrap;
+      height: 300px;
+      margin-bottom: 30px;
+      border-bottom: 1px solid #888888;
+
+      &__image {
+        width: 100%;
+        height: 130px;
+        margin-bottom: 10px;
+      }
+      &__content {
+        width: 100%;
+
+        > h1,
+        p {
+          margin: 0;
+          font-size: 12px;
+        }
+        .description {
+          height: 38px;
+        }
+      }
+    }
+  }
+}

src/feature/articles/SearchArticle/SearchAction.js

@@ -0,0 +1,26 @@
+/* eslint-disable react/react-in-jsx-scope */
+import axios from 'axios';
+import * as searchActionTypes from './SearchConstants';
+import { BACKEND_URL } from '../../../app/common/config/appConfig';
+
+export const searchSuccess = data => ({
+  type: searchActionTypes.SEARCH_SUCCESS,
+  payload: data
+});
+export const searchError = error => ({
+  type: searchActionTypes.SEARCH_ERROR,
+  payload: error
+});
+
+export const search = (query, keyword) => async dispatch => {
+  try {
+    const response = await axios.get(
+      `${BACKEND_URL}/articles?${keyword}=${query}&limit=4`
+    );
+    const { data } = response;
+    dispatch(searchSuccess(data));
+  } catch (error) {
+    const { message } = error.response.data;
+    dispatch(searchError(message));
+  }
+};

src/feature/articles/SearchArticle/SearchComponent.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import Form from './SearchForm';
+import Result from './SearchResult';
+import { search } from './SearchAction';
+import './Search.scss';
+
+export function SearchComponent(props) {
+  const { search, results } = props;
+  return (
+    <>
+      <Form
+        searchAction={search}
+      />
+      <Result
+        results={results}
+      />
+    </>
+  );
+}
+
+const mapStateToProps = (state) => ({
+  results: state.searchResult,
+});
+
+const mapDispatchToProps = {
+  search
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(SearchComponent);

src/feature/articles/SearchArticle/SearchConstants.js

@@ -0,0 +1,2 @@
+export const SEARCH_SUCCESS = 'SEARCH_SUCCESS';
+export const SEARCH_ERROR = 'SEARCH_ERROR';

src/feature/articles/SearchArticle/SearchForm.js

@@ -0,0 +1,78 @@
+import React, { Component } from 'react';
+import './SearchForm.scss';
+
+export class SearchForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      query: '',
+      keyword: 'title',
+    };
+  }
+
+  onChange = ({ target }) => {
+    this.setState({
+      query: target.value,
+    }, () => {
+      this.onChangeSearch();
+    });
+  }
+
+  onChangeSearch = () => {
+    const { query, keyword } = this.state;
+    if (query.length > 2) {
+      const { searchAction } = this.props;
+      searchAction(query, keyword);
+    }
+  }
+
+  onSelect = ({ target }) => {
+    this.setState({
+      keyword: target.value,
+    }, () => {
+      this.onChangeSearch();
+    });
+  }
+
+  onSearch = event => {
+    event.preventDefault();
+    const { query, keyword } = this.state;
+    console.log(query);
+    const { searchAction } = this.props;
+    searchAction(query, keyword);
+  }
+
+  render() {
+    const { keyword, query } = this.state;
+    return (
+      <form onSubmit={this.onSearch} className="search-container">
+        <div className="search-container__select-group">
+          <select
+            className="select-input"
+            value={keyword}
+            onChange={this.onSelect}
+            required
+          >
+            <option value="title">Search by title</option>
+            <option value="author">Search by author</option>
+            <option value="tags">Search by tag</option>
+          </select>
+        </div>
+        <div className="search-container__input-group">
+          <input
+            className="search-input"
+            type="text"
+            name="search"
+            value={query}
+            onChange={this.onChange}
+            placeholder="Search by title, author, or tags"
+            autoComplete="off"
+            required
+          />
+        </div>
+      </form>
+    );
+  }
+}
+
+export default SearchForm;

src/feature/articles/SearchArticle/SearchForm.scss

@@ -0,0 +1,75 @@
+.search-container {
+  display: flex;
+  width: 60%;
+  margin: auto;
+
+  &__select-group {
+    width: 30%;
+
+    .select-input {
+      width: 98%;
+      padding: 10px;
+      font-size: 15px;
+      height: 40px;
+      background: #ffffff;
+      outline: none;
+      border: 1px solid gray;
+      border-radius: 2px !important;
+      box-sizing: border-box;
+    }
+  }
+
+  &__input-group {
+    width: 70%;
+
+    .search-input {
+      background-image: url('../../../app/common/images/search.png');
+      background-color: #ffffff;
+      background-repeat: no-repeat;
+      background-size: 30px 30px;
+      background-position: right;
+      width: 98%;
+      padding: 10px;
+      font-size: 15px;
+      height: 40px;
+      border: 1px solid gray;
+      border-radius: 4px;
+      box-sizing: border-box;
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 1024px) {
+  .search-container {
+    width: 85%;
+  }
+}
+@media (max-width: 700px) {
+  .search-container {
+    display: flex;
+    flex-wrap: wrap;
+    width: 90%;
+    margin-top: 15vh;
+
+    &__select-group {
+      width: 100%;
+      margin-bottom: 15px;
+
+      .select-input {
+        font-size: 12px;
+        height: 30px;
+        padding: 5px;
+      }
+    }
+    &__input-group {
+      width: 100%;
+      margin-bottom: 15px;
+
+      .search-input {
+        background-size: 20px 20px;
+        font-size: 12px;
+        height: 30px;
+        padding: 5px;
+      }
+    }
+  }
+}