278 lines
14 KiB
TypeScript
278 lines
14 KiB
TypeScript
'use client'
|
|
|
|
import React, {ChangeEvent, useContext, useEffect, useState} from 'react';
|
|
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
|
import {faArrowDown, faArrowUp, faBookmark, faMinus, faPlus, faTrash,} from '@fortawesome/free-solid-svg-icons';
|
|
import {ChapterListProps} from '@/lib/models/Chapter';
|
|
import System from '@/lib/models/System';
|
|
import {BookContext} from '@/context/BookContext';
|
|
import {SessionContext} from '@/context/SessionContext';
|
|
import {AlertContext} from '@/context/AlertContext';
|
|
import AlertBox from "@/components/AlertBox";
|
|
import CollapsableArea from "@/components/CollapsableArea";
|
|
import {useTranslations} from "next-intl";
|
|
import {LangContext} from "@/context/LangContext";
|
|
|
|
interface MainChapterProps {
|
|
chapters: ChapterListProps[];
|
|
setChapters: React.Dispatch<React.SetStateAction<ChapterListProps[]>>;
|
|
}
|
|
|
|
export default function MainChapter({chapters, setChapters}: MainChapterProps) {
|
|
const t = useTranslations();
|
|
const {lang} = useContext(LangContext)
|
|
const {book} = useContext(BookContext);
|
|
const {session} = useContext(SessionContext);
|
|
const {errorMessage, successMessage} = useContext(AlertContext);
|
|
|
|
const bookId: string | undefined = book?.bookId;
|
|
const token: string = session.accessToken;
|
|
|
|
const [newChapterTitle, setNewChapterTitle] = useState<string>('');
|
|
const [newChapterOrder, setNewChapterOrder] = useState<number>(0);
|
|
|
|
const [deleteConfirmMessage, setDeleteConfirmMessage] = useState<boolean>(false);
|
|
const [chapterIdToRemove, setChapterIdToRemove] = useState<string>('');
|
|
|
|
function handleChapterTitleChange(chapterId: string, newTitle: string) {
|
|
const updatedChapters: ChapterListProps[] = chapters.map((chapter: ChapterListProps): ChapterListProps => {
|
|
if (chapter.chapterId === chapterId) {
|
|
return {...chapter, title: newTitle};
|
|
}
|
|
return chapter;
|
|
});
|
|
setChapters(updatedChapters);
|
|
}
|
|
|
|
function moveChapter(index: number, direction: number): void {
|
|
const visibleChapters: ChapterListProps[] = chapters
|
|
.filter((chapter: ChapterListProps): boolean => chapter.chapterOrder !== -1)
|
|
.sort((a: ChapterListProps, b: ChapterListProps): number => (a.chapterOrder || 0) - (b.chapterOrder || 0));
|
|
|
|
const currentChapter: ChapterListProps = visibleChapters[index];
|
|
const allChaptersIndex: number = chapters.findIndex(
|
|
(chapter: ChapterListProps): boolean => chapter.chapterId === currentChapter.chapterId,
|
|
);
|
|
|
|
const updatedChapters: ChapterListProps[] = [...chapters];
|
|
|
|
const currentOrder: number = updatedChapters[allChaptersIndex].chapterOrder || 0;
|
|
const newOrder: number = Math.max(0, currentOrder + direction);
|
|
|
|
updatedChapters[allChaptersIndex] = {
|
|
...updatedChapters[allChaptersIndex],
|
|
chapterOrder: newOrder,
|
|
};
|
|
|
|
setChapters(updatedChapters);
|
|
}
|
|
|
|
function moveChapterUp(index: number): void {
|
|
moveChapter(index, -1);
|
|
}
|
|
|
|
function moveChapterDown(index: number): void {
|
|
moveChapter(index, 1);
|
|
}
|
|
|
|
async function deleteChapter(): Promise<void> {
|
|
try {
|
|
setDeleteConfirmMessage(false);
|
|
const response: boolean = await System.authDeleteToServer<boolean>(
|
|
'chapter/remove',
|
|
{
|
|
bookId,
|
|
chapterId: chapterIdToRemove,
|
|
},
|
|
token,
|
|
lang,
|
|
);
|
|
if (!response) {
|
|
errorMessage(t("mainChapter.errorDelete"));
|
|
}
|
|
const updatedChapters: ChapterListProps[] = chapters.filter((chapter: ChapterListProps): boolean => chapter.chapterId !== chapterIdToRemove,);
|
|
setChapters(updatedChapters);
|
|
} catch (e: unknown) {
|
|
if (e instanceof Error) {
|
|
errorMessage(e.message)
|
|
} else {
|
|
errorMessage(t("mainChapter.errorUnknownDelete"));
|
|
}
|
|
}
|
|
}
|
|
|
|
async function addNewChapter(): Promise<void> {
|
|
if (newChapterTitle.trim() === '') {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const responseId: string = await System.authPostToServer<string>(
|
|
'chapter/add',
|
|
{
|
|
bookId: bookId,
|
|
wordsCount: 0,
|
|
chapterOrder: newChapterOrder ? newChapterOrder : 0,
|
|
title: newChapterTitle,
|
|
},
|
|
token,
|
|
);
|
|
if (!responseId) {
|
|
errorMessage(t("mainChapter.errorAdd"));
|
|
return;
|
|
}
|
|
const newChapter: ChapterListProps = {
|
|
chapterId: responseId as string,
|
|
title: newChapterTitle,
|
|
chapterOrder: newChapterOrder,
|
|
summary: '',
|
|
goal: '',
|
|
};
|
|
setChapters([...chapters, newChapter]);
|
|
setNewChapterTitle('');
|
|
|
|
setNewChapterOrder(newChapterOrder + 1);
|
|
} catch (e: unknown) {
|
|
if (e instanceof Error) {
|
|
errorMessage(e.message)
|
|
} else {
|
|
errorMessage(t("mainChapter.errorUnknownAdd"));
|
|
}
|
|
}
|
|
}
|
|
|
|
function decrementNewChapterOrder(): void {
|
|
if (newChapterOrder > 0) {
|
|
setNewChapterOrder(newChapterOrder - 1);
|
|
}
|
|
}
|
|
|
|
function incrementNewChapterOrder(): void {
|
|
setNewChapterOrder(newChapterOrder + 1);
|
|
}
|
|
|
|
useEffect((): void => {
|
|
const visibleChapters: ChapterListProps[] = chapters
|
|
.filter((chapter: ChapterListProps): boolean => chapter.chapterOrder !== -1)
|
|
.sort((a: ChapterListProps, b: ChapterListProps): number =>
|
|
(a.chapterOrder || 0) - (b.chapterOrder || 0),
|
|
);
|
|
|
|
const nextOrder: number =
|
|
visibleChapters.length > 0
|
|
? (visibleChapters[visibleChapters.length - 1].chapterOrder || 0) + 1
|
|
: 0;
|
|
|
|
setNewChapterOrder(nextOrder);
|
|
}, [chapters]);
|
|
|
|
const visibleChapters: ChapterListProps[] = chapters
|
|
.filter((chapter: ChapterListProps): boolean => chapter.chapterOrder !== -1)
|
|
.sort((a: ChapterListProps, b: ChapterListProps): number => (a.chapterOrder || 0) - (b.chapterOrder || 0));
|
|
|
|
return (
|
|
<div>
|
|
<CollapsableArea icon={faBookmark} title={t("mainChapter.chapters")} children={
|
|
<div className="space-y-4">
|
|
{visibleChapters.length > 0 ? (
|
|
<div>
|
|
{visibleChapters.map((item: ChapterListProps, index: number) => (
|
|
<div key={item.chapterId}
|
|
className="mb-2 bg-secondary/30 rounded-xl p-3 shadow-sm hover:shadow-md transition-all duration-200">
|
|
<div className="flex items-center">
|
|
<span
|
|
className="bg-primary-dark text-white text-sm w-6 h-6 rounded-full text-center leading-6 mr-2">
|
|
{item.chapterOrder !== undefined ? item.chapterOrder : index}
|
|
</span>
|
|
<input
|
|
className="flex-1 text-text-primary text-base px-2 py-1 bg-transparent border-b border-secondary/50 focus:outline-none focus:border-primary transition-colors duration-200"
|
|
value={item.title}
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) => handleChapterTitleChange(item.chapterId, e.target.value)}
|
|
placeholder={t("mainChapter.chapterTitlePlaceholder")}
|
|
/>
|
|
<div className="flex ml-1">
|
|
<button
|
|
className={`p-1.5 mx-0.5 rounded-lg hover:bg-secondary/50 transition-all duration-200 ${
|
|
item.chapterOrder === 0 ? 'text-muted cursor-not-allowed' : 'text-primary hover:scale-110'
|
|
}`}
|
|
onClick={(): void => moveChapterUp(index)}
|
|
disabled={item.chapterOrder === 0}
|
|
>
|
|
<FontAwesomeIcon icon={faArrowUp} size="sm"/>
|
|
</button>
|
|
<button
|
|
className="p-1.5 mx-0.5 rounded-lg text-primary hover:bg-secondary/50 hover:scale-110 transition-all duration-200"
|
|
onClick={(): void => moveChapterDown(index)}
|
|
>
|
|
<FontAwesomeIcon icon={faArrowDown} size="sm"/>
|
|
</button>
|
|
<button
|
|
className="p-1.5 mx-0.5 rounded-lg text-error hover:bg-error/20 hover:scale-110 transition-all duration-200"
|
|
onClick={(): void => {
|
|
setChapterIdToRemove(item.chapterId);
|
|
setDeleteConfirmMessage(true);
|
|
}}
|
|
>
|
|
<FontAwesomeIcon icon={faTrash} size="sm"/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-text-secondary text-center py-2">
|
|
{t("mainChapter.noChapter")}
|
|
</p>
|
|
)}
|
|
|
|
<div className="bg-secondary/30 rounded-xl p-3 mt-3 shadow-sm">
|
|
<div className="flex items-center">
|
|
<div
|
|
className="flex items-center gap-1 bg-secondary/50 rounded-lg mr-2 px-1 py-0.5 shadow-inner">
|
|
<button
|
|
className={`w-6 h-6 rounded-full bg-secondary flex justify-center items-center hover:scale-110 transition-all duration-200 ${
|
|
newChapterOrder <= 0 ? 'text-muted cursor-not-allowed opacity-50' : 'text-primary hover:bg-secondary-dark'
|
|
}`}
|
|
onClick={decrementNewChapterOrder}
|
|
disabled={newChapterOrder <= 0}
|
|
>
|
|
<FontAwesomeIcon icon={faMinus} size="xs"/>
|
|
</button>
|
|
<span
|
|
className="bg-primary-dark text-white text-sm w-6 h-6 rounded-full text-center leading-6 mx-0.5">
|
|
{newChapterOrder}
|
|
</span>
|
|
<button
|
|
className="w-6 h-6 rounded-full bg-secondary flex justify-center items-center text-primary hover:bg-secondary-dark hover:scale-110 transition-all duration-200"
|
|
onClick={incrementNewChapterOrder}
|
|
>
|
|
<FontAwesomeIcon icon={faPlus} size="xs"/>
|
|
</button>
|
|
</div>
|
|
<input
|
|
className="flex-1 text-text-primary text-base px-2 py-1 bg-transparent border-b border-secondary/50 focus:outline-none focus:border-primary transition-colors duration-200 placeholder:text-muted/60"
|
|
value={newChapterTitle}
|
|
onChange={e => setNewChapterTitle(e.target.value)}
|
|
placeholder={t("mainChapter.newChapterPlaceholder")}
|
|
/>
|
|
<button
|
|
className="bg-primary w-9 h-9 rounded-full flex justify-center items-center ml-2 text-text-primary shadow-md hover:shadow-lg hover:scale-110 hover:bg-primary-dark transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
|
|
onClick={addNewChapter}
|
|
disabled={newChapterTitle.trim() === ''}
|
|
>
|
|
<FontAwesomeIcon icon={faPlus} className={'w-5 h-5'}/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}/>
|
|
{
|
|
deleteConfirmMessage &&
|
|
<AlertBox title={t("mainChapter.deleteTitle")} message={t("mainChapter.deleteMessage")}
|
|
type={"danger"} onConfirm={deleteChapter}
|
|
onCancel={(): void => setDeleteConfirmMessage(false)}/>
|
|
}
|
|
</div>
|
|
);
|
|
} |