handle tags and no results

AlphadayHQ · Feb 8, 2024 · 113ccea · 113ccea
1 parent 1c0bce3
commit 113ccea
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 23 deletions.
diff --git a/packages/frontend/src/components/media/MediaModule.tsx b/packages/frontend/src/components/media/MediaModule.tsx
@@ -1,5 +1,6 @@
 import { FC, memo, useEffect, useRef } from "react";
-import { ModuleLoader } from "@alphaday/ui-kit";
+import { CenteredBlock, ModuleLoader } from "@alphaday/ui-kit";
+import globalMessages from "src/globalMessages";
 
 interface IMedia {
     title: string;
@@ -28,26 +29,39 @@ const MediaModule: FC<IMedia> = memo(function MediaModule({
         return () => clearTimeout(timeout);
     }, []);
 
-    return isLoading ? (
-        <ModuleLoader $height="300px" />
-    ) : (
-        <iframe
-            src={entryUrl}
-            title={title}
-            allow="autoplay; encrypted-media"
-            className="w-full border-none"
-            style={{
-                height: "410px",
-                visibility: "hidden",
-            }}
-            allowFullScreen
-            ref={frameRef}
-            onLoad={() => {
-                if (frameRef.current) {
-                    frameRef.current.style.visibility = "visible";
-                }
-            }}
-        />
+    if (isLoading) {
+        return <ModuleLoader $height="410px" />;
+    }
+
+    if (entryUrl) {
+        return (
+            <iframe
+                src={entryUrl}
+                title={title}
+                allow="autoplay; encrypted-media"
+                className="w-full border-none"
+                style={{
+                    height: "410px",
+                    visibility: "hidden",
+                }}
+                allowFullScreen
+                ref={frameRef}
+                onLoad={() => {
+                    if (frameRef.current) {
+                        frameRef.current.style.visibility = "visible";
+                    }
+                }}
+            />
+        );
+    }
+    return (
+        <div style={{ height: "410px" }}>
+            <CenteredBlock>
+                <p className="text-primary fontGroup-highlightSemi">
+                    {globalMessages.queries.noMatchFound("video")}
+                </p>
+            </CenteredBlock>
+        </div>
     );
 });
 

diff --git a/packages/frontend/src/containers/media/MediaContainer.tsx b/packages/frontend/src/containers/media/MediaContainer.tsx
@@ -17,7 +17,7 @@ const MediaContainer: FC<IModuleContainer<TSourceData[]>> = ({
             EWidgetSettingsRegistry.IncludedTags
     )?.tags;
 
-    const { currentData: latestVideo } = useGetLatestVideoQuery(
+    const { currentData: latestVideo, isFetching } = useGetLatestVideoQuery(
         {
             tags: tags ? filteringListToStr(tags) : undefined,
         },
@@ -64,7 +64,7 @@ const MediaContainer: FC<IModuleContainer<TSourceData[]>> = ({
 
     return (
         <MediaModule
-            isLoading={!moduleData}
+            isLoading={!moduleData || isFetching}
             entryUrl={entryUrl || ""}
             title={moduleData.widget.name}
         />