🌐 Avoid i18n dynamic keys

baptisteArno · Dec 29, 2023 · 8b4504f · 8b4504f
1 parent 64e3c6a
commit 8b4504f
Show file tree

Hide file tree

Showing 8 changed files with 243 additions and 267 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,5 @@
 {
-  "i18n-ally.localesPaths": ["apps/builder/public/locales"],
+  "i18n-ally.localesPaths": ["apps/builder/src/i18n"],
   "i18n-ally.keystyle": "flat",
   "i18n-ally.displayLanguage": "en",
   "i18n-ally.enabledFrameworks": ["custom"],

diff --git a/apps/builder/src/features/templates/components/TemplatesModal.tsx b/apps/builder/src/features/templates/components/TemplatesModal.tsx
@@ -15,7 +15,7 @@ import {
 import { Standard } from '@typebot.io/nextjs'
 import { Typebot } from '@typebot.io/schemas'
 import React, { useCallback, useEffect, useState } from 'react'
-import { templates } from '../data'
+import { useTemplates } from '../hooks/useTemplates'
 import { TemplateProps } from '../types'
 import { useToast } from '@/hooks/useToast'
 import { sendRequest } from '@typebot.io/lib'
@@ -37,6 +37,7 @@ export const TemplatesModal = ({
   const { t } = useTranslate()
   const templateCardBackgroundColor = useColorModeValue('white', 'gray.800')
   const [typebot, setTypebot] = useState<Typebot>()
+  const templates = useTemplates()
   const [selectedTemplate, setSelectedTemplate] = useState<TemplateProps>(
     templates[0]
   )
@@ -50,14 +51,15 @@ export const TemplatesModal = ({
       )
       if (error)
         return showToast({ title: error.name, description: error.message })
-      setTypebot(data as Typebot)
+      setTypebot({ ...(data as Typebot), name: template.name })
     },
     [showToast]
   )
 
   useEffect(() => {
+    if (typebot) return
     fetchTemplate(templates[0])
-  }, [fetchTemplate])
+  }, [fetchTemplate, typebot, templates])
 
   const onUseThisTemplateClick = async () => {
     if (!typebot) return
@@ -112,15 +114,7 @@ export const TemplatesModal = ({
                     >
                       <HStack overflow="hidden" fontSize="sm" w="full">
                         <Text>{template.emoji}</Text>
-                        <Text>
-                          {t(
-                            createTranslationKey(
-                              template.name,
-                              template.category
-                            ),
-                            template.name
-                          )}
-                        </Text>
+                        <Text>{template.name}</Text>
                         {template.isNew && (
                           <Tag colorScheme="orange" size="sm" flexShrink={0}>
                             {t('templates.modal.menuHeading.new.tag')}
@@ -156,15 +150,7 @@ export const TemplatesModal = ({
                     >
                       <HStack overflow="hidden" fontSize="sm" w="full">
                         <Text>{template.emoji}</Text>
-                        <Text>
-                          {t(
-                            createTranslationKey(
-                              template.name,
-                              template.category
-                            ),
-                            template.name
-                          )}
-                        </Text>
+                        <Text>{template.name}</Text>
                         {template.isNew && (
                           <Tag colorScheme="orange" size="sm" flexShrink={0}>
                             {t('templates.modal.menuHeading.new.tag')}
@@ -200,15 +186,7 @@ export const TemplatesModal = ({
                     >
                       <HStack overflow="hidden" fontSize="sm" w="full">
                         <Text>{template.emoji}</Text>
-                        <Text>
-                          {t(
-                            createTranslationKey(
-                              template.name,
-                              template.category
-                            ),
-                            template.name
-                          )}
-                        </Text>
+                        <Text>{template.name}</Text>
                         {template.isNew && (
                           <Tag colorScheme="orange" size="sm" flexShrink={0}>
                             {t('templates.modal.menuHeading.new.tag')}
@@ -249,26 +227,9 @@ export const TemplatesModal = ({
               <Stack flex="1" spacing={4}>
                 <Heading fontSize="2xl">
                   {selectedTemplate.emoji}{' '}
-                  <chakra.span ml="2">
-                    {t(
-                      createTranslationKey(
-                        selectedTemplate.name,
-                        selectedTemplate.category
-                      ),
-                      selectedTemplate.name
-                    )}
-                  </chakra.span>
+                  <chakra.span ml="2">{selectedTemplate.name}</chakra.span>
                 </Heading>
-                <Text>
-                  {t(
-                    createTranslationKey(
-                      selectedTemplate.name,
-                      selectedTemplate.category,
-                      'description'
-                    ),
-                    selectedTemplate.description
-                  )}
-                </Text>
+                <Text>{selectedTemplate.description}</Text>
               </Stack>
               <Button
                 colorScheme="blue"
@@ -284,14 +245,3 @@ export const TemplatesModal = ({
     </Modal>
   )
 }
-
-const createTranslationKey = (
-  label: string,
-  category: 'marketing' | 'product' | undefined,
-  type?: 'name' | 'description'
-) =>
-  'templates.modal.' +
-  (category ?? 'other') +
-  '.' +
-  label.replace(/\s/g, '') +
-  `.${type ?? 'name'}`
diff --git a/apps/builder/src/features/templates/data.ts b/apps/builder/src/features/templates/data.ts