Skip to content

Commit

Permalink
Merge pull request #82 from Ayobami6/dev_1.0
Browse files Browse the repository at this point in the history 
Talent details implementation deployment
  • Loading branch information
@betiniakarandut
betiniakarandut authored Oct 20, 2023
2 parents 5d5b559 + 693ca10 commit 87bef6d
Show file tree
Hide file tree
Showing 5 changed files with 441 additions and 340 deletions.
8 changes: 3 additions & 5 deletions client/src/actions/experience.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,10 @@ export const getExperiencesTalent =

export const ExperienceUpdate = (id, ExperienceData) => async (dispatch) => {
try {
// dispatch({ type: 'START_LOADING' });
const { data } = await updateExperience(id, ExperienceData);
dispatch({ type: 'UPDATE_TALENT_EXPERIENCE', payload: data });
// dispatch({ type: 'END_LOADING' });
} catch (error) {
console.log(error.message);
console.log(error);
}
};

Expand All @@ -39,7 +37,7 @@ export const ExperienceDelete = (id) => async (dispatch) => {
dispatch({ type: 'DELETE_TALENT_EXPERIENCE', payload: id });
// setLoading(false);
} catch (error) {
console.log(error.message);
console.log(error);
}
};

Expand All @@ -51,6 +49,6 @@ export const ExperienceCreate =
dispatch({ type: 'CREATE_TALENT_EXPERIENCE', payload: data });
setLoading(false);
} catch (error) {
console.log(error.message);
console.log(error);
}
};
100 changes: 50 additions & 50 deletions client/src/components/Modal/AddCertificateModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,59 @@
import { modalProps } from "./interfaces/modaInterface.ts";
import TButton from "../Button/TButton.tsx";
import "./styles/AddProjectModal.css";
import { useContext } from "react";
import { TalentContext } from "../../pages/Talent/Talent.tsx";
import { createExperience } from "../../api/experience.ts";
import { modalProps } from './interfaces/modaInterface.ts';
import TButton from '../Button/TButton.tsx';
import './styles/AddProjectModal.css';
import { useContext } from 'react';
import { TalentContext } from '../../pages/Talent/Talent.tsx';
import { createCertification } from '../../api/certifications.ts';

function AddCertificateModal({ show, setShow }: modalProps) {
const modalStyle = show ? "showModal" : "";
const tp = useContext(TalentContext);
const modalStyle = show ? 'showModal' : '';
const tp = useContext(TalentContext);

const { talentProfile } = localStorage;
const tal = talentProfile ? JSON.parse(talentProfile as string).talent : {};
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData(e.target as HTMLFormElement);
formData.append("talentId", tal._id);
const data = Object.fromEntries(formData);
const { talentProfile } = localStorage;
const tal = talentProfile ? JSON.parse(talentProfile as string).talent : {};
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData(e.target as HTMLFormElement);
formData.append('talentId', tal._id);
const data = Object.fromEntries(formData);

await createExperience(data);
tp.setRefresh(!tp.refresh);
const formElement = e.target as HTMLFormElement;
formElement.reset();
setShow(false);
};
await createCertification(data);
tp.setRefresh(!tp.refresh);
const formElement = e.target as HTMLFormElement;
formElement.reset();
setShow(false);
};

return (
<div className={"Modal " + modalStyle}>
<div className="content">
<div className={"header-11"}>
<h1>Add Certification Modal</h1>{" "}
<TButton value={"X"} onClick={() => setShow(false)} />
</div>
<hr />
<form onSubmit={handleSubmit}>
<div className="form-control">
<label htmlFor="title">Title</label>
<input type="text" name={"title"} />
</div>
<div className="form-control">
<label htmlFor="link">Link</label>
<input type="url" name={"link"} />
</div>
return (
<div className={'Modal ' + modalStyle}>
<div className='content'>
<div className={'header-11'}>
<h1>Add Certification Modal</h1>{' '}
<TButton value={'X'} onClick={() => setShow(false)} />
</div>
<hr />
<form onSubmit={handleSubmit}>
<div className='form-control'>
<label htmlFor='title'>Title</label>
<input type='text' name={'title'} />
</div>
<div className='form-control'>
<label htmlFor='link'>Link</label>
<input type='url' name={'link'} />
</div>

<div className="form-control">
<label htmlFor={"description"}>Description</label>
<textarea name={"description"} />
</div>
{/* add a save button */}
<div className="form-control">
<TButton value={"Save"} type={"submit"} />
</div>
</form>
</div>
</div>
);
<div className='form-control'>
<label htmlFor={'description'}>Description</label>
<textarea name={'description'} />
</div>
{/* add a save button */}
<div className='form-control'>
<TButton value={'Save'} type={'submit'} />
</div>
</form>
</div>
</div>
);
}

export default AddCertificateModal;
184 changes: 130 additions & 54 deletions client/src/components/TalentDetails.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,78 +1,154 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import { getExperiencesTalent } from '../actions/experience';
import { getEducationsTalent } from '../actions/education.ts';
import { getProjectsTalent } from '../actions/project.ts';
import { getSkillsTalent } from '../actions/skill.ts';
import { getCertificationsTalent } from '../actions/certifications.ts';
import { useDispatch, useSelector } from 'react-redux';
import { useParams } from 'react-router-dom';
import Showwcase from '../components/talentProfile/Showwcase.tsx';
import {
CertificationShowwcaseCard,
EducationShowwcaseCard,
ExperienceShowwcaseCard,
ProjectShowwcaseCard,
SkillShowwcaseCard,
} from '../components/talentProfile/ShowwcaseCard.tsx';

const TalentDetails = ({ talent }) => {
const { id } = useParams();
const dispatch = useDispatch();
const [loading, setLoading] = useState();
const experiences = useSelector((state) => state.talentData.experiences);
const educations = useSelector((state) => state.talentData.educations);
const projects = useSelector((state) => state.talentData.projects);
const skills = useSelector((state) => state.talentData.skills);
const certs = useSelector((state) => state.talentData.certifications);

useEffect(() => {
dispatch(getExperiencesTalent(id, setLoading));
dispatch(getEducationsTalent(id, setLoading));
dispatch(getProjectsTalent(id, setLoading));
dispatch(getSkillsTalent(id, setLoading));
dispatch(getCertificationsTalent(id, setLoading));
}, [id, dispatch]);

return (
<>
<div className='m-10 mx-[100px]'>
<div>
<div className='md:flex flex-row'>
<div className='w-[170px] h-[170px] border-gray rounded-full flex justify-center'>
<img
src={
!talent.profileImg
? '/assets/talents/no_image.png'
: talent.profileImg
}
alt={talent.name}
className='object-cover'
/>
{!loading && (
<div className='m-10 mx-[100px]'>
<div>
<div className='md:flex flex-row'>
<div className='w-[170px] h-[170px] border-gray rounded-full flex justify-center'>
<img
src={
!talent.profileImg
? '/assets/talents/no_image.png'
: talent.profileImg
}
alt={talent.name}
className='object-cover'
/>
</div>
<div className='md:basis-1/2 my-20 mx-5 '>
<h1 className='text-3xl font-bold'>
{talent.name}
</h1>
<h2>Id: {talent._id}</h2>
</div>
</div>
<div className='md:basis-1/2 my-20 mx-5 '>
<h1 className='text-3xl font-bold'>
{talent.name}
</h1>
<h2>Id: {talent._id}</h2>
<div className='mx-5'>
<p className='text-gray-400'>Socials</p>
<p>Bio</p>
</div>
</div>
<div className='mx-5'>
<p className='text-gray-400'>Socials</p>
<p>Bio</p>
</div>
</div>

<hr className='my-5' />
<div>
<h2 className='text-3xl font-semibold'>Experience</h2>
<div className='my-5'>
<h3>All Experience</h3>
<hr className='my-5' />
<div>
<h2 className='text-3xl font-semibold'>Experience</h2>
<div className='my-5'>
<Showwcase>
{experiences.map((exp) => (
<ExperienceShowwcaseCard
experience={exp}
key={exp?._id}
showEdit={false}
/>
))}
</Showwcase>
</div>
</div>
</div>

<hr className='my-5' />
<hr className='my-5' />

<div>
<h2 className='text-3xl font-semibold'>Education</h2>
<div className='my-5'>
<h3>All Education</h3>
<div>
<h2 className='text-3xl font-semibold'>Education</h2>
<div className='my-5'>
<Showwcase>
{educations.map((edu) => (
<EducationShowwcaseCard
education={edu}
key={edu?._id}
showEdit={false}
/>
))}
</Showwcase>
</div>
</div>
</div>

<hr className='my-5' />
<hr className='my-5' />

<div>
<h2 className='text-3xl font-semibold'>Project</h2>
<div className='my-5'>
<h3>All Projects</h3>
<div>
<h2 className='text-3xl font-semibold'>Project</h2>
<div className='my-5'>
<Showwcase>
{projects.map((proj) => (
<ProjectShowwcaseCard
project={proj}
key={proj?._id}
showEdit={false}
/>
))}
</Showwcase>
</div>
</div>
</div>

<hr className='my-5' />
<hr className='my-5' />

<div>
<h2 className='text-3xl font-semibold'>Skills</h2>
<div className='my-5'>
<h3>All Skills</h3>
<div>
<h2 className='text-3xl font-semibold'>Skills</h2>
<div className='my-5'>
<Showwcase>
{skills.map((skill) => (
<SkillShowwcaseCard
skill={skill}
key={skill?._id}
showEdit={false}
/>
))}
</Showwcase>
</div>
</div>
</div>
<hr className='my-5' />
<hr className='my-5' />

<div>
<h2 className='text-3xl font-semibold'>Certification</h2>
<div className='my-5'>
<h3>All Certifications</h3>
<div>
<h2 className='text-3xl font-semibold'>
Certification
</h2>
<div className='my-5'>
<Showwcase>
{certs.map((cert) => (
<CertificationShowwcaseCard
certificate={cert}
key={cert?._id}
showEdit={false}
/>
))}
</Showwcase>
</div>
</div>
</div>
</div>
)}
</>
);
};
Expand Down
Loading

0 comments on commit 87bef6d

Please sign in to comment.