Redirect to bout show page on create

orcasound · Jan 29, 2025 · 1d12fe6 · 1d12fe6
1 parent f158ea3
commit 1d12fe6
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/ui/src/components/Bouts/BoutPage.tsx b/ui/src/components/Bouts/BoutPage.tsx
@@ -33,13 +33,15 @@ import Typography from "@mui/material/Typography";
 import {
   addMinutes,
   format,
+  max,
   min,
   roundToNearestMinutes,
   subDays,
   subMinutes,
 } from "date-fns";
 import _ from "lodash";
 import Image from "next/legacy/image";
+import { useRouter } from "next/router";
 import { useCallback, useMemo, useRef, useState } from "react";
 
 import SpectrogramTimeline, {
@@ -61,6 +63,8 @@ import wavesIconImage from "@/public/icons/water-waves-blue.svg";
 import whaleFlukeIconImage from "@/public/icons/whale-fluke-gray.svg";
 import { formatTimestamp } from "@/utils/time";
 
+const log = _.throttle(console.log, 5000);
+
 export default function BoutPage({
   isNew,
   feed,
@@ -74,6 +78,7 @@ export default function BoutPage({
   targetTime?: Date;
   bout?: BoutQuery["bout"];
 }) {
+  const router = useRouter();
   const now = useMemo(() => new Date(), []);
   targetTime =
     targetTime ?? (bout?.startTime && new Date(bout.startTime)) ?? now;
@@ -106,7 +111,7 @@ export default function BoutPage({
 
   const timeBuffer = 15; // minutes
   const targetTimePlusBuffer = roundToNearestMinutes(
-    min([targetTime, addMinutes(targetTime, timeBuffer)]),
+    min([now, max([targetTime, addMinutes(targetTime, timeBuffer)])]),
     { roundingMethod: "ceil" },
   );
   const targetTimeMinusBuffer = roundToNearestMinutes(
@@ -152,14 +157,15 @@ export default function BoutPage({
     () => feedStreams.flatMap(({ feedSegments }) => feedSegments),
     [feedStreams],
   );
+
   const detections = detectionQueryResult.data?.detections?.results ?? [];
   const [boutForm, setBoutForm] = useState<{
     errors: Record<string, string>;
   }>({
     errors: {},
   });
   const createBoutMutation = useCreateBoutMutation({
-    onSuccess: ({ createBout: { errors } }) => {
+    onSuccess: ({ createBout: { errors, result } }) => {
       if (errors && errors.length > 0) {
         console.error(errors);
         setBoutForm((form) => ({
@@ -171,9 +177,12 @@ export default function BoutPage({
             ),
           },
         }));
+      } else if (result) {
+        router.push(`/bouts/${result.id}`);
       }
     },
   });
+
   const updateBoutMutation = useUpdateBoutMutation({
     onSuccess: ({ updateBout: { errors } }) => {
       if (errors && errors.length > 0) {
@@ -195,6 +204,7 @@ export default function BoutPage({
       }
     },
   });
+
   const saveBout = () => {
     setBoutForm((form) => ({ ...form, errors: {} }));
     if (audioCategory && boutStartTime) {
@@ -429,7 +439,7 @@ export default function BoutPage({
                   onChange={(event) =>
                     setAudioCategory(event.target.value as AudioCategory)
                   }
-                  label="Audio category"
+                  label="Category"
                   sx={{ minWidth: 200 }}
                   size="small"
                 >

diff --git a/ui/src/graphql/queries/listFeedStreams.graphql b/ui/src/graphql/queries/listFeedStreams.graphql
@@ -31,7 +31,7 @@ query listFeedStreams(
           ]
           endTime: { greaterThanOrEqual: $fromDateTime }
         }
-        sort: { field: START_TIME, order: DESC }
+        sort: { field: START_TIME, order: ASC }
       ) {
         ...FeedSegmentParts
         audioImages(filter: { status: { eq: "complete" } }) {