Crowmate/Nest
Archived
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

git: Merge pull request #1 from CrowMate/feat/connect-front-to-backend

Browse Source 
Feat/connect front to backend
This commit is contained in:
Thibault Pouch
2026-03-03 14:54:26 +01:00
committed by GitHub
parent 4768bd5184 b6b3d94fac
commit cc175b6ce6
21 changed files with 824 additions and 475 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docker-compose.yml
View File

@@ -38,13 +38,17 @@ services:
build: ./nest-front
restart: unless-stopped
ports:
- "5173:5173"
- "80:80"
depends_on:
- api
intra:
build: ./nest-intra
restart: unless-stopped
ports:
- "5174:5174"
depends_on:
- api
volumes:
db_data:

93
nest-backend/src/app.ts
View File

@@ -10,6 +10,97 @@ import teamRouter from './routes/team.js';
const app = express();
// ── Logger ─────────────────────────────────────────────────────────────────────
const R = '\x1b[0m';
const BOLD = '\x1b[1m';
const DIM = '\x1b[2m';
const RED = '\x1b[31m';
const GREEN = '\x1b[32m';
const YELLOW = '\x1b[33m';
const BLUE = '\x1b[34m';
const MAGENTA = '\x1b[35m';
const CYAN = '\x1b[36m';
const WHITE = '\x1b[37m';
const BG_RED = '\x1b[41m';
const BG_GREEN = '\x1b[42m';
const BG_YELLOW = '\x1b[43m';
const BG_BLUE = '\x1b[44m';
const BG_MAGENTA = '\x1b[45m';
const BG_CYAN = '\x1b[46m';
const METHOD_STYLE: Record<string, string> = {
GET: `${BG_BLUE}${WHITE}${BOLD}`,
POST: `${BG_GREEN}${WHITE}${BOLD}`,
PUT: `${BG_YELLOW}${WHITE}${BOLD}`,
PATCH: `${BG_MAGENTA}${WHITE}${BOLD}`,
DELETE: `${BG_RED}${WHITE}${BOLD}`,
};
function methodBadge(method: string): string {
const style = METHOD_STYLE[method] ?? `${BG_CYAN}${WHITE}${BOLD}`;
return `${style} ${method.padEnd(6)} ${R}`;
}
function statusBadge(code: number): string {
if (code < 300) return `${BG_GREEN}${WHITE}${BOLD} ${code} ${R}`;
if (code < 400) return `${BG_YELLOW}${WHITE}${BOLD} ${code} ${R}`;
return `${BG_RED}${WHITE}${BOLD} ${code} ${R}`;
}
function prettyJson(value: unknown): string {
return JSON.stringify(value, (k, v) => k === 'password' ? '***' : v, 2)
.split('\n')
.map((line, i) => i === 0 ? line : ` ${DIM} ${line}${R}`)
.join('\n');
}
const SEP = `${DIM}${'─'.repeat(60)}${R}`;
app.use((req, res, next) => {
const start = Date.now();
const ts = new Date().toISOString().replace('T', ' ').slice(0, 23);
// Skip health check noise
if (req.originalUrl === '/api/health') { next(); return; }
const originalJson = res.json.bind(res);
let resBody: unknown;
res.json = (body) => { resBody = body; return originalJson(body); };
res.on('finish', () => {
const ms = Date.now() - start;
const userId = req.user?.userId ? `${CYAN}${req.user.userId.slice(0, 8)}…${R}` : `${DIM}anon${R}`;
const role = req.user?.role ? `${MAGENTA}${req.user.role}${R}` : `${DIM}-${R}`;
const hasBody = ['POST', 'PUT', 'PATCH'].includes(req.method)
&& req.body && Object.keys(req.body).length > 0;
const lines: string[] = [
SEP,
`${DIM}${ts}${R} ${methodBadge(req.method)} ${BOLD}${req.originalUrl}${R}`,
` ${DIM}┌ user ${R} ${userId} ${DIM}role:${R} ${role}`,
` ${DIM}└ status ${R} ${statusBadge(res.statusCode)} ${DIM}${ms}ms${R}`,
];
if (hasBody) {
lines.push(` ${GREEN}↑ REQUEST BODY${R}`);
lines.push(` ${DIM} ${prettyJson(req.body)}${R}`);
}
if (res.statusCode >= 400 && resBody) {
lines.push(` ${RED}↓ ERROR RESPONSE${R}`);
lines.push(` ${DIM} ${prettyJson(resBody)}${R}`);
} else if (res.statusCode < 300 && resBody && req.method !== 'GET') {
lines.push(` ${GREEN}↓ RESPONSE BODY${R}`);
lines.push(` ${DIM} ${prettyJson(resBody)}${R}`);
}
console.log(lines.join('\n'));
});
next();
});
app.use(cors({
origin: [
'http://localhost:5173', // nest-front dev
@@ -37,7 +128,7 @@ app.use((_req, res) => res.status(404).json({ error: 'Not found' }));
// Global error handler
app.use((err: Error, _req: express.Request, res: express.Response, _next: express.NextFunction) => {
console.error(err);
console.error(`${BG_RED}${WHITE}${BOLD} UNHANDLED ERROR ${R}`, err);
res.status(500).json({ error: 'Internal server error' });
});

8
nest-backend/src/lib/prisma.ts
View File

@@ -1,5 +1,11 @@
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
const prisma = new PrismaClient({
log: [
{ emit: 'stdout', level: 'query' },
{ emit: 'stdout', level: 'warn' },
{ emit: 'stdout', level: 'error' },
],
});
export default prisma;

12
nest-front/Dockerfile
View File

@@ -17,14 +17,8 @@ RUN npm run build
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf.template
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 5173
EXPOSE 80
# API_URL is the backend's public base URL used by nginx proxy_pass.
# Set this at runtime in Coolify, e.g. API_URL=https://api.crowmate.fr
ENV API_URL=http://localhost:3000
# Substitute ${API_URL} in the nginx template at container start, then launch nginx.
# The quoted variable list prevents envsubst from replacing nginx variables like $host.
CMD ["/bin/sh", "-c", "envsubst '${API_URL}' < /etc/nginx/nginx.conf.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"]
CMD ["nginx", "-g", "daemon off;"]

2
nest-front/docker-compose.yml
View File

@@ -2,5 +2,5 @@ services:
nest-front:
build: .
ports:
- "5173:5173"
- "80:80"
restart: unless-stopped

8
nest-front/nginx.conf
View File

@@ -1,10 +1,14 @@
server {
listen 5173;
listen 80;
root /usr/share/nginx/html;
index index.html;
# Use Docker's embedded DNS resolver; defer resolution to request time
resolver 127.0.0.11 valid=30s;
location /api/ {
proxy_pass ${API_URL}/api/;
set $api_upstream http://api:3000;
proxy_pass $api_upstream;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

28
nest-front/src/components/shared/DevRoleSwitcher.tsx
View File

@@ -1,8 +1,7 @@
import { useAuth } from '../../contexts/AuthContext';
import type { UserRole } from '../../types';
/**
* Developer-only overlay to quickly switch user roles for testing.
* Developer-only overlay to quickly log in as test accounts.
* Only visible in development mode.
*/
export function DevRoleSwitcher() {
@@ -12,9 +11,8 @@ export function DevRoleSwitcher() {
}
function DevRoleSwitcherInner() {
const { user, isAuthenticated, devSetRole, login, logout } = useAuth();
const { user, isAuthenticated, login, logout } = useAuth();
const ROLES: UserRole[] = ['user', 'dev', 'com'];
const DEV_ACCOUNTS = [
{ label: 'Dev/Admin (Kestrel)', email: 'kestrel@crowmate.dev' },
{ label: 'Com Staff (Vesper)', email: 'vesper@crowmate.dev' },
@@ -48,30 +46,10 @@ function DevRoleSwitcherInner() {
<div style={{ color: 'var(--color-text-muted)', marginBottom: '0.4rem' }}>
Logged as: <strong style={{ color: 'var(--color-text)' }}>{user?.username}</strong>
</div>
<div style={{ color: 'var(--color-text-muted)', marginBottom: '0.5rem' }}>
<div style={{ color: 'var(--color-text-muted)', marginBottom: '0.75rem' }}>
Role: <strong style={{ color: 'var(--color-green)' }}>{user?.role}</strong>
</div>
<div style={{ display: 'flex', gap: '0.3rem', marginBottom: '0.5rem', flexWrap: 'wrap' }}>
{ROLES.map((r) => (
<button
key={r}
onClick={() => devSetRole(r)}
style={{
background: user?.role === r ? 'var(--color-amber)' : 'transparent',
border: '1px solid var(--color-amber)',
color: user?.role === r ? '#000' : 'var(--color-amber)',
padding: '0.1rem 0.4rem',
cursor: 'pointer',
fontFamily: 'var(--font-mono)',
fontSize: '0.65rem',
}}
>
{r}
</button>
))}
</div>
<button
onClick={logout}
style={{

145
nest-front/src/contexts/AuthContext.tsx
View File

@@ -2,11 +2,12 @@ import React, {
createContext,
useCallback,
useContext,
useEffect,
useMemo,
useState,
} from 'react';
import type { User, UserRole } from '../types';
import { MOCK_USERS } from '../data/mockData';
import type { User } from '../types';
import { authApi, usersApi, getToken, setToken, clearToken } from '../utils/api';
// ── Types ──────────────────────────────────────────────────────────────────────
@@ -15,12 +16,11 @@ interface AuthContextValue {
isAuthenticated: boolean;
isStaff: boolean;
isAdmin: boolean;
isLoading: boolean;
login: (email: string, password: string) => Promise<{ success: boolean; error?: string }>;
register: (username: string, email: string, password: string) => Promise<{ success: boolean; error?: string }>;
logout: () => void;
updateUsername: (username: string) => void;
// Dev helper: quickly switch role for testing
devSetRole: (role: UserRole) => void;
updateUsername: (username: string) => Promise<{ success: boolean; error?: string }>;
}
// ── Context ────────────────────────────────────────────────────────────────────
@@ -31,16 +31,6 @@ const AuthContext = createContext<AuthContextValue | null>(null);
const STORAGE_KEY = 'crowmate_auth_user';
function loadUserFromStorage(): User | null {
try {
const raw = localStorage.getItem(STORAGE_KEY);
if (!raw) return null;
return JSON.parse(raw) as User;
} catch {
return null;
}
}
function saveUserToStorage(user: User | null): void {
if (user) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(user));
@@ -50,96 +40,89 @@ function saveUserToStorage(user: User | null): void {
}
export function AuthProvider({ children }: { children: React.ReactNode }) {
const [user, setUser] = useState<User | null>(loadUserFromStorage);
const [user, setUser] = useState<User | null>(null);
const [isLoading, setIsLoading] = useState(true);
// On mount: validate stored token and restore session
useEffect(() => {
const token = getToken();
if (!token) {
setIsLoading(false);
return;
}
authApi.me()
.then((freshUser) => {
setUser(freshUser);
saveUserToStorage(freshUser);
})
.catch(() => {
clearToken();
saveUserToStorage(null);
})
.finally(() => setIsLoading(false));
}, []);
const isAuthenticated = user !== null;
const isStaff = user?.role === 'dev' || user?.role === 'com';
const isAdmin = user?.isAdmin === true;
const login = useCallback(
async (email: string, _password: string): Promise<{ success: boolean; error?: string }> => {
// Simulate network delay
await new Promise((r) => setTimeout(r, 400));
const found = MOCK_USERS.find(
(u) => u.email.toLowerCase() === email.toLowerCase()
);
if (!found) {
return { success: false, error: 'No account found with that email address.' };
async (email: string, password: string): Promise<{ success: boolean; error?: string }> => {
try {
const { token, user: loggedInUser } = await authApi.login(email, password);
setToken(token);
setUser(loggedInUser);
saveUserToStorage(loggedInUser);
return { success: true };
} catch (err) {
const message = err instanceof Error ? err.message : 'Login failed.';
return { success: false, error: message };
}
if (found.isBanned) {
return { success: false, error: 'This account has been suspended.' };
}
setUser(found);
saveUserToStorage(found);
return { success: true };
},
[]
);
const register = useCallback(
async (username: string, email: string, _password: string): Promise<{ success: boolean; error?: string }> => {
await new Promise((r) => setTimeout(r, 500));
const emailTaken = MOCK_USERS.some(
(u) => u.email.toLowerCase() === email.toLowerCase()
);
if (emailTaken) {
return { success: false, error: 'An account with this email already exists.' };
async (username: string, email: string, password: string): Promise<{ success: boolean; error?: string }> => {
try {
const { token, user: newUser } = await authApi.register(username, email, password);
setToken(token);
setUser(newUser);
saveUserToStorage(newUser);
return { success: true };
} catch (err) {
const message = err instanceof Error ? err.message : 'Registration failed.';
return { success: false, error: message };
}
const usernameTaken = MOCK_USERS.some(
(u) => u.username.toLowerCase() === username.toLowerCase()
);
if (usernameTaken) {
return { success: false, error: 'This username is already taken.' };
}
const newUser: User = {
id: `u${Date.now()}`,
username,
email,
role: 'user',
isAdmin: false,
isBanned: false,
createdAt: new Date().toISOString(),
};
setUser(newUser);
saveUserToStorage(newUser);
return { success: true };
},
[]
);
const logout = useCallback(() => {
clearToken();
setUser(null);
saveUserToStorage(null);
}, []);
const updateUsername = useCallback((username: string) => {
setUser((prev) => {
if (!prev) return prev;
const updated = { ...prev, username };
saveUserToStorage(updated);
return updated;
});
}, []);
const devSetRole = useCallback((role: UserRole) => {
setUser((prev) => {
if (!prev) return prev;
const updated = { ...prev, role, isAdmin: role === 'dev' };
saveUserToStorage(updated);
return updated;
});
}, []);
const updateUsername = useCallback(
async (username: string): Promise<{ success: boolean; error?: string }> => {
try {
const updatedUser = await usersApi.updateUsername(username);
setUser(updatedUser);
saveUserToStorage(updatedUser);
return { success: true };
} catch (err) {
const message = err instanceof Error ? err.message : 'Failed to update username.';
return { success: false, error: message };
}
},
[]
);
const value = useMemo<AuthContextValue>(
() => ({ user, isAuthenticated, isStaff, isAdmin, login, register, logout, updateUsername, devSetRole }),
[user, isAuthenticated, isStaff, isAdmin, login, register, logout, updateUsername, devSetRole]
() => ({ user, isAuthenticated, isStaff, isAdmin, isLoading, login, register, logout, updateUsername }),
[user, isAuthenticated, isStaff, isAdmin, isLoading, login, register, logout, updateUsername]
);
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;

49
nest-front/src/pages/public/AccountPage.tsx
View File

@@ -1,17 +1,29 @@
import { useState, useCallback } from 'react';
import { useState, useCallback, useEffect } from 'react';
import { useAuth } from '../../contexts/AuthContext';
import { MOCK_THREADS, MOCK_BUGS } from '../../data/mockData';
import { bugsApi, forumApi, usersApi } from '../../utils/api';
import { formatDate } from '../../utils/format';
import { Link } from 'react-router-dom';
import type { BugReport, ForumThread } from '../../types';
type Tab = 'profile' | 'threads' | 'bugs' | 'password';
export default function AccountPage() {
const { user, updateUsername } = useAuth();
const [activeTab, setActiveTab] = useState<Tab>('profile');
const [userThreads, setUserThreads] = useState<ForumThread[]>([]);
const [userBugs, setUserBugs] = useState<BugReport[]>([]);
const userThreads = MOCK_THREADS.filter((t) => t.authorId === user?.id);
const userBugs = MOCK_BUGS.filter((b) => b.submittedById === user?.id);
useEffect(() => {
if (!user) return;
forumApi.getThreads({ limit: 200 })
.then((res) => setUserThreads(res.data.filter((t) => t.authorId === user.id)))
.catch(() => setUserThreads([]));
bugsApi.getBugs({ limit: 200 })
.then((res) => setUserBugs(res.data.filter((b) => b.submittedById === user.id)))
.catch(() => setUserBugs([]));
}, [user]);
const tabs: { id: Tab; label: string }[] = [
{ id: 'profile', label: 'Profile' },
@@ -121,19 +133,23 @@ export default function AccountPage() {
// ── Profile Tab ────────────────────────────────────────────────────────────────
function ProfileTab({ user, updateUsername }: { user: NonNullable<ReturnType<typeof useAuth>['user']>; updateUsername: (u: string) => void }) {
function ProfileTab({ user, updateUsername }: { user: NonNullable<ReturnType<typeof useAuth>['user']>; updateUsername: (u: string) => Promise<{ success: boolean; error?: string }> }) {
const [editing, setEditing] = useState(false);
const [username, setUsername] = useState(user.username);
const [error, setError] = useState('');
const [saved, setSaved] = useState(false);
const handleSave = useCallback(() => {
const handleSave = useCallback(async () => {
if (!username.trim()) { setError('Username cannot be empty.'); return; }
if (username.length < 3) { setError('Must be at least 3 characters.'); return; }
updateUsername(username.trim());
setEditing(false);
setSaved(true);
setTimeout(() => setSaved(false), 3000);
const result = await updateUsername(username.trim());
if (result.success) {
setEditing(false);
setSaved(true);
setTimeout(() => setSaved(false), 3000);
} else {
setError(result.error ?? 'Failed to update username.');
}
}, [username, updateUsername]);
return (
@@ -210,10 +226,15 @@ function ChangePasswordForm() {
if (Object.keys(next).length > 0) return;
setLoading(true);
await new Promise((r) => setTimeout(r, 400));
setLoading(false);
setForm({ current: '', next: '', confirm: '' });
setErrors({ success: 'Password changed successfully.' });
try {
await usersApi.changePassword(form.current, form.next);
setForm({ current: '', next: '', confirm: '' });
setErrors({ success: 'Password changed successfully.' });
} catch (err) {
setErrors({ current: err instanceof Error ? err.message : 'Failed to change password.' });
} finally {
setLoading(false);
}
}, [form]);
return (

97
nest-front/src/pages/public/BugDetailPage.tsx
View File

@@ -1,6 +1,6 @@
import { useState, useCallback, useMemo } from 'react';
import { useState, useCallback, useEffect, useMemo } from 'react';
import { Link, Navigate, useParams } from 'react-router-dom';
import { MOCK_BUGS, MOCK_BUG_COMMENTS } from '../../data/mockData';
import { bugsApi, ApiError } from '../../utils/api';
import { useAuth } from '../../contexts/AuthContext';
import { formatDate, formatDateTime } from '../../utils/format';
import type { BugComment, BugReport, BugSeverity, BugStatus } from '../../types';
@@ -57,21 +57,36 @@ export default function BugDetailPage() {
const { id } = useParams<{ id: string }>();
const { user, isAuthenticated } = useAuth();
// Local state — mirrors the global bug list in memory
const [bugs, setBugs] = useState<BugReport[]>(MOCK_BUGS);
const [comments, setComments] = useState<BugComment[]>(MOCK_BUG_COMMENTS);
const [bug, setBug] = useState<BugReport | null>(null);
const [comments, setComments] = useState<BugComment[]>([]);
const [loading, setLoading] = useState(true);
const [notFound, setNotFound] = useState(false);
const [newComment, setNewComment] = useState('');
const [commentError, setCommentError] = useState('');
const [submitting, setSubmitting] = useState(false);
const bug = useMemo(() => bugs.find((b) => b.id === id), [bugs, id]);
useEffect(() => {
if (!id) return;
let cancelled = false;
setLoading(true);
const bugComments = useMemo(
() => comments.filter((c) => c.bugReportId === id).sort((a, b) => a.createdAt.localeCompare(b.createdAt)),
[comments, id]
);
bugsApi.getBug(id)
.then((data) => {
if (cancelled) return;
const { comments: bugComments, ...bugData } = data;
setBug(bugData);
setComments(bugComments.sort((a, b) => a.createdAt.localeCompare(b.createdAt)));
})
.catch((err) => {
if (cancelled) return;
if (err instanceof ApiError && err.status === 404) setNotFound(true);
})
.finally(() => { if (!cancelled) setLoading(false); });
return () => { cancelled = true; };
}, [id]);
// "I have this too" logic
const alreadyVoted = useMemo(
() => !!user && !!bug && bug.meTooBugs.includes(user.id),
[user, bug]
@@ -81,38 +96,44 @@ export default function BugDetailPage() {
[user, bug]
);
const handleMeToo = useCallback(() => {
const handleMeToo = useCallback(async () => {
if (!user || !bug || alreadyVoted || isOwnReport) return;
setBugs((prev) =>
prev.map((b) =>
b.id === bug.id ? { ...b, meTooBugs: [...b.meTooBugs, user.id] } : b
)
);
try {
await bugsApi.toggleMeToo(bug.id);
setBug((prev) => prev ? { ...prev, meTooBugs: [...prev.meTooBugs, user.id] } : prev);
} catch {
// silently ignore
}
}, [user, bug, alreadyVoted, isOwnReport]);
const handleComment = useCallback(async () => {
if (!user) return;
if (!user || !bug) return;
if (!newComment.trim()) { setCommentError('Comment cannot be empty.'); return; }
if (newComment.trim().length < 5) { setCommentError('Comment must be at least 5 characters.'); return; }
setCommentError('');
setSubmitting(true);
await new Promise((r) => setTimeout(r, 250));
const comment: BugComment = {
id: `bc${Date.now()}`,
bugReportId: id!,
authorId: user.id,
authorName: user.username,
content: newComment.trim(),
createdAt: new Date().toISOString(),
};
setComments((prev) => [...prev, comment]);
setNewComment('');
setSubmitting(false);
}, [user, newComment, id]);
try {
const comment = await bugsApi.addComment(bug.id, newComment.trim());
setComments((prev) => [...prev, comment]);
setNewComment('');
} catch (err) {
setCommentError(err instanceof Error ? err.message : 'Failed to post comment.');
} finally {
setSubmitting(false);
}
}, [user, bug, newComment]);
if (!bug) {
if (loading) {
return (
<div style={{ maxWidth: '860px', margin: '0 auto', padding: '3rem 1.5rem', textAlign: 'center', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)' }}>
Loading...
</div>
);
}
if (notFound || !bug) {
return <Navigate to="/bugs" replace />;
}
@@ -129,7 +150,6 @@ export default function BugDetailPage() {
{/* Header */}
<div className="crt-box" style={{ padding: '1.75rem', marginBottom: '1rem' }}>
{/* Badges */}
<div style={{ display: 'flex', gap: '0.4rem', flexWrap: 'wrap', alignItems: 'center', marginBottom: '0.75rem' }}>
<span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.72rem' }}>
{bug.uniqueCode}
@@ -138,7 +158,6 @@ export default function BugDetailPage() {
<SeverityBadge severity={bug.severity} />
</div>
{/* Title */}
<h1
style={{
fontFamily: 'var(--font-heading)',
@@ -227,13 +246,11 @@ export default function BugDetailPage() {
borderRadius: '6px',
}}
>
{/* Count */}
<div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-green)', fontSize: '0.82rem' }}>
<span style={{ fontSize: '1.1rem' }}>{metooCount}</span>{' '}
{metooCount === 1 ? 'user has' : 'users have'} this issue
</div>
{/* Button logic */}
{!isAuthenticated ? (
<div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.78rem' }}>
<Link to="/login">Login</Link> to confirm you have this issue
@@ -285,22 +302,20 @@ export default function BugDetailPage() {
Discussion
</span>
<span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.65rem', border: '1px solid var(--color-border)', padding: '0.05rem 0.4rem' }}>
{bugComments.length}
{comments.length}
</span>
</div>
{/* Comment list */}
{bugComments.length === 0 ? (
{comments.length === 0 ? (
<div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.8rem', padding: '1rem 0' }}>
No comments yet. Be the first to comment.
</div>
) : (
bugComments.map((comment) => (
comments.map((comment) => (
<CommentItem key={comment.id} comment={comment} />
))
)}
{/* Add comment */}
<div style={{ marginTop: '1.25rem' }}>
{isAuthenticated ? (
<div className="crt-box" style={{ padding: '1.25rem' }}>

199
nest-front/src/pages/public/BugReportPage.tsx
View File

@@ -1,6 +1,6 @@
import { useState, useMemo, useCallback } from 'react';
import { useState, useMemo, useCallback, useEffect } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { MOCK_BUGS } from '../../data/mockData';
import { bugsApi } from '../../utils/api';
import { useAuth } from '../../contexts/AuthContext';
import { timeAgo } from '../../utils/format';
import type { BugReport, BugSeverity, BugStatus, BugReportFormData } from '../../types';
@@ -66,7 +66,6 @@ function BugCard({ bug, highlight }: BugCardProps) {
</span>
<StatusBadge status={bug.status} />
<SeverityBadge severity={bug.severity} />
{/* MeToo count */}
<span
style={{
fontFamily: 'var(--font-mono)',
@@ -118,7 +117,7 @@ function BugCard({ bug, highlight }: BugCardProps) {
const GAME_VERSIONS = ['0.9.3-alpha', '0.9.2-alpha', '0.9.1-alpha'];
const SEVERITIES: BugSeverity[] = ['low', 'medium', 'high', 'critical'];
function SubmitBugForm({ onSubmit }: { onSubmit: (data: BugReportFormData) => void }) {
function SubmitBugForm({ onSubmit }: { onSubmit: (data: BugReportFormData) => Promise<void> }) {
const [form, setForm] = useState<BugReportFormData>({
title: '',
description: '',
@@ -128,6 +127,8 @@ function SubmitBugForm({ onSubmit }: { onSubmit: (data: BugReportFormData) => vo
});
const [errors, setErrors] = useState<Partial<Record<keyof BugReportFormData, string>>>({});
const [submitted, setSubmitted] = useState(false);
const [submitting, setSubmitting] = useState(false);
const [submitError, setSubmitError] = useState('');
const set = useCallback(<K extends keyof BugReportFormData>(key: K, value: BugReportFormData[K]) => {
setForm((prev) => ({ ...prev, [key]: value }));
@@ -148,9 +149,16 @@ function SubmitBugForm({ onSubmit }: { onSubmit: (data: BugReportFormData) => vo
const handleSubmit = useCallback(async (e: React.FormEvent) => {
e.preventDefault();
if (!validate()) return;
await new Promise((r) => setTimeout(r, 400));
onSubmit(form);
setSubmitted(true);
setSubmitting(true);
setSubmitError('');
try {
await onSubmit(form);
setSubmitted(true);
} catch (err) {
setSubmitError(err instanceof Error ? err.message : 'Failed to submit report.');
} finally {
setSubmitting(false);
}
}, [form, onSubmit]);
const labelStyle: React.CSSProperties = {
@@ -186,6 +194,12 @@ function SubmitBugForm({ onSubmit }: { onSubmit: (data: BugReportFormData) => vo
&#9654; Submit a Bug Report
</div>
{submitError && (
<div style={{ color: 'var(--color-red)', fontFamily: 'var(--font-mono)', fontSize: '0.75rem', marginBottom: '1rem' }}>
[ERROR] {submitError}
</div>
)}
<div style={{ marginBottom: '0.85rem' }}>
<label style={labelStyle}>Title *</label>
<input
@@ -250,8 +264,8 @@ function SubmitBugForm({ onSubmit }: { onSubmit: (data: BugReportFormData) => vo
/>
</div>
<button type="submit" className="btn-terminal">
&#9654; Submit Report
<button type="submit" className="btn-terminal" disabled={submitting} style={{ opacity: submitting ? 0.6 : 1 }}>
{submitting ? 'Submitting...' : '&#9654; Submit Report'}
</button>
</div>
</form>
@@ -262,44 +276,37 @@ function SubmitBugForm({ onSubmit }: { onSubmit: (data: BugReportFormData) => vo
export default function BugReportPage() {
const { user, isAuthenticated } = useAuth();
const [bugs, setBugs] = useState(MOCK_BUGS);
const [bugs, setBugs] = useState<BugReport[]>([]);
const [loading, setLoading] = useState(true);
const [statusFilter, setStatusFilter] = useState<BugStatus | 'all'>('all');
const [severityFilter, setSeverityFilter] = useState<BugSeverity | 'all'>('all');
const [showForm, setShowForm] = useState(false);
// Separate: user's own bugs and all others, both filtered
const fetchBugs = useCallback(() => {
setLoading(true);
bugsApi.getBugs({ status: statusFilter, severity: severityFilter, limit: 100 })
.then((res) => setBugs(res.data))
.catch(() => setBugs([]))
.finally(() => setLoading(false));
}, [statusFilter, severityFilter]);
useEffect(() => { fetchBugs(); }, [fetchBugs]);
const { myBugs, otherBugs } = useMemo(() => {
const passes = (b: BugReport) => {
if (statusFilter !== 'all' && b.status !== statusFilter) return false;
if (severityFilter !== 'all' && b.severity !== severityFilter) return false;
return true;
};
const my: BugReport[] = [];
const other: BugReport[] = [];
bugs.forEach((b) => {
if (!passes(b)) return;
if (user && b.submittedById === user.id) my.push(b);
else other.push(b);
});
return { myBugs: my, otherBugs: other };
}, [bugs, statusFilter, severityFilter, user]);
}, [bugs, user]);
const handleNewReport = useCallback((data: BugReportFormData) => {
const newBug: BugReport = {
id: `bug${Date.now()}`,
uniqueCode: `HH-${String(bugs.length + 1).padStart(4, '0')}`,
...data,
status: 'open',
submittedById: user?.id ?? 'unknown',
submittedByName: user?.username ?? 'You',
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
notes: [],
meTooBugs: [],
};
const handleNewReport = useCallback(async (data: BugReportFormData) => {
const newBug = await bugsApi.createBug(data);
setBugs((prev) => [newBug, ...prev]);
setShowForm(false);
}, [bugs.length, user]);
}, []);
const openCount = bugs.filter((b) => b.status === 'open').length;
const inProgressCount = bugs.filter((b) => b.status === 'in_progress').length;
@@ -373,68 +380,78 @@ export default function BugReportPage() {
</select>
</div>
{/* "Your Reports" section — only for logged-in users with their own bugs */}
{isAuthenticated && myBugs.length > 0 && (
<section style={{ marginBottom: '2rem' }}>
<div
style={{
display: 'flex',
alignItems: 'center',
gap: '0.75rem',
marginBottom: '0.75rem',
paddingBottom: '0.4rem',
borderBottom: '2px solid var(--color-yellow)',
}}
>
<span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-yellow)', fontSize: '0.72rem', letterSpacing: '0.15em', textTransform: 'uppercase' }}>
&#9654; Your Reports
</span>
<span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-yellow)', fontSize: '0.65rem', background: 'rgba(255,255,0,0.1)', border: '1px solid var(--color-yellow)', padding: '0.05rem 0.4rem' }}>
{myBugs.length}
</span>
</div>
{myBugs.map((bug) => (
<BugCard key={bug.id} bug={bug} highlight />
))}
</section>
{loading && (
<div className="crt-box" style={{ padding: '2rem', textAlign: 'center', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)' }}>
Loading reports...
</div>
)}
{/* All other reports */}
<section>
{isAuthenticated && myBugs.length > 0 && (
<div
style={{
display: 'flex',
alignItems: 'center',
gap: '0.75rem',
marginBottom: '0.75rem',
paddingBottom: '0.4rem',
borderBottom: '2px solid var(--color-border)',
}}
>
<span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.72rem', letterSpacing: '0.15em', textTransform: 'uppercase' }}>
All Reports
</span>
<span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.65rem', border: '1px solid var(--color-border)', padding: '0.05rem 0.4rem' }}>
{otherBugs.length}
</span>
</div>
)}
{!loading && (
<>
{/* "Your Reports" section */}
{isAuthenticated && myBugs.length > 0 && (
<section style={{ marginBottom: '2rem' }}>
<div
style={{
display: 'flex',
alignItems: 'center',
gap: '0.75rem',
marginBottom: '0.75rem',
paddingBottom: '0.4rem',
borderBottom: '2px solid var(--color-yellow)',
}}
>
<span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-yellow)', fontSize: '0.72rem', letterSpacing: '0.15em', textTransform: 'uppercase' }}>
&#9654; Your Reports
</span>
<span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-yellow)', fontSize: '0.65rem', background: 'rgba(255,255,0,0.1)', border: '1px solid var(--color-yellow)', padding: '0.05rem 0.4rem' }}>
{myBugs.length}
</span>
</div>
{myBugs.map((bug) => (
<BugCard key={bug.id} bug={bug} highlight />
))}
</section>
)}
{otherBugs.length === 0 && myBugs.length === 0 ? (
<div className="crt-box" style={{ padding: '2rem', textAlign: 'center', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)' }}>
No bug reports match the selected filters.
</div>
) : otherBugs.length === 0 && isAuthenticated ? (
<div className="crt-box" style={{ padding: '1.5rem', textAlign: 'center', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)', fontSize: '0.8rem' }}>
No other reports match the selected filters.
</div>
) : (
otherBugs.map((bug) => (
<BugCard key={bug.id} bug={bug} />
))
)}
</section>
{/* All other reports */}
<section>
{isAuthenticated && myBugs.length > 0 && (
<div
style={{
display: 'flex',
alignItems: 'center',
gap: '0.75rem',
marginBottom: '0.75rem',
paddingBottom: '0.4rem',
borderBottom: '2px solid var(--color-border)',
}}
>
<span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.72rem', letterSpacing: '0.15em', textTransform: 'uppercase' }}>
All Reports
</span>
<span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.65rem', border: '1px solid var(--color-border)', padding: '0.05rem 0.4rem' }}>
{otherBugs.length}
</span>
</div>
)}
{otherBugs.length === 0 && myBugs.length === 0 ? (
<div className="crt-box" style={{ padding: '2rem', textAlign: 'center', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)' }}>
No bug reports match the selected filters.
</div>
) : otherBugs.length === 0 && isAuthenticated ? (
<div className="crt-box" style={{ padding: '1.5rem', textAlign: 'center', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)', fontSize: '0.8rem' }}>
No other reports match the selected filters.
</div>
) : (
otherBugs.map((bug) => (
<BugCard key={bug.id} bug={bug} />
))
)}
</section>
</>
)}
</div>
);
}

103
nest-front/src/pages/public/EventsPage.tsx
View File

@@ -1,5 +1,5 @@
import { useState, useCallback } from 'react';
import { MOCK_EVENTS, MOCK_POLLS } from '../../data/mockData';
import { useState, useCallback, useEffect } from 'react';
import { eventsApi } from '../../utils/api';
import { useAuth } from '../../contexts/AuthContext';
import { formatDateTime } from '../../utils/format';
import type { EventPost, EventType, Poll, UserRole } from '../../types';
@@ -54,7 +54,7 @@ function PollCard({ poll, onVote }: { poll: Poll; onVote: (pollId: string, optio
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
{poll.options.map((option) => {
const percentage = totalVotes > 0 ? Math.round((option.votes / totalVotes) * 100) : 0;
const userVoted = option.votedUserIds.includes(user?.id || '');
const userVoted = option.votedUserIds.includes(user?.id ?? '');
return (
<div
@@ -158,12 +158,10 @@ function PollCard({ poll, onVote }: { poll: Poll; onVote: (pollId: string, optio
function EventCard({
event,
poll,
onVote,
}: {
event: EventPost;
poll?: Poll;
onVote: (pollId: string, optionId: string) => void;
onVote: (eventId: string, pollId: string, optionId: string) => void;
}) {
return (
<div
@@ -240,7 +238,12 @@ function EventCard({
</div>
{/* Poll if exists */}
{poll && <PollCard poll={poll} onVote={onVote} />}
{event.poll && (
<PollCard
poll={event.poll}
onVote={(pollId, optionId) => onVote(event.id, pollId, optionId)}
/>
)}
</div>
);
}
@@ -249,48 +252,28 @@ function EventCard({
export default function EventsPage() {
const { user } = useAuth();
// Filter to show only public events
const publicEvents = MOCK_EVENTS.filter((event) => event.isPublic);
const [events] = useState<EventPost[]>(publicEvents);
const [polls, setPolls] = useState<Poll[]>(MOCK_POLLS);
const [events, setEvents] = useState<EventPost[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
eventsApi.getEvents(true)
.then((res) => setEvents(res.events))
.catch(() => setEvents([]))
.finally(() => setLoading(false));
}, []);
const handleVote = useCallback(
(pollId: string, optionId: string) => {
async (eventId: string, _pollId: string, optionId: string) => {
if (!user) return;
setPolls((prevPolls) =>
prevPolls.map((poll) => {
if (poll.id !== pollId) return poll;
const hasVotedForOption = poll.options.some((opt) =>
opt.votedUserIds.includes(user.id)
);
return {
...poll,
options: poll.options.map((opt) => {
if (opt.id === optionId) {
// Add vote to this option
return {
...opt,
votes: opt.votedUserIds.includes(user.id) ? opt.votes : opt.votes + 1,
votedUserIds: opt.votedUserIds.includes(user.id)
? opt.votedUserIds
: [...opt.votedUserIds, user.id],
};
} else if (!poll.allowMultipleVotes && hasVotedForOption) {
// Remove vote from other options if single vote
return {
...opt,
votes: opt.votedUserIds.includes(user.id) ? opt.votes - 1 : opt.votes,
votedUserIds: opt.votedUserIds.filter((id) => id !== user.id),
};
}
return opt;
}),
};
})
);
try {
const updatedEvent = await eventsApi.vote(eventId, [optionId]);
setEvents((prev) =>
prev.map((e) => (e.id === updatedEvent.id ? updatedEvent : e))
);
} catch {
// silently ignore
}
},
[user]
);
@@ -334,7 +317,7 @@ export default function EventsPage() {
{/* Events Grid */}
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
{events.length === 0 ? (
{loading ? (
<div
style={{
background: 'var(--color-surface)',
@@ -343,21 +326,27 @@ export default function EventsPage() {
textAlign: 'center',
}}
>
<div
style={{
fontFamily: 'var(--font-mono)',
color: 'var(--color-text-muted)',
fontSize: '0.85rem',
}}
>
<div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>
Loading events...
</div>
</div>
) : events.length === 0 ? (
<div
style={{
background: 'var(--color-surface)',
border: '1px solid var(--color-border)',
padding: '3rem 2rem',
textAlign: 'center',
}}
>
<div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>
No events available at the moment. Check back soon!
</div>
</div>
) : (
events.map((event) => {
const poll = event.pollId ? polls.find((p) => p.id === event.pollId) : undefined;
return <EventCard key={event.id} event={event} poll={poll} onVote={handleVote} />;
})
events.map((event) => (
<EventCard key={event.id} event={event} onVote={handleVote} />
))
)}
</div>
</div>

68
nest-front/src/pages/public/ForumPage.tsx
View File

@@ -1,6 +1,6 @@
import { useMemo, useState } from 'react';
import { useEffect, useMemo, useState } from 'react';
import { Link } from 'react-router-dom';
import { MOCK_CATEGORIES, MOCK_THREADS } from '../../data/mockData';
import { forumApi } from '../../utils/api';
import { timeAgo } from '../../utils/format';
import type { ForumCategory, ForumThread } from '../../types';
@@ -128,15 +128,43 @@ function CategoryCard({ category, threads }: { category: ForumCategory; threads:
export default function ForumPage() {
const [search, setSearch] = useState('');
const [categories, setCategories] = useState<ForumCategory[]>([]);
const [threads, setThreads] = useState<ForumThread[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');
useEffect(() => {
let cancelled = false;
setLoading(true);
Promise.all([
forumApi.getCategories(),
forumApi.getThreads({ limit: 200 }),
])
.then(([cats, threadRes]) => {
if (cancelled) return;
setCategories(cats);
setThreads(threadRes.data);
})
.catch(() => {
if (cancelled) return;
setError('Failed to load forum. Please try again.');
})
.finally(() => {
if (!cancelled) setLoading(false);
});
return () => { cancelled = true; };
}, []);
const filteredCategories = useMemo(() => {
if (!search.trim()) return MOCK_CATEGORIES;
if (!search.trim()) return categories;
const q = search.toLowerCase();
return MOCK_CATEGORIES.filter((cat) =>
return categories.filter((cat) =>
cat.name.toLowerCase().includes(q) ||
MOCK_THREADS.some((t) => t.categoryId === cat.id && t.title.toLowerCase().includes(q))
threads.some((t) => t.categoryId === cat.id && t.title.toLowerCase().includes(q))
);
}, [search]);
}, [search, categories, threads]);
return (
<div style={{ maxWidth: '960px', margin: '0 auto', padding: '4rem 1.5rem' }}>
@@ -173,15 +201,29 @@ export default function ForumPage() {
</div>
</div>
{/* Categories */}
{filteredCategories.length === 0 ? (
{loading && (
<div className="crt-box" style={{ padding: '2rem', textAlign: 'center', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)' }}>
No results found for "{search}"
Loading forum...
</div>
) : (
filteredCategories.map((cat) => (
<CategoryCard key={cat.id} category={cat} threads={MOCK_THREADS} />
))
)}
{error && !loading && (
<div className="crt-box" style={{ padding: '2rem', textAlign: 'center', color: 'var(--color-red)', fontFamily: 'var(--font-mono)' }}>
{error}
</div>
)}
{/* Categories */}
{!loading && !error && (
filteredCategories.length === 0 ? (
<div className="crt-box" style={{ padding: '2rem', textAlign: 'center', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)' }}>
No results found for "{search}"
</div>
) : (
filteredCategories.map((cat) => (
<CategoryCard key={cat.id} category={cat} threads={threads} />
))
)
)}
</div>
);

14
nest-front/src/pages/public/StudioPage.tsx
View File

@@ -1,6 +1,16 @@
import { TEAM_MEMBERS } from '../../data/mockData';
import { useEffect, useState } from 'react';
import { teamApi } from '../../utils/api';
import type { TeamMember } from '../../types';
export default function StudioPage() {
const [members, setMembers] = useState<TeamMember[]>([]);
useEffect(() => {
teamApi.getMembers()
.then(setMembers)
.catch(() => { /* show empty state */ });
}, []);
return (
<div style={{ maxWidth: '1000px', margin: '0 auto', padding: '4rem 1.5rem' }}>
{/* Header */}
@@ -127,7 +137,7 @@ export default function StudioPage() {
gap: '1.25rem',
}}
>
{TEAM_MEMBERS.map((member) => (
{members.map((member) => (
<div key={member.id} className="crt-box" style={{ padding: '1.5rem' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}>
{/* Avatar */}

74
nest-front/src/pages/public/ThreadPage.tsx
View File

@@ -1,23 +1,48 @@
import { useState, useCallback } from 'react';
import { useState, useCallback, useEffect } from 'react';
import { Link, useParams, Navigate } from 'react-router-dom';
import { MOCK_THREADS, MOCK_REPLIES } from '../../data/mockData';
import { forumApi, ApiError } from '../../utils/api';
import { useAuth } from '../../contexts/AuthContext';
import { formatDateTime, timeAgo } from '../../utils/format';
import type { ForumThread, ForumReply } from '../../types';
export default function ThreadPage() {
const { id } = useParams<{ id: string }>();
const { user, isAuthenticated } = useAuth();
const thread = MOCK_THREADS.find((t) => t.id === id);
const [thread, setThread] = useState<ForumThread | null>(null);
const [replies, setReplies] = useState<ForumReply[]>([]);
const [loading, setLoading] = useState(true);
const [notFound, setNotFound] = useState(false);
// Local state for new reply (stored in memory, not persisted)
const [replies, setReplies] = useState(
MOCK_REPLIES.filter((r) => r.threadId === id)
);
const [newReply, setNewReply] = useState('');
const [replyError, setReplyError] = useState('');
const [submitting, setSubmitting] = useState(false);
useEffect(() => {
if (!id) return;
let cancelled = false;
setLoading(true);
forumApi.getThread(id)
.then((data) => {
if (cancelled) return;
const { replies: threadReplies, ...threadData } = data;
setThread(threadData);
setReplies(threadReplies);
})
.catch((err) => {
if (cancelled) return;
if (err instanceof ApiError && err.status === 404) {
setNotFound(true);
}
})
.finally(() => {
if (!cancelled) setLoading(false);
});
return () => { cancelled = true; };
}, [id]);
const handleReply = useCallback(async () => {
if (!newReply.trim()) {
setReplyError('Reply cannot be empty.');
@@ -30,23 +55,26 @@ export default function ThreadPage() {
setReplyError('');
setSubmitting(true);
await new Promise((r) => setTimeout(r, 300));
try {
const reply = await forumApi.createReply(id!, newReply.trim());
setReplies((prev) => [...prev, reply]);
setNewReply('');
} catch (err) {
setReplyError(err instanceof Error ? err.message : 'Failed to post reply.');
} finally {
setSubmitting(false);
}
}, [newReply, id]);
const reply = {
id: `r${Date.now()}`,
content: newReply.trim(),
authorId: user!.id,
authorName: user!.username,
threadId: id!,
createdAt: new Date().toISOString(),
};
if (loading) {
return (
<div style={{ maxWidth: '860px', margin: '0 auto', padding: '4rem 1.5rem', textAlign: 'center', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)' }}>
Loading thread...
</div>
);
}
setReplies((prev) => [...prev, reply]);
setNewReply('');
setSubmitting(false);
}, [newReply, user, id]);
if (!thread) {
if (notFound || !thread) {
return <Navigate to="/forum" replace />;
}
@@ -203,7 +231,7 @@ export default function ThreadPage() {
<button
className="btn-terminal"
onClick={handleReply}
disabled={submitting}
disabled={submitting || !user}
style={{ opacity: submitting ? 0.6 : 1 }}
>
{submitting ? 'Posting...' : '> Post Reply'}

1
nest-front/src/types/index.ts
View File

@@ -134,6 +134,7 @@ export interface EventPost {
updatedAt?: string;
isPublic: boolean; // whether visible to community
pollId?: string; // reference to poll if type is 'poll'
poll?: Poll; // embedded poll from API
}
export interface PollOption {

190
nest-front/src/utils/api.ts
View File

@@ -1,4 +1,192 @@
import type {
User,
ForumCategory,
ForumThread,
ForumReply,
BugReport,
BugComment,
BugReportFormData,
BugSeverity,
BugStatus,
EventPost,
TeamMember,
} from '../types';
// API base URL.
// - In Docker (Coolify): nginx proxies /api/* to the backend, so we use a relative path.
// - Set VITE_API_URL at build time to call the backend directly (e.g. during local dev without nginx).
export const API_BASE = import.meta.env.VITE_API_URL ?? '/api'
export const API_BASE = import.meta.env.VITE_API_URL ?? '/api';
// ── Token storage ─────────────────────────────────────────────────────────────
const TOKEN_KEY = 'crowmate_auth_token';
export function getToken(): string | null {
return localStorage.getItem(TOKEN_KEY);
}
export function setToken(token: string): void {
localStorage.setItem(TOKEN_KEY, token);
}
export function clearToken(): void {
localStorage.removeItem(TOKEN_KEY);
}
// ── Core fetch helper ─────────────────────────────────────────────────────────
export class ApiError extends Error {
status: number;
constructor(status: number, message: string) {
super(message);
this.status = status;
this.name = 'ApiError';
}
}
export async function apiFetch<T = unknown>(
path: string,
options: RequestInit = {}
): Promise<T> {
const token = getToken();
const headers: Record<string, string> = {
'Content-Type': 'application/json',
...(options.headers as Record<string, string> ?? {}),
};
if (token) {
headers['Authorization'] = `Bearer ${token}`;
}
const res = await fetch(`${API_BASE}${path}`, { ...options, headers });
if (!res.ok) {
const body = await res.json().catch(() => ({}));
const message =
typeof body.error === 'string'
? body.error
: body.error?.message ?? `Request failed (${res.status})`;
throw new ApiError(res.status, message);
}
// 204 No Content
if (res.status === 204) return undefined as T;
return res.json() as Promise<T>;
}
// ── Auth API ──────────────────────────────────────────────────────────────────
export const authApi = {
login: (email: string, password: string) =>
apiFetch<{ token: string; user: User }>('/auth/login', {
method: 'POST',
body: JSON.stringify({ email, password }),
}),
register: (username: string, email: string, password: string) =>
apiFetch<{ token: string; user: User }>('/auth/register', {
method: 'POST',
body: JSON.stringify({ username, email, password }),
}),
me: () => apiFetch<User>('/auth/me'),
};
// ── Users API ─────────────────────────────────────────────────────────────────
export const usersApi = {
updateUsername: (username: string) =>
apiFetch<User>('/users/me/username', {
method: 'PATCH',
body: JSON.stringify({ username }),
}),
changePassword: (currentPassword: string, newPassword: string) =>
apiFetch<{ message: string }>('/users/me/password', {
method: 'PATCH',
body: JSON.stringify({ currentPassword, newPassword }),
}),
};
// ── Forum API ─────────────────────────────────────────────────────────────────
export const forumApi = {
getCategories: () =>
apiFetch<ForumCategory[]>('/forum/categories'),
getThreads: (params?: { categoryId?: string; page?: number; limit?: number }) => {
const q = new URLSearchParams();
if (params?.categoryId) q.set('categoryId', params.categoryId);
q.set('page', String(params?.page ?? 1));
q.set('limit', String(params?.limit ?? 100));
return apiFetch<{ data: ForumThread[]; total: number; page: number; pages: number }>(
`/forum/threads?${q}`
);
},
getThread: (id: string) =>
apiFetch<ForumThread & { replies: ForumReply[] }>(`/forum/threads/${id}`),
createReply: (threadId: string, content: string) =>
apiFetch<ForumReply>(`/forum/threads/${threadId}/replies`, {
method: 'POST',
body: JSON.stringify({ content }),
}),
};
// ── Bugs API ──────────────────────────────────────────────────────────────────
export const bugsApi = {
getBugs: (params?: { status?: BugStatus | 'all'; severity?: BugSeverity | 'all'; page?: number; limit?: number }) => {
const q = new URLSearchParams();
if (params?.status && params.status !== 'all') q.set('status', params.status);
if (params?.severity && params.severity !== 'all') q.set('severity', params.severity);
q.set('page', String(params?.page ?? 1));
q.set('limit', String(params?.limit ?? 100));
return apiFetch<{ data: BugReport[]; total: number; page: number; pages: number }>(
`/bugs?${q}`
);
},
getBug: (id: string) =>
apiFetch<BugReport & { comments: BugComment[] }>(`/bugs/${id}`),
createBug: (data: BugReportFormData) =>
apiFetch<BugReport>('/bugs', {
method: 'POST',
body: JSON.stringify(data),
}),
toggleMeToo: (bugId: string) =>
apiFetch<{ message: string }>(`/bugs/${bugId}/me-too`, { method: 'POST' }),
addComment: (bugId: string, content: string) =>
apiFetch<BugComment>(`/bugs/${bugId}/comments`, {
method: 'POST',
body: JSON.stringify({ content }),
}),
};
// ── Events API ────────────────────────────────────────────────────────────────
export const eventsApi = {
getEvents: (publicOnly = true) => {
const q = new URLSearchParams({ limit: '50' });
if (publicOnly) q.set('public', 'true');
return apiFetch<{ events: EventPost[]; total: number; page: number; pages: number }>(
`/events?${q}`
);
},
vote: (eventId: string, optionIds: string[]) =>
apiFetch<EventPost>(`/events/${eventId}/vote`, {
method: 'POST',
body: JSON.stringify({ optionIds }),
}),
};
// ── Team API ──────────────────────────────────────────────────────────────────
export const teamApi = {
getMembers: () => apiFetch<TeamMember[]>('/team'),
};

3
nest-front/vite.config.ts
View File

@@ -7,4 +7,7 @@ export default defineConfig({
react(),
tailwindcss(),
],
server: {
port: 80,
},
})

6
nest-intra/nginx.conf
View File

@@ -3,8 +3,12 @@ server {
root /usr/share/nginx/html;
index index.html;
# Use Docker's embedded DNS resolver; defer resolution to request time
resolver 127.0.0.11 valid=30s;
location /api/ {
proxy_pass http://api:3000/api/;
set $api_upstream http://api:3000;
proxy_pass $api_upstream;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}

190
nest-intra/src/pages/intranet/IntranetEvents.tsx
View File

@@ -1,5 +1,5 @@
import { useState, useCallback } from 'react';
import { useAuth } from '../../contexts/AuthContext';
import { useState, useCallback, useEffect } from 'react';
import { useAuth, getToken } from '../../contexts/AuthContext';
import { formatDateTime } from '../../utils/format';
import type { EventPost, EventType, Poll, UserRole } from '../../types';
@@ -244,10 +244,27 @@ function EventCard({
// ── Main Component ─────────────────────────────────────────────────────────────
function apiFetch<T>(path: string, options: RequestInit = {}): Promise<T> {
const token = getToken();
return fetch(`/api${path}`, {
...options,
headers: {
'Content-Type': 'application/json',
...(token ? { Authorization: `Bearer ${token}` } : {}),
...(options.headers as Record<string, string> ?? {}),
},
}).then(async (res) => {
if (!res.ok) {
const body = await res.json().catch(() => ({}));
throw new Error(body.error ?? `Request failed (${res.status})`);
}
return res.json() as Promise<T>;
});
}
export default function IntranetEvents() {
const { user } = useAuth();
const [events, setEvents] = useState<EventPost[]>([]);
const [polls, setPolls] = useState<Poll[]>([]);
const [showCreateForm, setShowCreateForm] = useState(false);
// Form state
@@ -261,124 +278,78 @@ export default function IntranetEvents() {
const [error, setError] = useState('');
const [posting, setPosting] = useState(false);
useEffect(() => {
apiFetch<{ events: EventPost[] }>('/events?limit=50')
.then((res) => setEvents(res.events))
.catch(() => setEvents([]));
}, []);
const handleVote = useCallback(
(pollId: string, optionId: string) => {
if (!user) return;
setPolls((prevPolls) =>
prevPolls.map((poll) => {
if (poll.id !== pollId) return poll;
const hasVotedForOption = poll.options.some((opt) =>
opt.votedUserIds.includes(user.id)
);
return {
...poll,
options: poll.options.map((opt) => {
if (opt.id === optionId) {
// Add vote to this option
return {
...opt,
votes: opt.votedUserIds.includes(user.id) ? opt.votes : opt.votes + 1,
votedUserIds: opt.votedUserIds.includes(user.id)
? opt.votedUserIds
: [...opt.votedUserIds, user.id],
};
} else if (!poll.allowMultipleVotes && hasVotedForOption) {
// Remove vote from other options if single vote
return {
...opt,
votes: opt.votedUserIds.includes(user.id) ? opt.votes - 1 : opt.votes,
votedUserIds: opt.votedUserIds.filter((id) => id !== user.id),
};
}
return opt;
}),
};
})
);
async (pollId: string, optionId: string) => {
const event = events.find((e) => e.pollId === pollId || e.poll?.id === pollId);
if (!event || !user) return;
try {
const updated = await apiFetch<EventPost>(`/events/${event.id}/vote`, {
method: 'POST',
body: JSON.stringify({ optionIds: [optionId] }),
});
setEvents((prev) => prev.map((e) => (e.id === updated.id ? updated : e)));
} catch {
// silently ignore
}
},
[user]
[events, user]
);
const handleSubmit = useCallback(async () => {
// Validation
if (!title.trim()) {
setError('Title is required.');
return;
}
if (!content.trim()) {
setError('Content is required.');
return;
}
if (!title.trim()) { setError('Title is required.'); return; }
if (!content.trim()) { setError('Content is required.'); return; }
if (createPoll) {
if (!pollQuestion.trim()) {
setError('Poll question is required.');
return;
}
if (!pollQuestion.trim()) { setError('Poll question is required.'); return; }
const validOptions = pollOptions.filter((opt) => opt.trim());
if (validOptions.length < 2) {
setError('Poll must have at least 2 options.');
return;
}
if (validOptions.length < 2) { setError('Poll must have at least 2 options.'); return; }
}
if (!user) return;
setError('');
setPosting(true);
await new Promise((r) => setTimeout(r, 300));
const newEventId = `evt${Date.now()}`;
let newPollId: string | undefined;
// Create poll if needed
if (createPoll) {
newPollId = `poll${Date.now()}`;
const validOptions = pollOptions.filter((opt) => opt.trim());
const newPoll: Poll = {
id: newPollId,
eventId: newEventId,
question: pollQuestion.trim(),
options: validOptions.map((opt, idx) => ({
id: `opt${Date.now()}_${idx}`,
text: opt.trim(),
votes: 0,
votedUserIds: [],
})),
isActive: true,
allowMultipleVotes: false,
createdAt: new Date().toISOString(),
try {
const body: Record<string, unknown> = {
type: createPoll ? 'poll' : eventType,
title: title.trim(),
content: content.trim(),
isPublic,
};
setPolls((prev) => [newPoll, ...prev]);
if (createPoll) {
body.poll = {
question: pollQuestion.trim(),
options: pollOptions.filter((o) => o.trim()).map((o) => ({ text: o.trim() })),
};
}
const created = await apiFetch<EventPost>('/events', {
method: 'POST',
body: JSON.stringify(body),
});
setEvents((prev) => [created, ...prev]);
// Reset form
setTitle('');
setContent('');
setEventType('announcement');
setIsPublic(true);
setCreatePoll(false);
setPollQuestion('');
setPollOptions(['', '']);
setShowCreateForm(false);
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to create event.');
} finally {
setPosting(false);
}
// Create event
const newEvent: EventPost = {
id: newEventId,
type: createPoll ? 'poll' : eventType,
title: title.trim(),
content: content.trim(),
authorId: user.id,
authorName: user.username,
authorRole: user.role,
createdAt: new Date().toISOString(),
isPublic,
pollId: newPollId,
};
setEvents((prev) => [newEvent, ...prev]);
// Reset form
setTitle('');
setContent('');
setEventType('announcement');
setIsPublic(true);
setCreatePoll(false);
setPollQuestion('');
setPollOptions(['', '']);
setPosting(false);
setShowCreateForm(false);
}, [title, content, eventType, isPublic, createPoll, pollQuestion, pollOptions, user]);
return (
@@ -711,10 +682,9 @@ export default function IntranetEvents() {
{/* Events List */}
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
{events.map((event) => {
const poll = event.pollId ? polls.find((p) => p.id === event.pollId) : undefined;
return <EventCard key={event.id} event={event} poll={poll} onVote={handleVote} />;
})}
{events.map((event) => (
<EventCard key={event.id} event={event} poll={event.poll ?? undefined} onVote={handleVote} />
))}
</div>
</div>
);

3
nest-intra/src/types/index.ts
View File

@@ -133,7 +133,8 @@ export interface EventPost {
createdAt: string;
updatedAt?: string;
isPublic: boolean; // whether visible to community
pollId?: string; // reference to poll if type is 'poll'
pollId?: string | null; // reference to poll if type is 'poll'
poll?: Poll | null; // embedded poll data from API
}
export interface PollOption {