Small Bugfixes:

IssueContent.tsx:
1. Images maintain aspect ratios and have a max height
2. Description field works in light mode

Publish modal resets properly after publish is complete

Deleted Issues no longer show on the Home Page

src/components/EditIssue/EditIssue.tsx

@@ -5,7 +5,7 @@ import {
   CustomInputField,
   ModalBody,
   NewCrowdfundTitle,
-} from "./Upload-styles";
+} from "./EditIssue-styles.tsx";
 import { Box, Modal, Typography, useTheme } from "@mui/material";
 import RemoveIcon from "@mui/icons-material/Remove";
 

src/components/PlaylistListEdit/PlaylistListEdit.tsx

@@ -3,7 +3,7 @@ import { CardContentContainerComment } from "../common/Comments/Comments-styles"
 import {
   CrowdfundSubTitle,
   CrowdfundSubTitleRow,
-} from "../PublishIssue/Upload-styles.tsx";
+} from "../PublishIssue/PublishIssue-styles.tsx";
 import { Box, Button, Input, Typography, useTheme } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";

src/components/Playlists/Playlists.tsx

@@ -3,7 +3,7 @@ import { CardContentContainerComment } from "../common/Comments/Comments-styles"
 import {
   CrowdfundSubTitle,
   CrowdfundSubTitleRow,
-} from "../PublishIssue/Upload-styles.tsx";
+} from "../PublishIssue/PublishIssue-styles.tsx";
 import { Box, Typography, useTheme } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 

src/components/PublishIssue/PublishIssue.tsx

@@ -6,7 +6,7 @@ import {
   ModalBody,
   NewCrowdfundTitle,
   StyledButton,
-} from "./Upload-styles";
+} from "./PublishIssue-styles.tsx";
 import { Box, Modal, Typography, useTheme } from "@mui/material";
 import RemoveIcon from "@mui/icons-material/Remove";
 import ShortUniqueId from "short-unique-id";
@@ -74,8 +74,6 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
     useState<any>(null);
   const [playlistTitle, setPlaylistTitle] = useState<string>("");
   const [playlistDescription, setPlaylistDescription] = useState<string>("");
-  const [selectedCategory, setSelectedCategory] = useState<any>(null);
-  const [selectedSubCategory, setSelectedSubCategory] = useState<any>(null);
 
   const [playlistSetting, setPlaylistSetting] = useState<null | string>(null);
   const [publishes, setPublishes] = useState<any>(null);
@@ -479,12 +477,13 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
             setFiles([]);
             setStep("videos");
             setPlaylistCoverImage(null);
+            setTitle("");
             setPlaylistTitle("");
             setPlaylistDescription("");
-            setSelectedCategory(null);
-            setSelectedSubCategory(null);
+            setDescription("");
             setPlaylistSetting(null);
             categoryListRef.current?.clearCategories();
+            imagePublisherRef.current?.setImageArray([]);
             dispatch(
               setNotification({
                 msg: "Issue published",

src/components/StatsData.tsx

@@ -3,7 +3,7 @@ import { styled } from "@mui/system";
 import { Grid } from "@mui/material";
 import { useSelector } from "react-redux";
 import { RootState } from "../state/store.ts";
-import { useFetchFiles } from "../hooks/useFetchFiles.tsx";
+import { useFetchIssues } from "../hooks/useFetchIssues.tsx";
 
 export const StatsData = () => {
   const StatsCol = styled(Grid)(({ theme }) => ({
@@ -23,7 +23,7 @@ export const StatsData = () => {
     checkNewFiles,
     getFilesFiltered,
     getFilesCount,
-  } = useFetchFiles();
+  } = useFetchIssues();
 
   const totalIssuesPublished = useSelector(
     (state: RootState) => state.global.totalFilesPublished

src/components/common/Comments/CommentSection.tsx

@@ -18,7 +18,7 @@ import { QSUPPORT_COMMENT_BASE } from "../../../constants/Identifiers.ts";
 import {
   CrowdfundSubTitle,
   CrowdfundSubTitleRow,
-} from "../../PublishIssue/Upload-styles.tsx";
+} from "../../PublishIssue/PublishIssue-styles.tsx";
 
 interface CommentSectionProps {
   postId: string;

src/components/common/ImagePublisher/ImagePublisher.tsx

@@ -11,6 +11,7 @@ import { useTheme } from "@mui/material";
 
 export type ImagePublisherRef = {
   getImageArray: () => string[];
+  setImageArray: (imageArray: string[]) => void;
 };
 
 interface ImagePublisherProps {
@@ -27,6 +28,9 @@ export const ImagePublisher = React.forwardRef<
     getImageArray: () => {
       return imageArray;
     },
+    setImageArray: (imageArray: string[]) => {
+      setImageArray(imageArray);
+    },
   }));
 
   return (

src/hooks/useFetchIssues.tsx

@@ -3,30 +3,30 @@ import { useDispatch, useSelector } from "react-redux";
 import {
   addFiles,
   addToHashMap,
+  removeFromHashMap,
   setCountNewFiles,
   upsertFiles,
   upsertFilesBeginning,
-  Video,
   upsertFilteredFiles,
+  Video,
 } from "../state/features/fileSlice.ts";
 import {
+  setFilesPerNamePublished,
   setIsLoadingGlobal,
-  setUserAvatarHash,
   setTotalFilesPublished,
   setTotalNamesPublished,
-  setFilesPerNamePublished,
+  setUserAvatarHash,
 } from "../state/features/globalSlice";
 import { RootState } from "../state/store";
-import { fetchAndEvaluateVideos } from "../utils/fetchVideos";
+import { fetchAndEvaluateIssues } from "../utils/fetchVideos";
 import {
-  QSUPPORT_PLAYLIST_BASE,
   QSUPPORT_FILE_BASE,
+  QSUPPORT_PLAYLIST_BASE,
 } from "../constants/Identifiers.ts";
-import { RequestQueue } from "../utils/queue";
 import { queue } from "../wrappers/GlobalWrapper";
 import { getCategoriesFetchString } from "../components/common/CategoryList/CategoryList.tsx";
 
-export const useFetchFiles = () => {
+export const useFetchIssues = () => {
   const dispatch = useDispatch();
   const hashMapFiles = useSelector(
     (state: RootState) => state.file.hashMapFiles
@@ -49,7 +49,7 @@ export const useFetchFiles = () => {
     (state: RootState) => state.global.filesPerNamePublished
   );
 
-  const checkAndUpdateFile = React.useCallback(
+  const checkAndUpdateIssue = React.useCallback(
     (video: Video) => {
       const existingVideo = hashMapFiles[video.id];
       if (!existingVideo) {
@@ -85,27 +85,29 @@ export const useFetchFiles = () => {
     } catch (error) {}
   }, []);
 
-  const getFile = async (
+  const getIssue = async (
     user: string,
-    videoId: string,
+    issueID: string,
     content: any,
     retries: number = 0
   ) => {
     try {
-      const res = await fetchAndEvaluateVideos({
+      const res = await fetchAndEvaluateIssues({
         user,
-        videoId,
+        videoId: issueID,
         content,
       });
-
-      dispatch(addToHashMap(res));
+      console.log("response is: ", res);
+      res?.isValid
+        ? dispatch(addToHashMap(res))
+        : dispatch(removeFromHashMap(issueID));
     } catch (error) {
       retries = retries + 1;
       if (retries < 2) {
         // 3 is the maximum number of retries here, you can adjust it to your needs
-        queue.push(() => getFile(user, videoId, content, retries + 1));
+        queue.push(() => getIssue(user, issueID, content, retries + 1));
       } else {
-        console.error("Failed to get video after 3 attempts", error);
+        console.error("Failed to get issue after 3 attempts", error);
       }
     }
   };
@@ -172,9 +174,9 @@ export const useFetchFiles = () => {
       }, 1000);
       for (const content of structureData) {
         if (content.user && content.id) {
-          const res = checkAndUpdateFile(content);
+          const res = checkAndUpdateIssue(content);
           if (res) {
-            queue.push(() => getFile(content.user, content.id, content));
+            queue.push(() => getIssue(content.user, content.id, content));
           }
         }
       }
@@ -269,9 +271,9 @@ export const useFetchFiles = () => {
         }
         for (const content of structureData) {
           if (content.user && content.id) {
-            const res = checkAndUpdateFile(content);
+            const res = checkAndUpdateIssue(content);
             if (res) {
-              queue.push(() => getFile(content.user, content.id, content));
+              queue.push(() => getIssue(content.user, content.id, content));
             }
           }
         }
@@ -330,9 +332,9 @@ export const useFetchFiles = () => {
 
         for (const content of structureData) {
           if (content.user && content.id) {
-            const res = checkAndUpdateFile(content);
+            const res = checkAndUpdateIssue(content);
             if (res) {
-              queue.push(() => getFile(content.user, content.id, content));
+              queue.push(() => getIssue(content.user, content.id, content));
             }
           }
         }
@@ -410,8 +412,8 @@ export const useFetchFiles = () => {
 
   return {
     getFiles,
-    checkAndUpdateFile,
-    getFile,
+    checkAndUpdateFile: checkAndUpdateIssue,
+    getFile: getIssue,
     hashMapFiles,
     getNewFiles,
     checkNewFiles,

src/pages/Home/FileListComponentLevel.tsx

@@ -5,7 +5,7 @@ import { RootState } from "../../state/store";
 import AttachFileIcon from "@mui/icons-material/AttachFile";
 
 import { Avatar, Box, Skeleton, useTheme } from "@mui/material";
-import { useFetchFiles } from "../../hooks/useFetchFiles.tsx";
+import { useFetchIssues } from "../../hooks/useFetchIssues.tsx";
 import LazyLoad from "../../components/common/LazyLoad";
 import {
   BottomParent,
@@ -41,7 +41,7 @@ export const FileListComponentLevel = ({ mode }: VideoListProps) => {
 
   const navigate = useNavigate();
   const { getFile, getNewFiles, checkNewFiles, checkAndUpdateFile } =
-    useFetchFiles();
+    useFetchIssues();
 
   const getVideos = React.useCallback(async () => {
     try {

src/pages/Home/Home.tsx

@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../../state/store";
 import { IssueList } from "./IssueList.tsx";
 import { Box, Grid, Input, useTheme } from "@mui/material";
-import { useFetchFiles } from "../../hooks/useFetchFiles.tsx";
+import { useFetchIssues } from "../../hooks/useFetchIssues.tsx";
 import LazyLoad from "../../components/common/LazyLoad";
 import { FiltersCol, FiltersContainer } from "./IssueList-styles.tsx";
 import { SubtitleContainer, ThemeButton } from "./Home-styles";
@@ -87,7 +87,7 @@ export const Home = ({ mode }: HomeProps) => {
     checkNewFiles,
     getFilesFiltered,
     getFilesCount,
-  } = useFetchFiles();
+  } = useFetchIssues();
 
   const getFilesHandler = React.useCallback(
     async (reset?: boolean, resetFilers?: boolean) => {
@@ -314,7 +314,7 @@ export const Home = ({ mode }: HomeProps) => {
               maxWidth: "1400px",
             }}
           ></SubtitleContainer>
-          <IssueList files={videos} />
+          <IssueList issues={videos} />
           <LazyLoad
             onLoadMore={getFilesHandler}
             isLoading={isLoading}

src/pages/Home/IssueList.tsx

@@ -20,17 +20,17 @@ import BlockIcon from "@mui/icons-material/Block";
 import AttachFileIcon from "@mui/icons-material/AttachFile";
 import { formatBytes } from "../IssueContent/IssueContent.tsx";
 import { formatDate } from "../../utils/time.ts";
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../../state/store.ts";
 import { useNavigate } from "react-router-dom";
 import { getIconsFromObject } from "../../constants/Categories/CategoryFunctions.ts";
 
 interface FileListProps {
-  files: Video[];
+  issues: Video[];
 }
-export const IssueList = ({ files }: FileListProps) => {
-  const hashMapFiles = useSelector(
+export const IssueList = ({ issues }: FileListProps) => {
+  const hashMapIssues = useSelector(
     (state: RootState) => state.file.hashMapFiles
   );
 
@@ -55,10 +55,14 @@ export const IssueList = ({ files }: FileListProps) => {
     } catch (error) {}
   };
 
+  const filteredIssues = useMemo(() => {
+    return issues.filter((issue: any) => hashMapIssues[issue.id]?.isValid);
+  }, [issues, hashMapIssues]);
+
   return (
     <FileContainer>
-      {files.map((file: any, index: number) => {
-        const existingFile = hashMapFiles[file?.id];
+      {filteredIssues.map((file: any, index: number) => {
+        const existingFile = hashMapIssues[file?.id];
         let hasHash = false;
         let fileObj = file;
         if (existingFile) {

src/pages/IssueContent/IssueContent.tsx

@@ -412,9 +412,13 @@ export const IssueContent = () => {
               return (
                 <img
                   src={image}
-                  width={`${1280 / fileData.images.length}px`}
-                  height={"480px"}
-                  style={{ marginRight: "10px", marginBottom: "10px" }}
+                  width={`${1080 / fileData.images.length}px`}
+                  style={{
+                    marginRight: "10px",
+                    marginBottom: "10px",
+                    objectFit: "contain",
+                    maxHeight: "50vh",
+                  }}
                 />
               );
             })}
@@ -422,7 +426,7 @@ export const IssueContent = () => {
         <Spacer height="15px" />
         <Box
           sx={{
-            background: "#333333",
+            background: theme.palette.mode === "dark" ? "#333333" : "#CCCCCC",
             borderRadius: "5px",
             padding: "5px",
             width: "100%",

src/utils/fetchVideos.ts

@@ -1,36 +1,35 @@
-import { checkStructure } from './checkStructure'
+import { checkStructure } from "./checkStructure";
 
-export const fetchAndEvaluateVideos = async (data: any) => {
+export const fetchAndEvaluateIssues = async (data: any) => {
   const getVideo = async () => {
-    const { user, videoId, content } = data
+    const { user, videoId, content } = data;
     let obj: any = {
       ...content,
-      isValid: false
-    }
+      isValid: false,
+    };
 
-    if (!user || !videoId) return obj
+    if (!user || !videoId) return obj;
 
     try {
-
       const responseData = await qortalRequest({
-        action: 'FETCH_QDN_RESOURCE',
+        action: "FETCH_QDN_RESOURCE",
         name: user,
-        service: content?.service || 'DOCUMENT',
-        identifier: videoId
-      })
+        service: content?.service || "DOCUMENT",
+        identifier: videoId,
+      });
       if (checkStructure(responseData)) {
         obj = {
           ...content,
           ...responseData,
-          isValid: true
-        }
+          isValid: true,
+        };
       }
-      return obj
+      return obj;
     } catch (error: any) {
-      throw new Error(error?.message || 'error')
+      throw new Error(error?.message || "error");
     }
-  }
+  };
 
-  const res = await getVideo()
-  return res
-}
+  const res = await getVideo();
+  return res;
+};