first commit

app/people/PersonItem.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import type { Result } from "./person";
+
+interface PersonItemProps extends Result {
+  remove: (uuid: string) => void;
+}
+
+const PersonItem = ({ remove, ...result }: PersonItemProps) => {
+  const { email, login, location, name, picture } = result;
+
+  return (
+    <div className="card bg-base-200 w-96 shadow-sm" key={login.uuid}>
+      <figure className="px-10 pt-10">
+        <img src={picture.medium} alt={name.last} className="rounded-sm" />
+      </figure>
+      <div className="card-body items-center text-center">
+        <h2 className="card-title sm:text-sm md:text-lg lg:text-xl">
+          {name.first} {name.last}
+        </h2>
+        <h4>{email}</h4>
+        <p className="sm:text-sm md:text-md lg:text-lg">
+          {location.city}, {location.country}
+        </p>
+        <div className="card-actions">
+          <button
+            className="btn btn-active btn-accent btn-xs sm:btn-sm md:btn-md lg:btn-lg xl:btn-xl"
+            onClick={() => remove(login.uuid)}
+          >
+            {" "}
+            remove{" "}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PersonItem;

app/people/page-origin.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import axios from "axios";
+import type { Result } from "./person";
+import PersonItem from "./PersonItem";
+import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
+
+const url = "https://randomuser.me/api/?results=12";
+
+const PeoplePage = () => {
+  const [users, setUsers] = useState<Result[]>([]);
+
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    axios
+      .get(url)
+      .then((response) => {
+        console.log(response);
+        setUsers(response.data.results);
+        setIsLoading(false);
+      })
+      .catch((error: any) => {
+        if (error.isAxiosError) {
+          console.log(error.response);
+          toast.error(`Error occurred while fetching..`);
+        } else {
+          console.log(error);
+        }
+      });
+  }, []);
+
+  if (isLoading) {
+    return (
+      <>
+        <span className="loading loading-ball loading-xs"></span>
+        <span className="loading loading-ball loading-sm"></span>
+        <span className="loading loading-ball loading-md"></span>
+        <span className="loading loading-ball loading-lg"></span>
+        <span className="loading loading-ball loading-xl"></span>
+      </>
+    );
+  }
+
+  return (
+    <section>
+      <h2 className="font-bold text-center text-amber-900 tracking-tight mt-2 text-3xl">
+        People Page
+      </h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
+        {users?.map((user) => {
+          return (
+            <PersonItem {...user} key={user.login.uuid} remove={() => {}} />
+          );
+        })}
+      </div>
+    </section>
+  );
+};
+
+export default PeoplePage;

app/people/page.tsx

@@ -0,0 +1,71 @@
+"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;

app/people/person.tsx

@@ -0,0 +1,86 @@
+interface RootObject {
+  results: Result[];
+  info: Info;
+}
+
+interface Info {
+  seed: string;
+  results: number;
+  page: number;
+  version: string;
+}
+
+interface Result {
+  content: React.ReactNode;
+  gender: string;
+  name: Name;
+  location: Location;
+  email: string;
+  login: Login;
+  dob: Dob;
+  registered: Dob;
+  phone: string;
+  cell: string;
+  id: Id;
+  picture: Picture;
+  nat: string;
+}
+
+interface Picture {
+  large: string;
+  medium: string;
+  thumbnail: string;
+}
+
+interface Id {
+  name: string;
+  value: null | string;
+}
+
+interface Dob {
+  date: string;
+  age: number;
+}
+
+interface Login {
+  uuid: string;
+  username: string;
+  password: string;
+  salt: string;
+  md5: string;
+  sha1: string;
+  sha256: string;
+}
+
+interface Location {
+  street: Street;
+  city: string;
+  state: string;
+  country: string;
+  postcode: number | string;
+  coordinates: Coordinates;
+  timezone: Timezone;
+}
+
+interface Timezone {
+  offset: string;
+  description: string;
+}
+
+interface Coordinates {
+  latitude: string;
+  longitude: string;
+}
+
+interface Street {
+  number: number;
+  name: string;
+}
+
+interface Name {
+  title: string;
+  first: string;
+  last: string;
+}
+
+export type { Result, Name, Picture, Location, Login };