Feat/delete single mark (#72)

* Remove old unused webstorm config files

* fix: edit prettier config

* ci: upgrade typescript

* ci: upgrade babel, testing-library

* ci: upgrade fontawesome

* ci: update prettier config

* ci: upgrade packages

* ci: expo fix dep

* fix: refactor marks form to submit single mark-distance

* ci: fix eslint and prettier

* fix: refactor out function to helpers dir

* fix: add comment for storing marks to local storage

* misc file

* fix: sending new marks to calc func

* feat: adding icon prop to button

* feat: adding trash icon

* feat: adding width prop to button

* feat: adding error state and error message

* fix: refactor  imports in utils

* fix: remove marks
BUG: can't remove the last mark

%ProgramData%/Microsoft/Windows/UUS/State/_active.uusver

@@ -0,0 +1 @@
+1023.922.9182.0

.eslintrc

@@ -0,0 +1,10 @@
+{
+  "rules": {
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ]
+  }
+}

.prettierrc

@@ -3,5 +3,7 @@
   "tabWidth": 2,
   "singleQuote": true,
   "bracketSameLine": true,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "semi": true,
+  "endOfLine": "auto"
 }

app/(tabs)/siktemerker/MarksTable.tsx

@@ -1,5 +1,6 @@
+import { faTrash } from '@fortawesome/free-solid-svg-icons/faTrash';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 import { StyleSheet, Text, View } from 'react-native';
-
 import Button from '../../../components/common/Button';
 import { CalculatedMarks } from '../../../types';
 
@@ -16,7 +17,12 @@ export default function MarksTable({ ballistics, removeMark }: CalculationTableP
           <Text>{distance.toFixed(1)}m</Text>
           <Text>{ballistics.given_marks[index].toFixed(2)}</Text>
           <Text>{ballistics.calculated_marks[index].toFixed(2)}</Text>
-          <Button label="Fjern" type="outline" onPress={() => removeMark(index)} />
+          <Button
+            icon={<FontAwesomeIcon icon={faTrash} color="red" />}
+            label="Fjern"
+            type="outline"
+            onPress={() => removeMark(index)}
+          />
         </View>
       ));
     } else {
@@ -26,11 +32,11 @@ export default function MarksTable({ ballistics, removeMark }: CalculationTableP
 
   return (
     <View>
-      <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
+      <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-around' }}>
         <Text style={styles.thead}>Avstand</Text>
         <Text style={styles.thead}>Merke</Text>
         <Text style={styles.thead}>Beregnet</Text>
-        <Text style={styles.thead} />
+        <Text style={styles.thead}></Text>
       </View>
       {renderBallisticTable()}
     </View>
@@ -43,11 +49,7 @@ const styles = StyleSheet.create({
     height: 48,
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  td: {
-    display: 'flex',
-    alignItems: 'center',
+    justifyContent: 'space-around',
   },
   thead: {
     fontWeight: 'bold',

app/(tabs)/siktemerker/index.tsx

@@ -2,46 +2,41 @@ import * as Sentry from '@sentry/react-native';
 import { useState } from 'react';
 import { Keyboard, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
 
+import { Button, Input } from '../../../components/common';
+import { AimDistanceMark, CalculatedMarks, MarkValue } from '../../../types';
+import { Ballistics, formatNumber, useBallisticsParams } from '../../../utils/';
 import MarksTable from './MarksTable';
 import { useCalcForm } from './useCalcForm';
-import { Button, Input } from '../../../components/common';
-import { AimDistanceMark, CalculatedMarks, MarkValue, Status } from '../../../types';
-import { Ballistics } from '../../../utils/Constants';
-import useBallisticsParams from '../../../utils/hooks/useBallisticsParams';
 
 export default function Calculate() {
-  const [marks, setMarks] = useState<MarkValue[]>([]);
   const [calculatedMarks, setCalculatedMarks] = useState<CalculatedMarks>(null);
-  const { status, error, calculateBallisticsParams } = useBallisticsParams();
+  const { error, status, calculateBallisticsParams } = useBallisticsParams();
   const [{ aimError, aimValue, distanceError, distanceValue }, dispatch] = useCalcForm();
 
-  async function sendMarks(marks: MarkValue[]) {
+  async function sendMarks(newMark: MarkValue) {
     const body: AimDistanceMark = {
       ...Ballistics,
-      marks: marks.map((mark) => mark.aim),
-      given_distances: marks.map((mark) => mark.distance),
+      new_given_mark: newMark.aim,
+      new_given_distance: newMark.distance,
     };
 
-    /* if (calculatedMarks) {
-       body.marks.push(...calculatedMarks.given_marks);
-       body.given_distances.push(...calculatedMarks.given_distances);
-     }*/
+    if (calculatedMarks) {
+      body.given_marks = calculatedMarks.given_marks;
+      body.given_distances = calculatedMarks.given_distances;
+    }
+    console.log('body', body);
+
     try {
       const aimMarkResponse = await calculateBallisticsParams(body);
       if (aimMarkResponse) {
-        await setCalculatedMarks(aimMarkResponse);
-        // TODO: Implement getBallistics
-        //await getBallistics();
+        setCalculatedMarks(aimMarkResponse);
+        // TODO: Store in local storage
       }
     } catch (error) {
       Sentry.captureException(error);
     }
   }
 
-  function markCalculation() {
-    sendMarks(marks);
-  }
-
   function handleDistanceChange(value: string) {
     dispatch({ type: 'SET_DISTANCE_VALUE', payload: value });
   }
@@ -50,7 +45,7 @@ export default function Calculate() {
     dispatch({ type: 'SET_AIM_VALUE', payload: value });
   }
 
-  function handleAddMark() {
+  async function handleAddMark() {
     if (!aimValue) {
       dispatch({ type: 'SET_AIM_ERROR', payload: true });
     }
@@ -59,23 +54,18 @@ export default function Calculate() {
     }
     if (aimValue && distanceValue) {
       const newEntry: MarkValue = { aim: parseFloat(aimValue), distance: parseFloat(distanceValue) };
-      setMarks((prevState) => (prevState ? [...prevState, newEntry] : [newEntry]));
+
+      await sendMarks(newEntry);
       dispatch({ type: 'SET_AIM_VALUE', payload: '' });
       dispatch({ type: 'SET_DISTANCE_VALUE', payload: '' });
       Keyboard.dismiss();
     }
   }
 
-  function handleRemoveMark(index: number) {
-    if (calculatedMarks) {
-      calculatedMarks.given_marks.splice(index, 1);
-      calculatedMarks.given_distances.splice(index, 1);
-    }
-  }
+  async function handleRemoveMark(index: number) {
+    const newDistances = calculatedMarks.given_distances.filter((distance, i) => i === index);
 
-  // Write a function that takes in the input 3,4 and returns 3.4
-  function formatNumber(number: string) {
-    return number.replace(',', '.');
+    await sendMarks({ aim: 9999, distance: newDistances[0] });
   }
 
   return (
@@ -91,10 +81,11 @@ export default function Calculate() {
               onBlur={() => dispatch({ type: 'SET_DISTANCE_ERROR', payload: false })}
               placeholderText="F.eks. 20"
               keyboardType="numeric"
+              error={distanceError}
+              errorMessage="Fyll inn avstand"
               value={distanceValue}
               onChangeText={(value) => handleDistanceChange(formatNumber(value))}
             />
-            {distanceError && <Text style={{ color: 'red' }}>Fyll inn avstand</Text>}
           </View>
           <View>
             <Input
@@ -105,15 +96,18 @@ export default function Calculate() {
               placeholderText="F.eks. 2.35"
               keyboardType="numeric"
               value={aimValue}
+              error={aimError}
+              errorMessage="Fyll inn siktemerke"
               onChangeText={(value) => handleAimChange(formatNumber(value))}
             />
-            {aimError && <Text style={{ color: 'red' }}>Fyll inn siktemerke</Text>}
           </View>
           <Button
-            type="outline"
+            type="filled"
+            width={100}
+            loading={status === 'pending'}
             buttonStyle={{ marginLeft: 'auto', marginTop: 16 }}
             onPress={handleAddMark}
-            label="Legg til"
+            label="Beregn"
           />
         </View>
         {error && (
@@ -122,19 +116,6 @@ export default function Calculate() {
           </>
         )}
         <MarksTable ballistics={calculatedMarks} removeMark={handleRemoveMark} />
-        <Button
-          type="filled"
-          loading={status === Status.Pending}
-          disabled={status === Status.Pending || marks.length === 0}
-          buttonStyle={{
-            alignSelf: 'flex-end',
-            position: 'absolute',
-            bottom: 8,
-            width: '100%',
-          }}
-          onPress={markCalculation}
-          label="Beregn siktemerker"
-        />
       </View>
     </TouchableWithoutFeedback>
   );
@@ -150,7 +131,7 @@ const styles = StyleSheet.create({
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'flex-end',
+    alignItems: 'center',
     marginBottom: 16,
   },
 });

components/common/Button.tsx

@@ -5,6 +5,8 @@ interface ButtonProps extends PressableProps {
   buttonStyle?: ViewStyle;
   textStyle?: TextStyle;
   label: string;
+  width?: number;
+  icon?: React.ReactNode;
   disabled?: boolean;
   type?: 'filled' | 'outline';
   loading?: boolean;
@@ -14,6 +16,8 @@ const Button: React.FC<ButtonProps> = ({
   buttonStyle,
   textStyle,
   label,
+  icon,
+  width,
   disabled,
   type = 'filled',
   loading = false,
@@ -30,6 +34,7 @@ const Button: React.FC<ButtonProps> = ({
           backgroundColor: buttonColor,
           justifyContent: 'center',
           alignItems: 'center',
+          width: width,
           paddingVertical: 12,
           paddingHorizontal: 24,
           borderRadius: 4,
@@ -42,7 +47,7 @@ const Button: React.FC<ButtonProps> = ({
       {loading ? (
         <ActivityIndicator testID="ActivityIndicator" size={16} color={textColor} />
       ) : (
-        <Text style={[textStyle, { color: textColor }]}>{label}</Text>
+        icon || <Text style={[textStyle, { color: textColor }]}>{label}</Text>
       )}
     </Pressable>
   );

components/common/Input.tsx

@@ -6,13 +6,16 @@ const editableTextInputColor = '#494949';
 
 interface InputProps extends TextInputProps {
   label: string;
+  error: boolean;
+  errorMessage?: string;
   placeholderText?: string;
 }
 
-const Input = ({ label, placeholderText, ...props }: InputProps) => {
+const Input = ({ label, error, errorMessage, placeholderText, ...props }: InputProps) => {
   const textInputColor = editableTextInputColor;
 
   const styles = StyleSheet.create({
+    container: { marginBottom: 16, height: 54 },
     label: { color: textInputColor, fontWeight: '500', fontSize: 16, marginBottom: 4 },
     input: {
       backgroundColor: '#FFF',
@@ -26,7 +29,7 @@ const Input = ({ label, placeholderText, ...props }: InputProps) => {
   });
 
   return (
-    <View accessible accessibilityLabel={isAndroid ? label : `${label}${': Disabled!'}`}>
+    <View style={styles.container} accessible accessibilityLabel={isAndroid ? label : `${label}${': Disabled!'}`}>
       <Text style={styles.label}>{label}</Text>
       <TextInput
         testID="input"
@@ -35,6 +38,7 @@ const Input = ({ label, placeholderText, ...props }: InputProps) => {
         placeholderTextColor={textInputColor}
         {...props}
       />
+      {error && <Text style={{ color: 'red', fontSize: 13 }}>{errorMessage}</Text>}
     </View>
   );
 };