client vs server render issues

nextjs/src/app/api/canvas/[...rest]/route.ts

@@ -44,7 +44,7 @@ const proxyResponseHeaders = (response: any) => {
 };
 
 export async function GET(
-  req: NextRequest,
+  _req: NextRequest,
   { params }: { params: { rest: string[] } }
 ) {
   return withErrorHandling(async () => {
@@ -58,7 +58,12 @@ export async function GET(
         url.toString()
       );
 
-      var returnData = firstData ? [firstData] : [];
+      if(!Array.isArray(firstData))
+      {
+        return NextResponse.json(firstData)
+      }
+
+      var returnData = firstData;
       var nextUrl = getNextUrl(firstHeaders);
 
       while (nextUrl) {
@@ -77,6 +82,7 @@ export async function GET(
       }
 
       return NextResponse.json(returnData);
+
     } catch (error: any) {
       return new NextResponse(
         JSON.stringify({ error: error.message || "Canvas GET request failed" }),

nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx

@@ -1,3 +1,4 @@
+"use client";
 import {
   useAssignmentNamesQuery,
   useAssignmentsQueries,
@@ -12,9 +13,15 @@ import {
 } from "@/hooks/localCourse/quizHooks";
 import { IModuleItem } from "@/models/local/IModuleItem";
 import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
-import { useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import Modal from "../../../../components/Modal";
 import NewItemForm from "./NewItemForm";
+import { useCanvasModulesQuery } from "@/hooks/canvas/canvasModuleHooks";
+import { Spinner } from "@/components/Spinner";
+import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling";
+import { isServer } from "@tanstack/react-query";
+import { ModuleCanvasStatus } from "./ModuleCanvasStatus";
+import ClientOnly from "@/components/ClientOnly";
 
 export default function ExpandableModule({
   moduleName,
@@ -66,11 +73,14 @@ export default function ExpandableModule({
   return (
     <div className="bg-slate-800 rounded-lg p-3 border border-slate-600 mb-3">
       <div
-        className="font-bold "
+        className="font-bold flex flex-row justify-between "
         role="button"
         onClick={() => setExpanded((e) => !e)}
       >
-        {moduleName}
+        <div>{moduleName}</div>
+        <ClientOnly>
+          <ModuleCanvasStatus moduleName={moduleName} />
+        </ClientOnly>
       </div>
       <div
         className={

nextjs/src/app/course/[courseName]/modules/ModuleCanvasStatus.tsx

@@ -0,0 +1,29 @@
+"use client";
+import { Spinner } from "@/components/Spinner";
+import {
+  useAddCanvasModuleMutation,
+  useCanvasModulesQuery,
+} from "@/hooks/canvas/canvasModuleHooks";
+
+export function ModuleCanvasStatus({ moduleName }: { moduleName: string }) {
+  const { data: canvasModules } = useCanvasModulesQuery();
+  const addToCanvas = useAddCanvasModuleMutation();
+
+  const canvasModule = canvasModules.find((c) => c.name === moduleName);
+
+  return (
+    <div className="text-slate-400 text-end">
+      {!canvasModule && <div>Not in Canvas</div>}
+      {!canvasModule && (
+        <button
+          disabled={addToCanvas.isPending}
+          onClick={() => addToCanvas.mutate(moduleName)}
+        >
+          {addToCanvas.isPending ? <Spinner /> : <div>Add</div>}
+        </button>
+      )}
+      {canvasModule && !canvasModule.published && <div>Not Published</div>}
+      {canvasModule && canvasModule.published && <div>Published</div>}
+    </div>
+  );
+}

nextjs/src/app/newCourse/AddNewCourse.tsx

@@ -2,6 +2,7 @@
 import React, { useState } from "react";
 import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling";
 import NewCourseForm from "./NewCourseForm";
+import ClientOnly from "@/components/ClientOnly";
 
 export default function AddNewCourse() {
   const [showForm, setShowForm] = useState(false);
@@ -13,7 +14,7 @@ export default function AddNewCourse() {
       <div className={" collapsible " + (showForm && "expand")}>
         <div className="border rounded-md p-3 m-3">
           <SuspenseAndErrorHandling>
-            {showForm && <NewCourseForm />}
+            <ClientOnly>{showForm && <NewCourseForm />}</ClientOnly>
           </SuspenseAndErrorHandling>
         </div>
       </div>

nextjs/src/app/page.tsx

@@ -8,8 +8,7 @@ export default async function Home() {
         <CourseList />
         <br />
         <br />
-
-        <AddNewCourse />
+          <AddNewCourse />
       </div>
     </main>
   );