From d063c69172628e74abeb6cac8754e1e36f20e0b8 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Mon, 30 Jun 2025 16:09:49 +1000
Subject: [PATCH] feat: use zustand manage credentials globally

---
 app/_layout.tsx       |  1 +
 app/feed_list.tsx     |  8 ++++++++
 app/login.tsx         | 17 ++++++++---------
 package-lock.json     | 32 +++++++++++++++++++++++++++++++-
 package.json          |  3 ++-
 store/index.ts        |  3 +++
 store/useAuthStore.ts | 32 ++++++++++++++++++++++++++++++++
 7 files changed, 85 insertions(+), 11 deletions(-)
 create mode 100644 app/feed_list.tsx
 create mode 100644 store/index.ts
 create mode 100644 store/useAuthStore.ts

diff --git a/app/_layout.tsx b/app/_layout.tsx
index d274750..86be8b7 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -21,6 +21,7 @@ export default function RootLayout() {
     <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
       <Stack>
         <Stack.Screen name="login" options={{ title: "Login" }} />
+				<Stack.Screen name="feed_list" options={{title: "Feed List"}} />
         <Stack.Screen name="+not-found" />
       </Stack>
       <StatusBar style="auto" />
diff --git a/app/feed_list.tsx b/app/feed_list.tsx
new file mode 100644
index 0000000..38bed56
--- /dev/null
+++ b/app/feed_list.tsx
@@ -0,0 +1,8 @@
+import { View } from 'react-native'
+
+export default function FeedListView() {
+  return (
+    <View>
+    </View>
+  )
+}
diff --git a/app/login.tsx b/app/login.tsx
index 47fdcd7..8ee1260 100644
--- a/app/login.tsx
+++ b/app/login.tsx
@@ -1,21 +1,20 @@
 import { TextInput, View, StyleSheet, Button } from 'react-native'
 import { useState } from 'react'
-import axios from 'axios'
+import { useRouter } from 'expo-router'
+import { useAuthStore } from '../store'
 
 export default function LoginView() {
 	const [username, setUsername] = useState('')
 	const [password, setPassword] = useState('')
+	const router = useRouter()
+	const { verify } = useAuthStore()	
 
 	async function login() {
-		console.log(username, password)
 		try {
-			const res = await axios.get("https://api.feedbin.com/v2/authentication.json", {
-				auth: {
-					username,
-					password
-				}
-			})
-			console.log(res.status)
+			const res = await verify(username, password)
+			if (!res) return
+			// Navigate to feed list on successful login
+			router.push('/feed_list')
 		} catch(e) {
 			console.log("error on verifing your credentials")
 			console.log(e)
diff --git a/package-lock.json b/package-lock.json
index 8295567..b25fae3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,7 +34,8 @@
         "react-native-safe-area-context": "5.4.0",
         "react-native-screens": "~4.11.1",
         "react-native-web": "~0.20.0",
-        "react-native-webview": "13.13.5"
+        "react-native-webview": "13.13.5",
+        "zustand": "^5.0.6"
       },
       "devDependencies": {
         "@babel/core": "^7.25.2",
@@ -12938,6 +12939,35 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.6.tgz",
+      "integrity": "sha512-ihAqNeUVhe0MAD+X8M5UzqyZ9k3FFZLBTtqo6JLPwV53cbRB/mJwBI0PxcIgqhBBHlEs8G45OTDTMq3gNcLq3A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index a46d123..66cc75b 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,8 @@
     "react-native-safe-area-context": "5.4.0",
     "react-native-screens": "~4.11.1",
     "react-native-web": "~0.20.0",
-    "react-native-webview": "13.13.5"
+    "react-native-webview": "13.13.5",
+    "zustand": "^5.0.6"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
diff --git a/store/index.ts b/store/index.ts
new file mode 100644
index 0000000..34051f0
--- /dev/null
+++ b/store/index.ts
@@ -0,0 +1,3 @@
+import useAuthStore from './useAuthStore'
+
+export { useAuthStore }
diff --git a/store/useAuthStore.ts b/store/useAuthStore.ts
new file mode 100644
index 0000000..8d1d1a1
--- /dev/null
+++ b/store/useAuthStore.ts
@@ -0,0 +1,32 @@
+import { create } from 'zustand'
+import axios from 'axios'
+
+type AuthState = {
+	credential?: {
+		username: string,
+		password: string
+	};
+	verify: (username: string, password: string) => Promise<boolean>
+}
+
+export default create<AuthState>(set => ({
+	verify: async (username: string, password: string): Promise<boolean> => {
+		try {
+			const res = await axios.get("https://api.feedbin.com/v2/authentication.json", {
+				auth: { username, password }
+			})
+
+			console.log("verifying")
+
+			if (res.status > 299) return false
+
+			set({
+				credential: { username, password }
+			})
+			return true
+		} catch(e) {
+			console.log(e)
+			return false
+		}
+	}
+}))