feat: date popovers

package.json

@@ -41,7 +41,7 @@
     "@prisma/client": "^5.4.1",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/themes": "^3.0.1",
+    "@radix-ui/themes": "^3.0.5",
     "@react-three/drei": "^9.93.0",
     "@react-three/fiber": "^8.15.14",
     "@resvg/resvg-js": "^2.4.1",
@@ -63,7 +63,7 @@
     "lz4js": "^0.2.0",
     "markdown-escape": "^2.0.0",
     "markdown-to-jsx": "^7.4.7",
-    "next": "^14.1.0",
+    "next": "^14.2.3",
     "parse-dds": "^1.2.1",
     "pickleparser": "^0.2.1",
     "postprocessing": "^6.34.1",

src/app/tools/player-stats/[id]/page.tsx

@@ -6,36 +6,38 @@ import {
   Callout,
   Flex,
   Heading,
+  Link,
   Popover,
   Tabs,
   Text,
 } from '@radix-ui/themes';
-import { use, useMemo, useState } from 'react';
+import { useState } from 'react';
 import { BkniIndicator } from '../../../../components/BkniIndicator';
 import { DatePicker } from '../../../../components/DatePicker';
-import { DummyLink } from '../../../../components/DummyLink';
 import PageWrapper from '../../../../components/PageWrapper';
 import { getAccountInfo } from '../../../../core/blitz/getAccountInfo';
 import { getClanAccountInfo } from '../../../../core/blitz/getClanAccountInfo';
 import { idToRegion } from '../../../../core/blitz/idToRegion';
 import { parseBkni } from '../../../../core/blitzkit/parseBkni';
+import { useAwait } from '../../../../hooks/useAwait';
 import strings from '../../../../lang/en-US.json';
 import { FlippedTrigger } from './components/FlippedTrigger';
 
 export default function Page({ params }: { params: { id: string } }) {
   const id = parseInt(params.id);
   const region = idToRegion(id);
-  const accountInfoPromise = useMemo(() => getAccountInfo(region, id), [id]);
-  const accountInfo = use(accountInfoPromise);
-  const clanAccountInfoPromise = useMemo(
-    () => getClanAccountInfo(region, id, ['clan']),
-    [id],
-  );
-  const clanAccountInfo = use(clanAccountInfoPromise);
+  const accountInfo = useAwait(getAccountInfo(region, id));
+  const clanAccountInfo = useAwait(getClanAccountInfo(region, id, ['clan']));
   const bkni = ((Math.round(Date.now() / 1000 / 60) / 100) % 2) - 1;
   const [period, setPeriod] = useState<'custom' | number>(30);
   const { bkniColor } = parseBkni(bkni);
   const isTracking = false;
+  const [customFrom, setCustomFrom] = useState<Date>(
+    new Date(Date.now() - 29 * 24 * 60 * 60 * 1000),
+  );
+  const [customTo, setCustomTo] = useState<Date>(new Date());
+  const [fromSelectorOpen, setFromSelectorOpen] = useState(false);
+  const [toSelectorOpen, setToSelectorOpen] = useState(false);
 
   return (
     <>
@@ -112,16 +114,55 @@ export default function Page({ params }: { params: { id: string } }) {
         {period === 'custom' && (
           <Text>
             From{' '}
-            <Popover.Root>
+            <Popover.Root
+              open={fromSelectorOpen}
+              onOpenChange={setFromSelectorOpen}
+            >
               <Popover.Trigger>
-                <DummyLink underline="always">June 1, 2021</DummyLink>
+                <Link underline="always" href="#">
+                  {customFrom.toLocaleString(undefined, {
+                    month: 'short',
+                    day: 'numeric',
+                    year: 'numeric',
+                  })}
+                </Link>
               </Popover.Trigger>
 
               <Popover.Content>
-                <DatePicker />
+                <DatePicker
+                  defaultDate={customFrom}
+                  onDateChange={(date) => {
+                    setCustomFrom(date);
+                    setFromSelectorOpen(false);
+                  }}
+                />
               </Popover.Content>
             </Popover.Root>{' '}
-            to <DummyLink underline="always">June 7, 2024</DummyLink>
+            to{' '}
+            <Popover.Root
+              open={toSelectorOpen}
+              onOpenChange={setToSelectorOpen}
+            >
+              <Popover.Trigger>
+                <Link underline="always" href="#">
+                  {customTo.toLocaleString(undefined, {
+                    month: 'short',
+                    day: 'numeric',
+                    year: 'numeric',
+                  })}
+                </Link>
+              </Popover.Trigger>
+
+              <Popover.Content>
+                <DatePicker
+                  defaultDate={customTo}
+                  onDateChange={(date) => {
+                    setCustomTo(date);
+                    setToSelectorOpen(false);
+                  }}
+                />
+              </Popover.Content>
+            </Popover.Root>
           </Text>
         )}
       </PageWrapper>

src/components/DatePicker.tsx

@@ -6,7 +6,6 @@ import {
 } from '@radix-ui/react-icons';
 import {
   Button,
-  Card,
   ChevronDownIcon,
   Flex,
   Grid,
@@ -17,26 +16,22 @@ import {
 } from '@radix-ui/themes';
 import { times } from 'lodash';
 import { useState } from 'react';
-import { Vector3Tuple } from 'three';
 
 const DAY_TITLES = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 const YEAR_OPTIONS = 7;
 
 interface DatePickerProps {
-  onDateChange?: (date: Vector3Tuple) => void;
-  defaultDate?: Vector3Tuple;
+  onDateChange?: (date: Date) => void;
+  defaultDate?: Date;
 }
 
-export function DatePicker({ onDateChange, defaultDate }: DatePickerProps) {
-  const initialDate = new Date();
-
-  const [year, setYear] = useState(
-    defaultDate?.[2] ?? initialDate.getFullYear(),
-  );
-  const [month, setMonth] = useState(
-    defaultDate?.[1] ?? initialDate.getMonth(),
-  );
-  const [day, setDay] = useState(defaultDate?.[0] ?? initialDate.getDate());
+export function DatePicker({
+  onDateChange,
+  defaultDate = new Date(),
+}: DatePickerProps) {
+  const [year, setYear] = useState(defaultDate.getFullYear());
+  const [month, setMonth] = useState(defaultDate.getMonth());
+  const [day, setDay] = useState(defaultDate.getDate());
   const [yearScroll, setYearScroll] = useState(0);
   const [yearOffset, setYearOffset] = useState(0);
   const [monthOffset, setMonthOffset] = useState(0);
@@ -64,11 +59,7 @@ export function DatePicker({ onDateChange, defaultDate }: DatePickerProps) {
   ).getDay();
 
   return (
-    <Card
-      style={{
-        width: 'fit-content',
-      }}
-    >
+    <Flex direction="column" width="fit-content">
       <Flex justify="between" mb="2" align="center" py="2">
         <IconButton
           size="3"
@@ -91,9 +82,9 @@ export function DatePicker({ onDateChange, defaultDate }: DatePickerProps) {
             size="3"
             variant="ghost"
             onClick={() => {
-              setYear(initialDate.getFullYear());
-              setMonth(initialDate.getMonth());
-              setDay(initialDate.getDate());
+              setYear(defaultDate.getFullYear());
+              setMonth(defaultDate.getMonth());
+              setDay(defaultDate.getDate());
               setYearOffset(0);
               setMonthOffset(0);
             }}
@@ -223,7 +214,7 @@ export function DatePicker({ onDateChange, defaultDate }: DatePickerProps) {
                 setYearOffset(0);
                 setMonthOffset(0);
 
-                onDateChange?.([newDay, newMonth, newYear]);
+                onDateChange?.(new Date(newYear, newMonth, newDay));
               }}
             >
               {index + 1}
@@ -237,6 +228,6 @@ export function DatePicker({ onDateChange, defaultDate }: DatePickerProps) {
           </IconButton>
         ))}
       </Grid>
-    </Card>
+    </Flex>
   );
 }