Skip to content

Commit

Permalink
added pagination functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@dustinusey
dustinusey committed Feb 3, 2024
1 parent c8f4437 commit 7c5bf7d
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 68 deletions.
3 changes: 3 additions & 0 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export default function App() {
const [loading, isLoading] = useState(false);
const [currentProject, setCurrentProject] = useState("");
const [projects, setProjects] = useState([]);
const [currentPage, setCurrentPage] = useState(1);

// initially sets theme in LS to false
useEffect(() => {
Expand All @@ -30,6 +31,8 @@ export default function App() {
setCurrentProject,
projects,
setProjects,
currentPage,
setCurrentPage,
}}
>
<ProjectTable />
Expand Down
58 changes: 36 additions & 22 deletions src/Components/ProjectTable.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { createClient } from "@supabase/supabase-js";
import axios from "axios";
import { useContext, useEffect, useState } from "react";
import { useContext, useEffect } from "react";
import { AppState } from "../App";
import Alert from "./Alerts/Alert";
import Project from "./Project";
Expand All @@ -15,8 +15,17 @@ const supabase = createClient(
);

export default function ProjectTable() {
const { theme, alert, setAlert, loading, isLoading, projects, setProjects } =
useContext(AppState);
const {
theme,
alert,
loading,
isLoading,
projects,
setProjects,
currentPage,
setCurrentPage,
setAlert,
} = useContext(AppState);

useEffect(() => {
fetchProjects();
Expand All @@ -31,6 +40,8 @@ export default function ProjectTable() {
async function getProjects() {
isLoading(true);
const { data } = await supabase.from("projects").select();

setCurrentPage(1);
return data;
}

Expand All @@ -46,7 +57,7 @@ export default function ProjectTable() {
messages: [
{
role: "user",
content: `I want to you to return a JSON object of an array named 'frontendProjects' of random, quick, beginner friendly frontend project ideas. ONLY return a JSON object. Please exclude any of these projects: Pomodoro timers, calculators, or any of these: ${projects.map(
content: `I want to you to return a JSON object of an array named 'frontendProjects' of random, quick, beginner friendly frontend project ideas. ONLY return a JSON object. Please exclude any of these projects: Portfolio websites, Pomodoro timers, calculators, calendars or any of these: ${projects.map(
(proj) => proj.name
)}`,
},
Expand Down Expand Up @@ -134,24 +145,27 @@ export default function ProjectTable() {

{/* table body */}
<tbody>
{projects.map((project) => {
const id = project.id.toString();
const date = new Date(project.created_at);
const formattedDate = `${date.toLocaleString("default", {
month: "long",
})} ${date.getDate()}, ${date.getFullYear()}`;
return (
<Project
key={project.id}
id={id}
project={project}
projectName={project.name}
createdAt={formattedDate}
status={project.status}
github={project.github_url}
/>
);
})}
{/* only render the projects based off the currentPage and only wanting to show 5 per page */}
{projects
.slice((currentPage - 1) * 5, currentPage * 5)
.map((project) => {
const id = project.id.toString();
const date = new Date(project.created_at);
const formattedDate = `${date.toLocaleString("default", {
month: "long",
})} ${date.getDate()}, ${date.getFullYear()}`;
return (
<Project
key={project.id}
id={id}
project={project}
projectName={project.name}
createdAt={formattedDate}
status={project.status}
github={project.github_url}
/>
);
})}
</tbody>
</table>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/Components/StatusDropdown.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default function StatusDropdown(props) {
>
{props.status === "abandoned" ? "Abandoned" : "Completed"}

{props.stats === "abandoned" ? (
{props.status === "abandoned" ? (
<svg
className="w-2.5 h-2.5 ms-3"
aria-hidden="true"
Expand Down
95 changes: 50 additions & 45 deletions src/Components/TablePagination.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,31 @@
import { useContext } from "react";
import { AppState } from "../App";

export default function TablePagination() {
const { projects, setCurrentPage, currentPage } = useContext(AppState);

const pagination = {
currentPage: 1,
totalPages: projects.length / 5,
totalItems: projects.length - 1,
itemsPerPage: 5,
};

return (
<nav
className="flex item-center justify-center p-10"
aria-label="Page navigation example"
>
<ul className="flex items-center -space-x-px h-10 text-base">
{/* previous arrow */}
<li>
<li
onClick={() => {
currentPage > 1 && setCurrentPage(currentPage - 1);
}}
>
<a
href="#"
className="duration-300 mr-3 flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-900 dark:hover:text-white"
className="duration-300 mr-3 flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-900 dark:hover:text-white"
>
<span className="sr-only">Previous</span>
<svg
Expand All @@ -29,53 +45,42 @@ export default function TablePagination() {
</svg>
</a>
</li>
<li>
<a
href="#"
className="duration-300 m-0.5 rounded-lg z-10 flex items-center justify-center px-4 h-10 leading-tight text-sky-600 border border-sky-300 bg-sky-50 hover:bg-sky-100 hover:text-sky-700 dark:border-gray-900 dark:bg-gray-900 dark:text-sky-400"
>
1
</a>
</li>
<li>
<a
href="#"
className="duration-300 m-0.5 rounded-lg flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-900 dark:hover:text-white"
>
2
</a>
</li>
<li>
<a
href="#"
aria-current="page"
className="duration-300 m-0.5 rounded-lg flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-900 dark:hover:text-white"
>
3
</a>
</li>
<li>
<a
href="#"
className="duration-300 m-0.5 rounded-lg flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-900 dark:hover:text-white"
>
4
</a>
</li>
<li>
<a
href="#"
className="duration-300 m-0.5 rounded-lg flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-900 dark:hover:text-white"
>
5
</a>
</li>

{/* page numbers */}
{projects.map((project, index) => {
if (index % pagination.itemsPerPage === 0) {
return (
<li
onClick={() =>
setCurrentPage(index / pagination.itemsPerPage + 1)
}
key={index}
>
<a
href="#"
className={
currentPage === index / pagination.itemsPerPage + 1
? "cursor-default duration-300 flex items-center justify-center px-4 h-10 leading-tight text-white bg-slate-400 bg-opacity-50 rounded-lg hover:text-white dark:bg-gray-900 dark:text-white dark:hover:text-white mx-0.5"
: "duration-300 flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-opacity-50 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-900 dark:hover:text-white mx-0.5"
}
>
{index / pagination.itemsPerPage + 1}
</a>
</li>
);
}
})}

{/* next arrow */}
<li>
<li
onClick={() => {
currentPage < pagination.totalPages &&
setCurrentPage(currentPage + 1);
}}
>
<a
href="#"
className="duration-300 ml-3 flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-900 dark:hover:text-white"
className="duration-300 ml-3 flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-900 dark:hover:text-white"
>
<span className="sr-only">Next</span>
<svg
Expand Down

0 comments on commit 7c5bf7d

Please sign in to comment.