[#2PlaysAMonth] Pagination (reactplay#1001)

* Smart Todo app added as a play

* text

* test complete and compelte todo list app

* Updated all changes required

* Roll The Dice - React game is completed

* removed unused files

* Pagination completed

* Updated Readme file

---------

Co-authored-by: Tapas Adhikary <[email protected]>
Co-authored-by: Sachin Chaurasiya <[email protected]>
Co-authored-by: Koustov <[email protected]>

src/plays/pagination/Pagination.js

@@ -0,0 +1,22 @@
+import PlayHeader from 'common/playlists/PlayHeader';
+import Users from './components/Users';
+
+// WARNING: Do not change the entry componenet name
+function RollTheDice(props) {
+ // Your Code Start below.
+
+ return (
+ <>
+ <div className="play-details">
+ <PlayHeader play={props} />
+ <div className="play-details-body">
+ {/* Your Code Starts Here */}
+ <Users />
+ {/* Your Code Ends Here */}
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default RollTheDice;

src/plays/pagination/Readme.md

@@ -0,0 +1,35 @@
+# Pagination
+
+Fetch 100 github users using this API `https://api.github.com/users?per_page=100` and add a pagination features. So, that 100 users will not display once
+
+## Play Demographic
+
+- Language: js
+- Level: Intermediate
+
+## Creator Information
+
+- User: wyarejali
+- Gihub Link: https://github.com/wyarejali
+- Website: https://wyarejali.vercel.app
+- Blog: N/A
+- Video: [Stack-Stream](https://www.stack-stream.com/v/how-to-make-pagination-2playsamonth-1)
+
+## Implementation Details
+
+- Fetch 100 GitHub user
+- State Management
+- Responsive Styling
+
+## Consideration
+
+- useState
+- useEffect
+- custom hooks
+
+## Resources
+
+- TailwindCSS
+- Axios
+
+**Happy Coding!** 🤩

src/plays/pagination/components/Card.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+const Card = (user) => {
+ const { login, avatar_url, html_url } = user;
+
+ return (
+ <div className=" bg-white rounded-md shadow-xl hover:scale-105 transition-all duration-500 p-8 text-center">
+ <div className=" w-28 h-28 m-auto border-4 border-teal-500 rounded-full overflow-hidden">
+ <img alt={login} className="" src={avatar_url} />
+ </div>
+ <div className="">
+ <h3 className="capitalize my-2 font-semibold text-xl text-gray-900">
+ <a href={html_url} rel="noopener noreferrer" target="_blank">
+ {login}
+ </a>
+ </h3>
+ <a
+ className="bg-teal-500 hover:bg-orange-500 text-gray-50 px-4 py-[6px] text-sm rounded inline-block"
+ href={`https://github.com/${login}?tab=repositories`}
+ rel="noreferrer"
+ target="_blank"
+ >
+ Repositories
+ </a>
+ </div>
+ </div>
+ );
+};
+
+export default Card;

src/plays/pagination/components/Users.jsx

@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from 'react';
+import { useFetch } from '../hooks/useFetch';
+import Card from './Card';
+
+const Users = () => {
+ const { isLoading, data } = useFetch();
+ const [page, setPage] = useState(0);
+ const [users, setUsers] = useState([]);
+
+ useEffect(() => {
+ if (isLoading) return;
+ setUsers(data[page]);
+ }, [page, isLoading, data]);
+
+ const handlePage = (page) => {
+ setPage(page);
+ };
+
+ // Previous page method
+ const prevPage = () => {
+ setPage((oldPage) => {
+ let prevPage = oldPage - 1;
+
+ if (prevPage < 0) {
+ prevPage = data.length - 1;
+ }
+
+ return prevPage;
+ });
+ };
+ // Next page method
+ const nextPage = () => {
+ setPage((oldPage) => {
+ let nextPage = oldPage + 1;
+
+ if (nextPage > data.length - 1) {
+ nextPage = 0;
+ }
+
+ return nextPage;
+ });
+ };
+
+ if (isLoading) {
+ return (
+ <div className="app-github-users">
+ <div className="container mx-auto">
+ <div className="h-[70vh] flex justify-center items-center">
+ <h3 className="text-center text-4xl font-semibold text-teal-800">Loading...</h3>
+ </div>
+ </div>
+ </div>
+ );
+ }
+
+ return (
+ <section>
+ <div className="container mx-auto">
+ <div className="text-center">
+ <h3 className="text-center text-4xl font-semibold text-teal-800">Pagination</h3>
+ <span className="w-28 h-[3px] bg-teal-500 inline-block" />
+ </div>
+ <div className="grid xl:grid-cols-6 lg:grid-cols-5 md:grid-cols-4 sm:grid-cols-3 grid-cols-1 gap-6 py-4 mt-3">
+ {users.map((user) => {
+ return <Card key={user.id} {...user} />;
+ })}
+ </div>
+
+ <div className="mt-4 text-center">
+ <button
+ className="bg-teal-500 hover:bg-teal-600 px-3 py-1 rounded text-gray-50"
+ onClick={prevPage}
+ >
+ Prev
+ </button>
+ {data.map((item, index) => {
+ return (
+ <button
+ className={`${
+ index === page ? 'bg-teal-500 text-gray-50' : 'bg-teal-200 text-teal-600'
+ } hover:bg-teal-500 hover:text-gray-50 mx-1 px-4 py-1 rounded`}
+ key={index}
+ onClick={() => handlePage(index)}
+ >
+ {index + 1}
+ </button>
+ );
+ })}
+ <button
+ className="bg-teal-500 hover:bg-teal-600 px-3 py-1 rounded text-gray-50"
+ onClick={nextPage}
+ >
+ Next
+ </button>
+ </div>
+ </div>
+ </section>
+ );
+};
+
+export default Users;

src/plays/pagination/hooks/useFetch.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+import { pageinate } from '../utils/paginate';
+const url = 'https://api.github.com/users?per_page=100';
+
+/**
+ *
+ * @returns isLoading: boolean, data: users object
+ */
+export const useFetch = () => {
+ const [isLoading, setIsLoading] = useState(true);
+ const [data, setData] = useState([]);
+
+ // Fetch the data from github api
+ const getData = async () => {
+ const response = await fetch(url);
+ const data = await response.json();
+ setData(pageinate(data, 12));
+ setIsLoading(false);
+ };
+
+ useEffect(() => {
+ getData();
+ }, []);
+
+ return { isLoading, data };
+};

src/plays/pagination/utils/paginate.js

@@ -0,0 +1,16 @@
+/**
+ * @param {Array} data
+ * @param {number} perPage
+ * @returns a object
+ */
+export const pageinate = (data = [], perPage = 10) => {
+ const page = Math.ceil(data.length / perPage);
+
+ const newData = Array.from({ length: page }, (_, index) => {
+ const start = index * perPage;
+
+ return data.slice(start, start + perPage);
+ });
+
+ return newData;
+};