@hed-hog/tag 0.0.304 → 0.0.306

package/hedhog/frontend/app/page.tsx.ejs

@@ -47,12 +47,16 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet';
 import { useDebounce } from '@/hooks/use-debounce';
+import { useFormDraft } from '@/hooks/use-form-draft';
+import { formatDateTime } from '@/lib/format-date';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { formatDistanceToNow } from 'date-fns';
+import { enUS, ptBR } from 'date-fns/locale';
 import { Edit, Save, Tag as TagIcon, Trash2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useMemo, useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
@@ -70,6 +74,23 @@ type Tag = {
   status: 'active' | 'inactive';
 };
 
+type TagStats = {
+  total: number;
+  active: number;
+  inactive: number;
+};
+
+type TagDraftPayload = {
+  mode: 'create' | 'edit';
+  tagId: number | null;
+  values: {
+    slug: string;
+    color: string;
+    status: 'active' | 'inactive';
+  };
+};
+
+const TAG_FORM_DRAFT_STORAGE_KEY = 'tag-form-draft';
 const PAGE_SIZE_OPTIONS: number[] = [10, 20, 30, 40, 50];
 
 export default function TagPage() {
@@ -94,7 +115,7 @@ export default function TagPage() {
   const debouncedSearch = useDebounce(searchTerm);
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState<number>(10);
-  const { request } = useApp();
+  const { request, currentLocaleCode, getSettingValue } = useApp();
 
   const form = useForm<FormValues>({
     resolver: zodResolver(formSchema),
@@ -105,6 +126,62 @@ export default function TagPage() {
     },
   });
 
+  const watchedTagValues = useWatch({
+    control: form.control,
+  });
+  const hasDraftContent = Boolean(
+    (watchedTagValues.slug ?? '').trim() ||
+    watchedTagValues.color !== '#000000' ||
+    watchedTagValues.status !== 'active'
+  );
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<TagDraftPayload>({
+    storageKey: TAG_FORM_DRAFT_STORAGE_KEY,
+    value: {
+      mode: editingTagId ? 'edit' : 'create',
+      tagId: editingTagId,
+      values: {
+        slug: watchedTagValues.slug ?? '',
+        color: watchedTagValues.color ?? '#000000',
+        status: watchedTagValues.status ?? 'active',
+      },
+    },
+    hasData: hasDraftContent,
+    enabled: isSheetOpen,
+  });
+
+  const draftStatusContent = useMemo(() => {
+    if (!hasDraft || !draftSavedAt) {
+      return null;
+    }
+
+    const savedDate = new Date(draftSavedAt);
+
+    if (Number.isNaN(savedDate.getTime())) {
+      return null;
+    }
+
+    const locale = currentLocaleCode.startsWith('pt') ? ptBR : enUS;
+    const relativeLabel = formatDistanceToNow(savedDate, {
+      addSuffix: true,
+      locale,
+    });
+    const absoluteLabel = formatDateTime(
+      savedDate,
+      getSettingValue,
+      currentLocaleCode
+    );
+
+    return currentLocaleCode.startsWith('pt')
+      ? `Rascunho salvo ${relativeLabel} • Último salvamento: ${absoluteLabel}`
+      : `Draft saved ${relativeLabel} • Last saved: ${absoluteLabel}`;
+  }, [draftSavedAt, currentLocaleCode, getSettingValue, hasDraft]);
+
   const { data: tagResult, refetch: refetchTag } = useQuery<
     PaginationResult<Tag>
   >({
@@ -123,22 +200,28 @@ export default function TagPage() {
   });
   const { data = [], total = 0 } = tagResult ?? {};
 
-  const { data: statsData, refetch: refetchStats } = useQuery<any>({
+  const { data: statsData, refetch: refetchStats } = useQuery<TagStats>({
     queryKey: ['tag-stats'],
     queryFn: async () => {
-      const response = await request({
+      const response = await request<TagStats>({
         url: '/tag/stats',
       });
-      return response.data;
+      return response.data as TagStats;
     },
   });
 
   const handleNewTag = (): void => {
-    form.reset({
-      slug: '',
-      color: '#000000',
-      status: 'active',
-    });
+    const storedDraft = loadDraft();
+
+    form.reset(
+      storedDraft?.payload.mode === 'create'
+        ? storedDraft.payload.values
+        : {
+            slug: '',
+            color: '#000000',
+            status: 'active',
+          }
+    );
     setEditingTagId(null);
     setIsSheetOpen(true);
   };
@@ -150,11 +233,20 @@ export default function TagPage() {
         method: 'GET',
       });
 
-      form.reset({
-        slug: response.data.slug ?? '',
-        color: response.data.color ?? '#000000',
-        status: response.data.status ?? 'active',
-      });
+      const storedDraft = loadDraft();
+      const shouldRestoreDraft =
+        storedDraft?.payload.mode === 'edit' &&
+        storedDraft.payload.tagId === tag.id;
+
+      form.reset(
+        shouldRestoreDraft
+          ? storedDraft.payload.values
+          : {
+              slug: response.data.slug ?? '',
+              color: response.data.color ?? '#000000',
+              status: response.data.status ?? 'active',
+            }
+      );
       setEditingTagId(tag.id);
       setIsSheetOpen(true);
     } catch (error) {
@@ -187,7 +279,9 @@ export default function TagPage() {
         toast.success(t('successCreate'));
       }
 
+      clearDraft();
       setIsSheetOpen(false);
+      setEditingTagId(null);
       await refetchTag();
       await refetchStats();
     } catch (error) {
@@ -456,8 +550,12 @@ export default function TagPage() {
 
               <FormActions
                 sheet
+                statusContent={draftStatusContent}
                 cancelLabel={t('cancel')}
-                onCancel={() => setIsSheetOpen(false)}
+                onCancel={() => {
+                  setIsSheetOpen(false);
+                  setEditingTagId(null);
+                }}
                 submitIcon={<Save className="size-4" />}
                 submitLabel={t('save')}
                 submitType="submit"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hed-hog/tag",
-  "version": "0.0.304",
+  "version": "0.0.306",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -9,11 +9,11 @@
     "@nestjs/core": "^11",
     "@nestjs/jwt": "^11",
     "@nestjs/mapped-types": "*",
+    "@hed-hog/api": "0.0.6",
     "@hed-hog/api-pagination": "0.0.7",
+    "@hed-hog/core": "0.0.306",
     "@hed-hog/api-prisma": "0.0.6",
-    "@hed-hog/api": "0.0.6",
-    "@hed-hog/api-locale": "0.0.14",
-    "@hed-hog/core": "0.0.304"
+    "@hed-hog/api-locale": "0.0.14"
   },
   "exports": {
     ".": {