+
{loading ? (
-
Loading vocabulary...
+
Loading text pairs...
) : textPairs.length === 0 ? (
-
No vocabulary items
+
No text pair items
) : (
{textPairs.map((textPair) => (
-
+ {
+ deleteTextPairById(textPair.id);
+ refreshTextPairs();
+ }}
+ refreshTextPairs={refreshTextPairs}
+ />
))}
)}
+ />
);
}
diff --git a/src/app/folders/[folder_id]/TextPairCard.tsx b/src/app/folders/[folder_id]/TextPairCard.tsx
new file mode 100644
index 0000000..848fec8
--- /dev/null
+++ b/src/app/folders/[folder_id]/TextPairCard.tsx
@@ -0,0 +1,63 @@
+import { Edit, Trash2 } from "lucide-react";
+import { TextPair } from "./InFolder";
+import { updateTextPairById } from "@/lib/services/textPairService";
+import { useState } from "react";
+import { text_pairUpdateInput } from "../../../../generated/prisma/models";
+import UpdateTextPairModal from "./UpdateTextPairModal";
+
+interface TextPairCardProps {
+ textPair: TextPair;
+ onDel: () => void;
+ refreshTextPairs: () => void;
+}
+
+export default function TextPairCard({
+ textPair,
+ onDel,
+ refreshTextPairs,
+}: TextPairCardProps) {
+ const [openUpdateModal, setOpenUpdateModal] = useState(false);
+ return (
+
+
+
+
+
+ {textPair.locale1.toUpperCase()}
+
+ →
+
+ {textPair.locale2.toUpperCase()}
+
+
+
+
+
+
+
+
+
+
{textPair.text1}
+
{textPair.text2}
+
+
+
setOpenUpdateModal(false)}
+ onUpdate={async (id: number, data: text_pairUpdateInput) => {
+ await updateTextPairById(id, data);
+ setOpenUpdateModal(false);
+ refreshTextPairs();
+ }}
+ textPair={textPair}
+ />
+
+ );
+}
diff --git a/src/app/folders/[folder_id]/UpdateTextPairModal.tsx b/src/app/folders/[folder_id]/UpdateTextPairModal.tsx
new file mode 100644
index 0000000..bd6636b
--- /dev/null
+++ b/src/app/folders/[folder_id]/UpdateTextPairModal.tsx
@@ -0,0 +1,90 @@
+import LightButton from "@/components/buttons/LightButton";
+import Input from "@/components/Input";
+import { X } from "lucide-react";
+import { useRef } from "react";
+import { text_pairUpdateInput } from "../../../../generated/prisma/models";
+import { TextPair } from "./InFolder";
+
+interface UpdateTextPairModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ textPair: TextPair;
+ onUpdate: (id: number, tp: text_pairUpdateInput) => void;
+}
+
+export default function UpdateTextPairModal({
+ isOpen,
+ onClose,
+ onUpdate,
+ textPair,
+}: UpdateTextPairModalProps) {
+ const input1Ref = useRef
(null);
+ const input2Ref = useRef(null);
+ const input3Ref = useRef(null);
+ const input4Ref = useRef(null);
+ if (!isOpen) return null;
+
+ const handleUpdate = () => {
+ if (
+ !input1Ref.current?.value ||
+ !input2Ref.current?.value ||
+ !input3Ref.current?.value ||
+ !input4Ref.current?.value
+ )
+ return;
+
+ const text1 = input1Ref.current.value;
+ const text2 = input2Ref.current.value;
+ const locale1 = input3Ref.current.value;
+ const locale2 = input4Ref.current.value;
+ if (
+ typeof text1 === "string" &&
+ typeof text2 === "string" &&
+ typeof locale1 === "string" &&
+ typeof locale2 === "string" &&
+ text1.trim() !== "" &&
+ text2.trim() !== "" &&
+ locale1.trim() !== "" &&
+ locale2.trim() !== ""
+ ) {
+ onUpdate(textPair.id, { text1, text2, locale1, locale2 });
+ input1Ref.current.value = "";
+ input2Ref.current.value = "";
+ }
+ };
+ return (
+ {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ handleUpdate();
+ }
+ }}
+ >
+
+
+
+ Update Text Pair
+
+
+
+
+
Update
+
+