brandon.presley
/
Massive
2
4
Fork 0
Code Issues 4 Pull Requests Projects Releases Wiki Activity

Use date-fns and detect 12/24 hour device setting

Browse Source 
Related to #116
pull/123/head
Brandon Presley 7 months ago
parent 970cf36c94
commit c51bfbd852
8 changed files with 70 additions and 72 deletions
Show Stats Download Patch File Download Diff File

4
SetForm.tsx
Unescape Escape View File

@ -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({
<MassiveInput
label="Created"
disabled
value={format(set.created, settings.date)}
value={format(new Date(set.created), settings.date)}
/>
)}
{settings.images && newImage && (

4
SetItem.tsx
Unescape Escape View File

@ -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)}
</Text>
)}
<Menu

29
SettingsPage.tsx
Unescape Escape View File

@ -1,9 +1,11 @@
import {Picker} from '@react-native-picker/picker'
import DeviceTimeFormat from 'react-native-device-time-format'
import {useFocusEffect} from '@react-navigation/native'
import {format} from 'date-fns'
import {useCallback, useMemo, useState} from 'react'
import {DeviceEventEmitter, FlatList, NativeModules, View} from 'react-native'
import DocumentPicker from 'react-native-document-picker'
import {Button} from 'react-native-paper'
import {Button, Text} from 'react-native-paper'
import {darkColors, lightColors} from './colors'
import ConfirmDialog from './ConfirmDialog'
import {MARGIN} from './constants'
@ -31,6 +33,8 @@ export default function SettingsPage() {
const {theme, setTheme, color, setColor} = useTheme()
const [showDate, setShowDate] = useState(false)
const [noSound, setNoSound] = useState(false)
const [formatOptions, setFormatOptions] = useState<string[]>([])
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()) && (
<Select value={date} onChange={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="%d/%m/%y %h:%M %p"
label="24/12/1990 3:05 PM"
/>
<Picker.Item value="%d/%m %h:%M %p" label="24/12 3:05 PM" />
{formatOptions.map(option => (
<Picker.Item
key={option}
value={option}
label={format(today, option)}
/>
))}
</Select>
)}
{'alarm sound'.includes(term.toLowerCase()) && (

6
ViewBest.tsx
Unescape Escape View File

@ -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')
}
/>
) : (
<Chart

34
migrations/1668215159730-update-date.ts
Unescape Escape View File

@ -0,0 +1,34 @@
import {MigrationInterface, QueryRunner} from 'typeorm'
import {settingsRepo} from '../db'
export class updateDate1668215159730 implements MigrationInterface {
public async up(queryRunner: QueryRunner): Promise<void> {
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<void> {
// There's no going back...
}
}

2
package.json
Unescape Escape View File

@ -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",

52
time.ts
Unescape Escape View File

@ -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
}
}

11
yarn.lock
Unescape Escape View File

@ -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"

Write Preview
Loading…
Cancel
Save