more cleanup

src/components/Dataform/index.tsx

@@ -3,17 +3,14 @@ import Folders from "../Folders";
 import { useFiles, useQuickFiles, useUploader } from "../../hooks/files";
 import { useInfiniteScroll } from "../../hooks/infiniteScroll";
 import Files from "../Files";
-import { memo, useCallback, useEffect, useRef, useState } from "react";
-import SpinnerPage from "../SpinnerPage";
-import SearchBar from "../SearchBar";
+import { memo, useCallback, useEffect, useState } from "react";
+import Spinner from "../Spinner";
 import { useAppDispatch } from "../../hooks/store";
-import { startAddFile } from "../../actions/files";
 import { useParams } from "react-router-dom";
 import classNames from "classnames";
 import { useDragAndDrop } from "../../hooks/utils";
 import MultiSelectBar from "../MultiSelectBar";
 import { useFolders } from "../../hooks/folders";
-import { FileInterface } from "../../types/file";
 
 const DataForm = memo(() => {
   const {
@@ -89,7 +86,7 @@ const DataForm = memo(() => {
 
       {isLoading && (
         <div className="w-full flex justify-center items-center h-full">
-          <SpinnerPage />
+          <Spinner />
         </div>
       )}
       {/* @ts-ignore  */}
@@ -98,7 +95,7 @@ const DataForm = memo(() => {
       {/* TODO: Change this spinner name */}
       {isFetchingNextPage && (
         <div className="w-full flex justify-center items-center mt-4">
-          <SpinnerPage />
+          <Spinner />
         </div>
       )}
     </div>

src/components/DownloadPage/index.tsx

@@ -6,7 +6,7 @@ import {
   getPublicFileInfoAPI,
 } from "../../api/filesAPI";
 import { toast, ToastContainer } from "react-toastify";
-import SpinnerPage from "../SpinnerPage";
+import Spinner from "../Spinner";
 import moment from "moment";
 import { getFileColor, getFileExtension } from "../../utils/files";
 import { FileInterface } from "../../types/file";
@@ -41,7 +41,7 @@ const PublicDownloadPage = () => {
   if (!file) {
     return (
       <div className="w-screen h-screen flex justify-center items-center">
-        <SpinnerPage />
+        <Spinner />
         <ToastContainer position="bottom-right" />
       </div>
     );

src/components/Homepage/index.tsx

@@ -1,10 +1,6 @@
 import Header from "../Header";
 import MainSection from "../MainSection";
 import Uploader from "../Uploader";
-import React from "react";
-import HomepageSpinner from "../HomepageSpinner";
-import MobileContextMenuContainer from "../MobileContextMenu";
-import PhotoViewer from "../PhotoViewer";
 import { useAppSelector } from "../../hooks/store";
 import { ToastContainer } from "react-toastify";
 
@@ -15,8 +11,6 @@ const Homepage = () => {
 
   return (
     <div>
-      <HomepageSpinner />
-
       <div className="">
         <Header />
         <div className="flex space-between">

src/components/LoginPage/index.tsx

@@ -6,7 +6,7 @@ import { setUser } from "../../reducers/user";
 import { useAppDispatch } from "../../hooks/store";
 import { capitalize } from "lodash";
 import AlertIcon from "../../icons/AlertIcon";
-import SpinnerPage from "../SpinnerPage";
+import Spinner from "../Spinner";
 import classNames from "classnames";
 import { toast, ToastContainer } from "react-toastify";
 
@@ -131,7 +131,7 @@ const LoginPage = () => {
       <div>
         <div className="w-screen h-screen flex justify-center items-center">
           <div>
-            <SpinnerLogin />
+            <Spinner />
           </div>
         </div>
       </div>
@@ -152,7 +152,7 @@ const LoginPage = () => {
               {!loadingLogin && (
                 <img src="/images/icon.png" alt="logo" className="w-[45px]" />
               )}
-              {loadingLogin && <SpinnerPage />}
+              {loadingLogin && <Spinner />}
             </div>
           </div>
           <form onSubmit={onSubmit}>

src/components/MainSection/index.tsx

@@ -1,10 +1,7 @@
 import DataForm from "../Dataform";
 import RightSection from "../RightSection";
-import MoverMenu from "../MoverMenu";
-import PopupWindow from "../PopupWindow";
-import React, { memo } from "react";
+import { memo } from "react";
 import LeftSection from "../LeftSection";
-import { useSelector } from "react-redux";
 import { useUtils } from "../../hooks/utils";
 import Medias from "../Medias";
 import { useAppSelector } from "../../hooks/store";

src/components/PhotoViewer/PhotoViewer.jsx

@@ -1,22 +0,0 @@
-import React from "react";
-import Spinner from "../Spinner";
-
-const PhotoViewer = (props) => (
-  <div className="photoviewer z-50">
-    <img
-      className="photoviewer__close-button"
-      onClick={props.closePhotoViewer}
-      src="/images/close-white-png.png"
-    />
-
-    {props.state.image === "" ? (
-      <div className="photoviewer__loader">
-        <Spinner />
-      </div>
-    ) : (
-      <img className="photoviewer__image" src={props.state.image} />
-    )}
-  </div>
-);
-
-export default PhotoViewer;

src/components/PhotoViewer/index.jsx

@@ -1,55 +0,0 @@
-import PhotoViewer from "./PhotoViewer";
-import { connect } from "react-redux";
-import env from "../../enviroment/envFrontEnd";
-import React from "react";
-import { resetPhotoID } from "../../actions/photoViewer";
-import axios from "../../axiosInterceptor";
-
-class PhotoViewerContainer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      image: "",
-    };
-  }
-
-  closePhotoViewer = () => {
-    this.props.dispatch(resetPhotoID());
-  };
-
-  componentDidMount = () => {
-    const config = {
-      responseType: "arraybuffer",
-    };
-
-    // TODO: Fix URL
-    const url = `http://localhost:5173/api/file-service/full-thumbnail/${this.props.photoID}`;
-    axios.get(url, config).then((response) => {
-      const imgFile = new Blob([response.data]);
-      const imgUrl = URL.createObjectURL(imgFile);
-
-      this.setState(() => ({
-        ...this.state,
-        image: imgUrl,
-      }));
-    });
-  };
-
-  render() {
-    return (
-      <PhotoViewer
-        closePhotoViewer={this.closePhotoViewer}
-        state={this.state}
-      />
-    );
-  }
-}
-
-const connectStateToProp = (state) => ({
-  photoID: state.photoViewer.id,
-  isGoogle: state.photoViewer.isGoogle,
-  isPersonal: state.photoViewer.isPersonal,
-});
-
-export default connect(connectStateToProp)(PhotoViewerContainer);

src/components/PhotoViewerPopup/index.tsx

@@ -10,17 +10,19 @@ import ActionsIcon from "../../icons/ActionsIcon";
 import { useContextMenu } from "../../hooks/contextMenu";
 import ContextMenu from "../ContextMenu";
 import { resetPopupSelect, setPopupSelect } from "../../reducers/selected";
-import { useClickOutOfBounds } from "../../hooks/utils";
 import CircleLeftIcon from "../../icons/CircleLeftIcon";
 import CircleRightIcon from "../../icons/CircleRightIcon";
 import { useFiles, useQuickFiles } from "../../hooks/files";
 import { FileInterface } from "../../types/file";
 import { InfiniteData } from "react-query";
 import { getFileColor, getFileExtension } from "../../utils/files";
+import Spinner from "../Spinner";
+import { toast } from "react-toastify";
 
 const PhotoViewerPopup = memo(() => {
   const [image, setImage] = useState("");
   const [video, setVideo] = useState("");
+  const [loading, setLoading] = useState(false);
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const file = useAppSelector((state) => state.selected.popupModal.file)!;
   const type = useAppSelector((state) => state.selected.popupModal.type)!;
@@ -49,33 +51,33 @@ const PhotoViewerPopup = memo(() => {
     [file.filename]
   );
 
-  console.log("rerender");
-
-  const outOfBoundsClick = useCallback(
-    (e: any) => {
-      console.log("out of bounds click", e);
-      if (e?.target?.id !== "outer-wrapper") return;
-      console.log("out of bounds click2");
-      dispatch(resetPopupSelect());
-    },
-    [resetPopupSelect]
-  );
-
-  const { wrapperRef } = useClickOutOfBounds(outOfBoundsClick);
-
   const getImage = useCallback(async () => {
-    const imageData = await getFileFullThumbnailAPI(file._id);
-    const imgFile = new Blob([imageData]);
-    const imgUrl = URL.createObjectURL(imgFile);
-    setImage(imgUrl);
+    try {
+      setLoading(true);
+      const imageData = await getFileFullThumbnailAPI(file._id);
+      const imgFile = new Blob([imageData]);
+      const imgUrl = URL.createObjectURL(imgFile);
+      setImage(imgUrl);
+      setLoading(false);
+    } catch (e) {
+      console.log("Error getting image", e);
+      toast.error("Error getting image");
+    }
   }, [file._id, getFileFullThumbnailAPI]);
 
   const getVideo = useCallback(async () => {
-    // TODO: Change this
-    await getVideoTokenAPI();
-    const videoURL = `http://localhost:5173/api/file-service/stream-video/${file._id}`;
-    console.log("video url", videoURL);
-    setVideo(videoURL);
+    try {
+      setLoading(true);
+      // TODO: Change this
+      await getVideoTokenAPI();
+      const videoURL = `http://localhost:5173/api/file-service/stream-video/${file._id}`;
+      console.log("video url", videoURL);
+      setVideo(videoURL);
+      setLoading(false);
+    } catch (e) {
+      console.log("Error getting video", e);
+      toast.error("Error getting video");
+    }
   }, [file._id, getVideoTokenAPI]);
 
   const cleanUpVideo = useCallback(async () => {
@@ -293,17 +295,15 @@ const PhotoViewerPopup = memo(() => {
           className="pointer text-white w-[45px] h-[45px] desktopMode:w-[30px] desktopMode:h-[30px] select-none cursor-pointer"
         />
       </div>
-      <div
-        ref={wrapperRef}
-        className="max-w-[80vw] max-h-[80vh] flex justify-center items-center"
-      >
-        {!file.metadata.isVideo && (
+      <div className="max-w-[80vw] max-h-[80vh] flex justify-center items-center">
+        {loading && <Spinner />}
+        {!file.metadata.isVideo && !loading && (
           <img
             src={image}
             className="max-w-full max-h-full object-contain select-none"
           />
         )}
-        {file.metadata.isVideo && (
+        {file.metadata.isVideo && !loading && (
           <video
             src={video}
             ref={videoRef}

src/components/Spinner/index.jsx

@@ -1,7 +0,0 @@
-import React from "react";
-
-export default () => (
-    <div className="spinner">
-    
-    </div>
-)

src/components/SpinnerImage/index.jsx

@@ -1,7 +0,0 @@
-import React from "react";
-
-export default () => (
-    <div className="spinner-image">
-    
-    </div>
-)

src/components/SpinnerLogin/index.jsx

@@ -1,7 +0,0 @@
-import React from "react";
-
-export default () => (
-    <div className="spinner spinner--small-margin">
-    
-    </div>
-)