From c51bfbd852da79e24698aa974052b3dee0776e11 Mon Sep 17 00:00:00 2001 From: Brandon Presley Date: Sat, 12 Nov 2022 14:38:39 +1300 Subject: [PATCH] Use date-fns and detect 12/24 hour device setting Related to #116 --- SetForm.tsx | 4 +- SetItem.tsx | 4 +- SettingsPage.tsx | 29 +++++++------- ViewBest.tsx | 6 ++- migrations/1668215159730-update-date.ts | 34 ++++++++++++++++ package.json | 2 + time.ts | 52 ------------------------- yarn.lock | 11 +++++- 8 files changed, 70 insertions(+), 72 deletions(-) create mode 100644 migrations/1668215159730-update-date.ts diff --git a/SetForm.tsx b/SetForm.tsx index d84b0c3..f24286d 100644 --- a/SetForm.tsx +++ b/SetForm.tsx @@ -1,3 +1,4 @@ +import {format} from 'date-fns' import {useCallback, useRef, useState} from 'react' import {TextInput, View} from 'react-native' import DocumentPicker from 'react-native-document-picker' @@ -8,7 +9,6 @@ import {getNow, setRepo} from './db' import GymSet from './gym-set' import MassiveInput from './MassiveInput' import Settings from './settings' -import {format} from './time' import {toast} from './toast' export default function SetForm({ @@ -129,7 +129,7 @@ export default function SetForm({ )} {settings.images && newImage && ( diff --git a/SetItem.tsx b/SetItem.tsx index e94a4e4..21030ba 100644 --- a/SetItem.tsx +++ b/SetItem.tsx @@ -6,8 +6,8 @@ import {setRepo} from './db' import GymSet from './gym-set' import {HomePageParams} from './home-page-params' import Settings from './settings' -import {format} from './time' import useDark from './use-dark' +import {format} from 'date-fns' export default function SetItem({ item, @@ -66,7 +66,7 @@ export default function SetItem({ alignSelf: 'center', color: dark ? '#909090ff' : '#717171ff', }}> - {format(item.created || '', settings.date)} + {format(new Date(item.created), settings.date)} )} ([]) + const today = new Date() useFocusEffect( useCallback(() => { @@ -47,6 +51,10 @@ export default function SettingsPage() { setShowDate(settings.showDate) setNoSound(settings.noSound) }) + DeviceTimeFormat.is24HourFormat().then(is24 => { + if (is24) return setFormatOptions(['P', 'P, k:m', 'ccc k:m', 'k:m']) + setFormatOptions(['P', 'Pp', 'ccc p', 'p']) + }) }, []), ) @@ -230,18 +238,13 @@ export default function SettingsPage() { )} {'date format'.includes(term.toLowerCase()) && ( )} {'alarm sound'.includes(term.toLowerCase()) && ( diff --git a/ViewBest.tsx b/ViewBest.tsx index 5c0d8ae..7fa88fd 100644 --- a/ViewBest.tsx +++ b/ViewBest.tsx @@ -1,5 +1,6 @@ import {Picker} from '@react-native-picker/picker' import {RouteProp, useRoute} from '@react-navigation/native' +import {format} from 'date-fns' import {useEffect, useState} from 'react' import {View} from 'react-native' import {BestPageParams} from './BestPage' @@ -10,7 +11,6 @@ import GymSet from './gym-set' import {Metrics} from './metrics' import {Periods} from './periods' import StackHeader from './StackHeader' -import {formatMonth} from './time' import useDark from './use-dark' import Volume from './volume' @@ -94,7 +94,9 @@ export default function ViewBest() { }` } xData={weights} - xFormat={(_value, index) => formatMonth(weights[index].created!)} + xFormat={(_value, index) => + format(new Date(weights[index].created), 'D/M') + } /> ) : ( { + const settings = await settingsRepo.findOne({where: {}}) + let newDate = 'P' + switch (settings.date) { + case '%Y-%m-%d %H:%M': + case '%d/%m/%y %h:%M %p': + case '%d/%m %h:%M %p': + newDate = 'Pp' + break + case '%Y-%m-%d': + case '%d/%m/%y': + case '%d/%m': + newDate = 'P' + break + case '%H:%M': + case '%h:%M %p': + newDate = 'p' + break + case '%A %h:%M %p': + newDate = 'cccc p' + break + } + settings.date = newDate + await settingsRepo.save(settings) + } + + public async down(queryRunner: QueryRunner): Promise { + // There's no going back... + } +} diff --git a/package.json b/package.json index 8e2e4df..4b83316 100644 --- a/package.json +++ b/package.json @@ -27,10 +27,12 @@ "@types/react-native-vector-icons": "^6.4.12", "babel-jest": "^29.2.2", "babel-plugin-transform-remove-console": "^6.9.4", + "date-fns": "^2.29.3", "eslint-plugin-flowtype": "^8.0.3", "jest": "^29.2.2", "react": "^18.2.0", "react-native": "^0.70.5", + "react-native-device-time-format": "^2.3.0", "react-native-document-picker": "^8.1.2", "react-native-file-access": "^2.5.0", "react-native-gesture-handler": "^2.8.0", diff --git a/time.ts b/time.ts index 465658b..0a6a15a 100644 --- a/time.ts +++ b/time.ts @@ -7,55 +7,3 @@ export const DAYS = [ 'Friday', 'Saturday', ] - -export function formatMonth(iso: string) { - const date = new Date(iso) - const dd = date.getDate().toString() - 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] - 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 - } -} diff --git a/yarn.lock b/yarn.lock index 9b0ce99..b1726fc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4259,7 +4259,7 @@ __metadata: languageName: node linkType: hard -"date-fns@npm:^2.28.0": +"date-fns@npm:^2.28.0, date-fns@npm:^2.29.3": version: 2.29.3 resolution: "date-fns@npm:2.29.3" checksum: e01cf5b62af04e05dfff921bb9c9933310ed0e1ae9a81eb8653452e64dc841acf7f6e01e1a5ae5644d0337e9a7f936175fd2cb6819dc122fdd9c5e86c56be484 @@ -7300,12 +7300,14 @@ __metadata: "@typescript-eslint/parser": ^5.29.0 babel-jest: ^29.2.2 babel-plugin-transform-remove-console: ^6.9.4 + date-fns: ^2.29.3 eslint: ^8.26.0 eslint-plugin-flowtype: ^8.0.3 jest: ^29.2.2 metro-react-native-babel-preset: ^0.73.3 react: ^18.2.0 react-native: ^0.70.5 + react-native-device-time-format: ^2.3.0 react-native-document-picker: ^8.1.2 react-native-file-access: ^2.5.0 react-native-gesture-handler: ^2.8.0 @@ -8794,6 +8796,13 @@ __metadata: languageName: node linkType: hard +"react-native-device-time-format@npm:^2.3.0": + version: 2.3.0 + resolution: "react-native-device-time-format@npm:2.3.0" + checksum: c19e20f40be82fff2d0c812124303e4607c3553103ddc7d672cc277e19c9ed418af81955be3c6dc9b273c417eb504d511847245952124374fb9546a68aa16efa + languageName: node + linkType: hard + "react-native-document-picker@npm:^8.1.2": version: 8.1.2 resolution: "react-native-document-picker@npm:8.1.2"