From 71e96fed3daf710e2bcf77c902fd446ea9dc314b Mon Sep 17 00:00:00 2001 From: amalv <1252707+amalv@users.noreply.github.com> Date: Mon, 22 Jan 2024 19:51:03 +0100 Subject: [PATCH] refactor: enhance encapsulation in BookCard - Improve directory structure of BookCard for better encapsulation, moving related components into their respective domains. - Split useFavorite hook to encapsulate related logic within its own domain. --- .../CardContent/CardContent.styles.ts | 61 +++++++++++++++++++ .../{ => CardContent}/CardContent.test.tsx | 0 .../{ => CardContent}/CardContent.tsx | 5 +- .../components/BookDetails}/BookDetails.tsx | 0 .../components/BookDetails/index.ts | 1 + .../CircularProgressWithLabel.tsx | 0 .../CircularProgressWithlabel.test.tsx | 0 .../CircularProgressWithLabel/index.ts | 1 + .../CardContent/components/index.ts | 2 + .../BookCard/components/CardContent/index.ts | 1 + .../FavoriteButton.styles.ts | 0 .../{ => FavoriteButton}/FavoriteButton.tsx | 2 +- .../components/FavoriteButton/hooks/index.ts | 1 + .../FavoriteButton/hooks/useAddFavorite.ts} | 45 +------------- .../FavoriteButton/hooks/useFavorite.ts | 17 ++++++ .../hooks}/useFavoriteButton.test.tsx | 5 +- .../hooks}/useFavoriteButton.ts | 2 +- .../FavoriteButton/hooks/useRemoveFavorite.ts | 39 ++++++++++++ .../components/FavoriteButton/index.ts | 1 + .../components/BookCard/components/index.ts | 4 +- 20 files changed, 134 insertions(+), 53 deletions(-) create mode 100644 src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/CardContent.styles.ts rename src/components/LibraryPage/components/Books/components/BookCard/components/{ => CardContent}/CardContent.test.tsx (100%) rename src/components/LibraryPage/components/Books/components/BookCard/components/{ => CardContent}/CardContent.tsx (89%) rename src/components/LibraryPage/components/Books/components/BookCard/components/{ => CardContent/components/BookDetails}/BookDetails.tsx (100%) create mode 100644 src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/components/BookDetails/index.ts rename src/components/LibraryPage/components/Books/components/BookCard/components/{ => CardContent/components/CircularProgressWithLabel}/CircularProgressWithLabel.tsx (100%) rename src/components/LibraryPage/components/Books/components/BookCard/components/{ => CardContent/components/CircularProgressWithLabel}/CircularProgressWithlabel.test.tsx (100%) create mode 100644 src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/components/CircularProgressWithLabel/index.ts create mode 100644 src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/components/index.ts create mode 100644 src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/index.ts rename src/components/LibraryPage/components/Books/components/BookCard/components/{ => FavoriteButton}/FavoriteButton.styles.ts (100%) rename src/components/LibraryPage/components/Books/components/BookCard/components/{ => FavoriteButton}/FavoriteButton.tsx (93%) create mode 100644 src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/hooks/index.ts rename src/components/LibraryPage/components/Books/components/BookCard/{useFavorite.ts => components/FavoriteButton/hooks/useAddFavorite.ts} (53%) create mode 100644 src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/hooks/useFavorite.ts rename src/components/LibraryPage/components/Books/components/BookCard/components/{ => FavoriteButton/hooks}/useFavoriteButton.test.tsx (95%) rename src/components/LibraryPage/components/Books/components/BookCard/components/{ => FavoriteButton/hooks}/useFavoriteButton.ts (96%) create mode 100644 src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/hooks/useRemoveFavorite.ts create mode 100644 src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/index.ts diff --git a/src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/CardContent.styles.ts b/src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/CardContent.styles.ts new file mode 100644 index 0000000..bd4c5b8 --- /dev/null +++ b/src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/CardContent.styles.ts @@ -0,0 +1,61 @@ +import { Card, CardActionArea, CardMedia, CardMediaProps } from "@mui/material"; +import { styled } from "@mui/material/styles"; + +export const CardWrapper = styled(Card)( + ({ theme }) => ` + position: relative; + display: flex; + flex-direction: column; + justify-content: space-between; + margin-bottom: 16px; + border: 1px solid ${theme.palette.divider}; + border-radius: 8px; + transition: box-shadow 0.3s ease-in-out, transform 0.5s ease-in-out; + background: ${ + theme.palette.mode === "dark" ? "#333" : theme.palette.background.paper + }; + + &:hover { + box-shadow: 0 3px 6px ${theme.palette.action.hover}; + transform: translate(2px, 2px); + } + + &:active::before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: ${theme.palette.action.selected}; + transition: background 0.3s ease-in-out; + } +` +); + +export const Cover = styled(CardMedia)` + height: 216px; + object-fit: fill; + border-radius: 8px; + margin-bottom: 8px; +`; + +export const InfoWrapper = styled("div")` + display: flex; + justify-content: space-between; + align-items: center; +`; +export const TextWrapper = styled("div")` + display: flex; + flex-direction: column; + justify-content: center; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex-grow: 1; +`; + +export const CardActionAreaWrapper = styled(CardActionArea)` + padding: 8px; +`; diff --git a/src/components/LibraryPage/components/Books/components/BookCard/components/CardContent.test.tsx b/src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/CardContent.test.tsx similarity index 100% rename from src/components/LibraryPage/components/Books/components/BookCard/components/CardContent.test.tsx rename to src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/CardContent.test.tsx diff --git a/src/components/LibraryPage/components/Books/components/BookCard/components/CardContent.tsx b/src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/CardContent.tsx similarity index 89% rename from src/components/LibraryPage/components/Books/components/BookCard/components/CardContent.tsx rename to src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/CardContent.tsx index 9d8db54..e071c21 100644 --- a/src/components/LibraryPage/components/Books/components/BookCard/components/CardContent.tsx +++ b/src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/CardContent.tsx @@ -1,14 +1,13 @@ import { faker } from "@faker-js/faker"; +import { BookDetails, CircularProgressWithLabel } from "./components"; import { Cover, CardWrapper, InfoWrapper, TextWrapper, CardActionAreaWrapper, -} from "../BookCard.styles"; - -import { CircularProgressWithLabel, BookDetails } from "./"; +} from "./CardContent.styles"; import { Book } from "@/data/books"; diff --git a/src/components/LibraryPage/components/Books/components/BookCard/components/BookDetails.tsx b/src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/components/BookDetails/BookDetails.tsx similarity index 100% rename from src/components/LibraryPage/components/Books/components/BookCard/components/BookDetails.tsx rename to src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/components/BookDetails/BookDetails.tsx diff --git a/src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/components/BookDetails/index.ts b/src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/components/BookDetails/index.ts new file mode 100644 index 0000000..1577858 --- /dev/null +++ b/src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/components/BookDetails/index.ts @@ -0,0 +1 @@ +export * from "./BookDetails"; diff --git a/src/components/LibraryPage/components/Books/components/BookCard/components/CircularProgressWithLabel.tsx b/src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/components/CircularProgressWithLabel/CircularProgressWithLabel.tsx similarity index 100% rename from src/components/LibraryPage/components/Books/components/BookCard/components/CircularProgressWithLabel.tsx rename to src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/components/CircularProgressWithLabel/CircularProgressWithLabel.tsx diff --git a/src/components/LibraryPage/components/Books/components/BookCard/components/CircularProgressWithlabel.test.tsx b/src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/components/CircularProgressWithLabel/CircularProgressWithlabel.test.tsx similarity index 100% rename from src/components/LibraryPage/components/Books/components/BookCard/components/CircularProgressWithlabel.test.tsx rename to src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/components/CircularProgressWithLabel/CircularProgressWithlabel.test.tsx diff --git a/src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/components/CircularProgressWithLabel/index.ts b/src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/components/CircularProgressWithLabel/index.ts new file mode 100644 index 0000000..29f6eda --- /dev/null +++ b/src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/components/CircularProgressWithLabel/index.ts @@ -0,0 +1 @@ +export * from "./CircularProgressWithLabel"; diff --git a/src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/components/index.ts b/src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/components/index.ts new file mode 100644 index 0000000..a93599d --- /dev/null +++ b/src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/components/index.ts @@ -0,0 +1,2 @@ +export * from "./BookDetails"; +export * from "./CircularProgressWithLabel"; diff --git a/src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/index.ts b/src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/index.ts new file mode 100644 index 0000000..7d7c87e --- /dev/null +++ b/src/components/LibraryPage/components/Books/components/BookCard/components/CardContent/index.ts @@ -0,0 +1 @@ +export * from "./CardContent"; diff --git a/src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton.styles.ts b/src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/FavoriteButton.styles.ts similarity index 100% rename from src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton.styles.ts rename to src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/FavoriteButton.styles.ts diff --git a/src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton.tsx b/src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/FavoriteButton.tsx similarity index 93% rename from src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton.tsx rename to src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/FavoriteButton.tsx index c7b8be0..fdee91a 100644 --- a/src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton.tsx +++ b/src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/FavoriteButton.tsx @@ -1,7 +1,7 @@ import Favorite from "@mui/icons-material/Favorite"; import FavoriteBorder from "@mui/icons-material/FavoriteBorder"; -import { useFavoriteButton } from "./useFavoriteButton"; +import { useFavoriteButton } from "./hooks"; import { StyledIconButton } from "./FavoriteButton.styles"; interface FavoriteButtonProps { diff --git a/src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/hooks/index.ts b/src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/hooks/index.ts new file mode 100644 index 0000000..c02f76e --- /dev/null +++ b/src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/hooks/index.ts @@ -0,0 +1 @@ +export * from "./useFavoriteButton"; diff --git a/src/components/LibraryPage/components/Books/components/BookCard/useFavorite.ts b/src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/hooks/useAddFavorite.ts similarity index 53% rename from src/components/LibraryPage/components/Books/components/BookCard/useFavorite.ts rename to src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/hooks/useAddFavorite.ts index 9c7428f..3377a5b 100644 --- a/src/components/LibraryPage/components/Books/components/BookCard/useFavorite.ts +++ b/src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/hooks/useAddFavorite.ts @@ -1,12 +1,9 @@ import { useAuth0 } from "@auth0/auth0-react"; import { useMutation, gql } from "@apollo/client"; -import { - ADD_FAVORITE_MUTATION, - REMOVE_FAVORITE_MUTATION, -} from "@/data/favorites"; +import { ADD_FAVORITE_MUTATION } from "@/data/favorites"; -export const useFavorite = () => { +export const useAddFavorite = () => { const { user } = useAuth0(); const [addFavorite, { data: addData, loading: addLoading, error: addError }] = @@ -41,41 +38,5 @@ export const useFavorite = () => { }, }); - const [removeFavorite, { loading: removeLoading, error: removeError }] = - useMutation(REMOVE_FAVORITE_MUTATION, { - optimisticResponse: { - __typename: "Mutation", - removeFavorite: true, - }, - }); - - const removeFavoriteWithVariables = async ({ - variables: { bookId }, - }: { - variables: { bookId: string }; - }) => { - await removeFavorite({ - variables: { bookId }, - update(cache) { - cache.modify({ - id: `Book:${bookId}`, - fields: { - isFavorited() { - return false; - }, - }, - }); - }, - }); - }; - - return { - addFavorite, - addData, - addLoading, - addError, - removeFavorite: removeFavoriteWithVariables, - removeLoading, - removeError, - }; + return { addFavorite, addData, addLoading, addError }; }; diff --git a/src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/hooks/useFavorite.ts b/src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/hooks/useFavorite.ts new file mode 100644 index 0000000..64e3599 --- /dev/null +++ b/src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/hooks/useFavorite.ts @@ -0,0 +1,17 @@ +import { useAddFavorite } from "./useAddFavorite"; +import { useRemoveFavorite } from "./useRemoveFavorite"; + +export const useFavorite = () => { + const { addFavorite, addData, addLoading, addError } = useAddFavorite(); + const { removeFavorite, removeLoading, removeError } = useRemoveFavorite(); + + return { + addFavorite, + addData, + addLoading, + addError, + removeFavorite, + removeLoading, + removeError, + }; +}; diff --git a/src/components/LibraryPage/components/Books/components/BookCard/components/useFavoriteButton.test.tsx b/src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/hooks/useFavoriteButton.test.tsx similarity index 95% rename from src/components/LibraryPage/components/Books/components/BookCard/components/useFavoriteButton.test.tsx rename to src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/hooks/useFavoriteButton.test.tsx index 95581f1..9b03408 100644 --- a/src/components/LibraryPage/components/Books/components/BookCard/components/useFavoriteButton.test.tsx +++ b/src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/hooks/useFavoriteButton.test.tsx @@ -5,12 +5,11 @@ import { useAuth0 } from "@auth0/auth0-react"; import { ReactNode } from "react"; import { vi } from "vitest"; -import { useFavorite } from "../useFavorite"; - +import { useFavorite } from "./useFavorite"; import { useFavoriteButton } from "./useFavoriteButton"; vi.mock("@auth0/auth0-react"); -vi.mock("../useFavorite"); +vi.mock("./useFavorite"); vi.mock("@apollo/client"); describe("useFavoriteButton", () => { diff --git a/src/components/LibraryPage/components/Books/components/BookCard/components/useFavoriteButton.ts b/src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/hooks/useFavoriteButton.ts similarity index 96% rename from src/components/LibraryPage/components/Books/components/BookCard/components/useFavoriteButton.ts rename to src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/hooks/useFavoriteButton.ts index aefd788..79bf883 100644 --- a/src/components/LibraryPage/components/Books/components/BookCard/components/useFavoriteButton.ts +++ b/src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/hooks/useFavoriteButton.ts @@ -2,7 +2,7 @@ import { gql, useApolloClient } from "@apollo/client"; import { useEffect, useCallback } from "react"; import { useAuth0 } from "@auth0/auth0-react"; -import { useFavorite } from "../useFavorite"; +import { useFavorite } from "./useFavorite"; export const useFavoriteButton = ( bookId: string, diff --git a/src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/hooks/useRemoveFavorite.ts b/src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/hooks/useRemoveFavorite.ts new file mode 100644 index 0000000..7e36978 --- /dev/null +++ b/src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/hooks/useRemoveFavorite.ts @@ -0,0 +1,39 @@ +import { useMutation } from "@apollo/client"; + +import { REMOVE_FAVORITE_MUTATION } from "@/data/favorites"; + +export const useRemoveFavorite = () => { + const [removeFavorite, { loading: removeLoading, error: removeError }] = + useMutation(REMOVE_FAVORITE_MUTATION, { + optimisticResponse: { + __typename: "Mutation", + removeFavorite: true, + }, + }); + + const removeFavoriteWithVariables = async ({ + variables: { bookId }, + }: { + variables: { bookId: string }; + }) => { + await removeFavorite({ + variables: { bookId }, + update(cache) { + cache.modify({ + id: `Book:${bookId}`, + fields: { + isFavorited() { + return false; + }, + }, + }); + }, + }); + }; + + return { + removeFavorite: removeFavoriteWithVariables, + removeLoading, + removeError, + }; +}; diff --git a/src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/index.ts b/src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/index.ts new file mode 100644 index 0000000..906fdb6 --- /dev/null +++ b/src/components/LibraryPage/components/Books/components/BookCard/components/FavoriteButton/index.ts @@ -0,0 +1 @@ +export * from "./FavoriteButton"; diff --git a/src/components/LibraryPage/components/Books/components/BookCard/components/index.ts b/src/components/LibraryPage/components/Books/components/BookCard/components/index.ts index 6a63ead..9b5daa8 100644 --- a/src/components/LibraryPage/components/Books/components/BookCard/components/index.ts +++ b/src/components/LibraryPage/components/Books/components/BookCard/components/index.ts @@ -1,4 +1,2 @@ -export * from "./CircularProgressWithLabel"; -export * from "./FavoriteButton"; -export * from "./BookDetails"; export * from "./CardContent"; +export * from "./FavoriteButton";