126 lines
3.3 KiB
TypeScript
126 lines
3.3 KiB
TypeScript
import { Person } from "../items";
|
|
import { Link } from "react-router-dom";
|
|
import { useState } from "react";
|
|
import { get_auth_status, refresh_state, get_is_admin } from "./api";
|
|
import type { ToastType } from "./Toast";
|
|
import "./PersonList.css"
|
|
|
|
interface Props {
|
|
people: Person[];
|
|
onShowToast?: (message: string, type?: ToastType) => void;
|
|
}
|
|
|
|
export const PersonList = ({ people, onShowToast }: Props) => {
|
|
const [current_user, set_current_user] = useState<string>("");
|
|
const [isRefreshing, setIsRefreshing] = useState(false);
|
|
|
|
get_auth_status().then((res) => {
|
|
if (res) {
|
|
set_current_user(res.username);
|
|
}
|
|
});
|
|
|
|
const handleRefresh = async () => {
|
|
setIsRefreshing(true);
|
|
try {
|
|
await refresh_state();
|
|
onShowToast?.("State refreshed from file successfully", "success");
|
|
window.location.reload();
|
|
} catch (err) {
|
|
console.error(err);
|
|
onShowToast?.("Failed to refresh state from file", "error");
|
|
} finally {
|
|
setIsRefreshing(false);
|
|
}
|
|
};
|
|
|
|
const isAdmin = get_is_admin();
|
|
|
|
return (
|
|
<div>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
marginBottom: "1rem",
|
|
}}
|
|
>
|
|
<h2>People List</h2>
|
|
{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 className="grid-container">
|
|
{people.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>
|
|
</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>
|
|
);
|
|
};
|