goddonebianu/learn-languages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

...

Browse Source
This commit is contained in:
goddonebianu
2025-11-14 15:30:44 +08:00
parent adcb7920bd
commit cf3cb916b7
42 changed files with 939 additions and 655 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.env.example
View File

@@ -5,3 +5,4 @@ GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
NEXTAUTH_URL=
DATABASE_URL=

3
.gitignore vendored
View File

@@ -45,4 +45,5 @@ next-env.d.ts
build.sh
test.ts
test.ts
/generated/prisma

8
package.json
View File

@@ -10,13 +10,13 @@
"lint": "eslint"
},
"dependencies": {
"@prisma/client": "^6.19.0",
"bcryptjs": "^3.0.3",
"edge-tts-universal": "^1.3.2",
"lucide-react": "^0.553.0",
"next": "15.5.3",
"next-auth": "^4.24.13",
"next-intl": "^4.5.1",
"pg": "^8.16.3",
"next-intl": "^4.5.2",
"react": "19.1.0",
"react-dom": "19.1.0",
"unstorage": "^1.17.2",
@@ -27,11 +27,11 @@
"@tailwindcss/postcss": "^4.1.17",
"@types/bcryptjs": "^2.4.6",
"@types/node": "^20.19.25",
"@types/pg": "^8.15.6",
"@types/react": "^19.2.3",
"@types/react": "^19.2.4",
"@types/react-dom": "^19.2.3",
"eslint": "^9.39.1",
"eslint-config-next": "15.5.3",
"prisma": "^6.19.0",
"tailwindcss": "^4.1.17",
"typescript": "^5.9.3"
}

534
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

12
prisma.config.ts Normal file
View File

@@ -0,0 +1,12 @@
import { defineConfig, env } from "prisma/config";
export default defineConfig({
schema: "prisma/schema.prisma",
migrations: {
path: "prisma/migrations",
},
engine: "classic",
datasource: {
url: env("DATABASE_URL"),
},
});

28
prisma/migrations/0_init/migration.sql Normal file
View File

@@ -0,0 +1,28 @@
-- CreateTable
CREATE TABLE "text_pair" (
"id" SERIAL NOT NULL,
"locale1" VARCHAR(10) NOT NULL,
"locale2" VARCHAR(10) NOT NULL,
"text1" TEXT NOT NULL,
"text2" TEXT NOT NULL,
"folder_id" INTEGER NOT NULL,
"created_at" TIMESTAMPTZ(6) DEFAULT CURRENT_TIMESTAMP,
"updated_at" TIMESTAMPTZ(6) DEFAULT CURRENT_TIMESTAMP,
CONSTRAINT "text_pairs_pkey" PRIMARY KEY ("id")
);
-- CreateTable
CREATE TABLE "folder" (
"id" SERIAL NOT NULL,
"name" TEXT NOT NULL,
"owner" TEXT NOT NULL,
"created_at" TIMESTAMPTZ(6) DEFAULT CURRENT_TIMESTAMP,
"updated_at" TIMESTAMPTZ(6) DEFAULT CURRENT_TIMESTAMP,
CONSTRAINT "folders_pkey" PRIMARY KEY ("id")
);
-- AddForeignKey
ALTER TABLE "text_pair" ADD CONSTRAINT "fk_text_pairs_folder" FOREIGN KEY ("folder_id") REFERENCES "folder"("id") ON DELETE CASCADE ON UPDATE CASCADE;

31
prisma/schema.prisma Normal file
View File

@@ -0,0 +1,31 @@
generator client {
provider = "prisma-client"
output = "../generated/prisma"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
/// This table contains check constraints and requires additional setup for migrations. Visit https://pris.ly/d/check-constraints for more info.
model text_pair {
id Int @id(map: "text_pairs_pkey") @default(autoincrement())
locale1 String @db.VarChar(10)
locale2 String @db.VarChar(10)
text1 String
text2 String
folder_id Int
created_at DateTime? @default(now()) @db.Timestamptz(6)
updated_at DateTime? @default(now()) @db.Timestamptz(6)
folders folder @relation(fields: [folder_id], references: [id], onDelete: Cascade, map: "fk_text_pairs_folder")
}
model folder {
id Int @id(map: "folders_pkey") @default(autoincrement())
name String
owner String
created_at DateTime? @default(now()) @db.Timestamptz(6)
updated_at DateTime? @default(now()) @db.Timestamptz(6)
text_pair text_pair[]
}

2
src/app/alphabet/MemoryCard.tsx
View File

@@ -1,7 +1,7 @@
import LightButton from "@/components/buttons/LightButton";
import IconClick from "@/components/IconClick";
import IMAGES from "@/config/images";
import { Letter, SupportedAlphabets } from "@/interfaces";
import { Letter, SupportedAlphabets } from "@/lib/interfaces";
import {
Dispatch,
KeyboardEvent,

2
src/app/alphabet/page.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import LightButton from "@/components/buttons/LightButton";
import { Letter, SupportedAlphabets } from "@/interfaces";
import { Letter, SupportedAlphabets } from "@/lib/interfaces";
import { useEffect, useState } from "react";
import MemoryCard from "./MemoryCard";

18
src/app/api/folder/[id]/route.ts
View File

@@ -1,18 +0,0 @@
import { getServerSession } from "next-auth";
import { NextResponse } from "next/server";
import { authOptions } from "../../auth/[...nextauth]/route";
import { WordPairController } from "@/lib/db";
export async function GET({ params }: { params: { slug: number } }) {
const session = await getServerSession(authOptions);
if (session) {
const id = params.slug;
return new NextResponse(
JSON.stringify(
await WordPairController.getWordPairsByFolderId(id),
),
);
} else {
return new NextResponse("Unauthorized");
}
}

35
src/app/api/folders/route.ts
View File

@@ -1,35 +0,0 @@
import { getServerSession } from "next-auth";
import { NextRequest, NextResponse } from "next/server";
import { authOptions } from "../auth/[...nextauth]/route";
import { FolderController } from "@/lib/db";
export async function GET() {
const session = await getServerSession(authOptions);
if (session) {
return new NextResponse(
JSON.stringify(
await FolderController.getFoldersByOwner(session.user!.name as string),
),
);
} else {
return new NextResponse("Unauthorized");
}
}
export async function POST(req: NextRequest) {
const session = await getServerSession(authOptions);
if (session) {
const body = await req.json();
return new NextResponse(
JSON.stringify(
await FolderController.createFolder(
body.name,
session.user!.name as string,
),
),
);
} else {
return new NextResponse("Unauthorized");
}
}

2
src/app/api/ipa/route.ts
View File

@@ -1,4 +1,4 @@
import { callZhipuAPI, handleAPIError } from "@/utils";
import { callZhipuAPI, handleAPIError } from "@/lib/utils";
import { NextRequest, NextResponse } from "next/server";
async function getIPA(text: string) {

2
src/app/api/locale/route.ts
View File

@@ -1,4 +1,4 @@
import { callZhipuAPI } from "@/utils";
import { callZhipuAPI } from "@/lib/utils";
import { NextRequest, NextResponse } from "next/server";
async function getLocale(text: string) {

2
src/app/api/translate/route.ts
View File

@@ -1,4 +1,4 @@
import { callZhipuAPI } from "@/utils";
import { callZhipuAPI } from "@/lib/utils";
import { NextRequest, NextResponse } from "next/server";
async function translate(text: string, target_lang: string) {

158
src/app/folders/FoldersClient.tsx
View File

@@ -1,24 +1,18 @@
"use client";
import { ChevronRight, Folder, FolderPlus, Trash2 } from "lucide-react";
import { useEffect, useState } from "react";
import { Center } from "@/components/Center";
import { useRouter } from "next/navigation";
import { folder } from "../../../generated/prisma/browser";
import {
createFolder,
deleteFolderById,
getFoldersWithTextPairsCountByOwner,
} from "@/lib/controllers/FolderController";
import { useEffect, useState } from "react";
import InFolder from "./[folder_id]/InFolder";
import { Center } from "@/components/Center";
import { useRouter } from "next/navigation";
interface Folder {
id: number;
name: string;
text_pairs_count: number;
}
getFoldersByOwner,
} from "@/lib/services/folderService";
interface FolderProps {
folder: Folder;
folder: folder;
deleteCallback: () => void;
openCallback: () => void;
}
@@ -36,9 +30,7 @@ const FolderCard = ({ folder, deleteCallback, openCallback }: FolderProps) => {
<div className="flex-1">
<h3 className="font-medium text-gray-900">{folder.name}</h3>
<p className="text-sm text-gray-500">
{folder.text_pairs_count} items
</p>
{/*<p className="text-sm text-gray-500">{} items</p>*/}
</div>
<div className="text-xs text-gray-400">#{folder.id}</div>
@@ -61,88 +53,84 @@ const FolderCard = ({ folder, deleteCallback, openCallback }: FolderProps) => {
};
export default function FoldersClient({ username }: { username: string }) {
const [folders, setFolders] = useState<Folder[]>([]);
const [folderId, setFolderId] = useState<number>(0);
const [folders, setFolders] = useState<folder[]>([]);
const [loading, setLoading] = useState(false);
const router = useRouter();
useEffect(() => {
getFoldersWithTextPairsCountByOwner(username).then((folders) => {
setFolders(folders as Folder[]);
getFoldersByOwner(username).then((folders) => {
setFolders(folders);
});
}, [username]);
const updateFolders = async () => {
setLoading(true);
try {
const updatedFolders =
await getFoldersWithTextPairsCountByOwner(username);
setFolders(updatedFolders as Folder[]);
const updatedFolders = await getFoldersByOwner(username);
setFolders(updatedFolders);
} finally {
setLoading(false);
}
};
return (
<Center>
<div className="w-full max-w-2xl mx-auto bg-white border border-gray-200 rounded-2xl p-6">
<div className="mb-6">
<h1 className="text-2xl font-light text-gray-900">Folders</h1>
<p className="text-sm text-gray-500 mt-1">
Manage your collections
</p>
</div>
<button
onClick={async () => {
const folderName = prompt("Enter folder name:");
if (!folderName) return;
setLoading(true);
try {
await createFolder(folderName, username);
await updateFolders();
} finally {
setLoading(false);
}
}}
disabled={loading}
className="w-full p-3 border-2 border-dashed border-gray-300 rounded-xl text-gray-500 hover:border-gray-400 hover:text-gray-600 transition-colors flex items-center justify-center gap-2"
>
<FolderPlus size={18} />
<span>{loading ? "Creating..." : "New Folder"}</span>
</button>
<div className="mt-4">
{folders.length === 0 ? (
<div className="text-center py-12 text-gray-400">
<div className="w-16 h-16 mx-auto mb-3 rounded-lg bg-gray-100 flex items-center justify-center">
<FolderPlus size={24} className="text-gray-400" />
</div>
<p className="text-sm">No folders yet</p>
</div>
) : (
<div className="rounded-xl border border-gray-200 overflow-hidden">
{folders.map((folder) => (
<FolderCard
key={folder.id}
folder={folder}
deleteCallback={() => {
const confirm = prompt(
`Type "${folder.name}" to delete:`,
);
if (confirm === folder.name) {
deleteFolderById(folder.id).then(updateFolders);
}
}}
openCallback={() => {
setFolderId(folder.id);
router.push(`/folders/${folder.id}`);
}}
/>
))}
</div>
)}
</div>
return (
<Center>
<div className="w-full max-w-2xl mx-auto bg-white border border-gray-200 rounded-2xl p-6">
<div className="mb-6">
<h1 className="text-2xl font-light text-gray-900">Folders</h1>
<p className="text-sm text-gray-500 mt-1">Manage your collections</p>
</div>
</Center>
);
<button
onClick={async () => {
const folderName = prompt("Enter folder name:");
if (!folderName) return;
setLoading(true);
try {
await createFolder({
name: folderName,
owner: username,
});
await updateFolders();
} finally {
setLoading(false);
}
}}
disabled={loading}
className="w-full p-3 border-2 border-dashed border-gray-300 rounded-xl text-gray-500 hover:border-gray-400 hover:text-gray-600 transition-colors flex items-center justify-center gap-2"
>
<FolderPlus size={18} />
<span>{loading ? "Creating..." : "New Folder"}</span>
</button>
<div className="mt-4 max-h-96 overflow-y-auto">
{folders.length === 0 ? (
<div className="text-center py-12 text-gray-400">
<div className="w-16 h-16 mx-auto mb-3 rounded-lg bg-gray-100 flex items-center justify-center">
<FolderPlus size={24} className="text-gray-400" />
</div>
<p className="text-sm">No folders yet</p>
</div>
) : (
<div className="rounded-xl border border-gray-200 overflow-hidden">
{folders.map((folder) => (
<FolderCard
key={folder.id}
folder={folder}
deleteCallback={() => {
const confirm = prompt(`Type "${folder.name}" to delete:`);
if (confirm === folder.name) {
deleteFolderById(folder.id).then(updateFolders);
}
}}
openCallback={() => {
router.push(`/folders/${folder.id}`);
}}
/>
))}
</div>
)}
</div>
</div>
</Center>
);
}

91
src/app/folders/[folder_id]/AddTextPairModal.tsx Normal file
View File

@@ -0,0 +1,91 @@
import LightButton from "@/components/buttons/LightButton";
import Input from "@/components/Input";
import { X } from "lucide-react";
import { useRef } from "react";
interface AddTextPairModalProps {
isOpen: boolean;
onClose: () => void;
onAdd: (
text1: string,
text2: string,
locale1: string,
locale2: string,
) => void;
}
export default function AddTextPairModal({
isOpen,
onClose,
onAdd,
}: AddTextPairModalProps) {
const input1Ref = useRef<HTMLInputElement>(null);
const input2Ref = useRef<HTMLInputElement>(null);
const input3Ref = useRef<HTMLInputElement>(null);
const input4Ref = useRef<HTMLInputElement>(null);
if (!isOpen) return null;
const handleAdd = () => {
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() !== ""
) {
onAdd(text1, text2, locale1, locale2);
input1Ref.current.value = "";
input2Ref.current.value = "";
}
};
return (
<div
className="fixed inset-0 bg-black/50 backdrop-blur flex items-center justify-center z-50"
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
handleAdd();
}
}}
>
<div className="bg-white rounded-xl p-6 w-full max-w-md mx-4">
<div className="flex">
<h2 className="flex-1 text-xl font-light mb-4 text-center">
Add New Text Pair
</h2>
<X onClick={onClose} className="hover:cursor-pointer"></X>
</div>
<div>
<div>
text1<Input ref={input1Ref} className="w-full"></Input>
</div>
<div>
text2<Input ref={input2Ref} className="w-full"></Input>
</div>
<div>
locale1<Input ref={input3Ref} className="w-full"></Input>
</div>
<div>
locale2<Input ref={input4Ref} className="w-full"></Input>
</div>
</div>
<LightButton onClick={handleAdd}>Add</LightButton>
</div>
</div>
);
}

151
src/app/folders/[folder_id]/InFolder.tsx
View File

@@ -1,36 +1,22 @@
"use client";
import { ArrowLeft, Plus, Volume2, Edit, Trash2 } from "lucide-react";
import { ArrowLeft, Edit, Plus, Trash2, X } from "lucide-react";
import { Center } from "@/components/Center";
import { createTextPair, getTextPairsByFolderId } from "@/lib/controllers/TextPairController";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import Container from "@/components/cards/Container";
import {
createTextPair,
deleteTextPairById,
getTextPairsByFolderId,
updateTextPairById,
} from "@/lib/services/textPairService";
import AddTextPairModal from "./AddTextPairModal";
import TextPairCard from "./TextPairCard";
import UpdateTextPairModal from "./UpdateTextPairModal";
import { text_pairUpdateInput } from "../../../../generated/prisma/models";
interface AddTextPairModalProps {
isOpen: boolean;
onClose: () => void;
onAdd: (textPair: TextPair) => void;
}
const AddTextPairModal = ({
isOpen,
onClose,
onAdd,
}: AddTextPairModalProps) => {
if (!isOpen) return null;
return (
<div className="fixed inset-0 bg-black opacity-50 flex items-center justify-center z-50">
<div className="bg-white rounded-xl p-6 w-full max-w-md mx-4">
<h2 className="text-xl font-light mb-4">Add New Vocabulary</h2>
{/* 表单内容 */}
</div>
</div>
);
};
interface TextPair {
export interface TextPair {
id: number;
text1: string;
text2: string;
@@ -38,58 +24,10 @@ interface TextPair {
locale2: string;
}
interface TextPairCardProps {
textPair: TextPair;
}
const TextPairCard = ({ textPair }: TextPairCardProps) => {
return (
<div className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
<div className="p-4">
<div className="flex items-start justify-between mb-3">
<div className="flex items-center gap-2 text-xs text-gray-500">
<span className="px-2 py-1 bg-gray-100 rounded-md">
{textPair.locale1.toUpperCase()}
</span>
<span>→</span>
<span className="px-2 py-1 bg-gray-100 rounded-md">
{textPair.locale2.toUpperCase()}
</span>
</div>
<div className="flex items-center gap-1 opacity-0 hover:opacity-100 transition-opacity">
<button className="p-1.5 text-gray-400 hover:text-blue-500 hover:bg-blue-50 rounded-md transition-colors">
<Volume2 size={14} />
</button>
<button className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-md transition-colors">
<Edit size={14} />
</button>
<button className="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-md transition-colors">
<Trash2 size={14} />
</button>
</div>
</div>
<div className="space-y-3">
<div>
<div className="text-sm text-gray-500 mb-1">{textPair.locale1}</div>
<div className="text-gray-900">{textPair.text1}</div>
</div>
<div>
<div className="text-sm text-gray-500 mb-1">{textPair.locale2}</div>
<div className="text-gray-900">{textPair.text2}</div>
</div>
</div>
</div>
</div>
);
};
export default function InFolder({ folderId }: { folderId: number }) {
const [textPairs, setTextPairs] = useState<TextPair[]>([]);
const [loading, setLoading] = useState(true);
const [open, setOpen] = useState(false);
const [openAddModal, setAddModal] = useState(false);
const router = useRouter();
useEffect(() => {
@@ -104,10 +42,21 @@ export default function InFolder({ folderId }: { folderId: number }) {
setLoading(false);
}
};
fetchTextPairs();
}, [folderId]);
const refreshTextPairs = async () => {
setLoading(true);
try {
const data = await getTextPairsByFolderId(folderId);
setTextPairs(data as TextPair[]);
} catch (error) {
console.error("Failed to fetch text pairs:", error);
} finally {
setLoading(false);
}
};
return (
<Center>
<Container className="p-6">
@@ -122,7 +71,7 @@ export default function InFolder({ folderId }: { folderId: number }) {
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-light text-gray-900">Vocabulary</h1>
<h1 className="text-2xl font-light text-gray-900">Text Pairs</h1>
<p className="text-sm text-gray-500 mt-1">
{textPairs.length} items
</p>
@@ -131,42 +80,64 @@ export default function InFolder({ folderId }: { folderId: number }) {
<button
className="p-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
onClick={() => {
setOpen(true);
setAddModal(true);
}}
>
<Plus size={18} className="text-gray-600" />
<Plus size={18} className="text-gray-600 hover:cursor-pointer" />
</button>
</div>
</div>
<div className="rounded-xl border border-gray-200 overflow-hidden">
<div className="max-h-96 overflow-y-auto rounded-xl border border-gray-200 overflow-hidden">
{loading ? (
<div className="p-8 text-center">
<div className="w-8 h-8 border-2 border-gray-200 border-t-gray-400 rounded-full animate-spin mx-auto mb-3"></div>
<p className="text-sm text-gray-500">Loading vocabulary...</p>
<p className="text-sm text-gray-500">Loading text pairs...</p>
</div>
) : textPairs.length === 0 ? (
<div className="p-12 text-center">
<p className="text-sm text-gray-500 mb-2">No vocabulary items</p>
<p className="text-sm text-gray-500 mb-2">No text pair items</p>
</div>
) : (
<div className="divide-y divide-gray-100">
{textPairs.map((textPair) => (
<TextPairCard key={textPair.id} textPair={textPair} />
<TextPairCard
key={textPair.id}
textPair={textPair}
onDel={() => {
deleteTextPairById(textPair.id);
refreshTextPairs();
}}
refreshTextPairs={refreshTextPairs}
/>
))}
</div>
)}
</div>
</Container>
<AddTextPairModal
isOpen={open}
onClose={function (): void {
throw new Error("Function not implemented.");
isOpen={openAddModal}
onClose={() => setAddModal(false)}
onAdd={async (
text1: string,
text2: string,
locale1: string,
locale2: string,
) => {
await createTextPair({
text1: text1,
text2: text2,
locale1: locale1,
locale2: locale2,
folders: {
connect: {
id: folderId,
},
},
});
refreshTextPairs();
}}
onAdd={function (textPair: TextPair): void {
throw new Error("Function not implemented.");
}}
></AddTextPairModal>
/>
</Center>
);
}

63
src/app/folders/[folder_id]/TextPairCard.tsx Normal file
View File

@@ -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 (
<div className="group border-b border-gray-100 hover:bg-gray-50 transition-colors">
<div className="p-4">
<div className="flex items-start justify-between mb-3">
<div className="flex items-center gap-2 text-xs text-gray-500">
<span className="px-2 py-1 bg-gray-100 rounded-md">
{textPair.locale1.toUpperCase()}
</span>
<span>→</span>
<span className="px-2 py-1 bg-gray-100 rounded-md">
{textPair.locale2.toUpperCase()}
</span>
</div>
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
<button
className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-md transition-colors"
onClick={() => setOpenUpdateModal(true)}
>
<Edit size={14} />
</button>
<button className="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-md transition-colors">
<Trash2 size={14} onClick={onDel} />
</button>
</div>
</div>
<div className="text-gray-900 grid grid-cols-2 gap-4 w-3/4">
<div>{textPair.text1}</div>
<div>{textPair.text2}</div>
</div>
</div>
<UpdateTextPairModal
isOpen={openUpdateModal}
onClose={() => setOpenUpdateModal(false)}
onUpdate={async (id: number, data: text_pairUpdateInput) => {
await updateTextPairById(id, data);
setOpenUpdateModal(false);
refreshTextPairs();
}}
textPair={textPair}
/>
</div>
);
}

90
src/app/folders/[folder_id]/UpdateTextPairModal.tsx Normal file
View File

@@ -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<HTMLInputElement>(null);
const input2Ref = useRef<HTMLInputElement>(null);
const input3Ref = useRef<HTMLInputElement>(null);
const input4Ref = useRef<HTMLInputElement>(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 (
<div
className="fixed inset-0 bg-black/50 backdrop-blur flex items-center justify-center z-50"
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
handleUpdate();
}
}}
>
<div className="bg-white rounded-xl p-6 w-full max-w-md mx-4">
<div className="flex">
<h2 className="flex-1 text-xl font-light mb-4 text-center">
Update Text Pair
</h2>
<X onClick={onClose} className="hover:cursor-pointer"></X>
</div>
<div>
<div>
text1<Input defaultValue={textPair.text1} ref={input1Ref} className="w-full"></Input>
</div>
<div>
text2<Input defaultValue={textPair.text2} ref={input2Ref} className="w-full"></Input>
</div>
<div>
locale1<Input defaultValue={textPair.locale1} ref={input3Ref} className="w-full"></Input>
</div>
<div>
locale2<Input defaultValue={textPair.locale2} ref={input4Ref} className="w-full"></Input>
</div>
</div>
<LightButton onClick={handleUpdate}>Update</LightButton>
</div>
</div>
);
}

10
src/app/folders/[folder_id]/page.tsx
View File

@@ -1,7 +1,7 @@
import { redirect } from "next/navigation";
import { getServerSession } from "next-auth";
import InFolder from "./InFolder";
import { getOwnerByFolderId } from "@/lib/controllers/FolderController";
import { getOwnerByFolderId } from "@/lib/services/folderService";
export default async function FoldersPage({
params,
}: {
@@ -9,9 +9,13 @@ export default async function FoldersPage({
}) {
const session = await getServerSession();
const { folder_id } = await params;
const id = Number(folder_id);
if (!id) {
redirect("/folders");
}
if (!session?.user?.name) redirect(`/login`);
if ((await getOwnerByFolderId(folder_id)) !== session.user.name) {
if ((await getOwnerByFolderId(id)) !== session.user.name) {
return "you are not the owner of this folder";
}
return <InFolder folderId={folder_id} />;
return <InFolder folderId={id} />;
}

2
src/app/memorize/Choose.tsx
View File

@@ -3,7 +3,7 @@ import ACard from "@/components/cards/ACard";
import BCard from "@/components/cards/BCard";
import { LOCALES } from "@/config/locales";
import { Dispatch, SetStateAction, useState } from "react";
import { WordData } from "@/interfaces";
import { WordData } from "@/lib/interfaces";
import { useTranslations } from "next-intl";

2
src/app/memorize/Edit.tsx
View File

@@ -3,7 +3,7 @@ import ACard from "@/components/cards/ACard";
import BCard from "@/components/cards/BCard";
import { ChangeEvent, Dispatch, SetStateAction, useRef, useState } from "react";
import DarkButton from "@/components/buttons/DarkButton";
import { WordData } from "@/interfaces";
import { WordData } from "@/lib/interfaces";
import Choose from "./Choose";
import { useTranslations } from "next-intl";

2
src/app/memorize/Main.tsx
View File

@@ -1,7 +1,7 @@
import LightButton from "@/components/buttons/LightButton";
import ACard from "@/components/cards/ACard";
import BCard from "@/components/cards/BCard";
import { WordData, WordDataSchema } from "@/interfaces";
import { WordData, WordDataSchema } from "@/lib/interfaces";
import { Dispatch, SetStateAction } from "react";
import useFileUpload from "@/hooks/useFileUpload";
import { useTranslations } from "next-intl";

4
src/app/memorize/Start.tsx
View File

@@ -1,8 +1,8 @@
import LightButton from "@/components/buttons/LightButton";
import { WordData } from "@/interfaces";
import { WordData } from "@/lib/interfaces";
import { Dispatch, SetStateAction, useState } from "react";
import { useAudioPlayer } from "@/hooks/useAudioPlayer";
import { getTTSAudioUrl } from "@/utils";
import { getTTSAudioUrl } from "@/lib/utils";
import { VOICES } from "@/config/locales";
import { useTranslations } from "next-intl";

2
src/app/memorize/page.tsx
View File

@@ -4,7 +4,7 @@ import { useState } from "react";
import Main from "./Main";
import Edit from "./Edit";
import Start from "./Start";
import { WordData, WordDataSchema } from "@/interfaces";
import { WordData, WordDataSchema } from "@/lib/interfaces";
const getLocalWordData = (): WordData => {
const data = localStorage.getItem("wordData");

2
src/app/srt-player/VideoPlayer/SubtitleDisplay.tsx
View File

@@ -1,4 +1,4 @@
import { inspect } from "@/utils";
import { inspect } from "@/lib/utils";
export default function SubtitleDisplay({ subtitle }: { subtitle: string }) {
const words = subtitle.match(/\b[\w']+(?:-[\w']+)*\b/g) || [];

15
src/app/text-speaker/SaveList.tsx
View File

@@ -1,9 +1,12 @@
"use client";
import { getLocalStorageOperator } from "@/utils";
import { getLocalStorageOperator } from "@/lib/utils";
import { useState } from "react";
import z from "zod";
import { TextSpeakerArraySchema, TextSpeakerItemSchema } from "@/interfaces";
import {
TextSpeakerArraySchema,
TextSpeakerItemSchema,
} from "@/lib/interfaces";
import IconClick from "@/components/IconClick";
import IMAGES from "@/config/images";
import { useTranslations } from "next-intl";
@@ -49,9 +52,11 @@ interface SaveListProps {
}
export default function SaveList({ show = false, handleUse }: SaveListProps) {
const t = useTranslations("text-speaker");
const { get: getFromLocalStorage, set: setIntoLocalStorage } = getLocalStorageOperator<
typeof TextSpeakerArraySchema
>("text-speaker", TextSpeakerArraySchema);
const { get: getFromLocalStorage, set: setIntoLocalStorage } =
getLocalStorageOperator<typeof TextSpeakerArraySchema>(
"text-speaker",
TextSpeakerArraySchema,
);
const [data, setData] = useState(getFromLocalStorage());
const handleDel = (item: z.infer<typeof TextSpeakerItemSchema>) => {
const current_data = getFromLocalStorage();

4
src/app/text-speaker/page.tsx
View File

@@ -4,8 +4,8 @@ import LightButton from "@/components/buttons/LightButton";
import IconClick from "@/components/IconClick";
import IMAGES from "@/config/images";
import { useAudioPlayer } from "@/hooks/useAudioPlayer";
import { TextSpeakerArraySchema, TextSpeakerItemSchema } from "@/interfaces";
import { getLocalStorageOperator, getTTSAudioUrl } from "@/utils";
import { TextSpeakerArraySchema, TextSpeakerItemSchema } from "@/lib/interfaces";
import { getLocalStorageOperator, getTTSAudioUrl } from "@/lib/utils";
import { ChangeEvent, useEffect, useRef, useState } from "react";
import z from "zod";
import SaveList from "./SaveList";

4
src/app/translator/page.tsx
View File

@@ -5,10 +5,10 @@ import IconClick from "@/components/IconClick";
import IMAGES from "@/config/images";
import { VOICES } from "@/config/locales";
import { useAudioPlayer } from "@/hooks/useAudioPlayer";
import { TranslationHistorySchema } from "@/interfaces";
import { TranslationHistorySchema } from "@/lib/interfaces";
import { tlsoPush, tlso } from "@/lib/localStorageOperators";
import { getTTSAudioUrl } from "@/lib/tts";
import { letsFetch } from "@/utils";
import { letsFetch } from "@/lib/utils";
import { useTranslations } from "next-intl";
import { useRef, useState } from "react";
import z from "zod";

2
src/app/word-board/TheBoard.tsx
View File

@@ -6,7 +6,7 @@ import {
BOARD_HEIGHT,
TEXT_SIZE,
} from "@/config/word-board-config";
import { Word } from "@/interfaces";
import { Word } from "@/lib/interfaces";
import { Dispatch, SetStateAction } from "react";
export default function TheBoard({

4
src/app/word-board/page.tsx
View File

@@ -2,14 +2,14 @@
import TheBoard from "@/app/word-board/TheBoard";
import LightButton from "../../components/buttons/LightButton";
import { KeyboardEvent, useRef, useState } from "react";
import { Word } from "@/interfaces";
import { Word } from "@/lib/interfaces";
import {
BOARD_WIDTH,
TEXT_WIDTH,
BOARD_HEIGHT,
TEXT_SIZE,
} from "@/config/word-board-config";
import { inspect } from "@/utils";
import { inspect } from "@/lib/utils";
export default function WordBoardPage() {
const inputRef = useRef<HTMLInputElement>(null);

3
src/components/Input.tsx
View File

@@ -4,6 +4,7 @@ interface Props {
type?: string;
className?: string;
name?: string;
defaultValue?: string;
}
export default function Input({
@@ -12,6 +13,7 @@ export default function Input({
type = "text",
className = "",
name = "",
defaultValue = "",
}: Props) {
return (
<input
@@ -20,6 +22,7 @@ export default function Input({
type={type}
className={`block focus:outline-none border-b-2 border-gray-600 ${className}`}
name={name}
defaultValue={defaultValue}
/>
);
}

4
src/components/buttons/DarkButton.tsx
View File

@@ -1,4 +1,4 @@
import PlainButton from "./PlainButton";
import PlainButton, { ButtonType } from "./PlainButton";
export default function DarkButton({
onClick,
@@ -11,7 +11,7 @@ export default function DarkButton({
className?: string;
selected?: boolean;
children?: React.ReactNode;
type?: string;
type?: ButtonType;
}) {
return (
<PlainButton

6
src/components/buttons/LightButton.tsx
View File

@@ -1,17 +1,17 @@
import PlainButton from "./PlainButton";
import PlainButton, { ButtonType } from "../buttons/PlainButton";
export default function LightButton({
onClick,
className,
selected,
children,
type = "button"
type = "button",
}: {
onClick?: () => void;
className?: string;
selected?: boolean;
children?: React.ReactNode;
type?: string;
type?: ButtonType;
}) {
return (
<PlainButton

4
src/components/buttons/PlainButton.tsx
View File

@@ -1,3 +1,5 @@
export type ButtonType = "button" | "submit" | "reset" | undefined;
export default function PlainButton({
onClick,
className,
@@ -7,7 +9,7 @@ export default function PlainButton({
onClick?: () => void;
className?: string;
children?: React.ReactNode;
type?: "button" | "submit" | "reset" | undefined;
type?: ButtonType;
}) {
return (
<button

23
src/lib/actions.ts
View File

@@ -1,23 +0,0 @@
"use server";
import { createTextPair } from "./controllers/TextPairController";
async function createTextPairAction(formData: FormData) {
'use server';
const textPair = {
text1: formData.get('text1') as string,
text2: formData.get('text2') as string,
locale1: formData.get('locale1') as string,
locale2: formData.get('locale2') as string,
folderId: parseInt(formData.get('folderId') as string)
}
if(textPair.text1 && textPair.text2 && textPair.locale1 && textPair.locale2 && textPair.folderId){
await createTextPair(
textPair.locale1,
textPair.locale2,
textPair.text1,
textPair.text2,
textPair.folderId
);
}
}

61
src/lib/controllers/FolderController.ts
View File

@@ -1,61 +0,0 @@
"use server";
import { pool } from "../db";
export async function deleteFolderById(id: number) {
try {
await pool.query("DELETE FROM folders WHERE id = $1", [id]);
} catch (e) {
console.log(e);
}
}
export async function getFoldersByOwner(owner: string) {
try {
const folders = await pool.query("SELECT * FROM folders WHERE owner = $1", [
owner,
]);
return folders.rows;
} catch (e) {
console.log(e);
}
}
export async function getOwnerByFolderId(id: number) {
try {
const owner = await pool.query("SELECT owner FROM folders WHERE id = $1", [
id,
]);
return owner.rows[0].owner;
} catch (e) {
console.log(e);
}
}
export async function getFoldersWithTextPairsCountByOwner(owner: string) {
try {
const folders = await pool.query(
`select f.id, f.name, f.owner, count(tp.id) as text_pairs_count from folders f
left join text_pairs tp on tp.folder_id = f.id
where f.owner = $1
group by f.id, f.name, f.owner`,
[owner],
);
return folders.rows;
} catch (e) {
console.log(e);
}
}
export async function createFolder(name: string, owner: string) {
try {
return (
await pool.query("INSERT INTO folders (name, owner) VALUES ($1, $2)", [
name.trim(),
owner,
])
).rows[0];
} catch (e) {
console.log(e);
}
}

69
src/lib/controllers/TextPairController.ts
View File

@@ -1,69 +0,0 @@
"use server";
import { pool } from "../db";
export async function createTextPair(
locale1: string,
locale2: string,
text1: string,
text2: string,
folderId: number,
) {
try {
await pool.query(
"INSERT INTO text_pairs (locale1, locale2, text1, text2, folder_id) VALUES ($1, $2, $3, $4, $5)",
[locale1.trim(), locale2.trim(), text1.trim(), text2.trim(), folderId],
);
} catch (e) {
console.log(e);
}
}
export async function deleteTextPairById(id: number) {
try {
await pool.query("DELETE FROM text_pairs WHERE id = $1", [id]);
} catch (e) {
console.log(e);
}
}
export async function updateWordPairById(
id: number,
locale1: string,
locale2: string,
text1: string,
text2: string,
) {
try {
await pool.query(
"UPDATE text_pairs SET locale1 = $1, locale2 = $2, text1 = $3, text2 = $4 WHERE id = $5",
[locale1.trim(), locale2.trim(), text1.trim(), text2.trim(), id],
);
} catch (e) {
console.log(e);
}
}
export async function getTextPairsByFolderId(folderId: number) {
try {
const textPairs = await pool.query(
"SELECT * FROM text_pairs WHERE folder_id = $1",
[folderId],
);
return textPairs.rows;
} catch (e) {
console.log(e);
}
}
export async function getTextPairsCountByFolderId(folderId: number) {
try {
const count = await pool.query(
"SELECT COUNT(*) FROM text_pairs WHERE folder_id = $1",
[folderId],
);
return count.rows[0].count;
} catch (e) {
console.log(e);
}
}

26
src/lib/db.ts
View File

@@ -1,24 +1,4 @@
import { Pool } from "pg";
import z from "zod";
import { PrismaClient } from "../../generated/prisma/client";
export const pool = new Pool({
user: "postgres",
host: "localhost",
max: 20,
idleTimeoutMillis: 3000,
connectionTimeoutMillis: 2000,
maxLifetimeSeconds: 60,
});
export const TextPairSchema = z.object({
id: z.number().int().positive(),
text1: z.string().min(1).max(100),
text2: z.string().min(1).max(100),
locale1: z.string().min(2).max(10),
locale2: z.string().min(2).max(10),
owner: z.string().min(1).max(40),
createdAt: z.date().default(() => new Date()),
updatedAt: z.date().default(() => new Date()),
});
export const
const prisma = new PrismaClient();
export default prisma;

16
src/lib/localStorageOperators.ts
View File

@@ -1,17 +1,19 @@
import { TranslationHistoryArraySchema, TranslationHistorySchema } from "@/interfaces";
import { getLocalStorageOperator } from "@/utils";
import {
TranslationHistoryArraySchema,
TranslationHistorySchema,
} from "@/lib/interfaces";
import { getLocalStorageOperator } from "@/lib/utils";
import z from "zod";
const MAX_HISTORY_LENGTH = 50;
export const tlso = getLocalStorageOperator<typeof TranslationHistoryArraySchema>(
"translator",
TranslationHistoryArraySchema,
);
export const tlso = getLocalStorageOperator<
typeof TranslationHistoryArraySchema
>("translator", TranslationHistoryArraySchema);
export const tlsoPush = (item: z.infer<typeof TranslationHistorySchema>) => {
tlso.set(
[...tlso.get(), item as z.infer<typeof TranslationHistorySchema>].slice(
-MAX_HISTORY_LENGTH,
),
);
};
};

45
src/lib/services/folderService.ts Normal file
View File

@@ -0,0 +1,45 @@
"use server";
import { folderCreateInput, folderUpdateInput } from "../../../generated/prisma/models";
import prisma from "../db";
export async function getFoldersByOwner(owner: string) {
const folders = await prisma.folder.findMany({
where: {
owner: owner,
},
});
return folders;
}
export async function createFolder(folder: folderCreateInput) {
await prisma.folder.create({
data: folder,
});
}
export async function deleteFolderById(id: number) {
await prisma.folder.delete({
where: {
id: id,
},
});
}
export async function updateFolderById(id: number, data: folderUpdateInput) {
await prisma.folder.update({
where: {
id: id,
},
data: data,
});
}
export async function getOwnerByFolderId(id: number) {
const folder = await prisma.folder.findUnique({
where: {
id: id,
},
});
return folder?.owner;
}

51
src/lib/services/textPairService.ts Normal file
View File

@@ -0,0 +1,51 @@
"use server";
import {
text_pairCreateInput,
text_pairUpdateInput,
} from "../../../generated/prisma/models";
import prisma from "../db";
export async function createTextPair(data: text_pairCreateInput) {
await prisma.text_pair.create({
data: data,
});
}
export async function deleteTextPairById(id: number) {
await prisma.text_pair.delete({
where: {
id: id,
},
});
}
export async function updateTextPairById(
id: number,
data: text_pairUpdateInput,
) {
await prisma.text_pair.update({
where: {
id: id,
},
data: data,
});
}
export async function getTextPairCountByFolderId(folderId: number) {
const count = await prisma.text_pair.count({
where: {
folder_id: folderId,
},
});
return count;
}
export async function getTextPairsByFolderId(folderId: number) {
const textPairs = await prisma.text_pair.findMany({
where: {
folder_id: folderId,
},
});
return textPairs;
}