Move DynamicMdProvider to layout.tsx for sidebar access

Co-authored-by: na-trium-144 <100704180+na-trium-144@users.noreply.github.com>

Author: Copilot

app/[docs_id]/dynamicMdContext.tsx

@@ -26,13 +26,11 @@ export function useDynamicMdContextOptional() {
 
 export function DynamicMdProvider({
   children,
-  initialContent,
 }: {
   children: ReactNode;
-  initialContent: DynamicMarkdownSection[];
 }) {
   const [dynamicMdContent, setDynamicMdContent] =
-    useState<DynamicMarkdownSection[]>(initialContent);
+    useState<DynamicMarkdownSection[]>([]);
 
   return (
     <DynamicMdContext.Provider value={{ dynamicMdContent, setDynamicMdContent }}>

app/[docs_id]/page.tsx

@@ -6,7 +6,6 @@ import { MarkdownSection, splitMarkdown } from "./splitMarkdown";
 import pyodideLock from "pyodide/pyodide-lock.json";
 import { PageContent } from "./pageContent";
 import { ChatHistoryProvider } from "./chatHistory";
-import { DynamicMdProvider } from "./dynamicMdContext";
 import { getChat } from "@/lib/chatHistory";
 
 export default async function Page({
@@ -53,21 +52,13 @@ export default async function Page({
 
   const initialChatHistories = getChat(docs_id);
 
-  const initialDynamicMdContent = (await splitMdContent).map((section, i) => ({
-    ...section,
-    inView: false,
-    sectionId: `${docs_id}-${i}`,
-  }));
-
   return (
     <ChatHistoryProvider initialChatHistories={await initialChatHistories}>
-      <DynamicMdProvider initialContent={initialDynamicMdContent}>
-        <PageContent
-          documentContent={await mdContent}
-          splitMdContent={await splitMdContent}
-          docs_id={docs_id}
-        />
-      </DynamicMdProvider>
+      <PageContent
+        documentContent={await mdContent}
+        splitMdContent={await splitMdContent}
+        docs_id={docs_id}
+      />
     </ChatHistoryProvider>
   );
 }

app/[docs_id]/pageContent.tsx

@@ -20,17 +20,28 @@ interface PageContentProps {
   docs_id: string;
 }
 export function PageContent(props: PageContentProps) {
-  const { dynamicMdContent, setDynamicMdContent } = useDynamicMdContext();
+  const { setDynamicMdContent } = useDynamicMdContext();
+  
+  // SSR用のローカルstate
+  const [localDynamicMdContent, setLocalDynamicMdContent] = useState<
+    DynamicMarkdownSection[]
+  >(
+    props.splitMdContent.map((section, i) => ({
+      ...section,
+      inView: false,
+      sectionId: `${props.docs_id}-${i}`,
+    }))
+  );
 
   useEffect(() => {
-    // props.splitMdContentが変わったときにdynamicMdContentを更新
-    setDynamicMdContent(
-      props.splitMdContent.map((section, i) => ({
-        ...section,
-        inView: false,
-        sectionId: `${props.docs_id}-${i}`,
-      }))
-    );
+    // props.splitMdContentが変わったときにローカルstateとcontextの両方を更新
+    const newContent = props.splitMdContent.map((section, i) => ({
+      ...section,
+      inView: false,
+      sectionId: `${props.docs_id}-${i}`,
+    }));
+    setLocalDynamicMdContent(newContent);
+    setDynamicMdContent(newContent);
   }, [props.splitMdContent, props.docs_id, setDynamicMdContent]);
 
   const sectionRefs = useRef<Array<HTMLDivElement | null>>([]);
@@ -41,7 +52,7 @@ export function PageContent(props: PageContentProps) {
 
   useEffect(() => {
     const handleScroll = () => {
-      setDynamicMdContent((prevDynamicMdContent) => {
+      const updateContent = (prevDynamicMdContent: DynamicMarkdownSection[]) => {
         const dynMdContent = prevDynamicMdContent.slice(); // Reactの変更検知のために新しい配列を作成
         for (let i = 0; i < sectionRefs.current.length; i++) {
           if (sectionRefs.current.at(i) && dynMdContent.at(i)) {
@@ -51,7 +62,11 @@ export function PageContent(props: PageContentProps) {
           }
         }
         return dynMdContent;
-      });
+      };
+      
+      // ローカルstateとcontextの両方を更新
+      setLocalDynamicMdContent(updateContent);
+      setDynamicMdContent(updateContent);
     };
     window.addEventListener("scroll", handleScroll);
     handleScroll();
@@ -71,7 +86,7 @@ export function PageContent(props: PageContentProps) {
         gridTemplateColumns: `1fr auto`,
       }}
     >
-      {dynamicMdContent.map((section, index) => (
+      {localDynamicMdContent.map((section, index) => (
         <>
           <div
             className="max-w-200"
@@ -127,7 +142,7 @@ export function PageContent(props: PageContentProps) {
         <div className="fixed bottom-4 right-4 left-4 lg:left-84 z-20">
           <ChatForm
             documentContent={props.documentContent}
-            sectionContent={dynamicMdContent}
+            sectionContent={localDynamicMdContent}
             docs_id={props.docs_id}
             close={() => setIsFormVisible(false)}
           />

app/layout.tsx

@@ -9,6 +9,7 @@ import { PyodideProvider } from "./terminal/python/pyodide";
 import { WandboxProvider } from "./terminal/wandbox/wandbox";
 import { EmbedContextProvider } from "./terminal/embedContext";
 import { AutoAnonymousLogin } from "./accountMenu";
+import { DynamicMdProvider } from "./[docs_id]/dynamicMdContext";
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -22,25 +23,27 @@ export default function RootLayout({
     <html lang="ja">
       <body className="w-screen h-screen">
         <AutoAnonymousLogin />
-        <div className="drawer lg:drawer-open">
-          <input id="drawer-toggle" type="checkbox" className="drawer-toggle" />
-          <div className="drawer-content flex flex-col">
-            <Navbar />
-            <EmbedContextProvider>
-              <PyodideProvider>
-                <WandboxProvider>{children}</WandboxProvider>
-              </PyodideProvider>
-            </EmbedContextProvider>
+        <DynamicMdProvider>
+          <div className="drawer lg:drawer-open">
+            <input id="drawer-toggle" type="checkbox" className="drawer-toggle" />
+            <div className="drawer-content flex flex-col">
+              <Navbar />
+              <EmbedContextProvider>
+                <PyodideProvider>
+                  <WandboxProvider>{children}</WandboxProvider>
+                </PyodideProvider>
+              </EmbedContextProvider>
+            </div>
+            <div className="drawer-side shadow-md z-50">
+              <label
+                htmlFor="drawer-toggle"
+                aria-label="close sidebar"
+                className="drawer-overlay"
+              />
+              <Sidebar />
+            </div>
           </div>
-          <div className="drawer-side shadow-md z-50">
-            <label
-              htmlFor="drawer-toggle"
-              aria-label="close sidebar"
-              className="drawer-overlay"
-            />
-            <Sidebar />
-          </div>
-        </div>
+        </DynamicMdProvider>
       </body>
     </html>
   );

app/sidebar.tsx

@@ -6,31 +6,31 @@ import { splitMarkdown } from "./[docs_id]/splitMarkdown";
 import { pagesList } from "./pagesList";
 import { AccountMenu } from "./accountMenu";
 import { ThemeToggle } from "./[docs_id]/themeToggle";
-import { useDynamicMdContextOptional } from "./[docs_id]/dynamicMdContext";
+import { useDynamicMdContext } from "./[docs_id]/dynamicMdContext";
 
 const fetcher: Fetcher<string, string> = (url) =>
   fetch(url).then((r) => r.text());
 
 export function Sidebar() {
   const pathname = usePathname();
   const docs_id = pathname.replace(/^\//, "");
-  const dynamicMdContextValue = useDynamicMdContextOptional();
+  const { dynamicMdContent } = useDynamicMdContext();
 
-  // コンテキストが利用可能な場合はそれを使用し、そうでない場合はフェッチする
+  // コンテキストが空の場合（まだページがロードされていない場合）はフェッチする
   const { data, error, isLoading } = useSWR(
-    dynamicMdContextValue ? null : `/docs/${docs_id}.md`,
+    dynamicMdContent.length === 0 ? `/docs/${docs_id}.md` : null,
     fetcher
   );
 
   if (error) console.error("Sidebar fetch error:", error);
 
   // コンテキストがある場合はそれを使用、ない場合はフェッチしたデータを使用
-  const splitmdcontent = dynamicMdContextValue?.dynamicMdContent ?? splitMarkdown(data ?? "");
+  const splitmdcontent = dynamicMdContent.length > 0 ? dynamicMdContent : splitMarkdown(data ?? "");
 
   // 現在表示中のセクション（最初にinViewがtrueのもの）を見つける
-  const currentSectionIndex = dynamicMdContextValue?.dynamicMdContent.findIndex(
+  const currentSectionIndex = dynamicMdContent.findIndex(
     (section) => section.inView
-  ) ?? -1;
+  );
   return (
     <div className="bg-base-200 h-full w-80 overflow-y-auto">
       {/* todo: 背景色ほんとにこれでいい？ */}