made right section and main scetion into functional components and fixed styling
This commit is contained in:
subnub
@@ -1,119 +0,0 @@
|
||||
import DataForm from "../Dataform";
|
||||
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 (
|
||||
<div className="content__block">
|
||||
<div
|
||||
className="overlay"
|
||||
style={
|
||||
props.leftSectionMode === "open" || props.rightSectionMode === "open"
|
||||
? { display: "block" }
|
||||
: { display: "none" }
|
||||
}
|
||||
></div>
|
||||
<div className="small__switcher--content">
|
||||
<a onClick={props.switchLeftSectionMode} className="menu__button">
|
||||
<i className="fas fa-bars"></i>
|
||||
</a>
|
||||
<a onClick={props.switchRightSectionMode} className="image__viewer">
|
||||
<i className="fas fa-images"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="file__container"
|
||||
style={
|
||||
props.routeType === "search"
|
||||
? { flexDirection: "column" }
|
||||
: { flexDirection: "row" }
|
||||
}
|
||||
>
|
||||
{true ? undefined : (
|
||||
<div className="file__control--panel empty__control--panel">
|
||||
<div className="file__get--started">
|
||||
<div className="get__started--image">
|
||||
<img src="/assets/get_startedfile.svg" alt="get" />
|
||||
</div>
|
||||
<h6>All your files in one place</h6>
|
||||
<p>Drag and drop a file to get started</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{props.routeType === "search" ? (
|
||||
<div
|
||||
className="file__control--panel folder__view"
|
||||
style={{ paddingBottom: "0", marginBottom: "-50px" }}
|
||||
>
|
||||
<div className="results__files">
|
||||
<h2>
|
||||
<span className="counter__result">
|
||||
{props.files.length + props.folders.length >= 50
|
||||
? "50+"
|
||||
: props.files.length + props.folders.length}
|
||||
</span>{" "}
|
||||
<span className="result__word">results</span> for{" "}
|
||||
<span className="result__search--word">
|
||||
{props.cachedSearch}
|
||||
</span>
|
||||
</h2>
|
||||
<p className="searching__result">
|
||||
You are searching in{" "}
|
||||
<span className="root__parent">
|
||||
{props.parent === "/"
|
||||
? "Home"
|
||||
: props.parentNameList.length !== 0
|
||||
? props.parentNameList[props.parentNameList.length - 1]
|
||||
: "Unknown"}
|
||||
</span>{" "}
|
||||
<span className="spacer">
|
||||
<img
|
||||
style={{
|
||||
height: "11px",
|
||||
marginTop: "2px",
|
||||
display: "none",
|
||||
}}
|
||||
src="/assets/smallspacer.svg"
|
||||
alt="spacer"
|
||||
/>
|
||||
</span>
|
||||
<span className="current__folder"></span>{" "}
|
||||
<a
|
||||
href="#"
|
||||
style={{ display: "none" }}
|
||||
className="search__filter--global"
|
||||
>
|
||||
Show results from everywhere
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : undefined}
|
||||
|
||||
{props.showPopup ? (
|
||||
<PopupWindow downloadFile={props.downloadFile} />
|
||||
) : undefined}
|
||||
|
||||
{props.moverID.length === 0 ? undefined : <MoverMenu />}
|
||||
|
||||
<div className="flex flex-row h-screen w-screen pt-16">
|
||||
<LeftSection goHome={() => {}} />
|
||||
|
||||
<DataForm />
|
||||
|
||||
<RightSection
|
||||
folderClick={props.folderClick}
|
||||
fileClick={props.fileClick}
|
||||
downloadFile={props.downloadFile}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default MainSection;
|
||||
@@ -1,302 +1,116 @@
|
||||
import { startLoadMoreFiles } from "../../actions/files";
|
||||
import {
|
||||
startSetSelectedItem,
|
||||
setLastSelected,
|
||||
} from "../../actions/selectedItem";
|
||||
import {
|
||||
setLoading,
|
||||
setLeftSectionMode,
|
||||
setRightSectionMode,
|
||||
} from "../../actions/main";
|
||||
import { setPopupFile } from "../../actions/popupFile";
|
||||
import mobileCheck from "../../utils/mobileCheck";
|
||||
import MainSection from "./MainSection";
|
||||
import env from "../../enviroment/envFrontEnd";
|
||||
import axios from "../../axiosInterceptor";
|
||||
import { connect } from "react-redux";
|
||||
// import { history } from "../../routers/AppRouter";
|
||||
import React from "react";
|
||||
import { getUpdateSettingsID } from "../../utils/updateSettings";
|
||||
import withNavigate from "../HocComponent";
|
||||
import DataForm from "../Dataform";
|
||||
import RightSection from "../RightSection";
|
||||
import MoverMenu from "../MoverMenu";
|
||||
import PopupWindow from "../PopupWindow";
|
||||
import React, { memo } from "react";
|
||||
import LeftSection from "../LeftSection";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
class MainSectionContainer extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const MainSection = memo(() => {
|
||||
const moverID = useSelector((state) => state.mover.id);
|
||||
const showPopup = useSelector((state) => state.popupFile.showPopup);
|
||||
return (
|
||||
<div>
|
||||
{/* <div
|
||||
className="overlay"
|
||||
style={
|
||||
props.leftSectionMode === "open" || props.rightSectionMode === "open"
|
||||
? { display: "block" }
|
||||
: { display: "none" }
|
||||
}
|
||||
></div>
|
||||
<div className="small__switcher--content">
|
||||
<a onClick={props.switchLeftSectionMode} className="menu__button">
|
||||
<i className="fas fa-bars"></i>
|
||||
</a>
|
||||
<a onClick={props.switchRightSectionMode} className="image__viewer">
|
||||
<i className="fas fa-images"></i>
|
||||
</a>
|
||||
</div> */}
|
||||
<div
|
||||
className="flex h-full"
|
||||
// style={
|
||||
// props.routeType === "search"
|
||||
// ? { flexDirection: "column" }
|
||||
// : { flexDirection: "row" }
|
||||
// }
|
||||
>
|
||||
{/* {true ? undefined : (
|
||||
<div className="file__control--panel empty__control--panel">
|
||||
<div className="file__get--started">
|
||||
<div className="get__started--image">
|
||||
<img src="/assets/get_startedfile.svg" alt="get" />
|
||||
</div>
|
||||
<h6>All your files in one place</h6>
|
||||
<p>Drag and drop a file to get started</p>
|
||||
</div>
|
||||
</div>
|
||||
)} */}
|
||||
|
||||
this.doubleClickFoldersMobile = false;
|
||||
this.lastSettingsUpdateID = "";
|
||||
}
|
||||
{/* {props.routeType === "search" ? (
|
||||
<div
|
||||
className="file__control--panel folder__view"
|
||||
style={{ paddingBottom: "0", marginBottom: "-50px" }}
|
||||
>
|
||||
<div className="results__files">
|
||||
<h2>
|
||||
<span className="counter__result">
|
||||
{props.files.length + props.folders.length >= 50
|
||||
? "50+"
|
||||
: props.files.length + props.folders.length}
|
||||
</span>{" "}
|
||||
<span className="result__word">results</span> for{" "}
|
||||
<span className="result__search--word">
|
||||
{props.cachedSearch}
|
||||
</span>
|
||||
</h2>
|
||||
<p className="searching__result">
|
||||
You are searching in{" "}
|
||||
<span className="root__parent">
|
||||
{props.parent === "/"
|
||||
? "Home"
|
||||
: props.parentNameList.length !== 0
|
||||
? props.parentNameList[props.parentNameList.length - 1]
|
||||
: "Unknown"}
|
||||
</span>{" "}
|
||||
<span className="spacer">
|
||||
<img
|
||||
style={{
|
||||
height: "11px",
|
||||
marginTop: "2px",
|
||||
display: "none",
|
||||
}}
|
||||
src="/assets/smallspacer.svg"
|
||||
alt="spacer"
|
||||
/>
|
||||
</span>
|
||||
<span className="current__folder"></span>{" "}
|
||||
<a
|
||||
href="#"
|
||||
style={{ display: "none" }}
|
||||
className="search__filter--global"
|
||||
>
|
||||
Show results from everywhere
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : undefined} */}
|
||||
|
||||
folderClick = (id, folder, bypass = false) => {
|
||||
const currentDate = Date.now();
|
||||
const mobile = mobileCheck();
|
||||
const selectedID = this.props.selected;
|
||||
{showPopup ? <PopupWindow /> : undefined}
|
||||
|
||||
const doubleClickMobile =
|
||||
localStorage.getItem("double-click-folders") || false;
|
||||
{moverID.length === 0 ? undefined : <MoverMenu />}
|
||||
|
||||
if (
|
||||
(currentDate - this.props.lastSelected < 1500 && selectedID === id) ||
|
||||
(mobile && !doubleClickMobile) ||
|
||||
bypass
|
||||
) {
|
||||
this.props.navigate(`/folder/${id}`);
|
||||
} else {
|
||||
const isGoogleDrive = folder.drive;
|
||||
<div className="flex flex-row h-screen w-screen pt-16">
|
||||
<LeftSection goHome={() => {}} />
|
||||
|
||||
this.props.dispatch(
|
||||
startSetSelectedItem(id, false, false, isGoogleDrive)
|
||||
);
|
||||
}
|
||||
};
|
||||
<DataForm />
|
||||
|
||||
fileClick = (fileID, file, fromQuickItems = false, bypass = false) => {
|
||||
const currentDate = Date.now();
|
||||
|
||||
let selectedFileID = fileID;
|
||||
|
||||
if (fromQuickItems) {
|
||||
selectedFileID = "quick-" + fileID;
|
||||
}
|
||||
|
||||
const isMobile = mobileCheck();
|
||||
|
||||
console.log("file", file);
|
||||
|
||||
if (
|
||||
(currentDate - this.props.lastSelected < 1500 &&
|
||||
selectedFileID === this.props.selected) ||
|
||||
bypass
|
||||
) {
|
||||
this.props.dispatch(setPopupFile({ showPopup: true, ...file }));
|
||||
} else {
|
||||
const isGoogleDrive = file.metadata.drive;
|
||||
|
||||
this.props.dispatch(
|
||||
startSetSelectedItem(fileID, true, fromQuickItems, isGoogleDrive)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
scrollEvent = (e) => {
|
||||
//if (!mobileCheck()) return;
|
||||
|
||||
return;
|
||||
|
||||
const scrollY = window.pageYOffset;
|
||||
const windowY = document.documentElement.scrollHeight;
|
||||
|
||||
let limit = window.localStorage.getItem("list-size") || 50;
|
||||
limit = parseInt(limit);
|
||||
|
||||
if (this.props.loading) return;
|
||||
|
||||
if (windowY / 2 < scrollY && this.props.allowLoadMoreItems) {
|
||||
console.log("load more main");
|
||||
|
||||
if (this.props.files.length >= limit) {
|
||||
const parent = this.props.parent;
|
||||
const search = this.props.filter.search;
|
||||
const sortBy = this.props.filter.sortBy;
|
||||
const lastFileDate =
|
||||
this.props.files[this.props.files.length - 1].uploadDate;
|
||||
const lastFileName =
|
||||
this.props.files[this.props.files.length - 1].filename;
|
||||
|
||||
this.props.dispatch(setLoading(true));
|
||||
this.props.dispatch(
|
||||
startLoadMoreFiles(parent, sortBy, search, lastFileDate, lastFileName)
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
window.addEventListener("scroll", this.scrollEvent);
|
||||
window.addEventListener("resize", this.resizeEvent);
|
||||
|
||||
this.getSettings();
|
||||
};
|
||||
|
||||
componentDidUpdate = () => {
|
||||
// console.log("update ID main", getUpdateSettingsID());
|
||||
// if (this.lastSettingsUpdateID !== getUpdateSettingsID()) {
|
||||
// console.log("Settings Update!");
|
||||
// this.getSettings();
|
||||
// }
|
||||
// this.lastSettingsUpdateID = getUpdateSettingsID();
|
||||
// console.log("update settings id", updateSettingsID);
|
||||
// console.log("Main Section Updated", this.props.resetSettingsMain);
|
||||
// if (this.lastSettingsUpdateID !== this.props.resetSettingsMain) {
|
||||
// console.log("Settings Update!");
|
||||
// this.getSettings();
|
||||
// }
|
||||
// this.lastSettingsUpdateID = this.props.resetSettingsMain;
|
||||
};
|
||||
|
||||
getSettings = () => {
|
||||
this.doubleClickFoldersMobile =
|
||||
localStorage.getItem("double-click-folders") || false;
|
||||
};
|
||||
|
||||
componentWillUnmount = () => {
|
||||
window.removeEventListener("scroll", this.scrollEvent);
|
||||
};
|
||||
|
||||
resizeEvent = () => {
|
||||
if (this.props.leftSectionMode === "open")
|
||||
this.props.dispatch(setLeftSectionMode(""));
|
||||
if (this.props.rightSectionMode === "open")
|
||||
this.props.dispatch(setRightSectionMode(""));
|
||||
};
|
||||
|
||||
downloadFile = (fileID, file) => {
|
||||
const isGoogle = file.metadata.drive;
|
||||
const isGoogleDoc = file.metadata.googleDoc;
|
||||
const isPersonal = file.metadata.personalFile;
|
||||
|
||||
this.props.dispatch(setLastSelected(0));
|
||||
|
||||
axios
|
||||
.post("/user-service/get-token")
|
||||
.then((response) => {
|
||||
let finalUrl = isGoogle
|
||||
? !isGoogleDoc
|
||||
? `/file-service-google/download/${fileID}`
|
||||
: `/file-service-google-doc/download/${fileID}`
|
||||
: !isPersonal
|
||||
? `/file-service/download/${fileID}`
|
||||
: `/file-service-personal/download/${fileID}`;
|
||||
|
||||
finalUrl = `http://localhost:3000${finalUrl}`;
|
||||
|
||||
console.log("download file", finalUrl);
|
||||
|
||||
const link = document.createElement("a");
|
||||
document.body.appendChild(link);
|
||||
link.href = finalUrl;
|
||||
link.setAttribute("type", "hidden");
|
||||
link.setAttribute("download", true);
|
||||
link.click();
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log("Download file get refresh token error", e);
|
||||
});
|
||||
|
||||
// axios.get(currentURL +'/file-service/download/get-token')
|
||||
// .then((response) => {
|
||||
|
||||
// const tempToken = response.data.tempToken;
|
||||
|
||||
// const finalUrl =
|
||||
// isGoogle ? !isGoogleDoc ? currentURL + `/file-service-google/download/${fileID}` : currentURL + `/file-service-google-doc/download/${fileID}`
|
||||
// : !isPersonal ? currentURL + `/file-service/download/${fileID}` : currentURL + `/file-service-personal/download/${fileID}`
|
||||
|
||||
// const link = document.createElement('a');
|
||||
// document.body.appendChild(link);
|
||||
// link.href = finalUrl;
|
||||
// link.setAttribute('type', 'hidden');
|
||||
// link.setAttribute("download", true);
|
||||
// link.click();
|
||||
|
||||
// }).catch((err) => {
|
||||
// console.log(err)
|
||||
// })
|
||||
};
|
||||
|
||||
loadMoreItems = () => {
|
||||
return;
|
||||
|
||||
console.log("load more main");
|
||||
|
||||
if (mobileCheck()) return;
|
||||
|
||||
let limit = window.localStorage.getItem("list-size") || 50;
|
||||
limit = parseInt(limit);
|
||||
|
||||
if (this.props.loading) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.props.files.length >= limit) {
|
||||
const parent = this.props.parent;
|
||||
const search = this.props.filter.search;
|
||||
const sortBy = this.props.filter.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.filter.isGoogle;
|
||||
|
||||
this.props.dispatch(
|
||||
startLoadMoreFiles(
|
||||
parent,
|
||||
sortBy,
|
||||
search,
|
||||
lastFileDate,
|
||||
lastFileName,
|
||||
lastPageToken,
|
||||
isGoogle
|
||||
)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
switchLeftSectionMode = () => {
|
||||
const leftSectionMode = this.props.leftSectionMode;
|
||||
|
||||
if (leftSectionMode === "" || leftSectionMode === "close") {
|
||||
this.props.dispatch(setLeftSectionMode("open"));
|
||||
} else {
|
||||
this.props.dispatch(setLeftSectionMode("close"));
|
||||
}
|
||||
};
|
||||
|
||||
switchRightSectionMode = () => {
|
||||
const rightSectionMode = this.props.rightSectionMode;
|
||||
|
||||
if (rightSectionMode === "" || rightSectionMode === "close") {
|
||||
this.props.dispatch(setRightSectionMode("open"));
|
||||
} else {
|
||||
this.props.dispatch(setRightSectionMode("close"));
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<MainSection
|
||||
folderClick={this.folderClick}
|
||||
fileClick={this.fileClick}
|
||||
downloadFile={this.downloadFile}
|
||||
loadMoreItems={this.loadMoreItems}
|
||||
switchLeftSectionMode={this.switchLeftSectionMode}
|
||||
switchRightSectionMode={this.switchRightSectionMode}
|
||||
{...this.props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const connectPropToState = (state) => ({
|
||||
filter: state.filter,
|
||||
files: state.files,
|
||||
folders: state.folders,
|
||||
allowLoadMoreItems: state.main.loadMoreItems,
|
||||
loading: state.main.loading,
|
||||
showPopup: state.popupFile.showPopup,
|
||||
quickFiles: state.quickFiles,
|
||||
selected: state.selectedItem.selected,
|
||||
lastSelected: state.selectedItem.lastSelected,
|
||||
parent: state.parent.parent,
|
||||
parentNameList: state.parent.parentNameList,
|
||||
moverID: state.mover.id,
|
||||
routeType: state.main.currentRouteType,
|
||||
cachedSearch: state.main.cachedSearch,
|
||||
leftSectionMode: state.main.leftSectionMode,
|
||||
rightSectionMode: state.main.rightSectionMode,
|
||||
// resetSettingsMain: state.main.resetSettingsMain
|
||||
<RightSection />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default connect(connectPropToState)(withNavigate(MainSectionContainer));
|
||||
export default MainSection;
|
||||
|
||||
Reference in New Issue
Block a user