i18n: integrate translations into components

- StatusBadge, TaskForm, tasks page use i18n hook - All 4 language files complete (cs, he, ru, ua) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 13:13:34 +00:00
parent fea4d38ce8
commit 235bcab97f
4 changed files with 56 additions and 52 deletions
--- a/apps/tasks/app/tasks/page.tsx
+++ b/apps/tasks/app/tasks/page.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState, useCallback, useMemo } from "react";
 import { useRouter } from "next/navigation";
 import { useAuth } from "@/lib/auth";
 import { getTasks, getGroups, createTask, updateTask, Task, Group } from "@/lib/api";
+import { useTranslation } from "@/lib/i18n";
 import TaskCard from "@/components/TaskCard";
 import GroupSelector from "@/components/GroupSelector";
 import TaskModal from "@/components/TaskModal";
@@ -13,6 +14,7 @@ type StatusFilter = "all" | "pending" | "in_progress" | "done" | "cancelled";

 export default function TasksPage() {
  const { token } = useAuth();
+  const { t } = useTranslation();
  const router = useRouter();
  const [tasks, setTasks] = useState<Task[]>([]);
  const [groups, setGroups] = useState<Group[]>([]);
@@ -47,7 +49,7 @@ export default function TasksPage() {
      setTasks(tasksRes.data || []);
      setGroups(groupsRes.data || []);
    } catch (err) {
-      console.error("Chyba pri nacitani:", err);
+      console.error("Load error:", err);
    } finally {
      setLoading(false);
    }
@@ -73,7 +75,7 @@ export default function TasksPage() {

      // Show overlay
      if (newGroupId === null) {
-        setSwipeOverlay({ name: "Vse", icon: null });
+        setSwipeOverlay({ name: t("tasks.all"), icon: null });
      } else {
        const group = groups.find((g) => g.id === newGroupId);
        setSwipeOverlay({ name: group?.name || "", icon: group?.icon || null });
@@ -87,7 +89,7 @@ export default function TasksPage() {
        setSwipeDirection(null);
      }, 600);
    },
-    [groupOrder, currentGroupIndex, groups]
+    [groupOrder, currentGroupIndex, groups, t]
  );

  // Swipe handlers for cycling groups
@@ -114,16 +116,16 @@ export default function TasksPage() {
      await updateTask(token, taskId, { status: "done" });
      loadData();
    } catch (err) {
-      console.error("Chyba pri dokoncovani:", err);
+      console.error("Complete error:", err);
    }
  }

  const statusOptions: { value: StatusFilter; label: string }[] = [
-    { value: "all", label: "Vse" },
-    { value: "pending", label: "Ceka" },
-    { value: "in_progress", label: "Probiha" },
-    { value: "done", label: "Hotovo" },
-    { value: "cancelled", label: "Zruseno" },
+    { value: "all", label: t("tasks.all") },
+    { value: "pending", label: t("tasks.status.pending") },
+    { value: "in_progress", label: t("tasks.status.in_progress") },
+    { value: "done", label: t("tasks.status.done") },
+    { value: "cancelled", label: t("tasks.status.cancelled") },
  ];

  if (!token) return null;
@@ -189,9 +191,9 @@ export default function TasksPage() {
          ) : tasks.length === 0 ? (
            <div className="text-center py-16">
              <div className="text-5xl mb-4 opacity-50">&#9744;</div>
-              <p className="text-muted text-lg font-medium">Zadne ukoly</p>
+              <p className="text-muted text-lg font-medium">{t("tasks.noTasks")}</p>
              <p className="text-muted text-sm mt-1">
-                Vytvorte prvni ukol pomoci tlacitka +
+                {t("tasks.createFirst")}
              </p>
            </div>
          ) : (
@@ -212,7 +214,7 @@ export default function TasksPage() {
      <button
        onClick={() => setShowForm(true)}
        className="fixed bottom-20 sm:bottom-6 right-4 sm:right-6 w-14 h-14 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white rounded-full shadow-lg hover:shadow-xl active:shadow-md transition-all duration-200 flex items-center justify-center z-40 hover:scale-105 active:scale-95"
-        aria-label="Pridat ukol"
+        aria-label={t("tasks.add")}
      >
        <svg
          className="w-7 h-7"
--- a/apps/tasks/components/StatusBadge.tsx
+++ b/apps/tasks/components/StatusBadge.tsx
@@ -1,37 +1,34 @@
 "use client";

+import { useTranslation } from "@/lib/i18n";
+
 interface StatusBadgeProps {
  status: string;
  size?: "sm" | "md";
 }

-const STATUS_MAP: Record<string, { label: string; bg: string; text: string; dot: string }> = {
+const STATUS_STYLES: Record<string, { bg: string; text: string; dot: string }> = {
  pending: {
-    label: "Čeká",
    bg: "bg-yellow-100 dark:bg-yellow-900/30",
    text: "text-yellow-800 dark:text-yellow-300",
    dot: "bg-yellow-500",
  },
  in_progress: {
-    label: "Probíhá",
    bg: "bg-blue-100 dark:bg-blue-900/30",
    text: "text-blue-800 dark:text-blue-300",
    dot: "bg-blue-500",
  },
  done: {
-    label: "Hotovo",
    bg: "bg-green-100 dark:bg-green-900/30",
    text: "text-green-800 dark:text-green-300",
    dot: "bg-green-500",
  },
  completed: {
-    label: "Hotovo",
    bg: "bg-green-100 dark:bg-green-900/30",
    text: "text-green-800 dark:text-green-300",
    dot: "bg-green-500",
  },
  cancelled: {
-    label: "Zrušeno",
    bg: "bg-gray-100 dark:bg-gray-800/30",
    text: "text-gray-600 dark:text-gray-400",
    dot: "bg-gray-400",
@@ -39,15 +36,17 @@ const STATUS_MAP: Record<string, { label: string; bg: string; text: string; dot:
 };

 export default function StatusBadge({ status, size = "sm" }: StatusBadgeProps) {
-  const s = STATUS_MAP[status] || STATUS_MAP.pending;
+  const { t } = useTranslation();
+  const s = STATUS_STYLES[status] || STATUS_STYLES.pending;
  const sizeClass = size === "sm" ? "px-2 py-0.5 text-xs" : "px-3 py-1 text-sm";
+  const label = t(`tasks.status.${status}`) || status;

  return (
    <span
      className={`inline-flex items-center gap-1.5 rounded-full font-medium ${s.bg} ${s.text} ${sizeClass}`}
    >
      <span className={`w-1.5 h-1.5 rounded-full ${s.dot}`} />
-      {s.label}
+      {label}
    </span>
  );
 }
--- a/apps/tasks/components/TaskForm.tsx
+++ b/apps/tasks/components/TaskForm.tsx
@@ -2,6 +2,7 @@

 import { useState } from "react";
 import { Group, Task } from "@/lib/api";
+import { useTranslation } from "@/lib/i18n";

 interface TaskFormProps {
  groups: Group[];
@@ -11,27 +12,14 @@ interface TaskFormProps {
  submitLabel?: string;
 }

-const STATUSES = [
-  { value: "pending", label: "Čeká" },
-  { value: "in_progress", label: "Probíhá" },
-  { value: "done", label: "Hotovo" },
-  { value: "cancelled", label: "Zrušeno" },
-];
-
-const PRIORITIES = [
-  { value: "low", label: "Nízká" },
-  { value: "medium", label: "Střední" },
-  { value: "high", label: "Vysoká" },
-  { value: "urgent", label: "Urgentní" },
-];
-
 export default function TaskForm({
  groups,
  initial,
  onSubmit,
  onCancel,
-  submitLabel = "Uložit",
+  submitLabel,
 }: TaskFormProps) {
+  const { t } = useTranslation();
  const [title, setTitle] = useState(initial?.title || "");
  const [description, setDescription] = useState(initial?.description || "");
  const [status, setStatus] = useState(initial?.status || "pending");
@@ -43,10 +31,24 @@ export default function TaskForm({
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

+  const STATUSES = [
+    { value: "pending", label: t("tasks.status.pending") },
+    { value: "in_progress", label: t("tasks.status.in_progress") },
+    { value: "done", label: t("tasks.status.done") },
+    { value: "cancelled", label: t("tasks.status.cancelled") },
+  ];
+
+  const PRIORITIES = [
+    { value: "low", label: t("tasks.priority.low") },
+    { value: "medium", label: t("tasks.priority.medium") },
+    { value: "high", label: t("tasks.priority.high") },
+    { value: "urgent", label: t("tasks.priority.urgent") },
+  ];
+
  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!title.trim()) {
-      setError("Název je povinný");
+      setError(t("tasks.form.titleRequired"));
      return;
    }
    setLoading(true);
@@ -62,7 +64,7 @@ export default function TaskForm({
      });
    } catch (err) {
      setError(
-        err instanceof Error ? err.message : "Chyba při ukládání"
+        err instanceof Error ? err.message : t("tasks.form.saveError")
      );
    } finally {
      setLoading(false);
@@ -78,31 +80,31 @@ export default function TaskForm({
      )}

      <div>
-        <label className="block text-sm font-medium mb-1">Název *</label>
+        <label className="block text-sm font-medium mb-1">{t("tasks.form.title")} *</label>
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-shadow"
-          placeholder="Co je třeba udělat..."
+          placeholder={t("tasks.form.placeholder")}
          autoFocus
        />
      </div>

      <div>
-        <label className="block text-sm font-medium mb-1">Popis</label>
+        <label className="block text-sm font-medium mb-1">{t("tasks.form.description")}</label>
        <textarea
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          rows={3}
          className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none resize-none transition-shadow"
-          placeholder="Podrobnosti..."
+          placeholder={t("tasks.form.descPlaceholder")}
        />
      </div>

      <div className="grid grid-cols-2 gap-4">
        <div>
-          <label className="block text-sm font-medium mb-1">Stav</label>
+          <label className="block text-sm font-medium mb-1">{t("tasks.form.status")}</label>
          <select
            value={status}
            onChange={(e) =>
@@ -125,7 +127,7 @@ export default function TaskForm({
        </div>

        <div>
-          <label className="block text-sm font-medium mb-1">Priorita</label>
+          <label className="block text-sm font-medium mb-1">{t("tasks.form.priority")}</label>
          <select
            value={priority}
            onChange={(e) => setPriority(e.target.value as any)}
@@ -142,13 +144,13 @@ export default function TaskForm({

      <div className="grid grid-cols-2 gap-4">
        <div>
-          <label className="block text-sm font-medium mb-1">Skupina</label>
+          <label className="block text-sm font-medium mb-1">{t("tasks.form.group")}</label>
          <select
            value={groupId}
            onChange={(e) => setGroupId(e.target.value as any)}
            className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 outline-none min-h-[44px]"
          >
-            <option value="">-- Bez skupiny --</option>
+            <option value="">{t("tasks.form.noGroup")}</option>
            {groups.map((g) => (
              <option key={g.id} value={g.id}>
                {g.icon ? `${g.icon} ` : ""}{g.name}
@@ -158,7 +160,7 @@ export default function TaskForm({
        </div>

        <div>
-          <label className="block text-sm font-medium mb-1">Termín</label>
+          <label className="block text-sm font-medium mb-1">{t("tasks.form.dueDate")}</label>
          <input
            type="datetime-local"
            value={dueAt}
@@ -174,14 +176,14 @@ export default function TaskForm({
          disabled={loading}
          className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors disabled:opacity-50 min-h-[44px]"
        >
-          {loading ? "Ukládám..." : submitLabel}
+          {loading ? t("tasks.form.saving") : (submitLabel || t("tasks.form.save"))}
        </button>
        <button
          type="button"
          onClick={onCancel}
          className="px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors min-h-[44px]"
        >
-          Zrušit
+          {t("tasks.form.cancel")}
        </button>
      </div>
    </form>
--- a/apps/tasks/components/TaskModal.tsx
+++ b/apps/tasks/components/TaskModal.tsx
@@ -2,6 +2,7 @@

 import { useEffect, useState, useCallback } from "react";
 import { Group, Task } from "@/lib/api";
+import { useTranslation } from "@/lib/i18n";
 import TaskForm from "@/components/TaskForm";

 interface TaskModalProps {
@@ -12,6 +13,7 @@ interface TaskModalProps {

 export default function TaskModal({ groups, onSubmit, onClose }: TaskModalProps) {
  const [visible, setVisible] = useState(false);
+  const { t } = useTranslation();

  const handleClose = useCallback(() => {
    setVisible(false);
@@ -41,7 +43,7 @@ export default function TaskModal({ groups, onSubmit, onClose }: TaskModalProps)
      className="fixed inset-0 z-50 flex items-end sm:items-center justify-center"
      role="dialog"
      aria-modal="true"
-      aria-label="Nový úkol"
+      aria-label={t("tasks.newTask")}
    >
      {/* Backdrop */}
      <div
@@ -65,11 +67,11 @@ export default function TaskModal({ groups, onSubmit, onClose }: TaskModalProps)
        </div>

        <div className="flex items-center justify-between mb-5">
-          <h2 className="text-lg font-semibold">Nový úkol</h2>
+          <h2 className="text-lg font-semibold">{t("tasks.newTask")}</h2>
          <button
            onClick={handleClose}
            className="p-2 rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors min-w-[44px] min-h-[44px] flex items-center justify-center"
-            aria-label="Zavřít"
+            aria-label={t("tasks.close")}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
@@ -90,7 +92,6 @@ export default function TaskModal({ groups, onSubmit, onClose }: TaskModalProps)
          groups={groups}
          onSubmit={onSubmit}
          onCancel={handleClose}
-          submitLabel="Vytvořit"
        />
      </div>
    </div>