chore(frontend): add texts to i18n

Author: stampaaaron

apps/frontend/src/routes/_auth/questionnaire/$id/entries.tsx

@@ -1,10 +1,19 @@
 import { Button, Group } from "@quassel/ui";
 import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { i18n } from "../../../../stores/i18n";
+import { useStore } from "@nanostores/react";
+
+export const messages = i18n("questionnaireEntries", {
+  formAction: "Continue",
+  backAction: "Back",
+});
 
 function QuestionnaireEntries() {
   const n = useNavigate();
   const p = Route.useParams();
 
+  const t = useStore(messages);
+
   const handleSubmit = () => {
     n({ to: "/questionnaire/$id/remarks", params: p });
   };
@@ -13,9 +22,9 @@ function QuestionnaireEntries() {
     <form onSubmit={handleSubmit}>
       <Group>
         <Link to="/questionnaire/$id/period" params={p}>
-          <Button variant="light">Back</Button>
+          <Button variant="light">{t.backAction}</Button>
         </Link>
-        <Button type="submit">Continue</Button>
+        <Button type="submit">{t.formAction}</Button>
       </Group>
     </form>
   );

apps/frontend/src/routes/_auth/questionnaire/_form/$id/overview.tsx

@@ -1,8 +1,17 @@
 import { Button, Group } from "@quassel/ui";
 import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { i18n } from "../../../../../stores/i18n";
+import { useStore } from "@nanostores/react";
+
+export const messages = i18n("questionnaireOverview", {
+  title: "Thanks for submitting the questionnaire!",
+  newPeriodAction: "Continue with new period",
+  closeAction: "Close",
+});
 
 function QuestionnaireOverview() {
   const n = useNavigate();
+  const t = useStore(messages);
 
   const handleClose = () => {
     // TODO handle closing quesitonnaire ("logout")
@@ -12,12 +21,12 @@ function QuestionnaireOverview() {
 
   return (
     <>
-      <h3>Thanks for submitting the questionnaire!</h3>
+      <h3>{t.title}</h3>
       <Group>
         <Link to="/questionnaire/new">
-          <Button variant="outline">Continue with new period</Button>
+          <Button variant="outline">{t.newPeriodAction}</Button>
         </Link>
-        <Button onClick={handleClose}>Close</Button>
+        <Button onClick={handleClose}>{t.closeAction}</Button>
       </Group>
     </>
   );

apps/frontend/src/routes/_auth/questionnaire/_form/$id/period.tsx

@@ -1,19 +1,28 @@
 import { Button } from "@quassel/ui";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { i18n } from "../../../../../stores/i18n";
+import { useStore } from "@nanostores/react";
+
+export const messages = i18n("questionnairePeriod", {
+  title: "Period",
+  formAction: "Continue",
+});
 
 function QuestionnairePeriod() {
   const n = useNavigate();
   const p = Route.useParams();
 
+  const t = useStore(messages);
+
   const handleSubmit = () => {
     n({ to: "/questionnaire/$id/entries", params: p });
   };
 
   return (
     <>
-      <h3>Period</h3>
+      <h3>{t.title}</h3>
       <form onSubmit={handleSubmit}>
-        <Button type="submit">Continue</Button>
+        <Button type="submit">{t.formAction}</Button>
       </form>
     </>
   );

apps/frontend/src/routes/_auth/questionnaire/_form/$id/remarks.tsx

@@ -1,23 +1,34 @@
 import { Button, Group } from "@quassel/ui";
 import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { i18n } from "../../../../../stores/i18n";
+import { useStore } from "@nanostores/react";
+
+export const messages = i18n("questionnaireRemarks", {
+  title: "Add remarks",
+  backAction: "Back",
+  saveAction: "Save",
+  formAction: "Save and complete",
+});
 
 function QuestionnaireRemarks() {
   const n = useNavigate();
   const p = Route.useParams();
 
+  const t = useStore(messages);
+
   const handleSubmit = () => {
     n({ to: "/questionnaire/$id/overview", params: p });
   };
 
   return (
     <form onSubmit={handleSubmit}>
-      <h3>Add remarks</h3>
+      <h3>{t.title}</h3>
       <Group>
         <Link to="/questionnaire/$id/entries" params={p}>
-          <Button variant="light">Back</Button>
+          <Button variant="light">{t.backAction}</Button>
         </Link>
-        <Button variant="outline">Save</Button>
-        <Button type="submit">Save and Complete</Button>
+        <Button variant="outline">{t.saveAction}</Button>
+        <Button type="submit">{t.formAction}</Button>
       </Group>
     </form>
   );

apps/frontend/src/routes/_auth/questionnaire/_form/index.tsx

@@ -1,21 +1,29 @@
 import { Button, Stack, TextInput } from "@quassel/ui";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { i18n } from "../../../../stores/i18n";
+import { useStore } from "@nanostores/react";
+
+export const messages = i18n("questionnaire", {
+  title: "Start new questionnaire",
+  formAction: "Continue",
+});
 
 function Questionnaire() {
   const n = useNavigate();
+  const t = useStore(messages);
 
   const handleSubmit = () => {
     n({ to: "/questionnaire/participant" });
   };
 
   return (
     <>
-      <h3>Questionnaire</h3>
+      <h3>{t.title}</h3>
       <form onSubmit={handleSubmit}>
         <Stack>
           <TextInput />
           <TextInput />
-          <Button type="submit">Start questionnaire</Button>
+          <Button type="submit">{t.formAction}</Button>
         </Stack>
       </form>
     </>

apps/frontend/src/routes/_auth/questionnaire/_form/new.tsx

@@ -1,8 +1,16 @@
 import { Button } from "@quassel/ui";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { i18n } from "../../../../stores/i18n";
+import { useStore } from "@nanostores/react";
+
+export const messages = i18n("questionnaireNew", {
+  title: "Create new period of life",
+  formAction: "Create",
+});
 
 function QuestionnaireNew() {
   const n = useNavigate();
+  const t = useStore(messages);
 
   const handleSubmit = () => {
     // TODO create new questionnaire and receive ID
@@ -12,10 +20,10 @@ function QuestionnaireNew() {
 
   return (
     <>
-      <h3>Period</h3>
+      <h3>{t.title}</h3>
       <form onSubmit={handleSubmit}>
         {/* TODO period form */}
-        <Button type="submit">Create</Button>
+        <Button type="submit">{t.formAction}</Button>
       </form>
     </>
   );

apps/frontend/src/routes/_auth/questionnaire/_form/participant.tsx

@@ -1,17 +1,28 @@
 import { Button } from "@quassel/ui";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { i18n } from "../../../../stores/i18n";
+import { useStore } from "@nanostores/react";
+
+export const messages = i18n("questionnaireParticipant", {
+  title: "Participant",
+  formAction: "Continue",
+});
 
 function QuestionnaireParticipant() {
   const n = useNavigate();
+  const t = useStore(messages);
 
   const handleSubmit = () => {
     n({ to: "/questionnaire/new" });
   };
 
   return (
-    <form onSubmit={handleSubmit}>
-      <Button type="submit">New questionnaire</Button>
-    </form>
+    <>
+      <h3>{t.title}</h3>
+      <form onSubmit={handleSubmit}>
+        <Button type="submit">{t.formAction}</Button>
+      </form>
+    </>
   );
 }