feat(frontend): add error modal component
Add new ErrorModal component for API error display: - Auto-displays when apiError store is set - Shows service name, error message, and status code - Provides "Retry Connection" button to attempt reconnection - Provides "Dismiss" button to close modal and continue - Integrates with all three services (AniList, MAL, Simkl) - Uses flowbite-svelte Modal and Button components - Proper Svelte event handling with on:click Uses Tailwind CSS for styling with red error theme and helpful messaging.
This commit is contained in:
73
frontend/src/helperComponents/ErrorModal.svelte
Normal file
73
frontend/src/helperComponents/ErrorModal.svelte
Normal file
@@ -0,0 +1,73 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
apiError,
|
||||
isApiDown,
|
||||
clearApiError,
|
||||
setApiError,
|
||||
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
|
||||
import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
|
||||
import { CheckIfMALLoggedInAndSetUser } from "../helperModules/CheckIfMyAnimeListLoggedIn.svelte";
|
||||
import { CheckIfSimklLoggedInAndSetUser } from "../helperModules/CheckIsSimklLoggedIn.svelte";
|
||||
import { Modal, Button } from "flowbite-svelte";
|
||||
let showModal = false;
|
||||
$: if ($apiError) {
|
||||
showModal = true;
|
||||
}
|
||||
async function handleRetry() {
|
||||
const service = $apiError?.service;
|
||||
clearApiError();
|
||||
|
||||
try {
|
||||
if (service === "anilist") {
|
||||
await CheckIfAniListLoggedInAndLoadWatchList();
|
||||
} else if (service === "mal") {
|
||||
await CheckIfMALLoggedInAndSetUser();
|
||||
} else if (service === "simkl") {
|
||||
await CheckIfSimklLoggedInAndSetUser();
|
||||
}
|
||||
} catch (err) {
|
||||
const errorMsg = err instanceof Error ? err.message : String(err);
|
||||
setApiError(
|
||||
service || "unknown",
|
||||
`Retry failed: ${errorMsg}`,
|
||||
undefined,
|
||||
true,
|
||||
);
|
||||
}
|
||||
}
|
||||
function handleDismiss() {
|
||||
clearApiError();
|
||||
showModal = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if showModal && $apiError}
|
||||
<Modal
|
||||
open={showModal}
|
||||
title="{$apiError.service.toUpperCase()} API Error"
|
||||
size="md"
|
||||
>
|
||||
<div class="space-y-4">
|
||||
<div class="p-4 bg-red-50 border border-red-200 rounded-lg">
|
||||
<p class="text-red-800 font-medium">{$apiError.message}</p>
|
||||
{#if $apiError.statusCode}
|
||||
<p class="text-red-600 text-sm mt-2">
|
||||
Status: {$apiError.statusCode}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="text-gray-600">
|
||||
The application will remain open. You can retry the connection or
|
||||
dismiss this message to continue with limited functionality.
|
||||
</p>
|
||||
</div>
|
||||
<div slot="footer" class="flex gap-3 justify-end">
|
||||
{#if $apiError.canRetry}
|
||||
<Button on:click={handleRetry} class="bg-blue-600 hover:bg-blue-700">
|
||||
Retry Connection
|
||||
</Button>
|
||||
{/if}
|
||||
<Button on:click={handleDismiss} color="alternative">Dismiss</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user