enable delete credential button

src/models/Dev.ts

@@ -81,6 +81,7 @@ export const dummyDev: Dev = {
     'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis unde quae vero enim adipisci voluptas magni sapiente reprehenderit error minima.',
   experiences: [
     {
+      id: 1,
       company: 'Microsoft',
       from: new Date(2011, 10),
       to: 'Current',
@@ -90,6 +91,7 @@ export const dummyDev: Dev = {
         'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas corrupti rem eius, accusantium ipsum vel eveniet magnam voluptatum? Minus, voluptatum!',
     },
     {
+      id: 0,
       company: 'Sun Microsystems',
       location: 'USA',
       from: new Date(2004, 10),
@@ -101,6 +103,7 @@ export const dummyDev: Dev = {
   ],
   educations: [
     {
+      id: 0,
       school: 'University of Washington',
       from: new Date(1993, 9),
       to: new Date(1999, 6),

src/pages/AddEducation.tsx

@@ -62,6 +62,7 @@ const AddEducation: FC<IProps> = ({firebase, educations}) => {
     }: FormData): Education => {
       if (current) to = 'Current';
       const newEdu: Education = {
+        id: educations.length,
         school,
         degree,
         field,

src/pages/AddExperience.tsx

@@ -64,6 +64,7 @@ const AddExperience: FC<IProps> = ({firebase, experiences}) => {
     }: FormData): Experience => {
       if (current) to = 'Current';
       const newExp: Experience = {
+        id: experiences.length,
         position,
         company,
         location,
@@ -74,7 +75,6 @@ const AddExperience: FC<IProps> = ({firebase, experiences}) => {
       return newExp;
     };
     const newExp = makeExperience(formData);
-    console.log(JSON.stringify(newExp, null, 4));
 
     try {
       firebase.updateProfile(

src/pages/Dashboard.tsx

@@ -1,4 +1,4 @@
-import React, {FC} from 'react';
+import React, {FC, MouseEvent} from 'react';
 // Redux
 import {WithFirebaseProps} from 'react-redux-firebase';
 import {enhance} from '../store/firebase';
@@ -32,6 +32,32 @@ const Dashboard: FC<IProps> = ({
   educations,
 }) => {
   const logout = () => firebase.logout();
+
+  /**
+   *
+   * @param id key of the entry to remove
+   * @param entries array of credential educations
+   */
+  const deleteEduEntry = (id: number, entries: Education[]) => (
+    e: MouseEvent<HTMLButtonElement>,
+  ) => {
+    firebase.updateProfile({
+      educations: entries.filter((e: Education) => e.id !== id),
+    });
+  };
+  /**
+   *
+   * @param id key of the entry to remove
+   * @param entries array of credential experiences
+   */
+  const deleteExpEntry = (id: number, entries: Experience[]) => (
+    e: MouseEvent<HTMLButtonElement>,
+  ) => {
+    firebase.updateProfile({
+      experiences: entries.filter((e: Experience) => e.id !== id),
+    });
+  };
+
   return (
     <section className="container">
       <Header title="Dashboard" lead={`Welcome ${displayName}`} />
@@ -58,13 +84,18 @@ const Dashboard: FC<IProps> = ({
           </tr>
         </thead>
         <tbody>
-          {experiences?.map((exp: Experience, i: number) => (
+          {experiences?.map((exp: Experience) => (
-            <tr key={i}>
+            <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">Delete</button>
+                <button
+                  className="btn btn-danger"
+                  onClick={deleteExpEntry(exp.id, experiences)}
+                >
+                  Delete
+                </button>
               </td>
             </tr>
           ))}
@@ -83,12 +114,17 @@ const Dashboard: FC<IProps> = ({
         </thead>
         <tbody>
           {educations?.map((edu: Education, i: number) => (
-            <tr key={i}>
+            <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">Delete</button>
+                <button
+                  className="btn btn-danger"
+                  onClick={deleteEduEntry(edu.id, educations)}
+                >
+                  Delete
+                </button>
               </td>
             </tr>
           ))}

src/types/Education.ts

@@ -1,6 +1,7 @@
 import TimePeriod from '../types/TimePeriod';
 
 interface Education {
+  id: number;
   school: string;
   degree: string;
   from: TimePeriod;

src/types/Experience.ts

@@ -1,6 +1,7 @@
 import TimePeriod from '../types/TimePeriod';
 
 interface Experience {
+  id: number;
   company: string;
   from: TimePeriod;
   to: TimePeriod;