add link to favorites

jcosentino11 · Sep 3, 2024 · 85fb195 · 85fb195
1 parent 9e7bbff
commit 85fb195
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/components/HackerNewsProvider.tsx b/components/HackerNewsProvider.tsx
@@ -6,6 +6,7 @@ class HackerNewsState {
   isLoggedIn: boolean = false;
   showLoginError: boolean = false;
   isFavoriting: boolean = false;
+  username: string = '';
   login!: (username: string, password: string) => Promise<void>;
   logout!: () => Promise<void>;
   checkFavorite!: (id: string) => Promise<boolean>;
@@ -25,6 +26,7 @@ export const HackerNewsProvider: React.FC<Props> = ({ children }) => {
   const [showLoginError, setShowLoginError] = useState(false);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [isFavoriting, setIsFavoriting] = useState(false);
+  const [username, setUsername] = useState('');
 
   useEffect(() => {
     loadIsLoggedIn();
@@ -34,6 +36,12 @@ export const HackerNewsProvider: React.FC<Props> = ({ children }) => {
     setShowLoginError(false);
   }, [showLoginModal])
 
+  useEffect(() => {
+    if (!isLoggedIn) {
+      setUsername('');
+    }
+  }, [isLoggedIn])
+
   const loadIsLoggedIn = useCallback(async () => {
     if (await alreadyLoggedIn()) {
       setIsLoggedIn(true);
@@ -64,6 +72,7 @@ export const HackerNewsProvider: React.FC<Props> = ({ children }) => {
       }
 
       setIsLoggedIn(true);
+      setUsername(username);
       setShowLoginModal(false);
     } catch {
       setShowLoginError(true);
@@ -177,6 +186,7 @@ export const HackerNewsProvider: React.FC<Props> = ({ children }) => {
         isLoggedIn,
         showLoginError,
         isFavoriting,
+        username,
         checkFavorite,
         favorite,
         unfavorite,

diff --git a/components/LoginModal.tsx b/components/LoginModal.tsx
@@ -6,8 +6,10 @@ import {
   TouchableOpacity,
   useColorScheme,
   Modal,
-  TextInput
+  TextInput,
+  Linking
 } from "react-native";
+import Feather from '@expo/vector-icons/Feather';
 import { useThemeColor } from "@/utils/Colors";
 import { LoginContext } from "./HackerNewsProvider";
 
@@ -40,9 +42,17 @@ const LoginModal: React.FC = () => {
             {loginContext.isLoggedIn ? 'Account' : 'Login'}
           </Text>
           {loginContext.isLoggedIn ? (
+            <View>
+            <TouchableOpacity onPress={() => Linking.openURL(`https://news.ycombinator.com/favorites?id=${loginContext.username}`)} style={styles.modalButton}>
+              <View style={styles.buttonContentRow}>
+                <Text style={[styles.modalButtonText, { color: tintColor }]}>View Favorites</Text>
+                <Feather name="external-link" size={18} color={tintColor} style={styles.externalLinkIcon} />
+              </View>
+            </TouchableOpacity>
             <TouchableOpacity onPress={loginContext.logout} style={styles.modalButton}>
               <Text style={[styles.modalButtonText, { color: tintColor }]}>Log Out</Text>
             </TouchableOpacity>
+          </View>
           ) : (
             <>
               {loginContext.showLoginError && (
@@ -119,6 +129,13 @@ const styles = StyleSheet.create({
     borderRadius: 5,
     backgroundColor: 'rgba(255, 0, 0, 0.1)',
   },
+  buttonContentRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  externalLinkIcon: {
+    marginLeft: 8,
+  },
 });
 
 export default LoginModal;