Compare commits
1 Commits
624bd36f78
...
ed67c79ff6
| Author | SHA1 | Date | |
|---|---|---|---|
|
ed67c79ff6 |
@ -172,7 +172,7 @@ function App() {
|
||||
</div>
|
||||
<ShaderBackground theme={theme} />
|
||||
<Routes>
|
||||
<Route path="/" element={<PersonList people={people} loading={isLoading} onShowToast={addToast} />} />
|
||||
<Route path="/" element={<PersonList people={people} onShowToast={addToast} />} />
|
||||
<Route path="/games" element={<GameList onShowToast={addToast} />} />
|
||||
<Route path="/filter" element={<GameFilter />} />
|
||||
<Route path="/person/:name" element={<PersonDetails />} />
|
||||
|
||||
@ -1,48 +0,0 @@
|
||||
import { Component, type ErrorInfo, type ReactNode } from "react";
|
||||
import { ErrorState } from "./components/EmptyState";
|
||||
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
fallback?: ReactNode;
|
||||
}
|
||||
|
||||
interface State {
|
||||
hasError: boolean;
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
export class ErrorBoundary extends Component<Props, State> {
|
||||
public state: State = {
|
||||
hasError: false,
|
||||
error: null
|
||||
};
|
||||
|
||||
public static getDerivedStateFromError(error: Error): State {
|
||||
return { hasError: true, error };
|
||||
}
|
||||
|
||||
public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||||
console.error("ErrorBoundary caught an error:", error, errorInfo);
|
||||
}
|
||||
|
||||
public handleReset = () => {
|
||||
this.setState({ hasError: false, error: null });
|
||||
};
|
||||
|
||||
public render() {
|
||||
if (this.state.hasError) {
|
||||
if (this.props.fallback) {
|
||||
return this.props.fallback;
|
||||
}
|
||||
|
||||
return (
|
||||
<ErrorState
|
||||
message={this.state.error?.message || "An unexpected error occurred"}
|
||||
onRetry={this.handleReset}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
@ -2,7 +2,6 @@ import { useState, useEffect } from "react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import { Game, Source } from "../items";
|
||||
import { apiFetch, get_is_admin } from "./api";
|
||||
import { LoadingState, EmptyState, ErrorState } from "./components/EmptyState";
|
||||
|
||||
interface Props {
|
||||
onShowToast?: (message: string, type?: "success" | "error" | "info") => void;
|
||||
@ -12,32 +11,26 @@ export function GameDetails({ onShowToast }: Props) {
|
||||
const { title } = useParams<{ title: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [game, setGame] = useState<Game | null>(null);
|
||||
const [loading, setLoading] = useState(!!title);
|
||||
const [error, setError] = useState<string | null>(title ? null : "Game title is missing");
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const isAdmin = get_is_admin();
|
||||
|
||||
useEffect(() => {
|
||||
if (!title) return;
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const res = await apiFetch(`/api/game/${encodeURIComponent(title)}`);
|
||||
if (!res.ok) {
|
||||
if (res.status === 404) {
|
||||
throw new Error("Game not found");
|
||||
}
|
||||
throw new Error("Failed to load game");
|
||||
}
|
||||
const buffer = await res.arrayBuffer();
|
||||
setGame(Game.decode(new Uint8Array(buffer)));
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError(err instanceof Error ? err.message : "Failed to load game");
|
||||
} finally {
|
||||
apiFetch(`/api/game/${encodeURIComponent(title)}`)
|
||||
.then(async (res) => {
|
||||
if (!res.ok) throw new Error("Game not found");
|
||||
return Game.decode(new Uint8Array(await res.arrayBuffer()));
|
||||
})
|
||||
.then((data) => {
|
||||
setGame(data);
|
||||
setLoading(false);
|
||||
}
|
||||
})();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
setLoading(false);
|
||||
});
|
||||
}, [title]);
|
||||
|
||||
const handleDelete = async () => {
|
||||
@ -66,9 +59,8 @@ export function GameDetails({ onShowToast }: Props) {
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <LoadingState message="Loading game details..." />;
|
||||
if (error) return <ErrorState message={error} onRetry={() => window.location.reload()} />;
|
||||
if (!game) return <EmptyState icon="🎮" title="Game not found" description="This game doesn't exist or has been deleted" />;
|
||||
if (loading) return <div>Loading...</div>;
|
||||
if (!game) return <div>Game not found</div>;
|
||||
|
||||
const getExternalLink = () => {
|
||||
if (game.source === Source.STEAM) {
|
||||
|
||||
@ -5,11 +5,9 @@ import "./GameFilter.css";
|
||||
import { useGameFilter } from "./hooks/useGameFilter";
|
||||
import { PersonSelector } from "./components/PersonSelector";
|
||||
import { FilteredGamesList } from "./components/FilteredGamesList";
|
||||
import { LoadingState } from "./components/EmptyState";
|
||||
|
||||
export function GameFilter() {
|
||||
const [people, setPeople] = useState<Person[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectedPeople, setSelectedPeople] = useState<Set<string>>(new Set());
|
||||
|
||||
const { filteredGames, gameToPositive } = useGameFilter(
|
||||
@ -18,22 +16,15 @@ export function GameFilter() {
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const res = await apiFetch("/api");
|
||||
const buffer = await res.arrayBuffer();
|
||||
apiFetch("/api")
|
||||
.then((res) => res.arrayBuffer())
|
||||
.then((buffer) => {
|
||||
const list = PersonListProto.decode(new Uint8Array(buffer));
|
||||
setPeople(list.person);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch people:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
})();
|
||||
})
|
||||
.catch((err) => console.error("Failed to fetch people:", err));
|
||||
}, []);
|
||||
|
||||
if (loading) return <LoadingState message="Loading people..." />;
|
||||
|
||||
const togglePerson = (name: string) => {
|
||||
const newSelected = new Set(selectedPeople);
|
||||
if (newSelected.has(name)) {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useState, useEffect, useMemo, useCallback } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Game,
|
||||
Source,
|
||||
@ -12,7 +12,6 @@ import { Link, useLocation } from "react-router-dom";
|
||||
import { apiFetch, get_auth_status } from "./api";
|
||||
import { GameImage } from "./GameImage";
|
||||
import type { ToastType } from "./Toast";
|
||||
import { EmptyState } from "./components/EmptyState";
|
||||
|
||||
interface Props {
|
||||
onShowToast?: (message: string, type?: ToastType) => void;
|
||||
@ -27,22 +26,10 @@ export function GameList({ onShowToast }: Props) {
|
||||
const [price, setPrice] = useState(0);
|
||||
const [remoteId, setRemoteId] = useState(0);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [titleError, setTitleError] = useState("");
|
||||
const [playersError, setPlayersError] = useState("");
|
||||
const [remoteIdError, setRemoteIdError] = useState("");
|
||||
const [opinions, setOpinions] = useState<Opinion[]>([]);
|
||||
const [gamesLoading, setGamesLoading] = useState(true);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
||||
const filteredGames = useMemo(() => {
|
||||
if (!searchQuery) return games;
|
||||
return games.filter(game =>
|
||||
game.title.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
}, [games, searchQuery]);
|
||||
|
||||
const fetchGames = useCallback(() => {
|
||||
setGamesLoading(true);
|
||||
const fetchGames = () => {
|
||||
apiFetch("/api/games")
|
||||
.then((res) => res.arrayBuffer())
|
||||
.then((buffer) => {
|
||||
@ -51,15 +38,10 @@ export function GameList({ onShowToast }: Props) {
|
||||
setGames(list.games);
|
||||
} catch (e) {
|
||||
console.error("Failed to decode games:", e);
|
||||
onShowToast?.("Failed to load games", "error");
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
onShowToast?.("Failed to fetch games", "error");
|
||||
})
|
||||
.finally(() => setGamesLoading(false));
|
||||
}, [onShowToast]);
|
||||
.catch(console.error);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
get_auth_status().then((user) => {
|
||||
@ -94,42 +76,20 @@ export function GameList({ onShowToast }: Props) {
|
||||
|
||||
useEffect(() => {
|
||||
fetchGames();
|
||||
}, [fetchGames]);
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
setTitleError("");
|
||||
setPlayersError("");
|
||||
setRemoteIdError("");
|
||||
|
||||
let hasErrors = false;
|
||||
|
||||
if (!title.trim()) {
|
||||
setTitleError("Game title is required");
|
||||
hasErrors = true;
|
||||
}
|
||||
|
||||
if (minPlayers < 1) {
|
||||
setPlayersError("Minimum players must be at least 1");
|
||||
hasErrors = true;
|
||||
}
|
||||
|
||||
if (maxPlayers < minPlayers) {
|
||||
setPlayersError("Maximum players cannot be less than minimum players");
|
||||
hasErrors = true;
|
||||
}
|
||||
|
||||
if (remoteId === 0) {
|
||||
setRemoteIdError("Remote ID must be greater than 0");
|
||||
hasErrors = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if (hasErrors) return;
|
||||
|
||||
setRemoteIdError("");
|
||||
setIsSubmitting(true);
|
||||
const game = {
|
||||
title: title.trim(),
|
||||
title,
|
||||
source,
|
||||
minPlayers,
|
||||
maxPlayers,
|
||||
@ -149,11 +109,14 @@ export function GameList({ onShowToast }: Props) {
|
||||
|
||||
if (res.ok) {
|
||||
onShowToast?.("Game added successfully!", "success");
|
||||
clearForm();
|
||||
setTitle("");
|
||||
setMinPlayers(1);
|
||||
setMaxPlayers(1);
|
||||
setPrice(0);
|
||||
setRemoteId(0);
|
||||
fetchGames();
|
||||
} else {
|
||||
const errorText = await res.text();
|
||||
onShowToast?.(errorText || "Failed to add game. Please try again.", "error");
|
||||
onShowToast?.("Failed to add game. Please try again.", "error");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
@ -163,17 +126,6 @@ export function GameList({ onShowToast }: Props) {
|
||||
}
|
||||
};
|
||||
|
||||
const clearForm = () => {
|
||||
setTitle("");
|
||||
setMinPlayers(1);
|
||||
setMaxPlayers(1);
|
||||
setPrice(0);
|
||||
setRemoteId(0);
|
||||
setTitleError("");
|
||||
setPlayersError("");
|
||||
setRemoteIdError("");
|
||||
};
|
||||
|
||||
const formCardStyles: React.CSSProperties = {
|
||||
background:
|
||||
"linear-gradient(135deg, var(--secondary-bg) 0%, var(--secondary-alt-bg) 100%)",
|
||||
@ -355,23 +307,12 @@ export function GameList({ onShowToast }: Props) {
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={(e) => {
|
||||
setTitle(e.target.value);
|
||||
if (titleError) setTitleError("");
|
||||
}}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
required
|
||||
placeholder="Enter game title..."
|
||||
style={{
|
||||
...inputStyles,
|
||||
borderColor: titleError ? "#f44336" : undefined
|
||||
}}
|
||||
style={inputStyles}
|
||||
className="add-game-input"
|
||||
/>
|
||||
{titleError && (
|
||||
<div style={{ color: "#f44336", fontSize: "0.75rem", marginTop: "0.25rem" }}>
|
||||
{titleError}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={inputGroupStyles}>
|
||||
@ -411,15 +352,9 @@ export function GameList({ onShowToast }: Props) {
|
||||
<input
|
||||
type="number"
|
||||
value={minPlayers}
|
||||
onChange={(e) => {
|
||||
setMinPlayers(Number(e.target.value));
|
||||
if (playersError) setPlayersError("");
|
||||
}}
|
||||
onChange={(e) => setMinPlayers(Number(e.target.value))}
|
||||
min="1"
|
||||
style={{
|
||||
...inputStyles,
|
||||
borderColor: playersError ? "#f44336" : undefined
|
||||
}}
|
||||
style={inputStyles}
|
||||
className="add-game-input"
|
||||
/>
|
||||
</div>
|
||||
@ -428,24 +363,13 @@ export function GameList({ onShowToast }: Props) {
|
||||
<input
|
||||
type="number"
|
||||
value={maxPlayers}
|
||||
onChange={(e) => {
|
||||
setMaxPlayers(Number(e.target.value));
|
||||
if (playersError) setPlayersError("");
|
||||
}}
|
||||
onChange={(e) => setMaxPlayers(Number(e.target.value))}
|
||||
min="1"
|
||||
style={{
|
||||
...inputStyles,
|
||||
borderColor: playersError ? "#f44336" : undefined
|
||||
}}
|
||||
style={inputStyles}
|
||||
className="add-game-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{playersError && (
|
||||
<div style={{ color: "#f44336", fontSize: "0.75rem", marginTop: "0.25rem" }}>
|
||||
{playersError}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={dividerStyles}></div>
|
||||
@ -501,47 +425,33 @@ export function GameList({ onShowToast }: Props) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: "flex", gap: "0.75rem", marginTop: "1rem" }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={clearForm}
|
||||
disabled={isSubmitting || (!title && minPlayers === 1 && maxPlayers === 1 && price === 0 && remoteId === 0)}
|
||||
style={{
|
||||
...submitButtonStyles,
|
||||
background: "var(--tertiary-bg)",
|
||||
flex: 1
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
style={submitButtonStyles}
|
||||
className="submit-btn"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<span
|
||||
style={{
|
||||
width: "18px",
|
||||
height: "18px",
|
||||
border: "2px solid rgba(255,255,255,0.3)",
|
||||
borderTopColor: "white",
|
||||
borderRadius: "50%",
|
||||
animation: "spin 0.8s linear infinite",
|
||||
}}
|
||||
></span>
|
||||
Adding Game...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span style={{ fontSize: "1.1rem" }}>➕</span>
|
||||
Add Game to Collection
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
style={submitButtonStyles}
|
||||
className="submit-btn"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<span
|
||||
style={{
|
||||
width: "18px",
|
||||
height: "18px",
|
||||
border: "2px solid rgba(255,255,255,0.3)",
|
||||
borderTopColor: "white",
|
||||
borderRadius: "50%",
|
||||
animation: "spin 0.8s linear infinite",
|
||||
}}
|
||||
></span>
|
||||
Adding Game...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span style={{ fontSize: "1.1rem" }}>➕</span>
|
||||
Add Game to Collection
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -555,89 +465,16 @@ export function GameList({ onShowToast }: Props) {
|
||||
</style>
|
||||
|
||||
<div style={{ marginTop: "3rem" }}>
|
||||
<div
|
||||
<h3
|
||||
id="existing-games"
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: "1rem",
|
||||
flexWrap: "wrap",
|
||||
gap: "1rem"
|
||||
scrollMarginBottom: "0",
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
id="existing-games"
|
||||
style={{
|
||||
scrollMarginBottom: "0",
|
||||
margin: 0
|
||||
}}
|
||||
>
|
||||
Existing Games {filteredGames.length > 0 && <span style={{ fontSize: "0.7em", color: "var(--text-muted)" }}>({filteredGames.length})</span>}
|
||||
</h3>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="🔍 Search games..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
style={{
|
||||
padding: "0.5rem 1rem",
|
||||
fontSize: "0.9rem",
|
||||
minWidth: "200px"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{gamesLoading ? (
|
||||
<div className="grid-container">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
backgroundColor: "var(--secondary-alt-bg)",
|
||||
border: "1px solid var(--border-color)",
|
||||
borderRadius: "5px",
|
||||
padding: "1rem",
|
||||
minHeight: "100px",
|
||||
animation: "shimmer 1.5s infinite"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: "70%",
|
||||
height: "20px",
|
||||
backgroundColor: "var(--tertiary-bg)",
|
||||
borderRadius: "4px",
|
||||
marginBottom: "0.75rem",
|
||||
animation: "shimmer 1.5s infinite"
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
style={{
|
||||
width: "40%",
|
||||
height: "40px",
|
||||
backgroundColor: "var(--tertiary-bg)",
|
||||
borderRadius: "8px",
|
||||
marginTop: "0.5rem",
|
||||
animation: "shimmer 1.5s infinite 0.2s"
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
))}
|
||||
<style>{`
|
||||
@keyframes shimmer {
|
||||
0%, 100% { opacity: 0.5; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
) : filteredGames.length === 0 ? (
|
||||
<EmptyState
|
||||
icon="🎮"
|
||||
title={searchQuery ? "No games found" : "No games yet"}
|
||||
description={searchQuery ? "Try a different search term" : "Add your first game to get started"}
|
||||
/>
|
||||
) : (
|
||||
<ul className="grid-container">
|
||||
{filteredGames.map((game) => {
|
||||
Existing Games
|
||||
</h3>
|
||||
<ul className="grid-container">
|
||||
{games.map((game) => {
|
||||
const opinion = opinions.find((op) => op.title === game.title);
|
||||
function handleOpinion(title: string, number: number): void {
|
||||
if (number == 2) {
|
||||
@ -791,7 +628,6 @@ export function GameList({ onShowToast }: Props) {
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -9,27 +9,13 @@ export function Login({ onLogin }: LoginProps) {
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [fieldErrors, setFieldErrors] = useState<{ username?: string, password?: string }>({});
|
||||
|
||||
const validateForm = () => {
|
||||
const errors: { username?: string, password?: string } = {};
|
||||
if (!username.trim()) errors.username = "Username is required";
|
||||
if (!password) errors.password = "Password is required";
|
||||
setFieldErrors(errors);
|
||||
return Object.keys(errors).length === 0;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
|
||||
if (!validateForm()) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
const req = LoginRequest.create({ username: username.trim(), password });
|
||||
const req = LoginRequest.create({ username, password });
|
||||
const body = LoginRequest.encode(req).finish();
|
||||
|
||||
const res = await fetch("/auth/login", {
|
||||
@ -46,109 +32,45 @@ export function Login({ onLogin }: LoginProps) {
|
||||
if (response.success) {
|
||||
onLogin(response.token);
|
||||
} else {
|
||||
setError(response.message || "Login failed");
|
||||
setError(response.message);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Login error:", err);
|
||||
setError("An unexpected error occurred. Please try again.");
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
setError("Failed to login");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card" style={{ maxWidth: "400px", margin: "4rem auto" }}>
|
||||
<h2 style={{ textAlign: "center", marginBottom: "2rem" }}>🎮 Login</h2>
|
||||
<h2 style={{ textAlign: "center", marginBottom: "2rem" }}>Login</h2>
|
||||
<form onSubmit={handleSubmit} className="form-group">
|
||||
<div className="form-group">
|
||||
<label>Username</label>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => {
|
||||
setUsername(e.target.value);
|
||||
if (fieldErrors.username) setFieldErrors({ ...fieldErrors, username: undefined });
|
||||
}}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="Enter your username"
|
||||
style={{
|
||||
borderColor: fieldErrors.username ? "#f44336" : undefined,
|
||||
borderWidth: fieldErrors.username ? "2px" : undefined
|
||||
}}
|
||||
/>
|
||||
{fieldErrors.username && (
|
||||
<span style={{ color: "#f44336", fontSize: "0.85rem", marginTop: "0.25rem", display: "block" }}>
|
||||
{fieldErrors.username}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Password</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => {
|
||||
setPassword(e.target.value);
|
||||
if (fieldErrors.password) setFieldErrors({ ...fieldErrors, password: undefined });
|
||||
}}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Enter your password"
|
||||
style={{
|
||||
borderColor: fieldErrors.password ? "#f44336" : undefined,
|
||||
borderWidth: fieldErrors.password ? "2px" : undefined
|
||||
}}
|
||||
/>
|
||||
{fieldErrors.password && (
|
||||
<span style={{ color: "#f44336", fontSize: "0.85rem", marginTop: "0.25rem", display: "block" }}>
|
||||
{fieldErrors.password}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
style={{ marginTop: "1rem", width: "100%", opacity: isSubmitting ? 0.7 : 1, cursor: isSubmitting ? "not-allowed" : "pointer" }}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<span
|
||||
style={{
|
||||
width: "14px",
|
||||
height: "14px",
|
||||
border: "2px solid rgba(255,255,255,0.3)",
|
||||
borderTopColor: "white",
|
||||
borderRadius: "50%",
|
||||
animation: "spin 0.8s linear infinite",
|
||||
display: "inline-block",
|
||||
marginRight: "0.5rem"
|
||||
}}
|
||||
></span>
|
||||
Logging in...
|
||||
</>
|
||||
) : (
|
||||
"Login"
|
||||
)}
|
||||
<button type="submit" style={{ marginTop: "1rem" }}>
|
||||
Login
|
||||
</button>
|
||||
</form>
|
||||
{error && (
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "rgba(244, 67, 54, 0.1)",
|
||||
border: "1px solid rgba(244, 67, 54, 0.3)",
|
||||
color: "#ff6b6b",
|
||||
padding: "1rem",
|
||||
borderRadius: "8px",
|
||||
marginTop: "1rem",
|
||||
textAlign: "center",
|
||||
fontSize: "0.9rem"
|
||||
}}
|
||||
>
|
||||
⚠️ {error}
|
||||
</div>
|
||||
<p style={{ color: "#ff6b6b", marginTop: "1rem", textAlign: "center" }}>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
<style>{`
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -3,71 +3,53 @@ import { Link, useParams } from "react-router-dom";
|
||||
import { Person } from "../items";
|
||||
import { apiFetch } from "./api";
|
||||
import { GameImage } from "./GameImage";
|
||||
import { LoadingState, EmptyState } from "./components/EmptyState";
|
||||
|
||||
export const PersonDetails = () => {
|
||||
const { name } = useParams<{ name: string }>();
|
||||
const [person, setPerson] = useState<Person | null>(null);
|
||||
const [loading, setLoading] = useState(!!name);
|
||||
const [error, setError] = useState<string | null>(name ? null : "Person name is missing");
|
||||
|
||||
useEffect(() => {
|
||||
if (!name) return;
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const res = await apiFetch(`/api/${name}`);
|
||||
if (!res.ok) {
|
||||
throw new Error("Person not found");
|
||||
}
|
||||
const buffer = await res.arrayBuffer();
|
||||
setPerson(Person.decode(new Uint8Array(buffer)));
|
||||
} catch (e) {
|
||||
console.error("Failed to decode person:", e);
|
||||
setError(e instanceof Error ? e.message : "Failed to load person data");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
})();
|
||||
if (name) {
|
||||
apiFetch(`/api/${name}`)
|
||||
.then((res) => res.arrayBuffer())
|
||||
.then((buffer) => {
|
||||
try {
|
||||
setPerson(Person.decode(new Uint8Array(buffer)));
|
||||
} catch (e) {
|
||||
console.error("Failed to decode person:", e);
|
||||
}
|
||||
})
|
||||
.catch(console.error);
|
||||
}
|
||||
}, [name]);
|
||||
|
||||
if (loading) return <LoadingState message="Loading person details..." />;
|
||||
if (error) return <EmptyState icon="⚠️" title="Error" description={error} />;
|
||||
if (!person) return <EmptyState icon="👤" title="Person not found" description="This person doesn't exist" />;
|
||||
if (!person) return <div>Loading...</div>;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ marginBottom: "2rem" }}>
|
||||
<h2>{person.name}</h2>
|
||||
{person.opinion.length === 0 ? (
|
||||
<EmptyState
|
||||
icon="🎮"
|
||||
title="No opinions yet"
|
||||
description={`${person.name} hasn't shared any game opinions`}
|
||||
/>
|
||||
) : (
|
||||
<ul className="grid-container">
|
||||
{person.opinion.map((op, i) => (
|
||||
<Link
|
||||
to={`/game/${encodeURIComponent(op.title)}`}
|
||||
key={i}
|
||||
className="list-item"
|
||||
style={{
|
||||
textDecoration: "none",
|
||||
color: "inherit",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
borderColor: op.wouldPlay ? "#4caf50" : "#f44336",
|
||||
}}
|
||||
>
|
||||
<strong>{op.title}</strong>
|
||||
<ul className="grid-container">
|
||||
{person.opinion.map((op, i) => (
|
||||
<Link
|
||||
to={`/game/${encodeURIComponent(op.title)}`}
|
||||
key={i}
|
||||
className="list-item"
|
||||
style={{
|
||||
textDecoration: "none",
|
||||
color: "inherit",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
borderColor: op.wouldPlay ? "#4caf50" : "#f44336",
|
||||
}}
|
||||
>
|
||||
<strong>{op.title}</strong>
|
||||
|
||||
<GameImage game={op.title} />
|
||||
</Link>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
<GameImage game={op.title} />
|
||||
</Link>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,36 +1,24 @@
|
||||
import { Person } from "../items";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { useState } from "react";
|
||||
import { get_auth_status, refresh_state, get_is_admin } from "./api";
|
||||
import type { ToastType } from "./Toast";
|
||||
import { EmptyState } from "./components/EmptyState";
|
||||
import "./PersonList.css"
|
||||
|
||||
interface Props {
|
||||
people: Person[];
|
||||
loading?: boolean;
|
||||
onShowToast?: (message: string, type?: ToastType) => void;
|
||||
}
|
||||
|
||||
export const PersonList = ({ people, loading = false, onShowToast }: Props) => {
|
||||
export const PersonList = ({ people, onShowToast }: Props) => {
|
||||
const [current_user, set_current_user] = useState<string>("");
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
get_auth_status().then((res) => {
|
||||
if (res) {
|
||||
set_current_user(res.username);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
const filteredPeople = useMemo(() => {
|
||||
if (!searchQuery) return people;
|
||||
return people.filter(person =>
|
||||
person.name.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
}, [people, searchQuery]);
|
||||
get_auth_status().then((res) => {
|
||||
if (res) {
|
||||
set_current_user(res.username);
|
||||
}
|
||||
});
|
||||
|
||||
const handleRefresh = async () => {
|
||||
setIsRefreshing(true);
|
||||
@ -56,136 +44,53 @@ export const PersonList = ({ people, loading = false, onShowToast }: Props) => {
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: "1rem",
|
||||
flexWrap: "wrap",
|
||||
gap: "1rem"
|
||||
}}
|
||||
>
|
||||
<h2>People List {filteredPeople.length > 0 && <span style={{ fontSize: "0.8em", color: "var(--text-muted)" }}>({filteredPeople.length})</span>}</h2>
|
||||
<div style={{ display: "flex", gap: "0.75rem", alignItems: "center" }}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="🔍 Search people..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
<h2>People List</h2>
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
disabled={isRefreshing}
|
||||
className="btn-secondary"
|
||||
style={{
|
||||
padding: "0.5rem 1rem",
|
||||
fontSize: "0.9rem",
|
||||
minWidth: "200px"
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "0.5rem",
|
||||
opacity: isRefreshing ? 0.7 : 1,
|
||||
cursor: isRefreshing ? "not-allowed" : "pointer",
|
||||
}}
|
||||
/>
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
disabled={isRefreshing}
|
||||
className="btn-secondary"
|
||||
style={{
|
||||
padding: "0.5rem 1rem",
|
||||
fontSize: "0.9rem",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "0.5rem",
|
||||
opacity: isRefreshing ? 0.7 : 1,
|
||||
cursor: isRefreshing ? "not-allowed" : "pointer",
|
||||
}}
|
||||
>
|
||||
{isRefreshing ? (
|
||||
<>
|
||||
<span
|
||||
style={{
|
||||
width: "14px",
|
||||
height: "14px",
|
||||
border: "2px solid rgba(255,255,255,0.3)",
|
||||
borderTopColor: "currentColor",
|
||||
borderRadius: "50%",
|
||||
animation: "spin 0.8s linear infinite",
|
||||
}}
|
||||
></span>
|
||||
Refreshing...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span>🔄</span>
|
||||
Refresh from File
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{loading ? (
|
||||
<div className="grid-container">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
backgroundColor: "var(--secondary-alt-bg)",
|
||||
border: "1px solid var(--border-color)",
|
||||
borderRadius: "5px",
|
||||
padding: "10px",
|
||||
minHeight: "60px",
|
||||
animation: "shimmer 1.5s infinite"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: "60%",
|
||||
height: "20px",
|
||||
backgroundColor: "var(--tertiary-bg)",
|
||||
borderRadius: "4px",
|
||||
marginBottom: "0.5rem",
|
||||
animation: "shimmer 1.5s infinite"
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
style={{
|
||||
width: "40%",
|
||||
height: "16px",
|
||||
backgroundColor: "var(--tertiary-bg)",
|
||||
borderRadius: "4px",
|
||||
animation: "shimmer 1.5s infinite 0.2s"
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
))}
|
||||
<style>{`
|
||||
@keyframes shimmer {
|
||||
0%, 100% { opacity: 0.5; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
) : filteredPeople.length === 0 ? (
|
||||
<EmptyState
|
||||
icon="👥"
|
||||
title={searchQuery ? "No people found" : "No people in list"}
|
||||
description={searchQuery ? "Try a different search term" : "Add people to get started"}
|
||||
/>
|
||||
) : (
|
||||
<div className="grid-container">
|
||||
{filteredPeople.map((person, index) => {
|
||||
if (person.name.toLowerCase() === current_user.toLowerCase()) {
|
||||
return (
|
||||
<Link
|
||||
to={`/games#existing-games`}
|
||||
key={index}
|
||||
className="list-item"
|
||||
>
|
||||
{isRefreshing ? (
|
||||
<>
|
||||
<span
|
||||
style={{
|
||||
textDecoration: "none",
|
||||
color: "inherit",
|
||||
display: "block",
|
||||
width: "14px",
|
||||
height: "14px",
|
||||
border: "2px solid rgba(255,255,255,0.3)",
|
||||
borderTopColor: "currentColor",
|
||||
borderRadius: "50%",
|
||||
animation: "spin 0.8s linear infinite",
|
||||
}}
|
||||
>
|
||||
<h3>{person.name}</h3>
|
||||
<div style={{ fontSize: "0.85em", color: "var(--text-muted)", marginTop: "0.25rem" }}>
|
||||
{person.opinion.length} opinion(s)
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
></span>
|
||||
Refreshing...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span>🔄</span>
|
||||
Refresh from File
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid-container">
|
||||
{people.map((person, index) => {
|
||||
if (person.name.toLowerCase() === current_user.toLowerCase()) {
|
||||
return (
|
||||
<Link
|
||||
to={`/person/${person.name}`}
|
||||
to={`/games#existing-games`}
|
||||
key={index}
|
||||
className="list-item"
|
||||
style={{
|
||||
@ -195,14 +100,26 @@ export const PersonList = ({ people, loading = false, onShowToast }: Props) => {
|
||||
}}
|
||||
>
|
||||
<h3>{person.name}</h3>
|
||||
<div style={{ fontSize: "0.85em", color: "var(--text-muted)", marginTop: "0.25rem" }}>
|
||||
{person.opinion.length} opinion(s)
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
to={`/person/${person.name}`}
|
||||
key={index}
|
||||
className="list-item"
|
||||
style={{
|
||||
textDecoration: "none",
|
||||
color: "inherit",
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
<h3>{person.name}</h3>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,91 +0,0 @@
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
interface EmptyStateProps {
|
||||
icon?: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
action?: ReactNode;
|
||||
}
|
||||
|
||||
export function EmptyState({ icon = "📭", title, description, action }: EmptyStateProps) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
padding: "3rem 2rem",
|
||||
textAlign: "center",
|
||||
background: "var(--secondary-alt-bg)",
|
||||
borderRadius: "16px",
|
||||
border: "1px dashed var(--border-color)",
|
||||
color: "var(--text-muted)"
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: "3rem", marginBottom: "1rem" }}>{icon}</div>
|
||||
<h3 style={{ margin: "0 0 0.5rem 0", color: "var(--text-color)" }}>{title}</h3>
|
||||
{description && <p style={{ margin: "0 0 1.5rem 0", fontSize: "0.95rem" }}>{description}</p>}
|
||||
{action}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function LoadingState({ message = "Loading..." }: { message?: string }) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
padding: "3rem 2rem",
|
||||
textAlign: "center"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: "40px",
|
||||
height: "40px",
|
||||
border: "4px solid rgba(255, 255, 255, 0.2)",
|
||||
borderTopColor: "currentColor",
|
||||
borderRadius: "50%",
|
||||
animation: "spin 0.8s linear infinite",
|
||||
margin: "0 auto 1rem"
|
||||
}}
|
||||
></div>
|
||||
<p style={{ color: "var(--text-muted)", margin: 0 }}>{message}</p>
|
||||
<style>{`
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ErrorState({ message, onRetry }: { message: string, onRetry?: () => void }) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
padding: "3rem 2rem",
|
||||
textAlign: "center",
|
||||
background: "rgba(244, 67, 54, 0.1)",
|
||||
borderRadius: "16px",
|
||||
border: "1px solid rgba(244, 67, 54, 0.3)"
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: "3rem", marginBottom: "1rem" }}>⚠️</div>
|
||||
<h3 style={{ margin: "0 0 0.5rem 0", color: "var(--text-color)" }}>Something went wrong</h3>
|
||||
<p style={{ margin: "0 0 1.5rem 0", color: "var(--text-muted)", fontSize: "0.95rem" }}>{message}</p>
|
||||
{onRetry && (
|
||||
<button
|
||||
onClick={onRetry}
|
||||
style={{
|
||||
background: "var(--accent-color)",
|
||||
border: "none",
|
||||
padding: "0.75rem 1.5rem",
|
||||
borderRadius: "8px",
|
||||
color: "white",
|
||||
fontWeight: 600,
|
||||
cursor: "pointer"
|
||||
}}
|
||||
>
|
||||
🔄 Try Again
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,6 +1,5 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { GameImage } from "../GameImage";
|
||||
import { EmptyState } from "./EmptyState";
|
||||
|
||||
interface FilteredGamesListProps {
|
||||
filteredGames: string[];
|
||||
@ -13,15 +12,7 @@ export function FilteredGamesList({
|
||||
gameToPositive,
|
||||
selectedPeopleCount,
|
||||
}: FilteredGamesListProps) {
|
||||
if (selectedPeopleCount === 0) {
|
||||
return (
|
||||
<EmptyState
|
||||
icon="👥"
|
||||
title="Select people to find games"
|
||||
description="Choose one or more people from the list above to see games they would play"
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (selectedPeopleCount === 0) return null;
|
||||
|
||||
return (
|
||||
<div>
|
||||
@ -75,12 +66,29 @@ export function FilteredGamesList({
|
||||
})}
|
||||
</ul>
|
||||
) : (
|
||||
<EmptyState
|
||||
icon="🔍"
|
||||
title="No games found"
|
||||
description="Try selecting fewer people or adding more opinions"
|
||||
/>
|
||||
<EmptyState />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyState() {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
padding: "3rem",
|
||||
textAlign: "center",
|
||||
background: "var(--secondary-alt-bg)",
|
||||
borderRadius: "16px",
|
||||
border: "1px dashed var(--border-color)",
|
||||
color: "var(--text-muted)",
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔍</div>
|
||||
<p>No games found where all selected people would play.</p>
|
||||
<p style={{ fontSize: "0.9rem" }}>
|
||||
Try selecting fewer people or adding more opinions!
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,28 +0,0 @@
|
||||
export function LoadingSpinner({ size = "medium", text }: { size?: "small" | "medium" | "large", text?: string }) {
|
||||
const sizeMap = {
|
||||
small: "16px",
|
||||
medium: "24px",
|
||||
large: "32px"
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" }}>
|
||||
<div
|
||||
style={{
|
||||
width: sizeMap[size],
|
||||
height: sizeMap[size],
|
||||
border: `${parseInt(sizeMap[size]) / 4}px solid rgba(255, 255, 255, 0.2)`,
|
||||
borderTopColor: "currentColor",
|
||||
borderRadius: "50%",
|
||||
animation: "spin 0.8s linear infinite"
|
||||
}}
|
||||
></div>
|
||||
{text && <span style={{ color: "var(--text-muted)", fontSize: "0.9rem" }}>{text}</span>}
|
||||
<style>{`
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,65 +0,0 @@
|
||||
export function SkeletonLoader({ width, height, count = 1 }: { width?: string | number, height?: string | number, count?: number }) {
|
||||
return (
|
||||
<>
|
||||
{Array.from({ length: count }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
width: width || "100%",
|
||||
height: height || "60px",
|
||||
backgroundColor: "var(--secondary-alt-bg)",
|
||||
borderRadius: "8px",
|
||||
animation: "shimmer 1.5s infinite",
|
||||
marginBottom: count > 1 ? "1rem" : undefined
|
||||
}}
|
||||
></div>
|
||||
))}
|
||||
<style>{`
|
||||
@keyframes shimmer {
|
||||
0%, 100% { opacity: 0.5; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function CardSkeleton() {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "var(--secondary-alt-bg)",
|
||||
border: "1px solid var(--border-color)",
|
||||
borderRadius: "5px",
|
||||
padding: "10px",
|
||||
minHeight: "80px"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: "60%",
|
||||
height: "20px",
|
||||
backgroundColor: "var(--tertiary-bg)",
|
||||
borderRadius: "4px",
|
||||
marginBottom: "0.5rem",
|
||||
animation: "shimmer 1.5s infinite"
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
style={{
|
||||
width: "40%",
|
||||
height: "16px",
|
||||
backgroundColor: "var(--tertiary-bg)",
|
||||
borderRadius: "4px",
|
||||
animation: "shimmer 1.5s infinite 0.2s"
|
||||
}}
|
||||
></div>
|
||||
<style>{`
|
||||
@keyframes shimmer {
|
||||
0%, 100% { opacity: 0.5; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -2,12 +2,9 @@ import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
import { ErrorBoundary } from './ErrorBoundary'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<ErrorBoundary>
|
||||
<App />
|
||||
</ErrorBoundary>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user