connect Dashboard to store

src/components/DevProfile.tsx

@@ -9,16 +9,16 @@ import {DevSummary} from '../models/Dev';
  */
 const DevProfile: FC<DevSummary> = ({
   id,
-  name,
+  displayName,
   picture,
   description,
   location,
   skills,
 }) => (
   <div className="profile bg-light">
-    <img src={picture} alt={name} className="round-img" />
+    <img src={picture} alt={displayName} className="round-img" />
     <div>
-      <h2>{name}</h2>
+      <h2>{displayName}</h2>
       <p>{description}</p>
       <p>{location}</p>
       <a href="profile.html" className="btn btn-primary">

src/models/Dev.ts

@@ -5,7 +5,7 @@ import Repo from '../types/Repo';
 /** Shorter dev interface */
 export interface DevSummary {
   id: string;
-  name: string;
+  displayName: string;
   picture: string;
   description: string;
   location: string;
@@ -28,7 +28,7 @@ interface Dev extends DevSummary {
  */
 export const dummyDev: Dev = {
   id: '0',
-  name: 'John Doe',
+  displayName: 'John Doe',
   picture:
     'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200',
   description: 'Developer at Microsoft',

src/pages/Dashboard.tsx

@@ -1,4 +1,8 @@
 import React, {FC} from 'react';
+// Redux
+import {connect} from 'react-redux';
+import {selectProfile} from '../store/firebase';
+// Style
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {
   faUserCircle,
@@ -7,7 +11,8 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import {faBlackTie} from '@fortawesome/free-brands-svg-icons';
 import Header from '../components/Header';
-import Dev, {dummyDev as dev} from '../models/Dev';
+// Types
+import Dev from '../models/Dev';
 import Experience from '../types/Experience';
 import {getTimePeriod} from '../types/TimePeriod';
 import Education from '../types/Education';
@@ -15,10 +20,10 @@ import Education from '../types/Education';
 /**
  * Main page from which a Dev can peek and edit its own profile.
  */
-const Dashboard: FC<Dev> = () => {
+const Dashboard: FC<Dev> = dev => {
   return (
     <section className="container">
-      <Header title="Dashboard" lead={`Welcome ${dev.name}`} />
+      <Header title="Dashboard" lead={`Welcome ${dev.displayName}`} />
       <div className="dash-buttons">
         <a href="create-profile.html" className="btn btn-light">
           <FontAwesomeIcon icon={faUserCircle} /> Edit Profile
@@ -42,7 +47,7 @@ const Dashboard: FC<Dev> = () => {
           </tr>
         </thead>
         <tbody>
-          {dev.experiences.map((exp: Experience, i: number) => (
+          {/* {dev.experiences.map((exp: Experience, i: number) => (
             <tr key={i}>
               <td>{exp.company}</td>
               <td className="hide-sm">{exp.position}</td>
@@ -51,7 +56,7 @@ const Dashboard: FC<Dev> = () => {
                 <button className="btn btn-danger">Delete</button>
               </td>
             </tr>
-          ))}
+          ))} */}
         </tbody>
       </table>
 
@@ -66,7 +71,7 @@ const Dashboard: FC<Dev> = () => {
           </tr>
         </thead>
         <tbody>
-          {dev.educations.map((edu: Education, i: number) => (
+          {/* {dev.educations.map((edu: Education, i: number) => (
             <tr key={i}>
               <td>{edu.school}</td>
               <td className="hide-sm">{edu.field}</td>
@@ -75,7 +80,7 @@ const Dashboard: FC<Dev> = () => {
                 <button className="btn btn-danger">Delete</button>
               </td>
             </tr>
-          ))}
+          ))} */}
         </tbody>
       </table>
       <div className="my-2">
@@ -87,4 +92,4 @@ const Dashboard: FC<Dev> = () => {
   );
 };
 
-export default Dashboard;
+export default connect(selectProfile)(Dashboard);

src/pages/Developers.tsx

@@ -11,7 +11,7 @@ const Developers: FC = () => {
   const developers: DevSummary[] = [
     {
       id: '0',
-      name: 'John Doe',
+      displayName: 'John Doe',
       picture:
         'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200',
       description: 'Developer at Microsoft',
@@ -20,7 +20,7 @@ const Developers: FC = () => {
     },
     {
       id: '42',
-      name: 'Ruidy Nemausat',
+      displayName: 'Ruidy Nemausat',
       picture:
         'https://lh3.googleusercontent.com/a-/AOh14GhncH95MWKwPR3TRKy4eVd4n6w0-fobe4dhiam2xA',
       description: 'Fullstack Engineer at DESY',

src/pages/Profile.tsx

@@ -56,7 +56,7 @@ const Profile: FC<Dev> = () => {
             alt="Some guy"
             className="round-img my-1"
           />
-          <h1 className="large">{dev.name}</h1>
+          <h1 className="large">{dev.displayName}</h1>
           <p className="lead">{dev.description}</p>
           <p>{dev.location}</p>
           <div className="icons my-1">
@@ -69,7 +69,7 @@ const Profile: FC<Dev> = () => {
         </div>
 
         <div className="profile-about bg-light p-2">
-          <h2 className="text-primary">{`${dev.name}'s Bio`}</h2>
+          <h2 className="text-primary">{`${dev.displayName}'s Bio`}</h2>
           <p>{dev.bio}</p>
           <div className="line"></div>
           <h2 className="text-primary">Skill Set</h2>