feat: integrating search (#21)

Author: felipebrsk

DONE.md

@@ -145,6 +145,10 @@
   - [x] Integrate home upcoming games
   - [x] Integrate home most liked games
 - [x] Integrate game details
+- [x] Integrate heart button
+  - [x] Heart games
+  - [x] Heart comments and replies
+  - [x] Heart blog posts
 
 ### Post MVP
 

src/components/Comments/Comments.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Provider } from 'react-redux'
+import { MemoryRouter } from 'react-router-dom'
+
+import { MOCK_GAME_DETAILS } from '@/mocks'
+import store from '@/store'
+
+import Comments from './Comments'
+
+const meta: Meta<typeof Comments> = {
+  title: 'Components/Comments',
+  component: Comments,
+  args: {
+    defaultComments: MOCK_GAME_DETAILS.comments,
+  },
+}
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => (
+    <Provider store={store}>
+      <MemoryRouter>
+        <Comments {...args} />
+      </MemoryRouter>
+    </Provider>
+  ),
+}
+
+export default meta

src/components/Comments/Comments.tsx

@@ -10,14 +10,9 @@ import {
 } from '@mui/material'
 import { formatRelative } from 'date-fns'
 import { useEffect, useState } from 'react'
-import {
-  IoChatboxEllipsesOutline,
-  IoHeart,
-  IoHeartOutline,
-  IoSendOutline,
-} from 'react-icons/io5'
+import { IoChatboxEllipsesOutline, IoSendOutline } from 'react-icons/io5'
 
-import { HeartsUp, Input } from '@/components'
+import { HeartButton, HeartsUp, Input } from '@/components'
 import { Comment } from '@/types'
 
 interface CommentsProps {
@@ -38,24 +33,20 @@ function Comments(props: CommentsProps) {
   const handleHeartClick = (item: Comment, parentId?: number) => {
     const isReply = Boolean(parentId)
     const itemId = isReply ? `${parentId}-${item.id}` : item.id
-    const isLiked = likedComments.has(itemId)
 
     setLikedComments((prev) => {
       const updatedLikes = new Set(prev)
+      const isLiked = updatedLikes.has(itemId)
 
       if (isLiked) {
         updatedLikes.delete(itemId)
       } else {
         updatedLikes.add(itemId)
       }
 
-      return updatedLikes
-    })
-
-    if (isReply && parentId) {
       setComments((prevComments) =>
         prevComments.map((comment) =>
-          comment.id === parentId
+          isReply && parentId && comment.id === parentId
             ? {
                 ...comment,
                 replies: comment.replies.map((reply) =>
@@ -69,27 +60,18 @@ function Comments(props: CommentsProps) {
                     : reply,
                 ),
               }
-            : comment,
+            : !isReply && comment.id === item.id
+              ? {
+                  ...comment,
+                  hearts_count: comment.hearts_count + (isLiked ? -1 : 1),
+                  is_hearted: !isLiked,
+                }
+              : comment,
         ),
       )
-    } else {
-      setComments((prevComments) =>
-        prevComments.map((c) =>
-          c.id === item.id
-            ? {
-                ...c,
-                hearts_count: c.hearts_count + (isLiked ? -1 : 1),
-                is_hearted: !isLiked,
-              }
-            : c,
-        ),
-      )
-    }
 
-    if (!isLiked) {
-      const newHearts = Array.from({ length: 10 }, (_, i) => i * 100)
-      setHeartPops((prev) => [...prev, ...newHearts])
-    }
+      return updatedLikes
+    })
   }
 
   const handleSendMessage = () => {
@@ -227,18 +209,18 @@ function Comments(props: CommentsProps) {
                 </Tooltip>
 
                 <Box className="flex items-center gap-2">
-                  <Tooltip title="Like this comment">
-                    <IconButton
-                      onClick={() => handleHeartClick(comment)}
-                      className="relative transition-transform duration-300 hover:scale-125 ease-in-out">
-                      {likedComments.has(comment.id) ||
-                      comment.is_hearted ? (
-                        <IoHeart className="text-red-500" />
-                      ) : (
-                        <IoHeartOutline className="text-theme-red-900 dark:text-gray-400" />
-                      )}
-                    </IconButton>
-                  </Tooltip>
+                  <HeartButton
+                    heartable_id={comment.id}
+                    heartable_type="commentables"
+                    setHeartPops={setHeartPops}
+                    isHearted={
+                      likedComments.has(comment.id) || comment.is_hearted
+                    }
+                    type="icon"
+                    setHearts={() => {}}
+                    onHeartToggle={() => handleHeartClick(comment)}
+                    size={28}
+                  />
                   <Typography
                     variant="body2"
                     className="dark:text-white text-gray-800">
@@ -306,21 +288,22 @@ function Comments(props: CommentsProps) {
                             <IoChatboxEllipsesOutline />
                           </IconButton>
                         </Tooltip>
-                        <Tooltip title="Like this comment">
-                          <IconButton
-                            onClick={() =>
-                              handleHeartClick(reply, comment.id)
-                            }
-                            className="transition-transform duration-300 hover:scale-125 ease-in-out">
-                            {likedComments.has(
+                        <HeartButton
+                          heartable_id={reply.id}
+                          heartable_type="commentables"
+                          setHeartPops={setHeartPops}
+                          isHearted={
+                            likedComments.has(
                               `${comment.id}-${reply.id}`,
-                            ) || reply.is_hearted ? (
-                              <IoHeart className="text-red-500" />
-                            ) : (
-                              <IoHeartOutline className="text-theme-red-900 dark:text-gray-400" />
-                            )}
-                          </IconButton>
-                        </Tooltip>
+                            ) || reply.is_hearted
+                          }
+                          type="icon"
+                          setHearts={() => {}}
+                          onHeartToggle={() =>
+                            handleHeartClick(reply, comment.id)
+                          }
+                          size={28}
+                        />
                         <Typography
                           variant="body2"
                           className="dark:text-white text-gray-800">

src/components/CookieConsent/CookieConsent.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import CookieConsent from './CookieConsent'
+
+const meta: Meta<typeof CookieConsent> = {
+  title: 'Components/CookieConsent',
+  component: CookieConsent,
+  args: {
+    visible: true,
+  },
+  argTypes: {
+    visible: {
+      type: 'boolean',
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+}
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => <CookieConsent {...args} />,
+}
+
+export default meta

src/components/CookieConsent/CookieConsent.test.tsx

@@ -0,0 +1,80 @@
+import { fireEvent, render } from '@testing-library/react'
+import { useCookies } from 'react-cookie'
+
+import CookieConsent from './CookieConsent'
+
+jest.mock('react-cookie', () => ({
+  useCookies: jest.fn(),
+}))
+
+const renderCookieConsent = () => {
+  return render(<CookieConsent />)
+}
+
+describe('CookieConsent Component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders cookie consent when cookie is not set', () => {
+    ;(useCookies as jest.Mock).mockReturnValue([{}, jest.fn()])
+
+    const { getByText, getByRole } = renderCookieConsent()
+
+    expect(getByText(/we need cookies!/i)).toBeInTheDocument()
+    expect(
+      getByText(/to provide the best experience/i),
+    ).toBeInTheDocument()
+    expect(getByRole('button', { name: /accept/i })).toBeInTheDocument()
+    expect(getByRole('button', { name: /decline/i })).toBeInTheDocument()
+  })
+
+  it('hides the consent message when the "Accept" button is clicked', () => {
+    const setCookieMock = jest.fn()
+    ;(useCookies as jest.Mock).mockReturnValue([{}, setCookieMock])
+
+    const { queryByText, getByRole } = renderCookieConsent()
+
+    fireEvent.click(getByRole('button', { name: /accept/i }))
+
+    expect(setCookieMock).toHaveBeenCalledWith(
+      '_gc_accept_cookies',
+      '1',
+      expect.objectContaining({
+        path: '/',
+        maxAge: 365 * 24 * 60 * 60,
+      }),
+    )
+    expect(queryByText(/we need cookies!/i)).not.toBeInTheDocument()
+  })
+
+  it('hides the consent message when the "Decline" button is clicked', () => {
+    const setCookieMock = jest.fn()
+    ;(useCookies as jest.Mock).mockReturnValue([{}, setCookieMock])
+
+    const { queryByText, getByRole } = renderCookieConsent()
+
+    fireEvent.click(getByRole('button', { name: /decline/i }))
+
+    expect(setCookieMock).toHaveBeenCalledWith(
+      '_gc_accept_cookies',
+      '1',
+      expect.objectContaining({
+        path: '/',
+        maxAge: 365 * 24 * 60 * 60,
+      }),
+    )
+    expect(queryByText(/we need cookies!/i)).not.toBeInTheDocument()
+  })
+
+  it('does not render the consent message if the cookie is already set', () => {
+    ;(useCookies as jest.Mock).mockReturnValue([
+      { _gc_accept_cookies: '1' },
+      jest.fn(),
+    ])
+
+    const { queryByText } = renderCookieConsent()
+
+    expect(queryByText(/we need cookies!/i)).not.toBeInTheDocument()
+  })
+})

src/components/CookieConsent/CookieConsent.tsx

@@ -3,10 +3,15 @@ import { useEffect, useState } from 'react'
 import { useCookies } from 'react-cookie'
 import { IoCheckmarkCircleOutline } from 'react-icons/io5'
 
-import Logo from '../Logo'
+import { Logo } from '..'
 
-const CookieConsent = () => {
-  const [isVisible, setIsVisible] = useState(false)
+export interface CookieConsentProps {
+  visible?: boolean
+}
+
+function CookieConsent(props: CookieConsentProps) {
+  const { visible = false } = props
+  const [isVisible, setIsVisible] = useState<boolean>(visible)
   const [cookies, setCookie] = useCookies(['_gc_accept_cookies'])
 
   useEffect(() => {

src/components/GameCard/GameCard.stories.tsx

@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import { Provider } from 'react-redux'
+import { MemoryRouter } from 'react-router-dom'
 
 import { MOCK_HOT_GAMES } from '@/mocks'
+import store from '@/store'
 import { GameList } from '@/types'
 
 import GameCard from './GameCard'
@@ -24,10 +27,14 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   render: (args) => (
-    <div
-      className={`container grid ${args.view === 'grid' ? 'lg:grid-cols-3 sm:grid-cols-2 grid-cols-1' : 'grid-cols-1'}`}>
-      <GameCard key={1} {...args} />
-    </div>
+    <Provider store={store}>
+      <MemoryRouter>
+        <div
+          className={`container grid ${args.view === 'grid' ? 'lg:grid-cols-3 sm:grid-cols-2 grid-cols-1' : 'grid-cols-1'}`}>
+          <GameCard key={1} {...args} />
+        </div>
+      </MemoryRouter>
+    </Provider>
   ),
 }