Merge pull request #783 from bounswe/MOBILE-773

Bookmarking Words Connection to Backend (Mobile)
bounswe · Dec 14, 2024 · ecabd68 · ecabd68
2 parents f73cbdc + 400c0c5
commit ecabd68
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 28 deletions.
diff --git a/mobile/bulingo/app/(tabs)/profile/bookmarkedWords.tsx b/mobile/bulingo/app/(tabs)/profile/bookmarkedWords.tsx
@@ -21,22 +21,21 @@ export default function BookmarkedWords() {
 
   useEffect(() => {
     const fetchFollowers = async () => {
-      const url = "bookmarked-words/"  // Placeholder
+      const url = "word/bookmarks/"  // Placeholder
       try {
-        // const response = await TokenManager.authenticatedFetch(url, {
-        //   method: 'GET',
-        //   headers: {
-        //     'Content-Type': 'application/json',
-        //   },
-        // });
+        const response = await TokenManager.authenticatedFetch(url, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        });
 
-        // if (response.ok){
-        //   const result = await response.json()
-        //   setBookmarkedWords(result);  // Placeholder
-        // } else {
-        //   console.log(response.status)
-        // };
-        setBookmarkedWords(['plane', 'welcome', 'brother', 'mediocre'])  // Here for testing only
+        if (response.ok){
+          const result = await response.json()
+          setBookmarkedWords(result.bookmarked_words); 
+        } else {
+          console.log(response.status)
+        };
       } catch (error) {
         console.error(error);
       }

diff --git a/mobile/bulingo/app/(tabs)/profile/following.tsx b/mobile/bulingo/app/(tabs)/profile/following.tsx
@@ -17,7 +17,7 @@ export default function Following() {
   const [following, setFollowing] = useState<UserInfoCompact[]>([])
 
   useEffect(() => {
-    const ENDPOINT_URL = "http://161.35.208.249:8000/following";  // Placeholder
+    const ENDPOINT_URL = "http://64.226.76.231:8000/following";  // Placeholder
     const fetchFollowing = async () => {
       const username = TokenManager.getUsername();
       if (username === undefined){

diff --git a/mobile/bulingo/app/(tabs)/profile/likedPostsAndComments.tsx b/mobile/bulingo/app/(tabs)/profile/likedPostsAndComments.tsx
@@ -15,7 +15,7 @@ export default function Followers() {
   ])
 
   useEffect(() => {
-    const ENDPOINT_URL = "http://161.35.208.249:8000/likedpostandcomments";  // Placeholder
+    const ENDPOINT_URL = "http://64.226.76.231:8000/likedpostandcomments";  // Placeholder
     const fetchFollowers = async () => {
       const params = {
         // TODO

diff --git a/mobile/bulingo/app/(tabs)/quizzes/index.tsx b/mobile/bulingo/app/(tabs)/quizzes/index.tsx
@@ -4,7 +4,7 @@ import { router } from 'expo-router';
 import QuizCard from '@/app/components/quizCard';
 import TokenManager from '@/app/TokenManager';
 
-const BASE_URL = 'http://161.35.208.249:8000';
+const BASE_URL = 'http://64.226.76.231:8000';
 
 const QuizFeed = () => {
   const [quizzes, setQuizzes] = useState<any>([]);

diff --git a/mobile/bulingo/app/TokenManager.ts b/mobile/bulingo/app/TokenManager.ts
@@ -1,7 +1,7 @@
 import * as SecureStore from "expo-secure-store";
 
 
-const BASE_URL = "http://161.35.208.249:8000";
+const BASE_URL = "http://64.226.76.231:8000";
 
 class TokenManager {
   private username: string | null;
@@ -24,7 +24,7 @@ class TokenManager {
 
     if (!refreshToken) throw new Error("No refresh token found");
 
-    const response = await fetch("http://161.35.208.249:8000/refresh", {
+    const response = await fetch("http://64.226.76.231:8000/refresh", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",

diff --git a/mobile/bulingo/app/components/modalDictionary.tsx b/mobile/bulingo/app/components/modalDictionary.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Text, View, StyleSheet, Modal, Pressable, ActivityIndicator, TouchableOpacity, Image, ScrollView } from 'react-native';
 import TokenManager from '../TokenManager';
 import PressableText from '../pressableText';
+import { FontAwesome } from '@expo/vector-icons';
 
 
 type ModalDictionaryProps = {
@@ -27,6 +28,7 @@ function getCorrectForm(input: string) {
 export default function ModalDictionary(props: ModalDictionaryProps){
   const [isLoading, setIsLoading] = useState(true);
   const [wordInfo, setWordInfo] = useState<WordInfo>({meanings: [], translations: []});
+  const [isWordBookmarked, setIsWordBookmarked] = useState(false);
 
   useEffect(() => {
     const fetchWordInfo = async () => {
@@ -38,10 +40,8 @@ export default function ModalDictionary(props: ModalDictionaryProps){
             'Content-Type': 'application/json',
           },
         });
-        console.log("Hello")
         if (response.ok){
           const result = await response.json();
-          console.log(result)
           const meanings: Meaning[] = []
           result.final_info.meanings.forEach((meaning: any) => {
             const [explanation, ...raw_examples] = meaning.comment.split(';')
@@ -63,13 +63,35 @@ export default function ModalDictionary(props: ModalDictionaryProps){
   }, []);
 
 
+  const onBookmarkPress = async () => {
+    const wasWordBookmarked = isWordBookmarked;
+    setIsWordBookmarked(!isWordBookmarked);
+
+    try{
+      const url = `word/${wasWordBookmarked ? 'unbookmark' : 'bookmark'}/${getCorrectForm(props.word)}/`
+      const response = await TokenManager.authenticatedFetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (response.ok){
+        console.log("Word successfully (un)bookmarked")
+      } else {
+        console.log("Word could not be (un)bookmarked")
+        console.error(response.status)
+      };
+    } catch (error) {
+      console.error(error);
+    }
+  }
 
 
   const renderContent = () => {
     if (isLoading){
       return (<ActivityIndicator size={40} style={{margin: 40}}/>);
     }
-    console.log("here")
     return (
       <ScrollView>
         <Pressable style={styles.section}>
@@ -134,8 +156,9 @@ export default function ModalDictionary(props: ModalDictionaryProps){
         <Pressable style={styles.modalContent}>
           <View style={styles.header}>
             <Text style={styles.title}>{getCorrectForm(props.word)}</Text>
-            <TouchableOpacity style={styles.bookmarkButton}>
-              <Image source={require('@/assets/images/bookmark-icon.png')} style={styles.icon} />
+            <TouchableOpacity style={styles.bookmarkButton} onPress={onBookmarkPress}>
+              <FontAwesome name={isWordBookmarked ? "bookmark" : "bookmark-o"} size={30}/>
+              {/* <Image source={require('@/assets/images/bookmark-icon.png')} style={styles.icon} /> */}
             </TouchableOpacity>
           </View>
           {renderContent()}

diff --git a/mobile/bulingo/app/login.tsx b/mobile/bulingo/app/login.tsx
@@ -6,7 +6,7 @@ import Notification from './components/topNotification';
 
 
 
-const LOGIN_URL = "http://161.35.208.249:8000/login/";
+const LOGIN_URL = "http://64.226.76.231:8000/login/";
 
 export default function Home() {
   const [username, setUsername] = useState('');    // State for username

diff --git a/mobile/bulingo/app/pressableText.tsx b/mobile/bulingo/app/pressableText.tsx
@@ -1,6 +1,5 @@
 import React, {useState} from 'react';
 import { View, Pressable, Text, StyleSheet, StyleProp, TextStyle, ViewStyle} from 'react-native';
-import ModalDictionary from './components/modalDictionary';
 
 
 type PressableTextProps = {
@@ -12,6 +11,9 @@ type PressableTextProps = {
 export default function PressableText(props: PressableTextProps){
   const [selectedWord, setSelectedWord] = useState<string | null>(null);
   const [modalVisible, setModalVisible] = useState(false);// Function to handle press and show modal
+  const ModalDictionary = React.lazy(() => import('./components/modalDictionary'));
+
+
   const handleLongPress = (word: string) => {
     setSelectedWord(word);
     setModalVisible(true);
@@ -38,7 +40,9 @@ export default function PressableText(props: PressableTextProps){
 
       {/* Modal for additional information */}
       {selectedWord && modalVisible && (
-        <ModalDictionary onClose={closeModal} word={selectedWord}/>
+        <React.Suspense>
+          <ModalDictionary onClose={closeModal} word={selectedWord} />
+        </React.Suspense>
       )}
     </View>
   );

diff --git a/mobile/bulingo/app/register.tsx b/mobile/bulingo/app/register.tsx
@@ -3,7 +3,7 @@ import { View, Text, TextInput, TouchableOpacity, Image, StyleSheet, TouchableWi
 import { Picker } from '@react-native-picker/picker';
 import {router} from 'expo-router';
 
-const SIGNUP_URL = "http://161.35.208.249:8000/signup/";
+const SIGNUP_URL = "http://64.226.76.231:8000/signup/";
 
 const Register = () => {
   const [email, setEmail] = useState('');

diff --git a/mobile/bulingo/tsconfig.json b/mobile/bulingo/tsconfig.json
@@ -1,6 +1,8 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
+    "module": "esnext",               // Enables modern module syntax
+    "target": "esnext",               // Enables modern JavaScript features
     "strict": true,
     "paths": {
       "@/*": [