Cleaning up

alveusgg · Nov 15, 2024 · 8ba7d1b · 8ba7d1b
1 parent c2092c2
commit 8ba7d1b
Show file tree

Hide file tree

Showing 15 changed files with 279 additions and 214 deletions.
diff --git a/census/api/src/services/twitch/index.ts b/census/api/src/services/twitch/index.ts
@@ -1,4 +1,4 @@
-import { addHours, addSeconds, differenceInSeconds, isAfter, setMinutes, setSeconds, subMinutes } from 'date-fns';
+import { addHours, addSeconds, differenceInSeconds, isBefore, setMinutes, setSeconds, subMinutes } from 'date-fns';
 import sharp from 'sharp';
 import { useEnvironment } from '../../utils/env/env';
 import { ClipNotFoundResult, ClipNotProcessedResult, VODNotFoundResult } from '../capture';
@@ -20,16 +20,19 @@ export const getClip = async (id: string): Promise<ClipResult> => {
   const { twitch } = useEnvironment();
   const clip = await twitch.clips.getClipById(id);
   if (!clip || !clip.id || !clip.creationDate) return { result: 'error', type: 'clip_not_found' };
-  if (!clip.videoId || !clip.vodOffset) {
-    if (isAfter(clip.creationDate, subMinutes(new Date(), 15))) return { result: 'error', type: 'clip_not_processed' };
+  if ((!clip.videoId || !clip.vodOffset) && isBefore(clip.creationDate, subMinutes(new Date(), 10))) {
     return { result: 'error', type: 'vod_not_found' };
   }
-  const vod = await getVOD(clip.videoId);
 
-  const vodStartDate = new Date(vod.publishedAt);
-  const twitchStartDate = addSeconds(vodStartDate, clip.vodOffset);
+  const estimatedStartDate = await (async () => {
+    if (!clip.videoId || !clip.vodOffset) return clip.creationDate;
+    const vod = await getVOD(clip.videoId);
+    const vodStartDate = new Date(vod.publishedAt);
+    return addSeconds(vodStartDate, clip.vodOffset);
+  })();
+
   const encodedTimestamp = await getEncodedTimestamp(getThumbnailUrl(clip.thumbnailUrl));
-  const startDate = estimateStartDateFromTwitchTimestampAndEncodedTimestamp(twitchStartDate, encodedTimestamp);
+  const startDate = estimateStartDateFromTwitchTimestampAndEncodedTimestamp(estimatedStartDate, encodedTimestamp);
   const endDate = addSeconds(startDate, clip.duration);
 
   const result = {

diff --git a/census/website/src/components/assets/logos/CritterCaptureClubLogo.tsx b/census/website/src/components/assets/logos/CritterCaptureClubLogo.tsx
diff --git a/census/website/src/components/assets/logos/SimpleAlveus.tsx b/census/website/src/components/assets/logos/SimpleAlveus.tsx
@@ -3,7 +3,7 @@ import { FC, SVGAttributes } from 'react';
 export const SimpleAlveus: FC<SVGAttributes<SVGSVGElement>> = ({ ...props }) => {
   return (
     <svg width="24" viewBox="0 0 28 35" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <g clip-path="url(#clip0_456_1363)">
+      <g clipPath="url(#clip0_456_1363)">
         <path
           d="M19.1 27.2398V28.2398C18.2 31.4398 15.88 32.1798 12.08 32.1798C7.99 32.1798 4.59 29.4298 4 25.8598C5.36 25.2398 6.67 24.5398 7.92 23.7698C8.98 23.1198 10.05 22.3798 11.32 22.2198C11.99 22.1298 12.66 22.2098 13.31 22.3898C14.61 22.7498 15.74 23.5298 16.65 24.5298L19.11 27.2398H19.1Z"
           fill="white"

diff --git a/census/website/src/components/forms/Form.tsx b/census/website/src/components/forms/Form.tsx
@@ -3,9 +3,9 @@ import { FC, PropsWithChildren, useCallback } from 'react';
 import { FieldValues, FormProvider, Path, PathValue, SubmitHandler, UseFormReturn } from 'react-hook-form';
 
 export interface FormProps extends Omit<React.HTMLAttributes<HTMLFormElement>, 'onSubmit'> {
-  methods: UseFormReturn<any>;
-  onSubmit: SubmitHandler<any>;
-  onError?: (error: any) => void;
+  methods: UseFormReturn;
+  onSubmit: SubmitHandler<FieldValues>;
+  onError?: (error: unknown) => void;
 }
 
 export const Form: FC<PropsWithChildren<FormProps>> = ({

diff --git a/census/website/src/components/forms/inputs/SelectionInput.tsx b/census/website/src/components/forms/inputs/SelectionInput.tsx
@@ -85,11 +85,12 @@ export const SelectionInput: FC<
             state: 'drawing'
           };
         } finally {
-          if (!pending.current || !pendingBoxRef.current) return;
-          pendingBoxRef.current!.style.opacity = '1';
-          applyBoundingBoxToElement(pendingBoxRef.current, pending.current.boundingBox);
-          e.stopPropagation();
-          e.preventDefault();
+          if (pending.current && pendingBoxRef.current) {
+            pendingBoxRef.current!.style.opacity = '1';
+            applyBoundingBoxToElement(pendingBoxRef.current, pending.current.boundingBox);
+            e.stopPropagation();
+            e.preventDefault();
+          }
         }
       },
       { signal: abortController.signal }
@@ -117,8 +118,9 @@ export const SelectionInput: FC<
           // Otherwise, we are in resize mode.
           pending.current = updateBoxSizeFromMousePosition(box, point.x, point.y);
         } finally {
-          if (!pending.current || !pendingBoxRef.current) return;
-          applyBoundingBoxToElement(pendingBoxRef.current, pending.current.boundingBox);
+          if (pending.current && pendingBoxRef.current) {
+            applyBoundingBoxToElement(pendingBoxRef.current, pending.current.boundingBox);
+          }
         }
       },
       { signal: abortController.signal }
@@ -136,14 +138,17 @@ export const SelectionInput: FC<
           if (!value) return [pending.current!];
           onChange([...value.filter(box => box.boundingBox.id !== pending.current?.boundingBox.id), pending.current]);
         } finally {
-          if (!pending.current || !pendingBoxRef.current) return;
-          const clickedBoxElement = node.querySelector<HTMLDivElement>(`[data-id="${pending.current.boundingBox.id}"]`);
-          if (clickedBoxElement) {
-            clickedBoxElement.style.opacity = '1';
+          if (pending.current && pendingBoxRef.current) {
+            const clickedBoxElement = node.querySelector<HTMLDivElement>(
+              `[data-id="${pending.current.boundingBox.id}"]`
+            );
+            if (clickedBoxElement) {
+              clickedBoxElement.style.opacity = '1';
+            }
+            pendingBoxRef.current!.style.opacity = '0';
+            pending.current = null;
+            applyBoundingBoxToElement(pendingBoxRef.current);
           }
-          pendingBoxRef.current!.style.opacity = '0';
-          pending.current = null;
-          applyBoundingBoxToElement(pendingBoxRef.current);
         }
       },
       { signal: abortController.signal }

diff --git a/census/website/src/components/loaders/Loader.tsx b/census/website/src/components/loaders/Loader.tsx
@@ -3,7 +3,7 @@ import { FC, SVGAttributes } from 'react';
 export const Loader: FC<SVGAttributes<SVGSVGElement>> = ({ className, ...props }) => {
   return (
     <svg width="20" height="20" className={className} viewBox="0 0 64 64" stroke="currentColor" {...props}>
-      <g stroke-width="7" stroke-linecap="round">
+      <g strokeWidth="7" strokeLinecap="round">
         <line x1="10" x2="10">
           <animate attributeName="y1" dur="1000ms" values="16;18;28;18;16;16" repeatCount="indefinite"></animate>
           <animate attributeName="y2" dur="1000ms" values="48;46;36;44;48;48" repeatCount="indefinite"></animate>

diff --git a/census/website/src/components/text/Timestamp.tsx b/census/website/src/components/text/Timestamp.tsx
@@ -1,22 +1,22 @@
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/feedback/Tooltip';
-import { format } from 'date-fns';
 import { formatInTimeZone } from 'date-fns-tz';
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 
 interface TimestampProps {
   date: Date;
 }
 
-export const Timestamp: FC<TimestampProps> = ({ date }) => {
+export const Timestamp: FC<PropsWithChildren<TimestampProps>> = ({ children, date }) => {
+  const currentTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
   return (
     <TooltipProvider>
       <Tooltip>
-        <TooltipTrigger type="button">
-          <span>{formatInTimeZone(date, 'America/Chicago', 'PP p')}</span>
-        </TooltipTrigger>
+        <TooltipTrigger type="button">{children}</TooltipTrigger>
         <TooltipContent>
           <span className="flex gap-2 items-center">
-            <span>Your time: {format(date, 'PP p')}</span>
+            <span>
+              {currentTimezone}: {formatInTimeZone(date, currentTimezone, 'dd/MM/yyyy HH:mm')}
+            </span>
           </span>
         </TooltipContent>
       </Tooltip>

diff --git a/census/website/src/layouts/sidebars/Achivements.tsx b/census/website/src/layouts/sidebars/Achivements.tsx
@@ -57,7 +57,7 @@ export const Achievements = () => {
             </Counter>
           </div>
         </div>
-        <div className="flex flex-col gap-2.5 font-sans text-left overflow-y-scroll p-4">
+        <div className="flex flex-col gap-2.5 font-sans text-left overflow-y-scroll p-4 flex-1">
           {pending.data.length > 0 && (
             <div className="flex justify-between items-center text-white">
               <p className="font-semibold text-sm">achievements</p>
@@ -80,12 +80,12 @@ export const Achievements = () => {
                   points={achievement.points}
                 >
                   <div className="flex justify-between">
-                    <p className="font-semibold">{'Red Paper Wasp'}</p>
+                    <p className="font-semibold text-left">{achievement.identification?.nickname}</p>
                     <span className="font-bold text-sm">{achievement.points} pts</span>
                   </div>
                   <p className="mt-1 text-left text-sm">
-                    <span className="italic font-semibold">{achievement.observation?.observedBy}</span> has confirmed
-                    your id.
+                    <span className="italic font-semibold">{achievement.identification?.confirmedBy}</span> has
+                    confirmed your id.
                   </p>
                 </Achievement>
               ))

diff --git a/census/website/src/layouts/sidebars/Menu.tsx b/census/website/src/layouts/sidebars/Menu.tsx
@@ -1,14 +1,17 @@
 import { SimpleAlveus } from '@/components/assets/logos/SimpleAlveus';
 import { Wordmark } from '@/components/assets/logos/Wordmark';
 import { Button } from '@/components/controls/button/juicy';
+import SiBinoculars from '@/components/icons/SiBinoculars';
 import SiHome from '@/components/icons/SiHome';
 import SiLogOut from '@/components/icons/SiLogOut';
 import SiMenu from '@/components/icons/SiMenu';
+import SiPhoto from '@/components/icons/SiPhoto';
 import SiUser from '@/components/icons/SiUser';
 import { useSidebar } from '@/components/layout/LayoutProvider';
 import { cn } from '@/utils/cn';
 import { AnimatePresence, HTMLMotionProps, motion } from 'framer-motion';
-import { ComponentProps, FC } from 'react';
+import { ComponentPropsWithoutRef, ElementType, FC, PropsWithChildren, useRef } from 'react';
+import { Link } from 'react-router-dom';
 
 export const MenuTrigger = () => {
   const [, setOpen] = useSidebar();
@@ -51,17 +54,25 @@ export const Menu = () => {
             </AnimatePresence>
           </div>
           <div className="flex flex-col gap-2 py-2 w-full flex-1">
-            <MenuItem>
+            <MenuItem as={Link} to="/">
               <SiHome className="text-2xl" />
               <MenuLabel>home</MenuLabel>
             </MenuItem>
+            <MenuItem as={Link} to="/observations">
+              <SiPhoto className="text-2xl" />
+              <MenuLabel>observations</MenuLabel>
+            </MenuItem>
+            <MenuItem as={Link} to="/identifications">
+              <SiBinoculars className="text-2xl" />
+              <MenuLabel>identifications</MenuLabel>
+            </MenuItem>
           </div>
           <div className="flex flex-col gap-2 py-2 w-full">
             <MenuItem>
               <SiUser className="text-2xl" />
               <MenuLabel>profile</MenuLabel>
             </MenuItem>
-            <MenuItem>
+            <MenuItem as={Link} to="/auth/signout">
               <SiLogOut className="text-2xl" />
               <MenuLabel>sign out</MenuLabel>
             </MenuItem>
@@ -72,19 +83,50 @@ export const Menu = () => {
   );
 };
 
-export const MenuItem: FC<ComponentProps<'button'>> = ({ className, ...props }) => {
-  const [open] = useSidebar();
+type PolymorphicAsProp<E extends ElementType> = {
+  as?: E;
+};
+type PolymorphicProps<E extends ElementType> = PropsWithChildren<ComponentPropsWithoutRef<E> & PolymorphicAsProp<E>>;
+
+type MenuItemProps<E extends ElementType = 'button'> = PolymorphicProps<E>;
+
+export function MenuItem<E extends ElementType = 'button'>({ className, as, onClick, ...props }: MenuItemProps<E>) {
+  const [open, setOpen] = useSidebar();
+  const pointerTimeoutHandle = useRef<NodeJS.Timeout | null>(null);
+
+  const Component = as ?? 'button';
+
   return (
-    <button
+    <Component
+      onClick={(...args) => {
+        // If the user clicked the item, we don't want to open the sidebar. They know what they're doing.
+        if (onClick) onClick(...args);
+
+        if (!pointerTimeoutHandle.current) return;
+        clearTimeout(pointerTimeoutHandle.current);
+        pointerTimeoutHandle.current = null;
+      }}
+      onPointerEnter={() => {
+        // If the user hovers over the item, we want to open the sidebar after a delay.
+        pointerTimeoutHandle.current = setTimeout(() => {
+          setOpen(true);
+        }, 1000);
+      }}
+      onPointerLeave={() => {
+        // If the user leaves the item, we want to cancel the sidebar open delay.
+        if (!pointerTimeoutHandle.current) return;
+        clearTimeout(pointerTimeoutHandle.current);
+        pointerTimeoutHandle.current = null;
+      }}
       className={cn(
-        'py-1.5 px-4 flex items-center hover:bg-accent-900 hover:bg-opacity-5 bg-accent-200 rounded-lg font-medium text-alveus-darker',
+        'py-1.5 px-4 flex items-center hover:bg-alveus hover:bg-opacity-5 rounded-lg font-medium text-alveus-darker',
         open ? 'w-full' : 'w-fit',
         className
       )}
       {...props}
     />
   );
-};
+}
 
 const ZeroWidthSeparator = '\u200B';
 

diff --git a/census/website/src/pages/captures/ReadOnly.tsx b/census/website/src/pages/captures/ReadOnly.tsx
@@ -16,9 +16,10 @@ export const ReadOnly: FC<CaptureProps> = ({ id }) => {
       </Breadcrumbs>
       <h1 className="text-2xl font-bold">Saved!</h1>
       {capture.data.observations.map(observation => (
-        <div className="flex gap-2">
+        <div key={observation.id} className="flex gap-2">
           {observation.images.map(image => (
             <Square
+              key={image.id}
               className="w-64 h-64"
               src={image.url}
               options={{

diff --git a/census/website/src/pages/captures/create/CreateFromClipModal.tsx b/census/website/src/pages/captures/create/CreateFromClipModal.tsx
@@ -132,7 +132,7 @@ export const ClipCreationProgress: FC<ClipCreationProgressProps> = ({ id, onComp
 
   return (
     <div className="flex justify-between items-center gap-3 bg-alveus p-4 rounded-md w-full">
-      <p>We're upgrading this clip to 4K, please wait!</p>
+      <p>We&apos;re upgrading this clip to 4K, please wait!</p>
       <Loader />
     </div>
   );

diff --git a/census/website/src/pages/captures/images/Thumbnail.tsx b/census/website/src/pages/captures/images/Thumbnail.tsx
@@ -58,15 +58,15 @@ export const Thumbnail: FC<{
               d="M6 1.5H31C33.4853 1.5 35.5 3.51472 35.5 6V40.4029C35.5 43.9007 31.6841 46.0612 28.6848 44.2616L22.3587 40.4659C19.9836 39.0409 17.0164 39.0409 14.6413 40.4659L8.31523 44.2616C5.31587 46.0612 1.5 43.9007 1.5 40.4029V6C1.5 3.51472 3.51472 1.5 6 1.5Z"
               fill="#B068F8"
               stroke="white"
-              stroke-width="3"
+              strokeWidth="3"
             />
             <path
               d="M17.5489 13.9271C17.8483 13.0058 19.1517 13.0058 19.451 13.9271L20.6329 17.5644C20.7667 17.9764 21.1507 18.2553 21.5839 18.2553H25.4084C26.3771 18.2553 26.7799 19.495 25.9962 20.0644L22.9021 22.3123C22.5516 22.567 22.405 23.0183 22.5388 23.4304L23.7207 27.0676C24.02 27.989 22.9655 28.7551 22.1818 28.1857L19.0878 25.9377C18.7373 25.6831 18.2627 25.6831 17.9122 25.9377L14.8181 28.1857C14.0344 28.7551 12.9799 27.989 13.2793 27.0676L14.4611 23.4304C14.595 23.0183 14.4483 22.567 14.0979 22.3123L11.0038 20.0644C10.2201 19.495 10.6229 18.2553 11.5916 18.2553H15.416C15.8493 18.2553 16.2332 17.9764 16.3671 17.5644L17.5489 13.9271Z"
               fill="white"
             />
             <path
-              fill-rule="evenodd"
-              clip-rule="evenodd"
+              fillRule="evenodd"
+              clipRule="evenodd"
               d="M16.5979 13.6181C17.1966 11.7754 19.8034 11.7754 20.4021 13.618L21.584 17.2553L25.4084 17.2553C27.3459 17.2553 28.1514 19.7346 26.584 20.8734L23.4899 23.1213L24.6718 26.7586C25.2705 28.6012 23.1615 30.1335 21.5941 28.9947L18.5 26.7467L15.406 28.9947C13.8385 30.1335 11.7296 28.6013 12.3283 26.7586L13.5101 23.1213L10.416 20.8734C8.84861 19.7346 9.65415 17.2553 11.5916 17.2553H15.4161L16.5979 13.6181ZM19.6818 17.8734L18.5 14.2361L17.3182 17.8734C17.0504 18.6974 16.2825 19.2553 15.4161 19.2553L11.5916 19.2553L14.6857 21.5033C15.3866 22.0126 15.68 22.9153 15.4122 23.7394L14.2304 27.3767L17.3244 25.1287C18.0254 24.6194 18.9746 24.6194 19.6756 25.1287L22.7696 27.3767L21.5878 23.7394C21.3201 22.9153 21.6134 22.0126 22.3144 21.5033L25.4084 19.2553H21.584C20.7175 19.2553 19.9496 18.6974 19.6818 17.8734Z"
               fill="white"
             />
@@ -91,22 +91,22 @@ export const Thumbnail: FC<{
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
           >
-            <rect x="1.5" y="1.5" width="32" height="32" rx="5.5" fill="#F86868" stroke="white" stroke-width="3" />
+            <rect x="1.5" y="1.5" width="32" height="32" rx="5.5" fill="#F86868" stroke="white" strokeWidth="3" />
             <path
-              fill-rule="evenodd"
-              clip-rule="evenodd"
+              fillRule="evenodd"
+              clipRule="evenodd"
               d="M22.4048 12.629C22.9397 12.6756 23.3357 13.1469 23.2892 13.6818L22.5168 22.5639C22.5168 22.5639 22.5168 22.5639 22.5168 22.564C22.3906 24.0154 21.1755 25.1293 19.7187 25.1293H15.2813C13.8244 25.1293 12.6094 24.0154 12.4832 22.564L13.4517 22.4797L12.4832 22.564L11.7108 13.6818C11.6643 13.1469 12.0602 12.6756 12.5952 12.629C13.1301 12.5825 13.6014 12.9785 13.648 13.5134L14.4203 22.3955C14.4591 22.8421 14.833 23.1848 15.2813 23.1848H19.7187C20.167 23.1848 20.5408 22.8421 20.5796 22.3956L20.5796 22.3955L21.352 13.5134C21.3985 12.9785 21.8699 12.5825 22.4048 12.629Z"
               fill="white"
             />
             <path
-              fill-rule="evenodd"
-              clip-rule="evenodd"
+              fillRule="evenodd"
+              clipRule="evenodd"
               d="M17.2705 11.8152C16.7932 11.8152 16.4063 12.2021 16.4063 12.6794V13.3681C16.4063 13.905 15.971 14.3403 15.434 14.3403C14.8971 14.3403 14.4618 13.905 14.4618 13.3681V12.6794C14.4618 11.1283 15.7192 9.87079 17.2705 9.87079H17.7296C19.2808 9.87079 20.5382 11.1283 20.5382 12.6794V13.3681C20.5382 13.905 20.1029 14.3403 19.566 14.3403C19.029 14.3403 18.5938 13.905 18.5938 13.3681V12.6794C18.5938 12.2021 18.2069 11.8152 17.7296 11.8152H17.2705Z"
               fill="white"
             />
             <path
-              fill-rule="evenodd"
-              clip-rule="evenodd"
+              fillRule="evenodd"
+              clipRule="evenodd"
               d="M10.1003 13.5976C10.1003 13.0607 10.5356 12.6254 11.0726 12.6254H23.9275C24.4644 12.6254 24.8997 13.0607 24.8997 13.5976C24.8997 14.1346 24.4644 14.5699 23.9275 14.5699H11.0726C10.5356 14.5699 10.1003 14.1346 10.1003 13.5976Z"
               fill="white"
             />