Add components for Act management and integrate Electron setup

components/book/settings/story/StorySetting.tsx

@@ -0,0 +1,167 @@
+'use client'
+
+import React, {createContext, forwardRef, useContext, useEffect, useImperativeHandle, useState} from 'react';
+import {BookContext} from '@/context/BookContext';
+import {SessionContext} from '@/context/SessionContext';
+import {AlertContext} from '@/context/AlertContext';
+import System from '@/lib/models/System';
+import {Act as ActType, Issue} from '@/lib/models/Book';
+import {ActChapter, ChapterListProps} from '@/lib/models/Chapter';
+import MainChapter from "@/components/book/settings/story/MainChapter";
+import Issues from "@/components/book/settings/story/Issue";
+import Act from "@/components/book/settings/story/Act";
+import {useTranslations} from "next-intl";
+import {LangContext, LangContextProps} from "@/context/LangContext";
+
+export const StoryContext = createContext<{
+    acts: ActType[];
+    setActs: React.Dispatch<React.SetStateAction<ActType[]>>;
+    mainChapters: ChapterListProps[];
+    setMainChapters: React.Dispatch<React.SetStateAction<ChapterListProps[]>>;
+    issues: Issue[];
+    setIssues: React.Dispatch<React.SetStateAction<Issue[]>>;
+}>({
+    acts: [],
+    setActs: (): void => {
+    },
+    mainChapters: [],
+    setMainChapters: (): void => {
+    },
+    issues: [],
+    setIssues: (): void => {
+    },
+});
+
+interface StoryFetchData {
+    mainChapter: ChapterListProps[];
+    acts: ActType[];
+    issues: Issue[];
+}
+
+export function Story(props: any, ref: any) {
+    const t = useTranslations();
+    const {lang} = useContext<LangContextProps>(LangContext);
+    const {book} = useContext(BookContext);
+    const bookId: string = book?.bookId ? book.bookId.toString() : '';
+    const {session} = useContext(SessionContext);
+    const userToken: string = session.accessToken;
+    const {errorMessage, successMessage} = useContext(AlertContext);
+    
+    const [acts, setActs] = useState<ActType[]>([]);
+    const [issues, setIssues] = useState<Issue[]>([]);
+    const [mainChapters, setMainChapters] = useState<ChapterListProps[]>([]);
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+    
+    useImperativeHandle(ref, function () {
+        return {
+            handleSave: handleSave
+        };
+    });
+    
+    useEffect((): void => {
+        getStoryData().then();
+    }, [userToken]);
+    
+    useEffect((): void => {
+        cleanupDeletedChapters();
+    }, [mainChapters]);
+    
+    async function getStoryData(): Promise<void> {
+        try {
+            const response: StoryFetchData = await System.authGetQueryToServer<StoryFetchData>(`book/story`, userToken, lang, {
+                bookid: bookId,
+            });
+            if (response) {
+                setActs(response.acts);
+                setMainChapters(response.mainChapter);
+                setIssues(response.issues);
+                setIsLoading(false);
+            }
+        } catch (e: unknown) {
+            setIsLoading(false);
+            if (e instanceof Error) {
+                errorMessage(e.message);
+            } else {
+                errorMessage(t("story.errorUnknownFetch"));
+            }
+        }
+    }
+    
+    function cleanupDeletedChapters(): void {
+        const existingChapterIds: string[] = mainChapters.map(ch => ch.chapterId);
+        
+        const updatedActs = acts.map((act: ActType) => {
+            const filteredChapters: ActChapter[] = act.chapters?.filter((chapter: ActChapter): boolean =>
+                existingChapterIds.includes(chapter.chapterId)) || [];
+            const updatedIncidents = act.incidents?.map(incident => {
+                return {
+                    ...incident,
+                    chapters: incident.chapters?.filter(chapter =>
+                        existingChapterIds.includes(chapter.chapterId)) || []
+                };
+            }) || [];
+            const updatedPlotPoints = act.plotPoints?.map(plotPoint => {
+                return {
+                    ...plotPoint,
+                    chapters: plotPoint.chapters?.filter(chapter =>
+                        existingChapterIds.includes(chapter.chapterId)) || []
+                };
+            }) || [];
+            return {
+                ...act,
+                chapters: filteredChapters,
+                incidents: updatedIncidents,
+                plotPoints: updatedPlotPoints,
+            };
+        });
+        setActs(updatedActs);
+    }
+    
+    async function handleSave(): Promise<void> {
+        try {
+            const response: boolean =
+                await System.authPostToServer<boolean>('book/story', {
+                    bookId,
+                    acts,
+                    mainChapters,
+                    issues,
+                }, userToken, lang);
+            if (!response) {
+                errorMessage(t("story.errorSave"))
+            }
+            successMessage(t("story.successSave"));
+        } catch (e: unknown) {
+            if (e instanceof Error) {
+                errorMessage(e.message);
+            } else {
+                errorMessage(t("story.errorUnknownSave"));
+            }
+        }
+    }
+    
+    return (
+        <StoryContext.Provider
+            value={{
+                acts,
+                setActs,
+                mainChapters,
+                setMainChapters,
+                issues,
+                setIssues,
+            }}>
+            <div className="flex flex-col h-full">
+                <div className="flex-grow overflow-auto py-4">
+                    <div className="space-y-6 px-4">
+                        <MainChapter chapters={mainChapters} setChapters={setMainChapters}/>
+                        <div className="space-y-4">
+                            <Act acts={acts} setActs={setActs} mainChapters={mainChapters}/>
+                        </div>
+                        <Issues issues={issues} setIssues={setIssues}/>
+                    </div>
+                </div>
+            </div>
+        </StoryContext.Provider>
+    );
+}
+
+export default forwardRef(Story);