Include locale on all links and routers

2024-05-04 12:19:53 +09:00
parent ec9e2da7bc
commit 747d191412
20 changed files with 104 additions and 61 deletions
--- a/frontend/src/app/[locale]/LangSwitch.tsx
+++ b/frontend/src/app/[locale]/LangSwitch.tsx
@@ -21,7 +21,7 @@ export default function LangSwitch(params: { locale: string }) {

  async function changeLocale(nextLocale: string) {
    let newPathname;
-    if (params.locale.length < 4) {
+    if (pathname.length < 4) {
      // when root path
      router.push("/", { locale: nextLocale });
    } else {
--- a/frontend/src/app/[locale]/layout.tsx
+++ b/frontend/src/app/[locale]/layout.tsx
@@ -43,17 +43,6 @@ export default function RootLayout({
          <div className="relative flex flex-col min-h-screen light:bg-neutral-50 dark:bg-neutral-800">
            <Header locale={locale} />
            <main>{children}</main>
-            {/* <footer className="w-full flex items-center justify-center py-3">
-              <Link
-                isExternal
-                className="flex items-center gap-1 text-current"
-                href="https://nextui-docs-v2.vercel.app?utm_source=next-app-template"
-                title="nextui.org homepage"
-              >
-                <span className="text-default-600">Powered by</span>
-                <p className="text-primary">NextUI</p>
-              </Link>
-            </footer> */}
          </div>
        </Providers>
      </body>
--- a/frontend/src/app/[locale]/projects/ProjectsPage.tsx
+++ b/frontend/src/app/[locale]/projects/ProjectsPage.tsx
@@ -14,9 +14,10 @@ import {

 export type Props = {
  messages: ProjectsMessages;
+  locale: string;
 };

-export default function ProjectsPage({ messages }: Props) {
+export default function ProjectsPage({ messages, locale }: Props) {
  const [projects, setProjects] = useState([]);

  useEffect(() => {
@@ -101,6 +102,7 @@ export default function ProjectsPage({ messages }: Props) {
          onEditProject={onEditClick}
          onDeleteProject={onDeleteClick}
          messages={messages}
+          locale={locale}
        />

        <ProjectDialog
--- a/frontend/src/app/[locale]/projects/ProjectsTable.tsx
+++ b/frontend/src/app/[locale]/projects/ProjectsTable.tsx
@@ -12,8 +12,8 @@ import {
  DropdownMenu,
  DropdownItem,
  SortDescriptor,
-  Link,
 } from "@nextui-org/react";
+import { Link, NextUiLinkClasses } from "@/src/navigation";
 import { MoreVertical } from "lucide-react";
 import { ProjectType, ProjectsMessages } from "@/types/project";
 import dayjs from "dayjs";
@@ -23,6 +23,7 @@ type Props = {
  onEditProject: (project: ProjectType) => void;
  onDeleteProject: (projectId: number) => void;
  messages: ProjectsMessages;
+  locale: string;
 };

 export default function ProjectsTable({
@@ -30,6 +31,7 @@ export default function ProjectsTable({
  onEditProject,
  onDeleteProject,
  messages,
+  locale,
 }: Props) {
  const headerColumns = [
    { name: messages.id, uid: "id", sortable: true },
@@ -67,9 +69,9 @@ export default function ProjectsTable({
      case "name":
        return (
          <Link
-            underline="hover"
            href={`/projects/${project.id}/home`}
-            className="text-blue-500"
+            locale={locale}
+            className={NextUiLinkClasses}
          >
            {cellValue}
          </Link>
--- a/frontend/src/app/[locale]/projects/[projectId]/Sidebar.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/Sidebar.tsx
@@ -2,10 +2,14 @@
 import { useState, useEffect } from "react";
 import { Listbox, ListboxItem } from "@nextui-org/react";
 import { Home, Files, FlaskConical } from "lucide-react";
-import { useRouter, usePathname } from "next/navigation";
+import { usePathname, useRouter } from "@/src/navigation";
 import useGetCurrentIds from "@/utils/useGetCurrentIds";

-export default function Sidebar() {
+export type Props = {
+  locale: string;
+};
+
+export default function Sidebar({ locale }: Props) {
  const { projectId } = useGetCurrentIds();
  const router = useRouter();
  const pathname = usePathname();
@@ -16,11 +20,11 @@ export default function Sidebar() {

  const handleTabClick = (key: string) => {
    if (key === "home") {
-      router.push(`/projects/${projectId}/home`);
+      router.push(`/projects/${projectId}/home`, { locale: locale });
    } else if (key === "cases") {
-      router.push(`/projects/${projectId}/folders`);
+      router.push(`/projects/${projectId}/folders`, { locale: locale });
    } else if (key === "runs") {
-      router.push(`/projects/${projectId}/runs`);
+      router.push(`/projects/${projectId}/runs`, { locale: locale });
    }
  };

@@ -58,13 +62,8 @@ export default function Sidebar() {

  return (
    <div className="w-64 border-r-1 dark:border-neutral-700">
-      <Listbox
-        aria-label="Listbox Variants"
-        variant="light"
-        className="p-0"
-        onClick={() => router.push(`/projects/${projectId}/home`)}
-      >
-        {tabItems.map((itr, index) => (
+      <Listbox aria-label="Listbox Variants" variant="light" className="p-0">
+        {tabItems.map((itr) => (
          <ListboxItem
            key={itr.key}
            startContent={itr.startContent}
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/FoldersPane.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/FoldersPane.tsx
@@ -4,7 +4,7 @@ import { FolderType } from "@/types/folder";
 import { useEffect, useState } from "react";
 import { Button, Listbox, ListboxItem } from "@nextui-org/react";
 import { Folder, Plus } from "lucide-react";
-import { useRouter, usePathname } from "next/navigation";
+import { usePathname, useRouter } from "@/src/navigation";
 import useGetCurrentIds from "@/utils/useGetCurrentIds";
 import FolderDialog from "./FolderDialog";
 import FolderEditMenu from "./FolderEditMenu";
@@ -18,9 +18,10 @@ import {

 type Props = {
  projectId: string;
+  locale: string;
 };

-export default function FoldersPane({ projectId }: Props) {
+export default function FoldersPane({ projectId, locale }: Props) {
  const router = useRouter();
  const pathname = usePathname();
  const [folders, setFolders] = useState([]);
@@ -68,7 +69,7 @@ export default function FoldersPane({ projectId }: Props) {

  const onDeleteClick = async (folderId: number) => {
    await deleteFolder(folderId);
-    router.push(`/projects/${projectId}/folders`);
+    router.push(`/projects/${projectId}/folders`, { locale: locale });
  };

  useEffect(() => {
@@ -86,7 +87,8 @@ export default function FoldersPane({ projectId }: Props) {
        if (pathname === `/projects/${projectId}/folders`) {
          const smallestFolderId = Math.min(...data.map((folder) => folder.id));
          router.push(
-            `/projects/${projectId}/folders/${smallestFolderId}/cases`
+            `/projects/${projectId}/folders/${smallestFolderId}/cases`,
+            { locale: locale }
          );
        }
      } catch (error: any) {
@@ -117,7 +119,10 @@ export default function FoldersPane({ projectId }: Props) {
            <ListboxItem
              key={index}
              onClick={() =>
-                router.push(`/projects/${projectId}/folders/${folder.id}/cases`)
+                router.push(
+                  `/projects/${projectId}/folders/${folder.id}/cases`,
+                  { locale: locale }
+                )
              }
              startContent={<Folder size={20} color="#F7C24E" fill="#F7C24E" />}
              className={
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx
@@ -6,9 +6,10 @@ import { fetchCases, createCase, deleteCase, deleteCases } from "./caseControl";
 type Props = {
  projectId: string;
  folderId: string;
+  locale: string;
 };

-export default function CasesPane({ projectId, folderId }: Props) {
+export default function CasesPane({ projectId, folderId, locale }: Props) {
  const [cases, setCases] = useState([]);
  useEffect(() => {
    async function fetchDataEffect() {
@@ -50,6 +51,7 @@ export default function CasesPane({ projectId, folderId }: Props) {
        onCreateCase={() => handleCreateCase(folderId)}
        onDeleteCase={handleDeleteCase}
        onDeleteCases={handleDeleteCases}
+        locale={locale}
      />
    </>
  );
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx
@@ -13,8 +13,8 @@ import {
  DropdownItem,
  Selection,
  SortDescriptor,
-  Link,
 } from "@nextui-org/react";
+import { Link, NextUiLinkClasses } from "@/src/navigation";
 import { Plus, MoreVertical, Trash, Circle } from "lucide-react";

 const headerColumns = [
@@ -48,6 +48,7 @@ type Props = {
  onCreateCase: () => void;
  onDeleteCase: (caseId: number) => void;
  onDeleteCases: (selectedCases: string[]) => void;
+  locale: string;
 };

 export default function TestCaseTable({
@@ -56,6 +57,7 @@ export default function TestCaseTable({
  onCreateCase,
  onDeleteCase,
  onDeleteCases,
+  locale,
 }: Props) {
  const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([]));
  const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
@@ -81,9 +83,9 @@ export default function TestCaseTable({
      case "title":
        return (
          <Link
-            underline="hover"
            href={`/projects/${projectId}/folders/${testCase.folderId}/cases/${testCase.id}`}
-            className="dark:text-white"
+            locale={locale}
+            className={NextUiLinkClasses}
          >
            {cellValue}
          </Link>
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx
@@ -9,7 +9,7 @@ import {
  Divider,
  Tooltip,
 } from "@nextui-org/react";
-import { useRouter } from "next/navigation";
+import { useRouter } from "@/src/navigation";
 import { Save, Plus, ArrowLeft, ArrowUpFromLine, Circle } from "lucide-react";
 import { priorities, testTypes, templates } from "@/config/selection";
 import CaseStepsEditor from "./CaseStepsEditor";
@@ -40,7 +40,12 @@ const defaultTestCase = {
 export default function CaseEditor({
  params,
 }: {
-  params: { projectId: string; folderId: string; caseId: string };
+  params: {
+    projectId: string;
+    folderId: string;
+    caseId: string;
+    locale: string;
+  };
 }) {
  const [testCase, setTestCase] = useState<CaseType>(defaultTestCase);
  const [isTitleInvalid, setIsTitleInvalid] = useState<boolean>(false);
@@ -171,7 +176,8 @@ export default function CaseEditor({
              className="rounded-full bg-neutral-50 dark:bg-neutral-600"
              onPress={() =>
                router.push(
-                  `/projects/${params.projectId}/folders/${params.folderId}/cases`
+                  `/projects/${params.projectId}/folders/${params.folderId}/cases`,
+                  { locale: params.locale }
                )
              }
            >
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx
@@ -3,7 +3,12 @@ import CaseEditor from "./CaseEditor";
 export default function Page({
  params,
 }: {
-  params: { projectId: string; folderId: string; caseId: string };
+  params: {
+    projectId: string;
+    folderId: string;
+    caseId: string;
+    locale: string;
+  };
 }) {
  return (
    <CaseEditor
@@ -11,6 +16,7 @@ export default function Page({
        projectId: params.projectId,
        folderId: params.folderId,
        caseId: params.caseId,
+        locale: params.locale,
      }}
    />
  );
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/page.tsx
@@ -3,11 +3,15 @@ import CasesPane from "./CasesPane";
 export default function Page({
  params,
 }: {
-  params: { projectId: string; folderId: string };
+  params: { projectId: string; folderId: string; locale: string };
 }) {
  return (
    <>
-      <CasesPane projectId={params.projectId} folderId={params.folderId} />
+      <CasesPane
+        projectId={params.projectId}
+        folderId={params.folderId}
+        locale={params.locale}
+      />
    </>
  );
 }
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/layout.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/layout.tsx
@@ -5,11 +5,11 @@ export default function FoldersLayout({
  params,
 }: {
  children: React.ReactNode;
-  params: { projectId: string };
+  params: { projectId: string; locale: string };
 }) {
  return (
    <div className="flex w-full">
-      <FoldersPane projectId={params.projectId} />
+      <FoldersPane projectId={params.projectId} locale={params.locale} />
      <div className="flex-grow w-full">{children}</div>
    </div>
  );
--- a/frontend/src/app/[locale]/projects/[projectId]/layout.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/layout.tsx
@@ -1,14 +1,16 @@
-import Sidebar from "./sidebar";
+import Sidebar from "./Sidebar";

 export default function SidebarLayout({
  children,
+  params: { locale },
 }: {
  children: React.ReactNode;
+  params: { locale: string };
 }) {
  return (
    <>
      <div className="flex border-t-1 dark:border-neutral-700 min-h-[calc(100vh-64px)]">
-        <Sidebar />
+        <Sidebar locale={locale} />
        <div className="flex w-full">
          <div className="flex-grow">{children}</div>
        </div>
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/RunsPage.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/RunsPage.tsx
@@ -7,9 +7,10 @@ import { fetchRuns, createRun, deleteRun } from "./runsControl";

 type Props = {
  projectId: string;
+  locale: string;
 };

-export default function RunsPage({ projectId }: Props) {
+export default function RunsPage({ projectId, locale }: Props) {
  const [runs, setRuns] = useState([]);

  useEffect(() => {
@@ -66,6 +67,7 @@ export default function RunsPage({ projectId }: Props) {
        projectId={projectId}
        runs={runs}
        onDeleteRun={onDeleteClick}
+        locale={locale}
      />
    </div>
  );
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/RunsTable.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/RunsTable.tsx
@@ -12,8 +12,8 @@ import {
  DropdownMenu,
  DropdownItem,
  SortDescriptor,
-  Link,
 } from "@nextui-org/react";
+import { Link, NextUiLinkClasses } from "@/src/navigation";
 import { MoreVertical } from "lucide-react";
 import { RunType } from "@/types/run";
 import dayjs from "dayjs";
@@ -30,9 +30,15 @@ type Props = {
  projectId: string;
  runs: RunType[];
  onDeleteRun: (runId: number) => void;
+  locale: string;
 };

-export default function RunsTable({ projectId, runs, onDeleteRun }: Props) {
+export default function RunsTable({
+  projectId,
+  runs,
+  onDeleteRun,
+  locale,
+}: Props) {
  const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
    column: "id",
    direction: "ascending",
@@ -61,9 +67,9 @@ export default function RunsTable({ projectId, runs, onDeleteRun }: Props) {
      case "name":
        return (
          <Link
-            underline="hover"
            href={`/projects/${projectId}/runs/${run.id}`}
-            className="text-blue-500"
+            locale={locale}
+            className={NextUiLinkClasses}
          >
            {cellValue}
          </Link>
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx
@@ -1,7 +1,7 @@
 "use client";
 import React from "react";
 import { useState, useEffect } from "react";
-import { useRouter } from "next/navigation";
+import { useRouter } from "@/src/navigation";
 import {
  Button,
  Input,
@@ -63,9 +63,10 @@ const defaultTestRun = {
 type Props = {
  projectId: string;
  runId: string;
+  locale: string;
 };

-export default function RunEditor({ projectId, runId }: Props) {
+export default function RunEditor({ projectId, runId, locale }: Props) {
  const [testRun, setTestRun] = useState<RunType>(defaultTestRun);
  const [folders, setFolders] = useState([]);
  const [runCases, setRunCases] = useState<RunCaseType[]>([]);
@@ -220,7 +221,9 @@ export default function RunEditor({ projectId, runId }: Props) {
              isIconOnly
              size="sm"
              className="rounded-full bg-neutral-50 dark:bg-neutral-600"
-              onPress={() => router.push(`/projects/${projectId}/runs`)}
+              onPress={() =>
+                router.push(`/projects/${projectId}/runs`, { locale: locale })
+              }
            >
              <ArrowLeft size={16} />
            </Button>
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/page.tsx
@@ -3,7 +3,13 @@ import RunEditor from "./RunEditor";
 export default function Page({
  params,
 }: {
-  params: { projectId: string; runId: string };
+  params: { projectId: string; runId: string; locale: string };
 }) {
-  return <RunEditor projectId={params.projectId} runId={params.runId} />;
+  return (
+    <RunEditor
+      projectId={params.projectId}
+      runId={params.runId}
+      locale={params.locale}
+    />
+  );
 }
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/page.tsx
@@ -1,9 +1,13 @@
 import RunsPage from "./RunsPage";

-export default function Page({ params }: { params: { projectId: string } }) {
+export default function Page({
+  params,
+}: {
+  params: { projectId: string; locale: string };
+}) {
  return (
    <>
-      <RunsPage projectId={params.projectId} />
+      <RunsPage projectId={params.projectId} locale={params.locale} />
    </>
  );
 }
--- a/frontend/src/app/[locale]/projects/page.tsx
+++ b/frontend/src/app/[locale]/projects/page.tsx
@@ -1,7 +1,7 @@
 import ProjectsPage from "./ProjectsPage";
 import { useTranslations } from "next-intl";

-export default function Page() {
+export default function Page(params: { locale }) {
  const t = useTranslations("Projects");
  const messages = {
    projects: t("projects"),
@@ -23,7 +23,7 @@ export default function Page() {
  };
  return (
    <>
-      <ProjectsPage messages={messages} />
+      <ProjectsPage messages={messages} locale={params.locale} />
    </>
  );
 }