Add favorite page image and number support in book components and scr…

src/components/CurrentlyReadingBook.tsx

@@ -1,12 +1,5 @@
 import React from "react";
-import {
-  View,
-  Text,
-  StyleSheet,
-  Image,
-  TouchableOpacity,
-  Dimensions,
-} from "react-native";
+import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native";
 import { colors } from "../constants/colors";
 import { sizes } from "../constants/sizes";
 import { Ionicons } from "@expo/vector-icons";
@@ -25,6 +18,8 @@ type RootStackParamList = {
       rating: number;
       saveDate: Date;
       status: string;
+      favPage?: number;
+      favPageImage?: string;
     };
   };
 };
@@ -43,6 +38,8 @@ type CurrentlyReadingBookProps = {
   review: string;
   rating: number;
   status: string;
+  favPage?: number;
+  favPageImage?: string;
 };
 
 const getSecureImageUrl = (url: string | undefined) => {
@@ -59,6 +56,8 @@ export const CurrentlyReadingBook = ({
   review,
   rating,
   status,
+  favPage,
+  favPageImage,
 }: CurrentlyReadingBookProps) => {
   const navigation = useNavigation<BookScreenNavigationProp>();
 
@@ -74,6 +73,8 @@ export const CurrentlyReadingBook = ({
         rating,
         saveDate: new Date(),
         status,
+        favPage,
+        favPageImage,
       },
     });
   };

src/components/book.tsx

@@ -19,6 +19,8 @@ type RootStackParamList = {
       rating: number;
       saveDate: Date;
       status: string;
+      favPage?: number;
+      favPageImage?: string;
     };
   };
 };
@@ -53,6 +55,8 @@ export const Book = ({
   review,
   rating,
   status,
+  favPage,
+  favPageImage,
   style,
 }: {
   title: string;
@@ -63,6 +67,8 @@ export const Book = ({
   review: string;
   rating: number;
   status: string;
+  favPage?: number;
+  favPageImage?: string;
   style?: object;
 }) => {
   const navigation = useNavigation<BookScreenNavigationProp>();
@@ -86,6 +92,8 @@ export const Book = ({
         rating,
         saveDate: new Date(),
         status,
+        favPage,
+        favPageImage,
       },
     });
   };

src/i18n/locales/en.json

@@ -55,8 +55,6 @@
   "book_already_in_library": "This book is already in your library!",
   "book_added_to_library": "Book added to library!",
   "failed_to_add_book": "Failed to add book to library",
-  "unknown_author": "Unknown Author",
-  "unknown_publisher": "Unknown Publisher",
   "book_updated_successfully": "Book updated successfully!",
   "book_saved_successfully": "Book saved successfully!",
   "permission_required": "Permission to access photos is required!",
@@ -81,5 +79,8 @@
   "clearFilters": "Clear Filters",
   "select_language": "Select Language",
   "english": "English",
-  "turkish": "Turkish"
+  "turkish": "Turkish",
+  "tap_to_change_fav_page_image": "Tap to change favorite page image",
+  "favPage": "Favorite Page",
+  "favPageNumber": "Favorite Page Number"
 }

src/i18n/locales/tr.json

@@ -56,8 +56,6 @@
   "book_already_in_library": "Bu kitap zaten kütüphanenizde!",
   "book_added_to_library": "Book added to library!",
   "failed_to_add_book": "Kitap kütüphaneye eklenemedi",
-  "unknown_author": "Bilinmeyen Yazar",
-  "unknown_publisher": "Bilinmeyen Yayınevi",
   "book_updated_successfully": "Kitap başarıyla güncellendi!",
   "book_saved_successfully": "Kitap başarıyla kaydedildi!",
   "permission_required": "Fotoğraflara erişim izni gerekli!",
@@ -82,5 +80,8 @@
   "clearFilters": "Filtreleri Temizle",
   "select_language": "Uygulama Dil Seçimi",
   "english": "İngilizce",
-  "turkish": "Türkçe"
+  "turkish": "Türkçe",
+  "tap_to_change_fav_page_image": "Favori sayfa resmini değiştirmek için dokunun",
+  "favPage": "Favori Sayfa",
+  "favPageNumber": "Favori Sayfa Numarası"
 }

src/screens/AddBookScreen.tsx

@@ -45,6 +45,8 @@ export default function AddBookScreen({
   const [review, setReview] = useState("");
   const [rating, setRating] = useState(2.5);
   const [image, setImage] = useState("");
+  const [favPageImage, setFavPageImage] = useState("");
+  const [favPage, setFavPage] = useState(0);
   const [error, setError] = useState("");
   const [errorFields, setErrorFields] = useState<string[]>([]);
   const [status, setStatus] = useState("");
@@ -61,6 +63,8 @@ export default function AddBookScreen({
       setRating(book.rating);
       setImage(book.image);
       setStatus(book.status);
+      setFavPageImage(book.favPageImage);
+      setFavPage(book.favPage);
     }
   }, [isEdit, book]);
 
@@ -83,6 +87,8 @@ export default function AddBookScreen({
       review,
       rating: rating || 2.5,
       image,
+      favPageImage,
+      favPage,
       saveDate: new Date(),
       status,
     };
@@ -111,6 +117,8 @@ export default function AddBookScreen({
       setRating(2.5);
       setImage("");
       setStatus("");
+      setFavPageImage("");
+      setFavPage(0);
       onBookAdded(newBook);
       navigation.navigate("BookPreview" as never, {
         book: newBook,
@@ -146,6 +154,32 @@ export default function AddBookScreen({
     }
   };
 
+  const pickFavPageImage = async () => {
+    try {
+      const permissionResult =
+        await ImagePicker.requestMediaLibraryPermissionsAsync();
+      if (permissionResult.status !== "granted") {
+        alert(t("permission_required"));
+        return;
+      }
+      let result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ImagePicker.MediaTypeOptions.Images,
+        allowsEditing: true,
+        aspect: [2, 3],
+        quality: 0.5,
+      });
+      if (!result.canceled) {
+        const selectedAsset = result.assets[0];
+        if (selectedAsset?.uri) {
+          setFavPageImage(selectedAsset.uri);
+        }
+      }
+    } catch (error) {
+      console.error("Error picking image:", error);
+      alert(t("error_picking_image"));
+    }
+  };
+
   return (
     <Layout title={isEdit ? t("edit_book") : t("add_book")} canGoBack={true}>
       <ScrollView contentContainerStyle={styles.scrollView}>
@@ -274,6 +308,37 @@ export default function AddBookScreen({
                   onChangeText={setPublication}
                 />
               </View>
+
+              <View style={styles.inputContainer}>
+                <Text style={styles.label}>{t("favPageNumber")}</Text>
+                <TextInput
+                  style={styles.input}
+                  value={favPage.toString()}
+                  onChangeText={(text) => setFavPage(Number(text))}
+                  keyboardType="numeric"
+                />
+              </View>
+
+              <TouchableOpacity
+                onPress={pickFavPageImage}
+                style={styles.favPageImage}
+                activeOpacity={0.7}
+              >
+                <Image
+                  source={
+                    favPageImage
+                      ? { uri: favPageImage }
+                      : require("../../assets/images/unknownBook.jpg")
+                  }
+                  style={styles.image}
+                  resizeMode="cover"
+                />
+                <View style={styles.imageOverlay}>
+                  <Text style={styles.imageOverlayText}>
+                    {t("tap_to_change_fav_page_image")}
+                  </Text>
+                </View>
+              </TouchableOpacity>
             </>
           )}
 
@@ -459,4 +524,13 @@ const styles = StyleSheet.create({
     height: 100,
     textAlignVertical: "top",
   },
+  favPageImage: {
+    width: 200,
+    height: 200,
+    borderRadius: sizes.borderRadius,
+    backgroundColor: colors.background,
+    margin: 10,
+    marginLeft: "20%",
+    marginRight: "20%",
+  },
 });

src/screens/BookDetailScreen.tsx

@@ -31,6 +31,8 @@ type BookDetailScreenRouteProp = RouteProp<
           publisher?: string;
           publishedDate?: string;
           categories?: string[];
+          favPageImage?: string;
+          favPageNumber?: string;
           status?: string;
         };
       };

src/screens/BookPreviewScreen.tsx

@@ -22,6 +22,8 @@ type BookPreviewScreenRouteProp = RouteProp<
         image: string;
         saveDate: Date;
         status: string;
+        favPage?: number;
+        favPageImage?: string;
       };
     };
   },
@@ -58,6 +60,7 @@ export default function BookPreviewScreen() {
     ...book,
     saveDate: new Date(book.saveDate),
     status: book.status ? book.status : t("to_read"),
+    favPage: book.favPage ? book.favPage : 0,
   };
 
   const handleEdit = () => {
@@ -124,7 +127,10 @@ export default function BookPreviewScreen() {
       handleEdit={handleEdit}
       handleDelete={handleDelete}
     >
-      <ScrollView contentContainerStyle={styles.container}>
+      <ScrollView
+        contentContainerStyle={styles.scrollViewContent}
+        style={styles.scrollView}
+      >
         <Image
           source={
             parsedBook.image
@@ -169,20 +175,44 @@ export default function BookPreviewScreen() {
         </View>
         <View style={styles.textContainer}>
           <View style={styles.detailsSection}>
-            <Text style={styles.label}>{t("pages")}</Text>
-            <Text style={styles.value}>
-              {parsedBook.pages ? parsedBook.pages : "-"}
-            </Text>
-            <Text style={styles.label}>{t("publication")}</Text>
-            <Text style={styles.value}>
-              {parsedBook.publication
-                ? parsedBook.publication
-                : t("unknown_publisher")}
-            </Text>
-            <Text style={styles.label}>{t("review")}</Text>
-            <Text style={styles.value}>
-              {parsedBook.review ? parsedBook.review : t("no_review")}
-            </Text>
+            {parsedBook.pages && (
+              <>
+                <Text style={styles.label}>{t("pages")}</Text>
+                <Text style={styles.value}>{parsedBook.pages}</Text>
+              </>
+            )}
+            {parsedBook.publication && (
+              <>
+                <Text style={styles.label}>{t("publication")}</Text>
+                <Text style={styles.value}>{parsedBook.publication}</Text>
+              </>
+            )}
+            {parsedBook.review && (
+              <>
+                <Text style={styles.label}>{t("review")}</Text>
+                <Text style={styles.value}>{parsedBook.review}</Text>
+              </>
+            )}
+            {parsedBook.favPageImage && (
+              <>
+                <Text style={styles.label}>
+                  {t("favPage") + " | "}
+                  <Text
+                    style={{
+                      color: colors.textSecondary,
+                      fontSize: sizes.fontSizeSmall,
+                      fontStyle: "italic",
+                    }}
+                  >
+                    {parsedBook.favPage ? parsedBook.favPage : "-"}
+                  </Text>
+                </Text>
+                <Image
+                  source={{ uri: getSecureImageUrl(parsedBook.favPageImage) }}
+                  style={styles.favPageImage}
+                />
+              </>
+            )}
           </View>
         </View>
       </ScrollView>
@@ -242,6 +272,15 @@ const styles = StyleSheet.create({
     backgroundColor: colors.background,
     marginBottom: 10,
   },
+  favPageImage: {
+    width: 200,
+    height: 200,
+    borderRadius: sizes.borderRadius,
+    backgroundColor: colors.background,
+    margin: 10,
+    marginLeft: "20%",
+    marginRight: "20%",
+  },
   status: {
     marginBottom: 5,
     borderRadius: sizes.borderRadius,
@@ -279,4 +318,12 @@ const styles = StyleSheet.create({
     paddingVertical: 10,
     backgroundColor: colors.background,
   },
+  scrollView: {
+    flex: 1,
+  },
+  scrollViewContent: {
+    padding: 20,
+    alignItems: "center",
+    justifyContent: "center",
+  },
 });