209dc6f85a
- Deleted `CharacterComponent` and `CharacterDetail` files from the project. - Refactored related logic to improve code maintainability and reduce redundancy.
259 lines
13 KiB
TypeScript
259 lines
13 KiB
TypeScript
'use client';
|
|
import React, {ChangeEvent, Dispatch, SetStateAction, useContext, useEffect, useRef, useState} from "react";
|
|
import {AlertContext} from "@/context/AlertContext";
|
|
import System from "@/lib/models/System";
|
|
import {SessionContext} from "@/context/SessionContext";
|
|
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
|
import {faBook, faCheck, faLayerGroup, faPencilAlt, faX} from "@fortawesome/free-solid-svg-icons";
|
|
import InputField from "@/components/form/InputField";
|
|
import TextInput from "@/components/form/TextInput";
|
|
import TexteAreaInput from "@/components/form/TexteAreaInput";
|
|
import CancelButton from "@/components/form/CancelButton";
|
|
import SubmitButtonWLoading from "@/components/form/SubmitButtonWLoading";
|
|
import {useTranslations} from "next-intl";
|
|
import {LangContext, LangContextProps} from "@/context/LangContext";
|
|
import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
|
|
import {SyncedBook} from "@/lib/models/SyncedBook";
|
|
import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
|
|
import {SeriesSyncContext, SeriesSyncContextProps} from "@/context/SeriesSyncContext";
|
|
import {SyncedSeries, SyncedSeriesBook} from "@/lib/models/SyncedSeries";
|
|
|
|
interface AddNewSeriesFormProps {
|
|
setCloseForm: Dispatch<SetStateAction<boolean>>;
|
|
onSeriesCreated?: (seriesId: string, name: string) => void;
|
|
}
|
|
|
|
export default function AddNewSeriesForm({setCloseForm, onSeriesCreated}: AddNewSeriesFormProps) {
|
|
const t = useTranslations();
|
|
const {lang} = useContext<LangContextProps>(LangContext);
|
|
const {session} = useContext(SessionContext);
|
|
const {errorMessage, successMessage} = useContext(AlertContext);
|
|
const {serverSyncedBooks, setServerSyncedBooks, localSyncedBooks, setLocalSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
|
|
const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
|
|
const {serverSyncedSeries, localSyncedSeries} = useContext<SeriesSyncContextProps>(SeriesSyncContext);
|
|
|
|
// Get all bookIds already in a series
|
|
const booksAlreadyInSeries: Set<string> = new Set(
|
|
(isCurrentlyOffline() ? localSyncedSeries : serverSyncedSeries)
|
|
.flatMap((series: SyncedSeries): string[] =>
|
|
series.books.map((book: SyncedSeriesBook): string => book.bookId)
|
|
)
|
|
);
|
|
const modalRef: React.RefObject<HTMLDivElement | null> = useRef<HTMLDivElement>(null);
|
|
|
|
const [name, setName] = useState<string>('');
|
|
const [description, setDescription] = useState<string>('');
|
|
const [selectedBookIds, setSelectedBookIds] = useState<string[]>([]);
|
|
const [isAddingSeries, setIsAddingSeries] = useState<boolean>(false);
|
|
|
|
const token: string = session?.accessToken ?? '';
|
|
|
|
useEffect((): () => void => {
|
|
document.body.style.overflow = 'hidden';
|
|
return (): void => {
|
|
document.body.style.overflow = 'auto';
|
|
};
|
|
}, []);
|
|
|
|
function toggleBookSelection(bookId: string): void {
|
|
setSelectedBookIds((prev: string[]): string[] => {
|
|
if (prev.includes(bookId)) {
|
|
return prev.filter((id: string): boolean => id !== bookId);
|
|
}
|
|
return [...prev, bookId];
|
|
});
|
|
}
|
|
|
|
async function handleAddSeries(): Promise<void> {
|
|
if (!name) {
|
|
errorMessage(t('addNewSeriesForm.error.nameMissing'));
|
|
return;
|
|
}
|
|
if (name.length < 2) {
|
|
errorMessage(t('addNewSeriesForm.error.nameTooShort'));
|
|
return;
|
|
}
|
|
if (name.length > 100) {
|
|
errorMessage(t('addNewSeriesForm.error.nameTooLong'));
|
|
return;
|
|
}
|
|
|
|
setIsAddingSeries(true);
|
|
try {
|
|
const createData = {
|
|
name: name,
|
|
description: description || null,
|
|
bookIds: selectedBookIds,
|
|
};
|
|
let response: string;
|
|
|
|
if (isCurrentlyOffline()) {
|
|
response = await window.electron.invoke<string>('db:series:create', createData);
|
|
} else {
|
|
response = await System.authPostToServer<string>(
|
|
'series/add',
|
|
createData,
|
|
token,
|
|
lang
|
|
);
|
|
}
|
|
|
|
if (!response) {
|
|
errorMessage(t('addNewSeriesForm.error.addingSeries'));
|
|
setIsAddingSeries(false);
|
|
return;
|
|
}
|
|
successMessage(t('addNewSeriesForm.success'));
|
|
|
|
if (selectedBookIds.length > 0) {
|
|
if (isCurrentlyOffline()) {
|
|
setLocalSyncedBooks((prev: SyncedBook[]): SyncedBook[] =>
|
|
prev.map((book: SyncedBook): SyncedBook =>
|
|
selectedBookIds.includes(book.id)
|
|
? {...book, seriesId: response}
|
|
: book
|
|
)
|
|
);
|
|
} else {
|
|
setServerSyncedBooks((prev: SyncedBook[]): SyncedBook[] =>
|
|
prev.map((book: SyncedBook): SyncedBook =>
|
|
selectedBookIds.includes(book.id)
|
|
? {...book, seriesId: response}
|
|
: book
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
if (onSeriesCreated) {
|
|
onSeriesCreated(response, name);
|
|
}
|
|
setIsAddingSeries(false);
|
|
setCloseForm(false);
|
|
} catch (e: unknown) {
|
|
if (e instanceof Error) {
|
|
errorMessage(e.message);
|
|
} else {
|
|
errorMessage(t('addNewSeriesForm.error.addingSeries'));
|
|
}
|
|
setIsAddingSeries(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 flex items-center justify-center bg-black/60 z-50 backdrop-blur-md animate-fadeIn">
|
|
<div ref={modalRef}
|
|
className="bg-tertiary/95 backdrop-blur-sm text-text-primary rounded-2xl border border-secondary/50 shadow-2xl md:w-3/4 xl:w-2/5 lg:w-2/4 sm:w-11/12 max-h-[85vh] flex flex-col">
|
|
<div className="flex justify-between items-center bg-primary px-6 py-4 rounded-t-2xl shadow-lg">
|
|
<h2 className="flex items-center gap-3 font-['ADLaM_Display'] text-2xl text-text-primary">
|
|
<FontAwesomeIcon icon={faLayerGroup} className="w-6 h-6"/>
|
|
{t("addNewSeriesForm.title")}
|
|
</h2>
|
|
<button
|
|
className="text-background hover:text-background w-10 h-10 rounded-xl hover:bg-white/20 transition-all duration-200 flex items-center justify-center hover:scale-110"
|
|
onClick={(): void => setCloseForm(false)}
|
|
>
|
|
<FontAwesomeIcon icon={faX} className={'w-5 h-5'}/>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-5 overflow-y-auto flex-grow custom-scrollbar">
|
|
<div className="space-y-6">
|
|
<InputField icon={faPencilAlt} fieldName={t("addNewSeriesForm.name")} input={
|
|
<TextInput
|
|
value={name}
|
|
setValue={(e: ChangeEvent<HTMLInputElement>): void => setName(e.target.value)}
|
|
placeholder={t("addNewSeriesForm.namePlaceholder")}
|
|
/>
|
|
}/>
|
|
|
|
<InputField
|
|
icon={faPencilAlt}
|
|
fieldName={`${t("addNewSeriesForm.description")} (${t("addNewSeriesForm.optional")})`}
|
|
input={
|
|
<TexteAreaInput
|
|
value={description}
|
|
setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => setDescription(e.target.value)}
|
|
placeholder={t("addNewSeriesForm.descriptionPlaceholder")}
|
|
/>
|
|
}
|
|
/>
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2 text-text-primary">
|
|
<FontAwesomeIcon icon={faBook} className="w-4 h-4 text-primary"/>
|
|
<span className="font-medium">{t("addNewSeriesForm.selectBooks")}</span>
|
|
{selectedBookIds.length > 0 && (
|
|
<span className="text-sm text-muted">
|
|
({selectedBookIds.length} {t("addNewSeriesForm.selected")})
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{(isCurrentlyOffline() ? localSyncedBooks : serverSyncedBooks)
|
|
.filter((book: SyncedBook): boolean => !booksAlreadyInSeries.has(book.id)).length === 0 ? (
|
|
<div className="text-center py-6 text-muted">
|
|
<FontAwesomeIcon icon={faBook} className="w-8 h-8 mb-2 opacity-50"/>
|
|
<p>{t("addNewSeriesForm.noBooks")}</p>
|
|
</div>
|
|
) : (
|
|
<div className="max-h-48 overflow-y-auto rounded-xl border border-secondary/50 bg-secondary/20">
|
|
{(isCurrentlyOffline() ? localSyncedBooks : serverSyncedBooks)
|
|
.filter((book: SyncedBook): boolean => !booksAlreadyInSeries.has(book.id))
|
|
.map((book: SyncedBook) => {
|
|
const isSelected: boolean = selectedBookIds.includes(book.id);
|
|
return (
|
|
<button
|
|
key={book.id}
|
|
type="button"
|
|
onClick={(): void => toggleBookSelection(book.id)}
|
|
className={`w-full flex items-center gap-3 px-4 py-3 transition-all duration-200 border-b border-secondary/30 last:border-b-0 ${
|
|
isSelected
|
|
? 'bg-primary/20 hover:bg-primary/30'
|
|
: 'hover:bg-secondary/50'
|
|
}`}
|
|
>
|
|
<div className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-all ${
|
|
isSelected
|
|
? 'bg-primary border-primary'
|
|
: 'border-secondary/50'
|
|
}`}>
|
|
{isSelected && (
|
|
<FontAwesomeIcon icon={faCheck} className="w-3 h-3 text-white"/>
|
|
)}
|
|
</div>
|
|
<div className="flex-1 text-left">
|
|
<div className="text-text-primary font-medium">{book.title}</div>
|
|
{book.subTitle && (
|
|
<div className="text-sm text-muted">{book.subTitle}</div>
|
|
)}
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="flex justify-between items-center p-5 border-t border-secondary/50 bg-secondary/20 rounded-b-2xl">
|
|
<div></div>
|
|
<div className="flex gap-3">
|
|
<CancelButton callBackFunction={() => setCloseForm(false)}/>
|
|
<SubmitButtonWLoading
|
|
callBackAction={handleAddSeries}
|
|
isLoading={isAddingSeries}
|
|
text={t("addNewSeriesForm.add")}
|
|
loadingText={t("addNewSeriesForm.adding")}
|
|
icon={faLayerGroup}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|