@hed-hog/lms 0.0.305 → 0.0.309

package/hedhog/frontend/app/courses/[id]/structure/_data/use-course-structure-query.ts.ejs

@@ -0,0 +1,86 @@
+'use client';
+
+/**
+ * useCourseStructureQuery
+ *
+ * React Query hook that fetches the course structure from the real API,
+ * normalises the response via the adapter, and returns the flat arrays
+ * of sessions and lessons together with standard query state flags.
+ *
+ * This hook does NOT touch the Zustand store. The page is responsible for
+ * calling `setStructureFromApi` once data is available so that all
+ * store-driven mutations (drag-and-drop, rename, inline-edit, etc.) keep
+ * working during this first integration phase.
+ */
+
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+
+import type { Course, Lesson, Session } from '../_components/types';
+import { normalizeStructureResponse } from './adapters/course-structure.adapter';
+import { getCourseStructure } from './services/course-structure.service';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Query key factory (stable reference for invalidation / setQueryData)
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const courseStructureQueryKey = (courseId: string) =>
+  ['course-structure', courseId] as const;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Cache data shape (matches the normalised response)
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface CourseStructureCacheData {
+  course: Course | null;
+  sessions: Session[];
+  lessons: Lesson[];
+  instructors: { id: number; name: string }[];
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Return type
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface CourseStructureQueryResult {
+  course: Course | null;
+  sessions: Session[];
+  lessons: Lesson[];
+  instructors: { id: number; name: string }[];
+  isLoading: boolean;
+  isFetching: boolean;
+  isError: boolean;
+  error: unknown;
+  refetch: () => void;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Hook
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function useCourseStructureQuery(
+  courseId: string
+): CourseStructureQueryResult {
+  const { request } = useApp();
+
+  const { data, isLoading, isFetching, isError, error, refetch } = useQuery({
+    queryKey: courseStructureQueryKey(courseId),
+    enabled: Boolean(courseId),
+    retry: 1,
+    queryFn: async () => {
+      const raw = await getCourseStructure(request, courseId);
+      return normalizeStructureResponse(raw);
+    },
+  });
+
+  return {
+    course: data?.course ?? null,
+    sessions: data?.sessions ?? [],
+    lessons: data?.lessons ?? [],
+    instructors: data?.instructors ?? [],
+    isLoading,
+    isFetching,
+    isError,
+    error,
+    refetch,
+  };
+}

package/hedhog/frontend/app/courses/[id]/structure/_data/use-course-structure.ts.ejs

@@ -0,0 +1,160 @@
+'use client';
+
+/**
+ * useCourseStructure
+ *
+ * Data hook for the Course Structure screen.
+ *
+ * ┌─────────────────────────────────────────────────────────────────────────┐
+ * │  CURRENT IMPLEMENTATION — mock (Zustand store with seeded local data)  │
+ * │                                                                         │
+ * │  HOW TO INTEGRATE WITH THE REAL API (React Query):                      │
+ * │                                                                         │
+ * │  Step 1 – Replace the query stubs with a real useQuery call:            │
+ * │    const { data, isLoading, isError, isFetching } = useQuery({          │
+ * │      queryKey: ['course-structure', courseId],                           │
+ * │      queryFn: () =>                                                      │
+ * │        apiClient.get<CourseStructureResponse>(                           │
+ * │          `/lms/courses/${courseId}/structure`                            │
+ * │        ),                                                                │
+ * │    });                                                                   │
+ * │                                                                         │
+ * │  Step 2 – Replace each mutation stub with useMutation:                  │
+ * │    const createSection = useMutation({                                   │
+ * │      mutationFn: () =>                                                   │
+ * │        apiClient.post(`/lms/courses/${courseId}/sessions`),              │
+ * │      onSuccess: () =>                                                    │
+ * │        queryClient.invalidateQueries(['course-structure', courseId]),    │
+ * │    });                                                                   │
+ * │                                                                         │
+ * │  Step 3 – Move course/sessions/lessons out of the Zustand store;        │
+ * │    derive them from the query cache. Keep UI-only fields in the store:  │
+ * │    selectedIds, expandedIds, filterQuery, clipboard, rename, dialogs.   │
+ * │                                                                         │
+ * │  Step 4 – Track isDirty / isSaving from mutation.isPending.             │
+ * └─────────────────────────────────────────────────────────────────────────┘
+ */
+
+import { useStructureStore } from '../_components/store';
+import type { CourseStructureHook } from './course-structure-contract';
+
+/**
+ * @param _courseId - Course ID from the URL. Unused in the mock implementation
+ *                    but required by the future React Query call.
+ *                    TODO[API]: pass to queryKey + queryFn.
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useCourseStructure(_courseId: string): CourseStructureHook {
+  // ── Data ─────────────────────────────────────────────────────────────────
+  // TODO[API]: Replace the three lines below with `data` from useQuery,
+  //            then flatten `data.sessions` (each with nested lessons) into
+  //            separate arrays before returning.
+  const course = useStructureStore((s) => s.course);
+  const sessions = useStructureStore((s) => s.sessions);
+  const lessons = useStructureStore((s) => s.lessons);
+
+  // ── Store actions ────────────────────────────────────────────────────────
+  // TODO[API]: Each action below will become a useMutation call.
+  //            Keep the same function signature so call sites don't change.
+  const storeUpdateCourse = useStructureStore((s) => s.updateCourse);
+  const storeAddSession = useStructureStore((s) => s.addSession);
+  const storeUpdateSession = useStructureStore((s) => s.updateSession);
+  const storeDeleteSession = useStructureStore((s) => s.deleteSession);
+  const storeReorderSessions = useStructureStore((s) => s.reorderSessions);
+  const storeDuplicateSession = useStructureStore((s) => s.duplicateSession);
+  const storeAddLesson = useStructureStore((s) => s.addLesson);
+  const storeUpdateLesson = useStructureStore((s) => s.updateLesson);
+  const storeDeleteLesson = useStructureStore((s) => s.deleteLesson);
+  const storeMoveLesson = useStructureStore((s) => s.moveLesson);
+  const storeDuplicateLesson = useStructureStore((s) => s.duplicateLesson);
+  const storeDeleteSelected = useStructureStore((s) => s.deleteSelected);
+  const storeDuplicateSelected = useStructureStore((s) => s.duplicateSelected);
+  const storeMoveLessons = useStructureStore((s) => s.moveLessons);
+  const storeCopyItems = useStructureStore((s) => s.copyItems);
+  const storePasteSessions = useStructureStore((s) => s.pasteSessions);
+  const storePasteLessons = useStructureStore((s) => s.pasteLessons);
+
+  return {
+    // ── Query state stubs ───────────────────────────────────────────────────
+    // TODO[API]: Replace with { isLoading, isError, isFetching } from useQuery
+    isLoading: false,
+    isError: false,
+    isFetching: false,
+
+    // TODO[API]: isDirty = local state diverges from server snapshot
+    //            isSaving = any mutation.isPending === true
+    isDirty: false,
+    isSaving: false,
+
+    // ── Data ─────────────────────────────────────────────────────────────
+    course,
+    sessions,
+    lessons,
+
+    // ── Course ────────────────────────────────────────────────────────────
+    // TODO[API]: PUT /lms/courses/:id
+    updateCourse: storeUpdateCourse,
+
+    saveOrder() {
+      // TODO[API]: Build SaveOrderRequest from current sessions/lessons order,
+      //            then call:
+      //   apiClient.put(`/lms/courses/${courseId}/order`, payload)
+      //   .then(() => toast.success('Ordem salva'))
+      //   .catch(() => toast.error('Erro ao salvar ordem'));
+      //
+      // For now this is a no-op — order is kept only in local state.
+    },
+
+    // ── Sections (sessions) ──────────────────────────────────────────────
+    // TODO[API]: POST /lms/courses/:id/sessions
+    createSection: () => {
+      storeAddSession();
+    },
+
+    // TODO[API]: PUT /lms/sessions/:id
+    updateSection: (id, data) => storeUpdateSession(id, data),
+
+    // TODO[API]: DELETE /lms/sessions/:id
+    deleteSection: (id) => storeDeleteSession(id),
+
+    // TODO[API]: PUT /lms/sessions/reorder  { sessions: [{id, order}] }
+    reorderSections: storeReorderSessions,
+
+    // TODO[API]: POST /lms/sessions/:id/duplicate
+    duplicateSection: (id) => storeDuplicateSession(id),
+
+    // ── Lessons ──────────────────────────────────────────────────────────
+    // TODO[API]: POST /lms/sessions/:sessionId/lessons
+    createLesson: (sessionId) => {
+      storeAddLesson(sessionId);
+    },
+
+    // TODO[API]: PUT /lms/lessons/:id
+    updateLesson: (id, data) => storeUpdateLesson(id, data),
+
+    // TODO[API]: DELETE /lms/lessons/:id
+    deleteLesson: (id) => storeDeleteLesson(id),
+
+    // TODO[API]: PUT /lms/lessons/:id/move  { toSessionId, toIndex }
+    moveLesson: (lessonId, toSessionId, toIndex) =>
+      storeMoveLesson(lessonId, toSessionId, toIndex ?? 0),
+
+    // TODO[API]: POST /lms/lessons/:id/duplicate
+    duplicateLesson: (id) => storeDuplicateLesson(id),
+
+    // ── Bulk ─────────────────────────────────────────────────────────────
+    // TODO[API]: fire one DELETE per selected id (or a batch endpoint)
+    deleteSelected: storeDeleteSelected,
+
+    // TODO[API]: fire one POST .../duplicate per selected id
+    duplicateSelected: storeDuplicateSelected,
+
+    // TODO[API]: fire one PUT /lms/lessons/:id/move per lessonId
+    moveLessons: (ids, toSessionId) => storeMoveLessons(ids, toSessionId),
+
+    // ── Clipboard (client-only — no API equivalent) ──────────────────────
+    copyItems: (ids, type) => storeCopyItems(ids, type),
+    pasteSessions: storePasteSessions,
+    pasteLessons: (toSessionId) => storePasteLessons(toSessionId),
+  };
+}