diff --git a/src/components/Dataform/index.tsx b/src/components/Dataform/index.tsx index 49ed338..3c14ee6 100644 --- a/src/components/Dataform/index.tsx +++ b/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 && (
- +
)} {/* @ts-ignore */} @@ -98,7 +95,7 @@ const DataForm = memo(() => { {/* TODO: Change this spinner name */} {isFetchingNextPage && (
- +
)} diff --git a/src/components/DownloadPage/index.tsx b/src/components/DownloadPage/index.tsx index 4e2ccc7..4ca2baa 100644 --- a/src/components/DownloadPage/index.tsx +++ b/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 (
- +
); diff --git a/src/components/Homepage/index.tsx b/src/components/Homepage/index.tsx index 5f9eedb..65c9466 100644 --- a/src/components/Homepage/index.tsx +++ b/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 (
- -
diff --git a/src/components/LoginPage/index.tsx b/src/components/LoginPage/index.tsx index f045693..5f14f07 100755 --- a/src/components/LoginPage/index.tsx +++ b/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 = () => {
- +
@@ -152,7 +152,7 @@ const LoginPage = () => { {!loadingLogin && ( logo )} - {loadingLogin && } + {loadingLogin && }
diff --git a/src/components/MainSection/index.tsx b/src/components/MainSection/index.tsx index 427b583..7f3daae 100644 --- a/src/components/MainSection/index.tsx +++ b/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"; diff --git a/src/components/PhotoViewer/PhotoViewer.jsx b/src/components/PhotoViewer/PhotoViewer.jsx deleted file mode 100644 index 1c64275..0000000 --- a/src/components/PhotoViewer/PhotoViewer.jsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from "react"; -import Spinner from "../Spinner"; - -const PhotoViewer = (props) => ( -
- - - {props.state.image === "" ? ( -
- -
- ) : ( - - )} -
-); - -export default PhotoViewer; diff --git a/src/components/PhotoViewer/index.jsx b/src/components/PhotoViewer/index.jsx deleted file mode 100644 index 368d289..0000000 --- a/src/components/PhotoViewer/index.jsx +++ /dev/null @@ -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 ( - - ); - } -} - -const connectStateToProp = (state) => ({ - photoID: state.photoViewer.id, - isGoogle: state.photoViewer.isGoogle, - isPersonal: state.photoViewer.isPersonal, -}); - -export default connect(connectStateToProp)(PhotoViewerContainer); diff --git a/src/components/PhotoViewerPopup/index.tsx b/src/components/PhotoViewerPopup/index.tsx index 4f19669..913396b 100644 --- a/src/components/PhotoViewerPopup/index.tsx +++ b/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(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" />
-
- {!file.metadata.isVideo && ( +
+ {loading && } + {!file.metadata.isVideo && !loading && ( )} - {file.metadata.isVideo && ( + {file.metadata.isVideo && !loading && (