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 subscriptionService, {
|
|
|
|
Subscription,
|
|
|
|
} from 'services/subscriptionService';
|
|
|
|
import ChangeDisabledMessage from './ChangeDisabledMessage';
|
|
|
|
import constants from 'utils/strings/constants';
|
2021-03-12 04:50:58 +00:00
|
|
|
import { logoutUser } from 'services/userService';
|
|
|
|
import { getData, LS_KEYS } from 'utils/storage/localStorage';
|
2021-03-12 05:33:33 +00:00
|
|
|
import { getToken } from 'utils/common/key';
|
2021-03-12 03:31:19 +00:00
|
|
|
|
2021-03-12 04:50:58 +00:00
|
|
|
interface Props {
|
|
|
|
setNavbarIconView;
|
|
|
|
}
|
|
|
|
export default function Sidebar(props: Props) {
|
2021-03-12 03:31:19 +00:00
|
|
|
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 () => {
|
2021-03-12 05:33:33 +00:00
|
|
|
const usage = getToken() && (await subscriptionService.getUsage());
|
2021-03-12 03:31:19 +00:00
|
|
|
|
|
|
|
SetUsage(usage);
|
|
|
|
};
|
|
|
|
main();
|
2021-03-12 05:33:33 +00:00
|
|
|
}, [getToken()]);
|
2021-03-12 03:31:19 +00:00
|
|
|
|
|
|
|
const logout = async () => {
|
2021-03-12 04:50:58 +00:00
|
|
|
setLogoutModalView(false);
|
2021-03-12 04:24:01 +00:00
|
|
|
setIsOpen(false);
|
2021-03-12 04:50:58 +00:00
|
|
|
props.setNavbarIconView(false);
|
|
|
|
logoutUser();
|
2021-03-12 03:31:19 +00:00
|
|
|
};
|
|
|
|
return (
|
2021-03-12 05:33:33 +00:00
|
|
|
<Menu
|
|
|
|
className="text-center"
|
|
|
|
isOpen={isOpen}
|
|
|
|
onStateChange={(state) => setIsOpen(state.isOpen)}
|
|
|
|
itemListElement="div"
|
|
|
|
>
|
2021-03-12 04:24:01 +00:00
|
|
|
<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>
|
2021-03-12 04:39:32 +00:00
|
|
|
<div style={{ outline: 'none' }}>
|
2021-03-12 03:31:19 +00:00
|
|
|
<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}
|
2021-03-12 04:50:58 +00:00
|
|
|
logout={logout}
|
2021-03-12 03:31:19 +00:00
|
|
|
/>
|
|
|
|
<Button variant="danger" onClick={showLogoutModal}>
|
|
|
|
logout
|
|
|
|
</Button>
|
|
|
|
</>
|
|
|
|
</Menu>
|
|
|
|
);
|
|
|
|
}
|