dappros/ethora

import { Box, Button, Typography } from "@mui/material";
import { useWeb3React } from "@web3-react/core";
import * as React from "react";
import { useHistory } from "react-router";
import { DeleteDialog } from "../../components/DeleteDialog";
import { useSnackbar } from "../../context/SnackbarContext";
import { deleteAccountService, httpWithAuth } from "../../http";
import { useStoreState } from "../../store";
import xmpp from "../../xmpp";

interface ManageDataProps {}

export const ManageData = (props: ManageDataProps) => {
  const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const { showSnackbar } = useSnackbar();
  const clearUser = useStoreState((state) => state.clearUser);
  const user = useStoreState((state) => state.user);

  const history = useHistory();
  const { active, deactivate } = useWeb3React();
  const handleCloseDeleteDialog = () => setDeleteDialogOpen(false);

  const deleteAccount = async () => {
    setLoading(true);
    try {
      await deleteAccountService();
      showSnackbar("success", "Account deleted successfully");

      onLogout();
    } catch (error) {
      console.log(error);
      showSnackbar("error", "Something went wrong");
    }
    setLoading(false);

    setDeleteDialogOpen(false);
  };

  const onLogout = () => {
    clearUser();
    xmpp.stop();
    if (active) {
      deactivate();
    }
    history.push("/");
  };
  const downloadData = (data: unknown) => {
    const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
      JSON.stringify(data)
    )}`;
    const link = document.createElement("a");
    link.href = jsonString;
    link.download =
      user.firstName + " " + user.lastName + " personal data.json";
    link.click();
    link.remove();
  };
  const exportData = async () => {
    setLoading(true);
    try {
      const { data } = await httpWithAuth().get("/users/exportData");
      downloadData(data);
    } catch (error) {
      console.log(error);
    }
    setLoading(false);
  };

  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "flex-start",
        flexDirection: "column",
        margin: "20px",
        width: "50vw",
      }}
    >
      <Box sx={{width: '100%'}}>
        <Typography fontWeight={"bold"}>Download your data</Typography>
        <Typography>
          You own your data. Tap the button below to download a copy of your
          data
        </Typography>
        <Box sx={{ display: "flex", justifyContent: "center" }}>
          <Button
            sx={{ margin: "0 auto" }}
            disabled={loading}
            onClick={exportData}
            variant="contained"
          >
            Download my data
          </Button>
        </Box>
      </Box>

      <Box
        sx={{
          marginTop: "20px",
          width: '100%'
        }}
      >
        <Typography fontWeight={"bold"}>Delete your account</Typography>
        <Typography>
          Use this only if you want to permanently delete your account & data
          from our system.
        </Typography>
        <Typography fontWeight={"light"} fontStyle={"italic"} fontSize={"12px"}>
          Note: due to the immutable nature of distributed ledger technology,
          network nodes operated by the community may still retain historical
          transactions generated by your account, however your personally
          identifiable information such as your name, e-mail, your key-value
          storage etc will be removed.
        </Typography>

        <Typography fontWeight={"light"} fontStyle={"italic"} fontSize={"12px"}>
          Any of your digital assets will be lost.
        </Typography>
        <Box sx={{ display: "flex", justifyContent: "center" }}>
          <Button
            color="error"
            onClick={() => setDeleteDialogOpen(true)}
            variant="contained"
          >
            Delete my account
          </Button>
        </Box>
      </Box>
      <DeleteDialog
        onDeletePress={deleteAccount}
        loading={loading}
        onClose={handleCloseDeleteDialog}
        open={deleteDialogOpen}
        title={"Delete Account"}
        description={
          "This will result in a complete deletion of your account and assets. Are you sure you want to proceed?"
        }
      />
    </Box>
  );
};