Skip to content

Commit

Permalink
Merge pull request #14 from w3aseL/api-transition
Browse files Browse the repository at this point in the history 
Updates to Portfolio section
  • Loading branch information
@w3aseL
w3aseL authored Oct 19, 2024
2 parents 00e9fd9 + 214e435 commit 4396f60
Show file tree
Hide file tree
Showing 6 changed files with 178 additions and 159 deletions.
49 changes: 27 additions & 22 deletions src/pages/EditPortfolio/EducationTab.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,13 @@ const checkGPA = gpa => typeof(gpa) === "number" && gpa >= 0.00 && gpa <= 5.00
*/
const AddEducationModal = ({ toggle, isOpen }) => {
const initialForm = {
school_name: "",
school_type: "",
graduation_reward: "",
schoolName: "",
schoolType: "",
schoolURL: "",
rewardType: "",
major: "",
logo_id: "",
graduation_date: new Date(),
imageId: "",
graduationDate: new Date(),
gpa: 0.00
}

Expand Down Expand Up @@ -50,15 +51,15 @@ const AddEducationModal = ({ toggle, isOpen }) => {
return

var formData = new FormData()
formData.append("logo", image)
formData.append("file", image)

setState({ ...state, loading: true })

request("/portfolio/education/upload-image", formData, "POST", true, "multipart/form-data")
request("/portfolio/education/logo", formData, "POST", true, "multipart/form-data")
.then(res => {
setState({ ...state, loading: false, data: res.data })

updateField("logo_id", res.data.id)
updateField("imageId", res.data.id)
})
.catch(err => setState({ ...state, loading: false, error: err }))
}
Expand Down Expand Up @@ -124,15 +125,19 @@ const AddEducationModal = ({ toggle, isOpen }) => {
<hr />
<FormGroup>
<Label for="schoolName">School Name</Label>
<Input type="text" name="schoolName" id="schoolName" placeholder="Enter school name..." onChange={e => updateField("school_name", e.target.value)} />
<Input type="text" name="schoolName" id="schoolName" placeholder="Enter school name..." onChange={e => updateField("schoolName", e.target.value)} />
</FormGroup>
<FormGroup>
<Label for="schoolType">School Type</Label>
<Input type="text" name="schoolType" id="schoolType" placeholder="Enter school type..." onChange={e => updateField("school_type", e.target.value)} />
<Input type="text" name="schoolType" id="schoolType" placeholder="Enter school type..." onChange={e => updateField("schoolType", e.target.value)} />
</FormGroup>
<FormGroup>
<Label for="schoolUrl">School URL</Label>
<Input type="text" name="schoolUrl" id="schoolUrl" placeholder="Enter school URL..." onChange={e => updateField("schoolURL", e.target.value)} />
</FormGroup>
<FormGroup>
<Label for="reward">Reward</Label>
<Input type="text" name="reward" id="reward" placeholder="Enter reward..." onChange={e => updateField("graduation_reward", e.target.value)} />
<Input type="text" name="reward" id="reward" placeholder="Enter reward..." onChange={e => updateField("rewardType", e.target.value)} />
<FormText>E.g. Diploma, Bachelor's Degree</FormText>
</FormGroup>
<FormGroup>
Expand All @@ -147,7 +152,7 @@ const AddEducationModal = ({ toggle, isOpen }) => {
</FormGroup>
<FormGroup>
<Label for="graduationDate">Graduation Date</Label>
<Input type="date" name="graduationDate" id="graduationDate" onChange={e => updateField("graduation_date", e.target.value)} />
<Input type="date" name="graduationDate" id="graduationDate" onChange={e => updateField("graduationDate", e.target.value)} />
</FormGroup>
</Container>
</Form>
Expand Down Expand Up @@ -254,7 +259,7 @@ const EditEducationModal = ({ toggle, isOpen, id }) => {

setState({ loading: true, data: null, error: null })

request(`/portfolio/education`, { id }, "DELETE", true)
request(`/portfolio/education/${id}`, null, "DELETE", true)
.then(res => {
setState({ loading: false, data: res.data })

Expand Down Expand Up @@ -345,9 +350,9 @@ const EditEducationModal = ({ toggle, isOpen, id }) => {
}

const EducationCard = ({ data, toggleEditModal }) => {
const { id, school_name, school_logo, school_type, graduation_date, graduation_reward, major, gpa } = data
const { id, schoolName, logoURL, schoolType, graduationDate, rewardType, major, gpa } = data

const gradDate = new Date(graduation_date), hasGraduated = gradDate < new Date()
const gradDate = new Date(graduationDate), hasGraduated = gradDate < new Date()

const dateToStr = date => `${date.getMonth()+1}/${date.getFullYear()}`

Expand All @@ -365,17 +370,17 @@ const EducationCard = ({ data, toggleEditModal }) => {
<Container className="mt-2 mb-2">
<Row className="d-flex">
<Col sm="3" className="ml-sm-auto mr-sm-auto">
<img width="100%" height="auto" src={school_logo} alt="school-logo-2"></img>
<img width="100%" height="auto" src={logoURL} alt="school-logo-2"></img>
</Col>
<Col sm="9" className="ml-sm-auto mr-sm-auto">
<h4 className="w-auto pb-0 mb-0"><em>{school_name}</em></h4>
<p className="text-muted">{school_type}</p>
<h4 className="w-auto pb-0 mb-0"><em>{schoolName}</em></h4>
<p className="text-muted">{schoolType}</p>
</Col>
</Row>
<Row className="d-flex">
<Col sm="8">
<p className="w-100 text-muted">
{`${majorAndRewardProcess(graduation_reward, major)}`}
{`${majorAndRewardProcess(rewardType, major)}`}
<br/>
{`${gpa} GPA`}
<br/>
Expand Down Expand Up @@ -441,7 +446,7 @@ export const EducationTab = props => {
.catch(err => setState({ ...state, loading: false, error: err }))
}

//console.log(state)
// console.log(state)

return (
<>
Expand All @@ -459,10 +464,10 @@ export const EducationTab = props => {
<Row className="d-flex mt-3">
{!state.loading && state.data ?
<>
{state.data.education.length === 0 &&
{state.data.length === 0 &&
<h4 className="w-100 text-muted text-center"><em>No education data found...</em></h4>
}
{state.data.education.map((obj, i) => (
{state.data.map((obj, i) => (
<Col md="6" className={`ml-auto mr-auto${i > 1 ? " mt-3" : ""}`}>
<EducationCard data={obj} toggleEditModal={openEditModal} />
</Col>
Expand Down
18 changes: 9 additions & 9 deletions src/pages/EditPortfolio/ImageTab.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const ImageDeleteModal = ({ isOpen, toggle, images }) => {

setState({ ...state, loading: true })

request(`/portfolio/image`, { id }, "DELETE", true)
request(`/portfolio/image/${id}`, null, "DELETE", true)
.then(res => {
setState({ ...state, loading: false, data: res.data })

Expand All @@ -70,14 +70,14 @@ const ImageDeleteModal = ({ isOpen, toggle, images }) => {
<div className="d-flex w-100">
<Dropdown className="ml-auto mr-auto" color="primary" isOpen={dropdown} toggle={toggleDropdown}>
<DropdownToggle caret>
{!selectedImage ? "Select Image" : selectedImage.file_name}
{!selectedImage ? "Select Image" : selectedImage.fileName}
</DropdownToggle>
<DropdownMenu>
{images.length === 0 &&
<DropdownItem disabled>N/A</DropdownItem>
}
{images.length > 0 && images.map((img, i) => (
<DropdownItem onClick={e => updateSelectedImage(e, img)}>{img.file_name}</DropdownItem>
<DropdownItem onClick={e => updateSelectedImage(e, img)}>{img.fileName}</DropdownItem>
))}
</DropdownMenu>
</Dropdown>
Expand All @@ -101,7 +101,7 @@ const ImageDeleteModal = ({ isOpen, toggle, images }) => {
}

const ImageCard = ({ image }) => {
const { id, url, file_name } = image
const { id, url, fileName } = image

return (
<Card>
Expand All @@ -113,7 +113,7 @@ const ImageCard = ({ image }) => {
</Row>
<Row className="d-flex">
<Col sm="10" className="ml-auto mr-auto">
<h4 className="w-100 pb-0 mb-0 text-center"><em>{file_name}</em></h4>
<h4 className="w-100 pb-0 mb-0 text-center"><em>{fileName}</em></h4>
<p className="w-100 text-muted text-center">{id}</p>
<p className="w-100 text-muted text-center"><em>{url}</em></p>
</Col>
Expand Down Expand Up @@ -160,11 +160,11 @@ export const ImageTab = props => {
toggle()
}

//console.log(state)
// console.log(state)

return (
<>
<ImageDeleteModal isOpen={modal} toggle={(refresh=false) => toggle(refresh)} images={state.data ? state.data.images : []} />
<ImageDeleteModal isOpen={modal} toggle={(refresh=false) => toggle(refresh)} images={state.data ? state.data : []} />
<Container className="mt-3 mb-3">
<Row>
<Col md="6">
Expand All @@ -178,10 +178,10 @@ export const ImageTab = props => {
<Row className="d-flex mt-3">
{!state.loading && state.data ?
<>
{state.data.images.length == 0 &&
{state.data.length == 0 &&
<h4 className="w-100 text-muted text-center"><em>No images found...</em></h4>
}
{state.data.images.map((obj, i) => (
{state.data.map((obj, i) => (
<Col md="4" className={`ml-auto mr-auto${i > 2 ? " mt-3" : ""}`}>
<ImageCard image={obj} />
</Col>
Expand Down
Loading

0 comments on commit 4396f60

Please sign in to comment.