ref(channel): no videos found component

Zibbp · Jan 24, 2023 · 70aa513 · 70aa513
1 parent 51a8407
commit 70aa513
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 14 deletions.
diff --git a/src/components/Channel/NoVideosFound.tsx b/src/components/Channel/NoVideosFound.tsx
@@ -0,0 +1,15 @@
+import { Center, Image } from "@mantine/core";
+import React from "react";
+
+const ChannelNoVideosFound = () => {
+  return (
+    <div>
+      <Center>
+        No videos found
+        <Image src="/images/Sadge.webp" ml={5} height={19} width={27} />
+      </Center>
+    </div>
+  );
+};
+
+export default ChannelNoVideosFound;
diff --git a/src/pages/channels/[channelName].tsx b/src/pages/channels/[channelName].tsx
@@ -18,6 +18,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
 import { useEffect, useRef, useState } from "react";
 import { ChannelHeader } from "../../components/Channel/Header";
+import ChannelNoVideosFound from "../../components/Channel/NoVideosFound";
 import GanymedeLoader from "../../components/Utils/GanymedeLoader";
 import { VodCard } from "../../components/Vod/Card";
 import { useApi } from "../../hooks/useApi";
@@ -174,12 +175,7 @@ const ChannelPage = (props: any) => {
               </Center>
             </Container>
           ) : (
-            <div>
-              <Center>
-                No videos found
-                <Image src="/images/Sadge.webp" ml={5} height={19} width={27} />
-              </Center>
-            </div>
+            <ChannelNoVideosFound />
           )}
         </div>
       )}

diff --git a/src/pages/playlists/[playlistId].tsx b/src/pages/playlists/[playlistId].tsx
@@ -2,6 +2,7 @@ import { Center, Container, Grid, Image, Modal } from "@mantine/core";
 import { useDocumentTitle } from "@mantine/hooks";
 import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
+import ChannelNoVideosFound from "../../components/Channel/NoVideosFound";
 import DeletePlaylistModal from "../../components/Playlist/DeletePlaylistModal";
 import EditPlaylistModal from "../../components/Playlist/EditPlaylistModal";
 import PlaylistHeader from "../../components/Playlist/Header";
@@ -65,12 +66,7 @@ const PlaylistPage = (props: any) => {
           </div>
         </Container>
       ) : (
-        <div>
-          <Center>
-            No VODs found{" "}
-            <Image src="/images/Sadge.webp" ml={5} height={28} width={28} />
-          </Center>
-        </div>
+        <ChannelNoVideosFound />
       )}
       <Modal
         opened={opened}

diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx
@@ -13,11 +13,16 @@ import { useDocumentTitle } from "@mantine/hooks";
 import { IconSearch } from "@tabler/icons";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import React, { useEffect, useRef, useState } from "react";
+import ChannelNoVideosFound from "../../components/Channel/NoVideosFound";
 import GanymedeLoader from "../../components/Utils/GanymedeLoader";
 import { VodCard } from "../../components/Vod/Card";
 import { useApi } from "../../hooks/useApi";
 
-const SearchPage = (props) => {
+interface SearchPageProps {
+  q: string;
+}
+
+const SearchPage = (props: SearchPageProps) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [displaySearchTerm, setDisplaySearchTerm] = useState("");
   const [page, setPage] = useState(1);
@@ -85,7 +90,7 @@ const SearchPage = (props) => {
         </Center>
 
         {isLoading && <GanymedeLoader />}
-        {!isLoading && data && (
+        {!isLoading && data && data.data.length > 0 ? (
           <div>
             <div>
               <Grid mt={10}>
@@ -137,6 +142,10 @@ const SearchPage = (props) => {
               </div>
             </Center>
           </div>
+        ) : (
+          <div style={{ marginTop: "1rem" }}>
+            <ChannelNoVideosFound />
+          </div>
         )}
       </Container>
     </div>