115 lines
4.2 KiB
TypeScript
115 lines
4.2 KiB
TypeScript
"use client"; // Mark as client component
|
|
|
|
import { Separator } from "@radix-ui/react-dropdown-menu";
|
|
import { Dispatch, useState } from "react";
|
|
|
|
export default function DatabaseSettings() {
|
|
const [uploadStatus, setUploadStatus] = useState<string | null>(null);
|
|
const [remoteCopyStatus, setRemoteCopyStatus] = useState<string | null>(null);
|
|
|
|
const uploadDB = async (formData: FormData, setStatus: Dispatch<string>) => {
|
|
try {
|
|
const response = await fetch("/api/db/upload", {
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
|
|
if (response.ok) {
|
|
setStatus("Database uploaded successfully!");
|
|
} else {
|
|
const error = await response.json();
|
|
setStatus(error.message || "An error occurred during upload.");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error uploading the database:", error);
|
|
setStatus("An error occurred during upload.");
|
|
}
|
|
}
|
|
|
|
// Handle form submission
|
|
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault(); // Prevent default form submission
|
|
|
|
const formData = new FormData(event.currentTarget);
|
|
uploadDB(formData, setUploadStatus);
|
|
};
|
|
|
|
const remoteCopy = async () => {
|
|
|
|
const remoteUrl = "https://lifetracker.ryanpandya.com/api/db/download";
|
|
|
|
setRemoteCopyStatus("Downloading...");
|
|
const download = await fetch(remoteUrl);
|
|
if (!download.ok) {
|
|
throw new Error(`Failed to fetch from ${remoteUrl}: ${download.statusText}`);
|
|
}
|
|
|
|
const dbData = await download.blob();
|
|
|
|
const formData = new FormData();
|
|
formData.append('sqliteFile', dbData, 'remoteDB-file.db');
|
|
uploadDB(formData, setRemoteCopyStatus);
|
|
|
|
// try {
|
|
// const response = await fetch("/api/db/upload", {
|
|
// method: "POST",
|
|
// body: formData,
|
|
// });
|
|
|
|
// if (response.ok) {
|
|
// setUploadStatus("Database uploaded successfully!");
|
|
// } else {
|
|
// const error = await response.json();
|
|
// setUploadStatus(error.message || "An error occurred during upload.");
|
|
// }
|
|
// } catch (error) {
|
|
// console.error("Error uploading the database:", error);
|
|
// setUploadStatus("An error occurred during upload.");
|
|
// }
|
|
};
|
|
|
|
return (
|
|
<><div className="mt-8 mb-2 flex w-full flex-col sm:flex-row">
|
|
<div className="mb-4 w-full text-lg font-medium sm:w-1/3">
|
|
Upload SQLite Database
|
|
</div>
|
|
<div className="w-full">
|
|
<div className="mb-2">
|
|
<form onSubmit={handleSubmit} encType="multipart/form-data">
|
|
<input type="file" name="sqliteFile" accept=".db" required />
|
|
<button type="submit">Upload</button>
|
|
</form>
|
|
{uploadStatus && <p>{uploadStatus}</p>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mb-2 flex w-full flex-col sm:flex-row">
|
|
<div className="mb-4 w-full text-lg font-medium sm:w-1/3">
|
|
Download SQLite Database
|
|
</div>
|
|
<div className="w-full">
|
|
<div className="mb-2">
|
|
<a href="/api/db/download" download>
|
|
<button>Download</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{process.env.NODE_ENV === 'development' ?
|
|
<div className="mb-2 flex w-full flex-col sm:flex-row">
|
|
<div className="mb-4 w-full text-lg font-medium sm:w-1/3">
|
|
Copy from Remote URL
|
|
</div>
|
|
<div className="w-full">
|
|
<div className="mb-2">
|
|
<button onClick={remoteCopy}>Copy</button>
|
|
{remoteCopyStatus && <p>{remoteCopyStatus}</p>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
: ""}
|
|
</>
|
|
);
|
|
}
|
|
|