removed unneeded files
This commit is contained in:
subnub
@@ -1,74 +0,0 @@
|
||||
import React from "react";
|
||||
import bytes from "bytes";
|
||||
|
||||
const AddStorageItem = (props) => (
|
||||
<div
|
||||
className={
|
||||
!props.loaded
|
||||
? "elem__storage"
|
||||
: props.userDetails.activeSubscription &&
|
||||
props.userDetails.planID === props.plan.id
|
||||
? "elem__storage completed__storage"
|
||||
: "elem__storage"
|
||||
}
|
||||
>
|
||||
<div className="head__storage">
|
||||
<div className="info__storage">
|
||||
<p>
|
||||
{bytes(+props.plan.metadata.amount)} - {props.plan.interval_count}{" "}
|
||||
{props.plan.interval}(s)
|
||||
</p>
|
||||
<span className="status__text">
|
||||
{"$" + parseInt(props.plan.amount, 10) / 100}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style={
|
||||
!props.loaded
|
||||
? { display: "none" }
|
||||
: props.userDetails.activeSubscription &&
|
||||
props.userDetails.planID === props.plan.id
|
||||
? { display: "block" }
|
||||
: { display: "none" }
|
||||
}
|
||||
className="success__storage"
|
||||
>
|
||||
<img src="/assets/checked.svg" alt="checked" />
|
||||
</div>
|
||||
<div
|
||||
style={
|
||||
!props.loaded
|
||||
? {}
|
||||
: props.userDetails.activeSubscription &&
|
||||
props.userDetails.planID === props.plan.id
|
||||
? { display: "none" }
|
||||
: {}
|
||||
}
|
||||
className="add__storage"
|
||||
>
|
||||
<a onClick={props.openDetails}>Details</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="storage__main"
|
||||
style={props.state.open ? { display: "block" } : { display: "none" }}
|
||||
>
|
||||
<p>
|
||||
Subscribe to myDrive, {bytes(+props.plan.metadata.amount)} of data for{" "}
|
||||
{"$" + parseInt(props.plan.amount, 10) / 100}, reoccuring every{" "}
|
||||
{props.plan.interval_count} {props.plan.interval}(s).
|
||||
</p>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<button onClick={() => props.selectPlan(props.plan)}>Subscribe</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default AddStorageItem;
|
||||
@@ -1,29 +0,0 @@
|
||||
import React from "react";
|
||||
import AddStorageItem from "./AddStorageItem";
|
||||
|
||||
class AddStorageItemContainer extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
open: false,
|
||||
}
|
||||
}
|
||||
|
||||
openDetails = () => {
|
||||
|
||||
this.setState((e) => {
|
||||
return {
|
||||
...this.state,
|
||||
open: !this.state.open,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
return <AddStorageItem state={this.state} {...this.props} openDetails={this.openDetails}/>
|
||||
}
|
||||
}
|
||||
|
||||
export default AddStorageItemContainer;
|
||||
@@ -1,132 +0,0 @@
|
||||
import React from "react";
|
||||
import SpinnerLogin from "../SpinnerLogin";
|
||||
import AddStorageItem from "../AddStorageItem";
|
||||
|
||||
const AddStoragePage = (props) => (
|
||||
<div>
|
||||
<div className="storage__back">
|
||||
<div className="storage__block">
|
||||
<div className="inner__storage">
|
||||
<div className="login__logo">
|
||||
<img src="/images/icon.png" alt="logo" />
|
||||
</div>
|
||||
<div className="storage__main">
|
||||
<h2>Select Storage Plan</h2>
|
||||
<div className="wrap__storage--elements">
|
||||
{props.state.storagePlans.map((currentPlan) => (
|
||||
<AddStorageItem
|
||||
selectPlan={props.selectPlan}
|
||||
plan={currentPlan}
|
||||
loaded={props.state.loaded}
|
||||
userDetails={props.state.userDetails}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{!props.state.loaded ? undefined : props.state.userDetails
|
||||
.activeSubscription ? (
|
||||
<div className="add-storage-card__button-wrapper">
|
||||
<button
|
||||
className="storage-item__button"
|
||||
onClick={props.removeSubscription}
|
||||
>
|
||||
Remove Subscription
|
||||
</button>
|
||||
</div>
|
||||
) : undefined}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="modal__wrap"
|
||||
style={
|
||||
props.state.showCreditCard ? { display: "block" } : { display: "none" }
|
||||
}
|
||||
>
|
||||
<div className="inner__modal">
|
||||
<div className="password__modal">
|
||||
<div className="head__password">
|
||||
<h2>
|
||||
Subscribe -{" "}
|
||||
{"$" + parseInt(props.state.selectedDetails.amount, 10) / 100} /{" "}
|
||||
{props.state.selectedDetails.interval_count}{" "}
|
||||
{props.state.selectedDetails.interval}(s)
|
||||
</h2>
|
||||
<div className="close__modal">
|
||||
<a onClick={props.selectPlan}>
|
||||
<img src="/assets/close.svg" alt="close" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="password__content">
|
||||
<form onSubmit={props.pay}>
|
||||
<div
|
||||
className="group__password"
|
||||
style={
|
||||
props.state.creditCardNumberError
|
||||
? { border: "2px solid red" }
|
||||
: {}
|
||||
}
|
||||
>
|
||||
<input
|
||||
value={props.state.creditCardNumber}
|
||||
onChange={props.onChangeCreditCardNumber}
|
||||
placeholder="Credit Card Number"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="group__password"
|
||||
style={
|
||||
props.state.creditCardExpiryError
|
||||
? { border: "2px solid red" }
|
||||
: {}
|
||||
}
|
||||
>
|
||||
<input
|
||||
value={props.state.creditCardExpiry}
|
||||
onChange={props.onChangeCreditCardExpiry}
|
||||
placeholder="(MM/YY) Expiration Date"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="group__password"
|
||||
style={
|
||||
props.state.creditCardCVCError
|
||||
? { border: "2px solid red" }
|
||||
: {}
|
||||
}
|
||||
>
|
||||
<input
|
||||
value={props.state.creditCardCVC}
|
||||
onChange={props.onChangeCreditCardCVC}
|
||||
placeholder="Credit Card CVC"
|
||||
/>
|
||||
</div>
|
||||
<div className="password__submit">
|
||||
<input type="submit" value="Submit" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
style={
|
||||
props.state.paymentLoading
|
||||
? {
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: "61px",
|
||||
paddingBottom: "23px",
|
||||
}
|
||||
: { display: "none" }
|
||||
}
|
||||
>
|
||||
<SpinnerLogin />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default AddStoragePage;
|
||||
@@ -1,459 +0,0 @@
|
||||
import React from "react";
|
||||
import axios from "../../axiosInterceptor";
|
||||
import Swal from "sweetalert2";
|
||||
import env from "../../enviroment/envFrontEnd";
|
||||
import AddStoragePage from "./AddStoragePage";
|
||||
|
||||
class AddStoragePageContainer extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
storagePlans: [],
|
||||
loaded: false,
|
||||
planSelected: false,
|
||||
selectedDetails: {},
|
||||
creditCardNumber: "",
|
||||
creditCardCVC: "",
|
||||
creditCardExpiry: "",
|
||||
creditCardNumberError: false,
|
||||
creditCardExpiryError: false,
|
||||
creditCardCVCError: false,
|
||||
userDetails: {},
|
||||
loaded: false,
|
||||
showCreditCard: false,
|
||||
paymentLoading: false,
|
||||
};
|
||||
}
|
||||
|
||||
getUserDetails = () => {
|
||||
axios
|
||||
.get("/user-service/user-detailed")
|
||||
.then((response) => {
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
loaded: true,
|
||||
userDetails: response.data,
|
||||
};
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("Loading user details error", err);
|
||||
});
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
this.getUserDetails();
|
||||
|
||||
axios
|
||||
.get("/user-service/get-plans")
|
||||
.then((response) => {
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
storagePlans: response.data.data,
|
||||
loaded: true,
|
||||
};
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("get plans error");
|
||||
});
|
||||
};
|
||||
|
||||
selectPlan = (plan) => {
|
||||
if (this.state.planSelected) {
|
||||
return this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
planSelected: false,
|
||||
selectedDetails: {},
|
||||
showCreditCard: false,
|
||||
};
|
||||
});
|
||||
} else {
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
planSelected: true,
|
||||
selectedDetails: plan,
|
||||
showCreditCard: true,
|
||||
};
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onChangeCreditCardNumber = (e) => {
|
||||
let value = e.target.value;
|
||||
|
||||
if (value.length < this.state.creditCardNumber.length) {
|
||||
return this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
creditCardNumber: value,
|
||||
creditCardNumberError: false,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
const numericalValue = value.replace(/[^0-9.]/g, "");
|
||||
|
||||
let reconstucted = "";
|
||||
|
||||
for (let currentChar of numericalValue) {
|
||||
reconstucted += currentChar;
|
||||
|
||||
const numericalOnly = reconstucted.replace(/[^0-9.]/g, "");
|
||||
|
||||
if (numericalOnly.length !== 16 && numericalOnly.length % 4 === 0) {
|
||||
reconstucted += "-";
|
||||
} else if (numericalOnly.length >= 16) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
creditCardNumber: reconstucted,
|
||||
creditCardNumberError: false,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
onChangeCreditCardCVC = (e) => {
|
||||
let value = e.target.value;
|
||||
|
||||
value = value.replace(/[^0-9.]/g, "");
|
||||
|
||||
if (value.length >= 4) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
creditCardCVC: value,
|
||||
creditCardCVCError: false,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
onChangeCreditCardExpiry = (e) => {
|
||||
let value = e.target.value;
|
||||
|
||||
if (value.length < this.state.creditCardExpiry.length) {
|
||||
return this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
creditCardExpiry: value,
|
||||
creditCardExpiryError: false,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
const numericalValue = value.replace(/[^0-9.]/g, "");
|
||||
|
||||
let reconstucted = "";
|
||||
|
||||
for (let currentChar of numericalValue) {
|
||||
reconstucted += currentChar;
|
||||
|
||||
const numericalOnly = reconstucted.replace(/[^0-9.]/g, "");
|
||||
|
||||
if (numericalOnly.length === 2) {
|
||||
reconstucted += "/";
|
||||
} else if (numericalOnly.length >= 4) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
creditCardExpiry: reconstucted,
|
||||
creditCardExpiryError: false,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
pay = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (this.state.paymentLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
const creditCardNumber = this.state.creditCardNumber;
|
||||
const creditCardCVC = this.state.creditCardCVC;
|
||||
const creditCardExpiry = this.state.creditCardExpiry;
|
||||
|
||||
let ccNumError = false;
|
||||
let ccCVCError = false;
|
||||
let ccExpiryError = false;
|
||||
|
||||
if (creditCardNumber.replace(/[^0-9.]/g, "").length !== 16) {
|
||||
ccNumError = true;
|
||||
}
|
||||
|
||||
if (creditCardCVC.replace(/[^0-9.]/g, "").length !== 3) {
|
||||
ccCVCError = true;
|
||||
}
|
||||
|
||||
if (creditCardExpiry.replace(/[^0-9.]/g, "").length !== 4) {
|
||||
ccExpiryError = true;
|
||||
}
|
||||
|
||||
if (ccNumError || ccCVCError || ccExpiryError) {
|
||||
return this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
creditCardNumberError: ccNumError,
|
||||
creditCardExpiryError: ccExpiryError,
|
||||
creditCardCVCError: ccCVCError,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
const data = {
|
||||
card: {
|
||||
number: creditCardNumber,
|
||||
expiry: creditCardExpiry,
|
||||
cvc: creditCardCVC,
|
||||
id: this.state.selectedDetails.id,
|
||||
},
|
||||
};
|
||||
|
||||
Swal.fire({
|
||||
title: "Confirm Payment",
|
||||
text: `Confirm ${
|
||||
"$" + parseInt(this.state.selectedDetails.amount, 10) / 100
|
||||
} payment`,
|
||||
icon: "info",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#3085d6",
|
||||
cancelButtonColor: "#d33",
|
||||
confirmButtonText: "Pay",
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
paymentLoading: true,
|
||||
};
|
||||
});
|
||||
|
||||
axios
|
||||
.post("/user-service/create-subscription", data)
|
||||
.then((response) => {
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
paymentLoading: false,
|
||||
};
|
||||
});
|
||||
|
||||
Swal.fire(
|
||||
"Payment Successful",
|
||||
"Thank You! Payment Was Successful",
|
||||
"success"
|
||||
).then(() => {
|
||||
window.location.assign(env.url);
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log("create stripe token err", e);
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
paymentLoading: false,
|
||||
};
|
||||
});
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: "Payment Error",
|
||||
text: "Could Not Process Payment",
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
removeSubscription = () => {
|
||||
Swal.fire({
|
||||
title: "Remove Subscription?",
|
||||
text: "This will remove all myDrive files",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#3085d6",
|
||||
cancelButtonColor: "#d33",
|
||||
confirmButtonText: "Yes, cancel subscription",
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
axios
|
||||
.delete("/user-service/remove-subscription")
|
||||
.then((response) => {
|
||||
Swal.fire(
|
||||
"Subscription Removed",
|
||||
"Your subscription for myDrive has been canceled.",
|
||||
"success"
|
||||
).then(() => {
|
||||
window.location.assign(env.url);
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("could not remove subscription", err);
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: "Remove Subscription Error",
|
||||
text: "Could Not Renive Subscription",
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<AddStoragePage
|
||||
removeSubscription={this.removeSubscription}
|
||||
pay={this.pay}
|
||||
onChangeCreditCardExpiry={this.onChangeCreditCardExpiry}
|
||||
onChangeCreditCardCVC={this.onChangeCreditCardCVC}
|
||||
onChangeCreditCardNumber={this.onChangeCreditCardNumber}
|
||||
selectPlan={this.selectPlan}
|
||||
getUserDetails={this.getUserDetails}
|
||||
state={this.state}
|
||||
{...this.props}
|
||||
/>
|
||||
// <div>
|
||||
|
||||
// <div className="storage__back">
|
||||
|
||||
// <div className="storage__block">
|
||||
// <div className="inner__storage">
|
||||
// <div className="login__logo">
|
||||
// <img src="/images/icon.png" alt="logo"/>
|
||||
// </div>
|
||||
// <div className="storage__main">
|
||||
// <h2>Select Storage Plan</h2>
|
||||
// <div className="wrap__storage--elements">
|
||||
// {this.state.storagePlans.map((currentPlan) => <AddStorageItem selectPlan={this.selectPlan} plan={currentPlan} loaded={this.state.loaded} userDetails={this.state.userDetails}/>)}
|
||||
// </div>
|
||||
// </div>
|
||||
// {!this.state.loaded ? undefined : this.state.userDetails.activeSubscription ?
|
||||
// <div className="add-storage-card__button-wrapper">
|
||||
// <button className="storage-item__button" onClick={this.removeSubscription}>Remove Subscription</button>
|
||||
// </div> : undefined}
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// <div className="modal__wrap" style={this.state.showCreditCard ? {display:"block"} : {display:"none"}}>
|
||||
// <div className="inner__modal">
|
||||
// <div className="password__modal">
|
||||
// <div className="head__password">
|
||||
// <h2>Subscribe - {'$' + parseInt(this.state.selectedDetails.amount, 10) / 100} / {this.state.selectedDetails.interval_count} {this.state.selectedDetails.interval}(s)</h2>
|
||||
// <div className="close__modal">
|
||||
// <a onClick={this.selectPlan}><img src="/assets/close.svg" alt="close"/></a>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div className="password__content">
|
||||
// <form onSubmit={this.pay}>
|
||||
// <div className="group__password" style={this.state.creditCardNumberError ? {border:'2px solid red'} : {}}>
|
||||
// <input value={this.state.creditCardNumber} onChange={this.onChangeCreditCardNumber} placeholder="Credit Card Number"/>
|
||||
// </div>
|
||||
// <div className="group__password" style={this.state.creditCardExpiryError ? {border:'2px solid red'} : {}}>
|
||||
// <input value={this.state.creditCardExpiry} onChange={this.onChangeCreditCardExpiry} placeholder="(MM/YY) Expiration Date"/>
|
||||
// </div>
|
||||
// <div className="group__password" style={this.state.creditCardCVCError ? {border:'2px solid red'} : {}}>
|
||||
// <input value={this.state.creditCardCVC} onChange={this.onChangeCreditCardCVC} placeholder="Credit Card CVC"/>
|
||||
// </div>
|
||||
// <div className="password__submit">
|
||||
// <input type="submit" value="Submit"/>
|
||||
// </div>
|
||||
// </form>
|
||||
// </div>
|
||||
// <div style={this.state.paymentLoading ? {
|
||||
// display: "flex",
|
||||
// justifyContent: "center",
|
||||
// alignItems: "center",
|
||||
// height: "61px",
|
||||
// paddingBottom: "23px"
|
||||
// } : {display: "none"}}>
|
||||
// <SpinnerLogin />
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// {/* {!this.state.planSelected ?
|
||||
|
||||
// // <div className="add-storage__box">
|
||||
|
||||
// // <p className="add-storage__title">Storage Plans</p>
|
||||
|
||||
// // <div className="add-storage__body">
|
||||
|
||||
// // {this.state.storagePlans.map((currentPlan) => <AddStorageItem selectPlan={this.selectPlan} plan={currentPlan}/>)}
|
||||
// // </div>
|
||||
|
||||
// // {!this.state.loaded ? undefined : this.state.userDetails.activeSubscription ? <div className="add-storage-card__button-wrapper">
|
||||
// // <button className="storage-item__button" onClick={this.removeSubscription}>Remove Subscription</button>
|
||||
// // </div> : undefined}
|
||||
|
||||
// // </div>
|
||||
// <div className="storage__back">
|
||||
|
||||
// <div className="storage__block">
|
||||
// <div className="inner__storage">
|
||||
// <div className="login__logo">
|
||||
// <img src="/images/icon.png" alt="logo"/>
|
||||
// </div>
|
||||
// <div className="storage__main">
|
||||
// <h2>Select Storage Plan</h2>
|
||||
// <div className="wrap__storage--elements">
|
||||
// {this.state.storagePlans.map((currentPlan) => <AddStorageItem selectPlan={this.selectPlan} plan={currentPlan}/>)}
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// </div>
|
||||
|
||||
// :
|
||||
|
||||
// <div className="add-storage-card__wrapper">
|
||||
|
||||
// <div className="add-storage-card__close-wrapper">
|
||||
// <img onClick={this.selectPlan} className="add-storage-card__close" src="/images/close_icon.png"/>
|
||||
// </div>
|
||||
|
||||
// <div className="add-storage-card__title-wrapper">
|
||||
// <p className="add-storage-card__title">{bytes(+this.state.selectedDetails.metadata.amount)} Plan / {this.state.selectedDetails.interval_count} {this.state.selectedDetails.interval}(s)</p>
|
||||
// </div>
|
||||
|
||||
// <div className="add-storage-card__number-wrapper">
|
||||
// <input className="add-storage-card__number" onChange={this.onChangeCreditCardNumber} value={this.state.creditCardNumber} placeholder="Credit Card Number"/>
|
||||
// </div>
|
||||
|
||||
// <div className="add-storage-card__expiry-wrapper">
|
||||
// <input className="add-storage-card__expiry" onChange={this.onChangeCreditCardExpiry} value={this.state.creditCardExpiry} placeholder="Expire Date (MM/YYYY)"/>
|
||||
// <input className="add-storage-card__cvc" onChange={this.onChangeCreditCardCVC} value={this.state.creditCardCVC} placeholder="CVC"/>
|
||||
// </div>
|
||||
|
||||
// <div className="add-storage-card__button-wrapper">
|
||||
// <button className="storage-item__button" onClick={this.pay}>Pay {'$' + parseInt(this.state.selectedDetails.amount, 10) / 100}</button>
|
||||
// </div>
|
||||
|
||||
// </div>
|
||||
|
||||
// } */}
|
||||
|
||||
// </div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default AddStoragePageContainer;
|
||||
@@ -1,31 +0,0 @@
|
||||
import React from "react";
|
||||
import env from "../../enviroment/envFrontEnd";
|
||||
import FolderTreeStorage from "../FolderTreeStorage";
|
||||
|
||||
const FolderTree = (props) => (
|
||||
<div className="folder-tree__main">
|
||||
<div
|
||||
className={
|
||||
props.state.showFolderTreeScrollBars
|
||||
? "folder-tree__box"
|
||||
: "folder-tree__box-hide-scroll-bars"
|
||||
}
|
||||
>
|
||||
{env.activeSubscription || !env.commercialMode ? (
|
||||
<FolderTreeStorage type={"mongo"} />
|
||||
) : undefined}
|
||||
{env.s3Enabled ? <FolderTreeStorage type={"s3"} /> : undefined}
|
||||
{env.googleDriveEnabled ? (
|
||||
<FolderTreeStorage type={"drive"} />
|
||||
) : undefined}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
// <div className="folder__structure" style={{overflow:"unset", maxHeight:"unset", maxWidth:"unset"}}>
|
||||
// {(env.activeSubscription || !env.commercialMode) ? <FolderTreeStorage type={"mongo"}/> : undefined}
|
||||
// {env.s3Enabled ? <FolderTreeStorage type={"s3"}/> : undefined}
|
||||
// {env.googleDriveEnabled ? <FolderTreeStorage type={"drive"}/> : undefined}
|
||||
// </div>
|
||||
);
|
||||
|
||||
export default FolderTree;
|
||||
@@ -1,46 +0,0 @@
|
||||
import React from "react";;
|
||||
import FolderTree from "./FolderTree";
|
||||
|
||||
class FolderTreeContrainer extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
hideFolderTree: false,
|
||||
showFolderTreeScrollBars: false
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
|
||||
//folder-tree__box-hide-scroll-bars
|
||||
|
||||
const hideFolderTree = localStorage.getItem("hide-folder-tree");
|
||||
const showFolderTreeScrollBars = localStorage.getItem("show-folder-tree-scroll-bars")
|
||||
|
||||
//console.log("show folder tree scroll bars");
|
||||
|
||||
if (hideFolderTree) {
|
||||
|
||||
this.setState(() => ({
|
||||
hideFolderTree,
|
||||
}))
|
||||
|
||||
} else {
|
||||
|
||||
this.setState(() => ({
|
||||
showFolderTreeScrollBars
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
if (this.state.hideFolderTree) return <div></div>
|
||||
|
||||
return <FolderTree state={this.state}/>
|
||||
}
|
||||
}
|
||||
|
||||
export default FolderTreeContrainer;
|
||||
@@ -1,60 +0,0 @@
|
||||
import React from "react";
|
||||
import FolderTreeStorageSub from "../FolderTreeStorageSub";
|
||||
|
||||
const FolderTreeStorage = (props) => (
|
||||
<div className="folder-tree__storage">
|
||||
<div className="folder-tree__storage__box">
|
||||
<div className="folder-tree__storage__image-div">
|
||||
<img
|
||||
onClick={props.arrowClick}
|
||||
className="folder-tree__storage__image"
|
||||
src={
|
||||
props.state.open && props.state.folders.length !== 0
|
||||
? "/images/menu-down.svg"
|
||||
: "/images/menu-right.svg"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="folder-tree__storage__text-div">
|
||||
<p className="folder-tree__storage__text">
|
||||
{props.type === "drive"
|
||||
? "Google Drive"
|
||||
: props.type === "mongo"
|
||||
? "myDrive"
|
||||
: "Amazon S3"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="folder-tree__storage-subview">
|
||||
<div className="folder-tree__storage-subview-box">
|
||||
{props.state.open && props.state.folders.length !== 0
|
||||
? props.state.folders.map((folder) => {
|
||||
return (
|
||||
<FolderTreeStorageSub
|
||||
key={folder._id}
|
||||
folder={folder}
|
||||
type={props.type}
|
||||
/>
|
||||
);
|
||||
})
|
||||
: undefined}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
//return
|
||||
|
||||
// <div className="elem__structure root__element">
|
||||
// <div className={props.state.open ? "parent__structure active__parent" : "parent__structure"}>
|
||||
// <span onClick={props.arrowClick}><img src="/assets/arrowstructure.svg" alt="arrowstructure"/></span>
|
||||
// <div className="info__name">
|
||||
// <p>{props.type === "drive" ? "Google Drive" : props.type === "mongo" ? "myDrive" : "Amazon S3"}</p>
|
||||
// </div>
|
||||
// </div>
|
||||
// {(props.state.open && props.state.folders.length !== 0) ? props.state.folders.map((folder) => {
|
||||
// return <FolderTreeStorageSub key={folder._id} folder={folder} type={props.type}/>
|
||||
// }) : undefined}
|
||||
// </div>
|
||||
);
|
||||
|
||||
export default FolderTreeStorage;
|
||||
@@ -1,120 +0,0 @@
|
||||
import env from "../../enviroment/envFrontEnd";
|
||||
import axios from "../../axiosInterceptor/index"
|
||||
import React from "react";
|
||||
import {connect} from "react-redux";
|
||||
import {setInsertedFolderTreeID} from "../../actions/folderTree"
|
||||
import FolderTreeStorage from "./FolderTreeStorage";
|
||||
|
||||
class FolderTreeStorageContainer extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
folders: [],
|
||||
open: true,
|
||||
}
|
||||
|
||||
this.updated = false;
|
||||
this.ignoreReset = false;
|
||||
}
|
||||
|
||||
getFolders = () => {
|
||||
|
||||
const parent = this.props.type === "drive" ? "root" : "/";
|
||||
|
||||
const url = this.props.type === "drive" ? `/folder-service-google/list?parent=${parent}`
|
||||
: `/folder-service/list?parent=${parent}&type=${this.props.type}`;
|
||||
|
||||
axios.get(url).then((response) => {
|
||||
|
||||
this.setState(() => {
|
||||
return {
|
||||
folders: response.data,
|
||||
open: true
|
||||
}
|
||||
}, () => {
|
||||
this.ignoreReset = false;
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
arrowClick = () => {
|
||||
|
||||
if (this.state.open) {
|
||||
|
||||
this.setState(() => {
|
||||
return {
|
||||
folders: this.state.folders,
|
||||
open: false,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.getFolders()
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
|
||||
// const hideFolderTree = localStorage.getItem("hide-folder-tree");
|
||||
|
||||
// if (hideFolderTree) {
|
||||
|
||||
// this.setState(() => ({
|
||||
// hideFolderTree
|
||||
// }))
|
||||
|
||||
// } else {
|
||||
// this.getFolders();
|
||||
// }
|
||||
|
||||
this.getFolders();
|
||||
}
|
||||
|
||||
componentDidUpdate = () => {
|
||||
|
||||
if (this.props.firstLoadDetails.status === "RESET" && !this.ignoreReset) {
|
||||
this.ignoreReset = true;
|
||||
this.getFolders();
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.updated) return;
|
||||
|
||||
this.updated = true;
|
||||
|
||||
if (this.props.firstLoadDetails === "root" || this.props.firstLoadDetails === "/" || !this.props.firstLoadDetails._id) return;
|
||||
|
||||
if (this.props.firstLoadDetails.isGoogle) {
|
||||
if (this.props.type !== "drive") return;
|
||||
} else if (this.props.firstLoadDetails.isPersonal) {
|
||||
if (this.props.type !== "s3") return;
|
||||
} else {
|
||||
if (this.props.type !== "mongo") return;
|
||||
}
|
||||
|
||||
const id = this.props.firstLoadDetails._id;
|
||||
|
||||
const url = (this.props.type === "drive")
|
||||
? `/folder-service-google/subfolder-list-full?id=${id}` : `/folder-service/subfolder-list-full?id=${id}`
|
||||
|
||||
axios.get(url).then((response) => {
|
||||
if (response.data.length !== 0) {
|
||||
const id = response.data[0]._id;
|
||||
this.props.dispatch(setInsertedFolderTreeID(id, response.data))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
return <FolderTreeStorage arrowClick={this.arrowClick} state={this.state} {...this.props}/>
|
||||
}
|
||||
}
|
||||
|
||||
const connectStoreToProp = (state) => ({
|
||||
firstLoadDetails: state.folderTree.firstLoadDetails
|
||||
})
|
||||
|
||||
export default connect(connectStoreToProp)(FolderTreeStorageContainer)
|
||||
@@ -1,57 +0,0 @@
|
||||
import React from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const FolderTreeStorageSub = (props) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const folderOnClick = () => {
|
||||
navigate(`/folder/${props.folder._id}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="folder-tree-sub__storage">
|
||||
<div className="folder-tree-sub__storage__box">
|
||||
<div className="folder-tree-sub__storage__image-div">
|
||||
<img
|
||||
onClick={(e) => {
|
||||
props.skipUpdate = false;
|
||||
props.clickEvent(e);
|
||||
}}
|
||||
className="folder-tree-sub__storage__image"
|
||||
src="/assets/arrowstructure.svg"
|
||||
style={props.state.open ? { transform: "rotate(90deg)" } : {}}
|
||||
/>
|
||||
</div>
|
||||
<div className="folder-tree-sub__icon-wrapper">
|
||||
<img
|
||||
className="folder-tree-sub__icon"
|
||||
src={
|
||||
props.selectedID === props.folder._id
|
||||
? "/images/folder-svg-purple.svg"
|
||||
: "/images/folder-svg.svg"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="folder-tree-sub__storage__text-div">
|
||||
<p
|
||||
style={
|
||||
props.selectedID === props.folder._id ? { color: "#3c85ee" } : {}
|
||||
}
|
||||
onClick={folderOnClick}
|
||||
className="folder-tree-sub__storage__text"
|
||||
>
|
||||
{props.folder.name}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="folder-tree-sub__storage-subview">
|
||||
<div className="folder-tree-sub__storage-subview-box">
|
||||
{props.state.open ? props.renderFolders() : undefined}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FolderTreeStorageSub;
|
||||
@@ -1,312 +0,0 @@
|
||||
import env from "../../enviroment/envFrontEnd";
|
||||
import axios from "../../axiosInterceptor";
|
||||
import React from "react";
|
||||
import {
|
||||
setFolderTreeID,
|
||||
removeFolderTreeID,
|
||||
removeNewFolderTreeID,
|
||||
removeDeleteFolderTreeID,
|
||||
removeMoveFolderTreeID,
|
||||
addNewFolderTreeID,
|
||||
removeRenameFolderTreeID,
|
||||
setInsertedFolderTreeID,
|
||||
} from "../../actions/folderTree";
|
||||
// import { history } from "../../routers/AppRouter";
|
||||
import { connect } from "react-redux";
|
||||
import FolderTreeStorageSub2 from ".";
|
||||
import FolderTreeStorageSub from "./FolderTreeStorageSub";
|
||||
|
||||
class FolderTreeStorageSubContainer extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
folders: [],
|
||||
open: false,
|
||||
loaded: false,
|
||||
forceUpdate: "",
|
||||
};
|
||||
|
||||
this.cachedFolders = {};
|
||||
|
||||
this.ignoreNewList = {};
|
||||
|
||||
this.ignoreDeleteList = {};
|
||||
|
||||
this.ignoreMoveList = {};
|
||||
|
||||
this.ignoreRenameList = {};
|
||||
|
||||
this.ignoreInsertList = {};
|
||||
|
||||
this.launchedByMain = false;
|
||||
this.skipUpdate = false;
|
||||
}
|
||||
|
||||
componentDidUpdate = () => {
|
||||
if (
|
||||
this.props.selectedIDs[this.props.folder._id] &&
|
||||
!this.state.open &&
|
||||
!this.state.loaded &&
|
||||
this.props.folder._id === this.props.selectedID
|
||||
) {
|
||||
this.skipUpdate = true;
|
||||
this.getFolders();
|
||||
} else if (
|
||||
this.props.selectedIDs[this.props.folder._id] &&
|
||||
!this.state.open &&
|
||||
this.props.folder._id === this.props.selectedID
|
||||
) {
|
||||
this.skipUpdate = true;
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
open: true,
|
||||
};
|
||||
});
|
||||
} else if (
|
||||
this.props.selectedIDs[this.props.folder._id] === undefined &&
|
||||
this.state.open
|
||||
) {
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
open: false,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
this.addNewFolders();
|
||||
this.deleteRemovedFolders();
|
||||
this.moveMovedFolders();
|
||||
this.renameRenamedFolders();
|
||||
this.insertInsertedFolders();
|
||||
};
|
||||
|
||||
addNewFolders = () => {
|
||||
for (let currentKey in this.props.newIDs) {
|
||||
const currentObj = this.props.newIDs[currentKey];
|
||||
if (
|
||||
currentObj.parent === this.props.folder._id &&
|
||||
!this.ignoreNewList[currentObj._id]
|
||||
) {
|
||||
this.ignoreNewList[currentObj._id] = true;
|
||||
|
||||
this.props.dispatch(removeNewFolderTreeID(currentObj._id));
|
||||
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
folders: [...this.state.folders, currentObj],
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
insertInsertedFolders = () => {
|
||||
for (let currentKey in this.props.insertedIDs) {
|
||||
const currentObj = this.props.insertedIDs[currentKey];
|
||||
|
||||
if (
|
||||
currentObj.parent === this.props.folder._id &&
|
||||
!this.ignoreInsertList[currentObj._id]
|
||||
) {
|
||||
this.ignoreInsertList[currentObj._id] = true;
|
||||
|
||||
let tempInsertIDsList = this.props.insertedIDs;
|
||||
tempInsertIDsList = [
|
||||
...tempInsertIDsList.slice(0, currentKey),
|
||||
...tempInsertIDsList.splice(currentKey + 1, tempInsertIDsList.length),
|
||||
];
|
||||
|
||||
this.props.dispatch(setFolderTreeID(this.props.folder._id));
|
||||
|
||||
this.setState(
|
||||
() => {
|
||||
return {
|
||||
...this.state,
|
||||
folders: currentObj.subFolders,
|
||||
open: true,
|
||||
loaded: true,
|
||||
};
|
||||
},
|
||||
() => {
|
||||
if (tempInsertIDsList.length !== 0) {
|
||||
const newID = tempInsertIDsList[0];
|
||||
this.props.dispatch(
|
||||
setInsertedFolderTreeID(newID, tempInsertIDsList)
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
deleteRemovedFolders = () => {
|
||||
for (let currentKey in this.props.deleteIDs) {
|
||||
const currentObj = this.props.deleteIDs[currentKey];
|
||||
|
||||
if (
|
||||
this.cachedFolders[currentObj._id] &&
|
||||
!this.ignoreDeleteList[currentObj._id]
|
||||
) {
|
||||
this.ignoreDeleteList[currentObj._id] = true;
|
||||
|
||||
const tempFolderList = this.state.folders.filter((currentFolder) => {
|
||||
return currentObj._id !== currentFolder._id;
|
||||
});
|
||||
|
||||
this.props.dispatch(removeDeleteFolderTreeID(currentObj._id));
|
||||
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
folders: tempFolderList,
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
moveMovedFolders = () => {
|
||||
for (let currentKey in this.props.moveIDs) {
|
||||
const currentObj = this.props.moveIDs[currentKey];
|
||||
|
||||
if (
|
||||
this.cachedFolders[currentObj._id] &&
|
||||
!this.ignoreMoveList[currentObj._id]
|
||||
) {
|
||||
this.ignoreMoveList[currentObj._id] = true;
|
||||
|
||||
let movedValue = {};
|
||||
const tempFolderList = this.state.folders.filter((currentFolder) => {
|
||||
if (currentObj._id === currentFolder._id) movedValue = currentFolder;
|
||||
return currentObj._id !== currentFolder._id;
|
||||
});
|
||||
|
||||
movedValue.parent = currentObj.parent;
|
||||
|
||||
this.props.dispatch(removeMoveFolderTreeID(currentObj._id));
|
||||
this.props.dispatch(addNewFolderTreeID(currentObj._id, movedValue));
|
||||
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
folders: tempFolderList,
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
renameRenamedFolders = () => {
|
||||
for (let currentKey in this.props.renameIDs) {
|
||||
const currentObj = this.props.renameIDs[currentKey];
|
||||
|
||||
if (
|
||||
this.cachedFolders[currentObj._id] &&
|
||||
!this.ignoreRenameList[currentObj._id]
|
||||
) {
|
||||
this.ignoreRenameList[currentObj._id] = true;
|
||||
|
||||
let tempList = [];
|
||||
|
||||
for (let currentValue of this.state.folders) {
|
||||
if (currentValue._id === currentObj._id) {
|
||||
currentValue.name = currentObj.name;
|
||||
}
|
||||
tempList.push(Object.assign({}, currentValue));
|
||||
}
|
||||
|
||||
this.props.dispatch(removeRenameFolderTreeID(currentObj._id));
|
||||
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
folders: [...tempList],
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
getFolders = () => {
|
||||
const parent = this.props.folder._id;
|
||||
|
||||
const url =
|
||||
this.props.type === "drive"
|
||||
? `/folder-service-google/list?parent=${parent}`
|
||||
: `/folder-service/list?parent=${parent}`;
|
||||
axios.get(url).then((response) => {
|
||||
this.setState(() => {
|
||||
return {
|
||||
folders: response.data,
|
||||
open: true,
|
||||
loaded: true,
|
||||
};
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
clickEvent = () => {
|
||||
if (!this.state.open) {
|
||||
this.props.dispatch(setFolderTreeID(this.props.folder._id));
|
||||
} else {
|
||||
this.props.dispatch(removeFolderTreeID(this.props.folder._id));
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
open: false,
|
||||
};
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
renderFolders = () => {
|
||||
this.cachedFolders = {};
|
||||
|
||||
return this.state.folders.map((folder) => {
|
||||
this.cachedFolders[folder._id] = true;
|
||||
return (
|
||||
<FolderTreeStorageSub2
|
||||
key={folder._id}
|
||||
folder={folder}
|
||||
type={this.props.type}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<FolderTreeStorageSub
|
||||
renderFolders={this.renderFolders}
|
||||
skipUpdate={this.skipUpdate}
|
||||
clickEvent={this.clickEvent}
|
||||
folderClick={this.folderClick}
|
||||
state={this.state}
|
||||
{...this.props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const connectStoreToProp = (state) => ({
|
||||
selectedID: state.folderTree.id,
|
||||
selectedIDs: state.folderTree.openIDs,
|
||||
newIDs: state.folderTree.newIDs,
|
||||
newID: state.folderTree.newID,
|
||||
deleteIDs: state.folderTree.deleteIDs,
|
||||
deleteID: state.folderTree.deleteID,
|
||||
moveIDs: state.folderTree.moveIDs,
|
||||
moveID: state.folderTree.moveID,
|
||||
renameIDs: state.folderTree.renameIDs,
|
||||
renameID: state.folderTree.renameID,
|
||||
insertedIDs: state.folderTree.insertedIDs,
|
||||
insertedID: state.folderTree.insertedID,
|
||||
});
|
||||
|
||||
export default connect(connectStoreToProp)(FolderTreeStorageSubContainer);
|
||||
@@ -1,42 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const GoogleAccountPage = (props) => (
|
||||
<div
|
||||
className="modal__wrap"
|
||||
style={!props.state.accountDetailsLoaded ? { background: "unset" } : {}}
|
||||
>
|
||||
<div className="inner__modal">
|
||||
{props.state.accountDetailsLoaded ? (
|
||||
<div className="password__modal">
|
||||
<div className="head__password">
|
||||
<h2>Google Account</h2>
|
||||
<div className="close__modal">
|
||||
{/* <a onClick={props.changeShowAddName}><img src="/assets/close.svg" alt="close"/></a> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="password__content">
|
||||
<form onSubmit={props.addGoogleAccount}>
|
||||
{/* <div className="group__password">
|
||||
<input value={props.state.name} onChange={props.onChangeAddName} placeholder="Name"/>
|
||||
</div> */}
|
||||
<div className="password__submit">
|
||||
<input
|
||||
type="submit"
|
||||
value={
|
||||
props.state.accountAdded ? "Go Back" : "Add Google Account"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<p>{props.state.info}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default GoogleAccountPage;
|
||||
@@ -1,100 +0,0 @@
|
||||
import React from "react";
|
||||
import axios from "../../axiosInterceptor";
|
||||
import Swal from "sweetalert2";
|
||||
import env from "../../enviroment/envFrontEnd";
|
||||
import GoogleAccountPage from "./GoogleAccountPage";
|
||||
|
||||
class GoogleAccountPageContainer extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
accountDetailsLoaded: false,
|
||||
accountEmail: "",
|
||||
accountAdded: false,
|
||||
info: 'Loading Account Details...'
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
|
||||
axios.get(`/user-service/user`).then((response) => {
|
||||
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
accountDetailsLoaded: true,
|
||||
accountEmail: response.data.email
|
||||
}
|
||||
})
|
||||
|
||||
}).catch((err) => {
|
||||
console.log("google account page get user err", err);
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Account Info Error',
|
||||
text: 'Could Not Load Account Info',
|
||||
})
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
info: 'Could Not Load Account'
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
addGoogleAccount = (e) => {
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
if (this.state.accountAdded) {
|
||||
|
||||
window.location.assign(env.url);
|
||||
return;
|
||||
}
|
||||
|
||||
const tokenCode = (new URLSearchParams(window.location.search)).get("code")
|
||||
|
||||
const data = {
|
||||
code: tokenCode
|
||||
}
|
||||
|
||||
axios.post('/user-service/add-google-storage', data).then((response) => {
|
||||
|
||||
Swal.fire(
|
||||
'Added Google Account',
|
||||
'Google Account Has Been Successfully Linked',
|
||||
'success'
|
||||
)
|
||||
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
accountAdded: true
|
||||
}
|
||||
})
|
||||
|
||||
}).catch((err) => {
|
||||
console.log("add google storage err", err)
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Add Google Account Error',
|
||||
text: 'Could Not Link Google Account',
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
|
||||
<GoogleAccountPage
|
||||
addGoogleAccount={this.addGoogleAccount}
|
||||
state={this.state}
|
||||
{...this.props}/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default GoogleAccountPageContainer;
|
||||
@@ -1,26 +0,0 @@
|
||||
import React from "react";
|
||||
import moment from "moment";
|
||||
|
||||
const InvoiceItem = (props) => (
|
||||
<tr>
|
||||
<td className="date__history">
|
||||
{moment.unix(props.currentInvoice.created).format("L")}
|
||||
</td>
|
||||
<td className="plan__history">myDrive Standard Plan</td>
|
||||
<td className="amount__history">
|
||||
{"$" + parseInt(props.currentInvoice.amount_due, 10) / 100}
|
||||
</td>
|
||||
<td
|
||||
className={
|
||||
props.currentInvoice.paid ? "status__history" : "status__history unpaid"
|
||||
}
|
||||
>
|
||||
{props.currentInvoice.paid ? "Paid" : "Unpaid"}
|
||||
</td>
|
||||
<td>
|
||||
<a onClick={props.downloadInvoice}>Invoice</a>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
|
||||
export default InvoiceItem;
|
||||
@@ -1,62 +0,0 @@
|
||||
import React from "react";
|
||||
import Swal from "sweetalert2";
|
||||
import InvoiceItem from "./InvoiceItem";
|
||||
|
||||
class InvoiceItemContainer extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
disabled: false,
|
||||
}
|
||||
}
|
||||
|
||||
downloadInvoice = () => {
|
||||
|
||||
if (this.state.disabled) return;
|
||||
|
||||
if (this.props.currentInvoice.invoice_pdf) {
|
||||
|
||||
const finalUrl = this.props.currentInvoice.invoice_pdf;
|
||||
|
||||
const link = document.createElement('a');
|
||||
document.body.appendChild(link);
|
||||
link.href = finalUrl;
|
||||
link.setAttribute('type', 'hidden');
|
||||
link.click();
|
||||
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
disabled: true
|
||||
}
|
||||
}, () => {
|
||||
|
||||
setTimeout(() => {
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
disabled: false
|
||||
}
|
||||
})
|
||||
}, 2000);
|
||||
})
|
||||
} else {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Error',
|
||||
text: 'Error no invoice data, please contact admin',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return <InvoiceItem
|
||||
downloadInvoice={this.downloadInvoice}
|
||||
state={this.state}
|
||||
{...this.props}/>
|
||||
}
|
||||
}
|
||||
|
||||
export default InvoiceItemContainer;
|
||||
@@ -1,184 +0,0 @@
|
||||
import React from "react";
|
||||
import {connect} from "react-redux";
|
||||
import Swal from "sweetalert2";
|
||||
import { startRenameFolder, startRemoveFolder } from "../../actions/folders";
|
||||
import { startRenameFile, startRemoveFile } from "../../actions/files";
|
||||
import { setShareSelected, setLastSelected } from "../../actions/selectedItem";
|
||||
import { resetMobileContextMenu } from "../../actions/mobileContextMenu";
|
||||
import axios from "../../axiosInterceptor";
|
||||
import { setMoverID } from "../../actions/mover";
|
||||
|
||||
class MobileContextMenuContainer extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.wrapperRef = React.createRef();
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
|
||||
document.addEventListener("mousedown", this.handleClickOutside)
|
||||
}
|
||||
|
||||
componentWillUnmount = () => {
|
||||
|
||||
document.removeEventListener("mousedown", this.handleClickOutside)
|
||||
}
|
||||
|
||||
handleClickOutside = () => {
|
||||
if (this.props.mobileContextMenu.open && this.wrapperRef && !this.wrapperRef.current.contains(event.target)) {
|
||||
this.props.dispatch(resetMobileContextMenu());
|
||||
}
|
||||
}
|
||||
|
||||
renameOnClick = async() => {
|
||||
|
||||
let inputValue = this.props.mobileContextMenu.isFile ? this.props.mobileContextMenu.data.filename : this.props.mobileContextMenu.data.name;
|
||||
|
||||
const { value: folderName} = await Swal.fire({
|
||||
title: 'Enter A File Name',
|
||||
input: 'text',
|
||||
inputValue: inputValue,
|
||||
showCancelButton: true,
|
||||
inputValidator: (value) => {
|
||||
if (!value) {
|
||||
return 'Please Enter a Name'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (folderName === undefined || folderName === null) {
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
this.props.mobileContextMenu.isFile ?
|
||||
this.props.dispatch(startRenameFile(this.props.mobileContextMenu.data._id, folderName, this.props.mobileContextMenu.data.metadata.drive)) :
|
||||
this.props.dispatch(startRenameFolder(this.props.mobileContextMenu.data._id, folderName, this.props.mobileContextMenu.data.drive, this.props.mobileContextMenu.data.parent));
|
||||
this.props.dispatch(resetMobileContextMenu());
|
||||
}
|
||||
|
||||
shareFileOnClick = () => {
|
||||
|
||||
this.props.dispatch(setShareSelected({...this.props.mobileContextMenu.data}));
|
||||
this.props.dispatch(resetMobileContextMenu());
|
||||
}
|
||||
|
||||
downloadFileOnClick = () => {
|
||||
|
||||
this.props.dispatch(resetMobileContextMenu());
|
||||
|
||||
const fileID = this.props.mobileContextMenu.data._id;
|
||||
const isGoogle = this.props.mobileContextMenu.data.metadata.drive;
|
||||
const isGoogleDoc = this.props.mobileContextMenu.data.metadata.googleDoc;
|
||||
const isPersonal = this.props.mobileContextMenu.data.metadata.personalFile;
|
||||
|
||||
this.props.dispatch(setLastSelected(0));
|
||||
|
||||
axios.post("/user-service/get-token").then((response) => {
|
||||
|
||||
const finalUrl =
|
||||
isGoogle ? !isGoogleDoc ? `/file-service-google/download/${fileID}` : `/file-service-google-doc/download/${fileID}`
|
||||
: !isPersonal ? `/file-service/download/${fileID}` : `/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((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}/${tempToken}` : currentURL + `/file-service-google-doc/download/${fileID}/${tempToken}`
|
||||
// : !isPersonal ? currentURL + `/file-service/download/${fileID}/${tempToken}` : currentURL + `/file-service-personal/download/${fileID}/${tempToken}`
|
||||
|
||||
// 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)
|
||||
// })
|
||||
}
|
||||
|
||||
moveOnClick = () => {
|
||||
|
||||
const id = this.props.mobileContextMenu.data._id;
|
||||
const parent = this.props.mobileContextMenu.isFile ? this.props.mobileContextMenu.data.metadata.parent : this.props.mobileContextMenu.data.parent;
|
||||
const isFile = this.props.mobileContextMenu.isFile;
|
||||
const drive = this.props.mobileContextMenu.isFile ? this.props.mobileContextMenu.data.metadata.drive : this.props.mobileContextMenu.data.drive;
|
||||
const personalItem = this.props.mobileContextMenu.isFile ? this.props.mobileContextMenu.data.metadata.personalFile : this.props.mobileContextMenu.data.personalFolder;
|
||||
|
||||
this.props.dispatch(setMoverID(id, parent, isFile, drive, personalItem));
|
||||
this.props.dispatch(resetMobileContextMenu());
|
||||
}
|
||||
|
||||
deleteOnClick = () => {
|
||||
Swal.fire({
|
||||
title: 'Confirm Deletion',
|
||||
text: "You cannot undo this action",
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Yes, delete'
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
|
||||
const id = this.props.mobileContextMenu.data._id;
|
||||
const drive = this.props.mobileContextMenu.isFile ? this.props.mobileContextMenu.data.metadata.drive : this.props.mobileContextMenu.data.drive;
|
||||
const personalItem = this.props.mobileContextMenu.isFile ? this.props.mobileContextMenu.data.metadata.personalFile : this.props.mobileContextMenu.data.personalFolder;
|
||||
const parent = this.props.mobileContextMenu.isFile ? this.props.mobileContextMenu.data.metadata.parent : this.props.mobileContextMenu.data.parent;
|
||||
//this.props.dispatch(startRemoveFolder(this.props._id, [...this.props.parentList, this.props._id], this.props.drive, this.props.parent))
|
||||
|
||||
this.props.mobileContextMenu.isFile ?
|
||||
this.props.dispatch(startRemoveFile(id, drive, personalItem)) :
|
||||
this.props.dispatch(startRemoveFolder(id, [...this.props.mobileContextMenu.data.parentList, id], drive, parent, personalItem));
|
||||
this.props.dispatch(resetMobileContextMenu());
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="mobile__context-menu__wrapper" ref={this.wrapperRef} style={this.props.mobileContextMenu.open ? {} : {display: "none"}}>
|
||||
<div onClick={this.renameOnClick} className="mobile__context-menu__item">
|
||||
<img className="mobile__context-menu__image" src="/assets/filesetting1.svg" alt="setting"/> <p className="mobile__context-menu__title">Rename</p>
|
||||
</div>
|
||||
{this.props.mobileContextMenu.isFile ?
|
||||
<div onClick={this.shareFileOnClick} className="mobile__context-menu__item">
|
||||
<img className="mobile__context-menu__image" src="/assets/filesetting2.svg" alt="setting"/> <p className="mobile__context-menu__title">Share</p>
|
||||
</div> : undefined}
|
||||
{this.props.mobileContextMenu.isFile ?
|
||||
<div onClick={this.downloadFileOnClick} className="mobile__context-menu__item">
|
||||
<img className="mobile__context-menu__image" src="/assets/filesetting3.svg" alt="setting"/> <p className="mobile__context-menu__title">Download</p>
|
||||
</div> : undefined}
|
||||
<div onClick={this.moveOnClick} className="mobile__context-menu__item">
|
||||
<img className="mobile__context-menu__image" src="/assets/filesetting4.svg" alt="setting"/> <p className="mobile__context-menu__title">Move</p>
|
||||
</div>
|
||||
<div onClick={this.deleteOnClick} className="mobile__context-menu__item">
|
||||
<img className="mobile__context-menu__image" src="/assets/filesetting5.svg" alt="setting"/> <p className="mobile__context-menu__title">Delete</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const connectPropToStore = (state) => ({
|
||||
mobileContextMenu: state.mobileContextMenu,
|
||||
})
|
||||
|
||||
export default connect(connectPropToStore)(MobileContextMenuContainer);
|
||||
@@ -1,117 +0,0 @@
|
||||
import Spinner from "../Spinner";
|
||||
import capitalize from "../../utils/capitalize";
|
||||
import React from "react";
|
||||
import moment from "moment";
|
||||
import bytes from "bytes";
|
||||
|
||||
class PopupWindow extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
this.props.popupFile.metadata.isVideo
|
||||
? "popup-window popup-window-video"
|
||||
: "popup-window"
|
||||
}
|
||||
ref={this.props.wrapperRef}
|
||||
>
|
||||
<p className="popup-window__title">
|
||||
{capitalize(this.props.popupFile.filename)}
|
||||
</p>
|
||||
|
||||
<div
|
||||
className={
|
||||
this.props.popupFile.metadata.isVideo
|
||||
? "popup-window-wrapper popup-window-wrapper-video"
|
||||
: "popup-window-wrapper"
|
||||
}
|
||||
>
|
||||
{!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 !max-h-[70vh]"
|
||||
src={this.props.state.video}
|
||||
ref={this.props.video}
|
||||
type="video/mp4"
|
||||
controls
|
||||
>
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
)}
|
||||
<div>
|
||||
<div>
|
||||
<p className="popup-file-details-title">
|
||||
Location:{" "}
|
||||
{this.props.popupFile.metadata.drive
|
||||
? "Google Drive"
|
||||
: this.props.popupFile.metadata.personalFile
|
||||
? "Amazon S3"
|
||||
: "myDrive"}
|
||||
</p>
|
||||
<p className="popup-file-details-title">
|
||||
File Size: {bytes(+this.props.popupFile.metadata.size)}
|
||||
</p>
|
||||
<p className="popup-file-details-title">
|
||||
Created: {moment(this.props.popupFile.uploadDate).format("L")}
|
||||
</p>
|
||||
<div className="popup-window-button-wrapper">
|
||||
<button
|
||||
className={
|
||||
this.props.popupFile.metadata.isVideo
|
||||
? "button popup-window__button popup-window__button-video"
|
||||
: "button popup-window__button"
|
||||
}
|
||||
onClick={() =>
|
||||
this.props.downloadFile(
|
||||
this.props.popupFile._id,
|
||||
this.props.popupFile
|
||||
)
|
||||
}
|
||||
>
|
||||
Download
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img
|
||||
className="popup-window__close-button"
|
||||
onClick={this.props.hidePopupWindow}
|
||||
src="/images/close_icon.png"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PopupWindow;
|
||||
@@ -1,243 +0,0 @@
|
||||
import PopupWindow from "./PopupWindow";
|
||||
import { hidePopup } from "../../actions/popupFile";
|
||||
import axios from "../../axiosInterceptor";
|
||||
import env from "../../enviroment/envFrontEnd";
|
||||
import { connect } from "react-redux";
|
||||
import React from "react";
|
||||
import { setPhotoID } from "../../actions/photoViewer";
|
||||
import axiosNonInterceptor from "axios";
|
||||
|
||||
class PopupWindowContainer extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.wrapperRef = React.createRef();
|
||||
this.video = React.createRef();
|
||||
this.imageData = "";
|
||||
this.tempToken = "";
|
||||
|
||||
this.state = {
|
||||
image: "/images/cloud-svg.svg",
|
||||
imageClassname: this.props.popupFile.metadata.hasThumbnail
|
||||
? "popup-window__image popup-window popup-window--gone"
|
||||
: "popup-window__image",
|
||||
video: "",
|
||||
spinnerClassname: "popup-window__spinner__wrapper",
|
||||
};
|
||||
}
|
||||
|
||||
getFileExtension = (filename) => {
|
||||
const filenameSplit = filename.split(".");
|
||||
|
||||
if (filenameSplit.length > 1) {
|
||||
const extension = filenameSplit[filenameSplit.length - 1];
|
||||
|
||||
return extension.toUpperCase();
|
||||
} else {
|
||||
return "Unknown";
|
||||
}
|
||||
};
|
||||
|
||||
getThumbnail = () => {
|
||||
if (
|
||||
this.getFileExtension(this.props.popupFile.filename).toLowerCase() ===
|
||||
"svg"
|
||||
) {
|
||||
this.props.popupFile.metadata.hasThumbnail = false;
|
||||
return this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
image: "/images/cloud-svg.svg",
|
||||
imageClassname: "popup-window__image",
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
const thumbnailID = this.props.popupFile.metadata.drive
|
||||
? this.props.popupFile._id
|
||||
: this.props.popupFile.metadata.thumbnailID;
|
||||
|
||||
const config = {
|
||||
responseType: "arraybuffer",
|
||||
};
|
||||
|
||||
const isDrive = this.props.popupFile.metadata.drive;
|
||||
const isPersonal = this.props.popupFile.metadata.personalFile;
|
||||
|
||||
const url = isDrive
|
||||
? `/file-service-google/thumbnail/${thumbnailID}`
|
||||
: !isPersonal
|
||||
? `/file-service/thumbnail/${thumbnailID}`
|
||||
: `/file-service-personal/thumbnail/${thumbnailID}`;
|
||||
|
||||
axios
|
||||
.get(url, config)
|
||||
.then((results) => {
|
||||
const imgFile = new Blob([results.data]);
|
||||
const imgUrl = URL.createObjectURL(imgFile);
|
||||
|
||||
this.setState(() => ({
|
||||
...this.state,
|
||||
image: imgUrl,
|
||||
imageClassname: "popup-window__image popup-window__image--loaded",
|
||||
spinnerClassname: "popup-window__spinner__wrapper popup-window--gone",
|
||||
}));
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
thumbnailOnError = () => {
|
||||
this.setState(() => ({
|
||||
...this.state,
|
||||
imageClassname: "popup-window__image",
|
||||
spinnerClassname: "popup-window__spinner__wrapper popup-window--gone",
|
||||
image: "/images/cloud-svg.svg",
|
||||
}));
|
||||
};
|
||||
|
||||
handleClickOutside = (e) => {
|
||||
if (this.wrapperRef && !this.wrapperRef.current.contains(event.target)) {
|
||||
this.props.dispatch(hidePopup());
|
||||
}
|
||||
};
|
||||
|
||||
getVideo = () => {
|
||||
// const config = {
|
||||
// headers: {
|
||||
// uuid: window.sessionStorage.getItem("uuid")
|
||||
// }
|
||||
|
||||
// };
|
||||
|
||||
console.log("gettings stream video token");
|
||||
|
||||
axios
|
||||
.get("/file-service/download/access-token-stream-video")
|
||||
.then(() => {
|
||||
console.log("stream video got token");
|
||||
|
||||
// TODO: Fix this
|
||||
const finalUrl = `http://localhost:5173/api/file-service/stream-video/${this.props.popupFile._id}`;
|
||||
|
||||
this.setState(() => ({
|
||||
...this.state,
|
||||
video: finalUrl,
|
||||
}));
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log("Stream Video Error", e.message);
|
||||
});
|
||||
|
||||
// axios.get(currentURL +'/file-service/download/get-token-video',config)
|
||||
// .then((response) => {
|
||||
|
||||
// this.tempToken = response.data.tempToken;
|
||||
|
||||
// const uuidID = window.sessionStorage.getItem("uuid");
|
||||
|
||||
// const isDrive = this.props.popupFile.metadata.drive;
|
||||
// const isPersonal = this.props.popupFile.metadata.personalFile;
|
||||
|
||||
// const finalUrl = isDrive ?
|
||||
// currentURL + `/file-service-google/stream-video/${this.props.popupFile._id}/${this.tempToken}/${uuidID}`
|
||||
// : !isPersonal ? currentURL + `/file-service/stream-video/${this.props.popupFile._id}/${this.tempToken}/${uuidID}`
|
||||
// : currentURL + `/file-service-personal/stream-video/${this.props.popupFile._id}/${this.tempToken}/${uuidID}`
|
||||
|
||||
// this.setState(() => ({
|
||||
// ...this.state,
|
||||
// video: finalUrl
|
||||
// }))
|
||||
|
||||
// }).catch((err) => {
|
||||
// console.log(err)
|
||||
// })
|
||||
};
|
||||
|
||||
componentWillUnmount = () => {
|
||||
document.removeEventListener("mousedown", this.handleClickOutside);
|
||||
|
||||
if (this.props.popupFile.metadata.isVideo) {
|
||||
axios
|
||||
.delete(`/file-service/remove-stream-video-token`)
|
||||
.then(() => {
|
||||
console.log("removed video access token");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
|
||||
this.video.current.pause();
|
||||
|
||||
this.setState(() => ({
|
||||
...this.state,
|
||||
video: "",
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
document.addEventListener("mousedown", this.handleClickOutside);
|
||||
|
||||
if (
|
||||
this.props.popupFile.metadata.hasThumbnail &&
|
||||
!this.props.popupFile.metadata.isVideo &&
|
||||
!this.props.popupFile.metadata.drive
|
||||
) {
|
||||
this.getThumbnail();
|
||||
} else if (
|
||||
this.props.popupFile.metadata.drive &&
|
||||
this.props.popupFile.metadata.hasThumbnail &&
|
||||
!this.props.popupFile.metadata.googleDoc &&
|
||||
!this.props.popupFile.metadata.isVideo
|
||||
) {
|
||||
this.getThumbnail();
|
||||
} else if (
|
||||
this.props.popupFile.metadata.drive &&
|
||||
this.props.popupFile.metadata.hasThumbnail &&
|
||||
!this.props.popupFile.metadata.isVideo
|
||||
) {
|
||||
this.setState(() => ({
|
||||
...this.state,
|
||||
imageClassname: "popup-window__image",
|
||||
spinnerClassname: "popup-window__spinner__wrapper popup-window--gone",
|
||||
image: "/images/cloud-svg.svg",
|
||||
}));
|
||||
} else if (this.props.popupFile.metadata.isVideo) {
|
||||
this.getVideo();
|
||||
}
|
||||
};
|
||||
|
||||
hidePopupWindow = () => {
|
||||
this.props.dispatch(hidePopup());
|
||||
};
|
||||
|
||||
setPhotoViewerWindow = () => {
|
||||
const isGoogle = this.props.popupFile.metadata.drive;
|
||||
const isPersonal = this.props.popupFile.metadata.personalFile;
|
||||
this.props.dispatch(
|
||||
setPhotoID(this.props.popupFile._id, isGoogle, isPersonal)
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<PopupWindow
|
||||
wrapperRef={this.wrapperRef}
|
||||
video={this.video}
|
||||
hidePopupWindow={this.hidePopupWindow}
|
||||
state={this.state}
|
||||
setPhotoViewerWindow={this.setPhotoViewerWindow}
|
||||
thumbnailOnError={this.thumbnailOnError}
|
||||
{...this.props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const connectPropToState = (state) => ({
|
||||
popupFile: state.popupFile,
|
||||
});
|
||||
|
||||
export default connect(connectPropToState)(PopupWindowContainer);
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
export default ({title, body, first=true}) => (
|
||||
|
||||
<div className="section-detail__wrapper">
|
||||
<h5 className={first ? "section-detail__title" : "section-detail__title section-detail__title--margin"}>{title}</h5>
|
||||
<h5 className={first ? "section-detail__body" : "section-detail__body section-detail__body--margin"}>{body}</h5>
|
||||
</div>
|
||||
|
||||
)
|
||||
@@ -15,7 +15,6 @@ import { setFiles, startResetCache } from "../../actions/files";
|
||||
import { connect } from "react-redux";
|
||||
import { setParent } from "../../actions/parent";
|
||||
import uuid from "uuid";
|
||||
import InvoiceItem from "../InvoiceItem";
|
||||
import { setUpdateSettingsID } from "../../utils/updateSettings";
|
||||
import HomepageSpinner from "../HomepageSpinner";
|
||||
import { setLoading } from "../../actions/main";
|
||||
@@ -1493,13 +1492,6 @@ class SettingsPageContainer extends React.Component {
|
||||
<th></th>
|
||||
</tr>
|
||||
|
||||
{!this.state.loaded || !this.state.invoicesLoaded
|
||||
? undefined
|
||||
: this.state.invoices.map((currentInvoice) => {
|
||||
return (
|
||||
<InvoiceItem currentInvoice={currentInvoice} />
|
||||
);
|
||||
})}
|
||||
{/* <tr>
|
||||
<td className="date__history">May 1, 2020</td>
|
||||
<td className="plan__history">myDrive Standard Plan</td>
|
||||
|
||||
@@ -14,8 +14,6 @@ import DownloadPage from "../components/DownloadPage";
|
||||
import VerifyEmailPage from "../components/VerifyEmailPage";
|
||||
import uuid from "uuid";
|
||||
import ResetPasswordPage from "../components/ResetPasswordPage";
|
||||
import GoogleAccountPage from "../components/GoogleAccountPage";
|
||||
import AddStoragePage from "../components/AddStoragePage";
|
||||
import SettingsPage from "../components/SettingsPage";
|
||||
import Homepage from "../components/Homepage";
|
||||
|
||||
|
||||
Reference in New Issue
Block a user