Fix type & lint errors and refactor

orcasound · Sep 9, 2024 · 6d5a835 · 6d5a835
1 parent b0c7c65
commit 6d5a835
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 9 deletions.
diff --git a/ui/src/components/layouts/MapLayout.tsx b/ui/src/components/layouts/MapLayout.tsx
@@ -22,6 +22,8 @@ const feedFromSlug = (feedSlug: string) => ({
  name: feedSlug,
  slug: feedSlug,
  nodeName: feedSlug,
+ // TODO: pass in bucket from dynamic feed instead of env/hardcoding
+ bucket: process.env.NEXT_PUBLIC_S3_BUCKET ?? "audio-orcasound-net",
  // TODO: figure out which coordinates to use for dynamic feeds
  latLng: { lat: 47.6, lng: -122.3 },
 });

diff --git a/ui/src/graphql/generated/index.ts b/ui/src/graphql/generated/index.ts
@@ -1908,6 +1908,7 @@ export type CandidateQuery = {
  slug: string;
  name: string;
  nodeName: string;
+ bucket: string;
  };
  detections: Array<{
  __typename?: "Detection";
@@ -1955,6 +1956,7 @@ export type FeedQuery = {
  thumbUrl?: string | null;
  imageUrl?: string | null;
  mapUrl?: string | null;
+ bucket: string;
  latLng: { __typename?: "LatLng"; lat: number; lng: number };
  };
 };
@@ -2623,6 +2625,7 @@ export const CandidateDocument = `
  slug
  name
  nodeName
+ bucket
  }
  detections {
  id
@@ -2740,6 +2743,7 @@ export const FeedDocument = `
  thumbUrl
  imageUrl
  mapUrl
+ bucket
  }
 }
  `;

diff --git a/ui/src/graphql/queries/getCandidate.graphql b/ui/src/graphql/queries/getCandidate.graphql
@@ -11,6 +11,7 @@ query candidate($id: ID!) {
  slug
  name
  nodeName
+ bucket
  }
  detections {
  id

diff --git a/ui/src/graphql/queries/getFeed.graphql b/ui/src/graphql/queries/getFeed.graphql
@@ -12,5 +12,6 @@ query feed($slug: String!) {
  thumbUrl
  imageUrl
  mapUrl
+ bucket
  }
 }
diff --git a/ui/src/hooks/useTimestampFetcher.ts b/ui/src/hooks/useTimestampFetcher.ts
@@ -3,15 +3,17 @@ import { useEffect, useState } from "react";
 if (!process.env.NEXT_PUBLIC_S3_BUCKET) {
  throw new Error("NEXT_PUBLIC_S3_BUCKET is not set");
 }
-const S3_BUCKET = process.env.NEXT_PUBLIC_S3_BUCKET;
 
-const bucketBase = (bucket: string) => `https://${bucket}.s3.amazonaws.com`;
+const getBucketBase = (bucket: string) => `https://${bucket}.s3.amazonaws.com`;
+
+const getTimestampURI = (bucket: string, nodeName: string) =>
+ `${getBucketBase(bucket)}/${nodeName}/latest.txt`;
 
 export const getHlsURI = (
  bucket: string,
  nodeName: string,
  timestamp: number,
-) => `${bucketBase(bucket)}/${nodeName}/hls/${timestamp}/live.m3u8`;
+) => `${getBucketBase(bucket)}/${nodeName}/hls/${timestamp}/live.m3u8`;
 
 /**
  * @typedef {Object} TimestampFetcherOptions
@@ -34,16 +36,14 @@ export const getHlsURI = (
  * @returns {TimestampFetcherResult} The latest timestamp, HLS URI, and AWS console URI
  */
 export function useTimestampFetcher(
- bucket?: string,
+ bucket: string,
  nodeName?: string,
  { onStart, onStop }: { onStart?: () => void; onStop?: () => void } = {},
 ) {
  const [timestamp, setTimestamp] = useState<number>();
 
  const hlsURI =
- nodeName && timestamp
- ? getHlsURI(bucket ?? S3_BUCKET, nodeName, timestamp)
- : undefined;
+ nodeName && timestamp ? getHlsURI(bucket, nodeName, timestamp) : undefined;
  const awsConsoleUri =
  nodeName && timestamp
  ? `https://s3.console.aws.amazon.com/s3/buckets/${bucket}/${nodeName}/hls/${timestamp}/`
@@ -54,7 +54,7 @@ export function useTimestampFetcher(
  let intervalId: NodeJS.Timeout | undefined;
 
  const fetchTimestamp = (feed: string) => {
- const timestampURI = `${bucketBase(bucket ?? S3_BUCKET)}/${feed}/latest.txt`;
+ const timestampURI = getTimestampURI(bucket, feed);
 
  const xhr = new XMLHttpRequest();
  currentXhr = xhr;
@@ -90,7 +90,7 @@ export function useTimestampFetcher(
  stopFetcher();
  onStop?.();
  };
- }, [nodeName, onStart, onStop]);
+ }, [nodeName, onStart, onStop, bucket]);
 
  return { timestamp, hlsURI, awsConsoleUri };
 }