Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Talent details implementation deployment #82

Merged
merged 2 commits into from
Oct 20, 2023
Merged

Talent details implementation deployment #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e8d43bb
bug: fix add certification incorrect endpoint
Ayobami6 Oct 20, 2023
693ca10
feat: consume talent metadata api in details page
Ayobami6 Oct 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions client/src/actions/experience.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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