Improvements on translation and instagram component

Author: Dosbodoke

app/[locale]/[id]/_components/HighlineHeader.tsx

@@ -4,8 +4,8 @@ import { MapPinIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useEffect, useRef, useState } from "react";
 
-import type { Highline } from "@/app/actions/getHighline";
 import { RegistryEntry } from "@/app/[locale]/[id]/_components/RegistryEntry";
+import type { Highline } from "@/app/actions/getHighline";
 import { Button } from "@/components/ui/button";
 import { CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { cn } from "@/lib/utils";

app/[locale]/[id]/_components/RegistryEntry.tsx

@@ -40,6 +40,7 @@ import MultiSelectFormField from "./witness-select";
 const formSchema = z.object({
   instagram: z
     .string()
+    .trim()
     .startsWith("@", "O usuário deve começar com @")
     .min(3, "Deve conter ao menos 3 caracteres"),
   cadenas: z.number().nonnegative(),
@@ -92,6 +93,19 @@ export const RegistryEntry = ({ highlineId, highlineDistance }: Props) => {
     },
   });
 
+  useEffect(() => {
+    async function setUsername() {
+      const {
+        data: { session },
+      } = await supabase.auth.getSession();
+      entryForm.setValue(
+        "instagram",
+        session?.user.user_metadata["username"] || ""
+      );
+    }
+    setUsername();
+  }, [supabase.auth, entryForm]);
+
   const watchCadenas = entryForm.watch("cadenas");
   const watchFullLines = entryForm.watch("full_lines");
 
@@ -184,7 +198,10 @@ export const RegistryEntry = ({ highlineId, highlineDistance }: Props) => {
                     name="instagram"
                     render={({ field }) => (
                       <FormItem>
-                        <FormLabel>Instagram</FormLabel>
+                        <FormLabel>Highliner</FormLabel>
+                        <FormDescription>
+                          {t("instagram.description")}
+                        </FormDescription>
                         <FormControl>
                           <Input
                             placeholder={t("instagram.placeholder")}

messages/en.json

@@ -73,7 +73,8 @@
       },
       "description": "Registry your walk and get access to your statistics.",
       "instagram": {
-        "placeholder": "Your @ on instragram"
+        "description": "Username on the Chooselife APP or instragram @",
+        "placeholder": "@user"
       },
       "cadenas": {
         "label": "Sent",

messages/pt.json

@@ -73,7 +73,8 @@
       },
       "description": "Registre como foi o seu rolê e tenha acesso as suas estatísticas.",
       "instagram": {
-        "placeholder": "Seu @ do instragram"
+        "description": "Nome de úsuario no APP Chooselife ou o @ do instagram",
+        "placeholder": "@user"
       },
       "cadenas": {
         "label": "Cadenas",
@@ -93,7 +94,7 @@
       },
       "witness": {
         "label": "Testemunhas",
-        "description": "Selectione dois úsuario para ser sua testeminha, se a pessoa não tiver no APP use o @ do instagram dela",
+        "description": "Selecione dois úsuario para ser testemunha, se a pessoa não tiver no APP use o @ do instagram dela",
         "placeholder": "Exemplo: @festivalchooselife, @juangsandrade",
         "searchPlaceholder": "Username ou @ do instagram",
         "clear": "Limpar",