152 lines
5.7 KiB
TypeScript
152 lines
5.7 KiB
TypeScript
import { Modal } from "../Modal";
|
|
import { useRef, useState } from "preact/hooks";
|
|
import { useParams } from "wouter";
|
|
import axios from "axios";
|
|
import { useFlash } from "../App/FlashContext";
|
|
import { useGuild } from "../App/useGuild";
|
|
import { useQueryClient } from "react-query";
|
|
|
|
export const Import = () => {
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<a
|
|
class="show-modal"
|
|
data-modal="chooseTimezoneModal"
|
|
onClick={() => {
|
|
setModalOpen(true);
|
|
}}
|
|
>
|
|
<span class="icon">
|
|
<i class="fas fa-exchange"></i>
|
|
</span>{" "}
|
|
Import/Export
|
|
</a>
|
|
{modalOpen && <ImportModal setModalOpen={setModalOpen} />}
|
|
</>
|
|
);
|
|
};
|
|
|
|
const ImportModal = ({ setModalOpen }) => {
|
|
const guild = useGuild();
|
|
|
|
const aRef = useRef<HTMLAnchorElement>();
|
|
const inputRef = useRef<HTMLInputElement>();
|
|
const flash = useFlash();
|
|
|
|
const [isImporting, setIsImporting] = useState(false);
|
|
|
|
const queryClient = useQueryClient();
|
|
|
|
return (
|
|
<Modal
|
|
setModalOpen={setModalOpen}
|
|
title={
|
|
<>
|
|
Import/Export Manager{" "}
|
|
<a href="/help/iemanager">
|
|
<span>
|
|
<i class="fa fa-question-circle"></i>
|
|
</span>
|
|
</a>
|
|
</>
|
|
}
|
|
>
|
|
<>
|
|
<div class="control">
|
|
<div class="field">
|
|
<label>
|
|
<input
|
|
type="radio"
|
|
class="default-width"
|
|
name="exportSelect"
|
|
value="reminders"
|
|
checked
|
|
/>
|
|
Reminders
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
<div class="has-text-centered">
|
|
<div style="color: red">
|
|
Please first read the <a href="/help/iemanager">support page</a>
|
|
</div>
|
|
<button
|
|
class="button is-success is-outlined"
|
|
style={{ margin: "2px" }}
|
|
id="import-data"
|
|
disabled={isImporting}
|
|
onClick={() => {
|
|
inputRef.current.click();
|
|
}}
|
|
>
|
|
Import Data
|
|
</button>
|
|
<button
|
|
class="button is-success"
|
|
style={{ margin: "2px" }}
|
|
id="export-data"
|
|
onClick={() =>
|
|
axios
|
|
.get(`/dashboard/api/guild/${guild}/export/reminders`)
|
|
.then(({ data, status }) => {
|
|
if (status === 200) {
|
|
aRef.current.href = `data:text/plain;charset=utf-8,${encodeURIComponent(
|
|
data.body,
|
|
)}`;
|
|
aRef.current.click();
|
|
} else {
|
|
flash({
|
|
message: `Unexpected status ${status}`,
|
|
type: "error",
|
|
});
|
|
}
|
|
})
|
|
}
|
|
>
|
|
Export Data
|
|
</button>
|
|
</div>
|
|
<a ref={aRef} id="downloader" download="export.csv" class="is-hidden" />
|
|
<input
|
|
ref={inputRef}
|
|
id="uploader"
|
|
type="file"
|
|
hidden
|
|
onChange={() => {
|
|
new Promise((resolve) => {
|
|
let fileReader = new FileReader();
|
|
fileReader.onload = (e) => resolve(fileReader.result);
|
|
fileReader.readAsDataURL(inputRef.current.files[0]);
|
|
}).then((dataUrl: string) => {
|
|
setIsImporting(true);
|
|
|
|
axios
|
|
.put(`/dashboard/api/guild/${guild}/export/reminders`, {
|
|
body: dataUrl.split(",")[1],
|
|
})
|
|
.then(({ data }) => {
|
|
setIsImporting(false);
|
|
|
|
if (data.error) {
|
|
flash({ message: data.error, type: "error" });
|
|
} else {
|
|
flash({ message: data.message, type: "success" });
|
|
queryClient.invalidateQueries({
|
|
queryKey: ["GUILD_REMINDERS", guild],
|
|
});
|
|
}
|
|
})
|
|
.then(() => {
|
|
delete inputRef.current.files[0];
|
|
});
|
|
});
|
|
}}
|
|
/>
|
|
</>
|
|
</Modal>
|
|
);
|
|
};
|