made dataform into a complete functional component
This commit is contained in:
subnub
@@ -1,226 +0,0 @@
|
||||
import FileItem from "../FileItem";
|
||||
import FolderItem from "../FolderItem";
|
||||
import React from "react";
|
||||
import QuickAccess from "../QuickAccess";
|
||||
import Folders from "../Folders";
|
||||
import ParentBar from "../ParentBar";
|
||||
import Spinner from "../Spinner";
|
||||
import SpinnerImage from "../SpinnerImage";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useInfiniteQuery, useQuery } from "react-query";
|
||||
import { getFilesList } from "../../api/filesAPI";
|
||||
import { getFoldersList } from "../../api/foldersAPI";
|
||||
import { useFiles } from "../../hooks/files";
|
||||
import { useFolders } from "../../hooks/folders";
|
||||
|
||||
const DataForm = (props) => {
|
||||
const {
|
||||
data: files,
|
||||
fetchNextPage: filesFetchNextPage,
|
||||
invalidateFilesCache,
|
||||
} = useFiles();
|
||||
const { data: folders } = useFolders();
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
props.parent === "/"
|
||||
? "file__control--panel"
|
||||
: "file__control--panel folder__view"
|
||||
}
|
||||
>
|
||||
{!props.loading ? <QuickAccess /> : undefined}
|
||||
|
||||
{/* style={props.folders.length === 0 ? {} : props.parent === "/" ? {marginTop:"50px", display:"block"} : {display:"block"} */}
|
||||
<button
|
||||
className="p-2 bg-blue-500 rounded-md text-white"
|
||||
onClick={filesFetchNextPage}
|
||||
>
|
||||
Next page
|
||||
</button>
|
||||
<button
|
||||
className="p-2 bg-blue-500 rounded-md text-white ml-4"
|
||||
onClick={invalidateFilesCache}
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
<Folders />
|
||||
|
||||
<div className="file__view noSelect">
|
||||
<div className="recent__table--wrap">
|
||||
{props.parent === "/" ? (
|
||||
<div
|
||||
className="head__recent--files noSelect"
|
||||
style={props.loading ? { display: "none" } : {}}
|
||||
>
|
||||
<h2>{props.search !== "" ? "Files" : "Home Files"}</h2>
|
||||
<div className="view__recent">
|
||||
<ul>
|
||||
<li onClick={props.changeListViewMode}>
|
||||
<a
|
||||
style={
|
||||
props.listView
|
||||
? { color: "#919eab" }
|
||||
: { color: "#3c85ee" }
|
||||
}
|
||||
>
|
||||
<i className="fas fa-th-large"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
onClick={props.changeListViewMode}
|
||||
className="active__view"
|
||||
>
|
||||
<a
|
||||
style={
|
||||
!props.listView
|
||||
? { color: "#919eab" }
|
||||
: { color: "#3c85ee" }
|
||||
}
|
||||
>
|
||||
<i className="fas fa-list"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="head__recent--files noSelect"
|
||||
style={
|
||||
props.loading ? { display: "none" } : { marginTop: "20px" }
|
||||
}
|
||||
>
|
||||
<ParentBar />
|
||||
<div className="view__recent">
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
style={
|
||||
props.listView
|
||||
? { color: "#919eab" }
|
||||
: { color: "#3c85ee" }
|
||||
}
|
||||
onClick={props.changeListViewMode}
|
||||
>
|
||||
<i className="fas fa-th-large"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li className="active__view">
|
||||
<a
|
||||
style={
|
||||
!props.listView
|
||||
? { color: "#919eab" }
|
||||
: { color: "#3c85ee" }
|
||||
}
|
||||
onClick={props.changeListViewMode}
|
||||
>
|
||||
<i className="fas fa-list"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!props.listView ? (
|
||||
<div className="main__access">
|
||||
{files?.pages.map((filePage, index) => (
|
||||
<React.Fragment key={index}>
|
||||
{filePage.map((file) => (
|
||||
<FileItem
|
||||
file={file}
|
||||
key={file._id}
|
||||
itemSelected={file._id === props.selected}
|
||||
downloadFile={props.downloadFile}
|
||||
removeFile={props.removeFile}
|
||||
fileClick={props.fileClick}
|
||||
/>
|
||||
))}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<table
|
||||
className="w-full"
|
||||
style={props.loading ? { display: "none" } : {}}
|
||||
>
|
||||
<tr>
|
||||
<th>
|
||||
<div className="flex flex-row items-center mb-2 ml-4">
|
||||
<p className="text-[#212b36] text-sm font-medium">Name</p>
|
||||
{/* <select
|
||||
className="sorting__select"
|
||||
onChange={props.onChangeSelect}
|
||||
value={
|
||||
props.sortBy === "alp_desc" ||
|
||||
props.sortBy === "alp_asc"
|
||||
? "name"
|
||||
: "date"
|
||||
}
|
||||
>
|
||||
<option value="date">Modified</option>
|
||||
<option value="name">Name</option>
|
||||
</select> */}
|
||||
{/* <a className="ml-2" onClick={props.switchSortBy}>
|
||||
<img
|
||||
className="w-3 h-3"
|
||||
src="/assets/sortarrow.svg"
|
||||
alt="sortarrow"
|
||||
style={
|
||||
props.sortBy === "date_desc" ||
|
||||
props.sortBy === "alp_desc"
|
||||
? { transform: "scaleY(-1)" }
|
||||
: {}
|
||||
}
|
||||
/>
|
||||
</a> */}
|
||||
</div>
|
||||
</th>
|
||||
<th className="hidden fileListShowDetails:table-cell">
|
||||
<p className="text-[#212b36] text-sm font-medium mb-2">
|
||||
Size
|
||||
</p>
|
||||
</th>
|
||||
<th className="hidden fileListShowDetails:table-cell">
|
||||
<p className="text-[#212b36] text-sm font-medium mb-2">
|
||||
Modified
|
||||
</p>
|
||||
</th>
|
||||
<th>
|
||||
<p className="text-[#212b36] text-sm font-medium mb-2">
|
||||
Actions
|
||||
</p>
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
{files?.pages.map((filePage, index) => (
|
||||
<React.Fragment key={index}>
|
||||
{filePage.map((file) => (
|
||||
<FileItem file={file} key={file._id} />
|
||||
))}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</table>
|
||||
)}
|
||||
|
||||
<div
|
||||
className="dataform-loadmore-files"
|
||||
style={props.loadingMoreItems ? {} : { display: "none" }}
|
||||
>
|
||||
<SpinnerImage />
|
||||
</div>
|
||||
|
||||
{/* {props.loading ?
|
||||
<div className="dataform__spinner__wrapper">
|
||||
<Spinner />
|
||||
</div> : undefined} */}
|
||||
|
||||
{/* */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DataForm;
|
||||
@@ -1,152 +1,33 @@
|
||||
import DataForm from "./DataForm";
|
||||
import { connect } from "react-redux";
|
||||
import React from "react";
|
||||
import {
|
||||
enableListView,
|
||||
disableListView,
|
||||
setSortBy,
|
||||
} from "../../actions/filter";
|
||||
import { startSetFiles, startLoadMoreFiles } from "../../actions/files";
|
||||
import { startSetFolders } from "../../actions/folders";
|
||||
import { resetItems } from "../../actions/main";
|
||||
import QuickAccess from "../QuickAccess";
|
||||
import Folders from "../Folders";
|
||||
import { useFiles } from "../../hooks/files";
|
||||
import Files from "../Files";
|
||||
|
||||
class DataFormContainer extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const DataForm = (props) => {
|
||||
const { fetchNextPage: filesFetchNextPage, invalidateFilesCache } =
|
||||
useFiles();
|
||||
|
||||
this.timeout = 0;
|
||||
}
|
||||
return (
|
||||
<div className="w-full p-[65px_40px] overflow-y-scroll">
|
||||
<QuickAccess />
|
||||
<button
|
||||
className="p-2 bg-blue-500 rounded-md text-white"
|
||||
onClick={filesFetchNextPage}
|
||||
>
|
||||
Next page
|
||||
</button>
|
||||
<button
|
||||
className="p-2 bg-blue-500 rounded-md text-white ml-4"
|
||||
onClick={invalidateFilesCache}
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
|
||||
changeListViewMode = () => {
|
||||
if (!this.props.listView) {
|
||||
this.props.dispatch(enableListView());
|
||||
} else {
|
||||
this.props.dispatch(disableListView());
|
||||
}
|
||||
};
|
||||
<Folders />
|
||||
|
||||
onScrollEvent = () => {};
|
||||
<Files />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
document.addEventListener("scroll", this.scrollCheck);
|
||||
};
|
||||
|
||||
scrollCheck = (e) => {
|
||||
const heightValue = app.clientHeight - app.clientHeight / 4;
|
||||
|
||||
if (heightValue < window.scrollY) {
|
||||
const date = new Date();
|
||||
|
||||
if (
|
||||
this.props.loadMoreItems &&
|
||||
this.timeout < date.getTime() &&
|
||||
!this.props.loadingMoreItems
|
||||
) {
|
||||
this.timeout = date.getTime() + 500;
|
||||
this.loadMoreItems();
|
||||
} else {
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
loadMoreItems = () => {
|
||||
let limit = window.localStorage.getItem("list-size") || 50;
|
||||
limit = parseInt(limit);
|
||||
|
||||
if (this.props.files.length >= limit) {
|
||||
const parent = this.props.parent;
|
||||
const search = this.props.search;
|
||||
const sortBy = this.props.sortBy;
|
||||
const lastFileDate =
|
||||
this.props.files[this.props.files.length - 1].uploadDate;
|
||||
const lastFileName =
|
||||
this.props.files[this.props.files.length - 1].filename;
|
||||
const lastPageToken =
|
||||
this.props.files[this.props.files.length - 1].pageToken;
|
||||
const isGoogle = this.props.isGoogle;
|
||||
|
||||
this.props.dispatch(
|
||||
startLoadMoreFiles(
|
||||
parent,
|
||||
sortBy,
|
||||
search,
|
||||
lastFileDate,
|
||||
lastFileName,
|
||||
lastPageToken,
|
||||
isGoogle
|
||||
)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
componentDidUpdate = () => {};
|
||||
|
||||
switchSortBy = () => {
|
||||
let sortByString = this.props.sortBy.includes("date")
|
||||
? this.props.sortBy === "date_desc"
|
||||
? "date_asc"
|
||||
: "date_desc"
|
||||
: this.props.sortBy === "alp_desc"
|
||||
? "alp_asc"
|
||||
: "alp_desc";
|
||||
|
||||
this.props.dispatch(setSortBy(sortByString));
|
||||
};
|
||||
|
||||
onChangeSelect = (e) => {
|
||||
const value = e.target.value;
|
||||
|
||||
let sortByString = "";
|
||||
|
||||
if (value === "date") {
|
||||
if (this.props.sortBy.includes("asc")) {
|
||||
sortByString = "date_asc";
|
||||
} else {
|
||||
sortByString = "date_desc";
|
||||
}
|
||||
} else if (value === "name") {
|
||||
if (this.props.sortBy.includes("asc")) {
|
||||
sortByString = "alp_asc";
|
||||
} else {
|
||||
sortByString = "alp_desc";
|
||||
}
|
||||
}
|
||||
|
||||
const parent = this.props.parent;
|
||||
const search = this.props.search;
|
||||
|
||||
this.props.dispatch(setSortBy(sortByString));
|
||||
this.props.dispatch(startSetFiles(parent, sortByString, search));
|
||||
this.props.dispatch(startSetFolders(parent, sortByString, search));
|
||||
this.props.dispatch(resetItems());
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<DataForm
|
||||
{...this.props}
|
||||
onChangeSelect={this.onChangeSelect}
|
||||
changeListViewMode={this.changeListViewMode}
|
||||
switchSortBy={this.switchSortBy}
|
||||
onScrollEvent={this.onScrollEvent}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProp = (state) => ({
|
||||
files: state.files,
|
||||
folders: state.folders,
|
||||
selected: state.selectedItem.selected,
|
||||
resetItems: state.main.resetItems,
|
||||
parent: state.parent.parent,
|
||||
listView: state.filter.listView,
|
||||
sortBy: state.filter.sortBy,
|
||||
search: state.filter.search,
|
||||
isGoogle: state.filter.isGoogle,
|
||||
loadMoreItems: state.main.loadMoreItems,
|
||||
loading: state.main.loading,
|
||||
loadingMoreItems: state.main.loadingMoreItems,
|
||||
});
|
||||
|
||||
export default connect(mapStateToProp)(DataFormContainer);
|
||||
export default DataForm;
|
||||
|
||||
@@ -0,0 +1,139 @@
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { disableListView, enableListView } from "../../actions/filter";
|
||||
import { useFiles } from "../../hooks/files";
|
||||
import SpinnerImage from "../SpinnerImage";
|
||||
import React from "react";
|
||||
import FileItem from "../FileItem";
|
||||
import ParentBar from "../ParentBar";
|
||||
|
||||
const Files = () => {
|
||||
const { data: files } = useFiles();
|
||||
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 dispatch = useDispatch();
|
||||
|
||||
const changeListViewMode = () => {
|
||||
if (!listView) {
|
||||
dispatch(enableListView());
|
||||
} else {
|
||||
dispatch(disableListView());
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="mt-8">
|
||||
<div>
|
||||
<div className="flex justify-between">
|
||||
<h2 className="m-0 mb-[20px] text-[22px] font-medium">
|
||||
{search !== "" ? "Files" : "Home Files"}
|
||||
</h2>
|
||||
<div>
|
||||
<ul className="flex items-center list-none m-0 p-0">
|
||||
<li className="mr-4" onClick={changeListViewMode}>
|
||||
<a
|
||||
style={listView ? { color: "#919eab" } : { color: "#3c85ee" }}
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4 cursor-pointer"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
data-prefix="fas"
|
||||
data-icon="th-large"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
data-fa-i2svg=""
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M296 32h192c13.255 0 24 10.745 24 24v160c0 13.255-10.745 24-24 24H296c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24zm-80 0H24C10.745 32 0 42.745 0 56v160c0 13.255 10.745 24 24 24h192c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24zM0 296v160c0 13.255 10.745 24 24 24h192c13.255 0 24-10.745 24-24V296c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm296 184h192c13.255 0 24-10.745 24-24V296c0-13.255-10.745-24-24-24H296c-13.255 0-24 10.745-24 24v160c0 13.255 10.745 24 24 24z"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li className="mr-2" onClick={changeListViewMode}>
|
||||
<a
|
||||
style={
|
||||
!listView ? { color: "#919eab" } : { color: "#3c85ee" }
|
||||
}
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4 cursor-pointer"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
data-prefix="fas"
|
||||
data-icon="list"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
data-fa-i2svg=""
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!listView ? (
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(185px,185px))] gap-[20px]">
|
||||
{files?.pages.map((filePage, index) => (
|
||||
<React.Fragment key={index}>
|
||||
{filePage.map((file) => (
|
||||
<FileItem file={file} key={file._id} />
|
||||
))}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<table className="w-full" style={loading ? { display: "none" } : {}}>
|
||||
<tr>
|
||||
<th>
|
||||
<div className="flex flex-row items-center mb-2 ml-4">
|
||||
<p className="text-[#212b36] text-sm font-medium">Name</p>
|
||||
</div>
|
||||
</th>
|
||||
<th className="hidden fileListShowDetails:table-cell">
|
||||
<p className="text-[#212b36] text-sm font-medium mb-2">Size</p>
|
||||
</th>
|
||||
<th className="hidden fileListShowDetails:table-cell">
|
||||
<p className="text-[#212b36] text-sm font-medium mb-2">
|
||||
Modified
|
||||
</p>
|
||||
</th>
|
||||
<th>
|
||||
<p className="text-[#212b36] text-sm font-medium mb-2">
|
||||
Actions
|
||||
</p>
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
{files?.pages.map((filePage, index) => (
|
||||
<React.Fragment key={index}>
|
||||
{filePage.map((file) => (
|
||||
<FileItem file={file} key={file._id} />
|
||||
))}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</table>
|
||||
)}
|
||||
|
||||
{/* <div
|
||||
className="dataform-loadmore-files"
|
||||
style={loadingMore ? {} : { display: "none" }}
|
||||
>
|
||||
<SpinnerImage />
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Files;
|
||||
@@ -63,11 +63,7 @@ const Folder = () => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
parent === "/"
|
||||
? "folders__panel"
|
||||
: "folders__panel folders__panel__folder"
|
||||
}
|
||||
className="mt-8"
|
||||
// style={props.loading ? { display: "none" } : { display: "block" }}
|
||||
>
|
||||
<div className="flex flex-row justify-between text-[#212b36]">
|
||||
@@ -99,7 +95,7 @@ const Folder = () => {
|
||||
</svg>
|
||||
</a>
|
||||
<select
|
||||
className=" text-sm font-medium"
|
||||
className="text-sm font-medium"
|
||||
onChange={switchTypeOrderBy}
|
||||
value={
|
||||
sortBy === "alp_desc" || sortBy === "alp_asc" ? "name" : "date"
|
||||
@@ -111,7 +107,7 @@ const Folder = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="inner__folders">
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(185px,185px))] gap-[20px]">
|
||||
{folders?.map((folder) => (
|
||||
<FolderItem folder={folder} key={folder._id} />
|
||||
))}
|
||||
|
||||
@@ -101,11 +101,7 @@ const MainSection = React.forwardRef((props, ref) => {
|
||||
<div className="flex flex-row h-screen w-screen pt-16">
|
||||
<LeftSection goHome={() => {}} />
|
||||
|
||||
<DataForm
|
||||
folderClick={props.folderClick}
|
||||
fileClick={props.fileClick}
|
||||
downloadFile={props.downloadFile}
|
||||
/>
|
||||
<DataForm />
|
||||
|
||||
<RightSection
|
||||
folderClick={props.folderClick}
|
||||
|
||||
Reference in New Issue
Block a user