diff --git a/src/actions/selectedItem.js b/src/actions/selectedItem.js index 01abb19..c42077f 100644 --- a/src/actions/selectedItem.js +++ b/src/actions/selectedItem.js @@ -1,117 +1,200 @@ import axios from "../axiosInterceptor"; export const setSelectedItem = (selectedItem) => ({ - type: "SET_SELECTED_ITEM", - selectedItem -}) + type: "SET_SELECTED_ITEM", + selectedItem, +}); -export const startSetSelectedItem = (id, file, fromQuickItems, isGoogleDrive) => { +export const startSetSelectedItem = ( + id, + file, + fromQuickItems, + isGoogleDrive +) => { + return (dispatch) => { + const currentDate = Date.now(); + console.log("curr", currentDate); - return (dispatch) => { - - const currentDate = Date.now(); + dispatch(setLastSelected(currentDate)); - dispatch(setLastSelected(currentDate)); - - if (!fromQuickItems) { - dispatch(setSelected(id)) - } else { - dispatch(setSelected("quick-"+id)) - } - - if (file) { - - if (isGoogleDrive) { - - axios.get(`/file-service-google/info/${id}`).then((results) => { - - const data = results.data; - - const {filename: name, length: size, uploadDate: date, parentName: location, metadata, _id: id} = results.data; - - dispatch(setSelectedItem({name, size, date, file, location, transcoded: metadata.transcoded, isVideo: metadata.isVideo, id, linkType: metadata.linkType, link: metadata.link, drive: metadata.drive, personalFile: metadata.personalFile, data: results.data})) - - }).catch((err) => { - console.log(err) - }) - - } else { - - axios.get(`/file-service/info/${id}`).then((results) => { - - const {filename: name, length: size, uploadDate: date, parentName: location, metadata, _id: id} = results.data; - - dispatch(setSelectedItem({name, size, date, file, location, transcoded: metadata.transcoded, isVideo: metadata.isVideo, id, linkType: metadata.linkType, link: metadata.link, drive: metadata.drive, personalFile: metadata.personalFile, data: results.data})) - - }).catch((err) => { - console.log(err) - }) - } - - } else { - - if (isGoogleDrive) { - - axios.get(`/folder-service-google/info/${id}`).then((results) => { - - const {name, 0: size, createdAt: date, parentName: location, _id: id, drive, personalFolder: personalFile} = results.data; - - dispatch(setSelectedItem({name, size, date, file, location, data: results.data, id, drive, personalFile})) - - }).catch((err) => { - console.log(err) - }) - - } else { - - axios.get(`/folder-service/info/${id}`).then((results) => { - - const {name, 0: size, createdAt: date, parentName: location, _id: id, drive, personalFolder: personalFile} = results.data; - - dispatch(setSelectedItem({name, size, date, file, location, data: results.data, id, drive, personalFile})) - - }).catch((err) => { - console.log(err) - }) - } - } + if (!fromQuickItems) { + dispatch(setSelected(id)); + } else { + dispatch(setSelected("quick-" + id)); } -} + + if (file) { + if (isGoogleDrive) { + axios + .get(`/file-service-google/info/${id}`) + .then((results) => { + const data = results.data; + + const { + filename: name, + length: size, + uploadDate: date, + parentName: location, + metadata, + _id: id, + } = results.data; + + dispatch( + setSelectedItem({ + name, + size, + date, + file, + location, + transcoded: metadata.transcoded, + isVideo: metadata.isVideo, + id, + linkType: metadata.linkType, + link: metadata.link, + drive: metadata.drive, + personalFile: metadata.personalFile, + data: results.data, + }) + ); + }) + .catch((err) => { + console.log(err); + }); + } else { + axios + .get(`/file-service/info/${id}`) + .then((results) => { + const { + filename: name, + length: size, + uploadDate: date, + parentName: location, + metadata, + _id: id, + } = results.data; + + dispatch( + setSelectedItem({ + name, + size, + date, + file, + location, + transcoded: metadata.transcoded, + isVideo: metadata.isVideo, + id, + linkType: metadata.linkType, + link: metadata.link, + drive: metadata.drive, + personalFile: metadata.personalFile, + data: results.data, + }) + ); + }) + .catch((err) => { + console.log(err); + }); + } + } else { + if (isGoogleDrive) { + axios + .get(`/folder-service-google/info/${id}`) + .then((results) => { + const { + name, + 0: size, + createdAt: date, + parentName: location, + _id: id, + drive, + personalFolder: personalFile, + } = results.data; + + dispatch( + setSelectedItem({ + name, + size, + date, + file, + location, + id, + drive, + personalFile, + }) + ); + }) + .catch((err) => { + console.log(err); + }); + } else { + axios + .get(`/folder-service/info/${id}`) + .then((results) => { + const { + name, + 0: size, + createdAt: date, + parentName: location, + _id: id, + drive, + personalFolder: personalFile, + } = results.data; + + dispatch( + setSelectedItem({ + name, + size, + date, + file, + location, + id, + drive, + personalFile, + }) + ); + }) + .catch((err) => { + console.log(err); + }); + } + } + }; +}; export const editSelectedItem = (item) => ({ - type: "EDIT_SELECTED_ITEM", - item -}) + type: "EDIT_SELECTED_ITEM", + item, +}); export const resetSelectedItem = () => ({ - type: "RESET_SELECTED_ITEM" -}) + type: "RESET_SELECTED_ITEM", +}); export const resetSelected = () => ({ - type: "RESET_SELECTED" -}) + type: "RESET_SELECTED", +}); export const setLastSelected = (lastSelected) => ({ - type: "SET_LAST_SELECTED", - lastSelected -}) + type: "SET_LAST_SELECTED", + lastSelected, +}); export const setRightSelected = (selected) => ({ - type: "SET_RIGHT_SELECTED", - selected -}) + type: "SET_RIGHT_SELECTED", + selected, +}); export const setShareSelected = (selected) => ({ - type: "SET_SHARE_SELECTED", - selected -}) + type: "SET_SHARE_SELECTED", + selected, +}); export const editShareSelected = (selected) => ({ - type: "EDIT_SHARE_SELECTED", - selected -}) + type: "EDIT_SHARE_SELECTED", + selected, +}); export const setSelected = (selected) => ({ - type: "SET_SELECTED", - selected -}) \ No newline at end of file + type: "SET_SELECTED", + selected, +}); diff --git a/src/api/filesAPI.ts b/src/api/filesAPI.ts index d22f45b..6401166 100644 --- a/src/api/filesAPI.ts +++ b/src/api/filesAPI.ts @@ -66,6 +66,7 @@ export const downloadFile = async (fileID: string) => { }; export const getFileThumbnail = async (thumbnailID: string) => { + // TODO: Change this const url = `http://localhost:5173/api/file-service/thumbnail/${thumbnailID}`; const config = { responseType: "arraybuffer", diff --git a/src/components/Dataform/DataForm.jsx b/src/components/Dataform/DataForm.jsx index 913c7f0..2f07504 100644 --- a/src/components/Dataform/DataForm.jsx +++ b/src/components/Dataform/DataForm.jsx @@ -65,11 +65,9 @@ const DataForm = (props) => {
{folders?.map((folder) => ( ))}
@@ -155,7 +153,7 @@ const DataForm = (props) => { {filePage.map((file) => ( { {filePage.map((file) => ( { - if (props.state.movingMode) { - return ( - { - props.fileClick(props._id, props); - }} - onContextMenu={(e) => props.getContextMenu(e)} - onTouchStart={props.onTouchStart} - onTouchEnd={props.onTouchEnd} - onTouchMove={props.onTouchMove} - > - -
-
-

Moving 4 items…

- 2 minutes remaining -
-
-
-
-
- - cancelmode - -
-
- - - - - - ); - } else if (props.listView) { - const extensionImageResults = props.getExtensionImage(); - - return ( - - {/* */} - -
- - {extensionImageResults.passed ? ( - accessimage - ) : ( -
- - {extensionImageResults.ext} - -
- )} - -

- {props.state.editNameMode ? "" : capitalize(props.filename)} -

- - {props.state.editNameMode ? ( -
- - - SAVE - -
- ) : undefined} -
- - - {props.metadata.drive - ? "Google Drive" - : props.metadata.personalFile - ? "Amazon S3" - : "myDrive"} - - - {moment(props.uploadDate).format("L")} - - -
-
- -
- {/* */} - - - -
- - {props.state.deleteMode ? ( -
-

Are you sure you want to delete this?

-
- - Delete - - - Keep File - -
-
- ) : undefined} - - - ); - } else { - return ( -
{ - props.fileClick(props._id, props); - }} - onContextMenu={props.selectContext} - onTouchStart={props.onTouchStart} - onTouchEnd={props.onTouchEnd} - onTouchMove={props.onTouchMove} - > -
- -
-
- -
-
-

- {capitalize(props.filename)} -

- - {moment(props.uploadDate).format("L")} - -
-
- ); - } -}; - -export default FileItem; diff --git a/src/components/FileItem/index.jsx b/src/components/FileItem/index.jsx index 49fab03..ca524c8 100644 --- a/src/components/FileItem/index.jsx +++ b/src/components/FileItem/index.jsx @@ -1,534 +1,206 @@ -import FileItem from "./FileItem"; -import { - startSetSelectedItem, - setRightSelected, - setLastSelected, -} from "../../actions/selectedItem"; -import mobileCheck from "../../utils/mobileCheck"; -import env from "../../enviroment/envFrontEnd"; -import axios from "../../axiosInterceptor"; -import { connect } from "react-redux"; -import React from "react"; -import { startRenameFile, startRemoveFile } from "../../actions/files"; +import capitalize from "../../utils/capitalize"; +import moment from "moment"; +import React, { useMemo, useRef } from "react"; +import ContextMenu from "../ContextMenu"; import mobilecheck from "../../utils/mobileCheck"; -import Swal from "sweetalert2"; -import { setMoverID } from "../../actions/mover"; -import { setMobileContextMenu } from "../../actions/mobileContextMenu"; +import { useContextMenu } from "../../hooks/contextMenu"; +import { useDispatch, useSelector } from "react-redux"; +import classNames from "classnames"; +import { useThumbnail } from "../../hooks/files"; +import { getFileColor, getFileExtension } from "../../utils/files"; +import { startSetSelectedItem } from "../../actions/selectedItem"; +import { setPopupFile } from "../../actions/popupFile"; -class FileItemContainer extends React.Component { - constructor(props) { - super(props); +const FileItem = (props) => { + const { file } = props; + const currentSelectedItem = useSelector( + (state) => state.selectedItem.selected + ); + const listView = useSelector((state) => state.filter.listView); + const { image, hasThumbnail, imageOnError } = useThumbnail( + file.metadata.hasThumbnail, + file.metadata.thumbnailID + ); + const dispatch = useDispatch(); + const lastSelected = useRef(0); + const { + onContextMenu, + closeContextMenu, + onTouchStart, + onTouchMove, + onTouchEnd, + clickStopPropagation, + ...contextMenuState + } = useContextMenu(); + const fileExtension = useMemo( + () => getFileExtension(file.filename, listView ? 3 : 4), + [file.filename] + ); - this.failedToLoad = false; + const imageColor = useMemo( + () => getFileColor(file.filename), + [file.filename] + ); + const elementSelected = useMemo( + () => file._id === currentSelectedItem, + [file._id, currentSelectedItem] + ); - this.lastTouch = 0; + const fileClick = () => { + const currentDate = Date.now(); - this.imageLoaded = false; - - this.state = { - contextMenuPos: {}, - imageSrc: "/images/file-svg.svg", - imageClassname: "noSelect file__item-no-thumbnail", - contextSelected: false, - editNameMode: false, - editName: this.props.filename, - deleteMode: false, - movingMode: false, - movingPercentage: 0, - }; - } - - getThumbnail = async () => { - this.imageLoaded = true; - - const thumbnailID = this.props.metadata.thumbnailID; - // const imageClassname = this.props.listView ? "file__image__listview--no-opacity" : "file__image--no-opacity" - const imageClassname = "noSelect"; - - if (this.props.metadata.drive && !this.props.metadata.googleDoc) { - return await this.setState(() => ({ - ...this.state, - imageSrc: this.props.metadata.thumbnailID, - imageClassname: imageClassname, - })); + if (!elementSelected) { + dispatch(startSetSelectedItem(file._id, true, false)); } - const config = { - responseType: "arraybuffer", - }; + const isMobile = mobilecheck(); - await this.setState(() => ({ - ...this.state, - imageSrc: "/images/file-svg.svg", - imageClassname: "noSelect file__item-no-thumbnail", - })); - - const url = !this.props.metadata.personalFile - ? `/file-service/thumbnail/${thumbnailID}` - : `/file-service-personal/thumbnail/${thumbnailID}`; - - axios - .get(url, config) - .then((results) => { - const imgFile = new Blob([results.data]); - const imgUrl = URL.createObjectURL(imgFile); - - this.setState(() => ({ - ...this.state, - imageSrc: imgUrl, - imageClassname: imageClassname, - })); - }) - .catch((err) => { - console.log(err); - }); - }; - - thumbnailOnError = () => { - console.log("thumbnail on error"); - - this.setState(() => ({ - ...this.state, - imageSrc: "/images/file-svg.svg", - imageClassname: "noSelect file__item-no-thumbnail", - })); - }; - - componentDidMount = () => { - const hasThumbnail = this.props.metadata.hasThumbnail; - - if ( - hasThumbnail && - !this.failedToLoad && - !this.props.listView && - !this.imageLoaded - ) { - this.getThumbnail(); + if (isMobile || currentDate - lastSelected.current < 1500) { + dispatch(setPopupFile({ showPopup: true, ...file })); } + + lastSelected.current = Date.now(); }; - shouldComponentUpdate = (nextProp, nextState) => { + if (listView) { return ( - nextProp.itemSelected !== this.props.itemSelected || - nextProp.listView !== this.props.listView || - nextProp.rightSelected !== this.props.rightSelected || - nextState.imageSrc !== this.state.imageSrc || - nextState.imageClassname !== this.state.imageClassname || - this.props.filename !== nextProp.filename || - this.props.metadata.transcoded !== nextProp.metadata.transcode || - nextState.contextSelected !== this.state.contextSelected || - nextState.editNameMode !== this.state.editNameMode || - nextState.editName !== this.state.editName || - nextState.deleteMode !== this.state.deleteMode || - nextState.movingMode !== this.state.movingMode || - nextState.movingPercentage !== this.state.movingPercentage + + {/* */} + +
+ +
+ {fileExtension} +
+ +

{props.file.filename}

+
+ + + {props.file.metadata.drive + ? "Google Drive" + : props.file.metadata.personalFile + ? "Amazon S3" + : "myDrive"} + + + {moment(props.uploadDate).format("L")} + + +
+
+ +
+ {/* */} + + + +
+ + ); - }; - - componentDidUpdate = (nextProp) => { - // console.log("file item component updated") - - return; - - const hasThumbnail = this.props.metadata.hasThumbnail; - - if (hasThumbnail && !this.failedToLoad && !this.imageLoaded) { - this.getThumbnail(); - } else if (nextProp.listView !== this.props.listView) { - this.setState(() => ({ - ...this.state, - imageClassname: this.props.listView - ? "file__image__listview" - : "file__image", - })); - } - }; - - onTouchStart = () => { - //alert("Touch start"); - const date = new Date(); - this.lastTouch = date.getTime(); - }; - - onTouchMove = () => { - this.lastTouch = 0; - }; - - onTouchEnd = () => { - if (this.lastTouch === 0) { - //alert("last touch 0"); - return; - } - - const date = new Date(); - const difference = date - this.lastTouch; - //alert("Touch end: " + difference) - //alert("touch end: " + difference); - this.lastTouch = 0; - - if (difference > 500) { - //alert("Context menu"); - //this.getContextMenu(); - this.selectContext(); - } - }; - - getContextMenu = (e) => { - if (e) e.preventDefault(); - - const isMobile = mobileCheck(); - - const windowX = window.innerWidth; - const windowY = window.innerHeight; - - let styleObj = { right: 0, left: 0, top: "-38px", bottom: 0 }; - - if (isMobile) { - styleObj = { bottom: 0, left: "2px", top: "unset", right: "unset" }; - } else { - const clientY = e.nativeEvent.clientY; - const clientX = e.nativeEvent.clientX; - - if (clientY < windowY / 3) { - styleObj = { bottom: "-190px", top: "unset" }; - } - - if (clientY > (windowY / 4) * 3.5) { - styleObj = { bottom: "unset", top: "-190px" }; - } - - if (clientX > windowX / 2) { - styleObj = { ...styleObj, left: "unset", right: 0 }; - } else { - styleObj = { ...styleObj, left: 0, right: "unset" }; - } - } - - // if (isMobile) { - - // styleObj = {bottom: 0, left: "2px", top: "unset", right: "unset"} - // } - - this.setState(() => ({ ...this.state, contextMenuPos: styleObj })); - - this.props.dispatch(startSetSelectedItem(this.props._id, true, false)); - this.props.dispatch(setLastSelected(0)); - this.props.dispatch(setRightSelected(this.props._id)); - }; - - getWrapperClassname = () => { - let classname = ""; - - if (this.props.listView) { - classname += "file__item__listview"; - } else { - classname += "file__item"; - } - - if (this.props._id === this.props.selected) { - classname += " file__item--selected"; - } - - return classname; - }; - - selectContext = (e) => { - if (e) e.stopPropagation(); - if (e) e.preventDefault(); - - if (mobilecheck()) { - this.props.dispatch(setMobileContextMenu(true, this.props)); - - return; - } - - this.setState(() => { - return { - ...this.state, - contextSelected: !this.state.contextSelected, - }; - }); - }; - - closeContext = () => { - this.setState(() => { - return { - ...this.state, - contextSelected: false, - }; - }); - }; - - editNamePopup = async () => { - let inputValue = this.props.filename; - - 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; - } - - // console.log("rename is google", this.props.isGoogle); - this.props.dispatch( - startRenameFile(this.props._id, folderName, this.props.metadata.drive) - ); - }; - - changeEditNameMode = () => { - this.editNamePopup(); - - // const isMobile = mobilecheck(); - - // if (isMobile || !this.props.listView) { - // this.mobileEditName(); - // return; - // } - - // this.setState(() => { - - // return { - // ...this.state, - // editNameMode: !this.state.editNameMode - // } - // }) - }; - - closeEditNameMode = () => { - this.setState(() => { - return { - ...this.state, - editNameMode: false, - }; - }); - }; - - changeEditName = (e) => { - const value = e.target.value; - - this.setState(() => { - return { - ...this.state, - editName: value, - }; - }); - }; - - saveNameEdit = () => { - const value = this.state.editName; - - this.props.dispatch( - startRenameFile(this.props._id, value, this.props.metadata.drive) - ); - - this.closeEditNameMode(); - }; - - deleteFilePopup = () => { - 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.dispatch( - startRemoveFile( - this.props._id, - this.props.metadata.drive, - this.props.metadata.personalFile - ) - ); - } - }); - }; - - removeDeleteMode = () => { - this.setState(() => { - return { - ...this.state, - deleteMode: false, - }; - }); - }; - - changeDeleteMode = () => { - this.deleteFilePopup(); - - // const isMobile = mobilecheck(); - - // if (isMobile || !this.props.listView) { - // this.mobileDeleteFile() - // return; - // } - - // this.setState(() => { - - // return { - // ...this.state, - // deleteMode: true, - // contextSelected: false - // } - // }) - }; - - startDeleteFile = () => { - //this.props.dispatch(startRemoveFile(this.props._id, this.props.metadata.drive, this.props.metadata.personalFile)) - - this.changeDeleteMode(); - }; - - startMovingFile = () => { - // console.log("moving file") - - // this.setState(() => { - // return { - // ...this.state, - // movingMode: true - // } - // }) - - // window.setInterval(this.changeMoverPos, 50) - // // REMEMBER TO STOP THIS WHEN FINISHED - this.props.dispatch( - setMoverID( - this.props._id, - this.props.metadata.parent, - true, - this.props.metadata.drive, - this.props.metadata.personalFile - ) - ); - }; - - changeMoverPos = () => { - this.setState(() => { - return { - ...this.state, - movingPercentage: - this.state.movingPercentage >= 80 - ? 0 - : this.state.movingPercentage + 1, - }; - }); - }; - - getFileExtension = (filename) => { - const filenameSplit = filename.split("."); - - if (filenameSplit.length > 1) { - let extension = filenameSplit[filenameSplit.length - 1]; - - if (extension.length > 3) - extension = - extension.substring(0, 2) + - extension.substring(extension.length - 1, extension.length); - - return extension.toUpperCase(); - } else { - return "UNK"; - } - }; - - getColor = (ext) => { - const letter = ext.substring(0, 1).toUpperCase(); - - const colorObj = { - A: "#e53935", - B: "#d81b60", - C: "#8e24aa", - D: "#5e35b1", - E: "#3949ab", - F: "#1e88e5", - G: "#039be5", - H: "#00acc1", - I: "#00897b", - J: "#43a047", - K: "#fdd835", - L: "#ffb300", - M: "#fb8c00", - N: "#f4511e", - O: "#d32f2f", - P: "#c2185b", - Q: "#7b1fa2", - R: "#512da8", - S: "#303f9f", - T: "#1976d2", - U: "#0288d1", - V: "#0097a7", - W: "#0097a7", - X: "#00796b", - Y: "#388e3c", - Z: "#fbc02d", - }; - - if (colorObj[letter]) { - return colorObj[letter]; - } else { - return "#03a9f4"; - } - }; - - getExtensionImage = () => { - const ext = this.getFileExtension(this.props.filename); - - return { passed: false, ext, color: this.getColor(ext) }; - }; - - startFileClick = () => { - this.props.fileClick(this.props._id, this.props); - }; - - clickStopPropagation = (e) => { - e.stopPropagation(); - }; - - render() { + } else { return ( - +
+ {contextMenuState.selected && ( +
+ +
+ )} +
+ {hasThumbnail ? ( + + ) : ( + + + + )} + {!hasThumbnail && ( +
+

{fileExtension}

+
+ )} +
+
+

+ {capitalize(file.filename)} +

+ + Created {moment(file.uploadDate).format("MM/DD/YY hh:mma")} + +
+
); } -} +}; -const connectStateToProp = (state) => ({ - listView: state.filter.listView, - rightSelected: state.selectedItem.rightSelected, - resetSelected: state.selectedItem.resetSelected, - selected: state.selectedItem.selected, -}); - -export default connect(connectStateToProp)(FileItemContainer); +export default FileItem; diff --git a/src/components/FolderItem/index.jsx b/src/components/FolderItem/index.jsx index 2d0f51d..65b782b 100644 --- a/src/components/FolderItem/index.jsx +++ b/src/components/FolderItem/index.jsx @@ -1,13 +1,20 @@ -import React, { useMemo } from "react"; +import React, { useMemo, useRef } from "react"; import ContextMenu from "../ContextMenu"; import { useContextMenu } from "../../hooks/contextMenu"; import classNames from "classnames"; -import { useSelector } from "react-redux"; +import { useDispatch, useSelector } from "react-redux"; +import { useNavigate } from "react-router-dom"; +import { startSetSelectedItem } from "../../actions/selectedItem"; +import mobilecheck from "../../utils/mobileCheck"; const FolderItem = (props) => { + const { folder } = props; const currentSelectedItem = useSelector( (state) => state.selectedItem.selected ); + const lastSelected = useRef(0); + const navigate = useNavigate(); + const dispatch = useDispatch(); const { onContextMenu, closeContextMenu, @@ -19,10 +26,26 @@ const FolderItem = (props) => { } = useContextMenu(); const elementSelected = useMemo( - () => props._id === currentSelectedItem, - [props._id, currentSelectedItem] + () => props.folder._id === currentSelectedItem, + [props.folder._id, currentSelectedItem] ); + const folderClick = () => { + const currentDate = Date.now(); + + if (!elementSelected) { + dispatch(startSetSelectedItem(folder._id, false, false)); + } + + const isMobile = mobilecheck(); + + if (isMobile || currentDate - lastSelected.current < 1500) { + navigate(`/folder/${folder._id}`); + } + + lastSelected.current = Date.now(); + }; + return (
{ "bg-[#3c85ee]": elementSelected, } )} - onClick={() => props.folderClick(props._id, props)} + onClick={folderClick} onContextMenu={onContextMenu} onTouchStart={onTouchStart} onTouchMove={onTouchMove} @@ -41,10 +64,10 @@ const FolderItem = (props) => {
@@ -74,7 +97,7 @@ const FolderItem = (props) => { elementSelected ? "text-white" : "text-black" )} > -

{props.name}

+

{props.folder.name}

); diff --git a/src/components/MainSection/index.jsx b/src/components/MainSection/index.jsx index 1bd7bd7..0bf7a74 100644 --- a/src/components/MainSection/index.jsx +++ b/src/components/MainSection/index.jsx @@ -61,6 +61,8 @@ class MainSectionContainer extends React.Component { const isMobile = mobileCheck(); + console.log("file", file); + if ( (currentDate - this.props.lastSelected < 1500 && selectedFileID === this.props.selected) || diff --git a/src/components/QuickAccess/index.jsx b/src/components/QuickAccess/index.jsx index 286cbfb..787048d 100644 --- a/src/components/QuickAccess/index.jsx +++ b/src/components/QuickAccess/index.jsx @@ -50,12 +50,7 @@ const QuickAccess = (props) => { }} > {quickfilesList?.map((file) => ( - + ))} diff --git a/src/components/QuickAccessItem/index.jsx b/src/components/QuickAccessItem/index.jsx index 37b4d6d..7d44a96 100644 --- a/src/components/QuickAccessItem/index.jsx +++ b/src/components/QuickAccessItem/index.jsx @@ -1,21 +1,27 @@ import capitalize from "../../utils/capitalize"; import moment from "moment"; -import React, { useMemo } from "react"; +import React, { useMemo, useRef } from "react"; import ContextMenu from "../ContextMenu"; import classNames from "classnames"; import { getFileColor, getFileExtension } from "../../utils/files"; import { useThumbnail } from "../../hooks/files"; import { useContextMenu } from "../../hooks/contextMenu"; -import { useSelector } from "react-redux"; +import { useDispatch, useSelector } from "react-redux"; +import mobilecheck from "../../utils/mobileCheck"; +import { startSetSelectedItem } from "../../actions/selectedItem"; +import { setPopupFile } from "../../actions/popupFile"; const QuickAccessItem = (props) => { + const { file } = props; const currentSelectedItem = useSelector( (state) => state.selectedItem.selected ); const { image, hasThumbnail, imageOnError } = useThumbnail( - props.metadata.hasThumbnail, - props.metadata.thumbnailID + file.metadata.hasThumbnail, + file.metadata.thumbnailID ); + const dispatch = useDispatch(); + const lastSelected = useRef(0); const { onContextMenu, @@ -28,29 +34,43 @@ const QuickAccessItem = (props) => { } = useContextMenu(); const fileExtension = useMemo( - () => getFileExtension(props.filename), - [props.filename] + () => getFileExtension(file.filename), + [file.filename] ); const imageColor = useMemo( - () => getFileColor(props.filename), - [props.filename] + () => getFileColor(file.filename), + [file.filename] ); const elementSelected = useMemo( - () => `quick-${props._id}` === currentSelectedItem, - [props._id, currentSelectedItem] + () => `quick-${file._id}` === currentSelectedItem, + [file._id, currentSelectedItem] ); + const quickItemClick = () => { + const currentDate = Date.now(); + + if (!elementSelected) { + dispatch(startSetSelectedItem(file._id, true, true)); + } + + const isMobile = mobilecheck(); + + if (isMobile || currentDate - lastSelected.current < 1500) { + dispatch(setPopupFile({ showPopup: true, ...file })); + } + + lastSelected.current = Date.now(); + }; + return (
{ - props.fileClick(props._id, props, true); - }} + onClick={quickItemClick} onContextMenu={onContextMenu} onTouchStart={onTouchStart} onTouchMove={onTouchMove} @@ -63,7 +83,7 @@ const QuickAccessItem = (props) => { quickItemMode={true} contextSelected={contextMenuState} closeContext={closeContextMenu} - file={props} + file={file} />
)} @@ -115,7 +135,7 @@ const QuickAccessItem = (props) => { elementSelected ? "text-white" : "text-[#212b36]" )} > - {capitalize(props.filename)} + {capitalize(file.filename)}

{ elementSelected ? "text-white" : "text-[#637381]" )} > - Created {moment(props.uploadDate).format("MM/DD/YY hh:mma")} + Created {moment(file.uploadDate).format("MM/DD/YY hh:mma")} diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 1fcc30f..6ad8c4c 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -42,7 +42,7 @@ @import "./components/MobileContextMenu"; .animate { - transition: 0.3s ease all; + transition: 0.2s ease all; } .animate-movement { diff --git a/src/utils/files.ts b/src/utils/files.ts index 46043e4..7d69fcc 100644 --- a/src/utils/files.ts +++ b/src/utils/files.ts @@ -1,12 +1,12 @@ -export const getFileExtension = (filename: string) => { +export const getFileExtension = (filename: string, length = 4) => { const filenameSplit = filename.split("."); if (filenameSplit.length > 1) { let extension = filenameSplit[filenameSplit.length - 1]; - if (extension.length > 4) + if (extension.length > length) extension = - extension.substring(0, 3) + + extension.substring(0, length - 1) + extension.substring(extension.length - 1, extension.length); return extension.toUpperCase();