diff --git a/src/pages/Dashboard/Buttons.tsx b/src/pages/Dashboard/Buttons.tsx
new file mode 100644
index 0000000..13bd5c0
--- /dev/null
+++ b/src/pages/Dashboard/Buttons.tsx
@@ -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 = () => (
+
+
+ Edit Profile
+
+
+ Add Experience
+
+
+ Add Education
+
+
+);
+
+export default DashBoardButtons;
diff --git a/src/pages/Dashboard/ExperienceSection.tsx b/src/pages/Dashboard/ExperienceSection.tsx
new file mode 100644
index 0000000..cdece49
--- /dev/null
+++ b/src/pages/Dashboard/ExperienceSection.tsx
@@ -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) => void;
+}
+const DashboardExperienceSection: FC = ({
+ experiences,
+ handleDelete,
+}) => {
+ return (
+ <>
+ Experience Credentials
+
+
+
+ | Company |
+ Title |
+ Years |
+ |
+
+
+
+ {experiences.map((exp: Experience) => (
+
+ | {exp.company} |
+ {exp.position} |
+ {getTimePeriod(exp.from, exp.to)} |
+
+
+ |
+
+ ))}
+
+
+ >
+ );
+};
+
+export default DashboardExperienceSection;
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard/index.tsx
similarity index 56%
rename from src/pages/Dashboard.tsx
rename to src/pages/Dashboard/index.tsx
index ddbf17b..0f4edb9 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard/index.tsx
@@ -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 {}
/**
@@ -65,46 +60,14 @@ const Dashboard: FC = ({
return (
-
-
- Edit Profile
-
-
- Add Experience
-
-
- Add Education
-
-
+
- Experience Credentials
-
-
-
- | Company |
- Title |
- Years |
- |
-
-
-
- {experiences?.map((exp: Experience) => (
-
- | {exp.company} |
- {exp.position} |
- {getTimePeriod(exp.from, exp.to)} |
-
-
- |
-
- ))}
-
-
+ {!!experiences && (
+
+ )}
Education Credentials