adding confirm modal for removing marks

app/(tabs)/siktemerker/components/ConfirmRemoveMarks.tsx

@@ -0,0 +1,58 @@
+import { Modal, StyleSheet, Text, View } from 'react-native';
+import { Button } from '../../../../components/common';
+import { CalculatedMarks } from '../../../../types';
+import { storeLocalStorage } from '../../../../utils';
+
+interface Props {
+  modalVisible: boolean;
+  setBallistics: (ballistics: CalculatedMarks | null) => void;
+  closeModal: () => void;
+}
+
+const ConfirmRemoveMarks = ({ modalVisible, setBallistics, closeModal }: Props) => {
+  function handleRemoveMarks() {
+    storeLocalStorage(null, 'ballistics').then(() => {
+      setBallistics(null);
+      closeModal();
+    });
+  }
+
+  return (
+    <Modal transparent visible={modalVisible} animationType="fade">
+      <View style={styles.modal}>
+        <Text style={{ fontSize: 18 }}>Bekreft fjerning av siktemerker</Text>
+        <View style={styles.buttons}>
+          <Button type="outline" label="Avbryt" onPress={closeModal} />
+          <Button width={100} label="Ja" onPress={handleRemoveMarks} />
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modal: {
+    marginTop: 'auto',
+    marginBottom: '40%',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    height: 160,
+    width: '80%',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    shadowColor: 'black',
+    shadowOpacity: 0.25,
+    shadowRadius: 8,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 5,
+    borderRadius: 8,
+    backgroundColor: 'white',
+  },
+  buttons: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+});
+
+export default ConfirmRemoveMarks;

app/(tabs)/siktemerker/components/index.ts

@@ -1,3 +1,4 @@
+export { default as ConfirmRemoveMarks } from './ConfirmRemoveMarks';
 export { default as MarksForm } from './MarksForm';
 export { default as MarksTable } from './MarksTable';
 export { default as SetModal } from './SetModal';

app/(tabs)/siktemerker/index.tsx

@@ -5,10 +5,11 @@ import { Keyboard, StyleSheet, Text, TouchableWithoutFeedback, View } from 'reac
 import { Button } from '../../../components/common';
 import { AimDistanceMark, CalculatedMarks, MarkValue } from '../../../types';
 import { Ballistics, getLocalStorage, storeLocalStorage, useBallisticsParams } from '../../../utils/';
-import { MarksForm, MarksTable, SetModal } from './components';
+import { ConfirmRemoveMarks, MarksForm, MarksTable, SetModal } from './components';
 
 export default function Calculate() {
   const [modalVisible, setModalVisible] = useState(false);
+  const [conformationModalVisible, setConformationModalVisible] = useState(false);
   const [ballistics, setBallistics] = useState<CalculatedMarks | null>(null);
   const { error, status, calculateBallisticsParams } = useBallisticsParams();
 
@@ -68,15 +69,7 @@ export default function Calculate() {
         <MarksTable ballistics={ballistics} removeMark={handleRemoveMark} />
         {ballistics && ballistics.given_marks.length > 0 && (
           <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 'auto' }}>
-            <Button
-              label="Fjern merker"
-              type="outline"
-              onPress={() => {
-                storeLocalStorage(null, 'ballistics').then(() => {
-                  setBallistics(null);
-                });
-              }}
-            />
+            <Button label="Fjern merker" type="outline" onPress={() => setConformationModalVisible(true)} />
             <Button label="Lagre sett" type="filled" onPress={() => openModal()} />
           </View>
         )}
@@ -86,6 +79,11 @@ export default function Calculate() {
           setBallistics={setBallistics}
           ballistics={ballistics}
         />
+        <ConfirmRemoveMarks
+          modalVisible={conformationModalVisible}
+          setBallistics={setBallistics}
+          closeModal={() => setConformationModalVisible(false)}
+        />
       </View>
     </TouchableWithoutFeedback>
   );