Add fab to home page

Alarm.tsx

@@ -1,6 +1,6 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import React, {useEffect, useState} from 'react';
-import {StyleSheet, Text} from 'react-native';
+import {NativeModules, StyleSheet, Text, View} from 'react-native';
 import {Button, Modal, Portal} from 'react-native-paper';
 
 export default function Alarm() {
@@ -8,15 +8,16 @@ export default function Alarm() {
   const [seconds, setSeconds] = useState(0);
   const [minutes, setMinutes] = useState(0);
 
+  let intervalId: number;
+
   useEffect(() => {
     if (!show) return;
-    let intervalId: number;
     (async () => {
       const next = await AsyncStorage.getItem('nextAlarm');
       if (!next) return;
-      const ms = new Date(next).getTime() - new Date().getTime();
-      if (ms <= 0) return;
-      let secondsLeft = ms / 1000;
+      const milliseconds = new Date(next).getTime() - new Date().getTime();
+      if (milliseconds <= 0) return;
+      let secondsLeft = milliseconds / 1000;
       setSeconds(Math.floor(secondsLeft % 60));
       setMinutes(Math.floor(secondsLeft / 60));
       intervalId = setInterval(() => {
@@ -29,6 +30,14 @@ export default function Alarm() {
     return () => clearInterval(intervalId);
   }, [show]);
 
+  const stop = async () => {
+    NativeModules.AlarmModule.stop();
+    clearInterval(intervalId);
+    setSeconds(0);
+    setMinutes(0);
+    await AsyncStorage.setItem('nextAlarm', '');
+  };
+
   return (
     <>
       <Portal>
@@ -40,9 +49,14 @@ export default function Alarm() {
           <Text style={styles.center}>
             {minutes}:{seconds}
           </Text>
-          <Button mode="contained" onPress={() => setShow(false)}>
-            Close
-          </Button>
+          <View style={{flexDirection: 'row'}}>
+            <Button icon="close" onPress={() => setShow(false)}>
+              Close
+            </Button>
+            <Button mode="contained" icon="stop" onPress={stop}>
+              Stop
+            </Button>
+          </View>
         </Modal>
       </Portal>
       <Button icon="time" onPress={() => setShow(true)}>

EditSet.tsx

@@ -9,11 +9,9 @@ export default function EditSet({
   onSave,
   show,
   setShow,
-  setId,
   onRemove,
 }: {
   id?: number;
-  setId: (id?: number) => void;
   onSave: () => void;
   show: boolean;
   setShow: (visible: boolean) => void;
@@ -23,6 +21,7 @@ export default function EditSet({
   const [reps, setReps] = useState('');
   const [weight, setWeight] = useState('');
   const [unit, setUnit] = useState('');
+  const [created, setCreated] = useState(new Date());
   const weightRef = useRef<any>(null);
   const repsRef = useRef<any>(null);
   const unitRef = useRef<any>(null);
@@ -39,6 +38,7 @@ export default function EditSet({
       setReps(set.reps.toString());
       setWeight(set.weight.toString());
       setUnit(set.unit);
+      setCreated(new Date(set.created));
     });
   }, [id]);
 
@@ -68,77 +68,74 @@ export default function EditSet({
   };
 
   return (
-    <>
-      <Portal>
-        <Modal
-          visible={show}
-          contentContainerStyle={styles.modal}
-          onDismiss={() => setShow(false)}>
-          <Text style={styles.title}>Add a set</Text>
-          <TextInput
-            style={styles.text}
-            autoFocus
-            label="Name *"
-            value={name}
-            onChangeText={setName}
-            onSubmitEditing={() => repsRef.current?.focus()}
-          />
-          <TextInput
-            style={styles.text}
-            label="Reps *"
-            keyboardType="numeric"
-            value={reps}
-            onChangeText={setReps}
-            ref={repsRef}
-            onSubmitEditing={() => weightRef.current?.focus()}
-          />
-          <TextInput
-            style={styles.text}
-            label="Weight *"
-            keyboardType="numeric"
-            value={weight}
-            onChangeText={setWeight}
-            onSubmitEditing={save}
-            ref={weightRef}
-          />
-          <TextInput
-            style={styles.text}
-            label="Unit (kg)"
-            value={unit}
-            onChangeText={setUnit}
-            ref={unitRef}
-            onSubmitEditing={save}
-          />
-          <View style={styles.bottom}>
-            <Button mode="contained" icon="save" onPress={save}>
-              Save
-            </Button>
-            <Button icon="close" onPress={() => setShow(false)}>
-              Cancel
-            </Button>
-            <Button icon="trash" onPress={remove} disabled={!id}>
-              Delete
-            </Button>
-          </View>
-        </Modal>
-      </Portal>
-
-      <Button
-        icon="add"
-        mode="contained"
-        onPress={() => {
-          setId(undefined);
-          setShow(true);
-        }}>
-        Add
-      </Button>
-    </>
+    <Portal>
+      <Modal
+        visible={show}
+        contentContainerStyle={styles.modal}
+        onDismiss={() => setShow(false)}>
+        <Text style={styles.title}>Add a set</Text>
+        <TextInput
+          style={styles.text}
+          autoFocus
+          label="Name *"
+          value={name}
+          onChangeText={setName}
+          onSubmitEditing={() => repsRef.current?.focus()}
+        />
+        <TextInput
+          style={styles.text}
+          label="Reps *"
+          keyboardType="numeric"
+          value={reps}
+          onChangeText={setReps}
+          ref={repsRef}
+          onSubmitEditing={() => weightRef.current?.focus()}
+        />
+        <TextInput
+          style={styles.text}
+          label="Weight *"
+          keyboardType="numeric"
+          value={weight}
+          onChangeText={setWeight}
+          onSubmitEditing={save}
+          ref={weightRef}
+        />
+        <TextInput
+          style={styles.text}
+          label="Unit (kg)"
+          value={unit}
+          onChangeText={setUnit}
+          ref={unitRef}
+          onSubmitEditing={save}
+        />
+        <TextInput
+          style={styles.text}
+          label="Created"
+          disabled
+          value={created.toLocaleString()}
+        />
+        <View style={styles.bottom}>
+          <Button mode="contained" icon="save" onPress={save}>
+            Save
+          </Button>
+          <Button icon="close" onPress={() => setShow(false)}>
+            Cancel
+          </Button>
+          <Button
+            style={{alignSelf: 'flex-end'}}
+            icon="trash"
+            onPress={remove}
+            disabled={!id}>
+            Delete
+          </Button>
+        </View>
+      </Modal>
+    </Portal>
   );
 }
 
 const styles = StyleSheet.create({
   modal: {
-    height: '100%',
     backgroundColor: 'black',
     padding: 20,
   },

Home.tsx

@@ -7,7 +7,7 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
-import {List, Searchbar} from 'react-native-paper';
+import {AnimatedFAB, Button, Searchbar} from 'react-native-paper';
 import Alarm from './Alarm';
 import {getDb} from './db';
 import EditSet from './EditSet';
@@ -90,13 +90,23 @@ export default function Home() {
         <Alarm />
         <EditSet
           id={id}
-          setId={setId}
           show={showEdit}
           setShow={setShowEdit}
           onSave={save}
           onRemove={refresh}
         />
       </View>
+
+      <AnimatedFAB
+        extended={false}
+        label="Add"
+        icon="add"
+        style={{position: 'absolute', right: 20, bottom: 20}}
+        onPress={() => {
+          setId(undefined);
+          setShowEdit(true);
+        }}
+      />
     </SafeAreaView>
   );
 }