3 files changed, 68 insertions, 0 deletions
diff --git a/src/App.jsx b/src/App.jsx
index ca2c07e..61c1300 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,6 +3,7 @@ import { Search } from "./ToDo-UI/Search";
 import { NewToDo } from "./ToDo-UI/NewToDo";
 import { ListToDos } from "./ToDo-UI/ListToDo";
 import { Pagination } from "./ToDo-UI/Pagination";
+import { Average } from "./ToDo-UI/averageTime";
 
 import { useDispatch, useSelector } from "react-redux";
 import {
@@ -27,6 +28,7 @@ function App() {
             <NewToDo />
             <ListToDos />
             <Pagination />
+            <Average />
         </div>
     );
 }
diff --git a/src/ToDo-UI/averageTime.jsx b/src/ToDo-UI/averageTime.jsx
new file mode 100644
index 0000000..688522b
--- /dev/null
+++ b/src/ToDo-UI/averageTime.jsx
@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { get_average_time_function } from "../api/axios_methods";
+
+function write_average_time(prefix, time) {
+    return (
+        <>
+            <p>{prefix}</p>
+            <p>{time}</p>
+        </>
+    );
+}
+
+export function Average() {
+    const get_av_time_api = get_average_time_function();
+
+    const [time_all, set_time_all] = useState("");
+    const [time_low, set_time_low] = useState("");
+    const [time_med, set_time_med] = useState("");
+    const [time_high, set_time_high] = useState("");
+
+    get_av_time_api(set_time_all, "All");
+    get_av_time_api(set_time_low, "Low");
+    get_av_time_api(set_time_med, "Medium");
+    get_av_time_api(set_time_high, "High");
+
+    return (
+        <div
+            className="container mt-3 mb-3"
+            style={{
+                border: "2px solid black",
+                textAlign: "center",
+                padding: "15px",
+            }}
+        >
+            <div className="row">
+                {write_average_time("Average time to finish tasks:", time_all)}
+            </div>
+
+            <div className="row">
+                <div className="col">
+                    {write_average_time("Low Priority:", time_low)}
+                </div>
+                <div className="col">
+                    {write_average_time("Medium Priority:", time_med)}
+                </div>
+                <div className="col">
+                    {write_average_time("High Priority:", time_high)}
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/api/axios_methods.js b/src/api/axios_methods.js
index bea8b79..90e8a03 100644
--- a/src/api/axios_methods.js
+++ b/src/api/axios_methods.js
@@ -149,3 +149,17 @@ export function get_last_id_function() {
         }
     };
 }
+
+// getAverageTime().
+export function get_average_time_function() {
+    // Retrieve the average time to complete the to dos, given a priority.
+    // GET "/todos/average/{priority}"
+    return async (handler, priority) => {
+        try {
+            const response = await api.get(`/todos/average/${priority}`);
+            handler(response.data);
+        } catch (err) {
+            console.log(err);
+        }
+    };
+}