oxmc/myDrive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

made more FE files TS

Browse Source
This commit is contained in:
subnub
2024-07-07 19:27:28 -04:00
parent f5691f9de1
commit 9751b5ca84
15 changed files with 83 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/controllers/file.ts
-3
View File
@@ -20,9 +20,6 @@ import NotAuthorizedError from "../utils/NotAuthorizedError";
import createThumbnail from "../services/ChunkService/utils/createImageThumbnail";
const fileService = new FileService();
const storageActions =
env.dbType === "s3" ? new S3Actions() : new FilesystemActions();
type userAccessType = {
_id: string;
emailVerified: boolean;
backend/controllers/folder.ts
+5 -34
View File
@@ -1,7 +1,6 @@
import FolderService from "../services/FolderService";
import { Request, Response } from "express";
import FileSystemService from "../services/ChunkService/FileSystemService";
import S3Service from "../services/ChunkService/S3Service";
import ChunkService from "../services/ChunkService";
const folderService = new FolderService();
@@ -17,14 +16,10 @@ interface RequestType extends Request {
encryptedToken?: string;
}
type ChunkServiceType = FileSystemService | S3Service;
const chunkService = new ChunkService();
class FolderController {
chunkService: ChunkServiceType;
constructor(chunkService: ChunkServiceType) {
this.chunkService = chunkService;
}
constructor() {}
createFolder = async (req: RequestType, res: Response) => {
if (!req.user) {
@@ -57,7 +52,7 @@ class FolderController {
const folderID = req.body.id;
const parentList = req.body.parentList;
await this.chunkService.deleteFolder(userID, folderID, parentList);
await chunkService.deleteFolder(userID, folderID);
res.send();
} catch (e: unknown) {
@@ -90,30 +85,6 @@ class FolderController {
}
};
deletePersonalFolder = async (req: RequestType, res: Response) => {
if (!req.user) {
return;
}
try {
const userID = req.user._id;
const folderID = req.body.id;
const parentList = req.body.parentList;
const s3Service = new S3Service();
await s3Service.deleteFolder(userID, folderID, parentList);
res.send();
} catch (e: unknown) {
if (e instanceof Error) {
console.log("\nDelete Personal Folder Error Folder Route:", e.message);
}
res.status(500).send("Server error deleting personal folder");
}
};
deleteAll = async (req: RequestType, res: Response) => {
if (!req.user) {
return;
@@ -122,7 +93,7 @@ class FolderController {
try {
const userID = req.user._id;
await this.chunkService.deleteAll(userID);
await chunkService.deleteAll(userID);
res.send();
} catch (e: unknown) {
backend/express-routers/folder.ts
+2 -2
View File
@@ -9,10 +9,10 @@ let folderController: FolderController;
if (env.dbType === "fs") {
const fileSystemService = new FileSystemService();
folderController = new FolderController(fileSystemService);
folderController = new FolderController();
} else {
const s3Service = new S3Service();
folderController = new FolderController(s3Service);
folderController = new FolderController();
}
const router = Router();
src/api/foldersAPI.ts
+1 -2
View File
@@ -72,11 +72,10 @@ export const restoreFolderAPI = async (folderID: string) => {
// DELETE
export const deleteFolder = async (folderID: string, parentList: string[]) => {
export const deleteFolder = async (folderID: string) => {
const response = await axios.delete("/folder-service/remove", {
data: {
id: folderID,
parentList,
},
});
return response.data;
src/components/AddNewDropdown/index.tsx
+7 -5
View File
@@ -7,7 +7,11 @@ import { useAppDispatch } from "../../hooks/store";
import { startAddFile } from "../../actions/files";
import { useRef } from "react";
const AddNewDropdown = (props: any) => {
interface AddNewDropdownProps {
closeDropdown: () => void;
}
const AddNewDropdown: React.FC<AddNewDropdownProps> = (props) => {
const params = useParams();
const { invalidateFoldersCache } = useFoldersClient();
const { wrapperRef } = useClickOutOfBounds(props.closeDropdown);
@@ -44,15 +48,13 @@ const AddNewDropdown = (props: any) => {
<div>
<input
className="w-full top-0 bg-red-500 h-[41px] mt-[3px] cursor-pointer absolute opacity-0"
// @ts-ignore
ref={uploadRef}
type="file"
multiple={true}
onChange={handleUpload}
/>
<a
onClick={props.showUploadOverlay}
className="flex items-center bg-white justify-start p-[12px_20px] transition-all duration-400 ease-in-out no-underline rounded-[5px] overflow-hidden text-[#0E1C71] text-[15px] leading-[18px]"
>
<a className="flex items-center bg-white justify-start p-[12px_20px] transition-all duration-400 ease-in-out no-underline rounded-[5px] overflow-hidden text-[#0E1C71] text-[15px] leading-[18px]">
<span className="inline-flex min-w-[30px]">
<img
className="max-w-full h-auto"
src/components/ContextMenu/index.jsx → src/components/ContextMenu/index.tsx
+33 -16
View File
@@ -1,5 +1,5 @@
import classNames from "classnames";
import React, { useEffect, useRef } from "react";
import React, { memo, useEffect, useRef } from "react";
import Swal from "sweetalert2";
import {
deleteFileAPI,
@@ -30,8 +30,25 @@ import DownloadIcon from "../../icons/DownloadIcon";
import MoveIcon from "../../icons/MoveIcon";
import RestoreIcon from "../../icons/RestoreIcon";
import { restoreItemPopup } from "../../popups/file";
import { FileInterface } from "../../types/file";
import { FolderInterface } from "../../types/folders";
const ContextMenu = (props) => {
export interface ContextMenuProps {
closeContext: () => void;
contextSelected: {
selected: boolean;
X: number;
Y: number;
};
folderMode?: boolean;
quickItemMode: boolean;
file?: FileInterface;
folder?: FolderInterface;
stopPropagation?: () => void;
gridMode: boolean;
}
const ContextMenu: React.FC<ContextMenuProps> = memo((props) => {
const { invalidateFilesCache } = useFilesClient();
const { invalidateFoldersCache } = useFoldersClient();
const { invalidateQuickFilesCache } = useQuickFilesClient();
@@ -44,7 +61,7 @@ const ContextMenu = (props) => {
const renameItem = async () => {
props.closeContext();
if (!props.folderMode) {
if (!props.folderMode && props.file) {
const { value: filename } = await Swal.fire({
title: "Enter A File Name",
input: "text",
@@ -59,7 +76,7 @@ const ContextMenu = (props) => {
await renameFileAPI(props.file._id, filename);
invalidateFilesCache();
invalidateQuickFilesCache();
} else {
} else if (props.folderMode && props.folder) {
const { value: folderName } = await Swal.fire({
title: "Enter A folder Name",
input: "text",
@@ -83,7 +100,7 @@ const ContextMenu = (props) => {
const trashItem = async () => {
props.closeContext();
if (!props.folderMode) {
if (!props.folderMode && props.file) {
const result = await Swal.fire({
title: "Move to trash?",
text: "Items in the trash will eventually be deleted.",
@@ -100,7 +117,7 @@ const ContextMenu = (props) => {
invalidateQuickFilesCache();
dispatch(resetSelected());
}
} else {
} else if (props.folderMode && props.folder) {
const result = await Swal.fire({
title: "Move to trash?",
text: "Items in the trash will eventually be deleted.",
@@ -120,7 +137,7 @@ const ContextMenu = (props) => {
const deleteItem = async () => {
props.closeContext();
if (!props.folderMode) {
if (!props.folderMode && props.file) {
const result = await Swal.fire({
title: "Delete file?",
text: "You will not be able to recover this file.",
@@ -137,7 +154,7 @@ const ContextMenu = (props) => {
invalidateQuickFilesCache();
dispatch(resetSelected());
}
} else {
} else if (props.folderMode && props.folder) {
const result = await Swal.fire({
title: "Delete folder?",
text: "You will not be able to recover this folder.",
@@ -159,10 +176,10 @@ const ContextMenu = (props) => {
props.closeContext();
const result = await restoreItemPopup();
if (!result) return;
if (!props.folderMode) {
if (!props.folderMode && props.file) {
await restoreFileAPI(props.file._id);
invalidateFilesCache();
} else {
} else if (props.folderMode && props.folder) {
await restoreFolderAPI(props.folder._id);
invalidateFoldersCache();
}
@@ -170,9 +187,9 @@ const ContextMenu = (props) => {
const openMoveItemModal = async () => {
props.closeContext();
if (!props.folderMode) {
if (!props.folderMode && props.file) {
dispatch(setMoverID(props.file._id, props.file.metadata.parent, true));
} else {
} else if (props.folderMode && props.folder) {
dispatch(setMoverID(props.folder._id, props.folder.parent, false));
}
};
@@ -184,12 +201,12 @@ const ContextMenu = (props) => {
const downloadItem = () => {
props.closeContext();
downloadFileAPI(props.file._id);
if (props.file) downloadFileAPI(props.file._id);
};
const selectItemMultiSelect = () => {
props.closeContext();
if (props.folderMode) {
if (props.folderMode && props.folder) {
dispatch(
setMultiSelectMode({
type: "folder",
@@ -198,7 +215,7 @@ const ContextMenu = (props) => {
folder: props.folder,
})
);
} else {
} else if (!props.folderMode && props.file) {
dispatch(
setMultiSelectMode({
type: props.quickItemMode ? "quick-item" : "file",
@@ -313,6 +330,6 @@ const ContextMenu = (props) => {
</ul>
</div>
);
};
});
export default ContextMenu;
src/components/Dataform/index.jsx → src/components/Dataform/index.tsx
+3 -2
View File
@@ -13,6 +13,7 @@ import classNames from "classnames";
import { useDragAndDrop } from "../../hooks/utils";
import MultiSelectBar from "../MultiSelectBar";
import { useFolders } from "../../hooks/folders";
import { FileInterface } from "../../types/file";
const DataForm = memo(() => {
const {
@@ -43,7 +44,7 @@ const DataForm = memo(() => {
}, [reachedIntersect, initialLoad, isFetchingNextPage]);
const addFile = useCallback(
(file) => {
(file: FileInterface) => {
dispatch(startAddFile(file, params.id));
},
[params.id]
@@ -90,7 +91,7 @@ const DataForm = memo(() => {
<SpinnerPage />
</div>
)}
{/* @ts-ignore */}
<div ref={sentinelRef} className="h-1"></div>
{/* TODO: Change this spinner name */}
src/components/FileItem/index.jsx → src/components/FileItem/index.tsx
+10 -4
View File
@@ -1,6 +1,6 @@
import capitalize from "../../utils/capitalize";
import moment from "moment";
import React, { useCallback, useMemo, useRef } from "react";
import React, { memo, useCallback, useMemo, useRef } from "react";
import ContextMenu from "../ContextMenu";
import mobilecheck from "../../utils/mobileCheck";
import { useContextMenu } from "../../hooks/contextMenu";
@@ -16,8 +16,13 @@ import { setMainSelect, setMultiSelectMode } from "../../reducers/selected";
import PlayButtonIcon from "../../icons/PlayIcon";
import { setPopupSelect } from "../../reducers/selected";
import ActionsIcon from "../../icons/ActionsIcon";
import { FileInterface } from "../../types/file";
const FileItem = React.memo((props) => {
interface FileItemProps {
file: FileInterface;
}
const FileItem: React.FC<FileItemProps> = memo((props) => {
const { file } = props;
const elementSelected = useAppSelector((state) => {
if (state.selected.mainSection.type !== "file") return false;
@@ -68,10 +73,10 @@ const FileItem = React.memo((props) => {
);
// TODO: See if we can memoize this
const fileClick = (e) => {
const fileClick = (e: any) => {
const multiSelectKey = e.metaKey || e.ctrlKey;
if (multiSelectMode | multiSelectKey) {
if (multiSelectMode || multiSelectKey) {
dispatch(
setMultiSelectMode({
type: "file",
@@ -158,6 +163,7 @@ const FileItem = React.memo((props) => {
)}
{/* <ContextMenu parent={props.metadata.parent} contextSelected={props.state.contextSelected} closeContext={props.closeContext} downloadFile={props.downloadFile} file={props} changeEditNameMode={props.changeEditNameMode} closeEditNameMode={props.closeEditNameMode} changeDeleteMode={props.changeDeleteMode} startMovingFile={props.startMovingFile}/> */}
<a onClick={onContextMenu}>
<ActionsIcon
className={classNames(
src/components/Files/index.jsx → src/components/Files/index.tsx
+1 -5
View File
@@ -11,11 +11,7 @@ import classNames from "classnames";
const Files = memo(() => {
const { data: files } = useFiles(false);
const parent = useSelector((state) => state.parent.parent);
const listView = useSelector((state) => state.filter.listView);
// TODO: Fix loading
const loading = useSelector((state) => state.main.loading);
const loadingMore = useSelector((state) => state.main.loadingMoreItems);
const search = useSelector((state) => state.filter.search);
const { isHome } = useUtils();
@@ -115,7 +111,7 @@ const Files = memo(() => {
))}
</div>
) : (
<table className="w-full" style={loading ? { display: "none" } : {}}>
<table className="w-full">
<thead>
<tr>
<th>
src/components/FolderItem/index.jsx → src/components/FolderItem/index.tsx
+10 -5
View File
@@ -1,4 +1,4 @@
import React, { useCallback, useMemo, useRef } from "react";
import React, { memo, useCallback, useMemo, useRef } from "react";
import ContextMenu from "../ContextMenu";
import { useContextMenu } from "../../hooks/contextMenu";
import classNames from "classnames";
@@ -10,8 +10,13 @@ import moment from "moment";
import { useAppDispatch, useAppSelector } from "../../hooks/store";
import { setMainSelect, setMultiSelectMode } from "../../reducers/selected";
import { useUtils } from "../../hooks/utils";
import { FolderInterface } from "../../types/folders";
const FolderItem = React.memo((props) => {
interface FolderItemProps {
folder: FolderInterface;
}
const FolderItem: React.FC<FolderItemProps> = memo((props) => {
const { folder } = props;
const elementSelected = useAppSelector((state) => {
if (state.selected.mainSection.type !== "folder") return false;
@@ -39,7 +44,7 @@ const FolderItem = React.memo((props) => {
} = useContextMenu();
const folderClick = useCallback(
(e) => {
(e: any) => {
const multiSelectKey = e.metaKey || e.ctrlKey;
if (multiSelectMode || multiSelectKey) {
dispatch(
@@ -108,10 +113,10 @@ const FolderItem = React.memo((props) => {
<ContextMenu
gridMode={true}
folderMode={true}
quickItemMode={props.folder.parent !== "/"}
quickItemMode={folder.parent !== "/"}
contextSelected={contextMenuState}
closeContext={closeContextMenu}
folder={props.folder}
folder={folder}
/>
</div>
)}
src/components/Folders/index.jsx → src/components/Folders/index.tsx
+4 -4
View File
@@ -42,7 +42,7 @@ const Folders = memo(() => {
}, [sortBy]);
const switchTypeOrderBy = useCallback(
(e) => {
(e: any) => {
const value = e.target.value;
let newSortBy = "date_desc";
@@ -117,9 +117,9 @@ const Folders = memo(() => {
<div
className={classNames(
"grid grid-cols-[repeat(auto-fit,minmax(40%,45%))] xs:grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-[16px]",
folders?.length > 1
? "justify-center xs:justify-normal"
: "justify-normal"
folders?.length === 1
? "justify-normal"
: "justify-center xs:justify-normal"
)}
>
{folders?.map((folder) => (
src/components/LeftSection/index.jsx → src/components/LeftSection/index.tsx
+2 -4
View File
@@ -54,7 +54,7 @@ const LeftSection = (props) => {
};
const closeDrawerEvent = useCallback(
(e) => {
(e: any) => {
console.log("close", e?.target.id);
if (
!e ||
@@ -99,9 +99,7 @@ const LeftSection = (props) => {
</span>
</a>
{/* TODO: Remove this props */}
{isDropdownOpen && (
<AddNewDropdown closeDropdown={closeDropdown} {...props} />
)}
{isDropdownOpen && <AddNewDropdown closeDropdown={closeDropdown} />}
</div>
<div className="pl-2 mr-[20px] py-2 hover:bg-[#f6f5fd] rounded-md">
<ul onClick={goHome} className="m-0 list-none p-0 cursor-pointer">
src/components/MainSection/index.jsx → src/components/MainSection/index.tsx
View File
src/components/QuickAccess/index.jsx → src/components/QuickAccess/index.tsx
+3 -3
View File
@@ -40,9 +40,9 @@ const QuickAccess = memo(() => {
<div
className={classNames(
"grid animate-movement grid-cols-[repeat(auto-fit,minmax(40%,45%))] xs:grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-[16px]",
quickfilesList?.length > 1
? "justify-center xs:justify-normal"
: "justify-normal",
quickfilesList?.length === 1
? "justify-normal"
: "justify-center xs: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]":
src/hooks/contextMenu.ts
+2 -2
View File
@@ -1,4 +1,4 @@
import { useRef, useState } from "react";
import { MouseEventHandler, useRef, useState } from "react";
export const useContextMenu = () => {
// 215 X 240
@@ -9,7 +9,7 @@ export const useContextMenu = () => {
});
const lastTouched = useRef(0);
const onContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
const onContextMenu = (e: any) => {
if (e) e.stopPropagation();
if (e) e.preventDefault();