Skip to content

Commit 8606c4e

Browse files
JooZef315JooZef315
authored
Merge branch 'main' into editEducation
2 parents fb974ec + e2523d5 commit 8606c4e

File tree

3 files changed

+100
-48
lines changed

3 files changed

+100
-48
lines changed

‎src/App.js

+77-19
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import { useState } from "react";
12
import "./App.css";
23
import ExperienceComponent from "./features/experience/ExperienceComponent";
3-
import data from "./data";
44
import {
55
PDFDownloadLink,
66
Document,
@@ -12,6 +12,7 @@ import {
1212
import AddEducation from "./features/education/addEducation";
1313
import AddSkills from "./features/skills/addSkills";
1414
import UserInformationComponent from "./features/user-information/UserInformationComponent";
15+
import { API_URL } from "./constants";
1516

1617
const styles = StyleSheet.create({
1718
page: {
@@ -33,78 +34,135 @@ const styles = StyleSheet.create({
3334
},
3435
});
3536

36-
const MyDoc = () => (
37+
const MyDoc = ({ resumeData }) => (
3738
<Document>
3839
<Page style={styles.page}>
3940
<Text style={styles.header}>Resume</Text>
4041

41-
{/* Experience Section */}
42+
<View style={styles.section}>
43+
<Text style={styles.itemTitle}>User Information</Text>
44+
{resumeData.user_information?.map((info, index) => (
45+
<View key={index} style={{ marginBottom: 10 }}>
46+
<Text>{`Name: ${info.name}`}</Text>
47+
<Text>{`Email: ${info.email_address}`}</Text>
48+
<Text>{`Phone: ${info.phone_number}`}</Text>
49+
</View>
50+
))}
51+
</View>
52+
4253
<View style={styles.section}>
4354
<Text style={styles.itemTitle}>Experience</Text>
44-
{data.experience.map((exp, index) => (
55+
{resumeData.experience?.map((exp, index) => (
4556
<View key={index} style={{ marginBottom: 10 }}>
4657
<Text>{`${exp.title} at ${exp.company} (${exp.start_date} - ${exp.end_date})`}</Text>
4758
<Text>{exp.description}</Text>
4859
</View>
4960
))}
5061
</View>
5162

52-
{/* Education Section */}
5363
<View style={styles.section}>
5464
<Text style={styles.itemTitle}>Education</Text>
55-
{data.education.map((edu, index) => (
65+
{resumeData.education?.map((edu, index) => (
5666
<View key={index} style={{ marginBottom: 10 }}>
57-
<Text>{`${edu.degree} from ${edu.institution} (${edu.start_date} - ${edu.end_date})`}</Text>
67+
<Text>{`${edu.course} from ${edu.school} (${edu.start_date} - ${edu.end_date})`}</Text>
5868
<Text>Grade: {edu.grade}</Text>
5969
</View>
6070
))}
6171
</View>
6272

63-
{/* Skills Section */}
6473
<View style={styles.section}>
6574
<Text style={styles.itemTitle}>Skills</Text>
66-
{data.skill.map((skill, index) => (
67-
<Text key={index}>{`${skill.name} (${skill.experience})`}</Text>
75+
{resumeData.skill?.map((skill, index) => (
76+
<Text key={index}>{`${skill.name} (${skill.proficiency})`}</Text>
6877
))}
6978
</View>
7079
</Page>
7180
</Document>
7281
);
7382

7483
function App() {
84+
const [resumeData, setResumeData] = useState(null);
85+
const [loading, setLoading] = useState(false);
86+
const [error, setError] = useState(false);
87+
88+
const handleGenerateResume = () => {
89+
setLoading(true);
90+
fetch(`${API_URL}/resume/data`)
91+
.then((response) => response.json())
92+
.then((data) => {
93+
setResumeData(data);
94+
setLoading(false);
95+
})
96+
.catch((err) => {
97+
setError(true);
98+
setLoading(false);
99+
});
100+
};
101+
102+
const handleResetData = () => {
103+
fetch(`${API_URL}/reset`, {
104+
method: "POST",
105+
})
106+
.then((response) => {
107+
if (!response.ok) {
108+
throw new Error("Failed to reset data");
109+
}
110+
window.location.reload();
111+
})
112+
.catch((err) => {
113+
console.error("Error resetting data:", err);
114+
});
115+
};
116+
75117
return (
76118
<div className="App">
77119
<h1>Resume Builder</h1>
78120
<div className="resumeSection">
79121
<h2>User Information</h2>
80122
<UserInformationComponent />
81-
<br></br>
123+
<br />
82124
</div>
83125
<div className="resumeSection">
84126
<h2>Experience</h2>
85127
<ExperienceComponent />
86-
<br></br>
128+
<br />
87129
</div>
88130

89131
<div className="resumeSection">
90132
<h2>Education</h2>
91133
<AddEducation />
92-
<br></br>
134+
<br />
93135
</div>
94136

95137
<div className="resumeSection">
96138
<h2>Skills</h2>
97139
<AddSkills />
98-
<br></br>
140+
<br />
99141
</div>
100142

101-
<br></br>
143+
<br />
102144

103-
<button>
104-
<PDFDownloadLink document={<MyDoc />} fileName="resume.pdf">
105-
{({ loading }) => (loading ? "Generating PDF..." : "Download Resume")}
106-
</PDFDownloadLink>
145+
<button onClick={handleGenerateResume}>
146+
{loading ? "Loading..." : "Generate Resume"}
107147
</button>
148+
149+
{resumeData && (
150+
<button>
151+
<PDFDownloadLink
152+
document={<MyDoc resumeData={resumeData} />}
153+
fileName="resume.pdf"
154+
>
155+
{({ loading }) =>
156+
loading ? "Generating PDF..." : "Download Resume"
157+
}
158+
</PDFDownloadLink>
159+
</button>
160+
)}
161+
162+
<br />
163+
<br />
164+
165+
<button onClick={handleResetData}>Reset Data</button>
108166
</div>
109167
);
110168
}

‎src/features/education/addEducationForm.jsx

+20-24
Original file line numberDiff line numberDiff line change
@@ -8,38 +8,35 @@ export default function AddEducationForm({ setShowForm }) {
88
const [startDate, setStartDate] = useState("");
99
const [endDate, setEndDate] = useState("");
1010
const [grade, setGrade] = useState("");
11-
const [logo, setLogo] = useState("");
11+
const [logo, setLogo] = useState(null); // Change to handle file input
1212

1313
const [loading, setLoading] = useState(false);
1414

1515
const handleAddEducation = async (e) => {
1616
e.preventDefault();
1717
setLoading(true);
18-
const data = {
19-
course,
20-
school,
21-
start_date: startDate,
22-
end_date: endDate,
23-
grade,
24-
logo,
25-
};
26-
console.log(JSON.stringify(data));
18+
const formData = new FormData();
19+
formData.append("course", course);
20+
formData.append("school", school);
21+
formData.append("start_date", startDate); // Change to match backend field
22+
formData.append("end_date", endDate); // Change to match backend field
23+
formData.append("grade", grade);
24+
formData.append("logo", logo); // Append the file
25+
2726
try {
2827
const response = await fetch(`${API_URL}/resume/education`, {
2928
method: "POST",
30-
headers: {
31-
"Content-Type": "application/json",
32-
},
33-
body: JSON.stringify(data),
29+
body: formData,
3430
});
31+
3532
if (response.ok) {
3633
alert("Education was added successfully!!");
3734
setCourse("");
3835
setSchool("");
3936
setStartDate("");
4037
setEndDate("");
4138
setGrade("");
42-
setLogo("");
39+
setLogo(null);
4340
} else {
4441
alert("Failed to add the Education");
4542
}
@@ -51,7 +48,7 @@ export default function AddEducationForm({ setShowForm }) {
5148
};
5249

5350
return (
54-
<form className={styles.EduForm} onSubmit={(e) => handleAddEducation(e)}>
51+
<form className={styles.EduForm} onSubmit={handleAddEducation}>
5552
<div className={styles.formBody}>
5653
<div className={styles.inputs}>
5754
<label htmlFor="course" className={styles.eduLabel}>
@@ -61,7 +58,7 @@ export default function AddEducationForm({ setShowForm }) {
6158
type="text"
6259
name="course"
6360
id="course"
64-
placeholder="add Course ..."
61+
placeholder="Add Course ..."
6562
value={course}
6663
onChange={(e) => setCourse(e.target.value)}
6764
required
@@ -77,7 +74,7 @@ export default function AddEducationForm({ setShowForm }) {
7774
type="text"
7875
name="school"
7976
id="school"
80-
placeholder="add school name ..."
77+
placeholder="Add School Name ..."
8178
value={school}
8279
onChange={(e) => setSchool(e.target.value)}
8380
required
@@ -93,7 +90,7 @@ export default function AddEducationForm({ setShowForm }) {
9390
type="text"
9491
name="startDate"
9592
id="startDate"
96-
placeholder="Ex:October 2021 ..."
93+
placeholder="Ex: October 2021 ..."
9794
value={startDate}
9895
onChange={(e) => setStartDate(e.target.value)}
9996
required
@@ -109,7 +106,7 @@ export default function AddEducationForm({ setShowForm }) {
109106
type="text"
110107
name="endDate"
111108
id="endDate"
112-
placeholder="Ex:October 2022 ..."
109+
placeholder="Ex: October 2022 ..."
113110
value={endDate}
114111
onChange={(e) => setEndDate(e.target.value)}
115112
required
@@ -125,7 +122,7 @@ export default function AddEducationForm({ setShowForm }) {
125122
type="text"
126123
name="grade"
127124
id="grade"
128-
placeholder="Ex:86% ..."
125+
placeholder="Ex: 86% ..."
129126
value={grade}
130127
onChange={(e) => setGrade(e.target.value)}
131128
required
@@ -139,9 +136,8 @@ export default function AddEducationForm({ setShowForm }) {
139136
type="file"
140137
name="logo"
141138
id="logo"
142-
placeholder="add skill logo ..."
143-
value={logo}
144-
onChange={(e) => setLogo(e.target.value)}
139+
placeholder="Add logo ..."
140+
onChange={(e) => setLogo(e.target.files[0])}
145141
required
146142
/>
147143
</div>

‎src/features/user-information/ViewUserInformationComponent.js

+3-5
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ function ViewUserInformationComponent({ onEditUserInfo }) {
1212
})
1313
.then((response) => response.json())
1414
.then((data) => {
15-
if (data && typeof data === "object" && data.name) {
16-
setUserInformation(data);
15+
if (data && Array.isArray(data) && data.length > 0) {
16+
setUserInformation(data[0]);
1717
console.log(data);
1818
} else {
1919
setError(true);
@@ -27,11 +27,9 @@ function ViewUserInformationComponent({ onEditUserInfo }) {
2727
return (
2828
<div>
2929
{error ? (
30-
<p>Error in fetching user information. Please refresh.</p>
30+
<p>No User information added yet!</p>
3131
) : userInformation === null ? (
3232
<p>Loading user information....</p>
33-
) : userInformation.length < 1 ? (
34-
<p>No user information added yet :(</p>
3533
) : (
3634
<table>
3735
<thead>

0 commit comments

Comments
 (0)