From 106eabdf0422332d8add9a33182a0d0f5947741b Mon Sep 17 00:00:00 2001
From: Abdus Samad Azad <azad3652@gmail.com>
Date: Sun, 13 Jan 2019 14:21:25 +0530
Subject: [PATCH 1/2] Added search-box && advance search options

---
 .../search-box/AdvanceSearchOptions.js        | 76 +++++++++++++++++++
 .../search-box/AdvanceSearchOptions.scss      | 24 ++++++
 src/components/search-box/Search.js           | 39 ++++++++++
 src/components/search-box/Search.scss         | 65 ++++++++++++++++
 src/index.html                                | 19 ++---
 src/views/home/home.view.js                   |  7 +-
 6 files changed, 220 insertions(+), 10 deletions(-)
 create mode 100644 src/components/search-box/AdvanceSearchOptions.js
 create mode 100644 src/components/search-box/AdvanceSearchOptions.scss
 create mode 100644 src/components/search-box/Search.js
 create mode 100644 src/components/search-box/Search.scss

diff --git a/src/components/search-box/AdvanceSearchOptions.js b/src/components/search-box/AdvanceSearchOptions.js
new file mode 100644
index 0000000..fedcc86
--- /dev/null
+++ b/src/components/search-box/AdvanceSearchOptions.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import './AdvanceSearchOptions.scss';
+
+export default class AdvanceSearchOptions extends React.Component {
+    render() {
+        return (
+            <div className="adv-options">
+                <div>
+                    <h5>Select Year</h5>
+                    <div>
+                        <input type="checkbox" name="year" value="2011" />
+                        <label for="year">2011</label>
+                    </div>
+                    <div>
+                        <input type="checkbox" name="year" value="2012" />
+                        <label for="year">2012</label>
+                    </div>
+
+                    <div>
+                        <input type="checkbox" name="year" value="2013" />
+                        <label for="year">2013</label>
+                    </div>
+
+                    <div>
+                        <input type="checkbox" name="year" value="2014" />
+                        <label for="year">2014</label>
+                    </div>
+                </div>
+
+                <div>
+                    <h5>Select Paper</h5>
+                    <div>
+                        <input type="radio" name="paper" value="data-science" />
+                        <label for="paper">Data Science</label>
+                    </div>
+                    <div>
+                        <input type="radio" name="paper" value="ml" />
+                        <label for="paper">Machine Learning</label>
+                    </div>
+
+                    <div>
+                        <input type="radio" name="paper" value="dl" />
+                        <label for="paper">Deep Learning</label>
+                    </div>
+
+                    <div>
+                        <input type="radio" name="paper" value="ai" />
+                        <label for="paper">AI</label>
+                    </div>
+                </div>
+
+                <div>
+                    <h5>Select Year</h5>
+                    <div>
+                        <input type="checkbox" name="year" value="2011" />
+                        <label for="year">2011</label>
+                    </div>
+                    <div>
+                        <input type="checkbox" name="year" value="2012" />
+                        <label for="year">2012</label>
+                    </div>
+
+                    <div>
+                        <input type="checkbox" name="year" value="2013" />
+                        <label for="year">2013</label>
+                    </div>
+
+                    <div>
+                        <input type="checkbox" name="year" value="2014" />
+                        <label for="year">2014</label>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/components/search-box/AdvanceSearchOptions.scss b/src/components/search-box/AdvanceSearchOptions.scss
new file mode 100644
index 0000000..e41414d
--- /dev/null
+++ b/src/components/search-box/AdvanceSearchOptions.scss
@@ -0,0 +1,24 @@
+.adv-options {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+
+    & > div {
+        color: #141414;
+        width: 32%;
+        margin: 30px 0;
+        padding: 10px;
+        border-radius: 4px;
+        transition: .4s ease-out all;
+
+        &:hover {
+            font-weight: 900;
+            color: #46a02b;
+            background: #46a02b33;
+        }
+    }
+    & input[type="checkbox"],
+    & input[type="radio"] {
+        margin: 0 10px;
+    }
+}
\ No newline at end of file
diff --git a/src/components/search-box/Search.js b/src/components/search-box/Search.js
new file mode 100644
index 0000000..bbc685d
--- /dev/null
+++ b/src/components/search-box/Search.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import './Search.scss';
+import AdvanceSearchOptions from './AdvanceSearchOptions';
+
+export default class SearchBox extends React.Component {
+
+    constructor() {
+        super();
+
+        this.state = {
+            showAdvSearch: false
+        }
+    }
+
+    toggleFilter(e) {
+        this.setState({
+            showAdvSearch: !this.state.showAdvSearch
+        })
+    }
+
+    render() {
+        return(
+            <>
+                <div className="search-wrapper">
+                    <form className="search-box" action="/" method="GET">
+                        <div className="basic-search">
+                            <input type="search" name="q" placeholder="Enter a Search Query"/>
+                            <input type="submit" value="GO"/>
+                            <input type="button" value="Filter" onClick={this.toggleFilter.bind(this)}/>
+                        </div>
+                        <div className="adv-search">
+                            { this.state.showAdvSearch === true ? <AdvanceSearchOptions/> : ''}
+                        </div>
+                    </form>
+                </div>
+            </>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/components/search-box/Search.scss b/src/components/search-box/Search.scss
new file mode 100644
index 0000000..665b8ad
--- /dev/null
+++ b/src/components/search-box/Search.scss
@@ -0,0 +1,65 @@
+.search-wrapper {
+    padding: 30px 0;
+    border-top: 1px solid #c4c4c467;
+    border-bottom: 1px solid #c4c4c467;
+
+    & form.search-box {
+        width: 90%;
+        margin: auto;
+
+        & .basic-search {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-evenly;
+
+            & > * {
+                border: 1px solid #46a02b;
+                padding: 10px;
+                background: transparent;
+                border-radius: 3px;
+                font-weight: 900;
+            }
+    
+            & input[name="q"] {
+                width: 80%;
+    
+                &::placeholder {
+                    color: #46a02b;
+                }
+            }
+    
+            & input[type="submit"],
+            & input[type="button"] {
+                width: 9.5%;
+                color: #46a02b;
+            }
+            
+            & input[type="submit"] {
+                background: #46a02b;
+                color: #fff;
+            }
+        }
+
+        & .adv-search {
+            margin: 30px 0 0 0;
+        }
+    }
+}
+
+@media (max-width: 800px) {
+    .search-wrapper {    
+        & form.search-box {
+            & .basic-search {
+                & input[name="q"] {
+                    width: 100%;
+                }
+        
+                & input[type="submit"],
+                & input[type="button"] {
+                    margin-top: 1px;
+                    width: 49.5%;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 1bc0df7..73c99aa 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,14 +2,15 @@
 
 <html>
 
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-  <base href="/">
-  <title>WP4R</title>
-</head>
-
-<body>
-  <div id="app"></div>
-</body>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <base href="/">
+    <title>WP4R</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+  </body>
 
 </html>
\ No newline at end of file
diff --git a/src/views/home/home.view.js b/src/views/home/home.view.js
index 3cb2d7d..74f1f18 100644
--- a/src/views/home/home.view.js
+++ b/src/views/home/home.view.js
@@ -1,7 +1,12 @@
 import React from "react";
+import SearchBox from "../../components/search-box/Search"
 
 function Home() {
-  return <div>Home</div>;
+  return (
+    <>
+      <SearchBox/>
+    </>
+  );
 }
 
 export default Home;

From fefe8f3d57afb8d1b31d2d3d2d4eae32c5278c9f Mon Sep 17 00:00:00 2001
From: Abdus Samad Azad <azad3652@gmail.com>
Date: Sun, 13 Jan 2019 22:49:36 +0530
Subject: [PATCH 2/2] updated adv search options and added search-result
 component

---
 .../search-box/AdvanceSearchOptions.js        |  76 -------------
 .../search-box/AdvanceSearchOptions.scss      |  24 -----
 src/components/search-box/Search.js           |  39 -------
 src/components/search/AdvanceSearchOptions.js | 102 ++++++++++++++++++
 .../search/AdvanceSearchOptions.scss          |  37 +++++++
 src/components/search/Search.js               |  66 ++++++++++++
 .../{search-box => search}/Search.scss        |  51 +++++++--
 src/components/search/SearchResult.js         |  22 ++++
 src/components/search/SearchResult.scss       |  24 +++++
 src/views/home/home.view.js                   |   2 +-
 10 files changed, 294 insertions(+), 149 deletions(-)
 delete mode 100644 src/components/search-box/AdvanceSearchOptions.js
 delete mode 100644 src/components/search-box/AdvanceSearchOptions.scss
 delete mode 100644 src/components/search-box/Search.js
 create mode 100644 src/components/search/AdvanceSearchOptions.js
 create mode 100644 src/components/search/AdvanceSearchOptions.scss
 create mode 100644 src/components/search/Search.js
 rename src/components/{search-box => search}/Search.scss (53%)
 create mode 100644 src/components/search/SearchResult.js
 create mode 100644 src/components/search/SearchResult.scss

diff --git a/src/components/search-box/AdvanceSearchOptions.js b/src/components/search-box/AdvanceSearchOptions.js
deleted file mode 100644
index fedcc86..0000000
--- a/src/components/search-box/AdvanceSearchOptions.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import './AdvanceSearchOptions.scss';
-
-export default class AdvanceSearchOptions extends React.Component {
-    render() {
-        return (
-            <div className="adv-options">
-                <div>
-                    <h5>Select Year</h5>
-                    <div>
-                        <input type="checkbox" name="year" value="2011" />
-                        <label for="year">2011</label>
-                    </div>
-                    <div>
-                        <input type="checkbox" name="year" value="2012" />
-                        <label for="year">2012</label>
-                    </div>
-
-                    <div>
-                        <input type="checkbox" name="year" value="2013" />
-                        <label for="year">2013</label>
-                    </div>
-
-                    <div>
-                        <input type="checkbox" name="year" value="2014" />
-                        <label for="year">2014</label>
-                    </div>
-                </div>
-
-                <div>
-                    <h5>Select Paper</h5>
-                    <div>
-                        <input type="radio" name="paper" value="data-science" />
-                        <label for="paper">Data Science</label>
-                    </div>
-                    <div>
-                        <input type="radio" name="paper" value="ml" />
-                        <label for="paper">Machine Learning</label>
-                    </div>
-
-                    <div>
-                        <input type="radio" name="paper" value="dl" />
-                        <label for="paper">Deep Learning</label>
-                    </div>
-
-                    <div>
-                        <input type="radio" name="paper" value="ai" />
-                        <label for="paper">AI</label>
-                    </div>
-                </div>
-
-                <div>
-                    <h5>Select Year</h5>
-                    <div>
-                        <input type="checkbox" name="year" value="2011" />
-                        <label for="year">2011</label>
-                    </div>
-                    <div>
-                        <input type="checkbox" name="year" value="2012" />
-                        <label for="year">2012</label>
-                    </div>
-
-                    <div>
-                        <input type="checkbox" name="year" value="2013" />
-                        <label for="year">2013</label>
-                    </div>
-
-                    <div>
-                        <input type="checkbox" name="year" value="2014" />
-                        <label for="year">2014</label>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/components/search-box/AdvanceSearchOptions.scss b/src/components/search-box/AdvanceSearchOptions.scss
deleted file mode 100644
index e41414d..0000000
--- a/src/components/search-box/AdvanceSearchOptions.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.adv-options {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-
-    & > div {
-        color: #141414;
-        width: 32%;
-        margin: 30px 0;
-        padding: 10px;
-        border-radius: 4px;
-        transition: .4s ease-out all;
-
-        &:hover {
-            font-weight: 900;
-            color: #46a02b;
-            background: #46a02b33;
-        }
-    }
-    & input[type="checkbox"],
-    & input[type="radio"] {
-        margin: 0 10px;
-    }
-}
\ No newline at end of file
diff --git a/src/components/search-box/Search.js b/src/components/search-box/Search.js
deleted file mode 100644
index bbc685d..0000000
--- a/src/components/search-box/Search.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import './Search.scss';
-import AdvanceSearchOptions from './AdvanceSearchOptions';
-
-export default class SearchBox extends React.Component {
-
-    constructor() {
-        super();
-
-        this.state = {
-            showAdvSearch: false
-        }
-    }
-
-    toggleFilter(e) {
-        this.setState({
-            showAdvSearch: !this.state.showAdvSearch
-        })
-    }
-
-    render() {
-        return(
-            <>
-                <div className="search-wrapper">
-                    <form className="search-box" action="/" method="GET">
-                        <div className="basic-search">
-                            <input type="search" name="q" placeholder="Enter a Search Query"/>
-                            <input type="submit" value="GO"/>
-                            <input type="button" value="Filter" onClick={this.toggleFilter.bind(this)}/>
-                        </div>
-                        <div className="adv-search">
-                            { this.state.showAdvSearch === true ? <AdvanceSearchOptions/> : ''}
-                        </div>
-                    </form>
-                </div>
-            </>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/components/search/AdvanceSearchOptions.js b/src/components/search/AdvanceSearchOptions.js
new file mode 100644
index 0000000..a3b66c4
--- /dev/null
+++ b/src/components/search/AdvanceSearchOptions.js
@@ -0,0 +1,102 @@
+import React from 'react';
+import './AdvanceSearchOptions.scss';
+
+export default class AdvanceSearchOptions extends React.Component {
+    render() {
+        return (
+            <div className="adv-options">
+                <section>
+                    <div className="section-header">Lorem Ipsum</div>
+                    <Radio 
+                        id="2017"
+                        name="year"
+                        value="2017"
+                        label_text="this is a label text"
+                    />
+                    <Radio 
+                        id="2018"
+                        name="year"
+                        value="2018"
+                        label_text="this is a label text"
+                    />
+                </section>
+                <section>
+                    <div className="section-header">Lorem Ipsum</div>
+                    <Radio 
+                        id="2019"
+                        name="year"
+                        value="207"
+                        label_text="this is a label text"
+                    />
+                    <Radio 
+                        id="2020"
+                        name="year"
+                        value="2018"
+                        label_text="this is a label text"
+                    />
+                </section>
+                <section>
+                    <div className="section-header">Lorem Ipsum</div>
+                    <Radio 
+                        id="2021"
+                        name="year"
+                        value="2017"
+                        label_text="this is a label text"
+                    />
+                    <Radio 
+                        id="2022"
+                        name="year"
+                        value="2018"
+                        label_text="this is a label text"
+                    />
+                </section>
+                <section>
+                    <div className="section-header">Lorem Ipsum</div>
+                    <Radio 
+                        id="2023"
+                        name="year"
+                        value="2017"
+                        label_text="this is a label text"
+                    />
+                    <Radio 
+                        id="2024"
+                        name="year"
+                        value="2018"
+                        label_text="this is a label text"
+                    />
+                </section>
+                <section>
+                    <div className="section-header">Lorem Ipsum</div>
+                    <Radio 
+                        id="2025"
+                        name="year"
+                        value="2017"
+                        label_text="this is a label text"
+                    />
+                    <Radio 
+                        id="2026"
+                        name="year"
+                        value="2018"
+                        label_text="this is a label text"
+                    />
+                </section>
+            </div>
+        );
+    }
+}
+
+/**
+ * Radio
+ * @param {props} - accepts props from parent component
+ */
+
+const Radio = props => {
+    return(
+        <div className="form-check">
+            <input className="form-check-input" type="radio" name={props.name} value={props.value} id={props.id} />
+            <label className="form-check-label" htmlFor={props.id}>
+                {props.label_text}
+            </label>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/components/search/AdvanceSearchOptions.scss b/src/components/search/AdvanceSearchOptions.scss
new file mode 100644
index 0000000..38d5be5
--- /dev/null
+++ b/src/components/search/AdvanceSearchOptions.scss
@@ -0,0 +1,37 @@
+.adv-options {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    font-weight: 900;
+    border-top: 1px solid #c0c0c0a8;
+    border-bottom: 1px solid #c0c0c0a8;
+
+    & .form-check { 
+        & .form-check-label {
+            font-weight: 300;
+            font-size: .9rem;
+            cursor: pointer;
+        }
+
+        &:hover {
+            color: #37a000;
+        }
+    }
+    & section {
+        width: auto;
+        min-width: 15%;
+        margin: 20px;
+
+        & .section-header {
+            margin: 4px 0;
+        }
+    }
+
+}
+
+@media (max-width: 800px) {
+    .adv-options {
+    
+       
+    }    
+}
\ No newline at end of file
diff --git a/src/components/search/Search.js b/src/components/search/Search.js
new file mode 100644
index 0000000..a2b264e
--- /dev/null
+++ b/src/components/search/Search.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import './Search.scss';
+import AdvanceSearchOptions from './AdvanceSearchOptions';
+import SearchResult from './SearchResult';
+
+export default class SearchBox extends React.Component {
+
+    constructor() {
+        super();
+
+        this.fetchData = this.fetchData.bind(this);
+        this.state = {
+            showAdvSearch: false,
+            searchResult: null
+        }
+    }
+
+    onFormSubmit(e) {
+        e.preventDefault();
+        this.fetchData();
+    }
+
+    toggleFilter(e) {
+        this.setState({
+            showAdvSearch: !this.state.showAdvSearch
+        })
+    }
+
+    fetchData() {
+        fetch('https://jsonplaceholder.typicode.com/posts')
+        .then(data => data.json())
+        .then(data => this.setState({searchResult: data}));
+    }
+
+    render() {
+        return(
+            <>
+                <div className="search-wrapper">
+                    <form className="search-box" action="/" method="GET" onSubmit={this.onFormSubmit.bind(this)}>
+                        <div className="basic-search">
+                            <input type="search" name="q" placeholder="Enter a Search Query"/>
+                            <input type="submit" value="GO"/>
+                            <input type="button" value="Filter" onClick={this.toggleFilter.bind(this)}/>
+                        </div>
+                        <div className={this.state.showAdvSearch === true ? 'adv-search' : 'adv-search hide-adv-search'}>
+                            <AdvanceSearchOptions />
+                        </div>
+                    </form>
+                    <div className="search-result">
+                        {this.state.searchResult !== null ? this.state.searchResult.map((val, i) => <SearchResult header={val.title} description={val.body} key={i} />) : <NoDataFound/> }
+                    </div>
+                </div>
+            </>
+        );
+    }
+}
+
+/**
+ * No data found - search result 
+ */
+
+const NoDataFound = () => {
+    return(
+        <div className="no-data-found">No Data Found... Press 'GO' to Load Dummy Data!</div>
+    );
+}
\ No newline at end of file
diff --git a/src/components/search-box/Search.scss b/src/components/search/Search.scss
similarity index 53%
rename from src/components/search-box/Search.scss
rename to src/components/search/Search.scss
index 665b8ad..f58c063 100644
--- a/src/components/search-box/Search.scss
+++ b/src/components/search/Search.scss
@@ -1,9 +1,14 @@
 .search-wrapper {
+    width: 80%;
+    margin: auto;
     padding: 30px 0;
-    border-top: 1px solid #c4c4c467;
-    border-bottom: 1px solid #c4c4c467;
+    border-radius: 4px;
+    box-shadow: 0 0 10px 0 #c0c0c0a8;
+    // border: 1px solid #c4c4c467;
+    // border-bottom: 1px solid #c4c4c467;
 
-    & form.search-box {
+    & form.search-box, 
+    & .search-result {
         width: 90%;
         margin: auto;
 
@@ -13,7 +18,7 @@
             justify-content: space-evenly;
 
             & > * {
-                border: 1px solid #46a02b;
+                border: 1px solid #37a000;
                 padding: 10px;
                 background: transparent;
                 border-radius: 3px;
@@ -24,30 +29,43 @@
                 width: 80%;
     
                 &::placeholder {
-                    color: #46a02b;
+                    color: #37a000;
                 }
             }
     
             & input[type="submit"],
             & input[type="button"] {
                 width: 9.5%;
-                color: #46a02b;
+                color: #37a000;
+                cursor: pointer;
             }
             
             & input[type="submit"] {
-                background: #46a02b;
+                background: #37a000;
                 color: #fff;
             }
         }
 
         & .adv-search {
-            margin: 30px 0 0 0;
+            overflow: hidden;
+            max-height: 600px;
+            padding-top: 30px;
+            transition: .4s cubic-bezier(.65,.05,.36,1) all;
+        }
+
+        // & .show-adv-search {
+        // }
+
+        & .hide-adv-search {
+            max-height: 0;
+            padding-top: 0;
         }
     }
 }
 
 @media (max-width: 800px) {
-    .search-wrapper {    
+    .search-wrapper {
+        width: 95%;
         & form.search-box {
             & .basic-search {
                 & input[name="q"] {
@@ -60,6 +78,21 @@
                     width: 49.5%;
                 }
             }
+            & .adv-search {
+                max-height: 800px;
+            }
+
+            & .hide-adv-search {
+                max-height: 0;
+            }
         }
     }
+}
+
+// no data found
+.no-data-found {
+    font-size: 1.2rem;
+    color: #9b9b9b;
+    margin: 2rem 0;
+    text-align: center;
 }
\ No newline at end of file
diff --git a/src/components/search/SearchResult.js b/src/components/search/SearchResult.js
new file mode 100644
index 0000000..242591e
--- /dev/null
+++ b/src/components/search/SearchResult.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import './SearchResult.scss'
+
+export default class SearchResult extends React.Component {
+    constructor(props) {
+        super();
+    }
+    render() {
+        return(
+            <>
+                <div className="result-card">
+                    <div className="header">{this.props.header}</div>
+                    <div className="description">{this.props.description}</div>
+                    <div className="action">
+                        <button className="button download">Download</button>
+                        <button className="button view">View</button>
+                    </div>
+                </div>
+            </>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/components/search/SearchResult.scss b/src/components/search/SearchResult.scss
new file mode 100644
index 0000000..cbb9d55
--- /dev/null
+++ b/src/components/search/SearchResult.scss
@@ -0,0 +1,24 @@
+.result-card {
+    padding: 40px 0;
+    border-bottom: 1px solid #c0c0c0a8;
+
+    & .header {
+        font-size: 1.2rem;
+        font-weight: bolder;
+    }
+
+    & .description {
+        color: #5a5a5a;
+        margin: 10px 0;
+    }
+
+    & .button {
+        background: unset;
+        font-size: inherit;
+        border: 1px solid #c0c0c0a8;
+        margin: 1px;
+        padding: 7px 10px;
+        border-radius: 2px; 
+        cursor: pointer;
+    }
+}
\ No newline at end of file
diff --git a/src/views/home/home.view.js b/src/views/home/home.view.js
index 74f1f18..7431345 100644
--- a/src/views/home/home.view.js
+++ b/src/views/home/home.view.js
@@ -1,5 +1,5 @@
 import React from "react";
-import SearchBox from "../../components/search-box/Search"
+import SearchBox from "../../components/search/Search"
 
 function Home() {
   return (