diff --git a/components/BookDetails.js b/components/BookDetails.js index 14d8916..92f5a2e 100644 --- a/components/BookDetails.js +++ b/components/BookDetails.js @@ -9,6 +9,9 @@ import { IoStar as Star, IoStarOutline as StarOutline, } from "react-icons/io5"; +import { supabaseClient } from "../lib/client"; +import { useRouter } from "next/router"; +import { useEffect, useState } from "react"; export function BookDetails({ id, @@ -16,6 +19,13 @@ export function BookDetails({ isSearch = true, isLibrary = false, }) { + const router = useRouter(); + const user = supabaseClient.auth.user(); + + // Hacky way to remove data from list.\ + // TODO: Use a reducer instead + const [removed, setRemoved] = useState(false); + const extractThumbnail = ({ imageLinks }) => { const DEFAULT_THUMBNAIL = "https://via.placeholder.com/180x280"; if (!imageLinks || !imageLinks.thumbnail) { @@ -32,6 +42,144 @@ export function BookDetails({ }); }; + const bookData = (id, volumeInfo) => { + return [ + { + user_id: user.id, + g_id: id, + title: volumeInfo.title, + authors: + volumeInfo.authors !== undefined + ? volumeInfo.authors[0] + : "Unknown", + thumbnail: extractThumbnail(volumeInfo), + categories: + volumeInfo.categories === undefined + ? "Others" + : volumeInfo.categories[0], + rating: volumeInfo.averageRating, + }, + ]; + }; + + const existingBookData = (id, volumeInfo) => { + return [ + { + user_id: user.id, + g_id: id, + title: volumeInfo.title, + authors: volumeInfo.authors, + thumbnail: volumeInfo.thumbnail, + categories: volumeInfo.categories, + rating: volumeInfo.averageRating, + }, + ]; + }; + + const moveToLibrary = (id, volumeInfo) => { + if (user) { + supabaseClient + .from("book_library") + .insert(existingBookData(id, volumeInfo)) + .then(({ data, error }) => { + if (!error) { + supabaseClient + .from("book_wishlist") + .delete() + .eq("g_id", id) + .then(({ data, error }) => { + if (!error) { + setRemoved(true); + console.log(data); + } else { + console.log(error); + } + }); + } else { + console.log(error); + } + }); + // router.reload(window.location.pathname); + console.log("Moved to Library", id, volumeInfo); + } + }; + + const addToWishlist = (id, volumeInfo) => { + if (user) { + supabaseClient + .from("book_wishlist") + .insert(bookData(id, volumeInfo)) + .then(({ data, error }) => { + if (!error) { + setRemoved(true); + console.log(data); + } else { + console.log(error); + } + }); + // router.reload(window.location.pathname); + console.log("Added to Wishlist", id, volumeInfo); + } + }; + + const addToLibrary = (id, volumeInfo) => { + if (user) { + supabaseClient + .from("book_library") + .insert(bookData(id, volumeInfo)) + .then(({ data, error }) => { + if (!error) { + setRemoved(true); + console.log(data); + } else { + console.log(error); + } + }); + // router.reload(window.location.pathname); + console.log("Added to Library", id, volumeInfo); + } + }; + + const deleteFromWishlist = (id, volumeInfo) => { + if (user) { + supabaseClient + .from("book_wishlist") + .delete() + .eq("g_id", id) + .then(({ data, error }) => { + if (!error) { + setRemoved(true); + console.log(data); + } else { + console.log(error); + } + }); + // router.reload(window.location.pathname); + console.log("Deleted from Wishlist", id, volumeInfo); + } + }; + + const deleteFromLibrary = (id, volumeInfo) => { + if (user) { + supabaseClient + .from("book_library") + .delete() + .eq("g_id", id) + .then(({ data, error }) => { + if (!error) { + setRemoved(true); + console.log(data); + } else { + console.log(error); + } + }); + // router.reload(window.location.pathname); + console.log("Deleted from Library", id, volumeInfo); + } + }; + + if (removed) return
; + return (
- by {volumeInfo.authors} + by{" "} + {isSearch + ? volumeInfo.authors !== undefined && + volumeInfo.authors[0] + : volumeInfo.authors} - {volumeInfo.categories === undefined - ? "Others" + {isSearch + ? volumeInfo.categories === undefined + ? "Others" + : volumeInfo.categories : volumeInfo.categories} } variant="outline" - onClick={() => - console.log("Wishlisted", id, volumeInfo) - } + onClick={() => addToWishlist(id, volumeInfo)} /> } variant="outline" - onClick={() => - console.log( - "Added to Library", - id, - volumeInfo - ) - } + onClick={() => addToLibrary(id, volumeInfo)} /> ) : ( @@ -131,8 +281,7 @@ export function BookDetails({ - console.log( - "Deleted from Library", + deleteFromLibrary( id, volumeInfo ) @@ -147,8 +296,7 @@ export function BookDetails({ - console.log( - "Moved to Library", + moveToLibrary( id, volumeInfo ) @@ -158,8 +306,7 @@ export function BookDetails({ - console.log( - "Deleted from Wishlist", + deleteFromWishlist( id, volumeInfo ) diff --git a/pages/library.js b/pages/library.js index aa839ac..2def558 100644 --- a/pages/library.js +++ b/pages/library.js @@ -8,6 +8,7 @@ import { NextSeo } from "next-seo"; import useSWR from "swr"; import { supabaseClient } from "../lib/client"; import { useEffect, useState } from "react"; +import { libStatus } from "../utils/listener"; const fetcher = (...args) => fetch(...args).then((res) => res.json()); @@ -33,12 +34,23 @@ function Library() { setName(data[0].first_name || ""); } }); + + supabaseClient + .from("book_library") + .select("*") + .eq("user_id", user.id) + .then(({ data, error }) => { + if (!error) { + setData(data); + console.log(data); + } + }); } }, [user]); - React.useEffect(() => { - if (bookData) setData(bookData.items); - }, [bookData]); + // React.useEffect(() => { + // if (bookData) setData(bookData.items); + // }, [bookData]); return (
@@ -75,15 +87,37 @@ function Library() { }} > {data && - data.map(({ id, volumeInfo }) => ( - - ))} + data.length > 0 && + data.map( + ({ + user_id, + g_id, + title, + authors, + thumbnail, + categories, + rating, + }) => { + const volumeInfo = { + user_id, + g_id, + title, + authors, + thumbnail, + categories, + rating, + }; + return ( + + ); + } + )}
diff --git a/pages/wishlist.js b/pages/wishlist.js index 9e94e1a..b49f13f 100644 --- a/pages/wishlist.js +++ b/pages/wishlist.js @@ -19,9 +19,22 @@ function Wishlist() { fetcher ); - React.useEffect(() => { - if (bookData) setData(bookData.items); - }, [bookData]); + const user = supabaseClient.auth.user(); + + useEffect(() => { + if (user) { + supabaseClient + .from("book_wishlist") + .select("*") + .eq("user_id", user.id) + .then(({ data, error }) => { + if (!error) { + setData(data); + console.log(data); + } + }); + } + }, [user]); return (
@@ -54,15 +67,36 @@ function Wishlist() { }} > {data && - data.map(({ id, volumeInfo }) => ( - - ))} + data.map( + ({ + user_id, + g_id, + title, + authors, + thumbnail, + categories, + rating, + }) => { + const volumeInfo = { + user_id, + g_id, + title, + authors, + thumbnail, + categories, + rating, + }; + return ( + + ); + } + )}
diff --git a/utils/listener.js b/utils/listener.js new file mode 100644 index 0000000..d14b544 --- /dev/null +++ b/utils/listener.js @@ -0,0 +1,4 @@ +import { useEffect, useState } from "react"; + +export const libStatus = true; +export const wishlistStatus = true;