APIs for search, route, and stop

index.html

@@ -17,11 +17,7 @@
             crossorigin="anonymous"
             href="https://fonts.gstatic.com"
     />
-    <link
-            crossorigin="anonymous"
-            href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap"
-            rel="stylesheet"
-    />
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
 
     <link
             href="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css"

package.json

@@ -11,6 +11,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.7.3",
+    "classnames": "^2.5.1",
+    "lodash": "^4.17.21",
     "mapbox-gl": "^2.15.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/bottom_tray.jsx

@@ -0,0 +1,153 @@
+import React from "react";
+import classNames from "classnames";
+
+const COLLAPSED_HEIGHT = 200;
+
+const getCoordinatesFromEvent = (e) => {
+    let [x, y] = [0, 0];
+    if (e.clientX) {
+      x = e.clientX;
+      y = e.clientY;
+    } else if (e.touches) {
+      x = e.touches[0].clientX;
+      y = e.touches[0].clientY;
+    }
+    return [x, y];
+  };
+
+class BottomTray extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+          x: null,
+          y: null,
+          move: 0,
+          resized: 0,
+          bodyHeight: null,
+        };
+        this.mouseTime = 0;
+        this.secondInterval = null;
+    }
+
+    componentDidMount() {
+        (window.visualViewport || window).addEventListener("resize", this.onResize);
+        this.onResize();
+        window.addEventListener("mousemove", this.onPointerMove, { passive: true });
+        window.addEventListener("touchmove", this.onPointerMove, { passive: true });
+        window.addEventListener("mouseup", this.onPointerUp, { passive: true });
+        window.addEventListener("touchend", this.onPointerUp, { passive: true });
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.secondInterval);
+        (window.visualViewport || window).removeEventListener("resize", this.onResize);
+        window.removeEventListener("mousemove", this.onPointerMove, {
+          passive: true,
+        });
+        window.removeEventListener("touchmove", this.onPointerMove, {
+          passive: true,
+        });
+        window.removeEventListener("mouseup", this.onPointerUp, { passive: true });
+        window.removeEventListener("touchend", this.onPointerUp, { passive: true });
+    }
+
+      componentDidUpdate(prevProps) {
+        const { bodyHeight: newBodyHeight } = this.props;
+        const { bodyHeight } = prevProps;
+        const { move } = this.state;
+
+        // Handle resize for bottom tray sizing
+        const delta = bodyHeight ? newBodyHeight - bodyHeight : 0;
+        this.setState({
+          move: move < -COLLAPSED_HEIGHT ? move - delta : move,
+        });
+
+    }
+
+    onPointerDown = (e) => {
+        if (window.innerWidth > 999) {
+          return;
+        }
+        const [x, y] = getCoordinatesFromEvent(e);
+        this.mouseTime = performance.now();
+        this.setState({ x, y });
+    };
+
+    onPointerMove = (e) => {
+        e.stopPropagation();
+        if (this.state.x === null) {
+          return;
+        }
+        const [x, y] = getCoordinatesFromEvent(e);
+        this.setState(({ move }) => ({
+            move: Math.max(
+                move + y - this.state.y,
+                -window.innerHeight + COLLAPSED_HEIGHT,
+            ),
+            y,
+        }));
+    };
+
+    onPointerUp = () => {
+        if (this.state.x === null) {
+            return;
+        }
+        this.setState({
+          x: null,
+          y: null,
+        });
+        if (this.state.move < -COLLAPSED_HEIGHT - 50) {
+          // Touch moved up by a significant value above the midway height
+          this.setState({
+            move: -window.innerHeight + COLLAPSED_HEIGHT,
+          });
+        }
+        else {
+          // Touch moved up but not significant
+          this.setState({
+            move: 0,
+          });
+        }
+    };
+
+    onResize = () => {
+        this.setState({
+            bodyHeight: window.visualViewport?.height || window.innerHeight,
+        });
+    };
+    render() {
+        const {
+            children,
+            headerContent,
+          } = this.props;
+          const { move, bodyHeight } = this.state;
+          return (
+            <div
+                id="bottom-tray"
+                style={{
+                    top: `${bodyHeight - COLLAPSED_HEIGHT + move}px`,
+                    height: `${
+                        -move + COLLAPSED_HEIGHT
+                    }px`,
+                }}
+                className={classNames({
+                    "sharp-corners": move < -COLLAPSED_HEIGHT,
+                })}
+            >
+                <div id="bottom-tray-drag-indicator" />
+                <div
+                    id="bottom-tray-header"
+                    onMouseDown={this.onPointerDown}
+                    onTouchStart={this.onPointerDown}
+                >
+                    { headerContent }
+                </div>
+                <div id="bottom-tray-content">
+                    { children }
+                </div>
+            </div>
+          )
+    }
+};
+
+export default BottomTray;

src/components/circle_loader.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+const CircleLoader = ({ text }) => {
+    return (
+        <div className="circle-loader-wrapper">
+            <div className="circle-loader"></div>{ text || "Loading..." }
+        </div>
+    );
+};
+
+export const CircleLoaderBlock = ({ text }) => {
+    return (
+        <div className="circle-loader-block">
+            <CircleLoader
+                text={text}
+            />
+        </div>
+    );
+}
+
+export default CircleLoader;

src/components/history_list.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+const HistoryList = () => {
+
+    return "";
+};
+
+export default HistoryList;

src/components/page_back_button.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Link, useLocation } from "react-router-dom";
+import {Icon} from "@iconify/react/dist/iconify.js";
+import { ROUTES } from "../utils/constants";
+
+const PageBackButton = () => {
+    const location = useLocation();
+    // console.log(location.state);
+    const onBackClick = () => {
+        if(!!location.state) {
+            window.history.back();
+        }
+    };
+
+    return (
+        <Link id="page-back" to={!!location.state ? "" : ROUTES.home} onClick={onBackClick}>
+            <Icon icon="mdi:arrow-back" color="#222222" width="24" height="24" />
+        </Link>
+    );
+};
+
+export default PageBackButton;

src/favourites/index.jsx

@@ -1,38 +1,25 @@
-import React from "react";
+import React, { useState } from "react";
+import _ from "lodash";
 import {Icon} from "@iconify/react/dist/iconify.js";
 import SearchResultItem from "../search/search_result_item";
-import {ROUTES, SEARCH_RESULT_TYPES} from "../utils/constants.js";
+import {MAX_HISTORY_LENGTH, ROUTES} from "../utils/constants.js";
 import {Link} from "react-router-dom";
 
-const FAVOURITES = [
-  {
-    type: SEARCH_RESULT_TYPES.location,
-    text: "Mayur Paradise",
-    favourite: true,
-  },
-  {
-    type: SEARCH_RESULT_TYPES.bus_stop,
-    text: "Tippasandra Market Bus Stop",
-    favourite: true,
-  },
-  {
-    type: SEARCH_RESULT_TYPES.metro_station_purple,
-    text: "Nadaprabhu Kempegowda Metro Station, Majestic",
-    favourite: true,
-  },
-  {
-    type: SEARCH_RESULT_TYPES.bus_number,
-    text: "314",
-    favourite: true,
-  },
-  {
-    type: SEARCH_RESULT_TYPES.bus_number,
-    text: "333G",
-    favourite: true,
-  },
-];
-
 const FavouritesPage = () => {
+  const [favourites, setFavouritesItems] = useState(
+      JSON.parse(localStorage.getItem("bpt_favourites") || "[]")
+  );
+
+  const removeFromFavourites = (e, info) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    const { id, type } = info;
+    const newFavourites = _.filter(favourites, f => !(f.id === id && f.type === type));
+    setFavouritesItems(newFavourites);
+    localStorage.setItem("bpt_favourites", JSON.stringify(newFavourites));
+  }
+
   return (
     <>
       <div id="page-header">
@@ -47,7 +34,19 @@ const FavouritesPage = () => {
       </div>
       <div id="search-results">
         {
-          FAVOURITES.map(i => <SearchResultItem key={i.text} info={i} />)
+          _.size(favourites) > 0 ? (
+            favourites.map(i => (
+              <SearchResultItem
+                isFavourite
+                key={`${i.id}-${i.text}`}
+                info={i}
+                linkState={{ from: ROUTES.favourites }}
+                onFavouriteClick={removeFromFavourites}
+              />
+            ))
+          ) : (
+            "You do not have any favourites added"
+          )
         }
       </div>
     </>