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

refactor: separate Dashboard Buttons, Experience section

Browse source
This commit is contained in:
Ruidy Nemausat 2020-06-02 18:59:36 +02:00
parent 24a27aa059
commit 276e4fdaa0
3 changed files with 93 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/pages/Dashboard/Buttons.tsx Normal file
View file

@ -0,0 +1,24 @@
import React from 'react';
// Routing
import {Link} from 'react-router-dom';
import Routes from '../../constants/routes';
// Styling
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faUserCircle, faGraduationCap} from '@fortawesome/free-solid-svg-icons';
import {faBlackTie} from '@fortawesome/free-brands-svg-icons';
const DashBoardButtons = () => (
<div className="dash-buttons">
<Link to={Routes.EDIT_PROFILE} className="btn btn-light">
<FontAwesomeIcon icon={faUserCircle} /> Edit Profile
</Link>
<Link to={Routes.ADD_EXPERIENCE} className="btn btn-light">
<FontAwesomeIcon icon={faBlackTie} /> Add Experience
</Link>
<Link to={Routes.ADD_EDUCATION} className="btn btn-light">
<FontAwesomeIcon icon={faGraduationCap} /> Add Education
</Link>
</div>
);
export default DashBoardButtons;

51
src/pages/Dashboard/ExperienceSection.tsx Normal file
View file

@ -0,0 +1,51 @@
import React, {FC} from 'react';
// Typing
import Experience from '../../types/Experience';
import {getTimePeriod} from '../../types/TimePeriod';
interface IProps {
experiences: Experience[];
handleDelete: (
id: number,
entries: Experience[],
) => (e: React.MouseEvent<HTMLButtonElement>) => void;
}
const DashboardExperienceSection: FC<IProps> = ({
experiences,
handleDelete,
}) => {
return (
<>
<h2 className="my-2">Experience Credentials</h2>
<table className="table">
<thead>
<tr>
<th>Company</th>
<th className="hide-sm">Title</th>
<th className="hide-sm">Years</th>
<th></th>
</tr>
</thead>
<tbody>
{experiences.map((exp: Experience) => (
<tr key={exp.id}>
<td>{exp.company}</td>
<td className="hide-sm">{exp.position}</td>
<td className="hide-sm">{getTimePeriod(exp.from, exp.to)}</td>
<td>
<button
className="btn btn-danger"
onClick={handleDelete(exp.id, experiences)}
>
Delete
</button>
</td>
</tr>
))}
</tbody>
</table>
</>
);
};
export default DashboardExperienceSection;

73
src/pages/Dashboard.tsx → src/pages/Dashboard/index.tsx
View file

@ -1,25 +1,20 @@
import React, {FC, MouseEvent} from 'react'; import React, {FC, MouseEvent} from 'react';
// Redux // Redux
import {WithFirebaseProps} from 'react-redux-firebase'; import {WithFirebaseProps} from 'react-redux-firebase';
import {enhance} from '../store/firebase'; import {enhance} from '../../store/firebase';
// Routing
import {Link} from 'react-router-dom';
import Routes from '../constants/routes';
// Style // Style
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import { import {faUserSlash} from '@fortawesome/free-solid-svg-icons';
faUserCircle,
faGraduationCap, import DashBoardButtons from './Buttons';
faUserSlash, import Header from '../../components/Header';
} from '@fortawesome/free-solid-svg-icons';
import {faBlackTie} from '@fortawesome/free-brands-svg-icons';
import Header from '../components/Header';
// Types // Types
import Dev from '../models/Dev'; import Dev from '../../models/Dev';
import User from '../models/User'; import User from '../../models/User';
import Experience from '../types/Experience'; 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';
interface IProps extends Dev, WithFirebaseProps<User> {} interface IProps extends Dev, WithFirebaseProps<User> {}
/** /**
@ -65,46 +60,14 @@ const Dashboard: FC<IProps> = ({
return ( return (
<section className="container"> <section className="container">
<Header title="Dashboard" lead={`Welcome ${displayName}`} /> <Header title="Dashboard" lead={`Welcome ${displayName}`} />
<div className="dash-buttons"> <DashBoardButtons />
<Link to={Routes.EDIT_PROFILE} className="btn btn-light">
<FontAwesomeIcon icon={faUserCircle} /> Edit Profile
</Link>
<Link to={Routes.ADD_EXPERIENCE} className="btn btn-light">
<FontAwesomeIcon icon={faBlackTie} /> Add Experience
</Link>
<Link to={Routes.ADD_EDUCATION} className="btn btn-light">
<FontAwesomeIcon icon={faGraduationCap} /> Add Education
</Link>
</div>
<h2 className="my-2">Experience Credentials</h2> {!!experiences && (
<table className="table"> <DashboardExperienceSection
<thead> experiences={experiences}
<tr> handleDelete={deleteExpEntry}
<th>Company</th> />
<th className="hide-sm">Title</th> )}
<th className="hide-sm">Years</th>
<th></th>
</tr>
</thead>
<tbody>
{experiences?.map((exp: Experience) => (
<tr key={exp.id}>
<td>{exp.company}</td>
<td className="hide-sm">{exp.position}</td>
<td className="hide-sm">{getTimePeriod(exp.from, exp.to)}</td>
<td>
<button
className="btn btn-danger"
onClick={deleteExpEntry(exp.id, experiences)}
>
Delete
</button>
</td>
</tr>
))}
</tbody>
</table>
<h2 className="my-2">Education Credentials</h2> <h2 className="my-2">Education Credentials</h2>
<table className="table"> <table className="table">