front-end UI done

webUI/react/src/screens/Settings.tsx

@@ -16,15 +16,11 @@ import {
     DialogContentText, IconButton, ListItemSecondaryAction, Switch, TextField,
     ListItemIcon, ListItemText,
 } from '@material-ui/core';
-import ListItem, { ListItemProps } from '@material-ui/core/ListItem';
+import ListItem from '@material-ui/core/ListItem';
 import NavbarContext from '../context/NavbarContext';
 import DarkTheme from '../context/DarkTheme';
 import useLocalStorage from '../util/useLocalStorage';
-
-function ListItemLink(props: ListItemProps<'a', { button?: true }>) {
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    return <ListItem button component="a" {...props} />;
-}
+import ListItemLink from '../util/ListItemLink';
 
 export default function Settings() {
     const { setTitle, setAction } = useContext(NavbarContext);
@@ -58,6 +54,12 @@ export default function Settings() {
                     </ListItemIcon>
                     <ListItemText primary="Categories" />
                 </ListItemLink>
+                <ListItemLink href="/settings/backup">
+                    <ListItemIcon>
+                        <InboxIcon />
+                    </ListItemIcon>
+                    <ListItemText primary="Backup" />
+                </ListItemLink>
                 <ListItem>
                     <ListItemIcon>
                         <Brightness6Icon />

webUI/react/src/screens/settings/Backup.tsx

@@ -0,0 +1,91 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import React, { useContext, useEffect } from 'react';
+import { ListItemIcon } from '@material-ui/core';
+import List from '@material-ui/core/List';
+import InboxIcon from '@material-ui/icons/Inbox';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import { fromEvent } from 'file-selector';
+import ListItemLink from '../../util/ListItemLink';
+import NavbarContext from '../../context/NavbarContext';
+import client from '../../util/client';
+
+export default function Backup() {
+    const { setTitle, setAction } = useContext(NavbarContext);
+    useEffect(() => { setTitle('Backup'); setAction(<></>); }, []);
+
+    const { baseURL } = client.defaults;
+
+    const submitBackup = (file: File) => {
+        file.text()
+            .then(
+                (fileContent: string) => {
+                    client.post('/api/v1/backup/legacy/import',
+                        fileContent, { headers: { 'Content-Type': 'application/json' } });
+                },
+            );
+    };
+
+    const dropHandler = async (e: Event) => {
+        e.preventDefault();
+        const files = await fromEvent(e);
+
+        submitBackup(files[0] as File);
+    };
+
+    const dragOverHandler = (e: Event) => {
+        e.preventDefault();
+    };
+
+    useEffect(() => {
+        document.addEventListener('drop', dropHandler);
+        document.addEventListener('dragover', dragOverHandler);
+
+        const input = document.getElementById('backup-file');
+        input?.addEventListener('change', async (evt) => {
+            const files = await fromEvent(evt);
+            submitBackup(files[0] as File);
+        });
+
+        return () => {
+            document.removeEventListener('drop', dropHandler);
+            document.removeEventListener('dragover', dragOverHandler);
+        };
+    }, []);
+
+    return (
+        <List style={{ padding: 0 }}>
+            <ListItemLink href={`${baseURL}/api/v1/backup/legacy/export/file`}>
+                <ListItemIcon>
+                    <InboxIcon />
+                </ListItemIcon>
+                <ListItemText
+                    primary="Create Legacy Backup"
+                    secondary="Backup library as a Tachiyomi legacy backup"
+                />
+            </ListItemLink>
+            <ListItem button onClick={() => document.getElementById('backup-file')?.click()}>
+                <ListItemIcon>
+                    <InboxIcon />
+                </ListItemIcon>
+                <ListItemText
+                    primary="Restore Legacy Backup"
+                    secondary="You can also drop the backup file anywhere to restore"
+                />
+                <input
+                    type="file"
+                    name="backup.json"
+                    id="backup-file"
+                    style={{ display: 'none' }}
+                />
+            </ListItem>
+        </List>
+
+    );
+}