Skip to content

Commit

Permalink
Moved a bunch of static client component messages to translations
Browse files Browse the repository at this point in the history
  • Loading branch information
@FlorianLeChat
FlorianLeChat committed Mar 25, 2024
1 parent 704a883 commit 1bc61b3
Show file tree
Hide file tree
Showing 6 changed files with 197 additions and 157 deletions.
63 changes: 35 additions & 28 deletions app/[locale]/settings/components/issue.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { useForm } from "react-hook-form";
import serverAction from "@/utilities/recaptcha";
import { zodResolver } from "@hookform/resolvers/zod";
import { useFormState } from "react-dom";
import { useTranslations } from "next-intl";
import { useState, useEffect } from "react";

import { Input } from "../../components/ui/input";
Expand All @@ -39,6 +40,7 @@ import { createIssue } from "../actions/create-issue";
export default function Account()
{
// Déclaration des variables d'état.
const messages = useTranslations( "form" );
const [ isLoading, setLoading ] = useState( false );
const [ updateState, updateAction ] = useFormState( createIssue, {
success: true,
Expand Down Expand Up @@ -67,8 +69,8 @@ export default function Account()
// niveau du serveur.
setLoading( false );

toast.error( "form.errors.update_failed", {
description: "form.errors.server_error"
toast.error( messages( "errors.action_failed" ), {
description: messages( "errors.server_error" )
} );

return;
Expand All @@ -92,17 +94,17 @@ export default function Account()
{
form.reset();

toast.success( "form.info.update_success", {
toast.success( messages( "infos.action_success" ), {
description: reason
} );
}
else
{
toast.error( "form.errors.update_failed", {
toast.error( messages( "errors.action_failed" ), {
description: reason
} );
}
}, [ form, updateState ] );
}, [ form, messages, updateState ] );

// Affichage du rendu HTML du composant.
return (
Expand Down Expand Up @@ -134,7 +136,7 @@ export default function Account()
<FormItem className="sm:inline-block sm:w-[calc(100%-160px-1rem)]">
<FormLabel>
<Globe className="mr-2 inline h-6 w-6" />
Domaine
{messages( "fields.domain_label" )}
</FormLabel>

<Select
Expand All @@ -151,27 +153,25 @@ export default function Account()

<SelectContent>
<SelectItem value="account">
Modification des informations du compte
{messages( "fields.domain_account" )}
</SelectItem>

<SelectItem value="upload">
Téléversement des fichiers vers le
serveur
{messages( "fields.domain_upload" )}
</SelectItem>

<SelectItem value="sharing">
Partages des fichiers avec
d&lsquo;autres utilisateurs
{messages( "fields.domain_sharing" )}
</SelectItem>

<SelectItem value="other">
Autres / Non classé
{messages( "fields.domain_other" )}
</SelectItem>
</SelectContent>
</Select>

<FormDescription className="sr-only">
Indiquez le domaine concerné par le bogue.
{messages( "fields.domain_description" )}
</FormDescription>

<FormMessage />
Expand All @@ -187,7 +187,7 @@ export default function Account()
<FormItem className="sm:!mt-0 sm:ml-2 sm:inline-block">
<FormLabel>
<ShieldAlert className="mr-2 inline h-6 w-6" />
Sévérité
{messages( "fields.severity_label" )}
</FormLabel>

<Select
Expand All @@ -204,21 +204,25 @@ export default function Account()

<SelectContent>
<SelectItem value="critical">
Critique
{messages( "fields.severity_critical" )}
</SelectItem>

<SelectItem value="high">Élevé</SelectItem>
<SelectItem value="high">
{messages( "fields.severity_high" )}
</SelectItem>

<SelectItem value="medium">
Moyen
{messages( "fields.severity_medium" )}
</SelectItem>

<SelectItem value="low">Bas</SelectItem>
<SelectItem value="low">
{messages( "fields.severity_low" )}
</SelectItem>
</SelectContent>
</Select>

<FormDescription className="sr-only">
Indiquez la sévérité (selon vous) du bogue.
{messages( "fields.severity_description" )}
</FormDescription>

<FormMessage />
Expand All @@ -234,7 +238,7 @@ export default function Account()
<FormItem>
<FormLabel>
<List className="mr-2 inline h-6 w-6" />
Sujet
{messages( "fields.subject_label" )}
</FormLabel>

<FormControl>
Expand All @@ -244,12 +248,14 @@ export default function Account()
maxLength={
schema.shape.subject.maxLength as number
}
placeholder="Il y a un problème avec..."
placeholder={messages(
"fields.subject_placeholder"
)}
/>
</FormControl>

<FormDescription className="sr-only">
Écrivez un sujet court pour décrire le bogue.
{messages( "fields.subject_description" )}
</FormDescription>

<FormMessage />
Expand All @@ -265,7 +271,7 @@ export default function Account()
<FormItem>
<FormLabel>
<Subtitles className="mr-2 inline h-6 w-6" />
Description
{messages( "fields.description_label" )}
</FormLabel>

<FormControl>
Expand All @@ -277,13 +283,14 @@ export default function Account()
.maxLength as number
}
className="max-h-[150px]"
placeholder="Veillez inclure toutes les informations pertinentes à votre signalement."
placeholder={messages(
"fields.description_placeholder"
)}
/>
</FormControl>

<FormDescription className="sr-only">
Expliquez en détail le bogue que vous avez
rencontré et comment le reproduire.
{messages( "fields.description_description" )}
</FormDescription>

<FormMessage />
Expand All @@ -296,12 +303,12 @@ export default function Account()
{isLoading ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Envoi...
{messages( "loading" )}
</>
) : (
<>
<Send className="mr-2 h-4 w-4" />
Envoyer
{messages( "update" )}
</>
)}
</Button>
Expand Down
54 changes: 29 additions & 25 deletions app/[locale]/settings/components/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import serverAction from "@/utilities/recaptcha";
import { zodResolver } from "@hookform/resolvers/zod";
import { useFormState } from "react-dom";
import type { Session } from "next-auth";
import { useTranslations } from "next-intl";
import { useState, useEffect, type CSSProperties } from "react";

import { Button } from "../../components/ui/button";
Expand All @@ -46,6 +47,7 @@ import { RadioGroup, RadioGroupItem } from "../../components/ui/radio-group";
export default function Layout( { session }: { session: Session } )
{
// Déclaration des variables d'état.
const messages = useTranslations( "form" );
const [ isLoading, setLoading ] = useState( false );
const [ updateState, updateAction ] = useFormState( updateLayout, {
success: true,
Expand Down Expand Up @@ -75,8 +77,8 @@ export default function Layout( { session }: { session: Session } )
// niveau du serveur.
setLoading( false );

toast.error( "form.errors.update_failed", {
description: "form.errors.server_error"
toast.error( messages( "errors.action_failed" ), {
description: messages( "errors.server_error" )
} );

return;
Expand Down Expand Up @@ -104,17 +106,17 @@ export default function Layout( { session }: { session: Session } )
"color"
) } ${ form.getValues( "theme" ) }`;

toast.success( "form.info.update_success", {
toast.success( messages( "infos.action_success" ), {
description: reason
} );
}
else
{
toast.error( "form.errors.update_failed", {
toast.error( messages( "errors.action_failed" ), {
description: reason
} );
}
}, [ form, updateState ] );
}, [ form, messages, updateState ] );

// Affichage du rendu HTML du composant.
return (
Expand Down Expand Up @@ -150,7 +152,7 @@ export default function Layout( { session }: { session: Session } )
<FormItem>
<FormLabel>
<CaseUpper className="mr-2 inline h-6 w-6" />
Police de caractères
{messages( "fields.font_label" )}
</FormLabel>

<Select
Expand Down Expand Up @@ -178,8 +180,7 @@ export default function Layout( { session }: { session: Session } )
</Select>

<FormDescription>
Définissez la police que vous souhaitez utiliser
sur l&lsquo;ensemble des pages du site.
{messages( "fields.font_description" )}
</FormDescription>

<FormMessage />
Expand All @@ -195,7 +196,7 @@ export default function Layout( { session }: { session: Session } )
<FormItem>
<FormLabel className="!block">
<Paintbrush className="mr-2 inline h-6 w-6" />
Couleurs
{messages( "fields.color_label" )}
</FormLabel>

<TooltipProvider>
Expand Down Expand Up @@ -251,9 +252,7 @@ export default function Layout( { session }: { session: Session } )
</TooltipProvider>

<FormDescription>
Définissez la couleur que vous souhaitez
utiliser sur l&lsquo;ensemble des éléments du
site.
{messages( "fields.color_description" )}
</FormDescription>

<FormMessage />
Expand All @@ -269,12 +268,11 @@ export default function Layout( { session }: { session: Session } )
<FormItem className="space-y-1">
<FormLabel>
<SunMoon className="mr-2 inline h-6 w-6" />
Thème
{messages( "fields.theme_label" )}
</FormLabel>

<FormDescription>
Définissez le thème que vous souhaitez utiliser
sur l&lsquo;ensemble des pages du site.
{messages( "fields.theme_description" )}
</FormDescription>

<FormMessage />
Expand Down Expand Up @@ -318,20 +316,23 @@ export default function Layout( { session }: { session: Session } )
</FormControl>

<p className="text-sm font-normal">
Clair
{messages(
"fields.theme_light_title"
)}
</p>
</div>

<FormLabel
htmlFor="light"
className="sr-only left-0 top-0 h-full w-full text-transparent [clip:unset]"
>
Clair
{messages( "fields.theme_light_title" )}
</FormLabel>

<FormDescription className="sr-only">
Le thème clair adapté à la lecture en
milieu lumineux.
{messages(
"fields.theme_light_description"
)}
</FormDescription>
</FormItem>

Expand Down Expand Up @@ -368,20 +369,23 @@ export default function Layout( { session }: { session: Session } )
</FormControl>

<p className="text-sm font-normal">
Sombre
{messages(
"fields.theme_dark_title"
)}
</p>
</div>

<FormLabel
htmlFor="dark"
className="sr-only left-0 top-0 h-full w-full text-transparent [clip:unset]"
>
Sombre
{messages( "fields.theme_dark_title" )}
</FormLabel>

<FormDescription className="sr-only">
Le thème sombre adapté à la lecture en
milieu sombre.
{messages(
"fields.theme_dark_description"
)}
</FormDescription>
</FormItem>
</RadioGroup>
Expand All @@ -394,12 +398,12 @@ export default function Layout( { session }: { session: Session } )
{isLoading ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Veuillez patienter...
{messages( "loading" )}
</>
) : (
<>
<RefreshCw className="mr-2 h-4 w-4" />
Mettre à jour
{messages( "update" )}
</>
)}
</Button>
Expand Down
Loading

0 comments on commit 1bc61b3

Please sign in to comment.