-
);
diff --git a/src/components/QuickAccess/QuickAccess.jsx b/src/components/QuickAccess/QuickAccess.jsx
deleted file mode 100644
index 27829e2..0000000
--- a/src/components/QuickAccess/QuickAccess.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import QuickAccessItem from "../QuickAccessItem";
-import React from "react";
-
-const QuickAccess = (props) => (
- {
placeholder="Verify Password"
onChange={props.verifyPasswordOnChange}
value={props.state.verifyPassword}
- ref={(ref) => {
- props.passwordInput = ref;
- }}
/>
)}
diff --git a/src/components/MainSection/MainSection.jsx b/src/components/MainSection/MainSection.jsx
index ca9e9d2..a8ffd1d 100644
--- a/src/components/MainSection/MainSection.jsx
+++ b/src/components/MainSection/MainSection.jsx
@@ -3,6 +3,7 @@ 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 (
@@ -97,17 +98,21 @@ const MainSection = React.forwardRef((props, ref) => {
{props.moverID.length === 0 ? undefined :
+ {}} />
-
-
-);
-
-export default QuickAccess;
diff --git a/src/components/QuickAccess/index.jsx b/src/components/QuickAccess/index.jsx
index a309e8e..7d9d053 100644
--- a/src/components/QuickAccess/index.jsx
+++ b/src/components/QuickAccess/index.jsx
@@ -1,22 +1,44 @@
-import QuickAccess from "./QuickAccess";
-import {connect} from "react-redux";
+import { useSelector } from "react-redux";
+import QuickAccessItem from "../QuickAccessItem";
import React from "react";
+import { useQuickFiles } from "../../hooks/files";
-class QuickAccessContainer extends React.Component {
+const QuickAccess = (props) => {
+ const { data: quickfilesList } = useQuickFiles();
+ const currentRouteType = useSelector((state) => state.main.currentRouteType);
- constructor(props) {
- super(props);
- }
+ return (
+
-
-
- Quick Access
-
- {props.quickFiles.map((file) => (
-
-
+
+ );
+};
-}
-
-const connectStateToProp = (state) => ({
- quickFiles: state.quickFiles,
- currentRouteType: state.main.currentRouteType
-})
-
-export default connect(connectStateToProp)(QuickAccessContainer)
\ No newline at end of file
+export default QuickAccess;
diff --git a/src/components/QuickAccessItem/QuickAccessItem.jsx b/src/components/QuickAccessItem/QuickAccessItem.jsx
index f8cf7f5..a84e1c4 100644
--- a/src/components/QuickAccessItem/QuickAccessItem.jsx
+++ b/src/components/QuickAccessItem/QuickAccessItem.jsx
@@ -1,28 +1,168 @@
import capitalize from "../../utils/capitalize";
import moment from "moment";
-import React from "react";
+import React, { useMemo } from "react";
import NewContextMenu from "../NewContextMenu";
+import classNames from "classnames";
-const QuickAccessItem = (props) => (
+const QuickAccessItem = (props) => {
+ const fileExtension = useMemo(() => {
+ const filenameSplit = props.filename.split(".");
-
+
- render() {
- return + Quick Access +
+
+ {quickfilesList?.map((file) => (
+
+ {props.fileClick(props._id, props, true)}}
- onContextMenu={props.selectContext}
- onTouchStart={props.onTouchStart}
- onTouchEnd={props.onTouchEnd}
- onTouchMove={props.onTouchMove}
+ if (filenameSplit.length > 1) {
+ let extension = filenameSplit[filenameSplit.length - 1];
+
+ if (extension.length > 4)
+ extension =
+ extension.substring(0, 3) +
+ extension.substring(extension.length - 1, extension.length);
+
+ return extension.toUpperCase();
+ } else {
+ return "UNK";
+ }
+ }, [props.filename]);
+
+ const imageColor = useMemo(() => {
+ const letter = fileExtension.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";
+ }
+ }, [props.filename]);
+
+ const elementSelected = useMemo(
+ () => `quick-${props._id}` === props.selected,
+ [props._id, props.selected]
+ );
+
+ console.log("thumbnail", props.state);
+
+ return (
+
{
+ props.fileClick(props._id, props, true);
+ }}
+ onContextMenu={props.selectContext}
+ onTouchStart={props.onTouchStart}
+ onTouchEnd={props.onTouchEnd}
+ onTouchMove={props.onTouchMove}
>
-
-)
-
-export default QuickAccessItem
+ );
+};
+export default QuickAccessItem;
diff --git a/src/components/QuickAccessItem/index.jsx b/src/components/QuickAccessItem/index.jsx
index 3cc4782..6b98ed9 100644
--- a/src/components/QuickAccessItem/index.jsx
+++ b/src/components/QuickAccessItem/index.jsx
@@ -1,9 +1,13 @@
-import QuickAccessItem from "./QuickAccessItem"
-import {setRightSelected, setLastSelected, setSelected} from "../../actions/selectedItem"
-import mobileCheck from "../../utils/mobileCheck"
+import QuickAccessItem from "./QuickAccessItem";
+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 { connect } from "react-redux";
import React from "react";
import Swal from "sweetalert2";
import { startRenameFile, startRemoveFile } from "../../actions/files";
@@ -14,268 +18,263 @@ import { setMobileContextMenu } from "../../actions/mobileContextMenu";
const currentURL = env.url;
class QuickAccessItemContainer extends React.Component {
+ constructor(props) {
+ super(props);
- constructor(props) {
- super(props);
+ this.failedToLoad = false;
+ this.lastTouch = 0;
- this.failedToLoad = false;
- this.lastTouch = 0;
+ this.state = {
+ contextMenuPos: {},
+ image: "/images/file-svg.svg",
+ imageClassname: "noSelect file__item-no-thumbnail",
+ contextSelected: false,
+ hasThumbnail: false,
+ };
+ }
- this.state = {
- contextMenuPos: {},
- image: "/images/file-svg.svg",
- imageClassname: "noSelect file__item-no-thumbnail",
- contextSelected: false,
- }
+ componentDidMount = () => {
+ const hasThumbnail = this.props.metadata.hasThumbnail;
+ console.log("has", hasThumbnail);
+
+ if (hasThumbnail && !this.failedToLoad) {
+ this.getThumbnail();
+ }
+ };
+
+ closeContext = () => {
+ this.setState(() => {
+ return {
+ ...this.state,
+ contextSelected: false,
+ };
+ });
+ };
+
+ selectContext = (e) => {
+ if (e) e.stopPropagation();
+ if (e) e.preventDefault();
+
+ if (mobilecheck()) {
+ this.props.dispatch(setMobileContextMenu(true, this.props));
+ return;
}
- componentDidMount = () => {
+ this.setState(() => {
+ return {
+ ...this.state,
+ contextSelected: !this.state.contextSelected,
+ };
+ });
+ };
- const hasThumbnail = this.props.metadata.hasThumbnail;
+ getThumbnail = async () => {
+ const thumbnailID = this.props.metadata.thumbnailID;
+ const imageClassname = "noSelect";
- if (hasThumbnail && !this.failedToLoad) {
- this.getThumbnail();
- }
+ // GOOGLE DRIVE IMAGE
+ if (this.props.metadata.drive) {
+ return await this.setState(() => ({
+ ...this.state,
+ image: this.props.metadata.thumbnailID,
+ imageClassname: imageClassname,
+ }));
}
- closeContext = () => {
-
- this.setState(() => {
- return {
- ...this.state,
- contextSelected: false
- }
- })
- }
+ const config = {
+ responseType: "arraybuffer",
+ };
- selectContext = (e) => {
+ await this.setState(() => ({
+ ...this.state,
+ image: "/images/file-svg.svg",
+ imageClassname: "noSelect file__item-no-thumbnail",
+ }));
- if (e) e.stopPropagation()
- if (e) e.preventDefault();
+ const url = `http://localhost:5173/api/file-service/thumbnail/${thumbnailID}`;
- if (mobilecheck()) {
-
- this.props.dispatch(setMobileContextMenu(true, this.props));
- return;
- }
-
- this.setState(() => {
- return {
- ...this.state,
- contextSelected: !this.state.contextSelected
- }
- })
- }
-
- getThumbnail = async() => {
-
- const thumbnailID = this.props.metadata.thumbnailID;
- const imageClassname = "noSelect"
-
- // GOOGLE DRIVE IMAGE
- if (this.props.metadata.drive) {
- return await this.setState(() => ({
- ...this.state,
- image: this.props.metadata.thumbnailID,
- imageClassname: imageClassname
- }))
- }
-
- const config = {
- responseType: 'arraybuffer'
- };
-
- await this.setState(() => ({
- ...this.state,
- image: "/images/file-svg.svg",
- imageClassname: "noSelect file__item-no-thumbnail"
- }))
-
- const isPersonal = this.props.metadata.personalFile;
-
- const url = !isPersonal ? `/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,
- image: imgUrl,
- imageClassname: imageClassname
- }))
-
- }).catch((err) => {
- console.log(err)
- })
- }
-
- thumbnailOnError = () => {
-
- console.log("thumbnail on error");
+ axios
+ .get(url, config)
+ .then((results) => {
+ const imgFile = new Blob([results.data]);
+ const imgUrl = URL.createObjectURL(imgFile);
+ console.log("got image");
this.setState(() => ({
- ...this.state,
- image: "/images/file-svg.svg",
- imageClassname: "noSelect file__item-no-thumbnail",
- }))
+ ...this.state,
+ image: imgUrl,
+ imageClassname: imageClassname,
+ hasThumbnail: true,
+ }));
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+ };
+ thumbnailOnError = (e) => {
+ console.log("thumbnail on error", e);
+
+ this.setState(() => ({
+ ...this.state,
+ image: "/images/file-svg.svg",
+ imageClassname: "noSelect file__item-no-thumbnail",
+ hasThumbnail: false,
+ }));
+ };
+
+ onTouchStart = () => {
+ const date = new Date();
+ this.lastTouch = date.getTime();
+ };
+
+ onTouchMove = () => {
+ this.lastTouch = 0;
+ };
+
+ onTouchEnd = () => {
+ if (this.lastTouch === 0) {
+ return;
}
- onTouchStart = () => {
- const date = new Date();
- this.lastTouch = date.getTime();
+ const date = new Date();
+ const difference = date - this.lastTouch;
+
+ this.lastTouch = 0;
+
+ if (difference > 500) {
+ 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: "-3px", bottom: 0 };
+
+ if (isMobile) {
+ styleObj = { bottom: 0, left: "2px" };
+ } else {
+ const clientY = e.nativeEvent.clientY;
+ const clientX = e.nativeEvent.clientX;
+
+ if (clientX > windowX / 2) {
+ styleObj = { ...styleObj, left: "unset", right: 0 };
+ } else {
+ styleObj = { ...styleObj, left: 0, right: "unset" };
+ }
}
- onTouchMove = () => {
+ this.setState(() => ({
+ ...this.state,
+ contextMenuPos: styleObj,
+ }));
- this.lastTouch = 0;
- }
+ this.props.dispatch(setSelected("quick-" + this.props._id));
+ this.props.dispatch(setRightSelected("quick-" + this.props._id));
+ this.props.dispatch(setLastSelected(0));
+ };
- onTouchEnd = () => {
+ changeEditNameMode = async () => {
+ let inputValue = this.props.filename;
- if (this.lastTouch === 0) {
-
- return;
- }
-
- const date = new Date();
- const difference = date - this.lastTouch;
-
- this.lastTouch = 0;
-
- if (difference > 500) {
- this.selectContext()
+ 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;
}
- getContextMenu = (e) => {
+ this.props.dispatch(
+ startRenameFile(this.props._id, folderName, this.props.metadata.drive)
+ );
+ };
- if (e) e.preventDefault();
+ closeEditNameMode = () => {
+ this.setState(() => {
+ return {
+ ...this.state,
+ editNameMode: false,
+ };
+ });
+ };
- const isMobile = mobileCheck()
-
- const windowX = window.innerWidth;
- const windowY = window.innerHeight;
+ 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
+ )
+ );
+ }
+ });
+ };
- let styleObj = {right:0, left:0, top: "-3px", bottom: 0}
+ startMovingFile = async () => {
+ this.props.dispatch(
+ setMoverID(
+ this.props._id,
+ this.props.metadata.parent,
+ true,
+ this.props.metadata.drive,
+ this.props.metadata.personalFile
+ )
+ );
+ };
- if (isMobile) {
-
- styleObj = {bottom: 0, left: "2px"};
-
- } else {
-
- const clientY = e.nativeEvent.clientY;
- const clientX = e.nativeEvent.clientX;
-
- if (clientX > windowX / 2) {
-
- styleObj = {...styleObj, left:"unset", right:0}
-
- } else {
-
- styleObj = {...styleObj, left:0, right:"unset"}
- }
-
- }
-
- this.setState(() => ({
- ...this.state,
- contextMenuPos: styleObj
- }))
-
- this.props.dispatch(setSelected("quick-"+this.props._id))
- this.props.dispatch(setRightSelected("quick-"+this.props._id))
- this.props.dispatch(setLastSelected(0));
- }
-
- 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));
- }
-
- clickStopPropagation = (e) => {
- e.stopPropagation();
- }
-
- render() {
-
- return
-
-
-
- 
-
-
-
+ {capitalize(props.filename)}
- Created {moment(props.uploadDate).calendar()} -
+
+
+ {props.state.hasThumbnail ? (
+
+ ) : (
+
+ )}
+ {!props.state.hasThumbnail && (
+
+
+
+ )}
+ {fileExtension}
+
+
+ {capitalize(props.filename)} +
+ + Created {moment(props.uploadDate).calendar()} + +