feat: ✨ add new list series type

lucca180 · Feb 4, 2025 · 1095fb2 · 1095fb2
1 parent ebed004
commit 1095fb2
Show file tree

Hide file tree

Showing 10 changed files with 112 additions and 31 deletions.
diff --git a/components/Charts/PriceChart.tsx b/components/Charts/PriceChart.tsx
@@ -83,10 +83,26 @@ const ChartComponent = (props: ChartComponentProps) => {
 
       const color = Color(list.colorHex ?? '#000');
 
-      const date =
-        list.seriesType === 'listCreation'
-          ? new Date(list.createdAt).toISOString().split('T')[0]
-          : new Date(list.itemInfo?.[0].addedAt ?? 0).toISOString().split('T')[0];
+      let date = list.createdAt;
+
+      if (list.seriesType === 'itemAddition' && list.itemInfo?.[0].addedAt)
+        date = list.itemInfo?.[0].addedAt;
+
+      if (list.seriesType === 'listDates' && list.seriesStart) {
+        date = list.seriesStart;
+
+        if (list.seriesEnd) {
+          const seriesEnd = new VertLine(chart, newSeries, list.seriesEnd.toString(), {
+            showLabel: !!showMarkerLabel,
+            labelText: `[End] ${list.name}`,
+            color: color.lightness(70).hex(),
+            labelTextColor: Color(color.lightness(70).hex()).isDark() ? 'white' : 'black',
+            labelBackgroundColor: color.lightness(70).hex(),
+          });
+
+          newSeries.attachPrimitive(seriesEnd);
+        }
+      }
 
       const vertLine = new VertLine(chart, newSeries, date.toString(), {
         showLabel: !!showMarkerLabel,

diff --git a/components/Modal/CreateListModal.tsx b/components/Modal/CreateListModal.tsx
@@ -60,7 +60,7 @@ const colorPickerStyles = {
 
 const CreateListModal = (props: CreateListModalProps) => {
   const t = useTranslations();
-  const { user, getIdToken } = useAuth();
+  const { user } = useAuth();
   const { isOpen, onClose } = props;
   const [isLoading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<boolean>(false);
@@ -71,7 +71,6 @@ const CreateListModal = (props: CreateListModalProps) => {
     setLoading(true);
     try {
       if (!user) return;
-      const token = await getIdToken();
 
       const data = {
         list_id: list.internal_id,
@@ -88,20 +87,16 @@ const CreateListModal = (props: CreateListModalProps) => {
           sortDir: list.sortDir,
         },
         seriesType: list.seriesType,
-      };
-
-      const configs = {
-        headers: {
-          authorization: `Bearer ${token}`,
-        },
+        seriesStart: list.seriesStart,
+        seriesEnd: list.seriesEnd,
       };
 
       const username = list.owner?.username ?? user.username;
 
       // if list exists then update, else create
       const res = await (props.list
-        ? axios.post(`/api/v1/lists/${username}/${list.internal_id}`, data, configs)
-        : axios.post(`/api/v1/lists/${username}`, data, configs));
+        ? axios.post(`/api/v1/lists/${username}/${list.internal_id}`, data)
+        : axios.post(`/api/v1/lists/${username}`, data));
 
       setLoading(false);
 
@@ -193,8 +188,34 @@ const CreateListModal = (props: CreateListModalProps) => {
                           <option value="none">None</option>
                           <option value="listCreation">List Creation</option>
                           <option value="itemAddition">Item Addition</option>
+                          <option value="listDates">Series Dates</option>
                         </Select>
                       </FormControl>
+                      {list.seriesType === 'listDates' && (
+                        <>
+                          <FormControl>
+                            <FormLabel color="gray.300">Series Start</FormLabel>
+                            <Input
+                              variant="filled"
+                              type="date"
+                              name="seriesStart"
+                              onChange={handleChange}
+                              value={list.seriesStart?.split('T')[0] ?? ''}
+                            />
+                          </FormControl>
+                          <FormControl>
+                            <FormLabel color="gray.300">Series End</FormLabel>
+                            <Input
+                              variant="filled"
+                              type="date"
+                              name="seriesEnd"
+                              onChange={handleChange}
+                              max={list.seriesStart || undefined}
+                              value={list.seriesEnd?.split('T')[0] ?? ''}
+                            />
+                          </FormControl>
+                        </>
+                      )}
                     </>
                   )}
                   <Divider />

diff --git a/components/Price/PriceTable.tsx b/components/Price/PriceTable.tsx
@@ -30,6 +30,7 @@ type PriceOrMarker = Partial<PriceData> & {
   color?: string;
   slug?: string;
   addedAt?: string;
+  markerType?: 'added-to' | 'available-at' | 'unavailable-at';
 };
 
 type Props = {
@@ -49,18 +50,35 @@ const PriceTable = (props: Props) => {
     lists?.map((list) => {
       if (!list.seriesType) return;
       const color = Color(list.colorHex ?? '#000');
-
-      const date =
-        list.seriesType === 'listCreation'
-          ? new Date(list.createdAt).toISOString()
-          : new Date(list.itemInfo?.[0].addedAt ?? 0).toISOString();
+      let date = list.createdAt;
+      let markerType = 'added-to';
+
+      if (list.seriesType === 'itemAddition' && list.itemInfo?.[0].addedAt)
+        date = list.itemInfo?.[0].addedAt;
+
+      if (list.seriesType === 'listDates' && list.seriesStart) {
+        date = list.seriesStart;
+        markerType = 'available-at';
+
+        if (list.seriesEnd) {
+          sorted.push({
+            marker: true,
+            title: list.name,
+            slug: list.slug ?? '',
+            addedAt: list.seriesEnd,
+            color: color.lightness(70).hex(),
+            markerType: 'unavailable-at',
+          });
+        }
+      }
 
       sorted.push({
         marker: true,
         title: list.name,
         slug: list.slug ?? '',
         addedAt: date,
         color: color.lightness(70).hex(),
+        markerType: markerType as 'added-to' | 'available-at' | 'unavailable-at',
       });
     });
 
@@ -136,11 +154,7 @@ const PriceItem = (
         <Td colSpan={1}>
           <Flex alignItems={'center'} gap={1}>
             <Icon as={MdLabel} color={price.color} />
-            <Text>
-              {t.rich('ItemPage.added-to', {
-                List: () => <></>,
-              })}
-            </Text>
+            <Text>{t('ItemPage.' + price.markerType)}</Text>
           </Flex>
         </Td>
         <Td textAlign={'center'} whiteSpace={'normal'}>

diff --git a/pages/api/v1/lists/[username]/[list_id]/index.ts b/pages/api/v1/lists/[username]/[list_id]/index.ts
@@ -5,6 +5,7 @@ import { CheckAuth } from '../../../../../../utils/googleCloud';
 import prisma from '../../../../../../utils/prisma';
 import { syncDynamicList } from './dynamic';
 import { SeriesType } from '@prisma/client';
+import { UTCDate } from '@date-fns/utc';
 
 export default async function handle(req: NextApiRequest, res: NextApiResponse) {
   if (req.method === 'GET') return GET(req, res);
@@ -187,6 +188,8 @@ const POST = async (req: NextApiRequest, res: NextApiResponse) => {
       order,
       officialTag,
       seriesType,
+      seriesStart,
+      seriesEnd,
     } = req.body as {
       name?: string;
       description?: string;
@@ -199,6 +202,8 @@ const POST = async (req: NextApiRequest, res: NextApiResponse) => {
       officialTag?: string;
       sortInfo?: { sortBy: string; sortDir: string };
       seriesType?: string;
+      seriesStart?: string;
+      seriesEnd?: string;
     };
 
     if (
@@ -212,7 +217,9 @@ const POST = async (req: NextApiRequest, res: NextApiResponse) => {
       sortInfo ||
       order ||
       officialTag ||
-      seriesType
+      seriesType ||
+      seriesStart ||
+      seriesEnd
     ) {
       let colorHexVar = colorHex;
 
@@ -249,6 +256,8 @@ const POST = async (req: NextApiRequest, res: NextApiResponse) => {
           sortBy: sortInfo?.sortBy,
           sortDir: sortInfo?.sortDir,
           seriesType: seriesType === 'none' ? null : (seriesType as SeriesType),
+          seriesStart: seriesStart ? new UTCDate(new UTCDate(seriesStart).setHours(18)) : null,
+          seriesEnd: seriesEnd ? new UTCDate(new UTCDate(seriesEnd).setHours(18)) : null,
           slug: slug,
         },
       });

diff --git a/pages/api/v1/lists/[username]/index.ts b/pages/api/v1/lists/[username]/index.ts
@@ -341,6 +341,8 @@ export const rawToList = (
 
     slug: listRaw.slug,
     seriesType: listRaw.seriesType,
+    seriesStart: listRaw.seriesStart?.toJSON() ?? null,
+    seriesEnd: listRaw.seriesEnd?.toJSON() ?? null,
     itemInfo: !includeItems
       ? []
       : listRaw.items.map((item) => {

diff --git a/prisma/migrations/20250204131757_add_series_date/migration.sql b/prisma/migrations/20250204131757_add_series_date/migration.sql
@@ -0,0 +1,10 @@
+/*
+  Warnings:
+
+  - The values [itemRemoval] on the enum `UserList_seriesType` will be removed. If these variants are still used in the database, this will fail.
+
+*/
+-- AlterTable
+ALTER TABLE `userlist` ADD COLUMN `seriesEnd` DATETIME(3) NULL,
+    ADD COLUMN `seriesStart` DATETIME(3) NULL,
+    MODIFY `seriesType` ENUM('listCreation', 'itemAddition', 'listDates') NULL;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -429,6 +429,9 @@ model UserList {
 
   items ListItems[]
 
+  seriesStart DateTime?
+  seriesEnd   DateTime?
+
   @@unique([slug, user_id])
   @@fulltext([name])
   @@fulltext([description])
@@ -438,7 +441,7 @@ model UserList {
 enum SeriesType {
   listCreation
   itemAddition
-  itemRemoval
+  listDates
 }
 
 enum DynamicListType {

diff --git a/translation/en.json b/translation/en.json
@@ -248,10 +248,12 @@
     "contribute-wall-2": "After that, you will be able to check the this data, <b>for every item</b>, for the next <b>24 hours</b> before needing to make another contribution.",
     "latest-x-sold": "Latest {x} Sold",
     "on-sale": "On Sale",
-    "added-to": "Added to <List></List>",
+    "added-to": "Added to",
     "mme-text": "This item is part of a <b>{isMini, select, true {Mini} other {}} Mysterious Morphing Experiments</b> ({name})",
     "mme-chance": "You also have <b>a chance</b> of getting this item",
-    "mme-trail": "Trail {x}"
+    "mme-trail": "Trail {x}",
+    "available-at": "Available At",
+    "unavailable-at": "Unavailable At"
   },
   "Button": {
     "feedback": "Feedback",

diff --git a/translation/pt.json b/translation/pt.json
@@ -249,10 +249,12 @@
     "contribute-wall-2": "Depois disso, você poderá conferir esses dados para <b>todos os itens</b> pelas próximas <b>24 horas</b> antes de precisar fazer outra contribuição.",
     "latest-x-sold": "Últimos {x} Vendidos",
     "on-sale": "Promoção",
-    "added-to": "Adicionado em <List></List>",
+    "added-to": "Adicionado em",
     "mme-text": "Esse item faz parte de um <b>{isMini, select, true {Mini} other {}} Mysterious Morphing Experiments</b> ({name})",
     "mme-chance": "Você também tem <b>chances</b> de conseguir este item",
-    "mme-trail": "Trilha {x}"
+    "mme-trail": "Trilha {x}",
+    "available-at": "Disponível em",
+    "unavailable-at": "Indisponível em"
   },
   "Button": {
     "feedback": "Feedback",

diff --git a/types.d.ts b/types.d.ts
@@ -262,7 +262,9 @@ export type UserList = {
 
   slug: string | null;
 
-  seriesType: 'listCreation' | 'itemAddition' | 'itemRemoval' | null;
+  seriesType: 'listCreation' | 'itemAddition' | 'listDates' | null;
+  seriesStart: string | null;
+  seriesEnd: string | null;
 };
 
 export type ObligatoryUserList = Required<Pick<UserList, 'itemInfo'>> & UserList;