From 9699a35f594892b628398b7ade4d2ce675595f46 Mon Sep 17 00:00:00 2001 From: subnub Date: Mon, 24 Jun 2024 20:56:37 -0400 Subject: [PATCH] made right section and main scetion into functional components and fixed styling --- src/actions/selectedItem.js | 1 + src/api/foldersAPI.ts | 9 + src/components/Dataform/index.jsx | 6 +- src/components/Files/index.jsx | 39 +- src/components/Folders/index.jsx | 25 +- src/components/Header/Header.jsx | 121 ++-- src/components/MainSection/MainSection.jsx | 119 ---- src/components/MainSection/index.jsx | 400 ++++--------- src/components/ParentBar/ParentBar.jsx | 66 ++- src/components/QuickAccess/index.jsx | 19 +- src/components/RightSection/RightSection.jsx | 136 ----- src/components/RightSection/index.jsx | 563 ++++++------------- src/hooks/folders.ts | 18 +- src/hooks/utils.ts | 12 + 14 files changed, 506 insertions(+), 1028 deletions(-) delete mode 100644 src/components/MainSection/MainSection.jsx delete mode 100644 src/components/RightSection/RightSection.jsx create mode 100644 src/hooks/utils.ts diff --git a/src/actions/selectedItem.js b/src/actions/selectedItem.js index c7264b7..3f86db8 100644 --- a/src/actions/selectedItem.js +++ b/src/actions/selectedItem.js @@ -149,6 +149,7 @@ export const startSetSelectedItem = ( id, drive, personalFile, + data: results.data, }) ); }) diff --git a/src/api/foldersAPI.ts b/src/api/foldersAPI.ts index cf7e014..baa9cde 100644 --- a/src/api/foldersAPI.ts +++ b/src/api/foldersAPI.ts @@ -25,6 +25,15 @@ export const getFoldersList = async ({ return response.data; }; +export const getFolderInfo = async ({ + queryKey, +}: QueryFunctionContext<[string, { id: string | undefined }]>) => { + const [_key, { id }] = queryKey; + if (!id) return undefined; + const response = await axios.get(`/folder-service/info/${id}`); + return response.data; +}; + // PATCH export const renameFolder = async (folderID: string, name: string) => { diff --git a/src/components/Dataform/index.jsx b/src/components/Dataform/index.jsx index 1d262c1..a3971f3 100644 --- a/src/components/Dataform/index.jsx +++ b/src/components/Dataform/index.jsx @@ -3,10 +3,10 @@ import Folders from "../Folders"; import { useFiles } from "../../hooks/files"; import { useInfiniteScroll } from "../../hooks/infiniteScroll"; import Files from "../Files"; -import { useEffect, useState } from "react"; +import { memo, useEffect, useState } from "react"; import SpinnerPage from "../SpinnerPage"; -const DataForm = () => { +const DataForm = memo(() => { const { fetchNextPage: filesFetchNextPage, isFetchingNextPage, @@ -45,6 +45,6 @@ const DataForm = () => { )} ); -}; +}); export default DataForm; diff --git a/src/components/Files/index.jsx b/src/components/Files/index.jsx index 9e9d9c3..627c4aa 100644 --- a/src/components/Files/index.jsx +++ b/src/components/Files/index.jsx @@ -1,12 +1,15 @@ import { useDispatch, useSelector } from "react-redux"; import { disableListView, enableListView } from "../../actions/filter"; import { useFiles } from "../../hooks/files"; +import { useUtils } from "../../hooks/utils"; import SpinnerImage from "../SpinnerImage"; -import React from "react"; +import React, { memo, useMemo } from "react"; import FileItem from "../FileItem"; import ParentBar from "../ParentBar"; +import { useParams } from "react-router-dom"; +import classNames from "classnames"; -const Files = () => { +const Files = memo(() => { const { data: files } = useFiles(); const parent = useSelector((state) => state.parent.parent); const listView = useSelector((state) => state.filter.listView); @@ -14,6 +17,8 @@ const Files = () => { const loading = useSelector((state) => state.main.loading); const loadingMore = useSelector((state) => state.main.loadingMoreItems); const search = useSelector((state) => state.filter.search); + const { isHome } = useUtils(); + const dispatch = useDispatch(); const changeListViewMode = () => { @@ -27,9 +32,22 @@ const Files = () => {
-

- {search !== "" ? "Files" : "Home Files"} -

+ {isHome && ( +

+ {search !== "" ? "Files" : "Home Files"} +

+ )} + {!isHome && ( + +
+ +
+

+ Files +

+ + )} +
  • @@ -83,7 +101,14 @@ const Files = () => {
{!listView ? ( -
+
1 + ? "justify-center xs:justify-normal" + : "justify-normal" + )} + > {files?.pages.map((filePage, index) => ( {filePage.map((file) => ( @@ -139,6 +164,6 @@ const Files = () => {
); -}; +}); export default Files; diff --git a/src/components/Folders/index.jsx b/src/components/Folders/index.jsx index 4c6ec6e..2f9fa43 100644 --- a/src/components/Folders/index.jsx +++ b/src/components/Folders/index.jsx @@ -2,12 +2,13 @@ import { useDispatch, useSelector } from "react-redux"; import { useFolders } from "../../hooks/folders"; import { setSortBy } from "../../actions/filter"; import FolderItem from "../FolderItem"; -import { useCallback, useEffect } from "react"; +import { memo, useCallback, useEffect } from "react"; +import ParentBar from "../ParentBar"; +import classNames from "classnames"; -const Folder = () => { +const Folders = memo(() => { const { data: folders } = useFolders(); const sortBy = useSelector((state) => state.filter.sortBy); - const parent = useSelector((state) => state.parent.parent); const dispatch = useDispatch(); const switchOrderSortBy = useCallback(() => { @@ -64,10 +65,7 @@ const Folder = () => { ); return ( -
+

{folders?.length === 0 ? "No Folders" : "Folders"} @@ -109,13 +107,20 @@ const Folder = () => {

-
+
1 + ? "justify-center xs:justify-normal" + : "justify-normal" + )} + > {folders?.map((folder) => ( ))}
); -}; +}); -export default Folder; +export default Folders; diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index f0485ef..0782bc0 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -1,73 +1,80 @@ import React from "react"; +import { useNavigate } from "react-router-dom"; -const Header = (props) => ( -
-
+ ); +}; export default Header; diff --git a/src/components/MainSection/MainSection.jsx b/src/components/MainSection/MainSection.jsx deleted file mode 100644 index 20c35ea..0000000 --- a/src/components/MainSection/MainSection.jsx +++ /dev/null @@ -1,119 +0,0 @@ -import DataForm from "../Dataform"; -import RightSection from "../RightSection"; -import MoverMenu from "../MoverMenu"; -import PopupWindow from "../PopupWindow"; -import React from "react"; -import LeftSection from "../LeftSection"; - -const MainSection = React.forwardRef((props, ref) => { - return ( -
-
- -
- {true ? undefined : ( -
-
-
- get -
-
All your files in one place
-

Drag and drop a file to get started

-
-
- )} - - {props.routeType === "search" ? ( -
-
-

- - {props.files.length + props.folders.length >= 50 - ? "50+" - : props.files.length + props.folders.length} - {" "} - results for{" "} - - {props.cachedSearch} - -

-

- You are searching in{" "} - - {props.parent === "/" - ? "Home" - : props.parentNameList.length !== 0 - ? props.parentNameList[props.parentNameList.length - 1] - : "Unknown"} - {" "} - - spacer - - {" "} - - Show results from everywhere - -

-
-
- ) : undefined} - - {props.showPopup ? ( - - ) : undefined} - - {props.moverID.length === 0 ? undefined : } - -
- {}} /> - - - - -
-
-
- ); -}); - -export default MainSection; diff --git a/src/components/MainSection/index.jsx b/src/components/MainSection/index.jsx index 6390a85..b33cdf7 100644 --- a/src/components/MainSection/index.jsx +++ b/src/components/MainSection/index.jsx @@ -1,302 +1,116 @@ -import { startLoadMoreFiles } from "../../actions/files"; -import { - startSetSelectedItem, - setLastSelected, -} from "../../actions/selectedItem"; -import { - setLoading, - setLeftSectionMode, - setRightSectionMode, -} from "../../actions/main"; -import { setPopupFile } from "../../actions/popupFile"; -import mobileCheck from "../../utils/mobileCheck"; -import MainSection from "./MainSection"; -import env from "../../enviroment/envFrontEnd"; -import axios from "../../axiosInterceptor"; -import { connect } from "react-redux"; -// import { history } from "../../routers/AppRouter"; -import React from "react"; -import { getUpdateSettingsID } from "../../utils/updateSettings"; -import withNavigate from "../HocComponent"; +import DataForm from "../Dataform"; +import RightSection from "../RightSection"; +import MoverMenu from "../MoverMenu"; +import PopupWindow from "../PopupWindow"; +import React, { memo } from "react"; +import LeftSection from "../LeftSection"; +import { useSelector } from "react-redux"; -class MainSectionContainer extends React.Component { - constructor(props) { - super(props); +const MainSection = memo(() => { + const moverID = useSelector((state) => state.mover.id); + const showPopup = useSelector((state) => state.popupFile.showPopup); + return ( +
+ {/*
+ */} +
+ {/* {true ? undefined : ( +
+
+
+ get +
+
All your files in one place
+

Drag and drop a file to get started

+
+
+ )} */} - this.doubleClickFoldersMobile = false; - this.lastSettingsUpdateID = ""; - } + {/* {props.routeType === "search" ? ( +
+
+

+ + {props.files.length + props.folders.length >= 50 + ? "50+" + : props.files.length + props.folders.length} + {" "} + results for{" "} + + {props.cachedSearch} + +

+

+ You are searching in{" "} + + {props.parent === "/" + ? "Home" + : props.parentNameList.length !== 0 + ? props.parentNameList[props.parentNameList.length - 1] + : "Unknown"} + {" "} + + spacer + + {" "} + + Show results from everywhere + +

+
+
+ ) : undefined} */} - folderClick = (id, folder, bypass = false) => { - const currentDate = Date.now(); - const mobile = mobileCheck(); - const selectedID = this.props.selected; + {showPopup ? : undefined} - const doubleClickMobile = - localStorage.getItem("double-click-folders") || false; + {moverID.length === 0 ? undefined : } - if ( - (currentDate - this.props.lastSelected < 1500 && selectedID === id) || - (mobile && !doubleClickMobile) || - bypass - ) { - this.props.navigate(`/folder/${id}`); - } else { - const isGoogleDrive = folder.drive; +
+ {}} /> - this.props.dispatch( - startSetSelectedItem(id, false, false, isGoogleDrive) - ); - } - }; + - fileClick = (fileID, file, fromQuickItems = false, bypass = false) => { - const currentDate = Date.now(); - - let selectedFileID = fileID; - - if (fromQuickItems) { - selectedFileID = "quick-" + fileID; - } - - const isMobile = mobileCheck(); - - console.log("file", file); - - if ( - (currentDate - this.props.lastSelected < 1500 && - selectedFileID === this.props.selected) || - bypass - ) { - this.props.dispatch(setPopupFile({ showPopup: true, ...file })); - } else { - const isGoogleDrive = file.metadata.drive; - - this.props.dispatch( - startSetSelectedItem(fileID, true, fromQuickItems, isGoogleDrive) - ); - } - }; - - scrollEvent = (e) => { - //if (!mobileCheck()) return; - - return; - - const scrollY = window.pageYOffset; - const windowY = document.documentElement.scrollHeight; - - let limit = window.localStorage.getItem("list-size") || 50; - limit = parseInt(limit); - - if (this.props.loading) return; - - if (windowY / 2 < scrollY && this.props.allowLoadMoreItems) { - console.log("load more main"); - - if (this.props.files.length >= limit) { - const parent = this.props.parent; - const search = this.props.filter.search; - const sortBy = this.props.filter.sortBy; - const lastFileDate = - this.props.files[this.props.files.length - 1].uploadDate; - const lastFileName = - this.props.files[this.props.files.length - 1].filename; - - this.props.dispatch(setLoading(true)); - this.props.dispatch( - startLoadMoreFiles(parent, sortBy, search, lastFileDate, lastFileName) - ); - } - } - }; - - componentDidMount = () => { - window.addEventListener("scroll", this.scrollEvent); - window.addEventListener("resize", this.resizeEvent); - - this.getSettings(); - }; - - componentDidUpdate = () => { - // console.log("update ID main", getUpdateSettingsID()); - // if (this.lastSettingsUpdateID !== getUpdateSettingsID()) { - // console.log("Settings Update!"); - // this.getSettings(); - // } - // this.lastSettingsUpdateID = getUpdateSettingsID(); - // console.log("update settings id", updateSettingsID); - // console.log("Main Section Updated", this.props.resetSettingsMain); - // if (this.lastSettingsUpdateID !== this.props.resetSettingsMain) { - // console.log("Settings Update!"); - // this.getSettings(); - // } - // this.lastSettingsUpdateID = this.props.resetSettingsMain; - }; - - getSettings = () => { - this.doubleClickFoldersMobile = - localStorage.getItem("double-click-folders") || false; - }; - - componentWillUnmount = () => { - window.removeEventListener("scroll", this.scrollEvent); - }; - - resizeEvent = () => { - if (this.props.leftSectionMode === "open") - this.props.dispatch(setLeftSectionMode("")); - if (this.props.rightSectionMode === "open") - this.props.dispatch(setRightSectionMode("")); - }; - - downloadFile = (fileID, file) => { - const isGoogle = file.metadata.drive; - const isGoogleDoc = file.metadata.googleDoc; - const isPersonal = file.metadata.personalFile; - - this.props.dispatch(setLastSelected(0)); - - axios - .post("/user-service/get-token") - .then((response) => { - let finalUrl = isGoogle - ? !isGoogleDoc - ? `/file-service-google/download/${fileID}` - : `/file-service-google-doc/download/${fileID}` - : !isPersonal - ? `/file-service/download/${fileID}` - : `/file-service-personal/download/${fileID}`; - - finalUrl = `http://localhost:3000${finalUrl}`; - - console.log("download file", finalUrl); - - const link = document.createElement("a"); - document.body.appendChild(link); - link.href = finalUrl; - link.setAttribute("type", "hidden"); - link.setAttribute("download", true); - link.click(); - }) - .catch((e) => { - console.log("Download file get refresh token error", e); - }); - - // axios.get(currentURL +'/file-service/download/get-token') - // .then((response) => { - - // const tempToken = response.data.tempToken; - - // const finalUrl = - // isGoogle ? !isGoogleDoc ? currentURL + `/file-service-google/download/${fileID}` : currentURL + `/file-service-google-doc/download/${fileID}` - // : !isPersonal ? currentURL + `/file-service/download/${fileID}` : currentURL + `/file-service-personal/download/${fileID}` - - // const link = document.createElement('a'); - // document.body.appendChild(link); - // link.href = finalUrl; - // link.setAttribute('type', 'hidden'); - // link.setAttribute("download", true); - // link.click(); - - // }).catch((err) => { - // console.log(err) - // }) - }; - - loadMoreItems = () => { - return; - - console.log("load more main"); - - if (mobileCheck()) return; - - let limit = window.localStorage.getItem("list-size") || 50; - limit = parseInt(limit); - - if (this.props.loading) { - return; - } - - if (this.props.files.length >= limit) { - const parent = this.props.parent; - const search = this.props.filter.search; - const sortBy = this.props.filter.sortBy; - const lastFileDate = - this.props.files[this.props.files.length - 1].uploadDate; - const lastFileName = - this.props.files[this.props.files.length - 1].filename; - const lastPageToken = - this.props.files[this.props.files.length - 1].pageToken; - const isGoogle = this.props.filter.isGoogle; - - this.props.dispatch( - startLoadMoreFiles( - parent, - sortBy, - search, - lastFileDate, - lastFileName, - lastPageToken, - isGoogle - ) - ); - } - }; - - switchLeftSectionMode = () => { - const leftSectionMode = this.props.leftSectionMode; - - if (leftSectionMode === "" || leftSectionMode === "close") { - this.props.dispatch(setLeftSectionMode("open")); - } else { - this.props.dispatch(setLeftSectionMode("close")); - } - }; - - switchRightSectionMode = () => { - const rightSectionMode = this.props.rightSectionMode; - - if (rightSectionMode === "" || rightSectionMode === "close") { - this.props.dispatch(setRightSectionMode("open")); - } else { - this.props.dispatch(setRightSectionMode("close")); - } - }; - - render() { - return ( - - ); - } -} - -const connectPropToState = (state) => ({ - filter: state.filter, - files: state.files, - folders: state.folders, - allowLoadMoreItems: state.main.loadMoreItems, - loading: state.main.loading, - showPopup: state.popupFile.showPopup, - quickFiles: state.quickFiles, - selected: state.selectedItem.selected, - lastSelected: state.selectedItem.lastSelected, - parent: state.parent.parent, - parentNameList: state.parent.parentNameList, - moverID: state.mover.id, - routeType: state.main.currentRouteType, - cachedSearch: state.main.cachedSearch, - leftSectionMode: state.main.leftSectionMode, - rightSectionMode: state.main.rightSectionMode, - // resetSettingsMain: state.main.resetSettingsMain + +
+
+
+ ); }); -export default connect(connectPropToState)(withNavigate(MainSectionContainer)); +export default MainSection; diff --git a/src/components/ParentBar/ParentBar.jsx b/src/components/ParentBar/ParentBar.jsx index 022ed0a..1a01e02 100644 --- a/src/components/ParentBar/ParentBar.jsx +++ b/src/components/ParentBar/ParentBar.jsx @@ -1,17 +1,55 @@ -import React from "react"; +import React, { memo, useMemo } from "react"; +import { useNavigate, useParams } from "react-router-dom"; +import { useUtils } from "../../hooks/utils"; +import { useFolder } from "../../hooks/folders"; +import Spinner from "../Spinner"; -const ParentBar = (props) => ( -
- myDrive - - spacer - -

- {props.parentNameList.length !== 0 - ? props.parentNameList[props.parentNameList.length - 1] - : "No Name"} -

-
-); +const ParentBar = memo(() => { + const { data: folder, isLoading } = useFolder(); + console.log("folder", folder); + const navigate = useNavigate(); + const { isHome } = useUtils(); + + if (isHome || !folder) { + return
; + } + + const goHome = () => { + navigate("/home"); + }; + + const goToFolder = () => { + navigate(`/folder/${folder?._id}`); + }; + + // TODO: Decide how to handle loading + // if (!isLoading) { + // return
+ + //
+ // } + + return ( +
+
+ + myDrive + + + spacer + +

+ {folder.name} +

+
+
+ ); +}); export default ParentBar; diff --git a/src/components/QuickAccess/index.jsx b/src/components/QuickAccess/index.jsx index 34384ae..120bd7d 100644 --- a/src/components/QuickAccess/index.jsx +++ b/src/components/QuickAccess/index.jsx @@ -1,20 +1,20 @@ import { useSelector } from "react-redux"; import QuickAccessItem from "../QuickAccessItem"; -import React, { useState } from "react"; +import React, { memo, useMemo, useState } from "react"; import { useQuickFiles } from "../../hooks/files"; import classNames from "classnames"; +import { useParams } from "react-router-dom"; +import { useUtils } from "../../hooks/utils"; -const QuickAccess = (props) => { +const QuickAccess = memo(() => { const { data: quickfilesList } = useQuickFiles(); - const currentRouteType = useSelector((state) => state.main.currentRouteType); const [quickAccessExpanded, setQuickAccessExpanded] = useState(false); + const { isHome } = useUtils(); return (

@@ -39,7 +39,10 @@ const QuickAccess = (props) => {
1 + ? "justify-center xs:justify-normal" + : "justify-normal", { "max-h-36 sm:max-h-40": !quickAccessExpanded, "max-h-[720px] sm:max-h-[665px] quickAccessOne:max-h-[1000px] quickAccessTwo:max-h-[660px] quickAccessThree:max-h-[490px]": @@ -53,6 +56,6 @@ const QuickAccess = (props) => {

); -}; +}); export default QuickAccess; diff --git a/src/components/RightSection/RightSection.jsx b/src/components/RightSection/RightSection.jsx deleted file mode 100644 index 5a7cdb7..0000000 --- a/src/components/RightSection/RightSection.jsx +++ /dev/null @@ -1,136 +0,0 @@ -import bytes from "bytes"; -import moment from "moment"; -import React from "react"; -import ContextMenu from "../ContextMenu"; -import classNames from "classnames"; - -class RightSection extends React.Component { - constructor(props) { - super(props); - } - - render() { - return ( -
- {this.props.selectedItem.name === "" ? ( -
- - filedetailsicon - -

Select a file or folder to view it’s details

-
- ) : ( -
- -
- typedetailed1 -
-
-

{this.props.selectedItem.name}

-
-
-
- Type - - {this.props.selectedItem.size - ? this.props.getFileExtension(this.props.selectedItem.name) - : "Folder"} - -
-
- Size - {bytes(this.props.selectedItem.size)} -
-
- Created - {moment(this.props.selectedItem.date).format("L")} -
-
- Location - - {this.props.selectedItem.drive - ? "Google Drive" - : this.props.selectedItem.personalFile - ? "Amazon S3" - : "myDrive"} - -
-
- Privacy - - {this.props.selectedItem.link ? "Public" : "Only you"} - -
-
- -
- -
-
- )} -
- ); - } -} - -export default RightSection; diff --git a/src/components/RightSection/index.jsx b/src/components/RightSection/index.jsx index 5cac690..636f8c3 100644 --- a/src/components/RightSection/index.jsx +++ b/src/components/RightSection/index.jsx @@ -1,394 +1,199 @@ -import RightSection from "./RightSection"; -import RightSectionDetail from "../RightSectionDetail"; -import { - editFileMetadata, - startRemoveFile, - startRenameFile, -} from "../../actions/files"; +import bytes from "bytes"; +import moment from "moment"; +import React, { memo, useMemo } from "react"; +import ContextMenu from "../ContextMenu"; +import classNames from "classnames"; +import { useDispatch, useSelector } from "react-redux"; import { resetSelectedItem } from "../../actions/selectedItem"; -import env from "../../enviroment/envFrontEnd"; -import axios from "../../axiosInterceptor"; -import { connect } from "react-redux"; -import React from "react"; -import { setRightSectionMode } from "../../actions/main"; -import Swal from "sweetalert2"; -import { startRemoveFolder, startRenameFolder } from "../../actions/folders"; -import { setMoverID } from "../../actions/mover"; -import mobilecheck from "../../utils/mobileCheck"; -import { setMobileContextMenu } from "../../actions/mobileContextMenu"; +import { getFileExtension } from "../../utils/files"; +import { useContextMenu } from "../../hooks/contextMenu"; +import { setPopupFile } from "../../actions/popupFile"; +import { useNavigate } from "react-router-dom"; -class RightSectionContainer extends React.Component { - constructor(props) { - super(props); +const RightSection = memo(() => { + const selectedItem = useSelector((state) => state.selectedItem); + const navigate = useNavigate(); + const dispatch = useDispatch(); - this.state = { - optimizing: false, - optimizing_finished: false, - optimizing_removed: false, - contextSelected: false, - }; + const formattedName = useMemo(() => { + if (!selectedItem) return ""; + const name = selectedItem.name; + const maxLength = 66; + const ellipsis = "..."; + if (name.length <= maxLength) { + return name; + } - this.prevID = ""; + const startLength = Math.ceil((maxLength - ellipsis.length) / 2); + const endLength = Math.floor((maxLength - ellipsis.length) / 2); - this.rightSectionRef = React.createRef(); - } + const start = name.slice(0, startLength); + const end = name.slice(-endLength); - getFileExtension = (filename) => { - const filenameSplit = filename.split("."); + return `${start}${ellipsis}${end}`; + }, [selectedItem?.name, selectedItem?.file]); - if (filenameSplit.length > 1) { - const extension = filenameSplit[filenameSplit.length - 1]; + const formattedDate = useMemo( + () => moment(selectedItem.date).format("L"), + [selectedItem?.date, moment] + ); - return extension.toUpperCase(); + const fileSize = useMemo(() => { + if (!selectedItem || !selectedItem.size) return 0; + return bytes(selectedItem.size); + }, [selectedItem?.size, bytes]); + + const fileExtension = useMemo(() => { + if (!selectedItem?.file) return null; + return getFileExtension(selectedItem.name); + }, [selectedItem?.file, selectedItem?.name, getFileExtension]); + + const { + onContextMenu, + closeContextMenu, + onTouchStart, + onTouchMove, + onTouchEnd, + clickStopPropagation, + ...contextMenuState + } = useContextMenu(); + + const resetSelected = () => { + dispatch(resetSelectedItem()); + }; + const openItem = (e) => { + if (selectedItem.file) { + dispatch(setPopupFile({ showPopup: true, ...selectedItem.data })); } else { - return "Unknown"; + navigate(`/folder/${selectedItem.data._id}`); } }; - - getSidebarClassName = (value) => { - if (value === "gone") { - return "section section--right section--no-animation"; - } else if (value) { - return "section section--right"; - } else { - return "section section--right section--minimized"; - } - }; - - removeTranscodeVideo = (props, e) => { - const data = { id: props.selectedItem.id }; - - axios - .delete("/file-service/transcode-video/remove", { - data, - }) - .then(() => { - this.props.dispatch( - editFileMetadata(props.selectedItem.id, { transcoded: undefined }) - ); - - this.setState(() => ({ - ...this.state, - optimizing: false, - optimizing_finished: false, - optimizing_removed: true, - })); - }) - .catch((err) => { - console.log(err); - }); - }; - - transcodeVideo = (props, e) => { - const config = { - file: { _id: props.selectedItem.id }, - }; - - const data = { file: { _id: props.selectedItem.id } }; - - this.setState(() => ({ - ...this.state, - optimizing: true, - })); - - axios - .post("/file-service/transcode-video", data, config) - .then((response) => { - const data = response.data; - - if (data === "Finished") { - this.props.dispatch( - editFileMetadata(props.selectedItem.id, { - isVideo: true, - transcoded: true, - }) - ); - - this.setState(() => ({ - ...this.state, - optimizing: false, - optimizing_finished: true, - optimizing_removed: false, - })); - } - }) - .catch((err) => { - console.log(err); - }); - }; - - getTranscodeButton = (props) => { - if (!props.selectedItem.isVideo || !env.enableVideoTranscoding) { - return undefined; - } - - if (this.state.optimizing && !this.state.optimizing_finished) { - return ( -
- + return ( +
+ {selectedItem.name === "" ? ( +
+ + filedetailsicon + +

+ Select a file or folder to view it’s details +

- ); - } else if ( - (props.selectedItem.transcoded || this.state.optimizing_finished) && - !this.state.optimizing_removed - ) { - return ( -
- + ) : ( +
+
+
+ typedetailed1 +
+ +
+ +
+

+ {formattedName} +

+
+
+
+ + Type + + + {selectedItem.size ? fileExtension : "Folder"} + +
+
+ + Size + + + {fileSize} + +
+
+ + Created + + + {formattedDate} + +
+
+ + Location + + + {selectedItem.drive + ? "Google Drive" + : selectedItem.personalFile + ? "Amazon S3" + : "myDrive"} + +
+
+ + Privacy + + + {selectedItem.link ? "Public" : "Only you"} + +
+
+ + {contextMenuState.selected && ( +
+ +
+ )}
- ); - } else { - return ( -
- -
- ); - } - }; - - getPublicStatus = () => { - if (this.props.selectedItem.linkType === "one") { - return ( - - ); - } else { - return ; - } - }; - - resetState = () => { - if (this.prevID !== "" && this.prevID !== this.props.selectedItem.id) { - this.setState(() => ({ - ...this.state, - optimizing: false, - optimizing_finished: false, - })); - } - }; - - resetSelected = () => { - this.props.dispatch(resetSelectedItem()); - }; - - handleClickOutside = (e) => { - if ( - this.rightSectionRef && - !this.rightSectionRef.current.contains(event.target) - ) { - if (this.props.rightSectionMode === "open") { - this.props.dispatch(setRightSectionMode("close")); - this.closeContext(); - } - } - }; - - componentDidMount = () => { - document.addEventListener("mousedown", this.handleClickOutside); - }; - - componentWillUnmount = () => { - document.removeEventListener("mousedown", this.handleClickOutside); - }; - - openItem = (e) => { - if (this.props.selectedItem.file) { - this.props.fileClick( - this.props.selectedItem.id, - this.props.selectedItem.data, - false, - true - ); - } else { - this.props.folderClick( - this.props.selectedItem.id, - this.props.selectedItem.data, - true - ); - } - }; - - closeContext = () => { - this.setState(() => { - return { - ...this.state, - contextSelected: false, - }; - }); - }; - - selectContext = (e) => { - if (e) e.stopPropagation(); - if (e) e.preventDefault(); - - // if (mobilecheck()) { - - // this.props.dispatch(setMobileContextMenu(this.props.selectedItem.file, this.props.selectedItem.data)); - // return; - // } - - console.log("right props", this.props.selectedItem); - - this.setState(() => { - return { - ...this.state, - contextSelected: !this.state.contextSelected, - }; - }); - }; - - clickStopPropagation = (e) => { - if (e) e.stopPropagation(); - }; - - clickTest = (e) => { - console.log("click test"); - }; - - changeEditNameMode = async () => { - let inputValue = this.props.selectedItem.name; - - const { value: folderName } = await Swal.fire({ - title: "Enter A File Name", - input: "text", - inputValue: inputValue, - showCancelButton: true, - inputValidator: (value) => { - if (!value) { - return "Please Enter a Name"; - } - }, - }); - - if (folderName === undefined || folderName === null) { - return; - } - - //this.props.selectedItem.drive - - const parent = this.props.selectedItem.file - ? this.props.selectedItem.data.metadata.parent - : this.props.selectedItem.data.parent; - - this.props.selectedItem.file - ? this.props.dispatch( - startRenameFile( - this.props.selectedItem.id, - folderName, - this.props.selectedItem.drive - ) - ) - : this.props.dispatch( - startRenameFolder( - this.props.selectedItem.id, - folderName, - this.props.selectedItem.drive, - parent - ) - ); - - //this.props.dispatch(startRenameFolder(this.props.selectedItem.data._id, folderName, this.props.selectedItem.data.)); - }; - - startMoveFolder = async () => { - const parent = this.props.selectedItem.file - ? this.props.selectedItem.data.metadata.parent - : this.props.selectedItem.data.parent; - const isPersonal = this.props.selectedItem.file - ? this.props.selectedItem.data.metadata.personalFile - : this.props.selectedItem.data.personalFolder; - - this.props.dispatch( - setMoverID( - this.props.selectedItem.id, - parent, - this.props.selectedItem.file, - this.props.selectedItem.drive, - isPersonal - ) - ); - }; - - changeDeleteMode = async () => { - const parent = this.props.selectedItem.file - ? this.props.selectedItem.data.metadata.parent - : this.props.selectedItem.data.parent; - - Swal.fire({ - title: "Confirm Deletion", - text: "You cannot undo this action", - icon: "warning", - showCancelButton: true, - confirmButtonColor: "#3085d6", - cancelButtonColor: "#d33", - confirmButtonText: "Yes, delete", - }).then((result) => { - if (result.value) { - this.props.selectedItem.file - ? this.props.dispatch( - startRemoveFile( - this.props.selectedItem.id, - this.props.selectedItem.drive, - this.props.selectedItem.data.metadata.personalFile - ) - ) - : this.props.dispatch( - startRemoveFolder( - this.props.selectedItem.id, - [ - ...this.props.selectedItem.data.parentList, - this.props.selectedItem.id, - ], - this.props.selectedItem.drive, - parent, - this.props.selectedItem.data.metadata.personalFolder - ) - ); - } - }); - }; - - render() { - return ( - - ); - } -} - -const connectPropToState = (state) => ({ - selectedItem: state.selectedItem, - showSideBar: state.main.showSideBar, - selected: state.main.selected, - rightSectionMode: state.main.rightSectionMode, + )} +
+ ); }); -export default connect(connectPropToState)(RightSectionContainer); +export default RightSection; diff --git a/src/hooks/folders.ts b/src/hooks/folders.ts index 03e3899..ca82701 100644 --- a/src/hooks/folders.ts +++ b/src/hooks/folders.ts @@ -1,6 +1,6 @@ import { useQuery, useQueryClient } from "react-query"; import { useParams } from "react-router-dom"; -import { getFoldersList } from "../api/foldersAPI"; +import { getFolderInfo, getFoldersList } from "../api/foldersAPI"; import { useSelector } from "react-redux"; export const useFolders = () => { @@ -40,9 +40,23 @@ export const useFoldersClient = () => { ], }); }; - return { ...foldersReactClientQuery, invalidateFoldersCache, }; }; + +export const useFolder = () => { + const params = useParams(); + const folderQuery = useQuery( + [ + "folder", + { + id: params.id, + }, + ], + getFolderInfo + ); + + return { ...folderQuery }; +}; diff --git a/src/hooks/utils.ts b/src/hooks/utils.ts new file mode 100644 index 0000000..33cf3d0 --- /dev/null +++ b/src/hooks/utils.ts @@ -0,0 +1,12 @@ +import { useMemo } from "react"; +import { useParams } from "react-router-dom"; + +export const useUtils = () => { + const params = useParams(); + + const isHome = useMemo(() => { + return !params.id; + }, [params.id]); + + return { isHome }; +};