From 64c4d83bc28efe414c541cd27885afee4904e166 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Haakon=20Helmen=20Rus=C3=A5s?= <haakon.s.helmen@gmail.com>
Date: Sun, 19 Nov 2023 18:28:32 +0100
Subject: [PATCH] Feature/local storage (#75)

* chore: adding async  storage package

* feat: adding store and retrieve functions

* remove log statement

* feat: adding local storage

* fix: adding types to local storage

* fix: move getLocalState to api dir
- remove useLocalStorage hook
- use new fetching logic

* fix: refactor marks form to seperate component

* fix: typo corrected by wife

* styles: general style changes

* styles: better table styling
---
 .../siktemerker/components/MarksForm.tsx      |  93 +++++++++++++++
 .../{ => components}/MarksTable.tsx           |  42 +++++--
 app/(tabs)/siktemerker/index.tsx              | 110 ++++--------------
 components/common/Input.tsx                   |   4 +-
 package-lock.json                             |  31 +++++
 package.json                                  |   3 +-
 utils/LocalStorage/getLocalStorage.ts         |  20 ++++
 utils/LocalStorage/storeLocal.ts              |  18 +++
 utils/index.ts                                |   2 +
 9 files changed, 222 insertions(+), 101 deletions(-)
 create mode 100644 app/(tabs)/siktemerker/components/MarksForm.tsx
 rename app/(tabs)/siktemerker/{ => components}/MarksTable.tsx (55%)
 create mode 100644 utils/LocalStorage/getLocalStorage.ts
 create mode 100644 utils/LocalStorage/storeLocal.ts

diff --git a/app/(tabs)/siktemerker/components/MarksForm.tsx b/app/(tabs)/siktemerker/components/MarksForm.tsx
new file mode 100644
index 0000000..bd4f231
--- /dev/null
+++ b/app/(tabs)/siktemerker/components/MarksForm.tsx
@@ -0,0 +1,93 @@
+import React, { FC } from 'react';
+import { Keyboard, StyleSheet, View } from 'react-native';
+
+import { Button, Input } from '../../../../components/common';
+import { MarkValue } from '../../../../types';
+import { formatNumber } from '../../../../utils';
+import { useCalcForm } from '../useCalcForm';
+
+interface MarksFormProps {
+  status: string;
+  sendMarks: (newMark: MarkValue) => Promise<void>;
+}
+
+const MarksForm: FC<MarksFormProps> = ({ sendMarks, status }) => {
+  const [{ aimError, aimValue, distanceError, distanceValue }, dispatch] = useCalcForm();
+
+  function handleDistanceChange(value: string) {
+    dispatch({ type: 'SET_DISTANCE_VALUE', payload: value });
+  }
+
+  function handleAimChange(value: string) {
+    dispatch({ type: 'SET_AIM_VALUE', payload: value });
+  }
+
+  async function handleAddMark() {
+    if (!aimValue) {
+      dispatch({ type: 'SET_AIM_ERROR', payload: true });
+    }
+    if (!distanceValue) {
+      dispatch({ type: 'SET_DISTANCE_ERROR', payload: true });
+    }
+    if (aimValue && distanceValue) {
+      const newEntry: MarkValue = { aim: parseFloat(aimValue), distance: parseFloat(distanceValue) };
+
+      await sendMarks(newEntry);
+      dispatch({ type: 'SET_AIM_VALUE', payload: '' });
+      dispatch({ type: 'SET_DISTANCE_VALUE', payload: '' });
+      Keyboard.dismiss();
+    }
+  }
+
+  return (
+    <View style={styles.form}>
+      <View>
+        <Input
+          textAlign="center"
+          maxLength={100}
+          label="Avstand"
+          onBlur={() => dispatch({ type: 'SET_DISTANCE_ERROR', payload: false })}
+          placeholderText="F.eks. 20"
+          keyboardType="numeric"
+          error={distanceError}
+          errorMessage="Fyll inn"
+          value={distanceValue}
+          onChangeText={(value) => handleDistanceChange(formatNumber(value))}
+        />
+      </View>
+      <View>
+        <Input
+          textAlign="center"
+          maxLength={15}
+          label="Merke"
+          onBlur={() => dispatch({ type: 'SET_AIM_ERROR', payload: false })}
+          placeholderText="F.eks. 2.3"
+          keyboardType="numeric"
+          value={aimValue}
+          error={aimError}
+          errorMessage="Fyll inn"
+          onChangeText={(value) => handleAimChange(formatNumber(value))}
+        />
+      </View>
+      <Button
+        type="filled"
+        width={100}
+        loading={status === 'pending'}
+        buttonStyle={{ marginLeft: 'auto', marginTop: 16 }}
+        onPress={handleAddMark}
+        label="Beregn"
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  form: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    marginBottom: 32,
+  },
+});
+
+export default MarksForm;
diff --git a/app/(tabs)/siktemerker/MarksTable.tsx b/app/(tabs)/siktemerker/components/MarksTable.tsx
similarity index 55%
rename from app/(tabs)/siktemerker/MarksTable.tsx
rename to app/(tabs)/siktemerker/components/MarksTable.tsx
index 07c717c..31af6ec 100644
--- a/app/(tabs)/siktemerker/MarksTable.tsx
+++ b/app/(tabs)/siktemerker/components/MarksTable.tsx
@@ -1,8 +1,8 @@
 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';
+import Button from '../../../../components/common/Button';
+import { CalculatedMarks } from '../../../../types';
 
 interface CalculationTableProps {
   ballistics: CalculatedMarks | null;
@@ -13,10 +13,10 @@ export default function MarksTable({ ballistics, removeMark }: CalculationTableP
   const renderBallisticTable = () => {
     if (ballistics) {
       return ballistics.given_distances.map((distance, index) => (
-        <View style={styles.tr} key={index}>
-          <Text>{distance.toFixed(1)}m</Text>
-          <Text>{ballistics.given_marks[index].toFixed(2)}</Text>
-          <Text>{ballistics.calculated_marks[index].toFixed(2)}</Text>
+        <View style={[styles.tr, index % 2 === 0 ? styles.evenRow : styles.oddRow]} key={index}>
+          <Text style={styles.trData}>{distance.toFixed(1)}m</Text>
+          <Text style={styles.trData}>{ballistics.given_marks[index].toFixed(2)}</Text>
+          <Text style={styles.trData}>{ballistics.calculated_marks[index].toFixed(2)}</Text>
           <Button
             icon={<FontAwesomeIcon icon={faTrash} color="red" />}
             label="Fjern"
@@ -32,11 +32,11 @@ export default function MarksTable({ ballistics, removeMark }: CalculationTableP
 
   return (
     <View>
-      <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>
+      <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
+        <Text style={[styles.thead, styles.heading]}>Avstand</Text>
+        <Text style={[styles.thead, styles.heading]}>Merke</Text>
+        <Text style={[styles.thead, styles.heading]}>Beregnet</Text>
+        <Text style={styles.theadEnd}></Text>
       </View>
       {renderBallisticTable()}
     </View>
@@ -49,13 +49,31 @@ const styles = StyleSheet.create({
     height: 48,
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-around',
+    justifyContent: 'space-between',
+  },
+  trData: {
+    flex: 1,
+    textAlign: 'center',
+  },
+  evenRow: {
+    backgroundColor: '#F8F8F8',
+  },
+  oddRow: {
+    backgroundColor: '#FFF',
   },
   thead: {
     fontWeight: 'bold',
     fontSize: 16,
     marginTop: 8,
   },
+  theadEnd: {
+    width: '20%',
+  },
+  heading: {
+    flex: 1,
+    textAlign: 'center',
+    marginBottom: 8,
+  },
   info: {
     marginTop: 8,
     fontSize: 16,
diff --git a/app/(tabs)/siktemerker/index.tsx b/app/(tabs)/siktemerker/index.tsx
index 2f33455..a013fec 100644
--- a/app/(tabs)/siktemerker/index.tsx
+++ b/app/(tabs)/siktemerker/index.tsx
@@ -1,17 +1,23 @@
 import * as Sentry from '@sentry/react-native';
-import { useState } from 'react';
+import { useEffect, 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 { Ballistics, getLocalStorage, storeLocalStorage, useBallisticsParams } from '../../../utils/';
+import MarksForm from './components/MarksForm';
+import MarksTable from './components/MarksTable';
 
 export default function Calculate() {
-  const [calculatedMarks, setCalculatedMarks] = useState<CalculatedMarks>(null);
+  const [ballistics, setBallistics] = useState<CalculatedMarks | null>(null);
   const { error, status, calculateBallisticsParams } = useBallisticsParams();
-  const [{ aimError, aimValue, distanceError, distanceValue }, dispatch] = useCalcForm();
+
+  useEffect(() => {
+    getLocalStorage<CalculatedMarks>('ballistics').then((data) => {
+      if (data) {
+        setBallistics(data);
+      }
+    });
+  }, []);
 
   async function sendMarks(newMark: MarkValue) {
     const body: AimDistanceMark = {
@@ -20,50 +26,26 @@ export default function Calculate() {
       new_given_distance: newMark.distance,
     };
 
-    if (calculatedMarks) {
-      body.given_marks = calculatedMarks.given_marks;
-      body.given_distances = calculatedMarks.given_distances;
+    if (ballistics) {
+      body.given_marks = ballistics.given_marks;
+      body.given_distances = ballistics.given_distances;
     }
-    console.log('body', body);
 
     try {
       const aimMarkResponse = await calculateBallisticsParams(body);
       if (aimMarkResponse) {
-        setCalculatedMarks(aimMarkResponse);
-        // TODO: Store in local storage
+        storeLocalStorage(aimMarkResponse, 'ballistics').then(async () => {
+          const ballisticsData = await getLocalStorage<CalculatedMarks>('ballistics');
+          setBallistics(ballisticsData);
+        });
       }
     } catch (error) {
       Sentry.captureException(error);
     }
   }
 
-  function handleDistanceChange(value: string) {
-    dispatch({ type: 'SET_DISTANCE_VALUE', payload: value });
-  }
-
-  function handleAimChange(value: string) {
-    dispatch({ type: 'SET_AIM_VALUE', payload: value });
-  }
-
-  async function handleAddMark() {
-    if (!aimValue) {
-      dispatch({ type: 'SET_AIM_ERROR', payload: true });
-    }
-    if (!distanceValue) {
-      dispatch({ type: 'SET_DISTANCE_ERROR', payload: true });
-    }
-    if (aimValue && distanceValue) {
-      const newEntry: MarkValue = { aim: parseFloat(aimValue), distance: parseFloat(distanceValue) };
-
-      await sendMarks(newEntry);
-      dispatch({ type: 'SET_AIM_VALUE', payload: '' });
-      dispatch({ type: 'SET_DISTANCE_VALUE', payload: '' });
-      Keyboard.dismiss();
-    }
-  }
-
   async function handleRemoveMark(index: number) {
-    const newDistances = calculatedMarks.given_distances.filter((distance, i) => i === index);
+    const newDistances = ballistics.given_distances.filter((_distance: any, i: number) => i === index);
 
     await sendMarks({ aim: 9999, distance: newDistances[0] });
   }
@@ -72,50 +54,13 @@ export default function Calculate() {
     <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
       <View style={{ flex: 1 }}>
         <Text style={styles.title}>Siktemerker</Text>
-        <View style={styles.form}>
-          <View>
-            <Input
-              textAlign="right"
-              maxLength={100}
-              label="Avstand"
-              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))}
-            />
-          </View>
-          <View>
-            <Input
-              textAlign="right"
-              maxLength={15}
-              label="Merke"
-              onBlur={() => dispatch({ type: 'SET_AIM_ERROR', payload: false })}
-              placeholderText="F.eks. 2.35"
-              keyboardType="numeric"
-              value={aimValue}
-              error={aimError}
-              errorMessage="Fyll inn siktemerke"
-              onChangeText={(value) => handleAimChange(formatNumber(value))}
-            />
-          </View>
-          <Button
-            type="filled"
-            width={100}
-            loading={status === 'pending'}
-            buttonStyle={{ marginLeft: 'auto', marginTop: 16 }}
-            onPress={handleAddMark}
-            label="Beregn"
-          />
-        </View>
+        <MarksForm sendMarks={sendMarks} status={status} />
         {error && (
           <>
-            <View style={{ marginBottom: 8, padding: 8 }}>Obs, noe gikk galt. Prøv igjen senere.</View>
+            <View style={{ marginBottom: 8, padding: 8 }}>Oisann, noe gikk galt. Prøv igjen senere.</View>
           </>
         )}
-        <MarksTable ballistics={calculatedMarks} removeMark={handleRemoveMark} />
+        <MarksTable ballistics={ballistics} removeMark={handleRemoveMark} />
       </View>
     </TouchableWithoutFeedback>
   );
@@ -127,11 +72,4 @@ const styles = StyleSheet.create({
     marginBottom: 16,
     marginTop: 16,
   },
-  form: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 16,
-  },
 });
diff --git a/components/common/Input.tsx b/components/common/Input.tsx
index 2e80cae..4aa7616 100644
--- a/components/common/Input.tsx
+++ b/components/common/Input.tsx
@@ -15,7 +15,7 @@ const Input = ({ label, error, errorMessage, placeholderText, ...props }: InputP
   const textInputColor = editableTextInputColor;
 
   const styles = StyleSheet.create({
-    container: { marginBottom: 16, height: 54 },
+    container: { marginBottom: 16, height: 54, marginRight: 8 },
     label: { color: textInputColor, fontWeight: '500', fontSize: 16, marginBottom: 4 },
     input: {
       backgroundColor: '#FFF',
@@ -24,7 +24,7 @@ const Input = ({ label, error, errorMessage, placeholderText, ...props }: InputP
       width: '100%',
       borderColor: textInputColor,
       borderWidth: 1,
-      borderRadius: 4,
+      borderRadius: 12,
     },
   });
 
diff --git a/package-lock.json b/package-lock.json
index 4ae2f3f..427a999 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@fortawesome/free-regular-svg-icons": "^6.4.2",
         "@fortawesome/free-solid-svg-icons": "^6.4.2",
         "@fortawesome/react-native-fontawesome": "^0.3.0",
+        "@react-native-async-storage/async-storage": "1.18.2",
         "@sentry/react-native": "5.5.0",
         "@testing-library/react-native": "^12.3.1",
         "axios": "^1.6.0",
@@ -4550,6 +4551,17 @@
         "react": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@react-native-async-storage/async-storage": {
+      "version": "1.18.2",
+      "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.18.2.tgz",
+      "integrity": "sha512-dM8AfdoeIxlh+zqgr0o5+vCTPQ0Ru1mrPzONZMsr7ufp5h+6WgNxQNza7t0r5qQ6b04AJqTlBNixTWZxqP649Q==",
+      "dependencies": {
+        "merge-options": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react-native": "^0.0.0-0 || 0.60 - 0.72 || 1000.0.0"
+      }
+    },
     "node_modules/@react-native-community/cli": {
       "version": "11.3.7",
       "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-11.3.7.tgz",
@@ -12168,6 +12180,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-plain-obj": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
+      "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-plain-object": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
@@ -15076,6 +15096,17 @@
       "resolved": "https://registry.npmjs.org/memory-cache/-/memory-cache-0.2.0.tgz",
       "integrity": "sha512-OcjA+jzjOYzKmKS6IQVALHLVz+rNTMPoJvCztFaZxwG14wtAW7VRZjwTQu06vKCYOxh4jVnik7ya0SXTB0W+xA=="
     },
+    "node_modules/merge-options": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/merge-options/-/merge-options-3.0.4.tgz",
+      "integrity": "sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==",
+      "dependencies": {
+        "is-plain-obj": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
diff --git a/package.json b/package.json
index 0e9b1f4..02e8fa7 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,8 @@
     "react-native-screens": "~3.22.1",
     "react-native-svg": "13.9.0",
     "react-native-web": "~0.19.6",
-    "sentry-expo": "~7.0.0"
+    "sentry-expo": "~7.0.0",
+    "@react-native-async-storage/async-storage": "1.18.2"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",
diff --git a/utils/LocalStorage/getLocalStorage.ts b/utils/LocalStorage/getLocalStorage.ts
new file mode 100644
index 0000000..f7b398f
--- /dev/null
+++ b/utils/LocalStorage/getLocalStorage.ts
@@ -0,0 +1,20 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import * as Sentry from '@sentry/react-native';
+
+/**
+ * Function to retrieve data from local storage on device.
+ *
+ * @param key Key to retrieve data from local storage.
+ * @returns Data stored under key.
+ */
+const getLocalStorage = async <T>(key: string): Promise<T | null> => {
+  try {
+    const jsonValue = await AsyncStorage.getItem(key);
+    return jsonValue != null ? JSON.parse(jsonValue) : null;
+  } catch (error) {
+    Sentry.captureException(error);
+    return null;
+  }
+};
+
+export default getLocalStorage;
diff --git a/utils/LocalStorage/storeLocal.ts b/utils/LocalStorage/storeLocal.ts
new file mode 100644
index 0000000..fc01467
--- /dev/null
+++ b/utils/LocalStorage/storeLocal.ts
@@ -0,0 +1,18 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import * as Sentry from '@sentry/react-native';
+
+/**
+ *
+ * Function to store data in local storage on device.
+ *
+ * @param value Data to store in local storage
+ * @param key Key to store data under
+ */
+export const storeLocalStorage = async (value, key: string) => {
+  try {
+    const jsonValue = JSON.stringify(value);
+    await AsyncStorage.setItem(key, jsonValue);
+  } catch (error) {
+    Sentry.captureException(error);
+  }
+};
diff --git a/utils/index.ts b/utils/index.ts
index df9c92c..65e6ff3 100644
--- a/utils/index.ts
+++ b/utils/index.ts
@@ -1,3 +1,5 @@
 export { Ballistics } from './Constants';
+export { default as getLocalStorage } from './LocalStorage/getLocalStorage';
+export { storeLocalStorage } from './LocalStorage/storeLocal';
 export { formatNumber } from './helpers/formatNumber';
 export { default as useBallisticsParams } from './hooks/useBallisticsParams';