integration to front end

.gitignore

@@ -1,23 +1 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+node_modules/

package.json

@@ -6,8 +6,10 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^7.0.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/api/axios.js

@@ -0,0 +1,17 @@
+import axios from 'axios';
+
+const axiosInstance = axios.create({
+    baseURL: 'http://127.0.0.1:8000/api/', 
+});
+axiosInstance.interceptors.request.use(
+    (config) => {
+        const token = localStorage.getItem('access_token');
+        if (token) {
+            config.headers.Authorization = `Bearer ${token}`;
+        }
+        return config;
+    },
+    (error) => Promise.reject(error)
+);
+
+export default axiosInstance;

src/components/ResumeDetails.js

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import axiosInstance from "../api/axios";
+
+const ResumeDetails = () => {
+    const { id } = useParams();
+    const navigate = useNavigate();
+    const [resume, setResume] = useState(null);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        const fetchResume = async () => {
+            try {
+                const response = await axiosInstance.get(`resumes/${id}/`);
+                setResume(response.data);
+            } catch (err) {
+                setError("Error fetching resume details.");
+            }
+        };
+        fetchResume();
+    }, [id]);
+
+    if (error) {
+        return <div>{error}</div>;
+    }
+
+    if (!resume) {
+        return <div>Loading...</div>;
+    }
+
+    return (
+        <div>
+            <button onClick={() => navigate(-1)}>Back</button>
+            <h1>{resume.title}</h1>
+            <h2>Personal Info</h2>
+            <p>Name: {resume.personal_info.name}</p>
+            <p>Email: {resume.personal_info.email}</p>
+            <p>Phone: {resume.personal_info.phone}</p>
+            <h2>Education</h2>
+            <ul>
+                {resume.education.map((edu, index) => (
+                    <li key={index}>
+                        {edu.institution} - {edu.degree} ({edu.year})
+                    </li>
+                ))}
+            </ul>
+            <h2>Work Experience</h2>
+            <ul>
+                {resume.work_experience.map((work, index) => (
+                    <li key={index}>
+                        {work.company}: {work.role} ({work.years})
+                    </li>
+                ))}
+            </ul>
+            <h2>Skills</h2>
+            <ul>
+                {resume.skills.map((skill, index) => (
+                    <li key={index}>{skill}</li>
+                ))}
+            </ul>
+        </div>
+    );
+};
+
+export default ResumeDetails;