Changeset 79a0317 for imaps-frontend/src/pages/MyMaps/MyMaps.jsx

Timestamp:

01/21/25 03:08:24 (2 weeks ago)

Author:

stefan toskovski <stefantoska84@…>

Branches:

main

Parents:

0c6b92a

Message:

F4 Finalna Verzija

File:

• imaps-frontend/src/pages/MyMaps/MyMaps.jsx (modified) (13 diffs)

imaps-frontend/src/pages/MyMaps/MyMaps.jsx

@@ -10 +10 @@
 import {useAppContext} from "../../components/AppContext/AppContext.jsx";
 import config from "../../scripts/net/netconfig.js";
-import {element} from "prop-types";
 import Toast from "../../components/Toast/Toast.jsx";
+import plus_icon from "../../assets/plus_icon.png";
 
 const renderTile = ({data, isDragging}, openMapInfo) => (
@@ -65 +65 @@
         setToastMessage(message);
         setToastType(type);
-        setTimeout(() => setToastMessage(null), 3000); // Automatically hide the toast after 3 seconds
-    };
-
+        setTimeout(() => setToastMessage(null), 3000);
+    };
 
     const handleUpdate = async (updatedMap) => {
-        // Placeholder for map update logic
+        try {
+            let httpService = new HttpService(true);
+            const response = await httpService.post(
+                config.my_maps.edit_map_info,
+                updatedMap
+            );
+            closeMapInfoModal()
+            window.location.reload();
+
+        } catch (error) {
+            showToast("Map Name already taken", 0)
+            closeMapInfoModal()
+        }
     };
 
@@ -83 +94 @@
                 setTiles((prevTiles) => prevTiles.filter((tile) => tile.mapName !== mapName));
                 setAllTiles((prevTiles) => prevTiles.filter((tile) => tile.mapName !== mapName));
-                showToast("Map deleted", 1)
+                showToast("Map deleted", 1);
             })
             .catch((error) => {
                 const errorMessage = error.response?.data?.error || error.message || "Unknown error";
-                // alert(`Error deleting the map: ${errorMessage}`);
-                showToast(`Error deleting the map: ${errorMessage}`, 0)
+                showToast(`Error deleting the map: ${errorMessage}`, 0);
             });
     };
@@ -97 +107 @@
 
         httpService
-            .put(`${config.my_maps.add}?username=${username}`, mapDetails)
+            .put(`${config.my_maps.add}?username=${encodeURI(username)}`, mapDetails)
             .then((respMap) => {
-                console.log("RESP NEW MAP: " + respMap)
                 const mapTile = {
                     mapName: respMap.mapName,
@@ -108 +117 @@
                     modified_at: respMap.modifiedAt,
                     published_at: respMap.published_at,
-                    gmaps_url: respMap.gmaps_url,
+                    gmaps_url: respMap.gmapsUrl,
                     image_url: card,
                     is_published: respMap.is_published,
+                    mapType: respMap.mapType
                 };
 
@@ -116 +126 @@
                 setTiles((prevTiles) => [...prevTiles, mapTile]);
                 showToast("Map added successfully!");
-
-
             })
             .catch((error) => {
-                showToast("Map name already taken", 0)
+                showToast("Map name already taken", 0);
             });
     };
@@ -129 +137 @@
             httpService.setAuthenticated();
 
-            const respMaps = await httpService.get(`${config.my_maps.display}?username=${username}`);
+            const respMaps = await httpService.get(
+                `${config.my_maps.display}?username=${encodeURI(username)}`
+            );
 
             const mapTiles = respMaps.map((elem) => ({
@@ -139 +149 @@
                 modified_at: elem.modifiedAt,
                 published_at: elem.published_at,
-                gmaps_url: elem.gMapsUrl,
+                gmaps_url: elem.gmapsUrl,
                 image_url: card,
                 numFavourites: elem.numFavourites,
             }));
-
 
             setTiles(mapTiles);
@@ -154 +163 @@
         setPublicMaps(tiles.filter((tile) => tile.status === "PUBLIC"));
         setPrivateMaps(tiles.filter((tile) => tile.status === "PRIVATE"));
-        setPendingMaps(tiles.filter((tile) => tile.status === "INVALID"));
+        setPendingMaps(tiles.filter((tile) => tile.status === "PENDING"));
     }, [tiles]);
 
@@ -164 +173 @@
     return (
         <div className={styles.container}>
-            <Logo/>
-            <Profile/>
+
+            <div className={`${styles.logoWrapper}`}>
+                <Logo/>
+            </div>
             <h1>Your Maps</h1>
-
-            <div className={styles.actionButtons}>
-                <button className={styles.createMapsButton} onClick={openCreateModal}>
-                    Create Map
-                </button>
-            </div>
+            <div className={`${styles.profileWrapper}`}>
+                <Profile/>
+            </div>
+
 
             <div className={styles.searchBar}>
-                <input type="text" placeholder="Search for maps..." onChange={handleSearch}/>
+                <input
+                    type="text"
+                    placeholder="Search for maps..."
+                    onChange={handleSearch}
+                />
             </div>
 
@@ -201 +214 @@
                         forceTileHeight={170}
                     />
+                    <button className={styles.plusButton} onClick={openCreateModal}>
+                        <img src={plus_icon} alt="Add Map"/>
+                    </button>
                 </div>
 
@@ -222 +238 @@
                 onDelete={deleteMap}
                 onUpdate={handleUpdate}
-                onPublish={() => {
+                onPublish={(updatedMap = null) => {
+
+                    const updatedTile = {
+                        mapName: updatedMap.mapName,
+                        cols: 1,
+                        rows: 1,
+                        status: updatedMap.mapStatus,
+                        created_at: updatedMap.createdAt,
+                        modified_at: updatedMap.modifiedAt,
+                        published_at: updatedMap.published_at,
+                        gmaps_url: updatedMap.gMapsUrl,
+                        image_url: card,
+                        numFavourites: updatedMap.numFavourites,
+                    }
                     showToast(`Map ${selectedMap.mapName} published successfully!`);
                     setPrivateMaps((prevMaps) => prevMaps.filter(m => m.mapName !== selectedMap.mapName))
-                    setPendingMaps((prevMaps) => [...prevMaps,allTiles.find(m => m.mapName = selectedMap.mapName)])
+                    setPendingMaps((prevMaps) => [...prevMaps, updatedTile])
                     closeMapInfoModal()
                 }}
@@ -236 +265 @@
             />
 
-            {toastMessage && <Toast message={toastMessage} type={toastType} onClose={() => setToastMessage(null)}/>}
+            {toastMessage && (
+                <Toast
+                    message={toastMessage}
+                    type={toastType}
+                    onClose={() => setToastMessage(null)}
+                />
+            )}
         </div>
     );