Skip to content

Commit

Permalink
Merge pull request #301 from The-Phoenics/Implement-search-all-page-256
Browse files Browse the repository at this point in the history 
fix issue #256
  • Loading branch information
@Satyam1923
Satyam1923 authored Jun 10, 2024
2 parents 89b85da + 8d30fee commit f7dc21e
Show file tree
Hide file tree
Showing 10 changed files with 471 additions and 455 deletions.
300 changes: 20 additions & 280 deletions frontend/src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,289 +1,29 @@
import { useState, useEffect, useRef } from "react";
import "react-h5-audio-player/lib/styles.css";
import "./App.css";
import axios from "axios";
import he from "he";
import Sidebar from "./components/Sidebar";
import Section3 from "./components/Section3";
import Genres from "./components/Genres";
import TopCharts from "./components/TopCharts";
import Aboutus from "./pages/Aboutus";
import Terms from "./pages/Terms";

import { FaUser } from 'react-icons/fa';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import PagenotFound from "./components/PagenotFound";


import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";

import { Pagination, Navigation } from "swiper/modules";
import TopArtists from "./components/TopArtists";
import Settings from "./components/Settings";
import Search from "./components/Search/Search";
import Footer from "./components/Footer";
import Contactus from "./pages/Contactus";
import Blog from "./pages/Blog";
import Culture from "./pages/Culture";

import Home from "./components/Home/Home";
import Aboutus from "./pages/Aboutus"
import Blog from "./pages/Blog"
import Terms from "./pages/Terms"
import Contactus from "./pages/Contactus"
import Culture from "./pages/Culture"

const App = () => {
const [data, setData] = useState(null);
const [searchQuery, setSearchQuery] = useState("");
const [currplaying, setCurrplaying] = useState(0);
const [topsongs, setTopsongs] = useState([]);
const [searchVisiblity, setSearchVisiblity] = useState(true);
const [songSuggestion,setSongSuggestion]=useState([])
const [isTopSong, setTopSong] = useState(false);
const inputRef = useRef(null);
const [showSearchResults, setShowSearchResults] = useState(false);
const [topEnglishsongs, setTopEnglishsongs] = useState([]);
const [isEnglishSong, setIsEnglishSong] = useState(false);
const[isPaused,setIsPaused] = useState(false);

// this is for debugging the ui
const [debug, setDebug] = useState(false)
const [favorites, setFavorites] = useState([]);
useEffect(() => {
// Event handler function
const handleKeypress = (e) => {
console.log(e.key);
if (e.key === '`') {
setDebug((prevDebug) => !prevDebug);
}
};
window.addEventListener('keypress', handleKeypress);
return () => {
window.removeEventListener('keypress', handleKeypress);
};
}, []);
useEffect(()=>{
const searchSongSuggestions=()=>{
fetch(`https://jio-savaan-private.vercel.app/api/search/songs?query=${encodeURIComponent(searchQuery)}`)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
} else {
return response.json();
}
})
.then(data => {
setSongSuggestion(data.data.results);
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
})
}
if(searchQuery.length===1){
searchSongSuggestions()
}
else if(searchQuery.length>1){
let filtering=songSuggestion.filter(ele=>ele.name.toLowerCase().includes(searchQuery.toLowerCase()))
setSongSuggestion(filtering)
}
else{
setSongSuggestion([])
}
},[searchQuery])
const decodeEntities = (str) => {
return he.decode(str);
};

const fetchSongData = async () => {

fetch(`https://jio-savaan-private.vercel.app/api/search/songs?query=${encodeURIComponent(searchQuery)}`)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
} else {
return response.json();
}
})
.then(data => {
console.log("data");
console.log(data.data.results);
setData(data.data.results);
setShowSearchResults(true);
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
})

};

useEffect(() => {
const fetchTopSong = async () => {
try {
const response = await axios.get("https://jio-savaan-private.vercel.app/api/search/songs?query=top songs");
setTopsongs(response.data.data.results);
} catch (error) {
console.error(error);
}
};
fetchTopSong();
const fetchTopEnglish = async () => {
try {
const response = await axios.get("https://jio-savaan-private.vercel.app/api/search/songs?query=top english songs");
setTopEnglishsongs(response.data.data.results);
} catch (error) {
console.error(error);
}
}
fetchTopEnglish();
}, []);



const playSong = (index) => {
setCurrplaying(index);
};

const handleFocus = () => {
setSearchVisiblity(true);
setTimeout(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, 0);
};

const addToFavorites = (song, isLiked) => {
if (isLiked) {
setFavorites((prevFavorites) => [...prevFavorites, song]);
} else {
setFavorites((prevFavorites) => prevFavorites.filter((fav) => fav.id !== song.id));
}
};


if (debug) {
return <Search />
} else {
return (
<Router>
<Routes>
<Route path="/settings" element={<Settings/>} />
<Route path="/" element={
<div>
<div className="ui">
<Sidebar handleFocus={handleFocus} setSearchVisiblity={setSearchVisiblity} favorites={favorites} setFavorites={setFavorites}/>
<div className="avatar">
<div className="logo">
<FaUser fontSize="15px" color="white" />

</div>
<div className="text">Username</div>
</div>
<div className="section2">
<div className="searchbar searchbar2">
{
searchVisiblity ? <div className="search-container">
<i className="fas fa-search search-icon"></i>
<input
type="search"
placeholder="What do you want to play?"
name="song"
ref={inputRef}
className="box1"
required
onKeyDown={(event) => {
if (event.key === 'Enter') {
if (searchQuery !== "") {
console.log("started fetching song....")
fetchSongData();
} else {
console.log("empty input query");
}
}
}}
onChange={(e) => {
e.preventDefault();
setSearchQuery(e.target.value);
}}
/>

<div id="searchResultsSuggestion">
{
songSuggestion?.map((item,index)=>(
<p key={`song_name${index}`} onClick={()=>{setSearchQuery(item.name);setSongSuggestion([]);fetchSongData();}}>{item.name}</p>
))
}
</div>
</div> : ''
}
</div>

<TopArtists topsongs={topsongs} setTopSong={setTopSong} playSong={playSong}></TopArtists>
{
showSearchResults ?
<div className="song_content">
<Swiper
slidesPerView={4}
spaceBetween={30}
navigation={true}
modules={[Pagination, Navigation]}
className="mySwiper"
>
{data == null ? (
''
) : (
data !== null &&
data !== undefined &&
data.map((element, index) => (
<div key={element.id} onClick={() => {
setTopSong(false);
setIsEnglishSong(false);
playSong(index)
}}>
<SwiperSlide className="song">
<img
src={element.image[1].url}
alt={element.name}
onClick={() => {
setTopSong(false);
setIsEnglishSong(false);
playSong(index)
}}
/>
<p onClick={() => {
setTopSong(false);
setIsEnglishSong(false);
playSong(index)
}}>
{decodeEntities(element.name)}
</p>
</SwiperSlide>
</div>
))
)}
</Swiper>
</div>
: <div className="genresAndTopcharts">
<Genres />
<TopCharts setTopSong={setTopSong} isEnglishSong={isEnglishSong} setIsEnglishSong={setIsEnglishSong} topEnglishsongs={topEnglishsongs} playSong={playSong} />
</div>
}

</div>
<Section3 setIsEnglishSong={setIsEnglishSong} data={data} index={currplaying} playSong={playSong} topsongs={topsongs} isTopSong={isTopSong} setTopSong={setTopSong} isEnglishSong={isEnglishSong} topEnglishsongs={topEnglishsongs} isPaused={isPaused} setIsPaused={setIsPaused} favorites={favorites} setFavorites={setFavorites}/>
</div>
<Footer/>
</div>
} />
<Route path="/aboutus" element={<Aboutus/>}/>
<Route path="/terms" element={<Terms/>}/>
<Route path="/contactus" element={<Contactus/>}/>
<Route path="/blog" element={< Blog />} />
<Route path="/culture" element={< Culture/>}/>
</Routes>
</Router>
);
}

return (
<Router>
<Routes>
<Route path="/search" element={<Search />} />
<Route path="/" element={<Home />} />
<Route path="*" element={<PagenotFound />} />
<Route path="/aboutus" element={<Aboutus />} />
<Route path="/terms" element={<Terms />} />
<Route path="/contactus" element={<Contactus />} />
<Route path="/blog" element={<Blog />} />
<Route path="/culture" element={<Culture />} />
</Routes>
</Router>
);
};

export default App;

69 changes: 69 additions & 0 deletions frontend/src/Utils.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import axios from "axios";

export function secIntoMinSec(timeInSeconds) {
const minutes = Math.floor(timeInSeconds / 60);
const seconds = Math.floor(timeInSeconds % 60);
const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds;
return `${minutes}:${formattedSeconds}`;
}

// fetch song by its name
export const fetchSongData = async (songName, setCurrSong) => {
fetch(
`https://jio-savaan-private.vercel.app/api/search/songs?query=${encodeURIComponent(songName)}`
)
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
} else {
return response.json();
}
})
.then((data) => {
setCurrSong(data.data.results[0]);
})
.catch((error) => {
console.error("There was a problem with the fetch operation:", error);
});
};

// fetch song by its name
export const fetchSonsgByName = async (songName, setSongs, count = 6) => {
fetch(
`https://jio-savaan-private.vercel.app/api/search/songs?query=${encodeURIComponent(songName)}`
)
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
} else {
return response.json();
}
})
.then((response) => {
const songs = [];
for (let i = 0; i < count; i++) {
songs.push(response.data.results[i]);
}
setSongs(songs);
})
.catch((error) => {
console.error("There was a problem with the fetch operation:", error);
});
};

// fetch top songs
export const fetchTopSongs = (setTopSongs, count = 6) => {
try {
axios
.get("https://jio-savaan-private.vercel.app/api/search/songs?query=top songs")
.then((response) => {
const topSongs = [];
for (let i = 0; i < count; i++) {
topSongs.push(response.data.data.results[i]);
}
setTopSongs(topSongs);
});
} catch (error) {
console.error(error);
}
};
Loading

0 comments on commit f7dc21e

Please sign in to comment.