ruidy/devbook_ts
1
0
Fork 0
mirror of https://github.com/rjNemo/devbook_ts synced 2026-06-11 21:16:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: add Dashboard Education section

Browse source
This commit is contained in:
Ruidy Nemausat 2020-06-02 19:04:31 +02:00
parent 276e4fdaa0
commit bf32c9a4a6
3 changed files with 60 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/pages/Dashboard/EducationSection.tsx Normal file
View file

@ -0,0 +1,49 @@
import React, {FC} from 'react';
// Typing
import Education from '../../types/Education';
import {getTimePeriod} from '../../types/TimePeriod';
interface IProps {
educations: Education[];
handleDelete: (
id: number,
entries: Education[],
) => (e: React.MouseEvent<HTMLButtonElement>) => void;
}
const DashboardEducationSection: FC<IProps> = ({educations, handleDelete}) => {
return (
<>
<h2 className="my-2">Education Credentials</h2>
<table className="table">
<thead>
<tr>
<th>School</th>
<th className="hide-sm">Degree</th>
<th className="hide-sm">Years</th>
<th></th>
</tr>
</thead>
<tbody>
{educations?.map((edu: Education, i: number) => (
<tr key={edu.id}>
<td>{edu.school}</td>
<td className="hide-sm">{edu.degree}</td>
<td className="hide-sm">{getTimePeriod(edu.from, edu.to)}</td>
<td>
<button
className="btn btn-danger"
onClick={handleDelete(edu.id, educations)}
>
Delete
</button>
</td>
</tr>
))}
</tbody>
</table>
</>
);
};
export default DashboardEducationSection;

2
src/pages/Dashboard/ExperienceSection.tsx
View file

@ -27,7 +27,7 @@ const DashboardExperienceSection: FC<IProps> = ({
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{experiences.map((exp: Experience) => ( {experiences?.map((exp: Experience) => (
<tr key={exp.id}> <tr key={exp.id}>
<td>{exp.company}</td> <td>{exp.company}</td>
<td className="hide-sm">{exp.position}</td> <td className="hide-sm">{exp.position}</td>

44
src/pages/Dashboard/index.tsx
View file

@ -15,6 +15,7 @@ import Experience from '../../types/Experience';
import {getTimePeriod} from '../../types/TimePeriod'; import {getTimePeriod} from '../../types/TimePeriod';
import Education from '../../types/Education'; import Education from '../../types/Education';
import DashboardExperienceSection from './ExperienceSection'; import DashboardExperienceSection from './ExperienceSection';
import DashboardEducationSection from './EducationSection';
interface IProps extends Dev, WithFirebaseProps<User> {} interface IProps extends Dev, WithFirebaseProps<User> {}
/** /**
@ -62,41 +63,16 @@ const Dashboard: FC<IProps> = ({
<Header title="Dashboard" lead={`Welcome ${displayName}`} /> <Header title="Dashboard" lead={`Welcome ${displayName}`} />
<DashBoardButtons /> <DashBoardButtons />
{!!experiences && ( <DashboardExperienceSection
<DashboardExperienceSection experiences={experiences}
experiences={experiences} handleDelete={deleteExpEntry}
handleDelete={deleteExpEntry} />
/>
)} <DashboardEducationSection
educations={educations}
handleDelete={deleteEduEntry}
/>
<h2 className="my-2">Education Credentials</h2>
<table className="table">
<thead>
<tr>
<th>School</th>
<th className="hide-sm">Degree</th>
<th className="hide-sm">Years</th>
<th></th>
</tr>
</thead>
<tbody>
{educations?.map((edu: Education, i: number) => (
<tr key={edu.id}>
<td>{edu.school}</td>
<td className="hide-sm">{edu.degree}</td>
<td className="hide-sm">{getTimePeriod(edu.from, edu.to)}</td>
<td>
<button
className="btn btn-danger"
onClick={deleteEduEntry(edu.id, educations)}
>
Delete
</button>
</td>
</tr>
))}
</tbody>
</table>
<div className="my-2"> <div className="my-2">
<button className="btn btn-danger" onClick={deleteAccount}> <button className="btn btn-danger" onClick={deleteAccount}>
<FontAwesomeIcon icon={faUserSlash} /> Delete my Account <FontAwesomeIcon icon={faUserSlash} /> Delete my Account