Working on adapting maps frontend. Finished the time selector to change the time interval.

1 files changed, 129 insertions, 0 deletions

diff --git a/maps-frontend/src/components/CheckinList.js b/maps-frontend/src/components/CheckinList.js
new file mode 100644
index 0000000..189ed8b
--- /dev/null
+++ b/maps-frontend/src/components/CheckinList.js
@@ -0,0 +1,129 @@
+// React and component imports
+import axios from 'axios';
+import { useEffect, useState } from "react";
+import UserCheckin from './UserCheckin.js';
+
+// CSS import
+import '../css/UserCheckin.css';
+
+/**
+ * Component that build the checkin list and displays checkin info.
+ * @returns {import('react').HtmlHTMLAttributes} A div with the checkins 
+ * in a vertical layout.
+ */
+function CheckinList() {
+    // States...
+    const [checkins, setCheckins] = useState({});
+    const [checkinItems, setCheckinItems] = useState([]);
+    const [showAllCheckins, setShowAllCheckins] = useState(true);
+    const [userInfo, setUserInfo] = useState([]);
+    const [userCoords, setUserCoords] = useState([]);
+
+    /**
+     * Makes a call to the server to get the newer checkin data.
+     */
+    function getNewCheckins() {
+        let config = {
+            headers: {
+                "Content-Type": "application/json",
+                'Access-Control-Allow-Origin': '*',
+            }
+        }
+        
+        axios.get(
+        "http://localhost:4567/maps/checkins", 
+        config
+        ).then((res) => {
+            setCheckins((prev) => {
+                return Object.assign(prev, res.data['checkins']);
+            });
+        });
+        updateCheckinItems();
+    }
+
+    /**
+     * Gives all the checkins for a specific user.
+     * @param {String} id The user id to get the checkins for.
+     * @param {String} name The name to get the checkins for.
+     */
+    function getUserCheckins(id, name) {
+        const toSend = {
+            userid : id,
+        };
+        let config = {
+            headers: {
+              "Content-Type": "application/json",
+              'Access-Control-Allow-Origin': '*',
+            }
+        }
+      
+        axios.post(
+            "http://localhost:4567/maps/checkins", 
+            JSON.stringify(toSend),
+            config
+        )
+        .then(res => {
+            setUserCoords(res.data['checkins']);
+        })
+        setUserInfo([name, id]);
+        setShowAllCheckins(false);
+    }
+
+    /**
+     * Generates the user checkins html elements.
+     * @returns A div holding a list of all checkins for a user.
+     */
+    function getUserCheckinElements() {
+        const coords = userCoords.map((coord, index) =>
+            <li key={index}>
+                <span>{'('+coord[0].toFixed(6)}, {coord[1].toFixed(6)+')'}</span>
+            </li>
+        );
+        return (
+            <div className="Chosen-user" hidden={showAllCheckins}>
+                <h2>
+                    <span onClick={() => setShowAllCheckins(true)}><img className="Img-btn" src="/round_arrow_back_white_18dp.png" alt="image"/></span>
+                    {userInfo[0]} : {userInfo[1]} 
+                </h2>
+                <div className='Coord-ex'>{"(lat , lon)"}</div>
+                <ol className='User-checkin-list'>
+                    {coords}
+                </ol>
+            </div>
+        );
+    }
+
+    /**
+     * Loads new the checkins into the current cache/map of checkins.
+     */
+    const updateCheckinItems = () => {
+        let tempCheckinItems = [];
+        const sortedCheckinEntries = Object.entries(checkins).sort((a, b) => b[0] - a[0]);
+        for (const [key, value] of sortedCheckinEntries) {
+          tempCheckinItems.push(
+            <UserCheckin key={key} value={value} getUserCheckins={getUserCheckins}></UserCheckin>
+          );
+        }
+        setCheckinItems(tempCheckinItems);
+    }
+
+    // React hook that queries the checkin database every 5 seconds.
+    useEffect(() => {
+        const interval = setInterval(() => {
+            getNewCheckins();
+        }, 5000);
+        return () => clearInterval(interval);
+    }, []);
+
+    return (
+        <div className="User-checkin">
+            <div className="Checkins">
+                <h2>Checkins</h2>
+                <ul className='Checkin-list'>{checkinItems}</ul>
+            </div>
+            {getUserCheckinElements()}
+        </div>
+    );
+}
+
+export default CheckinList;
\ No newline at end of file