Feature/14 journal entry update delete

drizzle/migrations.js

@@ -1,12 +1,11 @@
 // This file is required for Expo/React Native SQLite migrations - https://orm.drizzle.team/quick-sqlite/expo
 
-import journal from './meta/_journal.json';
-import m0000 from './0000_young_bulldozer.sql';
+import m0000 from "./0000_young_bulldozer.sql";
+import journal from "./meta/_journal.json";
 
-  export default {
-    journal,
-    migrations: {
-      m0000
-    }
-  }
-
+export default {
+  journal,
+  migrations: {
+    m0000,
+  },
+};

src/app/(journal)/[id].tsx

@@ -1,37 +1,33 @@
 import { useState } from "react";
 
-import { Stack, useLocalSearchParams } from "expo-router";
+import { Stack, useLocalSearchParams, useRouter } from "expo-router";
 
 import { EntryListView } from "@/components/entry/entry-list-view";
-
-/**
- * ソート一覧
- */
-export type SortKey =
-  | "dateDesc"
-  | "dateAsc"
-  | "titleAsc"
-  | "titleDesc"
-  | "bookmark";
-
-/**
- * ソートラベル
- */
-const SORT_LABELS: Record<SortKey, string> = {
-  dateDesc: "Newest First",
-  dateAsc: "Oldest First",
-  titleAsc: "Title (A→Z)",
-  titleDesc: "Title (Z→A)",
-  bookmark: "Bookmarked",
-};
+import { deleteAllEntries } from "@/db/queries/entries";
+import { SortKey } from "@/utils/entry/consts";
 
 /**
  * ジャーナル詳細(エントリー一覧)
  */
 export default function JournalScreen() {
-  const { id, name } = useLocalSearchParams<{ id: string; name: string }>();
-  const [searchText, setSearchText] = useState<string>("");
-  const [sortKey, setSortKey] = useState<SortKey>("dateDesc");
+  const router = useRouter();
+
+  const { id: journalId, name } = useLocalSearchParams<{
+    id: string;
+    name: string;
+  }>();
+
+  const [filter, setFilter] = useState<{
+    searchText: string;
+    sortKey: SortKey;
+  }>({
+    searchText: "",
+    sortKey: "dateDesc",
+  });
+
+  const handleDeleteAll = async () => {
+    await deleteAllEntries(journalId).catch(console.error);
+  };
 
   return (
     <>
@@ -42,10 +38,61 @@ export default function JournalScreen() {
           headerSearchBarOptions: {
             placeholder: "Search",
             hideWhenScrolling: false,
-            onChangeText: (e) => setSearchText(e.nativeEvent.text),
-            onCancelButtonPress: () => setSearchText(""),
+            onChangeText: (e) => {
+              const text = e.nativeEvent?.text ?? "";
+              setFilter((prev) => ({ ...prev, searchText: text }));
+            },
+            onCancelButtonPress: () =>
+              setFilter((prev) => ({ ...prev, searchText: "" })),
           },
           unstable_headerRightItems: () => [
+            {
+              type: "menu",
+              label: "Sort",
+              icon: {
+                type: "sfSymbol",
+                name: "arrow.up.arrow.down",
+              },
+              menu: {
+                items: [
+                  {
+                    type: "action",
+                    label: "Newest First",
+                    state: filter.sortKey === "dateDesc" ? "on" : "off",
+                    onPress: () =>
+                      setFilter((prev) => ({ ...prev, sortKey: "dateDesc" })),
+                  },
+                  {
+                    type: "action",
+                    label: "Oldest First",
+                    state: filter.sortKey === "dateAsc" ? "on" : "off",
+                    onPress: () =>
+                      setFilter((prev) => ({ ...prev, sortKey: "dateAsc" })),
+                  },
+                  {
+                    type: "action",
+                    label: "Title (A→Z)",
+                    state: filter.sortKey === "titleAsc" ? "on" : "off",
+                    onPress: () =>
+                      setFilter((prev) => ({ ...prev, sortKey: "titleAsc" })),
+                  },
+                  {
+                    type: "action",
+                    label: "Title (Z→A)",
+                    state: filter.sortKey === "titleDesc" ? "on" : "off",
+                    onPress: () =>
+                      setFilter((prev) => ({ ...prev, sortKey: "titleDesc" })),
+                  },
+                  {
+                    type: "action",
+                    label: "Bookmarked",
+                    state: filter.sortKey === "bookmark" ? "on" : "off",
+                    onPress: () =>
+                      setFilter((prev) => ({ ...prev, sortKey: "bookmark" })),
+                  },
+                ],
+              },
+            },
             {
               type: "menu",
               label: "Options",
@@ -56,88 +103,37 @@ export default function JournalScreen() {
               menu: {
                 items: [
                   {
-                    type: "submenu",
-                    label: "",
-                    inline: true,
-                    items: [
-                      {
-                        type: "submenu",
-                        label: "Sort",
-                        details: SORT_LABELS[sortKey],
-                        icon: {
-                          type: "sfSymbol",
-                          name: "arrow.up.arrow.down",
-                        },
-                        items: [
-                          {
-                            type: "action",
-                            label: "Newest First",
-                            state: sortKey === "dateDesc" ? "on" : "off",
-                            onPress: () => setSortKey("dateDesc"),
-                          },
-                          {
-                            type: "action",
-                            label: "Oldest First",
-                            state: sortKey === "dateAsc" ? "on" : "off",
-                            onPress: () => setSortKey("dateAsc"),
-                          },
-                          {
-                            type: "action",
-                            label: "Title (A→Z)",
-                            state: sortKey === "titleAsc" ? "on" : "off",
-                            onPress: () => setSortKey("titleAsc"),
-                          },
-                          {
-                            type: "action",
-                            label: "Title (Z→A)",
-                            state: sortKey === "titleDesc" ? "on" : "off",
-                            onPress: () => setSortKey("titleDesc"),
-                          },
-                          {
-                            type: "action",
-                            label: "Bookmarked",
-                            state: sortKey === "bookmark" ? "on" : "off",
-                            onPress: () => setSortKey("bookmark"),
-                          },
-                        ],
-                      },
-                      {
-                        type: "action",
-                        icon: {
-                          type: "sfSymbol",
-                          name: "ellipsis.circle",
-                        },
-                        label: "Edit Journal",
-                        onPress: () => {
-                          // Do something
-                          console.log("Edit Journal");
-                        },
-                      },
-                      {
-                        type: "action",
-                        icon: {
-                          type: "sfSymbol",
-                          name: "square.and.arrow.up.on.square",
-                        },
-                        label: "Export",
-                        onPress: () => {
-                          // Do something
-                        },
-                      },
-                    ],
+                    type: "action",
+                    icon: {
+                      type: "sfSymbol",
+                      name: "ellipsis.circle",
+                    },
+                    label: "Edit",
+                    onPress: () => {
+                      router.push(`/(journal)/edit?journalId=${journalId}`);
+                    },
                   },
                   {
                     type: "action",
                     icon: {
                       type: "sfSymbol",
-                      name: "trash",
+                      name: "square.and.arrow.up.on.square",
                     },
-                    destructive: true,
-                    label: "Delete All",
+                    label: "Export",
                     onPress: () => {
                       // Do something
                     },
                   },
+                  {
+                    type: "action",
+                    label: "Delete All Entries",
+                    icon: {
+                      type: "sfSymbol",
+                      name: "trash",
+                    },
+                    destructive: true,
+                    onPress: handleDeleteAll,
+                  },
                 ],
               },
             },
@@ -147,10 +143,10 @@ export default function JournalScreen() {
       {/* TODO: 空の場合の処理を追加する */}
       {/* エントリー一覧にはheaderTitleのデータは含まないので src/app/(journal)/entry/[id].tsx と混同しないように。 */}
       <EntryListView
-        id={id}
+        journalId={journalId}
         journalName={name}
-        searchText={searchText}
-        sortKey={sortKey}
+        searchText={filter.searchText}
+        sortKey={filter.sortKey}
       />
     </>
   );

src/app/(journal)/create.tsx

@@ -1,7 +1,6 @@
-import { PlatformColor, Pressable } from "react-native";
+import { Keyboard, PlatformColor } from "react-native";
 
 import { Stack, useRouter } from "expo-router";
-import { SymbolView } from "expo-symbols";
 
 import { JournalCreateView } from "@/components/journal/journal-create-view";
 import { useJournalField } from "@/utils/journal/use-journal-field";
@@ -25,6 +24,7 @@ export default function JournalCreateScreen() {
   } = useJournalField();
 
   const handleJournalCreate = async () => {
+    Keyboard.dismiss();
     const { id: newJournalId, name } = await createJournal();
 
     // replace でスタックせずにジャーナル詳細画面からジャーナル一覧へ戻れるようにする
@@ -36,18 +36,18 @@ export default function JournalCreateScreen() {
       <Stack.Screen
         options={{
           title: "New Journal",
-          headerRight: () => (
-            <Pressable onPress={handleJournalCreate} disabled={formDisabled}>
-              <SymbolView
-                name="checkmark"
-                tintColor={
-                  formDisabled
-                    ? PlatformColor("tertiaryLabel")
-                    : PlatformColor("systemIndigo")
-                }
-              />
-            </Pressable>
-          ),
+          unstable_headerRightItems: () => [
+            {
+              type: "button",
+              label: "Save",
+              icon: { type: "sfSymbol", name: "checkmark" },
+              tintColor: formDisabled
+                ? PlatformColor("tertiaryLabel")
+                : PlatformColor("systemIndigo"),
+              disabled: formDisabled,
+              onPress: formDisabled ? () => {} : handleJournalCreate,
+            },
+          ],
         }}
       />
       <JournalCreateView