Stretch search bar/bg

[britnay268]

Description

A user can search for song when adding a song to a playlist.

Related Issue

15

Motivation and Context

A user should not have to scroll through all the songs to find the song they would like. A user should be able to search for exactly what song they want to add to their playlist.

How Can This Be Tested?

Click on eye icon on a playlist to view songs in a playlist and then select add song to see all songs not in the playlist along with search the search bar at the top. Type in a song you want to find; if it exists, it will show. If it does not exist, it will say No results found.

Screenshots (if appropriate):

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [X] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

[yarelismartin]

/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable camelcase */
import { useRouter } from 'next/router';
import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import { Button } from 'react-bootstrap';
import { getSongsNotOnPlaylist } from '../../api/SongsData';
import PlaylistDetail from '../../components/PlaylistDetail';
import SearchBar from '../../components/SearchBar';

export default function SongsNotInPlaylist() {
  const [songsNotInPlaylist, setSongsNotInPlaylist] = useState([]);
  const [filteredSongs, setFilteredSongs] = useState([]);

  const router = useRouter();
  const { playlist_id } = router.query;
  console.warn(router);

  const getAllSongsNotInPlaylist = async () => {
    const fetchedSongs = await getSongsNotOnPlaylist(playlist_id);
    // Set both all members and filtered members to the fetched members
    setSongsNotInPlaylist(fetchedSongs);
    setFilteredSongs(fetchedSongs);
  };

  // const getSearchResults = async () => {
  //   const payload = {
  //     playlistId: playlist_id,
  //     searchInput: search.toLowerCase(),
  //   };
  //   console.warn(payload);
  //   // console.warn(payload);
  //   const filteredResults = await searchSongs(payload);
  //   setSearchResults(filteredResults);
  // };

  const filterItems = (query) => {
    if (!query) {
      getAllSongsNotInPlaylist();
    } else {
      const filtered = songsNotInPlaylist.filter((song) => song.name.toLowerCase().includes(query)
      || song.artistId.toLowerCase().includes(query));
      setFilteredSongs(filtered);
    }
  };

  useEffect(() => {
    getAllSongsNotInPlaylist();
  }, []);

  return (
    <div>
      <div className="text-center" style={{ marginLeft: '100px', width: '80%' }}>
        <Link href={`/playlist/${playlist_id}`} passHref>
          <Button
            className="info"
            style={{
              marginTop: '15px',
              backgroundColor: '#B6A39E',
              color: 'black',
              border: 'none',
            }}
          >
            Back To Playlist
          </Button>
        </Link>
      </div>
      <SearchBar onSearch={filterItems} />
      <div className="d-flex flex-wrap" style={{ marginLeft: '0 auto' }}>
        {
        (filteredSongs.map((songObject) => (
          <PlaylistDetail key={songObject.id} songObj={songObject} onUpdate={getAllSongsNotInPlaylist} />)))
      }
      </div>
    </div>
  );
}