2021-03-12 03:31:19 +00:00
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
|
|
|
|
import { slide as Menu } from 'react-burger-menu';
|
|
|
|
import { Button } from 'react-bootstrap';
|
|
|
|
import ConfirmLogout from 'components/ConfirmLogout';
|
|
|
|
import Spinner from 'react-bootstrap/Spinner';
|
|
|
|
import { clearData, getData, LS_KEYS } from 'utils/storage/localStorage';
|
|
|
|
import subscriptionService, {
|
|
|
|
Subscription,
|
|
|
|
} from 'services/subscriptionService';
|
|
|
|
import ChangeDisabledMessage from './ChangeDisabledMessage';
|
|
|
|
import constants from 'utils/strings/constants';
|
|
|
|
import { clearKeys } from 'utils/storage/sessionStorage';
|
|
|
|
import router from 'next/router';
|
|
|
|
import localForage from 'localforage';
|
|
|
|
|
|
|
|
export default function Sidebar(props) {
|
|
|
|
const [logoutModalView, setLogoutModalView] = useState(false);
|
|
|
|
const [
|
|
|
|
changeDisabledMessageModalView,
|
|
|
|
setChangeDisabledMessageModalView,
|
|
|
|
] = useState(false);
|
|
|
|
function showLogoutModal() {
|
|
|
|
setLogoutModalView(true);
|
|
|
|
}
|
|
|
|
function closeLogoutModal() {
|
|
|
|
setLogoutModalView(false);
|
|
|
|
}
|
|
|
|
const [usage, SetUsage] = useState<string>(null);
|
|
|
|
const subscription: Subscription = getData(LS_KEYS.SUBSCRIPTION);
|
2021-03-12 04:24:01 +00:00
|
|
|
const [isOpen, setIsOpen] = useState(false);
|
2021-03-12 03:31:19 +00:00
|
|
|
useEffect(() => {
|
|
|
|
const main = async () => {
|
|
|
|
const usage = await subscriptionService.getUsage();
|
|
|
|
|
|
|
|
SetUsage(usage);
|
|
|
|
};
|
|
|
|
main();
|
|
|
|
});
|
|
|
|
|
|
|
|
const logout = async () => {
|
|
|
|
clearKeys();
|
|
|
|
clearData();
|
2021-03-12 04:24:01 +00:00
|
|
|
setIsOpen(false);
|
2021-03-12 03:31:19 +00:00
|
|
|
props.setUploadButtonView(false);
|
|
|
|
localForage.clear();
|
|
|
|
const cache = await caches.delete('thumbs');
|
|
|
|
router.push('/');
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
2021-03-12 04:24:01 +00:00
|
|
|
<Menu className="text-center" isOpen={isOpen} itemListElement="div">
|
|
|
|
<div style={{ outline: 'none' }}>
|
2021-03-12 03:31:19 +00:00
|
|
|
{constants.SUBCRIPTION_PLAN}
|
|
|
|
<Button
|
|
|
|
variant="success"
|
|
|
|
size="sm"
|
|
|
|
onClick={() => setChangeDisabledMessageModalView(true)}
|
|
|
|
>
|
|
|
|
{constants.CHANGE}
|
|
|
|
</Button>
|
|
|
|
<ChangeDisabledMessage
|
|
|
|
show={changeDisabledMessageModalView}
|
|
|
|
onHide={() => setChangeDisabledMessageModalView(false)}
|
|
|
|
/>
|
|
|
|
<br />
|
|
|
|
<br />
|
|
|
|
{constants.SUBSCRIPTION_INFO(subscription?.productID)}
|
|
|
|
<br />
|
|
|
|
<br />
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<h4>{constants.USAGE_DETAILS}</h4>
|
|
|
|
<br />
|
|
|
|
<div>
|
|
|
|
{usage ? (
|
|
|
|
constants.USAGE_INFO(
|
|
|
|
usage,
|
|
|
|
subscriptionService.convertBytesToGBs(
|
|
|
|
subscription?.storage
|
|
|
|
)
|
|
|
|
)
|
|
|
|
) : (
|
|
|
|
<Spinner animation="border" />
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<br />
|
|
|
|
</div>
|
|
|
|
<>
|
|
|
|
<ConfirmLogout
|
|
|
|
show={logoutModalView}
|
|
|
|
onHide={closeLogoutModal}
|
|
|
|
logout={() => {
|
|
|
|
setLogoutModalView(false);
|
2021-03-12 04:01:29 +00:00
|
|
|
logout();
|
2021-03-12 03:31:19 +00:00
|
|
|
}}
|
|
|
|
/>
|
|
|
|
<Button variant="danger" onClick={showLogoutModal}>
|
|
|
|
logout
|
|
|
|
</Button>
|
|
|
|
</>
|
|
|
|
</Menu>
|
|
|
|
);
|
|
|
|
}
|