Deleted videos no longer appear on Home Page.

src/components/Publish/EditPlaylist/EditPlaylist.tsx

@@ -31,7 +31,7 @@ import AddBoxIcon from "@mui/icons-material/AddBox";
 import { useDropzone } from "react-dropzone";
 
 import { setNotification } from "../../../state/features/notificationsSlice.ts";
-import { objectToBase64, uint8ArrayToBase64 } from "../../../utils/toBase64.ts";
+import { objectToBase64, uint8ArrayToBase64 } from "../../../utils/PublishFormatter.ts";
 import { RootState } from "../../../state/store.ts";
 import {
   upsertVideosBeginning,

src/components/Publish/EditVideo/EditVideo.tsx

@@ -35,7 +35,7 @@ import AddBoxIcon from "@mui/icons-material/AddBox";
 import { useDropzone } from "react-dropzone";
 
 import { setNotification } from "../../../state/features/notificationsSlice.ts";
-import { objectToBase64, objectToFile, uint8ArrayToBase64 } from "../../../utils/toBase64.ts";
+import { objectToBase64, objectToFile, uint8ArrayToBase64 } from "../../../utils/PublishFormatter.ts";
 import { RootState } from "../../../state/store.ts";
 import {
   upsertVideosBeginning,

src/components/Publish/PublishVideo/PublishVideo.tsx

@@ -38,7 +38,7 @@ import { useDropzone } from "react-dropzone";
 import AddIcon from "@mui/icons-material/Add";
 
 import { setNotification } from "../../../state/features/notificationsSlice.ts";
-import { objectToBase64, objectToFile, uint8ArrayToBase64 } from "../../../utils/toBase64.ts";
+import { objectToBase64, objectToFile, uint8ArrayToBase64 } from "../../../utils/PublishFormatter.ts";
 import { RootState } from "../../../state/store.ts";
 import {
   upsertVideosBeginning,

src/components/common/Comments/CommentEditor.tsx

@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../../../state/store";
 import ShortUniqueId from "short-unique-id";
 import { setNotification } from "../../../state/features/notificationsSlice";
-import { toBase64 } from "../../../utils/toBase64";
+import { publishFormatter } from "../../../utils/PublishFormatter.ts";
 import localforage from "localforage";
 import {
   CommentInput,

src/components/common/ContentButtons/LikeAndDislike.tsx

@@ -7,7 +7,7 @@ import { Box, Tooltip } from "@mui/material";
 import { useDispatch, useSelector } from "react-redux";
 import { setNotification } from "../../../state/features/notificationsSlice.ts";
 import ShortUniqueId from "short-unique-id";
-import { objectToBase64 } from "../../../utils/toBase64.ts";
+import { objectToBase64 } from "../../../utils/PublishFormatter.ts";
 import { RootState } from "../../../state/store.ts";
 import { FOR, FOR_LIKE, LIKE_BASE } from "../../../constants/Identifiers.ts";
 import {

src/components/common/ContentButtons/SuperLike.tsx

@@ -21,7 +21,7 @@ import { MultiplePublish } from "../../Publish/MultiplePublish/MultiplePublishAl
 import { useDispatch, useSelector } from "react-redux";
 import { setNotification } from "../../../state/features/notificationsSlice.ts";
 import ShortUniqueId from "short-unique-id";
-import { objectToBase64 } from "../../../utils/toBase64.ts";
+import { objectToBase64 } from "../../../utils/PublishFormatter.ts";
 import { minPriceSuperlike } from "../../../constants/Misc.ts";
 import { CommentInput } from "../Comments/Comments-styles.tsx";
 import {

src/components/common/SuperLikesList/CommentEditor.tsx

@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../../../state/store";
 import ShortUniqueId from "short-unique-id";
 import { setNotification } from "../../../state/features/notificationsSlice";
-import { objectToBase64, toBase64 } from "../../../utils/toBase64";
+import { objectToBase64, publishFormatter } from "../../../utils/PublishFormatter.ts";
 import localforage from "localforage";
 import {
   CommentInput,

src/hooks/useFetchVideos.tsx

@@ -7,7 +7,7 @@ import {
   upsertVideos,
   upsertVideosBeginning,
   Video,
-  upsertFilteredVideos,
+  upsertFilteredVideos, removeFromHashMap,
 } from "../state/features/videoSlice";
 import {
   setIsLoadingGlobal,
@@ -100,8 +100,11 @@ export const useFetchVideos = () => {
         videoId,
         content,
       });
-
-      dispatch(addToHashMap(res));
+      if (res?.isValid) {
+        dispatch(addToHashMap(res));
+      } else {
+        dispatch(removeFromHashMap(videoId));
+      }
     } catch (error) {
       retries = retries + 1;
       if (retries < 2) {

src/pages/Home/VideoList.tsx

@@ -1,3 +1,15 @@
+import BlockIcon from "@mui/icons-material/Block";
+import EditIcon from "@mui/icons-material/Edit";
+import { Avatar, Box, Tooltip, useTheme } from "@mui/material";
+import React, { useMemo, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { PlaylistSVG } from "../../assets/svgs/PlaylistSVG.tsx";
+import ResponsiveImage from "../../components/ResponsiveImage.tsx";
+import { blockUser, setEditPlaylist, setEditVideo, Video } from "../../state/features/videoSlice.ts";
+import { RootState } from "../../state/store.ts";
+import { formatDate } from "../../utils/time.ts";
+import { VideoCardImageContainer } from "./VideoCardImageContainer.tsx";
 import {
   BlockIconContainer,
   BottomParent,
@@ -10,23 +22,7 @@ import {
   VideoCardTitle,
   VideoUploadDate,
 } from "./VideoList-styles.tsx";
-import { Avatar, Box, Tooltip, useTheme } from "@mui/material";
-import EditIcon from "@mui/icons-material/Edit";
-import {
-  blockUser,
-  setEditPlaylist,
-  setEditVideo,
-} from "../../state/features/videoSlice.ts";
-import BlockIcon from "@mui/icons-material/Block";
-import ResponsiveImage from "../../components/ResponsiveImage.tsx";
-import { formatDate } from "../../utils/time.ts";
-import { PlaylistSVG } from "../../assets/svgs/PlaylistSVG.tsx";
-import { VideoCardImageContainer } from "./VideoCardImageContainer.tsx";
-import React, { useState } from "react";
-import { Video } from "../../state/features/videoSlice.ts";
-import { useDispatch, useSelector } from "react-redux";
-import { RootState } from "../../state/store.ts";
-import { useNavigate } from "react-router-dom";
+
 interface VideoListProps {
   videos: Video[];
 }
@@ -59,12 +55,16 @@ export const VideoList = ({ videos }: VideoListProps) => {
       if (response === true) {
         dispatch(blockUser(user));
       }
-    } catch (error) {}
+    } catch (error) {console.log(error)}
   };
 
+  const filteredVideos = useMemo(() => {
+    return videos.filter((video: Video) => hashMapVideos[`${video.id}-${video.user}`]?.isValid);
+  }, [videos, hashMapVideos]);
+
   return (
     <VideoCardContainer>
-      {videos.map((video: any) => {
+      {filteredVideos.map((video: any) => {
         const fullId = video ? `${video.id}-${video.user}` : undefined;
         const existingVideo = hashMapVideos[fullId];
         let hasHash = false;

src/utils/PublishFormatter.ts

@@ -1,4 +1,4 @@
-export const toBase64 = (file: File): Promise<string | ArrayBuffer | null> =>
+export const publishFormatter = (file: File): Promise<string | ArrayBuffer | null> =>
   new Promise((resolve, reject) => {
     const reader = new FileReader()
     reader.readAsDataURL(file)

src/utils/fetchVideos.ts

@@ -18,7 +18,7 @@ export const fetchAndEvaluateVideos = async (data: any) => {
         service: content?.service || 'DOCUMENT',
         identifier: videoId
       })
-      if (checkStructure(responseData)) {
+      if (responseData) {
         obj = {
           ...content,
           ...responseData,