From 650f7e75fe4a196ab2bcf644d824314f53619e82 Mon Sep 17 00:00:00 2001
From: danivijay <danimvijay@gmail.com>
Date: Sun, 12 Jul 2020 22:56:07 +0530
Subject: [PATCH] feat: integrate search, ui enhancements

---
 client/src/App.js                   | 33 +++++++++++++++++++++++------
 client/src/app.css                  | 30 +++++++++++++++++++++++---
 controllers/engine.py               |  2 +-
 controllers/recommendationSystem.js |  2 +-
 4 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/client/src/App.js b/client/src/App.js
index 962a7c9..02e03f1 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -9,7 +9,8 @@ const App = () => {
   const [page, setpage] = useState(0)
   const [recommendedLoading, setrecommendedLoading] = useState(false)
   const [itemsLoading, setitemsLoading] = useState(false)
-  const [search, setsearch] = useState('')
+  const [searchText, setsearchText] = useState('')
+  const [isSearch, setisSearch] = useState(false)
   useEffect(async () => {
     fetchItems(0)
     if (localStorage.getItem("favorites") === null) {
@@ -22,10 +23,10 @@ const App = () => {
     }
   }, [])
 
-  const fetchItems = async (page) => {
+  const fetchItems = async (page, search='', reset=false) => {
     setitemsLoading(true)
     try {
-      const response = await fetch(`http://localhost:5000/items?pageNum=${page}`, {
+      const response = await fetch(`http://localhost:5000/items?pageNum=${page}${search && ('&search=' + search)}`, {
           method: 'GET',
           headers: {
             'Content-Type': 'application/json',
@@ -33,7 +34,12 @@ const App = () => {
         })
       const data = await response.json()
       if (data.success && data.success === true) {
-        setitems([...items, ...data.movies])
+        if (search || reset) {
+          setitems(data.movies)
+        } else {
+          console.log('items', items)
+          setitems([...items, ...data.movies])
+        }
       }
     } catch (e) {
       console.log(e)
@@ -80,8 +86,16 @@ const App = () => {
   const handleRemoveFavorite = (favorite) => {
     const newFavorites = favorites.filter(f => f !== favorite)
     setfavorites(newFavorites)
+    localStorage.setItem("favorites", newFavorites)
     fetchRecommended(newFavorites)
   }
+
+  const handleSearch = () => {
+    setitems([])
+    fetchItems(0, searchText, true)
+  }
+
+  console.log(items)
   return (
     <div >
       <header className="header">
@@ -106,17 +120,22 @@ const App = () => {
                 ))}
             </Fragment>
           ) : (
-            <h2>Favorite something to generate recommendations</h2>
+            <h2 style={{color: "red"}}>Favorite any movie to generate recommendations</h2>
           )}
         </div>
         <div>
-          <h2 className={recommendedLoading ? 'loading' : 'loaded'}>{itemsLoading && 'Loading '}Movies</h2>
+          <h2 className={itemsLoading ? 'loading' : 'loaded'}>{itemsLoading && 'Loading '}Movies List</h2>
+          <div style={{ marginBottom: '20px' }}>
+            <input type="text" className="search-box" onChange={(e) => setsearchText(e.target.value)}/>
+            <button className="search-btn" onClick={() => handleSearch()}>Search</button>
+          </div>
           {items.map(item => (
             <MovieCard item={item} onFavorite={handleFavorite} isFavorite={favorites.includes(item.title)}/>
           ))}
-          {items.length >= 10 && !search && !itemsLoading && (
+          {items.length >= 10 && !searchText && !itemsLoading && (
             <button className="load-more" onClick={handleLoadMore}>Load More</button>
           )}
+          {!itemsLoading && items.length <= 0 && (<p>No items found!</p>)}
         </div>
       </div>
     </div>
diff --git a/client/src/app.css b/client/src/app.css
index cacf24c..9168388 100644
--- a/client/src/app.css
+++ b/client/src/app.css
@@ -21,7 +21,7 @@
 
 .favorite {
     background-color: #40c757;
-    border: 5px solid black;
+    border: 3px solid black;
     color: white;
     padding: 10px;
     text-align: center;
@@ -29,11 +29,12 @@
     font-size: 16px;
     cursor: pointer;
     font-weight: bold;
+    border-radius: 5px;
 }
 
 .unfavorite {
     background-color: #c74040;
-    border: 5px solid black;
+    border: 3px solid black;
     color: white;
     padding: 10px;
     text-align: center;
@@ -41,11 +42,12 @@
     font-size: 16px;
     cursor: pointer;
     font-weight: bold;
+    border-radius: 5px;
 }
 
 .load-more {
     background-color: #4089c7;;
-    border: 5px solid black;
+    border: 3px solid black;
     color: white;
     padding: 10px;
     text-align: center;
@@ -53,6 +55,7 @@
     font-size: 16px;
     cursor: pointer;
     font-weight: bold;
+    border-radius: 5px;
 }
 
 .loading {
@@ -61,4 +64,25 @@
 
 .loaded {
     color: green
+}
+
+.search-box {
+    padding: 10px;
+    margin-right: 10px;
+    border: 3px solid black;
+    border-radius: 5px;
+    font-size: 1rem;
+}
+
+.search-btn {
+    background-color: #4089c7;;
+    border: 3px solid black;
+    color: white;
+    padding: 10px;
+    text-align: center;
+    text-decoration: none;
+    font-size: 16px;
+    cursor: pointer;
+    font-weight: bold;
+    border-radius: 5px;
 }
\ No newline at end of file
diff --git a/controllers/engine.py b/controllers/engine.py
index f1324db..f38db78 100644
--- a/controllers/engine.py
+++ b/controllers/engine.py
@@ -64,7 +64,7 @@ def combine_features(row):
     if title not in movie_user_likes:
         result.append(title)
         i = i + 1
-    if i > 10:
+    if i > 4:
         break
 
 print("|".join(result))
diff --git a/controllers/recommendationSystem.js b/controllers/recommendationSystem.js
index a33bacd..f00b606 100644
--- a/controllers/recommendationSystem.js
+++ b/controllers/recommendationSystem.js
@@ -8,7 +8,7 @@ exports.getItems = async (req, res, next) => {
         const page = req.query.pageNum || 0;
         if(req.query.search != ''){
             searchKey = req.query.search;
-            var searchKey = new RegExp(req.query.search, "g");
+            var searchKey = new RegExp(req.query.search, "gi");
             const movies = await Movie.find({title:searchKey}).skip(page * 10).limit(10).sort('title');
             res.status(200).json({
                 success: true,