ux improvements
This commit is contained in:
parent
f24e8fc1e9
commit
e7fede576c
@ -172,7 +172,7 @@ function App() {
|
||||
</div>
|
||||
<ShaderBackground theme={theme} />
|
||||
<Routes>
|
||||
<Route path="/" element={<PersonList people={people} onShowToast={addToast} />} />
|
||||
<Route path="/" element={<PersonList people={people} loading={isLoading} onShowToast={addToast} />} />
|
||||
<Route path="/games" element={<GameList onShowToast={addToast} />} />
|
||||
<Route path="/filter" element={<GameFilter />} />
|
||||
<Route path="/person/:name" element={<PersonDetails />} />
|
||||
|
||||
@ -2,6 +2,7 @@ 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,25 +13,37 @@ export function GameDetails({ onShowToast }: Props) {
|
||||
const navigate = useNavigate();
|
||||
const [game, setGame] = useState<Game | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const isAdmin = get_is_admin();
|
||||
|
||||
useEffect(() => {
|
||||
if (!title) return;
|
||||
if (!title) {
|
||||
setError("Game title is missing");
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
apiFetch(`/api/game/${encodeURIComponent(title)}`)
|
||||
.then(async (res) => {
|
||||
if (!res.ok) throw new Error("Game not found");
|
||||
if (!res.ok) {
|
||||
if (res.status === 404) {
|
||||
throw new Error("Game not found");
|
||||
}
|
||||
throw new Error("Failed to load game");
|
||||
}
|
||||
return Game.decode(new Uint8Array(await res.arrayBuffer()));
|
||||
})
|
||||
.then((data) => {
|
||||
setGame(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
setLoading(false);
|
||||
});
|
||||
setError(err.message || "Failed to load game");
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
}, [title]);
|
||||
|
||||
const handleDelete = async () => {
|
||||
@ -59,8 +72,9 @@ export function GameDetails({ onShowToast }: Props) {
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <div>Loading...</div>;
|
||||
if (!game) return <div>Game not found</div>;
|
||||
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" />;
|
||||
|
||||
const getExternalLink = () => {
|
||||
if (game.source === Source.STEAM) {
|
||||
|
||||
@ -5,9 +5,11 @@ 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(
|
||||
@ -16,15 +18,19 @@ export function GameFilter() {
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
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));
|
||||
.catch((err) => console.error("Failed to fetch people:", err))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
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 } from "react";
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import {
|
||||
Game,
|
||||
Source,
|
||||
@ -12,6 +12,7 @@ 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;
|
||||
@ -28,8 +29,18 @@ export function GameList({ onShowToast }: Props) {
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
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 = () => {
|
||||
setGamesLoading(true);
|
||||
apiFetch("/api/games")
|
||||
.then((res) => res.arrayBuffer())
|
||||
.then((buffer) => {
|
||||
@ -38,9 +49,14 @@ export function GameList({ onShowToast }: Props) {
|
||||
setGames(list.games);
|
||||
} catch (e) {
|
||||
console.error("Failed to decode games:", e);
|
||||
onShowToast?.("Failed to load games", "error");
|
||||
}
|
||||
})
|
||||
.catch(console.error);
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
onShowToast?.("Failed to fetch games", "error");
|
||||
})
|
||||
.finally(() => setGamesLoading(false));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@ -465,16 +481,89 @@ export function GameList({ onShowToast }: Props) {
|
||||
</style>
|
||||
|
||||
<div style={{ marginTop: "3rem" }}>
|
||||
<h3
|
||||
id="existing-games"
|
||||
<div
|
||||
style={{
|
||||
scrollMarginBottom: "0",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: "1rem",
|
||||
flexWrap: "wrap",
|
||||
gap: "1rem"
|
||||
}}
|
||||
>
|
||||
Existing Games
|
||||
</h3>
|
||||
<ul className="grid-container">
|
||||
{games.map((game) => {
|
||||
<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) => {
|
||||
const opinion = opinions.find((op) => op.title === game.title);
|
||||
function handleOpinion(title: string, number: number): void {
|
||||
if (number == 2) {
|
||||
@ -628,6 +717,7 @@ export function GameList({ onShowToast }: Props) {
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -9,13 +9,27 @@ 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, password });
|
||||
const req = LoginRequest.create({ username: username.trim(), password });
|
||||
const body = LoginRequest.encode(req).finish();
|
||||
|
||||
const res = await fetch("/auth/login", {
|
||||
@ -32,45 +46,109 @@ export function Login({ onLogin }: LoginProps) {
|
||||
if (response.success) {
|
||||
onLogin(response.token);
|
||||
} else {
|
||||
setError(response.message);
|
||||
setError(response.message || "Login failed");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Login error:", err);
|
||||
setError("Failed to login");
|
||||
setError("An unexpected error occurred. Please try again.");
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
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)}
|
||||
onChange={(e) => {
|
||||
setUsername(e.target.value);
|
||||
if (fieldErrors.username) setFieldErrors({ ...fieldErrors, username: undefined });
|
||||
}}
|
||||
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)}
|
||||
onChange={(e) => {
|
||||
setPassword(e.target.value);
|
||||
if (fieldErrors.password) setFieldErrors({ ...fieldErrors, password: undefined });
|
||||
}}
|
||||
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" }}>
|
||||
Login
|
||||
<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>
|
||||
</form>
|
||||
{error && (
|
||||
<p style={{ color: "#ff6b6b", marginTop: "1rem", textAlign: "center" }}>
|
||||
{error}
|
||||
</p>
|
||||
<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>
|
||||
)}
|
||||
<style>{`
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -3,53 +3,78 @@ 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(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (name) {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
apiFetch(`/api/${name}`)
|
||||
.then((res) => res.arrayBuffer())
|
||||
.then((res) => {
|
||||
if (!res.ok) {
|
||||
throw new Error("Person not found");
|
||||
}
|
||||
return res.arrayBuffer();
|
||||
})
|
||||
.then((buffer) => {
|
||||
try {
|
||||
setPerson(Person.decode(new Uint8Array(buffer)));
|
||||
} catch (e) {
|
||||
console.error("Failed to decode person:", e);
|
||||
throw new Error("Failed to load person data");
|
||||
}
|
||||
})
|
||||
.catch(console.error);
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
setError(err.message || "Failed to load person");
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
}
|
||||
}, [name]);
|
||||
|
||||
if (!person) return <div>Loading...</div>;
|
||||
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" />;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ marginBottom: "2rem" }}>
|
||||
<h2>{person.name}</h2>
|
||||
<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>
|
||||
{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>
|
||||
|
||||
<GameImage game={op.title} />
|
||||
</Link>
|
||||
))}
|
||||
</ul>
|
||||
<GameImage game={op.title} />
|
||||
</Link>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,24 +1,36 @@
|
||||
import { Person } from "../items";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect, useMemo } 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, onShowToast }: Props) => {
|
||||
export const PersonList = ({ people, loading = false, onShowToast }: Props) => {
|
||||
const [current_user, set_current_user] = useState<string>("");
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
||||
get_auth_status().then((res) => {
|
||||
if (res) {
|
||||
set_current_user(res.username);
|
||||
}
|
||||
});
|
||||
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]);
|
||||
|
||||
const handleRefresh = async () => {
|
||||
setIsRefreshing(true);
|
||||
@ -44,53 +56,136 @@ export const PersonList = ({ people, onShowToast }: Props) => {
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: "1rem",
|
||||
flexWrap: "wrap",
|
||||
gap: "1rem"
|
||||
}}
|
||||
>
|
||||
<h2>People List</h2>
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
disabled={isRefreshing}
|
||||
className="btn-secondary"
|
||||
<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)}
|
||||
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",
|
||||
minWidth: "200px"
|
||||
}}
|
||||
>
|
||||
{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>
|
||||
)}
|
||||
/>
|
||||
{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>
|
||||
<div className="grid-container">
|
||||
{people.map((person, index) => {
|
||||
if (person.name.toLowerCase() === current_user.toLowerCase()) {
|
||||
{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"
|
||||
style={{
|
||||
textDecoration: "none",
|
||||
color: "inherit",
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
<h3>{person.name}</h3>
|
||||
<div style={{ fontSize: "0.85em", color: "var(--text-muted)", marginTop: "0.25rem" }}>
|
||||
{person.opinion.length} opinion(s)
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
to={`/games#existing-games`}
|
||||
to={`/person/${person.name}`}
|
||||
key={index}
|
||||
className="list-item"
|
||||
style={{
|
||||
@ -100,26 +195,14 @@ export const PersonList = ({ people, 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>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
91
frontend/src/components/EmptyState.tsx
Normal file
91
frontend/src/components/EmptyState.tsx
Normal file
@ -0,0 +1,91 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
28
frontend/src/components/LoadingSpinner.tsx
Normal file
28
frontend/src/components/LoadingSpinner.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
65
frontend/src/components/SkeletonLoader.tsx
Normal file
65
frontend/src/components/SkeletonLoader.tsx
Normal file
@ -0,0 +1,65 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user