luxon to resolve date bug

itsdayo · Oct 19, 2023 · ec06fbd · ec06fbd
1 parent a20ed1f
commit ec06fbd
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 9 deletions.
diff --git a/API/reactivities.db b/API/reactivities.db
diff --git a/API/reactivities.db-shm b/API/reactivities.db-shm
diff --git a/API/reactivities.db-wal b/API/reactivities.db-wal
diff --git a/client-app/package-lock.json b/client-app/package-lock.json
diff --git a/client-app/package.json b/client-app/package.json
@@ -17,6 +17,7 @@
     "axios": "^1.5.0",
     "date-fns": "^2.30.0",
     "formik": "^2.4.5",
+    "luxon": "^3.4.3",
     "mobx": "^6.10.2",
     "mobx-react-lite": "^4.0.5",
     "react": "^18.2.0",
@@ -34,6 +35,7 @@
     "yup": "^1.3.2"
   },
   "devDependencies": {
+    "@types/luxon": "^3.3.3",
     "@types/react": "^18.2.15",
     "@types/react-datepicker": "^4.15.1",
     "@types/react-dom": "^18.2.7",

diff --git a/client-app/src/features/activities/dashboard/ActivityListItem.tsx b/client-app/src/features/activities/dashboard/ActivityListItem.tsx
@@ -1,8 +1,8 @@
 import { Link } from "react-router-dom";
 import { Button, Icon, Item, Label, Segment } from "semantic-ui-react";
 import { Activity } from "../../../app/models/activity";
-import { format } from "date-fns";
 import ActivityListItemAttendee from "./ActivityListItemAttendee";
+import { DateTime } from "luxon";
 
 interface Props {
   activity: Activity;
@@ -59,7 +59,8 @@ export default function ActivityListItem({ activity }: Props) {
       </Segment>
       <Segment>
         <span>
-          <Icon name="clock" /> {format(activity.date!, "dd MMM yyyy h:mm aa")}
+          <Icon name="clock" />{" "}
+          {DateTime.fromISO(activity.date?.toISOString() as string).toFormat(`L'/'dd'/'yyyy   h':'mma `)}
           <Icon name="marker" />
           {activity.venue}
         </span>

diff --git a/client-app/src/features/activities/details/ActivityDetailedHeader.tsx b/client-app/src/features/activities/details/ActivityDetailedHeader.tsx
@@ -2,9 +2,9 @@ import { observer } from "mobx-react-lite";
 import { Button, Header, Item, Segment, Image, Label } from "semantic-ui-react";
 import { Activity } from "../../../app/models/activity";
 import { Link } from "react-router-dom";
-import format from "date-fns/format";
 import { useStore } from "../../../app/stores/store";
 import { parseISO } from "date-fns";
+import { DateTime } from "luxon";
 
 const activityImageStyle = {
   filter: "brightness(30%)",
@@ -55,7 +55,9 @@ export default observer(function ActivityDetailedHeader({ activity }: Props) {
                 />
                 {activity.date && (
                   <p>
-                    {format(parseISO(activity.date!.toString()), "dd MMM yyyy")}
+                    {DateTime.fromISO(
+                      new Date(activity.date).toISOString()
+                    ).toFormat(`L'/'dd'/'yyyy   h':'mma `)}
                   </p>
                 )}
                 <p>

diff --git a/client-app/src/features/activities/details/ActivityDetailedInfo.tsx b/client-app/src/features/activities/details/ActivityDetailedInfo.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 import { Segment, Grid, Icon } from "semantic-ui-react";
 import { Activity } from "../../../app/models/activity";
-import { format, parseISO } from "date-fns";
+import { DateTime } from "luxon";
 
 interface Props {
   activity: Activity;
@@ -27,10 +27,9 @@ export default observer(function ActivityDetailedInfo({ activity }: Props) {
           </Grid.Column>
           <Grid.Column width={15}>
             <span>
-              {format(
-                parseISO(activity.date!.toString()),
-                "dd MMM yyyy h:mm aa"
-              )}
+              {DateTime.fromISO(
+                new Date(activity.date!).toISOString() as string
+              ).toFormat(`L'/'dd'/'yyyy   h':'mma `)}
             </span>
           </Grid.Column>
         </Grid>