mirror of
https://github.com/rjNemo/devbook_ts
synced 2026-06-06 02:36:39 +00:00
refactor: separate Dashboard Buttons, Experience section
This commit is contained in:
parent
24a27aa059
commit
276e4fdaa0
3 changed files with 93 additions and 55 deletions
24
src/pages/Dashboard/Buttons.tsx
Normal file
24
src/pages/Dashboard/Buttons.tsx
Normal 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
51
src/pages/Dashboard/ExperienceSection.tsx
Normal 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;
|
||||
|
|
@ -1,25 +1,20 @@
|
|||
import React, {FC, MouseEvent} from 'react';
|
||||
// Redux
|
||||
import {WithFirebaseProps} from 'react-redux-firebase';
|
||||
import {enhance} from '../store/firebase';
|
||||
// Routing
|
||||
import {Link} from 'react-router-dom';
|
||||
import Routes from '../constants/routes';
|
||||
import {enhance} from '../../store/firebase';
|
||||
// Style
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {
|
||||
faUserCircle,
|
||||
faGraduationCap,
|
||||
faUserSlash,
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
import {faBlackTie} from '@fortawesome/free-brands-svg-icons';
|
||||
import Header from '../components/Header';
|
||||
import {faUserSlash} from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
import DashBoardButtons from './Buttons';
|
||||
import Header from '../../components/Header';
|
||||
// Types
|
||||
import Dev from '../models/Dev';
|
||||
import User from '../models/User';
|
||||
import Experience from '../types/Experience';
|
||||
import {getTimePeriod} from '../types/TimePeriod';
|
||||
import Education from '../types/Education';
|
||||
import Dev from '../../models/Dev';
|
||||
import User from '../../models/User';
|
||||
import Experience from '../../types/Experience';
|
||||
import {getTimePeriod} from '../../types/TimePeriod';
|
||||
import Education from '../../types/Education';
|
||||
import DashboardExperienceSection from './ExperienceSection';
|
||||
|
||||
interface IProps extends Dev, WithFirebaseProps<User> {}
|
||||
/**
|
||||
|
|
@ -65,46 +60,14 @@ const Dashboard: FC<IProps> = ({
|
|||
return (
|
||||
<section className="container">
|
||||
<Header title="Dashboard" lead={`Welcome ${displayName}`} />
|
||||
<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>
|
||||
<DashBoardButtons />
|
||||
|
||||
<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={deleteExpEntry(exp.id, experiences)}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{!!experiences && (
|
||||
<DashboardExperienceSection
|
||||
experiences={experiences}
|
||||
handleDelete={deleteExpEntry}
|
||||
/>
|
||||
)}
|
||||
|
||||
<h2 className="my-2">Education Credentials</h2>
|
||||
<table className="table">
|
||||
Loading…
Reference in a new issue