modified search page and fixed dropdown ans siderbar playlist

Vishal023 · Nov 1, 2020 · 46f26b7 · 46f26b7
1 parent d574df5
commit 46f26b7
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 37 deletions.
diff --git a/src/app/App.jsx b/src/app/App.jsx
@@ -14,9 +14,12 @@ const App = () => {
 
     const dispatch = useDispatch();
     useEffect(()=>{
-        if (language === null){
+        if (language === null || language.includes("any")){
             dispatch(setPlaylist(musicDB))
-        }else {
+        }
+        else if (language.includes('hindi')){
+            alert("No hindi tracks available")
+        } else {
             let x = musicDB.filter((item)=>(
                 item.lang && language.includes(item.lang.toLowerCase())
             ))

diff --git a/src/components/Pages/Home.jsx b/src/components/Pages/Home.jsx
@@ -14,6 +14,7 @@ import FooterSelectMusic from "../fragment/FooterSelectMusic";
 import CurrentPlayingLarge from "../fragment/CurrentPlayingLarge";
 import Search from "./Search";
 import Explore from "./Explore";
+import About from "./About";
 
 function getCurrPage(pathName) {
     switch (pathName) {
@@ -27,6 +28,8 @@ function getCurrPage(pathName) {
             return <Profile/>
         case "/home/add":
             return <AddMusic/>
+        case "/home/about":
+            return <About/>
         default:
             return null
     }
@@ -37,6 +40,13 @@ function Home() {
 
     const [screenSize, setScreenSize] = useState(undefined);
     const [currMusic, setCurrMusic] = useState(null);
+    const [Page,setCurrPage] = useState(<MusicCardContainer/>);
+
+    let pathname = window.location.pathname;
+    useEffect(()=>{
+        setCurrPage(getCurrPage(pathname))
+    }, [pathname]);
+
     window.addEventListener("resize", handleResize);
 
     function handleResize() {
@@ -49,8 +59,7 @@ function Home() {
     });
 
     const useStyle = useContext(ThemeContext);
-    let pathname = window.location.pathname;
-    const {playing,bannerOpen} = useSelector(state => state.musicReducer);
+    const {playing, bannerOpen} = useSelector(state => state.musicReducer);
 
 
     useEffect(() => {
@@ -70,20 +79,24 @@ function Home() {
                 </div>
                 <div className="main-home">
                     {
-                        getCurrPage(pathname)
+                        Page
                     }
                 </div>
             </section>
             {
                 bannerOpen
-                    &&
+                &&
                 <section className="current-large-banner">
                     <CurrentPlayingLarge/>
                 </section>
             }
             <React.Fragment>
                 {
-                    currMusic ? <FooterMusicPlayer music={currMusic}/> : <FooterSelectMusic/>
+                    currMusic
+                        ?
+                        <FooterMusicPlayer music={currMusic}/>
+                        :
+                        <FooterSelectMusic/>
                 }
                 {
                     screenSize <= 970 && <BottomNavigationMobile/>

diff --git a/src/components/Pages/Search.jsx b/src/components/Pages/Search.jsx
@@ -3,7 +3,10 @@ import './css/Search.scss';
 import Container from "../fragment/Container";
 import {useSelector} from "react-redux";
 import MusicCard from "../fragment/MusicCard";
-
+import SearchMusic from "../assets/img/searchMusic.svg";
+import SearchMusicMp3 from "../assets/img/searchMusicMp3.svg";
+import SearchMusicDisc from "../assets/img/searchMusicDisc.svg";
+import ArrowUp from '../assets/img/left.svg';
 const Search = () => {
     const {playlists, search} = useSelector(state => state.musicReducer);
     const [searchResult, setSearchResult] = useState([]);
@@ -21,19 +24,31 @@ const Search = () => {
     return (
         <Container>
             {
-                search === ""
-                &&
-                <div className={"Search"}>
-                    <h3>Type in search box to search an item</h3>
-                </div>
+                (search === "" || search === null)
+                    ?
+                    <div className={"Search"}>
+                        <div className="Search-img">
+                            <img className={"Rotate-img"} src={SearchMusicDisc} alt="search-music-icon"/>
+                            <img src={SearchMusicMp3} alt="search-music-icon"/>
+                            <img src={SearchMusic} alt="search-music-icon"/>
+                            <img className={"Arrow"} src={ArrowUp} alt=""/>
+                        </div>
+                    </div>
+                    :
+                    <div className={"Search-result"}>
+                        {
+                            searchResult.length === 0
+                                ?
+                                <div className={"Search-fallback"}>
+                                    No result found.
+                                </div>
+                                :
+                                searchResult.map((item) => (
+                                    <MusicCard key={item.id} music={item}/>
+                                ))
+                        }
+                    </div>
             }
-            <div className={"Search-result"}>
-                {
-                    searchResult.map((item) => (
-                        <MusicCard key={item.id} music={item}/>
-                    ))
-                }
-            </div>
         </Container>
     );
 }

diff --git a/src/components/Pages/css/Search.scss b/src/components/Pages/css/Search.scss
@@ -1,5 +1,49 @@
+.Search{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  .Search-img{
+    img{
+      width: 240px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    }
+    .Rotate-img{
+      animation-name: spin;
+      animation-duration: 5s;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+      transform: translateX(-50%) translateY(-50%) rotate(0deg);
+    }
+    .Arrow{
+      top: 15%;
+      left: 60%;
+      transform: translateX(-60%) translateY(-50%)  rotate(70deg) ;
+      width: 100px;
+    }
+    @keyframes spin {
+      from {
+        transform: translateX(-50%) translateY(-50%) rotate(0deg);
+      }
+      to {
+        transform: translateX(-50%) translateY(-50%) rotate(360deg);
+      }
+    }
+  }
+  h3{
+    position: absolute;
+    top: 15%;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    transform: translateY(-15%);
+  }
+}
 .Search-result{
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-evenly;
 }
diff --git a/src/components/assets/scss/FooterSelectMusic.scss b/src/components/assets/scss/FooterSelectMusic.scss
@@ -2,7 +2,7 @@
   width: 100%;
   height: 10vh;
   a{
-    color: #e0e0e0;
+    color: #444;
     text-align: center;
     letter-spacing: 5px;
     text-transform: uppercase;

diff --git a/src/components/fragment/DropDownLanguageList.jsx b/src/components/fragment/DropDownLanguageList.jsx
@@ -12,18 +12,14 @@ const DropDownLanguageList = () => {
     const useStyle = useContext(ThemeContext);
 
     const listOfLanguage = [
+        "Any",
         "Hindi",
         "English",
-        "Punjabi",
-        "Tamil",
-        "Telugu"
     ];
     const [selectedList,setSelectedList] = useState({
+        "Any":false,
         "Hindi": false,
         "English": false,
-        "Punjabi": false,
-        "Tamil": false,
-        "Telugu": false
     });
     const handleSelected = (val,selected) => {
         setSelectedList(prevState => {
@@ -47,7 +43,6 @@ const DropDownLanguageList = () => {
     return(
         <div style={useStyle.component} className="dropdown">
             <div className="dropdown-head">
-                <h3>What music do you like?</h3>
                 <p>Pick the language you want to listen to</p>
             </div>
             <div className={"lang-list"}>

diff --git a/src/components/fragment/FooterSelectMusic.jsx b/src/components/fragment/FooterSelectMusic.jsx
@@ -7,7 +7,7 @@ function FooterSelectMusic() {
     const useStyle = useContext(ThemeContext);
 
     return (
-        <div style={{backgroundColor:useStyle.theme}} className={"Footer_Select_Music"}>
+        <div style={{backgroundColor:useStyle.subTheme}} className={"Footer_Select_Music"}>
             <Link to={"/home"}>
                 Select a music to continue
             </Link>

diff --git a/src/components/fragment/Navigation.jsx b/src/components/fragment/Navigation.jsx
@@ -37,8 +37,7 @@ function Navigation() {
             <Brand/>
             <div className={"navigation"}>
                 <NavigationButton href={"/home"} name={"Home"}/>
-                <NavigationButton href={"/home"} name={"About"}/>
-                {/*<NavigationButton href={"/home/browse"} name={"Browse"}/>*/}
+                <NavigationButton href={"/home/about"} name={"About"}/>
                 {/*<NavigationButton href={"/home/add"} name={"Add"}/>*/}
             </div>
             <SearchBar/>

diff --git a/src/components/fragment/SearchBar.jsx b/src/components/fragment/SearchBar.jsx
@@ -26,7 +26,7 @@ const SearchBar = () => {
     const searchLink = useRef();
     const handleSearch = (e) => {
         e.preventDefault();
-        dispatch(setSearch(searchQuery));
+        dispatch(setSearch(searchQuery.toLowerCase()));
         if (searchQuery !== "")
             searchLink.current.click();
     };

diff --git a/src/components/fragment/SideBar.jsx b/src/components/fragment/SideBar.jsx
@@ -27,10 +27,8 @@ function SideBar() {
                         <Add/>
                     </Button>*/}
                 </p>
-                <SideBarOptions className={"lib-sub"} Icon={PlaylistPlay} title={"All"}/>
-                <SideBarOptions className={"lib-sub"} Icon={PlaylistPlay} title={"English"}/>
-                <SideBarOptions className={"lib-sub"} Icon={PlaylistPlay} title={"Hindi"}/>
-                <SideBarOptions className={"lib-sub"} Icon={PlaylistPlay} title={"Other"}/>
+                <SideBarOptions className={"lib-sub"} Icon={PlaylistPlay} title={"Instrumental"}/>
+                <SideBarOptions className={"lib-sub"} Icon={PlaylistPlay} title={"Electronic"}/>
             </div>
         </aside>
     );