Merge pull request #6 from azevedoguigo/development

v0.4.0
azevedoguigo · Jul 20, 2024 · aaf39fc · aaf39fc
2 parents 218cc5b + 319ab92
commit aaf39fc
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 10 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "@tauri-apps/api": "^1",
     "axios": "^1.7.2",
     "install": "^0.13.0",
+    "jwt-decode": "^4.0.0",
     "npm": "^10.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/src/api/Task.api.ts b/src/api/Task.api.ts
@@ -1,6 +1,6 @@
 import ITaskApi, { 
   ICreateTaskResponse, 
-  IGetTaskResponse, 
+  IGetTasksResponse, 
   IMessageResponse, 
   IUpdateTaskResponse 
 } from "../types/api/TaskApi.types.ts"
@@ -23,10 +23,13 @@ export default class TaskApi extends ITaskApi {
       })
   }
 
-  public getTasks = async (): Promise<IGetTaskResponse[]> => {
+  public getTasks = async (page: number): Promise<IGetTasksResponse> => {
     return await this.api.get("/tasks/all", { 
       headers: {
         "Authorization": `Bearer ${localStorage.getItem("token")}`
+      },
+      params: {
+        page
       }
      })
       .then(response => response.data)

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -14,6 +14,7 @@ import { useNavigate } from "react-router-dom"
 import Sidebar from "../components/Sidebar"
 import TaskApi from "../api/Task.api"
 import api from "../config/api"
+import { jwtDecode } from "jwt-decode"
 
 const taskApi = new TaskApi(api)
 
@@ -23,15 +24,21 @@ function HomePage() {
   const [description, setDescription] = useState("")
   const [completed, setCompleted] = useState(true)
 
+  const [page, setPage] = useState<number>()
+  const [currentPage, setCurrentPage] = useState(1)
+  const [totalPages, setTotalPages] = useState<number>()
+
   const navigate = useNavigate()
 
   const token = localStorage.getItem("token")
 
   async function reloadTasks() {
     try {
-      const response = await taskApi.getTasks()
+      const response = await taskApi.getTasks(page!)
 
-      setTasks(response)
+      setTasks(response.tasks)
+      setPage(response.pagination.page_number)
+      setTotalPages(response.pagination.total_pages)
     } catch(error) {
       toast.error("Error to reload task list!", { theme: "colored" })
     }
@@ -129,18 +136,27 @@ function HomePage() {
       navigate("/login")
     }
 
+    const decodedToken = jwtDecode(token!)
+
+    if(Date.now() >= decodedToken.exp! * 1000) {
+      navigate("/login")
+    }
+
     async function loadTasks() {
       try {
-        const response = await taskApi.getTasks()
+        const response = await taskApi.getTasks(page!)
+        console.log(response.pagination.page_number)
 
-        setTasks(response)
+        setTasks(response.tasks)
+        setPage(response.pagination.page_number)
+        setTotalPages(response.pagination.total_pages)
       } catch(error) {
         toast.error("Error to load task list!", { theme: "colored" })
       }
     }
 
     loadTasks()
-  }, [])
+  }, [page])
 
   return(
     <div className="flex">
@@ -163,7 +179,7 @@ function HomePage() {
               </tr>
             </thead>
             <tbody>
-              {tasks?.map(task => {
+              {tasks?.length ? tasks.map(task => {
                 return <tr key={task.id}>
                   <th>{ task.id }</th>
                   <td>{ task.title }</td>
@@ -232,9 +248,26 @@ function HomePage() {
                     </button>
                   </td>
                 </tr>
-              })}
+              }) : <div></div> }
             </tbody>
           </table>
+
+          <div className="join flex justify-center mt-16">
+            {Array.from({ length: totalPages! }, (_, index) => (
+              <input
+                key={index}
+                className="join-item btn btn-square"
+                type="radio"
+                name="options"
+                aria-label={`${index + 1}`}
+                checked={currentPage === index + 1}
+                onChange={() => {
+                  setCurrentPage(index + 1)
+                  setPage(index + 1)
+                }}
+              />
+            ))}
+          </div>
         </div>
       </main>
     </div>

diff --git a/src/types/api/TaskApi.types.ts b/src/types/api/TaskApi.types.ts
@@ -23,6 +23,16 @@ export type IGetTaskResponse = {
   user_id: string
 }
 
+export type IGetTasksResponse = {
+  pagination: {
+    page_number: number,
+    page_size: number,
+    total_entries: number,
+    total_pages: number
+  },
+  tasks: IGetTaskResponse[]
+}
+
 export type IUpdateTaskResponse = {
   task: {
     id: string,
@@ -68,7 +78,7 @@ export default abstract class ITaskApi {
     this.api = api
   }
 
-  public abstract getTasks(): Promise<IGetTaskResponse[]>
+  public abstract getTasks(page: number, limit: number): Promise<IGetTasksResponse>
   public abstract createTask(title: string, description: string): Promise<ICreateTaskResponse>
   public abstract updateTask(id: string, title: string, description: string): Promise<IUpdateTaskResponse>
   public abstract updateTaskToCompleted(id: string, completed: boolean): Promise<IUpdateTaskResponse>