create-nextblock 0.2.78 → 0.8.0

package/templates/nextblock-template/app/cms/settings/extra-translations/actions.ts

@@ -1,25 +1,86 @@
 'use server';
 
 import { createClient } from '@nextblock-cms/db/server';
-import { revalidatePath } from 'next/cache';
-import { z } from 'zod';
+import { revalidatePath, updateTag } from 'next/cache';
+import { z } from '../../../../lib/zod-config';
+
+import {
+  getOrderedTranslationLanguageCodes,
+  prepareTranslationCsvImport,
+  type TranslationWorkspaceItem,
+} from '@nextblock-cms/utils';
 
 const translationSchema = z.object({
   key: z.string().min(1, 'Key is required.'),
   en: z.string().min(1, 'English translation is required.'),
 });
 
-export async function createTranslation(prevState: unknown, formData: FormData) {
+const EXTRA_TRANSLATIONS_PATH = '/cms/settings/extra-translations';
+const PUBLIC_TRANSLATIONS_CACHE_TAG = 'public-layout-translations';
+
+type TranslationMutationState = {
+  success?: boolean;
+  translation?: TranslationWorkspaceItem;
+  error?: string;
+  errors?: Record<string, string[] | undefined>;
+};
+
+async function verifyAdmin(supabase: ReturnType<typeof createClient>) {
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) {
+    return false;
+  }
+
+  const { data: profile } = await supabase
+    .from('profiles')
+    .select('role')
+    .eq('id', user.id)
+    .single();
+
+  return profile?.role === 'ADMIN';
+}
+
+async function getConfiguredLanguageCodes() {
+  const supabase = createClient();
+  const { data, error } = await supabase
+    .from('languages')
+    .select('code, name')
+    .order('is_default', { ascending: false })
+    .order('name', { ascending: true });
+
+  if (error) {
+    throw new Error(`Failed to fetch languages: ${error.message}`);
+  }
+
+  return getOrderedTranslationLanguageCodes(data ?? []);
+}
+
+function revalidateTranslationViews() {
+  revalidatePath(EXTRA_TRANSLATIONS_PATH);
+  updateTag(PUBLIC_TRANSLATIONS_CACHE_TAG);
+}
+
+export async function createTranslation(
+  prevState: TranslationMutationState | null,
+  formData: FormData
+): Promise<TranslationMutationState> {
+  void prevState;
+
   const supabase = createClient();
+
+  if (!(await verifyAdmin(supabase))) {
+    return { error: 'Unauthorized: Admin role required.' };
+  }
+
   const data = {
     key: formData.get('key') as string,
     en: formData.get('en') as string,
   };
 
-  const validatedFields = translationSchema.safeParse({
-    key: data.key,
-    en: data.en,
-  });
+  const validatedFields = translationSchema.safeParse(data);
 
   if (!validatedFields.success) {
     return {
@@ -27,91 +88,189 @@ export async function createTranslation(prevState: unknown, formData: FormData)
     };
   }
 
-  const { error } = await supabase.from('translations').insert({
-    key: validatedFields.data.key,
-    translations: { en: validatedFields.data.en },
-  });
+  const { data: insertedTranslation, error } = await supabase
+    .from('translations')
+    .insert({
+      key: validatedFields.data.key,
+      translations: { en: validatedFields.data.en },
+    })
+    .select('key, translations, created_at, updated_at')
+    .single();
 
-  if (error) {
+  if (error || !insertedTranslation) {
     return {
-      error: error.message,
+      error: error?.message ?? 'Failed to create translation.',
     };
   }
 
-  revalidatePath('/cms/settings/extra-translations');
+  revalidateTranslationViews();
 
   return {
     success: true,
+    translation: insertedTranslation as TranslationWorkspaceItem,
   };
 }
 
 export async function getTranslations() {
   const supabase = createClient();
-  const { data, error } = await supabase.from('translations').select('key, translations, created_at, updated_at').order('key');
+  const { data, error } = await supabase
+    .from('translations')
+    .select('key, translations, created_at, updated_at')
+    .order('key');
 
   if (error) {
     console.error('Error fetching translations:', error);
     return [];
   }
 
-  return data;
+  return (data ?? []) as TranslationWorkspaceItem[];
 }
 
-export async function updateTranslation(prevState: unknown, formData: FormData) {
+export async function updateTranslation(
+  prevState: TranslationMutationState | null,
+  formData: FormData
+): Promise<TranslationMutationState> {
+  void prevState;
+
   const supabase = createClient();
-  const data = Object.fromEntries(formData as any);
+
+  if (!(await verifyAdmin(supabase))) {
+    return { error: 'Unauthorized: Admin role required.' };
+  }
+
+  const data = Object.fromEntries(formData.entries());
   const key = data.key as string;
 
   if (!key) {
     return {
-      error: 'Translation key is required',
+      error: 'Translation key is required.',
+    };
+  }
+
+  const languageEntries = Object.entries(data).filter(
+    ([fieldKey]) => fieldKey !== 'key'
+  );
+
+  if (languageEntries.length === 0) {
+    return {
+      error: 'No translation values were provided.',
     };
   }
 
-  // First, fetch the existing translation to get current translations
   const { data: existingData, error: fetchError } = await supabase
     .from('translations')
-    .select('translations')
+    .select('key, translations, created_at, updated_at')
     .eq('key', key)
     .single();
 
-  if (fetchError) {
+  if (fetchError || !existingData) {
     return {
-      error: `Failed to fetch existing translation: ${fetchError.message}`,
+      error: fetchError
+        ? `Failed to fetch existing translation: ${fetchError.message}`
+        : `Translation with key "${key}" was not found.`,
     };
   }
 
-  // Merge new translations with existing ones
-  const existingTranslations = (existingData?.translations as Record<string, string>) || {};
-  const newTranslations: { [key: string]: string } = { ...existingTranslations };
-  
-  for (const [formKey, value] of Object.entries(data)) {
-    if (formKey !== 'key') {
-      newTranslations[formKey] = value as string;
-    }
+  const nextTranslations = {
+    ...((existingData.translations as Record<string, string>) ?? {}),
+  };
+
+  for (const [languageCode, value] of languageEntries) {
+    nextTranslations[languageCode] = value as string;
   }
 
-  const { data: updateResult, error } = await supabase
+  const { data: updatedTranslation, error } = await supabase
     .from('translations')
-    .update({ translations: newTranslations })
+    .update({ translations: nextTranslations })
     .eq('key', key)
-    .select();
-
-  if (error) {
-    return {
-      error: error.message,
-    };
-  }
+    .select('key, translations, created_at, updated_at')
+    .single();
 
-  if (!updateResult || updateResult.length === 0) {
+  if (error || !updatedTranslation) {
     return {
-      error: `Translation with key "${key}" not found or could not be updated`,
+      error:
+        error?.message ??
+        `Translation with key "${key}" could not be updated.`,
     };
   }
 
-  revalidatePath('/cms/settings/extra-translations');
+  revalidateTranslationViews();
 
   return {
     success: true,
+    translation: updatedTranslation as TranslationWorkspaceItem,
   };
-}
+}
+
+export async function importTranslationsCsvAction(csvText: string) {
+  try {
+    const supabase = createClient();
+
+    if (!(await verifyAdmin(supabase))) {
+      return {
+        success: false as const,
+        createdCount: 0,
+        updatedCount: 0,
+        skippedCount: 0,
+        error: 'Unauthorized: Admin role required.',
+      };
+    }
+
+    const [existingTranslations, languageCodes] = await Promise.all([
+      getTranslations(),
+      getConfiguredLanguageCodes(),
+    ]);
+    const importResult = prepareTranslationCsvImport({
+      csvText,
+      existingItems: existingTranslations,
+      languageCodes,
+    });
+
+    if (!importResult.success) {
+      return importResult;
+    }
+
+    const rowsToUpsert = [
+      ...importResult.createdRows,
+      ...importResult.updatedRows,
+    ].map((row) => ({
+      key: row.key,
+      translations: row.translations,
+    }));
+
+    if (rowsToUpsert.length > 0) {
+      const { error } = await supabase
+        .from('translations')
+        .upsert(rowsToUpsert, { onConflict: 'key' });
+
+      if (error) {
+        return {
+          success: false as const,
+          createdCount: 0,
+          updatedCount: 0,
+          skippedCount: importResult.skippedCount,
+          error: error.message,
+        };
+      }
+    }
+
+    revalidateTranslationViews();
+
+    return {
+      success: true as const,
+      createdCount: importResult.createdCount,
+      updatedCount: importResult.updatedCount,
+      skippedCount: importResult.skippedCount,
+      translations: await getTranslations(),
+    };
+  } catch (error) {
+    return {
+      success: false as const,
+      createdCount: 0,
+      updatedCount: 0,
+      skippedCount: 0,
+      error:
+        error instanceof Error ? error.message : 'Failed to import translation CSV.',
+    };
+  }
+}

package/templates/nextblock-template/app/cms/settings/extra-translations/page.tsx

@@ -1,242 +1,93 @@
-'use client';
-
-import { useEffect, useState, useTransition, useRef } from 'react';
-import { useActionState } from 'react';
-import { useHotkeys } from '@/hooks/use-hotkeys';
-import { getTranslations, createTranslation, updateTranslation } from './actions';
-import { getLanguages } from '@/app/cms/settings/languages/actions';
-import { Button } from '@nextblock-cms/ui';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-  DialogFooter,
-} from '@nextblock-cms/ui';
-import { Input } from '@nextblock-cms/ui';
-import { Label } from '@nextblock-cms/ui';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@nextblock-cms/ui';
-import { Spinner, Alert, AlertDescription } from '@nextblock-cms/ui';
-import { SubmitButton } from '@/components/submit-button';
-
-type Translation = Awaited<ReturnType<typeof getTranslations>>[number];
-type Language = NonNullable<Awaited<ReturnType<typeof getLanguages>>['data']>[number];
-
-export default function ExtraTranslationsPage() {
-  const [translations, setTranslations] = useState<Translation[]>([]);
-  const [languages, setLanguages] = useState<Language[]>([]);
-  const [isPending, startTransition] = useTransition();
-
-  const fetchData = () => {
-    startTransition(async () => {
-      const translationsData = await getTranslations();
-      const { data: languagesData } = await getLanguages();
-      setTranslations(translationsData);
-      if (languagesData) {
-        setLanguages(languagesData);
-      }
-    });
-  };
-
-  useEffect(() => {
-    fetchData();
-  }, []);
-
-  if (isPending && translations.length === 0) {
-    return (
-        <div className="flex justify-center items-center p-12">
-            <Spinner size="lg" />
-        </div>
-    );
-  }
-
-  return (
-    <div className="p-6">
-      <div className="flex justify-between items-center mb-6">
-        <h1 className="text-2xl font-bold">Extra Translations</h1>
-        <CreateTranslationForm onSuccess={fetchData} />
-      </div>
-      <TranslationsTable translations={translations} languages={languages} onSuccess={fetchData} />
-    </div>
-  );
-}
-
-function CreateTranslationForm({ onSuccess }: { onSuccess: () => void }) {
-  const [state, formAction] = useActionState(createTranslation, null);
-  const [open, setOpen] = useState(false);
-
-  useEffect(() => {
-    if (state?.success) {
-      setOpen(false);
-      onSuccess();
-    }
-  }, [state, onSuccess]);
-
-  const formRef = useRef<HTMLFormElement>(null);
-  useHotkeys('ctrl+s', () => formRef.current?.requestSubmit());
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button>Create New Translation</Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Create New Translation</DialogTitle>
-        </DialogHeader>
-        <form ref={formRef} action={formAction} className="space-y-4">
-          <div>
-            <Label htmlFor="key">Key</Label>
-            <Input id="key" name="key" placeholder="e.g., sign_in_button" required />
-            {state?.errors?.key && <p className="text-red-500 text-sm mt-1">{state.errors.key[0]}</p>}
-          </div>
-          <div>
-            <Label htmlFor="en">English</Label>
-            <Input id="en" name="en" placeholder="e.g., Sign In" required />
-            {state?.errors?.en && <p className="text-red-500 text-sm mt-1">{state.errors.en[0]}</p>}
-          </div>
-          {state?.error && (
-            <Alert variant="destructive">
-                <AlertDescription>{state.error}</AlertDescription>
-            </Alert>
-          )}
-          <DialogFooter>
-            <SubmitButton>Create</SubmitButton>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-type TranslationsTableProps = {
-  translations: Translation[];
-  languages: Language[];
-  onSuccess: () => void;
-};
-
-function TranslationsTable({ translations, languages, onSuccess }: TranslationsTableProps) {
-  return (
-    <div className="border rounded-lg">
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Key</TableHead>
-            {languages.map((lang) => (
-              <TableHead key={lang.code}>{lang.name}</TableHead>
-            ))}
-            <TableHead className="text-right w-[100px]">Actions</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {translations.map((t) => (
-            <EditableTranslationRow key={t.key} translation={t} languages={languages} onSuccess={onSuccess} />
-          ))}
-        </TableBody>
-      </Table>
-    </div>
-  );
-}
-
-type EditableRowProps = {
-  translation: Translation;
-  languages: Language[];
-  onSuccess: () => void;
-};
-
-function EditableTranslationRow({ translation, languages, onSuccess }: EditableRowProps) {
-  const [isDirty, setIsDirty] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [formValues, setFormValues] = useState(() => translation.translations as Record<string, string>);
-
-  useEffect(() => {
-    setFormValues(translation.translations as Record<string, string>);
-    setIsDirty(false);
-    setError(null);
-  }, [translation]);
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setIsDirty(true);
-    const { name, value } = e.target;
-    setFormValues(prev => ({ ...prev, [name]: value }));
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    if (isSubmitting || !isDirty) {
-      return;
-    }
-
-    setIsSubmitting(true);
-    setError(null);
-    
-    try {
-      const formData = new FormData();
-      formData.append('key', translation.key);
-      for (const [lang, value] of Object.entries(formValues)) {
-        formData.append(lang, value);
-      }
-      
-      const result = await updateTranslation(null, formData);
-      
-      if (result?.success) {
-        setIsDirty(false);
-        onSuccess();
-      } else if (result?.error) {
-        setError(result.error);
-      }
-    } catch (err) {
-      console.error('Submit error:', err);
-      setError('An unexpected error occurred');
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const formRef = useRef<HTMLFormElement>(null);
-  useHotkeys('ctrl+s', () => formRef.current?.requestSubmit());
-
-  return (
-    <TableRow>
-      <TableCell className="font-medium">{translation.key}</TableCell>
-      {languages.map((lang) => (
-        <TableCell key={lang.code}>
-          <Input
-            name={lang.code}
-            value={formValues[lang.code] || ''}
-            onChange={handleInputChange}
-            className="w-full"
-          />
-        </TableCell>
-      ))}
-      <TableCell className="text-right">
-        <form ref={formRef} onSubmit={handleSubmit} className="flex flex-col items-end gap-2">
-          <Button type="submit" disabled={!isDirty || isSubmitting}>
-            {isSubmitting ? (
-              <>
-                <Spinner className="mr-2 h-4 w-4" /> Saving...
-              </>
-            ) : (
-              'Save'
-            )}
-          </Button>
-          {error && (
-             <Alert variant="destructive" className="py-1 px-2 text-xs w-auto">
-                <AlertDescription>{error}</AlertDescription>
-             </Alert>
-          )}
-        </form>
-      </TableCell>
-    </TableRow>
-  );
-}
+import { Alert, AlertDescription } from '@nextblock-cms/ui';
+
+import { getLanguages } from '../languages/actions';
+import { getTranslations } from './actions';
+import { ExtraTranslationsWorkspace } from './ExtraTranslationsWorkspace';
+
+type Language = NonNullable<Awaited<ReturnType<typeof getLanguages>>['data']>[number];
+
+interface ExtraTranslationsPageProps {
+  searchParams?: Promise<{
+    language?: string;
+    status?: string;
+    success?: string;
+  }>;
+}
+
+function getInitialLanguageCode(languages: Language[], requestedLanguageCode?: string) {
+  if (!languages.length) {
+    return 'en';
+  }
+
+  const trimmedRequestedCode = requestedLanguageCode?.trim().toLowerCase();
+
+  if (trimmedRequestedCode) {
+    const matchedLanguage = languages.find(
+      (language) => language.code.toLowerCase() === trimmedRequestedCode
+    );
+
+    if (matchedLanguage) {
+      return matchedLanguage.code;
+    }
+  }
+
+  const firstNonEnglishLanguage = languages.find(
+    (language) => language.code.toLowerCase() !== 'en'
+  );
+
+  return firstNonEnglishLanguage?.code ?? languages[0]?.code ?? 'en';
+}
+
+function getInitialStatusFilter(
+  requestedStatus?: string,
+  requestedLanguageCode?: string
+) {
+  if (
+    requestedStatus === 'all' ||
+    requestedStatus === 'missing' ||
+    requestedStatus === 'translated'
+  ) {
+    return requestedStatus;
+  }
+
+  return requestedLanguageCode ? 'missing' : 'all';
+}
+
+export default async function ExtraTranslationsPage(
+  props: ExtraTranslationsPageProps
+) {
+  const searchParams = await props.searchParams;
+  const [translations, languagesResult] = await Promise.all([
+    getTranslations(),
+    getLanguages(),
+  ]);
+  const languages = languagesResult.data ?? [];
+  const initialLanguageCode = getInitialLanguageCode(
+    languages,
+    searchParams?.language
+  );
+  const initialStatusFilter = getInitialStatusFilter(
+    searchParams?.status,
+    searchParams?.language
+  );
+  const successMessage = searchParams?.success
+    ? decodeURIComponent(searchParams.success)
+    : null;
+
+  return (
+    <div className="space-y-4 p-6">
+      {successMessage ? (
+        <Alert variant="success">
+          <AlertDescription>{successMessage}</AlertDescription>
+        </Alert>
+      ) : null}
+
+      <ExtraTranslationsWorkspace
+        initialTranslations={translations}
+        languages={languages}
+        initialLanguageCode={initialLanguageCode}
+        initialStatusFilter={initialStatusFilter}
+      />
+    </div>
+  );
+}