updated carousel and book info modal nav

Purdue-CS307-tsundoku · Feb 26, 2024 · 5858bab · 5858bab
1 parent 0bbdd56
commit 5858bab
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 44 deletions.
diff --git a/mobile/Components/BookInfoModal/BookInfoModal.tsx b/mobile/Components/BookInfoModal/BookInfoModal.tsx
@@ -20,28 +20,29 @@ import { BookInfoContext } from "../../Contexts";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useRoute } from "@react-navigation/native";
 
-const bookInfo = {
-  image_url:
-    "https://books.google.com/books/publisher/content?id=Vg89DwAAQBAJ&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE73rzsvlif61bxrCHpuWhCG9sHcM70_AVRP_WRAKm1WxMWWh-sRLdU7S1_9uvA2ZWuAeAhsxgw9_qKgBysyAHbcDGhH8uHunypkFirMeLbIJEgxQl32g0mNdkE7DAWjqLsM4LK_3",
-  title: "The Poppy War",
-  author: "RF Kuang",
-  id: "",
-  summary:
-    "The Poppy War is a 2018 novel by R. F. Kuang, published by Harper Voyager. The Poppy War, a grimdark fantasy, draws its plot and politics from mid-20th-century China, with the conflict in the novel based on the Second Sino-Japanese War, and an atmosphere inspired by the Song dynasty.",
-};
+// const bookInfo = {
+//   image_url:
+//     "https://books.google.com/books/publisher/content?id=Vg89DwAAQBAJ&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE73rzsvlif61bxrCHpuWhCG9sHcM70_AVRP_WRAKm1WxMWWh-sRLdU7S1_9uvA2ZWuAeAhsxgw9_qKgBysyAHbcDGhH8uHunypkFirMeLbIJEgxQl32g0mNdkE7DAWjqLsM4LK_3",
+//   title: "The Poppy War",
+//   author: "RF Kuang",
+//   id: "",
+//   summary:
+//     "The Poppy War is a 2018 novel by R. F. Kuang, published by Harper Voyager. The Poppy War, a grimdark fantasy, draws its plot and politics from mid-20th-century China, with the conflict in the novel based on the Second Sino-Japanese War, and an atmosphere inspired by the Song dynasty.",
+// };
 
-export const BookInfoModal = (props: any) => {
-  const route = useRoute();
+export const BookInfoModal = ({ route, navigation }) => {
+  // const route = useRoute();
+  const { bookInfo } = route.params;
   const [selectedOption, setSelectedOption] = useState("Mark book as read");
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [buttonClicked, setButtonClicked] = useState(false);
-  const { navigation } = props;
+  // const { navigation } = props;
   const [isReviewModalVisible, setIsReviewModalVisible] = useState(false);
-  const toggleReviewModal = () => {
-    setIsReviewModalVisible(!isReviewModalVisible);
-    navigation.navigate("review", { bookInfo: bookInfo });
-  };
-  const toggleNothing = () => {};
+  // const toggleReviewModal = () => {
+  //   setIsReviewModalVisible(!isReviewModalVisible);
+  //   navigation.navigate("review", { bookInfo: bookInfo });
+  // };
+  // const toggleNothing = () => {};
   const readTag = buttonClicked ? "Read" : "Mark book as read";
 
   const dropdownOptions = [
@@ -52,10 +53,10 @@ export const BookInfoModal = (props: any) => {
     "Want to read",
     "Did not finish",
   ];
-  const handlePress = () => {
-    setButtonClicked(true);
-    buttonClicked ? toggleReviewModal : toggleNothing;
-  };
+  // const handlePress = () => {
+  //   setButtonClicked(true);
+  //   buttonClicked ? toggleReviewModal : toggleNothing;
+  // };
 
   const handleOptionSelect = (option: any) => {
     setSelectedOption(option);
@@ -109,7 +110,9 @@ export const BookInfoModal = (props: any) => {
           />
           <ReadingStatusButton
             color={Colors.BUTTON_PURPLE}
-            onPress={() => handlePress}
+            onPress={() =>
+              navigation.navigate("review", { bookInfo: bookInfo })
+            }
           >
             <ReadingNowContainer>
               <ButtonText color={"white"}>

diff --git a/mobile/Components/Carousel/Carousel.tsx b/mobile/Components/Carousel/Carousel.tsx
@@ -9,6 +9,7 @@ import {
   Pressable,
   Image,
   ImageBackground,
+  TouchableOpacity,
 } from "react-native";
 import React, { useContext } from "react";
 import { useState, useEffect, useRef, useCallback } from "react";
@@ -27,6 +28,7 @@ type bookInfo = {
   title: string;
   author: string;
   id: string;
+  summary: string;
   image_url: string;
 };
 
@@ -39,7 +41,7 @@ const BookCard = (
   // </View>
 );
 
-export const Carousel = ({books}) => {
+export const Carousel = ({ books }) => {
   const navigation = useContext(NavigationContext);
   const pan = useRef(new Animated.ValueXY()).current;
 
@@ -51,6 +53,10 @@ export const Carousel = ({books}) => {
   const halfBoxDistance = boxDistance / 2;
   const snapWidth = boxWidth;
 
+  // const toggleBookInfoModal = () => {
+  //   navigation.navigate("bookInfoModal", { bookInfo: books });
+  // };
+
   // TODO: figure out better way of doing this
   // const [books, setBooks] = useState([]);
 
@@ -140,26 +146,32 @@ export const Carousel = ({books}) => {
               }}
             >
               {/* <View style={{ width: boxWidth, backgroundColor: "green"}}> */}
-              <Image
-                style={{
-                  marginVertical: 10,
-                  width: boxWidth,
-                  height: "83%",
-                  justifyContent: "center",
-                  alignItems: "center",
-                  borderRadius: 15,
-                  backgroundColor: "pink",
-                  shadowColor: "black",
-                  shadowOffset: {
-                    width: 3,
-                    height: 4,
-                  },
-                  shadowOpacity: 0.15,
-                  shadowRadius: 5,
-                }}
-                resizeMode="contain"
-                source={{ uri: item.image_url }}
-              />
+              <TouchableOpacity
+                onPress={() =>
+                  navigation.navigate("bookInfoModal", { bookInfo: item })
+                }
+              >
+                <Image
+                  style={{
+                    marginVertical: 10,
+                    width: boxWidth,
+                    height: "83%",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    borderRadius: 15,
+                    backgroundColor: "pink",
+                    shadowColor: "black",
+                    shadowOffset: {
+                      width: 3,
+                      height: 4,
+                    },
+                    shadowOpacity: 0.15,
+                    shadowRadius: 5,
+                  }}
+                  resizeMode="contain"
+                  source={{ uri: item.image_url }}
+                />
+              </TouchableOpacity>
               {/* <BookCard
                   title={item.title}
                   author={item.author}
@@ -178,7 +190,7 @@ export const Carousel = ({books}) => {
         }}
       >
         <Pressable
-          onPress={() => navigation.navigate("shelfModal", {bookData: books})}
+          onPress={() => navigation.navigate("shelfModal", { bookData: books })}
           style={{ backgroundColor: Colors.BUTTON_GRAY, padding: 10 }}
         >
           <Text>View All</Text>