completed filtering logic

Author: zion-off

README.md

@@ -83,6 +83,10 @@ const ratioToColor = useCallback((advertised: number, download: number) => {
 }, []);
 ```
 
+#### Clustering
+
+The markers are clustered using the `react-google-maps` library. The `MarkerClusterer` component groups the markers based on the zoom level of the map.
+
 ### Filtering
 
 Dropdown to filter results by ISP.
@@ -94,9 +98,7 @@ for:
 
 - ISP
 - Advertised speed
-- Reported speed
-
-Speed measured and reported using Speedtest.net API.
+- Reported speed (download and upload)
 
 ## Hero section
 

app/page.tsx

@@ -5,7 +5,7 @@ import Grid from "@/components/wrapper/Grid";
 export default function Home() {
   return (
     <main className="flex flex-col items-center">
-      {/* <GlobeDemo />
+      <GlobeDemo />
       <div
         className="h-screen w-full py-5 flex items-center"
         style={{
@@ -14,7 +14,7 @@ export default function Home() {
         }}
       >
         <Grid />
-      </div> */}
+      </div>
       <div className="h-screen py-5" id="dashboard">
         <Dashboard />
       </div>

components/ui/search.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useRef, useEffect } from "react";
 import { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu";
 
 import { Button } from "@/components/ui/button";
@@ -13,7 +13,38 @@ import {
 
 type Checked = DropdownMenuCheckboxItemProps["checked"];
 
-const allSuggestions = ["Bell", "Link3", "Amber IT Ltd."];
+const allSuggestions = [
+  "Bell",
+  "Match Net",
+  "Link3 Technologies Ltd.",
+  "Aamra Networks Limited",
+  "ADN Telecom Limited",
+  "Agni Systems Limited",
+  "Amber IT Limited",
+  "Bangladesh Internet Exchange Limited (BIEL)",
+  "BDCom Online Limited",
+  "Brac Net Limited",
+  "Carnival Internet",
+  "Dhakacom Limited",
+  "Dhaka Fiber Net Limited",
+  "Fiber@Home Limited",
+  "Infolink Communications Ltd.",
+  "Kloud Technologies Ltd.",
+  "Mango Teleservices Ltd.",
+  "MetroNet Bangladesh Limited",
+  "National IT Limited",
+  "Nexus Telecom Limited",
+  "Ollo Broadband",
+  "Ranks ITT Limited",
+  "Samonline Limited",
+  "Sheba Phone (Pvt.) Ltd.",
+  "Skytel Communications Ltd.",
+  "Summit Communications Ltd.",
+  "Thakral Information Systems Pvt. Ltd.",
+  "Triangle Services Ltd.",
+  "Unique Infoway Limited",
+  "Wintel Limited",
+];
 
 interface SearchBarProps {
   onSelectionChange: (selected: string[]) => void;
@@ -23,7 +54,22 @@ export default function SearchBar({ onSelectionChange }: SearchBarProps) {
   const [checkedItems, setCheckedItems] = useState<{
     [key: string]: Checked;
   }>({});
+  const [buttonWidth, setButtonWidth] = useState(0);
+  const buttonRef = useRef<HTMLButtonElement>(null);
 
+  const updateButtonWidth = () => {
+    if (buttonRef.current) {
+      setButtonWidth(buttonRef.current.offsetWidth);
+    }
+  };
+
+  useEffect(() => {
+    updateButtonWidth();
+    window.addEventListener("resize", updateButtonWidth);
+    return () => {
+      window.removeEventListener("resize", updateButtonWidth);
+    };
+  }, []);
   useEffect(() => {
     const updatedSelectedNames = Object.keys(checkedItems).filter(
       (key) => checkedItems[key]
@@ -41,9 +87,15 @@ export default function SearchBar({ onSelectionChange }: SearchBarProps) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="default">Filter by ISP</Button>
+        <Button
+          ref={buttonRef}
+          variant="default"
+          className="w-full hover:bg-neutral-700 bg-neutral-800 font-semibold rounded-lg"
+        >
+          Filter by ISP
+        </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56">
+      <DropdownMenuContent className="my-1 max-h-80 overflow-scroll" style={{ width: buttonWidth }}>
         {allSuggestions.map((suggestion) => (
           <DropdownMenuCheckboxItem
             key={suggestion}

components/ui/test.tsx

@@ -183,10 +183,14 @@ function SpeedPointForm({ onSuccess }: { onSuccess: () => void }) {
           variant="ghost"
           className="bg-gray-900 hover:bg-gray-800 text-slate-200 hover:text-slate-200 font-medium"
         >
-          {loading ? <>
-            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-            <span className="animate-pulse">Adding</span>
-          </> : "Add speed point"}
+          {loading ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              <span className="animate-pulse">Adding</span>
+            </>
+          ) : (
+            "Add speed point"
+          )}
         </Button>
 
         <div className="text-gray-300 text-sm">
@@ -216,8 +220,13 @@ function SpeedPointForm({ onSuccess }: { onSuccess: () => void }) {
   );
 }
 
-export function TestForm({open, setOpen}: {open: boolean, setOpen: (open: boolean) => void}) {
-
+export function TestForm({
+  open,
+  setOpen,
+}: {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}) {
   const handleSuccess = () => {
     setOpen(false);
   };
@@ -227,9 +236,9 @@ export function TestForm({open, setOpen}: {open: boolean, setOpen: (open: boolea
       <DialogTrigger asChild>
         <Button
           variant="ghost"
-          className="bg-zinc-700 hover:bg-zinc-600 text-white hover:text-zinc-50 font-medium"
+          className="font-semibold animate-shimmer items-center justify-center rounded-lg border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] px-6 text-slate-400 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 hover:text-white"
         >
-          Report speed
+          Report your speed
         </Button>
       </DialogTrigger>
       <DialogContent className=" bg-white rounded-md">

package-lock.json

@@ -21,6 +21,7 @@
     "clsx": "^2.1.1",
     "crypto": "^1.0.1",
     "firebase": "^10.13.1",
+    "framer-motion": "^11.5.4",
     "lucide-react": "^0.441.0",
     "next": "14.2.11",
     "react": "^18",