From 276e4fdaa06d2ad39cfdf2c734594e86d8099d3d Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Tue, 2 Jun 2020 18:59:36 +0200
Subject: [PATCH] refactor: separate Dashboard Buttons, Experience section

---
 src/pages/Dashboard/Buttons.tsx               | 24 ++++++
 src/pages/Dashboard/ExperienceSection.tsx     | 51 +++++++++++++
 .../{Dashboard.tsx => Dashboard/index.tsx}    | 73 +++++--------------
 3 files changed, 93 insertions(+), 55 deletions(-)
 create mode 100644 src/pages/Dashboard/Buttons.tsx
 create mode 100644 src/pages/Dashboard/ExperienceSection.tsx
 rename src/pages/{Dashboard.tsx => Dashboard/index.tsx} (56%)

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 = () => (
+  <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;
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<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;
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<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">