loader for search

mihir224 · Sep 30, 2023 · 94d6179 · 94d6179
1 parent 9a440e2
commit 94d6179
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 11 deletions.
diff --git a/client/src/components/Search.js b/client/src/components/Search.js
@@ -2,27 +2,60 @@ import React,{useState,useEffect} from "react";
 import {useLocation} from "react-router-dom";
 import axios from "axios";
 import Card from './Card';
+import { Oval } from 'react-loader-spinner';
+import {useSelector} from "react-redux";
 
 function Search(){
+    const showNav=useSelector(state=>state.navbar.open);
     const[videos,setVideos] =useState([]);
+    const [isLoading,setLoading]=useState(false);
+    const [found,setFound]=useState(false);
     const query=useLocation().search;
     useEffect(()=>{
+        setLoading(true);
         (async ()=>{
             try{
                 const url=process.env.NODE_ENV==="production"?"https://youtube-clone-api224.onrender.com/api":"";
                 const res=await axios.get(`${url}/videos/search${query}`,{withCredentials: true});
-                setVideos(res.data);
+                if(res.data.length===0){
+                    setFound(false);
+                }
+                else{
+                    setVideos(res.data);
+                    setFound(true);
+                }
+                setLoading(false);
             }
             catch(err){
                 console.log(err);
             }
         })();
-    },[]);
-    return(
+    },[query]);
+    return (
         <div id='cards' style={{display:'flex',alignItems:'flex-start', justifyContent:'center'}}>
-            {videos?.map((video) => {
-                return <Card key={video._id} video={video} />;
-            })}
+        {
+            isLoading?(
+            <div style={{paddingTop:`${showNav?"":"170px"}`}}>
+                <Oval
+                height={80}
+                width={80}
+                color="white"
+                wrapperStyle={{}}
+                wrapperClass=""
+                visible={true}
+                ariaLabel='oval-loading'
+                secondaryColor="grey"
+                strokeWidth={2}
+                strokeWidthSecondary={2}
+                />
+            </div>
+            ):
+            (found?(videos?.map((video) => {
+                return <Card key={video._id} video={video} />
+            })):
+            (<h2 style={{textAlign:'center',color:'white',fontFamily:'inherit'}}>Sorry! Couldn't find any matching results.</h2>)
+            )
+        }
         </div>
     )
 }

diff --git a/client/src/components/Searchbar.js b/client/src/components/Searchbar.js
@@ -1,4 +1,4 @@
-import React, { useState,useEffect } from "react";
+import React, { useState } from "react";
 import "../styles/Searchbar.css";
 import { Link, useNavigate } from "react-router-dom"
 import logo from "../images/logo.png";
@@ -20,9 +20,9 @@ function Searchbar(){
     const currentUser=useSelector(state=>state.user.currentUser); 
     const uploadOpen=useSelector(state=>state.navbar.uploadOpen);
     const [query,setQuery]=useState("");
-    useEffect(()=>{
-        console.log(query);
-    },[query])
+    // useEffect(()=>{
+    //     console.log(query);
+    // },[query])
     const customStyling={
         background:`url(${currentUser?.img}) no-repeat`,
         backgroundSize:"40px",
@@ -41,7 +41,7 @@ function Searchbar(){
         <div id="logo-container">
                 <div id="hamburger" onClick={()=>dispatch(setOpen())}><button type='button' className='nav-btn'><MenuIcon id="icon"/></button></div>
                 <Link to="/" style={{textDecoration: "none",fontSize: "14px"}}><div id="logo">
-                    <img src={logo} height="25" width="40"></img><h2>MS Tube</h2>
+                    <img src={logo} height="25" width="40" alt="logo"></img><h2>MS Tube</h2>
                 </div></Link>
             </div>
             <div id="search-area">