continued dep injectiong

src/components/ContextMenu/index.jsx

@@ -21,7 +21,7 @@ import {
 } from "../../api/foldersAPI";
 import { useClickOutOfBounds, useUtils } from "../../hooks/utils";
 import { useAppDispatch } from "../../hooks/store";
-import { setMultiSelectMode } from "../../reducers/selected";
+import { resetSelected, setMultiSelectMode } from "../../reducers/selected";
 import TrashIcon from "../../icons/TrashIcon";
 import MultiSelectIcon from "../../icons/MultiSelectIcon";
 import RenameIcon from "../../icons/RenameIcon";
@@ -98,6 +98,7 @@ const ContextMenu = (props) => {
         await trashFileAPI(props.file._id);
         invalidateFilesCache();
         invalidateQuickFilesCache();
+        dispatch(resetSelected());
       }
     } else {
       const result = await Swal.fire({
@@ -112,6 +113,7 @@ const ContextMenu = (props) => {
       if (result.value) {
         await trashFolderAPI(props.folder._id);
         invalidateFoldersCache();
+        dispatch(resetSelected());
       }
     }
   };
@@ -133,6 +135,7 @@ const ContextMenu = (props) => {
         await deleteFileAPI(props.file._id);
         invalidateFilesCache();
         invalidateQuickFilesCache();
+        dispatch(resetSelected());
       }
     } else {
       const result = await Swal.fire({
@@ -147,6 +150,7 @@ const ContextMenu = (props) => {
       if (result.value) {
         await deleteFolder(props.folder._id);
         invalidateFoldersCache();
+        dispatch(resetSelected());
       }
     }
   };

src/components/Homepage/index.tsx

@@ -6,8 +6,11 @@ import UploadOverlay from "../UploadOverlay";
 import HomepageSpinner from "../HomepageSpinner";
 import MobileContextMenuContainer from "../MobileContextMenu";
 import ShareModelWrapper from "../ShareModelWrapper";
+import PhotoViewer from "../PhotoViewer";
+import { useAppSelector } from "../../hooks/store";
 
-const Homepage2 = () => {
+const Homepage = () => {
+  const photoID = useAppSelector((state) => state.photoViewer.id);
   return (
     <div>
       <HomepageSpinner />
@@ -17,7 +20,7 @@ const Homepage2 = () => {
         <div className="flex space-between">
           <MainSection />
           <Uploader />
-          {/* {photoID.length === 0 ? undefined : <PhotoViewer />} */}
+          {photoID.length === 0 ? undefined : <PhotoViewer />}
         </div>
       </div>
 
@@ -27,4 +30,4 @@ const Homepage2 = () => {
   );
 };
 
-export default Homepage2;
+export default Homepage;

src/components/PhotoViewer/PhotoViewer.jsx

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

src/components/PhotoViewer/index.jsx

@@ -1,58 +1,55 @@
 import PhotoViewer from "./PhotoViewer";
-import {connect} from "react-redux";
+import { connect } from "react-redux";
 import env from "../../enviroment/envFrontEnd";
 import React from "react";
-import {resetPhotoID} from "../../actions/photoViewer";
+import { resetPhotoID } from "../../actions/photoViewer";
 import axios from "../../axiosInterceptor";
 
 class PhotoViewerContainer extends React.Component {
+  constructor(props) {
+    super(props);
 
-    constructor(props) {
-        super(props);
+    this.state = {
+      image: "",
+    };
+  }
 
-        this.state = {
-            image: ""
-        }
-    }
+  closePhotoViewer = () => {
+    this.props.dispatch(resetPhotoID());
+  };
 
-    closePhotoViewer = () => {
+  componentDidMount = () => {
+    const config = {
+      responseType: "arraybuffer",
+    };
 
-        this.props.dispatch(resetPhotoID())        
-    }
+    // 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);
 
-    componentDidMount = () => {
+      this.setState(() => ({
+        ...this.state,
+        image: imgUrl,
+      }));
+    });
+  };
 
-        const config = {
-            responseType: 'arraybuffer'
-        }; 
-        
-        const url = this.props.isGoogle ? `/file-service-google/full-thumbnail/${this.props.photoID}` 
-        : !this.props.isPersonal ? `/file-service/full-thumbnail/${this.props.photoID}` : `/file-service-personal/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}/>
-    }
+  render() {
+    return (
+      <PhotoViewer
+        closePhotoViewer={this.closePhotoViewer}
+        state={this.state}
+      />
+    );
+  }
 }
 
 const connectStateToProp = (state) => ({
-    photoID: state.photoViewer.id,
-    isGoogle: state.photoViewer.isGoogle,
-    isPersonal: state.photoViewer.isPersonal,
-})
+  photoID: state.photoViewer.id,
+  isGoogle: state.photoViewer.isGoogle,
+  isPersonal: state.photoViewer.isPersonal,
+});
 
-export default connect(connectStateToProp)(PhotoViewerContainer);
+export default connect(connectStateToProp)(PhotoViewerContainer);

src/styles/components/_Photoviewer.scss

@@ -1,41 +1,39 @@
 .photoviewer {
-    background: rgba(0, 0, 0, 0.95);
-    width: 100%;
-    position: fixed;
-    height: 100%;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    flex-direction: column;
-    z-index: 5;
+  background: rgba(0, 0, 0, 0.95);
+  width: 100%;
+  position: fixed;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 .photoviewer__close-button {
-    width: 22px;
-    margin-left: 10px;
-    margin-top: 10px;
-    opacity: 0.6;
-    cursor: pointer;
+  width: 22px;
+  margin-left: 10px;
+  margin-top: 10px;
+  opacity: 0.6;
+  cursor: pointer;
 }
 
 .photoviewer__image {
-
-    width: 95%;
-    height: 90%;
-    margin-left: 2.5%;
-    // background: blue;
-    object-fit: contain;
+  width: 95%;
+  height: 90%;
+  margin-left: 2.5%;
+  // background: blue;
+  object-fit: contain;
 }
 
 .photoviewer__loader {
-    width: 98%;
-    height: 88%;
-    display: flex;
-    align-items: center;
+  width: 98%;
+  height: 88%;
+  display: flex;
+  align-items: center;
 
-    @media (max-width: $desktop-breakpoint) {
-        width: 90%;
-    }
-}
+  @media (max-width: $desktop-breakpoint) {
+    width: 90%;
+  }
+}