Add user location marker to brewery map, Add beer sec. for brewery posts

src/hooks/useBeerPostsByBrewery.ts

@@ -0,0 +1,69 @@
+import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import useSWRInfinite from 'swr/infinite';
+import { z } from 'zod';
+
+interface UseBeerPostsByBreweryParams {
+  pageSize: number;
+  breweryId: string;
+}
+
+/**
+ * A custom hook using SWR to fetch beer posts from the API.
+ *
+ * @param options The options to use when fetching beer posts.
+ * @param options.pageSize The number of beer posts to fetch per page.
+ * @param options.breweryId The ID of the brewery to fetch beer posts for.
+ * @returns An object containing the beer posts, page count, and loading state.
+ */
+const UseBeerPostsByBrewery = ({ pageSize, breweryId }: UseBeerPostsByBreweryParams) => {
+  const fetcher = async (url: string) => {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+
+    const json = await response.json();
+    const count = response.headers.get('X-Total-Count');
+
+    const parsed = APIResponseValidationSchema.safeParse(json);
+    if (!parsed.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const parsedPayload = z.array(beerPostQueryResult).safeParse(parsed.data.payload);
+    if (!parsedPayload.success) {
+      throw new Error('API response validation failed');
+    }
+
+    const pageCount = Math.ceil(parseInt(count as string, 10) / pageSize);
+    return {
+      beerPosts: parsedPayload.data,
+      pageCount,
+    };
+  };
+
+  const { data, error, isLoading, setSize, size } = useSWRInfinite(
+    (index) =>
+      `/api/breweries/${breweryId}/beers?page_num=${index + 1}&page_size=${pageSize}`,
+    fetcher,
+  );
+
+  const beerPosts = data?.flatMap((d) => d.beerPosts) ?? [];
+  const pageCount = data?.[0].pageCount ?? 0;
+  const isLoadingMore = size > 0 && data && typeof data[size - 1] === 'undefined';
+  const isAtEnd = !(size < data?.[0].pageCount!);
+
+  return {
+    beerPosts,
+    pageCount,
+    size,
+    setSize,
+    isLoading,
+    isLoadingMore,
+    isAtEnd,
+    error: error as unknown,
+  };
+};
+
+export default UseBeerPostsByBrewery;

src/hooks/useGeolocation.ts

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * A custom React Hook that retrieves and monitors the user's geolocation using the
+ * browser's built-in `navigator.geolocation` API.
+ *
+ * @returns An object containing the user's geolocation information and any errors that
+ *   might occur. The object has the following properties:
+ *
+ *   - `coords` - The user's current geolocation coordinates, or null if the geolocation could
+ *       not be retrieved.
+ *   - `timestamp` - The timestamp when the user's geolocation was last updated, or null if
+ *       the geolocation could not be retrieved.
+ *   - `error` - Any error that might occur while retrieving or monitoring the user's
+ *       geolocation, or null if there are no errors.
+ */
+const useGeolocation = () => {
+  const [state, setState] = useState<{
+    coords: GeolocationCoordinates | null;
+    timestamp: number | null;
+  }>({
+    coords: null,
+    timestamp: null,
+  });
+
+  const [error, setError] = useState<GeolocationPositionError | null>(null);
+
+  // Set up the event listeners for the geolocation updates
+  useEffect(() => {
+    /**
+     * Callback function for successful geolocation update.
+     *
+     * @param position - The geolocation position object.
+     */
+    const onEvent = (position: GeolocationPosition) => {
+      const { coords, timestamp } = position;
+      setError(null);
+      setState({ coords, timestamp });
+    };
+
+    /**
+     * Callback function for geolocation error.
+     *
+     * @param geoError - The geolocation error object.
+     */
+    const onError = (geoError: GeolocationPositionError) => {
+      setError(geoError);
+    };
+
+    // Get the current geolocation
+    navigator.geolocation.getCurrentPosition(onEvent, onError);
+
+    // Monitor any changes in the geolocation
+    const watchId = navigator.geolocation.watchPosition(onEvent, onError);
+
+    // Clean up the event listeners when the component unmounts
+    return () => {
+      navigator.geolocation.clearWatch(watchId);
+    };
+  }, []);
+
+  // Return the geolocation information and any errors as an object
+  return { coords: state.coords, timestamp: state.timestamp, error };
+};
+
+export default useGeolocation;