Skip to content

Commit

Permalink
added book adding functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@ahnafnafee
ahnafnafee committed Mar 7, 2022
1 parent f6009b3 commit 17f729c
Show file tree
Hide file tree
Showing 4 changed files with 263 additions and 44 deletions.
187 changes: 167 additions & 20 deletions components/BookDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,23 @@ 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,
volumeInfo,
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) {
Expand All @@ -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 <div></div>;

return (
<div key={id}>
<div
Expand All @@ -51,7 +199,11 @@ export function BookDetails({
width={"30%"}
objectFit="contain"
alt="Logo"
src={extractThumbnail(volumeInfo)}
src={
isSearch
? extractThumbnail(volumeInfo)
: volumeInfo.thumbnail
}
align={"center"}
borderRadius={8}
marginRight={4}
Expand All @@ -66,16 +218,22 @@ export function BookDetails({
{volumeInfo.title}
</Text>
<Text fontSize="sm" noOfLines={1}>
by {volumeInfo.authors}
by{" "}
{isSearch
? volumeInfo.authors !== undefined &&
volumeInfo.authors[0]
: volumeInfo.authors}
</Text>
<Text
fontWeight={"light"}
as="i"
fontSize="sm"
noOfLines={1}
>
{volumeInfo.categories === undefined
? "Others"
{isSearch
? volumeInfo.categories === undefined
? "Others"
: volumeInfo.categories
: volumeInfo.categories}
</Text>
<Rating
Expand All @@ -95,21 +253,13 @@ export function BookDetails({
aria-label="wishlist"
icon={<HeartOutline size={20} color="#000" />}
variant="outline"
onClick={() =>
console.log("Wishlisted", id, volumeInfo)
}
onClick={() => addToWishlist(id, volumeInfo)}
/>
<IconButton
aria-label="add-to-library"
icon={<AddOutline size={20} color="#000" />}
variant="outline"
onClick={() =>
console.log(
"Added to Library",
id,
volumeInfo
)
}
onClick={() => addToLibrary(id, volumeInfo)}
/>
</>
) : (
Expand All @@ -131,8 +281,7 @@ export function BookDetails({
<MenuList>
<MenuItem
onClick={() =>
console.log(
"Deleted from Library",
deleteFromLibrary(
id,
volumeInfo
)
Expand All @@ -147,8 +296,7 @@ export function BookDetails({
<MenuList>
<MenuItem
onClick={() =>
console.log(
"Moved to Library",
moveToLibrary(
id,
volumeInfo
)
Expand All @@ -158,8 +306,7 @@ export function BookDetails({
</MenuItem>
<MenuItem
onClick={() =>
console.log(
"Deleted from Wishlist",
deleteFromWishlist(
id,
volumeInfo
)
Expand Down
58 changes: 46 additions & 12 deletions pages/library.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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());

Expand All @@ -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 (
<div className="flex h-full w-screen">
Expand Down Expand Up @@ -75,15 +87,37 @@ function Library() {
}}
>
{data &&
data.map(({ id, volumeInfo }) => (
<BookDetails
key={id}
id={id}
volumeInfo={volumeInfo}
isLibrary={true}
isSearch={false}
/>
))}
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 (
<BookDetails
key={g_id}
id={g_id}
volumeInfo={volumeInfo}
isLibrary={true}
isSearch={false}
/>
);
}
)}
</div>
</div>
</div>
Expand Down
Loading

1 comment on commit 17f729c

@vercel
Copy link

@vercel vercel bot commented on 17f729c Mar 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Checks for Deployment have failed

Please sign in to comment.