t3-stack入門 (7) 詳細ページ追加&ログイン時のみDeleteボタンを表示

pages/index.tsxがテンプレート作成時のままなので、todo.tsxの内容をindex.tsxに移します。

デザインセンスがないので見てくれが悪いですが、とりあえず進めます。

Todo詳細表示ページ

src/pages/todo/[todoId].tsxにTodo詳細表示ページを作成します。
このようなプロパテイ名とその値が並んでいる画面、業務でWebアプリを作っていたときはdl/dt/ddを使うのが正しいことはわかっていたのですが、CSSでdt/ddを縦に並べるのがめんどくさいのでtableタグでやっていました。
今回はtailwinduiにそのものずばりのコンポーネントがあったのでそれを参考にします。

import { NextPage } from "next";
import { TruckReturn } from "tabler-icons-react";

import { format } from "date-fns";
import { useRouter } from "next/router";
import { Layout } from "../../components/Layout";
import { trpc } from "../../utils/trpc";
import Link from "next/link";

const SingleTodoPage: NextPage = () => {
  const router = useRouter();
  const taskId = Number(router.query.todoId);
  const { data, isLoading, error } = trpc.todo.get.useQuery({
    id: taskId,
  });
  if (isLoading) {
    return <Layout title="Task Detail">Loading single task...</Layout>;
  }
  if (error) {
    return <Layout title="Tak Detail">{error.message}</Layout>;
  }
  return (
    <Layout title="Task Detail">
      <div className="border-t">
        <dl>
          <div className="px4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt className="text-gray-500">Title</dt>
            <dd className="text-white-900 mt-1">{data?.title}</dd>
          </div>
          <div className="px py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt className="text-gray-500">Description</dt>
            <dd className="text-white-900 mt-1">{data?.description}</dd>
          </div>
          <div className="px4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt className="text-gray-500">Creted At</dt>
            <dd className="text-white-900 mt-1">
              {data && format(new Date(data.createdAt), "yyyy-MM-dd HH:mm:ss")}
            </dd>
          </div>
          <div className="px4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt className="text-gray-500">Updated At</dt>
            <dd className="text-white-900 mt-1">
              {data && format(new Date(data.updatedAt), "yyyy-MM-dd HH:mm:ss")}
            </dd>
          </div>
        </dl>
      </div>
      <Link href={`/`}>
        <TruckReturn className="mt-3 h-6 w-6 cursor-pointer text-blue-600" />
      </Link>
    </Layout>
  );
};
export default SingleTodoPage;

Todo一覧で自分のTodoのみDeleteボタンを表示する

Server側で、自分のTodoのみ削除できるように変更したので、自分のTodoのみDeleteボタンを表示するように変更します。
また、Todo詳細表示ページへのリンクを追加しておきます。

@@ -64,15 +64,17 @@ const Todo: NextPage = () => {
           <Card withBorder key={todo.id} mt={"sm"}>
             <Group position={"apart"}>
-              <Text>{todo.title}</Text>
-              <ActionIcon
-                onClick={() => {
-                  deleteTodo.mutate({ id: todo.id });
-                }}
-                color={"red"}
-                variant={"transparent"}
-              >
-                <Trash />
-              </ActionIcon>
+              <Link href={`/todo/${todo.id}`}>
+                    <span className="cursor-pointer">{todo.title}</span>
+              </Link>
+              {sessionData?.user?.id === todo.owner.id && (
+                <ActionIcon
+                  onClick={() => {
+                    deleteTodo.mutate({ id: todo.id });
+                  }}
+                  color={"red"}
+                  variant={"transparent"}
+                >
+                  <Trash />
+                </ActionIcon>
+              )}
             </Group>
           </Card>
         ))}

ちゃんと、自分のTodoのみにDeleteボタンが表示されるようになりました。

Componentを分ける

pages/index.tsxにTodoのEdit用コンポーネント、表示用コンポーネントをすべて記述していてわかりにくいのでsrc/features/todoディレクトリを作成してEdit用コンポーネント、表示用コンポーネントを独立させました。
featuresディレクトリというのは

を参考にしてつけてみました。
おかげてsrc/pages/index.tsxはだいぶすっきりしました。

ここまでの変更は以下の通りです。