From da99c7d543042c4deb42538b22bd42e3e5dd4e3a Mon Sep 17 00:00:00 2001
From: Andre Gomes <andre270492@gmail.com>
Date: Sun, 11 Feb 2024 12:02:14 -0300
Subject: [PATCH] feat: add Candidate details view

---
 app/javascript/src/i18n/en.json               |  5 +-
 app/javascript/src/routes.js                  | 11 ++--
 .../src/tests/views/Candidate.spec.jsx        | 52 +++++++++++++++++++
 app/javascript/src/views/Candidate.jsx        | 37 +++++++++++++
 app/javascript/src/views/index.js             |  1 +
 5 files changed, 102 insertions(+), 4 deletions(-)
 create mode 100644 app/javascript/src/tests/views/Candidate.spec.jsx
 create mode 100644 app/javascript/src/views/Candidate.jsx

diff --git a/app/javascript/src/i18n/en.json b/app/javascript/src/i18n/en.json
index 2452fb8..c991bdc 100644
--- a/app/javascript/src/i18n/en.json
+++ b/app/javascript/src/i18n/en.json
@@ -1,4 +1,7 @@
 {
   "welcomeToHaistack": "Welcome to Haistack",
-  "candidates": "Candidates"
+  "candidates": "Candidates",
+  "candidate": {
+    "candidateDetails": "Candidate Details"
+  }
 }
diff --git a/app/javascript/src/routes.js b/app/javascript/src/routes.js
index 1bf2557..c96e34b 100644
--- a/app/javascript/src/routes.js
+++ b/app/javascript/src/routes.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { createBrowserRouter } from 'react-router-dom'
-import { Home, Candidates } from '@/views/index.js'
+import { Home, Candidate } from '@/views/index.js'
 
 export const router = createBrowserRouter([
   {
@@ -8,7 +8,12 @@ export const router = createBrowserRouter([
     element: <Home />,
   },
   {
-    path: '/candidates',
-    element: <Candidates />,
+    path: 'candidates',
+    children: [
+      {
+        path: ':id',
+        element: <Candidate />,
+      },
+    ],
   },
 ])
diff --git a/app/javascript/src/tests/views/Candidate.spec.jsx b/app/javascript/src/tests/views/Candidate.spec.jsx
new file mode 100644
index 0000000..4f94881
--- /dev/null
+++ b/app/javascript/src/tests/views/Candidate.spec.jsx
@@ -0,0 +1,52 @@
+import { expect, describe, it, vi, afterEach } from 'vitest'
+import { render, cleanup } from '@testing-library/react'
+import Candidate from '@/views/Candidate.jsx'
+import { getCandidate } from '@/repositories/candidates.js'
+import { useParams } from 'react-router-dom'
+
+vi.mock('antd', () => ({
+  Typography: {
+    Title: ({ children }) => <div>{children}</div>,
+  },
+}))
+
+vi.mock('@/components/CandidateCard', () => ({
+  default: () => <div>CandidateCard</div>,
+}))
+
+vi.mock('react-router-dom', () => ({
+  useParams: vi.fn(() => ({ id: 1 })),
+}))
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key) => key }),
+}))
+
+vi.mock('@/repositories/candidates.js', () => ({
+  getCandidate: vi.fn(() =>({
+    candidate: {
+      id: 1,
+      name: 'John Doe',
+      email: 'john@doe.com',
+      birthdate: '1990-01-01',
+    },
+  })),
+}))
+
+describe('CandidateCard', () => {
+  afterEach(cleanup)
+
+  it('renders the title', () => {
+    const { getByText } = render(<Candidate />)
+
+    expect(getByText('candidate.candidateDetails')).toBeTruthy()
+  })
+
+  it('calls the getCandidate function with the id', () => {
+    useParams.mockReturnValue({ id: 2 })
+
+    render(<Candidate />)
+
+    expect(getCandidate).toHaveBeenCalledWith(2)
+  })
+})
diff --git a/app/javascript/src/views/Candidate.jsx b/app/javascript/src/views/Candidate.jsx
new file mode 100644
index 0000000..3a810bf
--- /dev/null
+++ b/app/javascript/src/views/Candidate.jsx
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react'
+import { getCandidate } from '@/repositories/candidates.js'
+import CandidateCard from '@/components/CandidateCard'
+import { useTranslation } from 'react-i18next'
+import { useParams } from 'react-router-dom'
+import { Typography } from 'antd'
+
+const { Title } = Typography
+
+const Candidate = () => {
+  const [candidate, setCandidate] = useState([])
+  const [loading, setLoading] = useState(true)
+  const { t } = useTranslation()
+  const { id } = useParams()
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await getCandidate(id)
+
+      setCandidate(response.candidate)
+      setLoading(false)
+    }
+
+    fetchData()
+  }, [])
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <Title>
+        {t('candidate.candidateDetails')}
+      </Title>
+      <CandidateCard candidate={candidate} loading={loading} />
+    </div>
+  )
+}
+
+export default Candidate
diff --git a/app/javascript/src/views/index.js b/app/javascript/src/views/index.js
index 5ca20fb..064e736 100644
--- a/app/javascript/src/views/index.js
+++ b/app/javascript/src/views/index.js
@@ -1,2 +1,3 @@
 export { default as Candidates } from './Candidates.jsx'
+export { default as Candidate } from './Candidate.jsx'
 export { default as Home } from './Home.jsx'