From da3cbb47239bf7b97ad4d906f25423af37c61d9a Mon Sep 17 00:00:00 2001 From: subnub Date: Sun, 23 Jun 2024 09:11:14 -0400 Subject: [PATCH] made dataform into a complete functional component --- src/components/Dataform/DataForm.jsx | 226 --------------------- src/components/Dataform/index.jsx | 175 +++------------- src/components/Files/index.jsx | 139 +++++++++++++ src/components/Folders/index.jsx | 10 +- src/components/MainSection/MainSection.jsx | 6 +- 5 files changed, 171 insertions(+), 385 deletions(-) delete mode 100644 src/components/Dataform/DataForm.jsx create mode 100644 src/components/Files/index.jsx diff --git a/src/components/Dataform/DataForm.jsx b/src/components/Dataform/DataForm.jsx deleted file mode 100644 index ed2e539..0000000 --- a/src/components/Dataform/DataForm.jsx +++ /dev/null @@ -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 ( -
- {!props.loading ? : undefined} - - {/* style={props.folders.length === 0 ? {} : props.parent === "/" ? {marginTop:"50px", display:"block"} : {display:"block"} */} - - - - -
-
- {props.parent === "/" ? ( -
-

{props.search !== "" ? "Files" : "Home Files"}

-
- -
-
- ) : ( -
- -
- -
-
- )} - - {!props.listView ? ( -
- {files?.pages.map((filePage, index) => ( - - {filePage.map((file) => ( - - ))} - - ))} -
- ) : ( - - - - - - - - - {files?.pages.map((filePage, index) => ( - - {filePage.map((file) => ( - - ))} - - ))} -
-
-

Name

- {/* */} - {/* - sortarrow - */} -
- 		-

- Size -

- 		-

- Modified -

- 		-

- Actions -

-
- )} - -
- -
- - {/* {props.loading ? -
- -
: undefined} */} - - {/* */} -
-
-
- ); -}; - -export default DataForm; diff --git a/src/components/Dataform/index.jsx b/src/components/Dataform/index.jsx index b3f2d0a..c3edf78 100644 --- a/src/components/Dataform/index.jsx +++ b/src/components/Dataform/index.jsx @@ -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 ( +
+ + + - changeListViewMode = () => { - if (!this.props.listView) { - this.props.dispatch(enableListView()); - } else { - this.props.dispatch(disableListView()); - } - }; + - onScrollEvent = () => {}; + +
+ ); +}; - 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 ( - - ); - } -} - -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; diff --git a/src/components/Files/index.jsx b/src/components/Files/index.jsx new file mode 100644 index 0000000..0d1163c --- /dev/null +++ b/src/components/Files/index.jsx @@ -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 ( +
+
+
+

+ {search !== "" ? "Files" : "Home Files"} +

+
+ +
+
+ + {!listView ? ( +
+ {files?.pages.map((filePage, index) => ( + + {filePage.map((file) => ( + + ))} + + ))} +
+ ) : ( + + + + + + + + + {files?.pages.map((filePage, index) => ( + + {filePage.map((file) => ( + + ))} + + ))} +
+
+

Name

+
+ 		+

Size

+ 		+

+ Modified +

+ 		+

+ Actions +

+
+ )} + + {/*
+ +
*/} +
+
+ ); +}; + +export default Files; diff --git a/src/components/Folders/index.jsx b/src/components/Folders/index.jsx index 0bb2dce..13b4c9e 100644 --- a/src/components/Folders/index.jsx +++ b/src/components/Folders/index.jsx @@ -63,11 +63,7 @@ const Folder = () => { return (
@@ -99,7 +95,7 @@ const Folder = () => {