Merge pull request #6 from danivijay/feature/final-touches

feat: integrate search, ui enhancements

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,18 +23,23 @@ 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',
  },
  })
  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>

client/src/app.css

@@ -21,38 +21,41 @@
 
 .favorite {
  background-color: #40c757;
- border: 5px solid black;
+ 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;
 }
 
 .unfavorite {
  background-color: #c74040;
- border: 5px solid black;
+ 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;
 }
 
 .load-more {
  background-color: #4089c7;;
- border: 5px solid black;
+ 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;
 }
 
 .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;
 }

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))

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,