diff --git a/src/actions/mover.js b/src/actions/mover.js index 97e705d..3d863ef 100644 --- a/src/actions/mover.js +++ b/src/actions/mover.js @@ -1,12 +1,10 @@ -export const setMoverID = (id, parent, isFile, isGoogle=false, isPersonal=false) => ({ - type: "SET_MOVER_ID", - id, - parent, - isFile, - isGoogle, - isPersonal -}) +export const setMoverID = (id, parent, isFile) => ({ + type: "SET_MOVER_ID", + id, + parent, + isFile, +}); export const resetMoverID = () => ({ - type: "RESET_MOVER_ID" -}) \ No newline at end of file + type: "RESET_MOVER_ID", +}); diff --git a/src/api/filesAPI.ts b/src/api/filesAPI.ts index 5b229dc..d22f45b 100644 --- a/src/api/filesAPI.ts +++ b/src/api/filesAPI.ts @@ -1,5 +1,6 @@ import { QueryFunctionContext } from "react-query"; import axios from "../axiosInterceptor"; +import { getUserToken } from "./user"; interface QueryKeyParams { parent: string; @@ -44,12 +45,26 @@ export const getFilesList = async ({ export const getQuickFilesList = async () => { const response = await axios.get(`/file-service/quick-list`, { params: { - limit: 12, + limit: 20, }, }); return response.data; }; +export const downloadFile = async (fileID: string) => { + await getUserToken(); + + // TODO: Change this + const url = `http://localhost:5173/api/file-service/download/${fileID}`; + + const link = document.createElement("a"); + document.body.appendChild(link); + link.href = url; + link.setAttribute("type", "hidden"); + link.setAttribute("download", "true"); + link.click(); +}; + export const getFileThumbnail = async (thumbnailID: string) => { const url = `http://localhost:5173/api/file-service/thumbnail/${thumbnailID}`; const config = { diff --git a/src/api/user.ts b/src/api/user.ts new file mode 100644 index 0000000..67a0cbe --- /dev/null +++ b/src/api/user.ts @@ -0,0 +1,6 @@ +import axios from "../axiosInterceptor"; + +export const getUserToken = async () => { + const response = await axios.post("/user-service/get-token"); + response.data; +}; diff --git a/src/components/NewContextMenu/index.jsx b/src/components/ContextMenu/index.jsx similarity index 78% rename from src/components/NewContextMenu/index.jsx rename to src/components/ContextMenu/index.jsx index 65ad962..4dbdfa3 100644 --- a/src/components/NewContextMenu/index.jsx +++ b/src/components/ContextMenu/index.jsx @@ -1,12 +1,16 @@ import classNames from "classnames"; import React, { useEffect, useRef } from "react"; import Swal from "sweetalert2"; -import { deleteFile, renameFile } from "../../api/filesAPI"; +import { deleteFile, renameFile, downloadFile } from "../../api/filesAPI"; import { useFiles, useQuickFiles } from "../../hooks/files"; +import { useDispatch } from "react-redux"; +import { setMoverID } from "../../actions/mover"; +import { setShareSelected } from "../../actions/selectedItem"; -const NewContextMenu = (props) => { +const ContextMenu = (props) => { const { invalidateFilesCache } = useFiles(); const { invalidateQuickFilesCache } = useQuickFiles(); + const dispatch = useDispatch(); const wrapperRef = useRef(); const liClassname = "flex w-full px-[20px] py-[12px] items-center font-normal justify-start no-underline transition-all duration-400 ease-in-out hover:bg-[#f6f5fd] hover:text-[#3c85ee] hover:font-medium"; @@ -51,33 +55,30 @@ const NewContextMenu = (props) => { } }; - // startMovingFile = async () => { - // this.props.dispatch( - // setMoverID( - // this.props._id, - // this.props.metadata.parent, - // true, - // this.props.metadata.drive, - // this.props.metadata.personalFile - // ) - // ); - // }; - - // startShareFile = () => { - // this.props.dispatch(setShareSelected({ ...this.props.file })); - // }; - - // startFileDownload = () => { - // console.log("start download file", this.props.file._id); - // this.props.downloadFile(this.props.file._id, this.props.file); - // }; - - const outOfBoundsClickCheck = () => { - if (wrapperRef && !wrapperRef.current.contains(event.target)) { - props.closeContext(); + const openMoveFileModal = async () => { + if (!props.folderMode) { + dispatch(setMoverID(props.file._id, props.file.metadata.parent, true)); } }; + const openShareFileModal = () => { + dispatch(setShareSelected(props.file)); + }; + + const downloadItem = () => { + downloadFile(props.file._id); + }; + + // TODO: Decide if we want it to close right on click or not + const outOfBoundsClickCheck = (e) => { + // if (wrapperRef && !wrapperRef.current.contains(e.target)) { + // props.closeContext(); + // } + setTimeout(() => { + props.closeContext(); + }, 150); + }; + useEffect(() => { document.addEventListener("mousedown", outOfBoundsClickCheck); document.addEventListener("touchstart", outOfBoundsClickCheck); @@ -93,7 +94,7 @@ const NewContextMenu = (props) => { onClick={props.stopPropagation} ref={wrapperRef} className={classNames( - "fixed min-w-[215px] bg-white shadow-[0px_2px_4px_rgba(0,0,0,0.15),_inset_0px_1px_0px_#f5f7fa] rounded-[4px] mt-[-5px] z-[2] animate-very-long", + "fixed min-w-[215px] bg-white shadow-[0px_2px_4px_rgba(0,0,0,0.15),_inset_0px_1px_0px_#f5f7fa] rounded-[4px] mt-[-5px] z-[2] mobile__context__menu", props.contextSelected.selected ? "opacity-100" : "opacity-0" )} style={ @@ -116,7 +117,7 @@ const NewContextMenu = (props) => { {!props.folderMode ? ( -
  • +
  • setting @@ -138,7 +139,7 @@ const NewContextMenu = (props) => {
    • ) : undefined} -
  • +
  • setting @@ -159,4 +160,4 @@ const NewContextMenu = (props) => { ); }; -export default NewContextMenu; +export default ContextMenu; diff --git a/src/components/FileItem/FileItem.jsx b/src/components/FileItem/FileItem.jsx index 9fffb0e..08956e9 100644 --- a/src/components/FileItem/FileItem.jsx +++ b/src/components/FileItem/FileItem.jsx @@ -1,114 +1,206 @@ import capitalize from "../../utils/capitalize"; import moment from "moment"; -import React from "react" -import NewContextMenu from "../NewContextMenu"; +import React from "react"; +import ContextMenu from "../ContextMenu"; import mobilecheck from "../../utils/mobileCheck"; const FileItem = (props) => { - - 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")} + 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/FolderItem/FolderItem.jsx b/src/components/FolderItem/FolderItem.jsx index e114d27..1294595 100644 --- a/src/components/FolderItem/FolderItem.jsx +++ b/src/components/FolderItem/FolderItem.jsx @@ -1,33 +1,64 @@ import React from "react"; -import NewContextMenu from "../NewContextMenu"; +import ContextMenu from "../ContextMenu"; const FolderItem = (props) => { - - return ( - -
    props.folderClick(props._id, props)} - onContextMenu={props.selectContext} - onTouchStart={props.onTouchStart} - onTouchEnd={props.onTouchEnd} - onTouchMove={props.onTouchMove}> -
    - -
    -
    - - {/* */} -
    -
    -

    {props.name}

    -
      - {/*
    • 16 files
      • + return ( +
      props.folderClick(props._id, props)} + onContextMenu={props.selectContext} + onTouchStart={props.onTouchStart} + onTouchEnd={props.onTouchEnd} + onTouchMove={props.onTouchMove} + > +
      + +
      +
      + + {/* */} +
      +
      +

      {props.name}

      +
        + {/*
      • 16 files
      • •
        • */} -
      • {props.drive ? 'Google Drive' : props.personalFolder ? 'Amazon S3' : 'myDrive'}
        • -
      -
      -
      - ) -} +
    • + {props.drive + ? "Google Drive" + : props.personalFolder + ? "Amazon S3" + : "myDrive"} +
      • +
    +
    +
    + ); +}; -export default FolderItem; \ No newline at end of file +export default FolderItem; diff --git a/src/components/NewContextMenu/index2.jsx b/src/components/NewContextMenu/index2.jsx deleted file mode 100644 index da0b285..0000000 --- a/src/components/NewContextMenu/index2.jsx +++ /dev/null @@ -1,75 +0,0 @@ -import React from "react"; -import { connect } from "react-redux"; -import { setShareSelected } from "../../actions/selectedItem"; -import NewContextMenu from "."; - -class NewContextMenuContainer extends React.Component { - constructor(props) { - super(props); - - this.wrapperRef = React.createRef(); - } - - // componentDidMount = () => { - // document.addEventListener("mousedown", this.handleClickOutside); - // document.addEventListener("touchstart", this.handleClickOutside); - // }; - - // componentWillUnmount = () => { - // document.removeEventListener("mousedown", this.handleClickOutside); - // document.removeEventListener("touchstart", this.handleClickOutside); - // }; - - componentDidUpdate = () => {}; - - handleClickOutside = () => { - if ( - this.props.contextSelected.selected && - this.wrapperRef && - !this.wrapperRef.current.contains(event.target) - ) { - this.props.closeContext(); - } - }; - - startFileDownload = () => { - console.log("start download file", this.props.file._id); - this.props.downloadFile(this.props.file._id, this.props.file); - }; - - startRenameFile = async (e) => { - console.log("rename file click"); - this.props.changeEditNameMode(); - }; - - startDeleteFile = async () => { - this.props.changeDeleteMode(); - }; - - startShareFile = () => { - this.props.dispatch(setShareSelected({ ...this.props.file })); - }; - - stopPropagation = (e) => { - e.stopPropagation(); - if (this.props.quickItemMode || this.props.gridMode) - this.props.closeContext(); - }; - - // render() { - // return ( - // - // ); - // } -} - -export default connect()(NewContextMenuContainer); diff --git a/src/components/QuickAccess/index.jsx b/src/components/QuickAccess/index.jsx index 51bf350..286cbfb 100644 --- a/src/components/QuickAccess/index.jsx +++ b/src/components/QuickAccess/index.jsx @@ -11,7 +11,7 @@ const QuickAccess = (props) => { return (
    { width="35" height="35" onClick={() => setQuickAccessExpanded(!quickAccessExpanded)} - className={classNames("cursor-pointer animate", { + className={classNames("cursor-pointer animate-movement", { "rotate-180": quickAccessExpanded, })} > @@ -38,9 +38,10 @@ const QuickAccess = (props) => {
    { + const currentSelectedItem = useSelector( + (state) => state.selectedItem.selected + ); const { image, hasThumbnail, imageOnError } = useThumbnail( props.metadata.hasThumbnail, props.metadata.thumbnailID @@ -34,8 +38,8 @@ const QuickAccessItem = (props) => { ); const elementSelected = useMemo( - () => `quick-${props._id}` === props.selected, - [props._id, props.selected] + () => `quick-${props._id}` === currentSelectedItem, + [props._id, currentSelectedItem] ); return ( @@ -54,7 +58,7 @@ const QuickAccessItem = (props) => { > {contextMenuState.selected && (
    - { elementSelected ? "text-white" : "text-[#637381]" )} > - Created {moment(props.uploadDate).calendar()} + Created {moment(props.uploadDate).format("MM/DD/YY hh:mma")}
    diff --git a/src/components/QuickAccessItem/index2.jsx b/src/components/QuickAccessItem/index2.jsx deleted file mode 100644 index 8c1a7de..0000000 --- a/src/components/QuickAccessItem/index2.jsx +++ /dev/null @@ -1,117 +0,0 @@ -import QuickAccessItem from "."; -import { - setRightSelected, - setLastSelected, - setSelected, -} 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 Swal from "sweetalert2"; -import { startRenameFile, startRemoveFile } from "../../actions/files"; -import { setMoverID } from "../../actions/mover"; -import mobilecheck from "../../utils/mobileCheck"; -import { setMobileContextMenu } from "../../actions/mobileContextMenu"; - -const currentURL = env.url; - -class QuickAccessItemContainer extends React.Component { - constructor(props) { - super(props); - - this.failedToLoad = false; - - this.state = { - image: "/images/file-svg.svg", - imageClassname: "noSelect file__item-no-thumbnail", - contextSelected: false, - hasThumbnail: false, - }; - } - - changeEditNameMode = 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; - } - - this.props.dispatch( - startRenameFile(this.props._id, folderName, this.props.metadata.drive) - ); - }; - - closeEditNameMode = () => { - this.setState(() => { - return { - ...this.state, - editNameMode: false, - }; - }); - }; - - changeDeleteMode = async () => { - 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 - ) - ); - } - }); - }; - - startMovingFile = async () => { - this.props.dispatch( - setMoverID( - this.props._id, - this.props.metadata.parent, - true, - this.props.metadata.drive, - this.props.metadata.personalFile - ) - ); - }; - - // render() { - // return ( - // - // ); - // } -} - -const connectStateToProp = (state) => ({ - rightSelected: state.selectedItem.rightSelected, - selected: state.selectedItem.selected, -}); - -export default connect(connectStateToProp)(QuickAccessItemContainer); diff --git a/src/components/RightSection/RightSection.jsx b/src/components/RightSection/RightSection.jsx index 11586b0..65ec000 100644 --- a/src/components/RightSection/RightSection.jsx +++ b/src/components/RightSection/RightSection.jsx @@ -1,70 +1,134 @@ import bytes from "bytes"; import moment from "moment"; import React from "react"; -import NewContextMenu from "../NewContextMenu"; +import ContextMenu from "../ContextMenu"; class RightSection extends React.Component { + constructor(props) { + super(props); + } - 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"} -
    -
    -
    - {this.props.selectedItem.file ? "Open File" : "Open Folder"} -
    - -
    -
    -
    - -
    -
    - - } + 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"} + +
    +
    +
    + + {this.props.selectedItem.file ? "Open File" : "Open Folder"} + +
    + + + +
    +
    +
    + +
    +
    + )} +
    + ); + } } -export default RightSection; \ No newline at end of file +export default RightSection; diff --git a/src/hooks/files.ts b/src/hooks/files.ts index b9c42d0..90cb670 100644 --- a/src/hooks/files.ts +++ b/src/hooks/files.ts @@ -22,7 +22,6 @@ export const useFiles = () => { getFilesList, { getNextPageParam: (lastPage, pages) => { - console.log("pages", pages); const lastElement = lastPage[lastPage.length - 1]; if (!lastElement) return undefined; return { diff --git a/src/reducers/mover.js b/src/reducers/mover.js index 889860f..888500f 100644 --- a/src/reducers/mover.js +++ b/src/reducers/mover.js @@ -1,39 +1,29 @@ const defaultState = { - id: "", - parent: "/", - isFile: true, - isGoogle: false, - isPersonal: false -} + id: "", + parent: "/", + isFile: true, +}; export default (state = defaultState, action) => { + switch (action.type) { + case "SET_MOVER_ID": + return { + ...state, + id: action.id, + parent: action.parent, + isFile: action.isFile, + }; - switch(action.type) { + case "RESET_MOVER_ID": + return { + ...state, + id: "", + parent: "/", + isFile: action.isFile, + }; - case "SET_MOVER_ID": - - return { - ...state, - id: action.id, - parent: action.parent, - isFile: action.isFile, - isGoogle: action.isGoogle, - isPersonal: action.isPersonal - } - - case "RESET_MOVER_ID": - - return { - ...state, - id: "", - parent: "/", - isFile: action.isFile, - isGoogle: false, - isPersonal: false, - } - - default: { - return state; - } + default: { + return state; } -} \ No newline at end of file + } +}; diff --git a/src/styles/components/_MobileContextMenu.scss b/src/styles/components/_MobileContextMenu.scss index ccbcc4c..54f1a25 100644 --- a/src/styles/components/_MobileContextMenu.scss +++ b/src/styles/components/_MobileContextMenu.scss @@ -1,43 +1,54 @@ .mobile__context-menu__wrapper { - // height: 165px; + // height: 165px; - width: 98%; - // background: red; - position: fixed; - bottom: 0; - /* margin-right: 130px; */ - margin-left: 1%; - border-top-left-radius: 10px; - border-top-right-radius: 10px; - display: flex; - flex-direction: column; - align-items: center; - box-shadow: 0 1px 2px 0 rgba(60,64,67,.302), 0 1px 3px 1px rgba(60,64,67,.149); - border: 1px solid #dadce0; - border-bottom: none; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-tap-highlight-color: transparent; - background: white; + width: 98%; + // background: red; + position: fixed; + bottom: 0; + /* margin-right: 130px; */ + margin-left: 1%; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + display: flex; + flex-direction: column; + align-items: center; + box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.302), + 0 1px 3px 1px rgba(60, 64, 67, 0.149); + border: 1px solid #dadce0; + border-bottom: none; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-tap-highlight-color: transparent; + background: white; } .mobile__context-menu__item { - // background: blue; - display: flex; - flex-direction: row; - width: 90%; + // background: blue; + display: flex; + flex-direction: row; + width: 90%; } .mobile__context-menu__image { - width: 28px; - margin-right: 15px; + width: 28px; + margin-right: 15px; } .mobile__context-menu__title { + color: #637381; +} - color: #637381; -} \ No newline at end of file +// TODO: Get mobile context working +.mobile__context__menu { + @media (max-width: 640px) { + bottom: 0 !important; + left: 0 !important; + top: unset !important; + right: unset !important; + z-index: 10; + } +} diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 5c0963d..1fcc30f 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -45,6 +45,10 @@ transition: 0.3s ease all; } +.animate-movement { + transition: 0.4s ease all; +} + .animate-medium { transition: 0.6s ease all; } diff --git a/tailwind.config.js b/tailwind.config.js index 5733b61..1a3bfb3 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -7,6 +7,12 @@ module.exports = { ], theme: { extend: {}, + screens: { + quickAccessOne: "1000px", + quickAccessTwo: "1210px", + quickAccessThree: "1420px", + quickAccessFour: "1600px", + }, }, plugins: [], };