feat: format dates (english only for now)

src/frontend/lib/utils.js

@@ -50,3 +50,14 @@ export function matchPreset(
   if (!categoryId) return;
   return presets.get(categoryId);
 }
+
+export function formatDate(dateString: string): string {
+  const date = new Date(dateString);
+  const options = {
+    weekday: "short",
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  };
+  return date.toLocaleString(options);
+}

src/frontend/screens/Observation/ObservationView.js

@@ -9,6 +9,7 @@ import {
   EditIcon,
   CategoryIcon
 } from "../../sharedComponents/icons";
+import { formatDate } from "../../lib/utils";
 import type { PresetWithFields } from "../../context/PresetsContext";
 import type { Observation } from "../../context/ObservationsContext";
 
@@ -45,7 +46,7 @@ const ObservationView = ({ observation, preset = {} }: ODVProps) => {
             <FormattedCoords lon={lon} lat={lat} style={styles.positionText} />
           </View>
         )}
-        <Text style={styles.time}>{observation.created_at}</Text>
+        <Text style={styles.time}>{formatDate(observation.created_at)}</Text>
         <View style={styles.section}>
           <Text style={styles.textNotes}>{observation.value.tags.notes}</Text>
         </View>

src/frontend/screens/ObservationsList/ObservationsListView.js

@@ -4,6 +4,7 @@ import { View, FlatList, Dimensions, StyleSheet } from "react-native";
 import memoize from "memoize-one";
 
 import ObservationListItem from "./ObservationListItem";
+import { formatDate } from "../../lib/utils";
 import type {
   Observation,
   ObservationsMap
@@ -67,7 +68,7 @@ const ObservationsListView = ({
               style={styles.listItem}
               title={name}
               iconId={icon}
-              subtitle={created_at}
+              subtitle={formatDate(created_at)}
               onPress={onPressObservation}
             />
           );