All files / web/src/hooks useTeacherFlowcharts.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useRouter } from 'next/navigation'
import { api } from '@/lib/queryClient'
import { flowchartKeys } from '@/lib/queryKeys'

export interface TeacherFlowchart {
  id: string
  title: string
  description: string | null
  emoji: string
  difficulty: string | null
  status: 'draft' | 'published' | 'archived'
  version: number
  createdAt: string
  updatedAt: string
  publishedAt: string | null
}

async function fetchMyFlowcharts(): Promise<TeacherFlowchart[]> {
  const res = await api('teacher-flowcharts')
  if (!res.ok) throw new Error('Failed to fetch flowcharts')
  const data = await res.json()
  return data.flowcharts ?? []
}

export function useMyFlowcharts() {
  return useQuery({
    queryKey: flowchartKeys.mine(),
    queryFn: fetchMyFlowcharts,
  })
}

export function usePublishFlowchart() {
  const queryClient = useQueryClient()
  return useMutation({
    mutationFn: async (id: string) => {
      const res = await api(`teacher-flowcharts/${id}/publish`, { method: 'POST' })
      if (!res.ok) throw new Error('Failed to publish')
      const data = await res.json()
      return data.flowchart as TeacherFlowchart
    },
    onSuccess: (updated) => {
      queryClient.setQueryData<TeacherFlowchart[]>(
        flowchartKeys.mine(),
        (prev) => prev?.map((f) => (f.id === updated.id ? updated : f)) ?? []
      )
    },
  })
}

export function useUnpublishFlowchart() {
  const queryClient = useQueryClient()
  return useMutation({
    mutationFn: async (id: string) => {
      const res = await api(`teacher-flowcharts/${id}/unpublish`, { method: 'POST' })
      if (!res.ok) throw new Error('Failed to unpublish')
      const data = await res.json()
      return data.flowchart as TeacherFlowchart
    },
    onSuccess: (updated) => {
      queryClient.setQueryData<TeacherFlowchart[]>(
        flowchartKeys.mine(),
        (prev) => prev?.map((f) => (f.id === updated.id ? updated : f)) ?? []
      )
    },
  })
}

export function useDeleteFlowchart() {
  const queryClient = useQueryClient()
  return useMutation({
    mutationFn: async (id: string) => {
      const res = await api(`teacher-flowcharts/${id}`, { method: 'DELETE' })
      if (!res.ok) throw new Error('Failed to archive')
      return id
    },
    onSuccess: (id) => {
      queryClient.setQueryData<TeacherFlowchart[]>(
        flowchartKeys.mine(),
        (prev) => prev?.filter((f) => f.id !== id) ?? []
      )
    },
  })
}

export function useEditFlowchart() {
  const router = useRouter()
  return useMutation({
    mutationFn: async (id: string) => {
      const res = await api('flowchart-workshop/sessions', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ flowchartId: id }),
      })
      if (!res.ok) throw new Error('Failed to create edit session')
      const data = await res.json()
      return data.session.id as string
    },
    onSuccess: (sessionId) => {
      router.push(`/flowchart/workshop/${sessionId}`)
    },
  })
}