From 09ec4bc6a4beb5b20cb2d3b3b7efdb936c46c93f Mon Sep 17 00:00:00 2001
From: Billie He <billy@metalab.com>
Date: Thu, 17 Oct 2024 12:05:27 -0700
Subject: [PATCH] fix: date formatting logic

---
 .../activity/ui/items/PhrasalTemplateItem.tsx | 32 +++++++++----------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/entities/activity/ui/items/PhrasalTemplateItem.tsx b/src/entities/activity/ui/items/PhrasalTemplateItem.tsx
index 5e7e0bf0..bdcefe96 100644
--- a/src/entities/activity/ui/items/PhrasalTemplateItem.tsx
+++ b/src/entities/activity/ui/items/PhrasalTemplateItem.tsx
@@ -1,6 +1,7 @@
 import { useMemo, useContext, useCallback, useRef, useState } from 'react';
 
 import { Avatar, Button } from '@mui/material';
+import { format as formatDate } from 'date-fns';
 import { isMobile } from 'react-device-detect';
 import { v4 as uuidV4 } from 'uuid';
 
@@ -29,23 +30,20 @@ export const PhrasalTemplateItem = ({ item, replaceText }: PhrasalTemplateItemPr
   const documentIdRef = useRef<string>(uuidV4());
   const { t } = usePhrasalTemplateTranslation();
 
-  const handleDownloadImage = useCallback(async () => {
-    const now = new Date();
-    const filename = [
-      appletDisplayName,
-      phrasalTemplateCardTitle,
-      String(now.getMonth() + 1).padStart(2, '0'),
-      String(now.getDate()).padStart(2, '0'),
-      now.getFullYear(),
-    ].join('_');
-
-    await downloadPhrasalTemplateItem({
-      documentId: documentIdRef.current,
-      filename,
-      share: isMobile,
-      single: false,
-    });
-  }, [appletDisplayName, phrasalTemplateCardTitle]);
+  const handleDownloadImage = useCallback(
+    async () =>
+      await downloadPhrasalTemplateItem({
+        documentId: documentIdRef.current,
+        filename: [
+          appletDisplayName,
+          phrasalTemplateCardTitle,
+          formatDate(new Date(), 'MM_dd_yyyy'),
+        ].join('_'),
+        share: isMobile,
+        single: false,
+      }),
+    [appletDisplayName, phrasalTemplateCardTitle],
+  );
 
   return (
     <Box gap="24px" display={'flex'} flexDirection={'column'} alignItems="center">