From 5146e0e4ff02897a9402b710df58bceedba6106b Mon Sep 17 00:00:00 2001
From: Calli <calli-eve@proton.me>
Date: Fri, 23 Jun 2023 19:58:41 +0300
Subject: [PATCH] implement character backup

---
 README.md                                   |  1 +
 src/app/components/Backup/DowloadButton.tsx | 17 +++++++++++++++++
 src/app/components/MainGrid.tsx             |  2 ++
 3 files changed, 20 insertions(+)
 create mode 100644 src/app/components/Backup/DowloadButton.tsx

diff --git a/README.md b/README.md
index 36fc766..26b89e9 100644
--- a/README.md
+++ b/README.md
@@ -13,6 +13,7 @@ Features:
 - Track extractor status
   - When the cycle will end
   - Highlight the planet if extractor has stopped or has not been started.
+- Backup to download characters to a file (restore not implemented yet)
 
 ## Security
 
diff --git a/src/app/components/Backup/DowloadButton.tsx b/src/app/components/Backup/DowloadButton.tsx
new file mode 100644
index 0000000..5005750
--- /dev/null
+++ b/src/app/components/Backup/DowloadButton.tsx
@@ -0,0 +1,17 @@
+import { CharacterContext } from "@/app/context/Context";
+import { Button } from "@mui/material";
+import { useContext } from "react";
+
+export const DowloadButton = () => {
+  const { characters } = useContext(CharacterContext);
+  return (
+    <Button
+      href={`data:text/json;charset=utf-8,${encodeURIComponent(
+        JSON.stringify(characters)
+      )}`}
+      download="pi-avanto-tk-characters.json"
+    >
+      Backup
+    </Button>
+  );
+};
diff --git a/src/app/components/MainGrid.tsx b/src/app/components/MainGrid.tsx
index 424f88d..c648474 100644
--- a/src/app/components/MainGrid.tsx
+++ b/src/app/components/MainGrid.tsx
@@ -4,6 +4,7 @@ import { LoginButton } from "./Login/LoginButton";
 import { AccountCard } from "./Account/AccountCard";
 import { AccessToken } from "@/types";
 import { CharacterContext } from "../context/Context";
+import { DowloadButton } from "./Backup/DowloadButton";
 
 interface Grouped {
   [key: string]: AccessToken[];
@@ -24,6 +25,7 @@ export const MainGrid = ({ sessionReady }: { sessionReady: boolean }) => {
         <Grid item xs={2}>
           <Stack direction="row" spacing={1}>
             <LoginButton />
+            <DowloadButton />
           </Stack>
         </Grid>
       </Grid>