feat: add Candidate details view

app/javascript/src/i18n/en.json

@@ -1,4 +1,7 @@
 {
   "welcomeToHaistack": "Welcome to Haistack",
-  "candidates": "Candidates"
+  "candidates": "Candidates",
+  "candidate": {
+    "candidateDetails": "Candidate Details"
+  }
 }

app/javascript/src/routes.js

@@ -1,14 +1,19 @@
 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([
   {
     path: '/',
     element: <Home />,
   },
   {
-    path: '/candidates',
-    element: <Candidates />,
+    path: 'candidates',
+    children: [
+      {
+        path: ':id',
+        element: <Candidate />,
+      },
+    ],
   },
 ])

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)
+  })
+})

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

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'