frontend: implement getting next id while creating new cards

NickSavage · Dec 21, 2024 · 1616a33 · 1616a33
1 parent abef125
commit 1616a33
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 46 deletions.
diff --git a/zettelkasten-front/src/api/cards.ts b/zettelkasten-front/src/api/cards.ts
@@ -154,39 +154,39 @@ export function getCard(id: string): Promise<Card> {
           let children =
             card.children !== null
               ? card.children.map((child) => {
-                  return {
-                    ...child,
-                    created_at: new Date(child.created_at),
-                    updated_at: new Date(child.updated_at),
-                  };
-                })
+                return {
+                  ...child,
+                  created_at: new Date(child.created_at),
+                  updated_at: new Date(child.updated_at),
+                };
+              })
               : [];
           let references =
             card.references !== null
               ? card.references.map((ref) => {
-                  return {
-                    ...ref,
-                    created_at: new Date(ref.created_at),
-                    updated_at: new Date(ref.updated_at),
-                  };
-                })
+                return {
+                  ...ref,
+                  created_at: new Date(ref.created_at),
+                  updated_at: new Date(ref.updated_at),
+                };
+              })
               : [];
           let tasks =
             card.tasks !== null
               ? card.tasks.map((task) => {
-                  return {
-                    ...task,
-                    scheduled_date: task.scheduled_date
-                      ? new Date(task.scheduled_date)
-                      : null,
-                    dueDate: task.dueDate ? new Date(task.dueDate) : null,
-                    created_at: new Date(task.created_at),
-                    updated_at: new Date(task.updated_at),
-                    completed_at: task.completed_at
-                      ? new Date(task.completed_at)
-                      : null,
-                  };
-                })
+                return {
+                  ...task,
+                  scheduled_date: task.scheduled_date
+                    ? new Date(task.scheduled_date)
+                    : null,
+                  dueDate: task.dueDate ? new Date(task.dueDate) : null,
+                  created_at: new Date(task.created_at),
+                  updated_at: new Date(task.updated_at),
+                  completed_at: task.completed_at
+                    ? new Date(task.completed_at)
+                    : null,
+                };
+              })
               : [];
           return {
             ...card,
@@ -309,18 +309,12 @@ export function deleteCard(id: number): Promise<Card | null> {
       }
     });
 }
-export async function getNextId(cardType: string): Promise<NextIdResponse> {
-  const url = `${base_url}/cards/next`;
-
+export async function getNextRootId(): Promise<NextIdResponse> {
+  const url = `${base_url}/cards/next-root-id`;
   let token = localStorage.getItem("token");
 
   return await fetch(url, {
-    method: "POST",
-    body: JSON.stringify({ card_type: cardType }),
-    headers: {
-      Authorization: `Bearer ${token}`,
-      "Content-Type": "application/json",
-    },
+    headers: { Authorization: `Bearer ${token}` },
   })
     .then(checkStatus)
     .then((response) => {

diff --git a/zettelkasten-front/src/models/Card.ts b/zettelkasten-front/src/models/Card.ts
@@ -94,7 +94,7 @@ export const defaultCard: Card = {
 export interface NextIdResponse {
   error: boolean;
   message: string;
-  new_id: string;
+  new_id: string;  // Matches the actual backend response
 }
 
 export interface FlashcardRecordNextParams {

diff --git a/zettelkasten-front/src/pages/cards/EditPage.tsx b/zettelkasten-front/src/pages/cards/EditPage.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { isCardIdUnique } from "../../utils/cards";
 import { uploadFile } from "../../api/files";
 import { parseURL } from "../../api/references";
-import { saveNewCard, saveExistingCard, getCard } from "../../api/cards";
+import { saveNewCard, saveExistingCard, getCard, getNextRootId } from "../../api/cards";
 import { editFile } from "../../api/files";
 import { FileListItem } from "../../components/files/FileListItem";
 import { BacklinkInput } from "../../components/cards/BacklinkInput";
@@ -173,16 +173,36 @@ export function EditPage({ newCard }: EditPageProps) {
               Card ID:
             </label>
             <div className="flex items-center gap-3">
-              <input
-                type="text"
-                id="card_id"
-                value={editingCard.card_id}
-                onChange={(e) =>
-                  setEditingCard({ ...editingCard, card_id: e.target.value })
-                }
-                placeholder="ID"
-                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
-              />
+              <div className="flex-1 relative">
+                <input
+                  type="text"
+                  id="card_id"
+                  value={editingCard.card_id}
+                  onChange={(e) =>
+                    setEditingCard({ ...editingCard, card_id: e.target.value })
+                  }
+                  placeholder="ID"
+                  className="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm pr-24"
+                />
+                {newCard && (
+                  <button
+                    onClick={async () => {
+                      try {
+                        const response = await getNextRootId();
+                        if (!response.error) {
+                          setEditingCard({ ...editingCard, card_id: response.new_id });
+                        }
+                      } catch (error) {
+                        console.error("Failed to get next ID:", error);
+                      }
+                    }}
+                    className="absolute right-2 top-1/2 -translate-y-1/2 text-sm text-blue-600 hover:text-blue-800"
+                    type="button"
+                  >
+                    Get Next ID
+                  </button>
+                )}
+              </div>
               {newCard && renderWarningLabel(partialCards, editingCard)}
             </div>
           </div>