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

2025-08-05 10:22:48 -05:00
parent e49674a755
commit 813cb44637
7 changed files with 107 additions and 37 deletions
--- a/app.json
+++ b/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
        }
    }
-}
+}
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@@ -1,6 +1,6 @@
-import Ionicons from '@expo/vector-icons/Ionicons';
-import { Tabs } from 'expo-router';
-import React from 'react';
+import Ionicons from '@expo/vector-icons/Ionicons'
+import { Tabs } from 'expo-router'
+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',
-                },
-            }}>
-            <Tabs.Screen name="index" options={{
-                title: 'Home', headerShown: false, tabBarIcon: ({ color, focused }) => (
-                    <Ionicons name={focused ? 'home-sharp' : 'home-outline'} color={color} size={24} />
-                )
-            }} />
-            <Tabs.Screen 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} />
-                )
-            }} />
+                    backgroundColor: '#25292e'
+                }
+            }}
+        >
+            <Tabs.Screen
+                name='index'
+                options={{
+                    title: 'Home',
+                    headerShown: false,
+                    tabBarIcon: ({ color, focused }) => (
+                        <Ionicons name={focused ? 'home-sharp' : 'home-outline'} color={color} size={24} />
+                    )
+                }}
+            />
+            <Tabs.Screen
+                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>
-    );
+    )
 }
--- a/app/(tabs)/index.tsx
+++ b/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}>
--- a/app/(tabs)/posts.tsx
+++ b/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')
-                .then((res) => res.json())
-                .then((json) => {
-                    setPosts(json.data)
-                })
+            fetchData()
            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'
    }
 })
--- a/app/_layout.tsx
+++ b/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>
-    );
+    )
 }
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",