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

started switching over to typescript more and also started new redux changes

Browse Source
This commit is contained in:
subnub
2024-06-25 02:17:44 -04:00
parent 9699a35f59
commit 2647e769f7
17 changed files with 381 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.tsx
+1 -2
View File
@@ -1,6 +1,6 @@
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import configStore from "./store/configureStore";
import store from "./store/configureStore";
import AppRouter from "./routers/AppRouter";
import "normalize.css/normalize.css";
import "./styles/styles.scss";
@@ -11,7 +11,6 @@ import { QueryClient, QueryClientProvider } from "react-query";
// import '../node_modules/@fortawesome/fontawesome-free/css/all.css';
// import '../node_modules/@fortawesome/fontawesome-free/js/all.js';
const store = configStore();
const queryClient = new QueryClient();
const jsxWrapper = (
src/components/Dataform/index.jsx
+2 -2
View File
@@ -22,10 +22,10 @@ const DataForm = memo(() => {
} else if (!fileList) {
return;
}
if (reachedIntersect) {
if (reachedIntersect && !isFetchingNextPage) {
filesFetchNextPage();
}
}, [reachedIntersect, initialLoad]);
}, [reachedIntersect, initialLoad, isFetchingNextPage]);
return (
<div className="w-full p-[65px_40px] overflow-y-scroll">
src/components/FileItem/index.jsx
+10 -5
View File
@@ -11,18 +11,21 @@ import { getFileColor, getFileExtension } from "../../utils/files";
import { startSetSelectedItem } from "../../actions/selectedItem";
import { setPopupFile } from "../../actions/popupFile";
import bytes from "bytes";
import { useAppDispatch, useAppSelector } from "../../hooks/store";
import { setMainSelect } from "../../reducers/selected";
const FileItem = React.memo((props) => {
const { file } = props;
const elementSelected = useSelector(
(state) => state.selectedItem.selected === file._id
);
const elementSelected = useAppSelector((state) => {
if (state.selected.mainSection.type !== "file") return false;
return state.selected.mainSection.id === file._id;
});
const listView = useSelector((state) => state.filter.listView);
const { image, hasThumbnail, imageOnError } = useThumbnail(
file.metadata.hasThumbnail,
file.metadata.thumbnailID
);
const dispatch = useDispatch();
const dispatch = useAppDispatch();
const lastSelected = useRef(0);
const {
onContextMenu,
@@ -58,7 +61,9 @@ const FileItem = React.memo((props) => {
const currentDate = Date.now();
if (!elementSelected) {
dispatch(startSetSelectedItem(file._id, true, false));
dispatch(
setMainSelect({ file, id: file._id, type: "file", folder: null })
);
lastSelected.current = Date.now();
return;
}
src/components/FolderItem/index.jsx
+16 -6
View File
@@ -7,15 +7,18 @@ import { useNavigate } from "react-router-dom";
import { startSetSelectedItem } from "../../actions/selectedItem";
import mobilecheck from "../../utils/mobileCheck";
import moment from "moment";
import { useAppDispatch, useAppSelector } from "../../hooks/store";
import { setMainSelect } from "../../reducers/selected";
const FolderItem = React.memo((props) => {
const { folder } = props;
const elementSelected = useSelector(
(state) => state.selectedItem.selected === folder._id
);
const elementSelected = useAppSelector((state) => {
if (state.selected.mainSection.type !== "folder") return false;
return state.selected.mainSection.id === folder._id;
});
const lastSelected = useRef(0);
const navigate = useNavigate();
const dispatch = useDispatch();
const dispatch = useAppDispatch();
const {
onContextMenu,
closeContextMenu,
@@ -30,7 +33,14 @@ const FolderItem = React.memo((props) => {
const currentDate = Date.now();
if (!elementSelected) {
dispatch(startSetSelectedItem(folder._id, false, false));
dispatch(
setMainSelect({
file: null,
id: folder._id,
type: "folder",
folder: folder,
})
);
lastSelected.current = Date.now();
return;
}
@@ -113,7 +123,7 @@ const FolderItem = React.memo((props) => {
elementSelected ? "text-white" : "text-black"
)}
>
{props.folder.name}
{folder.name}
</p>
<span
className={classNames(
src/components/Folders/index.jsx
+8 -1
View File
@@ -5,9 +5,11 @@ import FolderItem from "../FolderItem";
import { memo, useCallback, useEffect } from "react";
import ParentBar from "../ParentBar";
import classNames from "classnames";
import { useUtils } from "../../hooks/utils";
const Folders = memo(() => {
const { data: folders } = useFolders();
const { isHome } = useUtils();
const sortBy = useSelector((state) => state.filter.sortBy);
const dispatch = useDispatch();
@@ -67,7 +69,12 @@ const Folders = memo(() => {
return (
<div className="mt-8">
<div className="flex flex-row mb-[20px] justify-between text-[#212b36] items-center">
<h2 className="m-0 text-[22px] font-medium">
<h2
className={classNames(
"m-0 text-[22px] font-medium",
isHome ? "block" : "invisible"
)}
>
{folders?.length === 0 ? "No Folders" : "Folders"}
</h2>
<div className="flex flex-row items-center">
src/components/LeftSection/LeftSection.jsx
+1 -5
View File
@@ -14,7 +14,7 @@ class LeftSection extends React.Component {
render() {
return (
<div
className="menu__block p-6 hidden mobileMode:block border-r"
className="menu__block p-6 hidden mobileMode:block border-r w-[270px] min-w-[270px]"
ref={this.props.leftSectionRef}
style={
this.props.leftSectionMode === ""
@@ -96,10 +96,6 @@ class LeftSection extends React.Component {
</li>
</ul>
</div>
<UploadStorageSwitcher />
<div className="folder__structure">
<FolderTree />
</div>
<div
className={
this.props.state.hideFolderTree
src/components/ParentBar/ParentBar.jsx
+1 -1
View File
@@ -36,7 +36,7 @@ const ParentBar = memo(() => {
className="text-[#637381] text-[18px] leading-[21px] font-medium m-0 no-underline animate cursor-pointer"
onClick={goHome}
>
myDrive
Home
</a>
<span className="inline-flex m-[0px_10px]">
<img src="/assets/spacer.svg" alt="spacer" />
src/components/PopupWindow/PopupWindow.jsx
-63
View File
@@ -111,69 +111,6 @@ class PopupWindow extends React.Component {
/>
</div>
);
return (
<div className="popup-window" ref={this.props.wrapperRef}>
<h3 className="popup-window__title">
{capitalize(this.props.popupFile.filename)}
</h3>
{!this.props.popupFile.metadata.isVideo ? (
<div className="popup-window__image__wrapper">
{!this.props.popupFile.metadata.hasThumbnail ? (
<h3 className="popup-window__subtitle">No Preview Available</h3>
) : undefined}
{!this.props.popupFile.metadata.hasThumbnail ? (
<img
className={this.props.state.imageClassname}
src={this.props.state.image}
/>
) : (
<img
className={this.props.state.imageClassname}
onClick={this.props.setPhotoViewerWindow}
src={this.props.state.image}
onError={this.props.thumbnailOnError}
/>
)}
<div className={this.props.state.spinnerClassname}>
{!this.props.popupFile.metadata.hasThumbnail ? undefined : (
<Spinner />
)}
</div>
</div>
) : (
<video
className="popup-window__video"
src={this.props.state.video}
ref={this.props.video}
type="video/mp4"
controls
>
Your browser does not support the video tag.
</video>
)}
<button
className="button popup-window__button"
onClick={() =>
this.props.downloadFile(
this.props.popupFile._id,
this.props.popupFile
)
}
>
Download
</button>
<img
className="popup-window__close-button"
onClick={this.props.hidePopupWindow}
src="/images/close_icon.png"
/>
</div>
);
}
}
src/components/QuickAccessItem/index.tsx
+165
View File
@@ -0,0 +1,165 @@
import capitalize from "../../utils/capitalize";
import moment from "moment";
import React, { memo, 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 { useDispatch, useSelector } from "react-redux";
import mobilecheck from "../../utils/mobileCheck";
import { startSetSelectedItem } from "../../actions/selectedItem";
import { setPopupFile } from "../../actions/popupFile";
import { FileInterface } from "../../types/file";
import { useAppDispatch, useAppSelector } from "../../hooks/store";
import { setMainSelect } from "../../reducers/selected";
interface QuickAccessItemProps {
file: FileInterface;
}
const QuickAccessItem = memo((props: QuickAccessItemProps) => {
const { file } = props;
const elementSelected = useAppSelector((state) => {
if (state.selected.mainSection.type !== "quick-item") return false;
return state.selected.mainSection.id === file._id;
});
console.log("ele selected 2", elementSelected);
const { image, hasThumbnail, imageOnError } = useThumbnail(
file.metadata.hasThumbnail,
file.metadata.thumbnailID
);
const dispatch = useAppDispatch();
const lastSelected = useRef(0);
const {
onContextMenu,
closeContextMenu,
onTouchStart,
onTouchMove,
onTouchEnd,
clickStopPropagation,
...contextMenuState
} = useContextMenu();
const fileExtension = useMemo(
() => getFileExtension(file.filename),
[file.filename]
);
const imageColor = useMemo(
() => getFileColor(file.filename),
[file.filename]
);
// TODO: See if we can memoize this
const quickItemClick = () => {
const currentDate = Date.now();
if (!elementSelected) {
// dispatch(startSetSelectedItem(file._id, true, true));
dispatch(
setMainSelect({ file, id: file._id, type: "quick-item", folder: null })
);
lastSelected.current = Date.now();
return;
}
const isMobile = mobilecheck();
if (isMobile || currentDate - lastSelected.current < 1500) {
dispatch(setPopupFile({ showPopup: true, ...file }));
}
lastSelected.current = Date.now();
};
return (
<div
className={classNames(
"border rounded-md o transition-all duration-400 ease-in-out cursor-pointer flex items-center justify-center flex-col h-[125px] sm:h-[150px] animiate hover:border-[#3c85ee] overflow-hidden",
elementSelected ? "border-[#3c85ee]" : "border-[#ebe9f9]"
)}
onClick={quickItemClick}
onContextMenu={onContextMenu}
onTouchStart={onTouchStart}
onTouchMove={onTouchMove}
onTouchEnd={onTouchEnd}
>
{contextMenuState.selected && (
<div onClick={clickStopPropagation}>
<ContextMenu
gridMode={true}
quickItemMode={true}
contextSelected={contextMenuState}
closeContext={closeContextMenu}
file={file}
/>
</div>
)}
<div
className={classNames(
"inline-flex items-center w-full bg-white relative",
{
"mt-2": !hasThumbnail,
}
)}
>
{hasThumbnail ? (
<img
className="w-full min-h-[88px] max-h-[88px] h-full flex object-cover"
src={image}
onError={imageOnError}
/>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
version="1.1"
width="150"
height="150"
viewBox="0 0 24 24"
className="w-full min-h-[80px] max-h-[80px] h-full flex"
>
<path
d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
fill={imageColor}
/>
</svg>
)}
{!hasThumbnail && (
<div className="w-full h-full absolute flex justify-center items-center text-white mt-3">
<p className="text-sm">{fileExtension}</p>
</div>
)}
</div>
<div
className={classNames(
"p-3 overflow-hidden text-ellipsis block w-full animate",
elementSelected
? "bg-[#3c85ee] text-white"
: "bg-white text-[#637381]"
)}
>
<p
className={classNames(
"m-0 text-[14px] leading-[16px] font-normal max-w-full overflow-hidden text-ellipsis whitespace-nowrap animate",
elementSelected ? "text-white" : "text-[#212b36]"
)}
>
{capitalize(file.filename)}
</p>
<span
className={classNames(
"text-[#637381] font-normal max-w-full whitespace-nowrap text-xs animate hidden sm:block mt-1",
elementSelected ? "text-white" : "text-[#637381]"
)}
>
Created {moment(file.uploadDate).format("MM/DD/YY hh:mma")}
</span>
</div>
</div>
);
});
export default QuickAccessItem;
src/components/QuickAccessItem/index.jsx → src/components/QuickAccessItem/index2.jsx
+1
View File
@@ -10,6 +10,7 @@ import { useDispatch, useSelector } from "react-redux";
import mobilecheck from "../../utils/mobileCheck";
import { startSetSelectedItem } from "../../actions/selectedItem";
import { setPopupFile } from "../../actions/popupFile";
import { useAppSelector } from "../../hooks/store";
const QuickAccessItem = memo((props) => {
const { file } = props;
src/components/RightSection/index.jsx → src/components/RightSection/index.tsx
+37 -41
View File
@@ -9,15 +9,17 @@ import { getFileExtension } from "../../utils/files";
import { useContextMenu } from "../../hooks/contextMenu";
import { setPopupFile } from "../../actions/popupFile";
import { useNavigate } from "react-router-dom";
import { useAppSelector } from "../../hooks/store";
import { resetSelected } from "../../reducers/selected";
const RightSection = memo(() => {
const selectedItem = useSelector((state) => state.selectedItem);
const selectedItem = useAppSelector((state) => state.selected.mainSection);
const navigate = useNavigate();
const dispatch = useDispatch();
const formattedName = useMemo(() => {
if (!selectedItem) return "";
const name = selectedItem.name;
if (!selectedItem.id) return "";
const name = selectedItem.file?.filename || selectedItem.folder?.name || "";
const maxLength = 66;
const ellipsis = "...";
if (name.length <= maxLength) {
@@ -31,22 +33,27 @@ const RightSection = memo(() => {
const end = name.slice(-endLength);
return `${start}${ellipsis}${end}`;
}, [selectedItem?.name, selectedItem?.file]);
}, [
selectedItem?.id,
selectedItem?.file?.filename,
selectedItem?.folder?.name,
]);
const formattedDate = useMemo(
() => moment(selectedItem.date).format("L"),
[selectedItem?.date, moment]
);
const formattedDate = useMemo(() => {
const date =
selectedItem.file?.uploadDate || selectedItem.folder?.createdAt;
return moment(date).format("L");
}, [selectedItem?.file?.uploadDate, selectedItem.folder?.createdAt, moment]);
const fileSize = useMemo(() => {
if (!selectedItem || !selectedItem.size) return 0;
return bytes(selectedItem.size);
}, [selectedItem?.size, bytes]);
if (!selectedItem.file?.length) return 0;
return bytes(selectedItem.file.length);
}, [selectedItem?.file?.length, bytes]);
const fileExtension = useMemo(() => {
if (!selectedItem?.file) return null;
return getFileExtension(selectedItem.name);
}, [selectedItem?.file, selectedItem?.name, getFileExtension]);
if (!selectedItem?.file?.filename) return null;
return getFileExtension(selectedItem.file.filename);
}, [selectedItem?.file?.filename, getFileExtension]);
const {
onContextMenu,
@@ -58,24 +65,24 @@ const RightSection = memo(() => {
...contextMenuState
} = useContextMenu();
const resetSelected = () => {
dispatch(resetSelectedItem());
const reset = () => {
dispatch(resetSelected());
};
const openItem = (e) => {
const openItem = () => {
if (selectedItem.file) {
dispatch(setPopupFile({ showPopup: true, ...selectedItem.data }));
dispatch(setPopupFile({ showPopup: true, ...selectedItem.file }));
} else {
navigate(`/folder/${selectedItem.data._id}`);
navigate(`/folder/${selectedItem.id}`);
}
};
return (
<div
className={classNames(
"!hidden mobileMode:!flex min-w-[260px] max-w-[260px] border-l border-[#e8eef2] p-[25px] bg-white right-0 justify-center relative",
selectedItem.name === "" ? "flex justify-center items-center" : ""
selectedItem.id === "" ? "flex justify-center items-center" : ""
)}
>
{selectedItem.name === "" ? (
{selectedItem.id === "" ? (
<div className="flex flex-col justify-center items-center text-center">
<span>
<img src="/assets/filedetailsicon.svg" alt="filedetailsicon" />
@@ -97,7 +104,7 @@ const RightSection = memo(() => {
<img
className="w-[30px] h-[30px] ml-8 cursor-pointer absolute right-3"
src="/images/close_icon.png"
onClick={resetSelected}
onClick={reset}
/>
</div>
@@ -112,13 +119,13 @@ const RightSection = memo(() => {
Type
</span>
<span className="text-[#212b36] text-[13px] font-normal leading-[20px]">
{selectedItem.size ? fileExtension : "Folder"}
{selectedItem.file ? fileExtension : "Folder"}
</span>
</div>
<div
className="flex mb-[7px] justify-start"
style={
!selectedItem.size ? { display: "none" } : { display: "flex" }
!selectedItem.file ? { display: "none" } : { display: "flex" }
}
>
<span className="text-[#637381] text-[13px] font-normal mr-[35px] leading-[20px] min-w-[50px]">
@@ -136,29 +143,17 @@ const RightSection = memo(() => {
{formattedDate}
</span>
</div>
<div className="flex mb-[7px] justify-start">
<span className="text-[#637381] text-[13px] font-normal mr-[35px] leading-[20px] min-w-[50px]">
Location
</span>
<span className="text-[#212b36] text-[13px] font-normal leading-[20px]">
{selectedItem.drive
? "Google Drive"
: selectedItem.personalFile
? "Amazon S3"
: "myDrive"}
</span>
</div>
<div
className="flex mb-[7px] justify-start"
style={
!selectedItem.size ? { display: "none" } : { display: "flex" }
!selectedItem.file ? { display: "none" } : { display: "flex" }
}
>
<span className="text-[#637381] text-[13px] font-normal mr-[35px] leading-[20px] min-w-[50px]">
Privacy
Access
</span>
<span className="text-[#212b36] text-[13px] font-normal leading-[20px]">
{selectedItem.link ? "Public" : "Only you"}
{selectedItem.file?.metadata.link ? "Public" : "Private"}
</span>
</div>
</div>
@@ -172,6 +167,7 @@ const RightSection = memo(() => {
<div className="ml-[15px] px-[20px]">
<a
className="w-[40px] h-[40px] rounded-[4px] inline-flex items-center justify-center border border-[#919eab] text-[#919eab] no-underline animate"
// @ts-ignore
onClick={onContextMenu}
>
<i className="fas fa-ellipsis-h" aria-hidden="true"></i>
@@ -185,8 +181,8 @@ const RightSection = memo(() => {
contextSelected={contextMenuState}
closeContext={closeContextMenu}
folderMode={!selectedItem.file}
file={selectedItem.data}
folder={selectedItem.data}
file={selectedItem.file}
folder={selectedItem.folder}
/>
</div>
)}
src/hooks/files.ts
+12 -12
View File
@@ -85,17 +85,24 @@ export const useQuickFilesClient = () => {
interface thumbnailState {
hasThumbnail: boolean;
image: null | string;
image: undefined | string;
}
export const useThumbnail = (hasThumbnail: boolean, thumbnailID: string) => {
export const useThumbnail = (hasThumbnail: boolean, thumbnailID?: string) => {
const [state, setState] = useState<thumbnailState>({
hasThumbnail: false,
image: null,
image: undefined,
});
const imageOnError = useCallback(() => {
setState({
hasThumbnail: false,
image: undefined,
});
}, [setState]);
const getThumbnail = useCallback(async () => {
try {
if (!thumbnailID) return;
const thumbnailData = await getFileThumbnail(thumbnailID);
setState({
hasThumbnail: true,
@@ -105,17 +112,10 @@ export const useThumbnail = (hasThumbnail: boolean, thumbnailID: string) => {
console.log("error getting thumbnail data", e);
imageOnError();
}
}, [thumbnailID]);
const imageOnError = () => {
setState({
hasThumbnail: false,
image: null,
});
};
}, [thumbnailID, getFileThumbnail, setState, imageOnError]);
useEffect(() => {
if (!hasThumbnail) return;
if (!hasThumbnail || !thumbnailID) return;
getThumbnail();
}, [hasThumbnail, getThumbnail]);
src/hooks/store.ts
+6
View File
@@ -0,0 +1,6 @@
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../store/configureStore";
// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
export const useAppSelector = useSelector.withTypes<RootState>();
src/reducers/selected.ts
+40
View File
@@ -0,0 +1,40 @@
import { FileInterface } from "../types/file";
import { createSlice, configureStore, PayloadAction } from "@reduxjs/toolkit";
import { FolderInterface } from "../types/folders";
interface MainSecionType {
type: "" | "quick-item" | "file" | "folder";
id: string;
file: FileInterface | null;
folder: FolderInterface | null;
}
export interface SelectedStateType {
mainSection: MainSecionType;
popupModal: FileInterface | null;
}
const initialState: SelectedStateType = {
mainSection: {
type: "",
id: "",
file: null,
folder: null,
},
popupModal: null,
};
const selectedSlice = createSlice({
name: "selected",
initialState,
reducers: {
setMainSelect: (state, action: PayloadAction<MainSecionType>) => {
state.mainSection = action.payload;
},
resetSelected: () => initialState,
},
});
export const { setMainSelect, resetSelected } = selectedSlice.actions;
export default selectedSlice.reducer;
src/store/configureStore.js → src/store/configureStore.ts
+29 -26
View File
@@ -18,33 +18,36 @@ import moverReducer from "../reducers/mover";
import folderTreeReducer from "../reducers/folderTree";
import uploadStorageSwitcherReducer from "../reducers/uploadStorageSwitcher";
import mobileContextMenuReducer from "../reducers/mobileContextMenu";
import selectedReducer from "../reducers/selected";
//const composeEnchancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
export default () => {
const store = configureStore({
reducer: {
auth: authReducer,
main: mainReducer,
files: fileReducer,
folders: folderReducer,
filter: filterReducer,
selectedItem: selectedItemReducer,
uploads: uploadsReducer,
storage: storageReducer,
quickFiles: quickFilesReducer,
popupFile: popupFilesReducer,
settings: settingsReducer,
parent: parentReducer,
addOptions: addOptionsReducer,
photoViewer: photoViewerReducer,
routes: routesReducer,
mover: moverReducer,
folderTree: folderTreeReducer,
storageSwitcher: uploadStorageSwitcherReducer,
mobileContextMenu: mobileContextMenuReducer,
},
});
const store = configureStore({
reducer: {
auth: authReducer,
main: mainReducer,
files: fileReducer,
folders: folderReducer,
filter: filterReducer,
selected: selectedReducer,
selectedItem: selectedItemReducer,
uploads: uploadsReducer,
storage: storageReducer,
quickFiles: quickFilesReducer,
popupFile: popupFilesReducer,
settings: settingsReducer,
parent: parentReducer,
addOptions: addOptionsReducer,
photoViewer: photoViewerReducer,
routes: routesReducer,
mover: moverReducer,
folderTree: folderTreeReducer,
storageSwitcher: uploadStorageSwitcherReducer,
mobileContextMenu: mobileContextMenuReducer,
},
});
return store;
};
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export default store;
src/types/file.ts
+43
View File
@@ -0,0 +1,43 @@
export interface FileInterface {
_id: string;
length: number;
chunkSize: number;
uploadDate: string;
filename: string;
lastErrorObject: { updatedExisting: any };
metadata: {
owner: string;
parent: string;
parentList: string;
hasThumbnail: boolean;
isVideo: boolean;
thumbnailID?: string;
size: number;
IV: Buffer;
linkType?: "one" | "public";
link?: string;
filePath?: string;
s3ID?: string;
personalFile?: boolean;
};
}
interface example {
selectedRightSectionItem: {
folder?: {
id: string;
name: string;
};
file?: {
id: string;
filename: string;
};
};
popupFile: {
id: string;
filename: string;
};
selectedItem: {
type: string;
id: string;
};
}
src/types/folders.ts
+9
View File
@@ -0,0 +1,9 @@
export interface FolderInterface {
name: string;
parent: string;
owner: string;
createdAt: Date;
updatedAt: Date;
parentList: string[];
personalFolder?: boolean;
}