✨ implement date

src/components/AnnouncementDetailWrapper.tsx

@@ -2,6 +2,8 @@ import { makeStyles, Typography } from '@material-ui/core'
 import { ReactNode } from 'react'
 import { GenEdChip } from '@/components/GenEdChip'
 import { GenEdType } from '@thinc-org/chula-courses'
+import { format } from 'date-fns'
+import { enGB } from 'date-fns/locale'
 
 const useStyles = makeStyles((theme) => ({
   wrapper: {
@@ -20,21 +22,22 @@ interface PropsType {
   children: ReactNode
   data: {
     title: string
-    updatedTime: string
+    updatedTime: Date | null
     gened: GenEdType
   }
 }
+
 const AnnouncementDetailWrapper = ({ children, data: { title, updatedTime, gened } }: PropsType) => {
   const classes = useStyles()
-
+  const date = updatedTime ? format(updatedTime, 'dd/MM/yyyy hh:mm a', { locale: enGB }) : null
   return (
     <div className={classes.wrapper}>
       <Typography variant="h2">{title}</Typography>
       <div className={classes.gened}>
         <GenEdChip category={gened} />
       </div>
       <Typography variant="h6" className={classes.update}>
-        {updatedTime}
+        {date}
       </Typography>
       <article>{children}</article>
     </div>

src/pages/posts/[slug].tsx

@@ -18,13 +18,12 @@ interface Props {
   }
 }
 
-const Post = ({ mdxSource, metaData }: Props) => {
+const Post = ({ mdxSource, metaData: { title, updatedTime, gened } }: Props) => {
   const content = hydrate(mdxSource)
+  const date = new Date(updatedTime.trim() + ' GMT+0700')
 
   return (
-    <AnnouncementDetailWrapper
-      data={{ title: metaData.title, updatedTime: metaData.updatedTime, gened: metaData.gened }}
-    >
+    <AnnouncementDetailWrapper data={{ title: title, updatedTime: isNaN(date.getTime()) ? null : date, gened: gened }}>
       {content}
     </AnnouncementDetailWrapper>
   )

src/posts/test.mdx

@@ -1,6 +1,6 @@
 ---
 title: 'เปิดวิชาเรียนใหม่ 0201170 Military Science เสริมสร้างวินัยทหารในตัวคุณ'
-updatedTime: 'อัพเดท 22/07/64 17:00'
+updatedTime: 'Feb 7 2020 14:02'
 gened: 'SO'
 ---