cleanup
This commit is contained in:
subnub
@@ -1,80 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
export class Subbar extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<div className="subbar">
|
||||
|
||||
<div className="add-button add-button-2" onClick={this.props.addButtonEvent} ref={this.props.wrapperRef}>
|
||||
|
||||
<img className="add-button__img" src="/images/add-blue.png"/>
|
||||
|
||||
<h3 className="add-button__title">New</h3>
|
||||
|
||||
<div className={this.props.showAddOptions2 ? "add-button__option-wrapper2 add-button__option-wrapper--show" : "add-button__option-wrapper2"}>
|
||||
<div className="add_button__option__add-folder-wrapper" onClick={this.props.createFolder}>
|
||||
<img className="add_button__option__add-folder-image" src="/images/grey-add-folder.png"/>
|
||||
<p className="add_button__option__add-folder-title">Folder</p>
|
||||
</div>
|
||||
|
||||
<div className="add_button__option__add-folder-wrapper add_button__option__add-folder-wrapper--no-border">
|
||||
|
||||
<img className="add_button__option__add-folder-image" src="/images/upload-file-grey.png"/>
|
||||
<p className="add_button__option__add-folder-title">File Upload</p>
|
||||
<input className="add_button__option__add-file-input" ref={this.props.uploadInput}
|
||||
type="file" multiple={true} onChange={this.props.handleUpload}/>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="add_button__option__add-folder-wrapper add_button__option__add-folder-wrapper--no-border">
|
||||
<img className="add_button__option__add-folder-image" src="/images/folder-upload-grey.png"/>
|
||||
<p className="add_button__option__add-folder-title">Folder Upload</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="path__wrapper">
|
||||
|
||||
{(this.props.parentList.length !== 1 || this.props.currentlySearching)?
|
||||
(
|
||||
<div className="path__block">
|
||||
|
||||
{this.props.parentNameList.map((parent, index) => {
|
||||
|
||||
const parentID = this.props.parentList[index];
|
||||
|
||||
return (
|
||||
<div className="path__block" onClick={() => {this.props.itemClick(parentID, parent, true)}}>
|
||||
<h3 className="path__title">{parent}</h3>
|
||||
|
||||
{index !== this.props.parentNameList.length - 1 ? (<img className="path__image" src="/images/right-arrow-svg.svg"/>) : undefined}
|
||||
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
</div>)
|
||||
|
||||
: undefined}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<img className="grid-button" src={!this.props.listView ? "/images/grid-icon-svg.svg" : "/images/list-icon-svg.svg"} onClick={this.props.showListViewEvent}/>
|
||||
<img className="info-button" src="/images/info-icon-grey.png" onClick={this.props.showSideBarEvent}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default Subbar
|
||||
@@ -1,172 +0,0 @@
|
||||
import Subbar from "./Subbar";
|
||||
import { showSideBar, hideSideBar } from "../../actions/main";
|
||||
import { showAddOptions2 } from "../../actions/addOptions";
|
||||
import { startAddFile, setFiles, startSetFiles } from "../../actions/files";
|
||||
import {
|
||||
startAddFolder,
|
||||
setFolders,
|
||||
startSetFolders,
|
||||
} from "../../actions/folders";
|
||||
import { enableListView, disableListView } from "../../actions/filter";
|
||||
import { resetSelected } from "../../actions/selectedItem";
|
||||
import Swal from "sweetalert2";
|
||||
import { connect } from "react-redux";
|
||||
// import { history } from "../../routers/AppRouter";
|
||||
import React from "react";
|
||||
import mobileCheck from "../../utils/mobileCheck";
|
||||
import withNavigate from "../HocComponent";
|
||||
|
||||
class SubbarContainer extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.uploadInput = React.createRef();
|
||||
this.wrapperRef = React.createRef();
|
||||
this.isMobile = mobileCheck();
|
||||
}
|
||||
|
||||
createFolder = async (e) => {
|
||||
let inputValue = "";
|
||||
|
||||
const { value: folderName } = await Swal.fire({
|
||||
title: "Enter Folder Name",
|
||||
input: "text",
|
||||
inputValue: inputValue,
|
||||
showCancelButton: true,
|
||||
inputValidator: (value) => {
|
||||
if (!value) {
|
||||
return "Please Enter a Name";
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
if (folderName === undefined || folderName === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const parent = this.props.parent;
|
||||
const owner = this.props.auth.id;
|
||||
const parentList = this.props.parentList;
|
||||
|
||||
this.props.dispatch(startAddFolder(folderName, owner, parent, parentList));
|
||||
};
|
||||
|
||||
handleClickOutside = (e) => {
|
||||
if (
|
||||
this.wrapperRef &&
|
||||
!this.wrapperRef.current.contains(event.target) &&
|
||||
this.props.showAddOptions2
|
||||
) {
|
||||
this.addButtonEvent();
|
||||
}
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
if (this.isMobile) {
|
||||
document.addEventListener("mousedown", this.handleClickOutside);
|
||||
}
|
||||
};
|
||||
|
||||
componentWillUnmount = () => {
|
||||
if (this.isMobile) {
|
||||
document.removeEventListener("mousedown", this.handleClickOutside);
|
||||
}
|
||||
};
|
||||
|
||||
addButtonEvent = () => {
|
||||
const currentAddOptions = !this.props.showAddOptions2;
|
||||
|
||||
this.props.dispatch(showAddOptions2(currentAddOptions));
|
||||
};
|
||||
|
||||
handleUpload = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
this.props.dispatch(
|
||||
startAddFile(
|
||||
this.uploadInput.current,
|
||||
this.props.parent,
|
||||
this.props.parentList
|
||||
)
|
||||
);
|
||||
this.uploadInput.current.value = "";
|
||||
};
|
||||
|
||||
showSideBarEvent = () => {
|
||||
let show = this.props.showSideBar;
|
||||
|
||||
if (show === "gone") {
|
||||
show = false;
|
||||
}
|
||||
|
||||
if (show) {
|
||||
this.props.dispatch(hideSideBar());
|
||||
} else {
|
||||
this.props.dispatch(showSideBar());
|
||||
}
|
||||
};
|
||||
|
||||
showListViewEvent = () => {
|
||||
let listView = this.props.listView;
|
||||
const parent = this.props.parent;
|
||||
const sortBy = this.props.sortBy;
|
||||
const search = this.props.search;
|
||||
|
||||
if (listView) {
|
||||
this.props.dispatch(resetSelected());
|
||||
this.props.dispatch(setFiles([]));
|
||||
this.props.dispatch(setFolders([]));
|
||||
this.props.dispatch(disableListView());
|
||||
this.props.dispatch(startSetFiles(parent, sortBy, search));
|
||||
this.props.dispatch(startSetFolders(parent, sortBy, search));
|
||||
} else {
|
||||
this.props.dispatch(resetSelected());
|
||||
this.props.dispatch(setFiles([]));
|
||||
this.props.dispatch(setFolders([]));
|
||||
this.props.dispatch(enableListView());
|
||||
this.props.dispatch(startSetFiles(parent, sortBy, search));
|
||||
this.props.dispatch(startSetFolders(parent, sortBy, search));
|
||||
}
|
||||
};
|
||||
|
||||
itemClick = (id) => {
|
||||
if (id === "/") {
|
||||
this.props.navigate("/home");
|
||||
} else {
|
||||
this.props.navigate(`/folder/${id}`);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Subbar
|
||||
uploadInput={this.uploadInput}
|
||||
wrapperRef={this.wrapperRef}
|
||||
createFolder={this.createFolder}
|
||||
addButtonEvent={this.addButtonEvent}
|
||||
handleUpload={this.handleUpload}
|
||||
showSideBarEvent={this.showSideBarEvent}
|
||||
showListViewEvent={this.showListViewEvent}
|
||||
itemClick={this.itemClick}
|
||||
isMobile={this.isMobile}
|
||||
{...this.props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const connectPropToState = (state) => ({
|
||||
auth: state.auth,
|
||||
listView: state.filter.listView,
|
||||
parentList: state.parent.parentList,
|
||||
parentNameList: state.parent.parentNameList,
|
||||
parent: state.parent.parent,
|
||||
sortBy: state.filter.sortBy,
|
||||
showAddOptions2: state.addOptions.showAddOptions2,
|
||||
showSideBar: state.main.showSideBar,
|
||||
currentlySearching: state.filter.currentlySearching,
|
||||
search: state.filter.search,
|
||||
isGoogle: state.filter.isGoogle,
|
||||
});
|
||||
|
||||
export default connect(connectPropToState)(withNavigate(SubbarContainer));
|
||||
@@ -1,35 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const UploadStorageSwitcher = (props) => (
|
||||
<div className="upload-switcher__wrapper">
|
||||
{props.state.options.length !== 0 ? (
|
||||
<select
|
||||
className="upload-switcher__select"
|
||||
value={
|
||||
props.storageSwitcher === ""
|
||||
? props.state.value
|
||||
: props.storageSwitcher
|
||||
}
|
||||
onChange={props.changeUploadSwitcher}
|
||||
>
|
||||
{props.state.options.map((currentOption, index) => (
|
||||
<option
|
||||
key={index}
|
||||
disabled={
|
||||
props.storageSwitcher === ""
|
||||
? false
|
||||
: props.storageSwitcher !== currentOption.type
|
||||
}
|
||||
value={currentOption.type}
|
||||
>
|
||||
{currentOption.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<p>No Storage Accounts</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
export default UploadStorageSwitcher;
|
||||
@@ -1,71 +0,0 @@
|
||||
import React from "react";
|
||||
import {connect} from "react-redux";
|
||||
import env from "../../enviroment/envFrontEnd"
|
||||
import UploadStorageSwitcher from "./UploadStorageSwitcher";
|
||||
|
||||
class UploadStorageSwitcherContainer extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
options: [],
|
||||
value: ""
|
||||
}
|
||||
}
|
||||
|
||||
getOptionList = () => {
|
||||
|
||||
const options = []
|
||||
|
||||
if (env.activeSubscription || !env.commercialMode) options.push({type:"stripe", name:"myDrive"});
|
||||
if (env.googleDriveEnabled) options.push({type:"drive", name:"Google Drive"});
|
||||
if (env.s3Enabled) options.push({type:"s3", name:"Amazon S3"})
|
||||
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
options,
|
||||
value: options.length !== 0 ? options[0].type : ""
|
||||
}
|
||||
})
|
||||
|
||||
env.uploadMode = options.length !== 0 ? options[0].type : "";
|
||||
}
|
||||
|
||||
changeUploadSwitcher = (e) => {
|
||||
|
||||
const value = e.target.value;
|
||||
|
||||
env.uploadMode = value;
|
||||
|
||||
this.setState(() => ({
|
||||
...this.state,
|
||||
value
|
||||
}))
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
|
||||
this.getOptionList();
|
||||
}
|
||||
|
||||
componentDidUpdate = () => {
|
||||
|
||||
env.uploadMode = this.props.storageSwitcher !== "" ? this.props.storageSwitcher : this.state.value;
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
return <UploadStorageSwitcher
|
||||
changeUploadSwitcher={this.changeUploadSwitcher}
|
||||
state={this.state}
|
||||
{...this.props}/>
|
||||
}
|
||||
}
|
||||
|
||||
const connectStoreToProp = (state) => ({
|
||||
storageSwitcher: state.storageSwitcher.selected
|
||||
})
|
||||
|
||||
export default connect(connectStoreToProp)(UploadStorageSwitcherContainer);
|
||||
Reference in New Issue
Block a user