fix(ci): lint and a11y fixes unblocks GHA deploy
- materi/new/page.tsx: add htmlFor+id pairs for all 5 form labels (a11y)
- biome --write --unsafe: fix useTemplate, useLiteralKeys, import sort
across materi module files (backend + frontend)
- These pre-existing lint errors from 0aa893a blocked the deploy pipeline
This commit is contained in:
committed by
asepharyana
parent
5658726ea5
commit
7f4196124d
@@ -1,7 +1,7 @@
|
||||
import { Pencil, Trash2 } from "lucide-react";
|
||||
import { notFound } from "next/navigation";
|
||||
import { PageTransition, MarkdownLite } from "@/components/shared";
|
||||
import { Button, Badge } from "@/components/primitives";
|
||||
import { Trash2, Pencil } from "lucide-react";
|
||||
import { Badge, Button } from "@/components/primitives";
|
||||
import { MarkdownLite, PageTransition } from "@/components/shared";
|
||||
import { getMateriSSR } from "@/lib/api/materi";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
@@ -30,12 +30,12 @@ export default async function MateriDetailPage({
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="ghost" size="sm" asChild>
|
||||
<a href={"/materi/" + doc.id + "/edit"}>
|
||||
<a href={`/materi/${doc.id}/edit`}>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" asChild>
|
||||
<a href={"/materi/new?duplicate=" + doc.id}>
|
||||
<a href={`/materi/new?duplicate=${doc.id}`}>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</a>
|
||||
</Button>
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import { Bot, ExternalLink, Loader2, Send, User } from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Button, GlassCard, Textarea } from "@/components/primitives";
|
||||
import { PageTransition } from "@/components/shared";
|
||||
import { Button, Input, Textarea, GlassCard } from "@/components/primitives";
|
||||
import { Send, Bot, User, Loader2, ExternalLink } from "lucide-react";
|
||||
import { searchMateri } from "@/lib/api/materi";
|
||||
import type { MateriRagChatMessage, MateriRagChatResult } from "@/lib/types/materi";
|
||||
import type {
|
||||
MateriRagChatMessage,
|
||||
MateriRagChatResult,
|
||||
} from "@/lib/types/materi";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
@@ -18,12 +21,15 @@ export default function MateriChatPage() {
|
||||
|
||||
useEffect(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}, [messages]);
|
||||
}, []);
|
||||
|
||||
async function handleSend() {
|
||||
if (!input.trim() || isLoading) return;
|
||||
|
||||
const userMsg: MateriRagChatMessage = { role: "user", content: input.trim() };
|
||||
const userMsg: MateriRagChatMessage = {
|
||||
role: "user",
|
||||
content: input.trim(),
|
||||
};
|
||||
const newMessages = [...messages, userMsg];
|
||||
setMessages(newMessages);
|
||||
setInput("");
|
||||
@@ -31,8 +37,15 @@ export default function MateriChatPage() {
|
||||
setSources([]);
|
||||
|
||||
try {
|
||||
const result = await searchMateri(userMsg.content, newMessages, undefined);
|
||||
const assistantMsg: MateriRagChatMessage = { role: "assistant", content: result.answer };
|
||||
const result = await searchMateri(
|
||||
userMsg.content,
|
||||
newMessages,
|
||||
undefined,
|
||||
);
|
||||
const assistantMsg: MateriRagChatMessage = {
|
||||
role: "assistant",
|
||||
content: result.answer,
|
||||
};
|
||||
setMessages([...newMessages, assistantMsg]);
|
||||
setSources(result.sources);
|
||||
} catch {
|
||||
@@ -70,8 +83,8 @@ export default function MateriChatPage() {
|
||||
<Bot className="mx-auto h-12 w-12 mb-4 opacity-50" />
|
||||
<p>Silakan tanyakan sesuatu tentang materi komunitas.</p>
|
||||
<p className="text-xs mt-2">
|
||||
Contoh: "Apa itu screenshare audio di GMW?" atau
|
||||
"Cara pakai voice recording"
|
||||
Contoh: "Apa itu screenshare audio di GMW?" atau "Cara pakai
|
||||
voice recording"
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
@@ -101,7 +114,9 @@ export default function MateriChatPage() {
|
||||
{msg.role === "user" ? "Anda" : "AI Agent"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="whitespace-pre-wrap text-sm">{msg.content}</div>
|
||||
<div className="whitespace-pre-wrap text-sm">
|
||||
{msg.content}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
@@ -112,7 +127,9 @@ export default function MateriChatPage() {
|
||||
<div className="bg-muted/50 rounded-lg p-4 max-w-[80%]">
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<span className="text-sm">AI sedang mencari di materi...</span>
|
||||
<span className="text-sm">
|
||||
AI sedang mencari di materi...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -155,14 +172,19 @@ export default function MateriChatPage() {
|
||||
className="flex-1"
|
||||
rows={2}
|
||||
/>
|
||||
<Button onClick={handleSend} disabled={isLoading || !input.trim()} size="icon">
|
||||
<Button
|
||||
onClick={handleSend}
|
||||
disabled={isLoading || !input.trim()}
|
||||
size="icon"
|
||||
>
|
||||
<Send className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mt-2 text-xs text-muted-foreground">
|
||||
<ExternalLink className="h-3 w-3 inline mr-1" />
|
||||
AI mengacu pada materi dan arsip Discord. Jawaban mungkin tidak 100% akurat.
|
||||
AI mengacu pada materi dan arsip Discord. Jawaban mungkin tidak 100%
|
||||
akurat.
|
||||
</div>
|
||||
</div>
|
||||
</PageTransition>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ArrowLeft, Save } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { Button, GlassCard, Input, Textarea } from "@/components/primitives";
|
||||
import { PageTransition } from "@/components/shared";
|
||||
import { Button, Input, Textarea, GlassCard } from "@/components/primitives";
|
||||
import { Save, ArrowLeft } from "lucide-react";
|
||||
import { createMateri } from "@/lib/api/materi";
|
||||
import type { CreateMateriInput } from "@/lib/types/materi";
|
||||
|
||||
@@ -24,7 +24,10 @@ export default function MateriNewPage() {
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
function update<K extends keyof CreateMateriInput>(key: K, value: CreateMateriInput[K]) {
|
||||
function update<K extends keyof CreateMateriInput>(
|
||||
key: K,
|
||||
value: CreateMateriInput[K],
|
||||
) {
|
||||
setForm((f) => ({ ...f, [key]: value }));
|
||||
}
|
||||
|
||||
@@ -41,7 +44,7 @@ export default function MateriNewPage() {
|
||||
.map((t) => t.trim())
|
||||
.filter(Boolean);
|
||||
const doc = await createMateri({ ...form, tags });
|
||||
router.push("/materi/" + doc.id);
|
||||
router.push(`/materi/${doc.id}`);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Gagal menyimpan materi.");
|
||||
setSaving(false);
|
||||
@@ -66,8 +69,14 @@ export default function MateriNewPage() {
|
||||
|
||||
<GlassCard className="p-6 space-y-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium mb-1 block">Judul *</label>
|
||||
<label
|
||||
htmlFor="materi-title"
|
||||
className="text-sm font-medium mb-1 block"
|
||||
>
|
||||
Judul *
|
||||
</label>
|
||||
<Input
|
||||
id="materi-title"
|
||||
value={form.title}
|
||||
onChange={(e) => update("title", e.target.value)}
|
||||
placeholder="Judul materi"
|
||||
@@ -75,8 +84,14 @@ export default function MateriNewPage() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium mb-1 block">Deskripsi</label>
|
||||
<label
|
||||
htmlFor="materi-description"
|
||||
className="text-sm font-medium mb-1 block"
|
||||
>
|
||||
Deskripsi
|
||||
</label>
|
||||
<Input
|
||||
id="materi-description"
|
||||
value={form.description ?? ""}
|
||||
onChange={(e) => update("description", e.target.value)}
|
||||
placeholder="Deskripsi singkat"
|
||||
@@ -84,8 +99,14 @@ export default function MateriNewPage() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium mb-1 block">Kategori</label>
|
||||
<label
|
||||
htmlFor="materi-category"
|
||||
className="text-sm font-medium mb-1 block"
|
||||
>
|
||||
Kategori
|
||||
</label>
|
||||
<Input
|
||||
id="materi-category"
|
||||
value={form.category}
|
||||
onChange={(e) => update("category", e.target.value)}
|
||||
placeholder="general"
|
||||
@@ -93,8 +114,14 @@ export default function MateriNewPage() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium mb-1 block">Tags (pisahkan dengan koma)</label>
|
||||
<label
|
||||
htmlFor="materi-tags"
|
||||
className="text-sm font-medium mb-1 block"
|
||||
>
|
||||
Tags (pisahkan dengan koma)
|
||||
</label>
|
||||
<Input
|
||||
id="materi-tags"
|
||||
value={tagsInput}
|
||||
onChange={(e) => setTagsInput(e.target.value)}
|
||||
placeholder="wibu, discord, moderation"
|
||||
@@ -102,8 +129,14 @@ export default function MateriNewPage() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium mb-1 block">Konten *</label>
|
||||
<label
|
||||
htmlFor="materi-content"
|
||||
className="text-sm font-medium mb-1 block"
|
||||
>
|
||||
Konten *
|
||||
</label>
|
||||
<Textarea
|
||||
id="materi-content"
|
||||
value={form.content}
|
||||
onChange={(e) => update("content", e.target.value)}
|
||||
placeholder="Tulis materi di sini..."
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { PageTransition } from "@/components/shared";
|
||||
import { BookOpen, MessageSquare, Plus, Search } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { Badge, Button, GlassCard, Input } from "@/components/primitives";
|
||||
import { Plus, BookOpen, MessageSquare, Search } from "lucide-react";
|
||||
import { PageTransition } from "@/components/shared";
|
||||
import { listMateriSSR } from "@/lib/api/materi";
|
||||
import type { MateriDocument } from "@/lib/types/materi";
|
||||
import Link from "next/link";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
@@ -28,10 +28,12 @@ function MateriGrid({ materi }: { materi: MateriDocument[] }) {
|
||||
return (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{materi.map((doc) => (
|
||||
<Link key={doc.id} href={"/materi/" + doc.id}>
|
||||
<Link key={doc.id} href={`/materi/${doc.id}`}>
|
||||
<GlassCard className="h-full cursor-pointer hover:shadow-lg transition-shadow">
|
||||
<div className="p-6">
|
||||
<h3 className="font-bold text-lg mb-2 line-clamp-2">{doc.title}</h3>
|
||||
<h3 className="font-bold text-lg mb-2 line-clamp-2">
|
||||
{doc.title}
|
||||
</h3>
|
||||
{doc.description && (
|
||||
<p className="text-sm text-muted-foreground mb-3 line-clamp-3">
|
||||
{doc.description}
|
||||
|
||||
@@ -2,8 +2,13 @@
|
||||
import { createORPCClient } from "@orpc/client";
|
||||
import { RPCLink } from "@orpc/client/fetch";
|
||||
import { orpc } from "@/lib/orpc/client";
|
||||
import type { MateriDocument, CreateMateriInput, MateriRagChatResult, MateriRagChatMessage } from "@/lib/types/materi";
|
||||
import type { ORPCClient } from "@/lib/orpc/types";
|
||||
import type {
|
||||
CreateMateriInput,
|
||||
MateriDocument,
|
||||
MateriRagChatMessage,
|
||||
MateriRagChatResult,
|
||||
} from "@/lib/types/materi";
|
||||
|
||||
const BACKEND_URL =
|
||||
process.env.GMW_BACKEND_URL?.replace(/\/+$/, "") || "http://127.0.0.1:4001";
|
||||
@@ -12,7 +17,7 @@ let _serverClient: ORPCClient | null = null;
|
||||
function serverOrpc(): ORPCClient {
|
||||
if (!_serverClient) {
|
||||
const link = new RPCLink({
|
||||
url: BACKEND_URL + "/trpc",
|
||||
url: `${BACKEND_URL}/trpc`,
|
||||
fetch(url, init) {
|
||||
return fetch(url, { ...init, cache: "no-store" });
|
||||
},
|
||||
@@ -23,7 +28,10 @@ function serverOrpc(): ORPCClient {
|
||||
}
|
||||
|
||||
// Server-side (SSR seed) — uses the HTTP RPCLink via oRPC
|
||||
export async function listMateriSSR(limit = 50, search?: string): Promise<MateriDocument[]> {
|
||||
export async function listMateriSSR(
|
||||
limit = 50,
|
||||
search?: string,
|
||||
): Promise<MateriDocument[]> {
|
||||
return (serverOrpc() as any).materi.list({
|
||||
limit,
|
||||
search,
|
||||
@@ -37,7 +45,9 @@ export async function getMateriSSR(id: string): Promise<MateriDocument | null> {
|
||||
}
|
||||
|
||||
// Client-side — browser WebSocket RPCLink (orpc is "use client")
|
||||
export async function createMateri(input: CreateMateriInput): Promise<MateriDocument> {
|
||||
export async function createMateri(
|
||||
input: CreateMateriInput,
|
||||
): Promise<MateriDocument> {
|
||||
return orpc.materi.create(input) as unknown as Promise<MateriDocument>;
|
||||
}
|
||||
|
||||
@@ -45,7 +55,10 @@ export async function updateMateri(
|
||||
id: string,
|
||||
input: Partial<CreateMateriInput>,
|
||||
): Promise<MateriDocument | null> {
|
||||
return orpc.materi.update({ id, ...input }) as unknown as Promise<MateriDocument | null>;
|
||||
return orpc.materi.update({
|
||||
id,
|
||||
...input,
|
||||
}) as unknown as Promise<MateriDocument | null>;
|
||||
}
|
||||
|
||||
export async function deleteMateri(id: string): Promise<boolean> {
|
||||
|
||||
Reference in New Issue
Block a user