Add paging to users/{user_ID}/tasks

ui/react-ui/src/components/app/App.js

@@ -1,6 +1,6 @@
 import './App.css';
 import {BrowserRouter as Router, Route,} from 'react-router-dom'; 
-import UserTasks from '../routes/userTasks/UserTasks.js';
+import UserTasks from '../routes/userTasks/UserTasksPaginated.js';
 import Home from '../routes/home/Home.js';
 import User from '../routes/userid/userid.js';
 import Users from '../routes/users/UsersPaginated';

ui/react-ui/src/components/routes/userTasks/UserTasks.js

@@ -22,11 +22,13 @@ const UserTasks = () => {
     .catch((error) => console.error(error))
   }, [userId]);
 
+  /*
   function deleteTask(taskId){
     const messages = this.state.messages.filter((_, index) => index !== i)
     this.setState({ messages });
 
   }
+  */
 
   return (
     <>
@@ -37,7 +39,7 @@ const UserTasks = () => {
         ? <BootstrapTable heatherItems={Object.keys(userTasks[2][0])} rows={userTasks[2]} /> 
         : <h3>User {userId} Tasks Not Found</h3>
       }
-      <button onClick={() => this.deleteTask()}>Delete Task</button>
+      {/* <button onClick={() => this.deleteTask()}>Delete Task</button> */}
       </Container>
     </>
   )

ui/react-ui/src/components/routes/userTasks/UserTasksPaginated.js

@@ -0,0 +1,73 @@
+import React, {useState, useEffect} from 'react';
+import {useParams} from 'react-router-dom';
+import BackButton from '../../bootstrapBackButton/BootstrapBackButton'
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator'
+import * as ReactBootStrap from 'react-bootstrap';
+import axios from 'axios';
+
+const UserTasksPaginated = () => {
+    let [userTasks, setUserTasks] = useState([]);
+    let [loading, setLoading] = useState(false);
+    let {userId} = useParams();
+
+    const columns = [
+        {dataField: "taskId", text: "Task ID"},
+        {dataField: "title", text: "Task"},
+        {dataField: "description", text: "Description"},
+        {dataField: "createdDate", text: "Date Created"},
+        {dataField: "dueDate", text: "Due Date"},
+        {dataField: "completed", text: "Is Complete"},
+        {dataField: "completedDate", text: "Date Completed"}
+    ]
+
+    // TODO:
+    // Add options to delete a task
+    // sort of present in original UserTasks.js but didn't really work
+
+    const getData = async (userId)=>{
+        try{
+            /*
+             * I wanted to use the fetchTableState from ../../utils
+             * But it just returned the data in a really unhelpful way with an incorrect
+             * "title" and "subtitle" tacked onto the front  
+             */
+            const data = await axios.get(
+                `https://nsc-fun-dev-usw2-thursday.azurewebsites.net/api/users/${userId}/tasks`
+            );
+            console.log(data);
+            setUserTasks(data.data);
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    useEffect(() => {
+        getData(userId);
+        setLoading(true);
+    }, [userId]);
+
+    // TODO:
+    // Table spacing is bad in narrow windows
+
+    return (
+        <div className="pagination">
+            <div><BackButton /></div>
+            {loading
+                ?(
+                    <div className="table-wrapper">
+                        <BootstrapTable
+                            rowStyle = {{backgroundColor: 'white'}}
+                            className="table"
+                            keyField="taskId"
+                            data={userTasks}
+                            columns={columns}
+                            pagination={paginationFactory()}
+                        />
+                    </div>
+                ): (<ReactBootStrap.Spinner animation="border" />)}
+        </div>
+    )
+}
+
+export default UserTasksPaginated;