72 lines
1.6 KiB
TypeScript
72 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import type { Result } from "./person";
|
|
import PersonItem from "./PersonItem";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
import {
|
|
fetchRandomUsers,
|
|
clearList,
|
|
removeUser,
|
|
} from "@/lib/features/people/personSlice";
|
|
|
|
import { useAppSelector, useAppDispatch, useAppStore } from "../../lib/hooks";
|
|
|
|
const PeoplePage = () => {
|
|
const { results, isLoading } = useAppSelector((store) => store.people);
|
|
|
|
const dispatch = useAppDispatch();
|
|
|
|
useEffect(() => {
|
|
dispatch(fetchRandomUsers());
|
|
}, []);
|
|
|
|
const handleClearList = () => {
|
|
dispatch(clearList());
|
|
};
|
|
|
|
const reset = () => {
|
|
dispatch(fetchRandomUsers());
|
|
};
|
|
|
|
const remove = (id: any) => {
|
|
dispatch(removeUser(id));
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="p-6 max-w-md mx-auto my-4">
|
|
{" "}
|
|
<span className="loading loading-spinner loading-sm"></span>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<section>
|
|
<h2 className="font-bold text-center text-amber-900 tracking-tight mt-2 text-3xl">
|
|
People Page
|
|
</h2>
|
|
<div className="flex items-center justify-center mt-5">
|
|
{results?.length < 1 ? (
|
|
<button className="btn btn-soft" onClick={reset}>
|
|
reset
|
|
</button>
|
|
) : (
|
|
<button className="btn btn-soft" onClick={handleClearList}>
|
|
Clear All
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
|
|
{results?.map((p: Result) => {
|
|
return <PersonItem {...p} key={p.login.uuid} remove={remove} />;
|
|
})}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default PeoplePage;
|