Add more date format options

Closes #94

SetItem.tsx

@@ -5,6 +5,7 @@ import {Divider, List, Menu, Text} from 'react-native-paper';
 import {HomePageParams} from './home-page-params';
 import Set from './set';
 import {deleteSet} from './set.service';
+import {format} from './time';
 import useDark from './use-dark';
 import {useSettings} from './use-settings';
 
@@ -63,7 +64,7 @@ export default function SetItem({
                   alignSelf: 'center',
                   color: dark ? '#909090ff' : '#717171ff',
                 }}>
-                {item.created?.replace('T', ' ')}
+                {format(item.created || '', settings.date)}
               </Text>
             )}
             <Menu

SettingsPage.tsx

@@ -228,16 +228,18 @@ export default function SettingsPage() {
               dropdownIconColor={color}
               selectedValue={settings.date}
               onValueChange={changeDate}>
+              <Picker.Item value="%Y-%m-%d %H:%M" label="1990-12-24 15:05" />
+              <Picker.Item value="%Y-%m-%d" label="1990-12-24" />
+              <Picker.Item value="%d/%m" label="24/12 (dd/MM)" />
+              <Picker.Item value="%H:%M" label="15:05 (24-hour time)" />
+              <Picker.Item value="%h:%M %p" label="3:05 PM (12-hour time)" />
+              <Picker.Item value="%d/%m/%y" label="24/12/1996" />
+              <Picker.Item value="%A %h:%M %p" label="Monday 3:05 PM" />
               <Picker.Item
-                value="%Y-%m-%d %H:%M"
+                value="%d/%m/%y %h:%M %p"
-                label="Format date as 1990-12-24 15:05"
+                label="24/12/1990 3:05 PM"
               />
-              <Picker.Item
+              <Picker.Item value="%d/%m %h:%M %p" label="24/12 3:05 PM" />
-                value="%Y-%m-%d"
-                label="Format date as 1990-12-24 (YYYY-MM-dd)"
-              />
-              <Picker.Item value="%d/%m" label="Format date as 24/12 (dd/MM)" />
-              <Picker.Item value="%H:%M" label="Format date as 15:05 (HH:MM)" />
             </Picker>
           )}
           {'alarm sound'.includes(search.toLowerCase()) && (

set.service.ts

@@ -82,18 +82,13 @@ export const getSets = async ({
 }: PageParams): Promise<Set[]> => {
   const select = `
     SELECT id, name, reps, weight, sets, minutes, seconds, 
-      STRFTIME(?, created) as created, unit, image, steps 
+      created, unit, image, steps 
     FROM sets 
     WHERE name LIKE ? AND NOT hidden
     ORDER BY STRFTIME('%Y-%m-%d %H:%M', created) DESC 
     LIMIT ? OFFSET ?
   `;
-  const [result] = await db.executeSql(select, [
+  const [result] = await db.executeSql(select, [`%${search}%`, limit, offset]);
-    format,
-    `%${search}%`,
-    limit,
-    offset,
-  ]);
   return result.rows.raw();
 };
 

time.ts

@@ -14,3 +14,48 @@ export function formatMonth(iso: string) {
   const mm = (date.getMonth() + 1).toString();
   return `${dd}/${mm}`;
 }
+
+function twelveHour(twentyFourHour: string) {
+  const [hourString, minute] = twentyFourHour.split(':');
+  const hour = +hourString % 24;
+  return (hour % 12 || 12) + ':' + minute + (hour < 12 ? ' AM' : ' PM');
+}
+
+function dayOfWeek(iso: string) {
+  const date = new Date(iso);
+  const day = date.getDay();
+  const target = DAYS[day === 0 ? 0 : day - 1];
+  return target.slice(0, 3);
+}
+
+/**
+ * @param iso ISO formatted date, e.g. 1996-12-24T14:03:04
+ * @param kind Intended format for the date, e.g. '%Y-%m-%d %H:%M'
+ */
+export function format(iso: string, kind: string) {
+  const split = iso.split('T');
+  const [year, month, day] = split[0].split('-');
+  const time = twelveHour(split[1]);
+  switch (kind) {
+    case '%Y-%m-%d %H:%M':
+      return iso.replace('T', ' ').replace(/:\d{2}/, '');
+    case '%Y-%m-%d':
+      return split[0];
+    case '%H:%M':
+      return split[1].replace(/:\d{2}/, '');
+    case '%d/%m/%y %h:%M %p':
+      return `${day}/${month}/${year} ${time}`;
+    case '%d/%m %h:%M %p':
+      return `${day}/${month} ${time}`;
+    case '%d/%m/%y':
+      return `${day}/${month}/${year}`;
+    case '%d/%m':
+      return `${day}/${month}`;
+    case '%h:%M %p':
+      return time;
+    case '%A %h:%M %p':
+      return dayOfWeek(iso) + ' ' + time;
+    default:
+      return iso;
+  }
+}