Changeset 0c6b92a for imaps-frontend/src/components/FilterBar

Timestamp:

12/12/24 17:06:06 (5 weeks ago)

Author:

stefan toskovski <stefantoska84@…>

Branches:

main

Parents:

d565449

Message:

Pred finalna verzija

File:

• imaps-frontend/src/components/FilterBar/FilterBar.jsx (modified) (2 diffs)

imaps-frontend/src/components/FilterBar/FilterBar.jsx

@@ -1 @@
-import React from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import styles from "./FilterBar.module.css";
 
-function FilterBar() {
-  const filterLocation = (category) => {
-    console.log(`Filter locations by: ${category}`);
-    // filtering logic
-  };
+export default function FilterBar({roomTypes,map}) {
+  const [selectedCategory, setSelectedCategory] = useState("all");
+
+
+
+  const filterLocation = useCallback((category) => {
+    map.setFilter(category)
+    setSelectedCategory(category);
+  },[])
 
   return (
     <div className={styles.wrapper}>
       <div className={styles.scrollableContainer}>
-        <button className={styles.buttonValue} onClick={() => filterLocation("all")}>
+        <button
+          className={`${styles.buttonValue} ${selectedCategory === "all" ? styles.active : ""}`}
+          onClick={() => filterLocation("all")}
+        >
           All
         </button>
-        <button className={styles.buttonValue} onClick={() => filterLocation("Classrooms")}>
-          Classrooms
-        </button>
-        <button className={styles.buttonValue} onClick={() => filterLocation("Administrative")}>
-          Administrative
-        </button>
-        <button className={styles.buttonValue} onClick={() => filterLocation("Labs")}>
-          Labs
-        </button>
-        <button className={styles.buttonValue} onClick={() => filterLocation("Restrooms")}>
-          Restrooms
-        </button>
-        <button className={styles.buttonValue} onClick={() => filterLocation("Cafeteria")}>
-          Cafeteria
-        </button>
+
+        {roomTypes?.map((roomType, index) => (
+          <button
+            key={index}
+            className={`${styles.buttonValue} ${selectedCategory === roomType.name ? styles.active : ""}`}
+            onClick={() => filterLocation(roomType.name)}
+          >
+            {roomType.name}
+          </button>
+        ))}
       </div>
     </div>
@@ -34 +36 @@
 }
 
-export default FilterBar;