resetting state after submit (todo: add confirmation message), update posts screen after aprove or deny

app.json

@@ -41,10 +41,17 @@
                     "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone",
                     "recordAudioAndroid": true
                 }
+            ],
+            [
+                "expo-secure-store",
+                {
+                    "configureAndroidBackup": true,
+                    "faceIDPermission": "Allow $(PRODUCT_NAME) to access your Face ID biometric data."
+                }
             ]
         ],
         "experiments": {
             "typedRoutes": true
         }
     }
-}
+}

app/(tabs)/_layout.tsx

@@ -1,6 +1,6 @@
-import Ionicons from '@expo/vector-icons/Ionicons';
+import Ionicons from '@expo/vector-icons/Ionicons'
-import { Tabs } from 'expo-router';
+import { Tabs } from 'expo-router'
-import React from 'react';
+import React from 'react'
 
 export default function TabLayout() {
     return (
@@ -8,29 +8,49 @@ export default function TabLayout() {
             screenOptions={{
                 tabBarActiveTintColor: '#ffd33d',
                 headerStyle: {
-                    backgroundColor: '#25292e',
+                    backgroundColor: '#25292e'
                 },
                 headerShadowVisible: false,
                 headerTintColor: '#fff',
                 tabBarStyle: {
-                    backgroundColor: '#25292e',
+                    backgroundColor: '#25292e'
-                },
+                }
-            }}>
+            }}
-            <Tabs.Screen name="index" options={{
+        >
-                title: 'Home', headerShown: false, tabBarIcon: ({ color, focused }) => (
+            <Tabs.Screen
-                    <Ionicons name={focused ? 'home-sharp' : 'home-outline'} color={color} size={24} />
+                name='index'
-                )
+                options={{
-            }} />
+                    title: 'Home',
-            <Tabs.Screen name="posts" options={{
+                    headerShown: false,
-                title: 'Posts', headerShown: false, tabBarIcon: ({ color, focused }) => (
+                    tabBarIcon: ({ color, focused }) => (
-                    <Ionicons name={focused ? 'rocket-sharp' : 'rocket-outline'} size={24} color={color} />
+                        <Ionicons name={focused ? 'home-sharp' : 'home-outline'} color={color} size={24} />
-                )
+                    )
-            }} />
+                }}
-            <Tabs.Screen name="login" options={{
+            />
-                title: 'Login', headerShown: false, tabBarIcon: ({ color, focused }) => (
+            <Tabs.Screen
-                    <Ionicons name={focused ? 'person-circle-sharp' : 'person-circle-outline'} size={24} color={color} />
+                name='posts'
-                )
+                options={{
-            }} />
+                    title: 'Posts',
+                    headerShown: false,
+                    tabBarIcon: ({ color, focused }) => (
+                        <Ionicons name={focused ? 'rocket-sharp' : 'rocket-outline'} size={24} color={color} />
+                    )
+                }}
+            />
+            <Tabs.Screen
+                name='login'
+                options={{
+                    title: 'Login',
+                    headerShown: false,
+                    tabBarIcon: ({ color, focused }) => (
+                        <Ionicons
+                            name={focused ? 'person-circle-sharp' : 'person-circle-outline'}
+                            size={24}
+                            color={color}
+                        />
+                    )
+                }}
+            />
         </Tabs>
-    );
+    )
 }

app/(tabs)/index.tsx

@@ -9,6 +9,12 @@ export default function App() {
     const [notes, setNotes] = useState('')
     const cameraRef = useRef<CameraView>(null)
 
+    async function resetState() {
+        setPhoto('')
+        setAddress('')
+        setNotes('')
+    }
+
     async function _takePhoto() {
         if (cameraRef.current) {
             let pic = await cameraRef.current.takePictureAsync({
@@ -34,6 +40,11 @@ export default function App() {
                 address,
                 notes
             })
+        }).then((res) => {
+            console.log(res.status)
+            if (res.status === 200) {
+                resetState()
+            }
         })
     }
 
@@ -78,7 +89,7 @@ export default function App() {
                         />
                     </View>
                     <View style={styles.buttonContainer}>
-                        <TouchableOpacity style={styles.button} onPress={() => setPhoto('')}>
+                        <TouchableOpacity style={styles.button} onPress={() => resetState()}>
                             <Text style={styles.text}>Retake</Text>
                         </TouchableOpacity>
                         <TouchableOpacity style={styles.button} onPress={sendData}>

app/(tabs)/posts.tsx

@@ -11,11 +11,7 @@ export default function PostsScreen() {
         React.useCallback(() => {
             // Do something when the screen is focused
             // TODO: add endpoint to get only non approved or denied status posts
-            fetch('http://localhost:3000/api/v1/posts/status/created')
+            fetchData()
-                .then((res) => res.json())
-                .then((json) => {
-                    setPosts(json.data)
-                })
             return () => {
                 // Do something when the screen is unfocused
                 // Useful for cleanup functions
@@ -23,6 +19,14 @@ export default function PostsScreen() {
         }, [])
     )
 
+    async function fetchData() {
+        fetch('http://localhost:3000/api/v1/posts/status/created')
+            .then((res) => res.json())
+            .then((json) => {
+                setPosts(json.data)
+            })
+    }
+
     async function approvePost(postID: string) {
         // add code to update post to approved status
         console.log('Approving post ' + postID)
@@ -35,6 +39,8 @@ export default function PostsScreen() {
             body: JSON.stringify({
                 status: 'approved'
             })
+        }).then(() => {
+            fetchData()
         })
     }
 
@@ -50,6 +56,8 @@ export default function PostsScreen() {
             body: JSON.stringify({
                 status: 'denied'
             })
+        }).then(() => {
+            fetchData()
         })
     }
 
@@ -57,7 +65,7 @@ export default function PostsScreen() {
         <View style={styles.wrapper}>
             <View style={styles.container}>
                 <Text style={styles.text}>Posts</Text>
-                {posts &&
+                {posts?.length ? (
                     posts.map((el) => (
                         <View key={el._id} style={styles.posts}>
                             <Text style={styles.text}>{el._id}</Text>
@@ -101,7 +109,12 @@ export default function PostsScreen() {
                                 </TouchableOpacity>
                             </View>
                         </View>
-                    ))}
+                    ))
+                ) : (
+                    <View style={styles.caughtUpContainer}>
+                        <Text style={styles.caughtUpText}>All caught up!</Text>
+                    </View>
+                )}
             </View>
         </View>
     )
@@ -128,5 +141,13 @@ const styles = StyleSheet.create({
         padding: 10,
         width: '90%',
         borderRadius: 5
+    },
+    caughtUpContainer: {
+        flex: 1,
+        alignContent: 'center',
+        justifyContent: 'center'
+    },
+    caughtUpText: {
+        color: '#787b80ff'
     }
 })

app/_layout.tsx

@@ -1,9 +1,9 @@
-import { Stack } from "expo-router";
+import { Stack } from 'expo-router'
 
 export default function RootLayout() {
-  return (
+    return (
         <Stack>
-            <Stack.Screen name="(tabs)" options={{ headerShown: false }}></Stack.Screen>
+            <Stack.Screen name='(tabs)' options={{ headerShown: false }}></Stack.Screen>
         </Stack>
-    );
+    )
 }

package-lock.json

@@ -22,6 +22,7 @@
         "expo-image": "~2.4.0",
         "expo-linking": "~7.1.7",
         "expo-router": "~5.1.4",
+        "expo-secure-store": "~14.2.3",
         "expo-splash-screen": "~0.30.10",
         "expo-status-bar": "~2.2.3",
         "expo-symbols": "~0.4.5",
@@ -6468,6 +6469,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/expo-secure-store": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/expo-secure-store/-/expo-secure-store-14.2.3.tgz",
+      "integrity": "sha512-hYBbaAD70asKTFd/eZBKVu+9RTo9OSTMMLqXtzDF8ndUGjpc6tmRCoZtrMHlUo7qLtwL5jm+vpYVBWI8hxh/1Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-splash-screen": {
       "version": "0.30.10",
       "resolved": "https://registry.npmjs.org/expo-splash-screen/-/expo-splash-screen-0.30.10.tgz",

package.json

@@ -41,7 +41,8 @@
     "react-native-web": "~0.20.0",
     "react-native-webview": "13.13.5",
     "uuid": "^11.1.0",
-    "expo-file-system": "~18.1.11"
+    "expo-file-system": "~18.1.11",
+    "expo-secure-store": "~14.2.3"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",