UNPKG

analytica-frontend-lib

Version:

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

1 lines 4.21 kB
{"version":3,"sources":["../src/hooks/useDraftAutoSave.ts"],"sourcesContent":["import { useEffect, useMemo } from 'react';\nimport {\n useQuizStore,\n DraftApiClient,\n DraftAnswerItem,\n SaveDraftPayload,\n} from '../components/Quiz/useQuizStore';\n\n/**\n * API client interface that the hook accepts\n * Compatible with axios-like clients\n */\nexport interface ApiClient {\n post: <T = unknown>(url: string, data?: unknown) => Promise<{ data: T }>;\n get: <T = unknown>(url: string) => Promise<{ data: T }>;\n}\n\n/**\n * Options for the useDraftAutoSave hook\n */\nexport interface UseDraftAutoSaveOptions {\n /** The API client (axios instance or similar) */\n apiClient: ApiClient;\n /** Whether draft auto-save is enabled (typically true for ATIVIDADE, false for SIMULADO) */\n enabled: boolean;\n /** Optional: custom endpoint pattern. Default: '/activities/{activityId}/draft' */\n endpoint?: string;\n}\n\n/**\n * Hook that sets up automatic draft saving for the quiz.\n *\n * Features:\n * - Saves draft when navigating between questions (Avançar/Voltar)\n * - Saves draft when page visibility changes (tab switch, minimize)\n * - Loads and applies existing drafts when quiz starts\n *\n * @example\n * ```tsx\n * // In your QuizWrapper component:\n * useDraftAutoSave({\n * apiClient: api, // your axios instance\n * enabled: quizType === QUIZ_TYPE.ATIVIDADE,\n * });\n * ```\n */\nexport function useDraftAutoSave({\n apiClient,\n enabled,\n endpoint = '/activities/{activityId}/draft',\n}: UseDraftAutoSaveOptions): void {\n const { setDraftApiClient, saveDraft } = useQuizStore();\n\n // Create draft API client\n const draftApiClient: DraftApiClient = useMemo(\n () => ({\n saveDraft: async (activityId: string, payload: SaveDraftPayload) => {\n const url = endpoint.replace('{activityId}', activityId);\n await apiClient.post(url, payload);\n return { success: true };\n },\n loadDraft: async (activityId: string) => {\n const url = endpoint.replace('{activityId}', activityId);\n const response = await apiClient.get<{\n data?: { hasDraft: boolean; answers: DraftAnswerItem[] };\n }>(url);\n const data = response.data?.data;\n return data\n ? {\n hasDraft: data.hasDraft,\n answers: data.answers || [],\n }\n : null;\n },\n }),\n [apiClient, endpoint]\n );\n\n // Configure draft API client based on enabled state\n useEffect(() => {\n if (enabled) {\n setDraftApiClient(draftApiClient);\n } else {\n setDraftApiClient(null);\n }\n\n return () => {\n setDraftApiClient(null);\n };\n }, [enabled, draftApiClient, setDraftApiClient]);\n\n // Save draft when page visibility changes\n useEffect(() => {\n if (!enabled) return;\n\n const handleVisibilityChange = () => {\n if (document.visibilityState === 'hidden') {\n saveDraft();\n }\n };\n\n document.addEventListener('visibilitychange', handleVisibilityChange);\n return () =>\n document.removeEventListener('visibilitychange', handleVisibilityChange);\n }, [enabled, saveDraft]);\n}\n"],"mappings":";;;;;AAAA,SAAS,WAAW,eAAe;AA8C5B,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAAkC;AAChC,QAAM,EAAE,mBAAmB,UAAU,IAAI,aAAa;AAGtD,QAAM,iBAAiC;AAAA,IACrC,OAAO;AAAA,MACL,WAAW,OAAO,YAAoB,YAA8B;AAClE,cAAM,MAAM,SAAS,QAAQ,gBAAgB,UAAU;AACvD,cAAM,UAAU,KAAK,KAAK,OAAO;AACjC,eAAO,EAAE,SAAS,KAAK;AAAA,MACzB;AAAA,MACA,WAAW,OAAO,eAAuB;AACvC,cAAM,MAAM,SAAS,QAAQ,gBAAgB,UAAU;AACvD,cAAM,WAAW,MAAM,UAAU,IAE9B,GAAG;AACN,cAAM,OAAO,SAAS,MAAM;AAC5B,eAAO,OACH;AAAA,UACE,UAAU,KAAK;AAAA,UACf,SAAS,KAAK,WAAW,CAAC;AAAA,QAC5B,IACA;AAAA,MACN;AAAA,IACF;AAAA,IACA,CAAC,WAAW,QAAQ;AAAA,EACtB;AAGA,YAAU,MAAM;AACd,QAAI,SAAS;AACX,wBAAkB,cAAc;AAAA,IAClC,OAAO;AACL,wBAAkB,IAAI;AAAA,IACxB;AAEA,WAAO,MAAM;AACX,wBAAkB,IAAI;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,SAAS,gBAAgB,iBAAiB,CAAC;AAG/C,YAAU,MAAM;AACd,QAAI,CAAC,QAAS;AAEd,UAAM,yBAAyB,MAAM;AACnC,UAAI,SAAS,oBAAoB,UAAU;AACzC,kBAAU;AAAA,MACZ;AAAA,IACF;AAEA,aAAS,iBAAiB,oBAAoB,sBAAsB;AACpE,WAAO,MACL,SAAS,oBAAoB,oBAAoB,sBAAsB;AAAA,EAC3E,GAAG,CAAC,SAAS,SAAS,CAAC;AACzB;","names":[]}