kokopi/personal-support-ticket-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add:content filter

Browse Source
This commit is contained in:
kokopi
2026-03-09 17:38:42 +09:00
parent 63fea501a1
commit 40448571f0
7 changed files with 256 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
frontend/src/lib/storage.ts
View File

@@ -1,85 +1,115 @@
import type { Ticket, TicketType } from './types'
import { env } from '../env'
import type { Ticket, TicketType } from "./types";
import { env } from "../env";
const API = env.apiUrl
const API = env.apiUrl;
// ─── API error with structured body ──────────────────────────────────────────
export class ApiError extends Error {
readonly status: number;
readonly code: string;
constructor(status: number, code: string, message: string) {
super(message);
this.name = "ApiError";
this.status = status;
this.code = code;
}
}
// ─── Fetch helper ─────────────────────────────────────────────────────────────
async function apiFetch<T>(path: string, init: RequestInit = {}): Promise<T> {
const res = await fetch(`${API}${path}`, {
...init,
credentials: 'include',
headers: { 'Content-Type': 'application/json', ...(init.headers ?? {}) },
})
if (res.status === 401) throw new Error('unauthenticated')
if (!res.ok) throw new Error(`API error ${res.status}`)
return res.json()
credentials: "include",
headers: { "Content-Type": "application/json", ...(init.headers ?? {}) },
});
if (!res.ok) {
// Try to parse a structured error body; fall back to a generic message
let code = `http_${res.status}`;
let message = `API error ${res.status}`;
try {
const body = await res.json();
if (body?.error) code = body.error;
if (body?.message) message = body.message;
} catch {
/* non-JSON body — keep defaults */
}
throw new ApiError(res.status, code, message);
}
return res.json();
}
// ─── Local (localStorage) adapter ────────────────────────────────────────────
const LOCAL_KEY = 'support_tickets'
const LOCAL_KEY = "support_tickets";
function localGet(): Ticket[] {
try {
return JSON.parse(localStorage.getItem(LOCAL_KEY) ?? '[]')
return JSON.parse(localStorage.getItem(LOCAL_KEY) ?? "[]");
} catch {
return []
return [];
}
}
function localSet(tickets: Ticket[]) {
localStorage.setItem(LOCAL_KEY, JSON.stringify(tickets))
localStorage.setItem(LOCAL_KEY, JSON.stringify(tickets));
}
export const localAdapter = {
getTickets: (): Ticket[] => localGet(),
createTicket: (data: { subject: string; description: string; type: TicketType }): Ticket => {
createTicket: (data: {
subject: string;
description: string;
type: TicketType;
}): Ticket => {
const ticket: Ticket = {
id: crypto.randomUUID(),
userId: null,
username: null,
subject: data.subject,
description: data.description,
type: data.type,
status: 'open',
status: "open",
createdAt: new Date().toISOString(),
}
localSet([ticket, ...localGet()])
return ticket
};
localSet([ticket, ...localGet()]);
return ticket;
},
updateTicket: (id: string, patch: Partial<Ticket>): Ticket | null => {
const tickets = localGet()
const idx = tickets.findIndex(t => t.id === id)
if (idx === -1) return null
tickets[idx] = { ...tickets[idx], ...patch }
localSet(tickets)
return tickets[idx]
const tickets = localGet();
const idx = tickets.findIndex((t) => t.id === id);
if (idx === -1) return null;
tickets[idx] = { ...tickets[idx], ...patch };
localSet(tickets);
return tickets[idx];
},
deleteTicket: (id: string): boolean => {
const before = localGet()
const after = before.filter(t => t.id !== id)
localSet(after)
return after.length < before.length
const before = localGet();
const after = before.filter((t) => t.id !== id);
localSet(after);
return after.length < before.length;
},
}
};
// ─── Paginated response envelope ─────────────────────────────────────────────
export interface PaginatedResponse<T> {
data: T[]
total: number
page: number
pageSize: number
totalPages: number
data: T[];
total: number;
page: number;
pageSize: number;
totalPages: number;
}
export interface TicketFilters {
status?: Ticket['status']
type?: TicketType
mine?: boolean // restrict to the current user's tickets
status?: Ticket["status"];
type?: TicketType;
mine?: boolean; // restrict to the current user's tickets
}
// ─── Storage API ──────────────────────────────────────────────────────────────
@@ -88,9 +118,9 @@ export const storage = {
// User's own tickets — API when authenticated, localStorage when guest
async getTickets(): Promise<Ticket[]> {
try {
return await apiFetch<Ticket[]>('/api/tickets')
return await apiFetch<Ticket[]>("/api/tickets");
} catch {
return localAdapter.getTickets()
return localAdapter.getTickets();
}
},
@@ -102,67 +132,79 @@ export const storage = {
filters: TicketFilters = {},
): Promise<PaginatedResponse<Ticket>> {
if (!isAuthenticated) {
let all = localAdapter.getTickets()
if (filters.status) all = all.filter(t => t.status === filters.status)
if (filters.type) all = all.filter(t => t.type === filters.type)
const start = (page - 1) * pageSize
let all = localAdapter.getTickets();
if (filters.status) all = all.filter((t) => t.status === filters.status);
if (filters.type) all = all.filter((t) => t.type === filters.type);
const start = (page - 1) * pageSize;
return {
data: all.slice(start, start + pageSize),
total: all.length,
page,
pageSize,
totalPages: Math.max(1, Math.ceil(all.length / pageSize)),
}
};
}
const params = new URLSearchParams({ page: String(page) })
if (filters.status) params.set('status', filters.status)
if (filters.type) params.set('type', filters.type)
if (filters.mine) params.set('mine', 'true')
const params = new URLSearchParams({ page: String(page) });
if (filters.status) params.set("status", filters.status);
if (filters.type) params.set("type", filters.type);
if (filters.mine) params.set("mine", "true");
try {
return await apiFetch<PaginatedResponse<Ticket>>(`/api/tickets/all?${params}`)
return await apiFetch<PaginatedResponse<Ticket>>(
`/api/tickets/all?${params}`,
);
} catch {
const all = localAdapter.getTickets()
const start = (page - 1) * pageSize
const all = localAdapter.getTickets();
const start = (page - 1) * pageSize;
return {
data: all.slice(start, start + pageSize),
total: all.length,
page,
pageSize,
totalPages: Math.max(1, Math.ceil(all.length / pageSize)),
}
};
}
},
async createTicket(data: { subject: string; description: string; type: TicketType }): Promise<Ticket> {
async createTicket(data: {
subject: string;
description: string;
type: TicketType;
}): Promise<Ticket> {
try {
return await apiFetch<Ticket>('/api/tickets', {
method: 'POST',
return await apiFetch<Ticket>("/api/tickets", {
method: "POST",
body: JSON.stringify(data),
})
} catch {
return localAdapter.createTicket(data)
});
} catch (err) {
// Re-throw structured API errors (e.g. profanity, ticket limit) — don't silently
// fall back to localStorage, as these are intentional rejections from the server.
if (err instanceof ApiError) throw err;
return localAdapter.createTicket(data);
}
},
async updateTicket(id: string, patch: Partial<Ticket>): Promise<Ticket | null> {
async updateTicket(
id: string,
patch: Partial<Ticket>,
): Promise<Ticket | null> {
try {
return await apiFetch<Ticket>(`/api/tickets/${id}`, {
method: 'PATCH',
method: "PATCH",
body: JSON.stringify(patch),
})
});
} catch {
return localAdapter.updateTicket(id, patch)
return localAdapter.updateTicket(id, patch);
}
},
async deleteTicket(id: string): Promise<boolean> {
try {
await apiFetch(`/api/tickets/${id}`, { method: 'DELETE' })
return true
await apiFetch(`/api/tickets/${id}`, { method: "DELETE" });
return true;
} catch {
return localAdapter.deleteTicket(id)
return localAdapter.deleteTicket(id);
}
},
}
};

30
frontend/src/pages/UserPage.tsx
View File

@@ -5,7 +5,7 @@ import { TicketTable } from '../components/tickets/TicketTable.tsx'
import { TicketDetail } from '../components/tickets/TicketDetail.tsx'
import { NewTicketForm } from '../components/tickets/NewTicketForm.tsx'
import { useModal } from '../hooks/useModal.ts'
import { storage } from '../lib/storage.ts'
import { storage, ApiError } from '../lib/storage.ts'
import type { Ticket } from '../lib/types.ts'
import { PlusIcon } from '../components/icons/plus.tsx'
@@ -66,6 +66,7 @@ function TicketLimitReached({ onClose, fromServer }: { onClose: () => void; from
export function UserPage({ isAuthenticated }: UserPageProps) {
const [tickets, setTickets] = useState<Ticket[]>([])
const [serverLimitHit, setServerLimitHit] = useState(false)
const [contentError, setContentError] = useState<string | null>(null)
const [selectedTicket, setSelectedTicket] = useState<Ticket | null>(null)
const newTicketModal = useModal()
@@ -81,6 +82,7 @@ export function UserPage({ isAuthenticated }: UserPageProps) {
const handleNewClose = () => {
newTicketModal.close()
setServerLimitHit(false)
setContentError(null)
}
const handleOpen = (ticket: Ticket) => {
@@ -103,14 +105,20 @@ export function UserPage({ isAuthenticated }: UserPageProps) {
const handleCreate = async (form: Pick<Ticket, 'subject' | 'description' | 'type'>) => {
if (atLimit) return
setContentError(null)
try {
const ticket = await storage.createTicket(form)
setTickets(prev => [ticket, ...prev])
newTicketModal.close()
} catch (err: any) {
if (err?.code === 'ticket_limit_reached') {
setServerLimitHit(true)
storage.getTickets().then(setTickets)
} catch (err) {
if (err instanceof ApiError) {
if (err.code === 'ticket_limit_reached') {
setServerLimitHit(true)
storage.getTickets().then(setTickets)
} else if (err.code === 'profanity') {
// Surface the server's message directly — it says which field was flagged
setContentError(err.message)
}
}
}
}
@@ -150,7 +158,17 @@ export function UserPage({ isAuthenticated }: UserPageProps) {
>
{showLimitScreen
? <TicketLimitReached onClose={handleNewClose} fromServer={serverLimitHit && !atLimit} />
: <NewTicketForm onSubmit={handleCreate} />
: (
<>
{contentError && (
<div className="mb-4 flex items-start gap-2.5 rounded-lg border border-red-500/30 bg-red-500/10 px-3.5 py-3">
<span className="mt-0.5 text-sm">🚫</span>
<p className="text-xs leading-relaxed text-red-400">{contentError}</p>
</div>
)}
<NewTicketForm onSubmit={handleCreate} />
</>
)
}
</Modal>