Design fix

app.json

@@ -9,7 +9,7 @@
       "policy": "sdkVersion"
     },
     "orientation": "portrait",
-    "icon": "./assets/images/KITAPP.png",
+    "icon": "./assets/images/kitlog.png",
     "userInterfaceStyle": "automatic",
     "newArchEnabled": true,
     "ios": {
@@ -24,20 +24,20 @@
       }
     },
     "splash": {
-      "image": "./assets/images/KITAPP.png",
-      "resizeMode": "cover",
-      "backgroundColor": "#4B6E7C"
+      "image": "./assets/images/kitlog.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#b7caaf"
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/images/KITAPP.png",
-        "backgroundColor": "#4B6E7C"
+        "foregroundImage": "./assets/images/kitlog.png",
+        "backgroundColor": "#b7caaf"
       }
     },
     "web": {
       "bundler": "metro",
       "output": "static",
-      "favicon": "./assets/images/KITAPP.png"
+      "favicon": "./assets/images/kitlog.png"
     },
     "extra": {
       "eas": {

src/components/CurrentPageSection.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  TextInput,
+  StyleSheet,
+} from "react-native";
+import { colors } from "../constants/colors";
+import { sizes } from "../constants/sizes";
+import { useTranslation } from "react-i18next";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+interface CurrentPageSectionProps {
+  book: any;
+  setParsedBook: React.Dispatch<React.SetStateAction<any>>;
+}
+
+export const CurrentPageSection: React.FC<CurrentPageSectionProps> = ({
+  book,
+  setParsedBook,
+}) => {
+  const { t } = useTranslation();
+
+  const handleCurrentPageChange = async (newCurPage: number) => {
+    setParsedBook((prevBook: any) => ({
+      ...prevBook,
+      currentPage: newCurPage,
+    }));
+    try {
+      const existingBooks = await AsyncStorage.getItem("books");
+      const books = existingBooks ? JSON.parse(existingBooks) : [];
+      const updatedBooks = books.map((b: any) => {
+        return {
+          ...b,
+          currentPage: b.title === book.title ? newCurPage : b.currentPage,
+        };
+      });
+      await AsyncStorage.setItem("books", JSON.stringify(updatedBooks));
+    } catch (error) {
+      console.error("Error updating favorite page", error);
+    }
+  };
+
+  return (
+    <>
+      <Text style={styles.label}>{t("current_page")}</Text>
+      <View style={styles.incrementContainer}>
+        <TouchableOpacity
+          style={styles.incrementButton}
+          onPress={() => {
+            const newCurPage = book.currentPage - 1;
+            handleCurrentPageChange(newCurPage);
+          }}
+        >
+          <Text style={styles.incrementButtonText}>-</Text>
+        </TouchableOpacity>
+        <TextInput
+          style={styles.incrementInput}
+          value={String(book.currentPage)}
+          keyboardType="numeric"
+          onChangeText={(text) => {
+            const newCurPage = parseInt(text, 10) || 0;
+            handleCurrentPageChange(newCurPage);
+          }}
+        />
+        <TouchableOpacity
+          style={styles.incrementButton}
+          onPress={() => {
+            const newCurPage = book.currentPage + 1;
+            handleCurrentPageChange(newCurPage);
+          }}
+        >
+          <Text style={styles.incrementButtonText}>+</Text>
+        </TouchableOpacity>
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  label: {
+    fontWeight: "bold",
+    color: colors.textPrimary,
+    fontSize: sizes.fontSizeSmall,
+  },
+  incrementContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 10,
+  },
+  incrementButton: {
+    padding: 10,
+    backgroundColor: colors.primary,
+    borderRadius: sizes.borderRadius,
+  },
+  incrementButtonText: {
+    color: colors.white,
+    fontSize: sizes.fontSizeMedium,
+  },
+  incrementInput: {
+    width: 50,
+    height: 40,
+    textAlign: "center",
+    borderColor: colors.secondary,
+    borderWidth: 1,
+    marginHorizontal: 10,
+    borderRadius: sizes.borderRadius,
+    color: colors.textPrimary,
+    fontSize: sizes.fontSizeMedium,
+  },
+});

src/components/CurrentlyReadingBook.tsx

@@ -7,6 +7,7 @@ import { useNavigation } from "@react-navigation/native";
 import { StackNavigationProp } from "@react-navigation/stack";
 import { useTranslation } from "react-i18next";
 import { ProgressBar } from "react-native-paper";
+import { getSecureImageUrl } from "../util/getSecureImageUrl";
 
 type RootStackParamList = {
   BookPreview: {
@@ -18,7 +19,6 @@ type RootStackParamList = {
       publication: string;
       review: string;
       rating: number;
-      saveDate: Date;
       status: string;
       favPage?: number;
       favPageImage?: string;
@@ -33,36 +33,23 @@ type BookScreenNavigationProp = StackNavigationProp<
 >;
 
 type CurrentlyReadingBookProps = {
-  title: string;
-  author: string;
-  image: string;
-  pages: string;
-  publication: string;
-  review: string;
-  rating: number;
-  status: string;
-  favPage?: number;
-  favPageImage?: string;
-  currentPage?: number;
-};
-
-const getSecureImageUrl = (url: string | undefined) => {
-  if (!url) return "https://via.placeholder.com/128x192?text=No+Cover";
-  return url.replace("http://", "https://").replace("&edge=curl", "");
+  book: any;
 };
 
 export const CurrentlyReadingBook = ({
-  title,
-  author,
-  image,
-  pages,
-  publication,
-  review,
-  rating,
-  status,
-  favPage,
-  favPageImage,
-  currentPage,
+  book: {
+    title,
+    author,
+    image,
+    pages,
+    publication,
+    review,
+    rating,
+    status,
+    favPage,
+    favPageImage,
+    currentPage,
+  },
 }: CurrentlyReadingBookProps) => {
   const navigation = useNavigation<BookScreenNavigationProp>();
   const { t } = useTranslation();
@@ -76,7 +63,6 @@ export const CurrentlyReadingBook = ({
         publication,
         review,
         rating,
-        saveDate: new Date(),
         status,
         favPage,
         favPageImage,
@@ -92,7 +78,7 @@ export const CurrentlyReadingBook = ({
           source={
             image
               ? { uri: getSecureImageUrl(image) }
-              : require("../../assets/images/unknownBook.jpg")
+              : require("../../assets/images/noCover.jpg")
           }
           style={styles.image}
         />
@@ -107,12 +93,18 @@ export const CurrentlyReadingBook = ({
             <View style={styles.iconContainer}>
               <Ionicons name="book-outline" size={16} color={colors.white} />
               <Text style={styles.pagesText}>
-                {t("current_page")}: {currentPage}
+                {t("current_page")}: {currentPage?.toString() || "0"}
               </Text>
             </View>
             <ProgressBar
-              progress={currentPage ? currentPage / parseInt(pages) : 0}
-              color={colors.textSecondary}
+              progress={
+                !isNaN(
+                  parseInt(currentPage?.toString() || "0") / parseInt(pages)
+                )
+                  ? parseInt(currentPage?.toString() || "0") / parseInt(pages)
+                  : 0
+              }
+              color={colors.sliderSecondary}
               style={styles.progressBar}
             />
           </View>

src/components/CustomDropDownPicker.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import DropDownPicker from "react-native-dropdown-picker";
+import { colors } from "../constants/colors";
+import { useTranslation } from "react-i18next";
+import { View } from "react-native";
+
+interface CustomDropDownPickerProps {
+  open: boolean;
+  value: string;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setValue: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export const CustomDropDownPicker = ({
+  open,
+  value,
+  setOpen,
+  setValue,
+}: CustomDropDownPickerProps) => {
+  const { t } = useTranslation();
+
+  const items = [
+    { label: t("read"), value: "read" },
+    { label: t("to_read"), value: "to_read" },
+    { label: t("currently_reading"), value: "currently_reading" },
+  ];
+  const getStatusLabel = (statusKey: string) => {
+    switch (statusKey) {
+      case "read":
+        return t("read");
+      case "to_read":
+        return t("to_read");
+      case "currently_reading":
+        return t("currently_reading");
+    }
+  };
+  return (
+    <View>
+      <DropDownPicker
+        open={open}
+        value={value}
+        items={items}
+        setOpen={setOpen}
+        setValue={setValue}
+        setItems={() => {}}
+        style={styles.statusDropdown}
+        dropDownContainerStyle={{
+          backgroundColor: colors.background,
+          borderColor: colors.secondary,
+        }}
+        selectedItemContainerStyle={{
+          backgroundColor: colors.backgroundSecondary,
+        }}
+        placeholder={getStatusLabel(value)}
+      />
+    </View>
+  );
+};
+const styles = {
+  statusDropdown: {
+    backgroundColor: colors.background,
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: colors.secondary,
+  },
+};