From cb716e9f17acd27e39494b075b0f387136dfb6cf Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Sun, 17 May 2020 10:36:20 +0200
Subject: [PATCH] connect developers profile to store

---
 src/components/DevProfile.tsx |  2 +-
 src/models/Dev.ts             | 23 ++++++++++++
 src/pages/Developers.tsx      | 70 +++++++++++++++--------------------
 3 files changed, 54 insertions(+), 41 deletions(-)

diff --git a/src/components/DevProfile.tsx b/src/components/DevProfile.tsx
index 44c65d6..e122c75 100644
--- a/src/components/DevProfile.tsx
+++ b/src/components/DevProfile.tsx
@@ -26,7 +26,7 @@ const DevProfile: FC<DevSummary> = ({
       </a>
     </div>
     <ul>
-      {skills.map((s, i) => (
+      {skills?.map((s, i) => (
         <li className="text-primary" key={i}>
           <FontAwesomeIcon icon={faCheck} /> {s}
         </li>
diff --git a/src/models/Dev.ts b/src/models/Dev.ts
index 759112c..aeb0a43 100644
--- a/src/models/Dev.ts
+++ b/src/models/Dev.ts
@@ -146,4 +146,27 @@ export const dummyDev: Dev = {
     },
   ],
 };
+
+/** dummy devSummary profiles for debug and development only */
+export const developers: DevSummary[] = [
+  {
+    id: '0',
+    displayName: 'John Doe',
+    picture:
+      'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200',
+    description: 'Developer at Microsoft',
+    location: 'Seattle, WA',
+    skills: ['HTML', 'CSS', 'JavaScript', 'Python'],
+  },
+  {
+    id: '42',
+    displayName: 'Ruidy Nemausat',
+    picture:
+      'https://lh3.googleusercontent.com/a-/AOh14GhncH95MWKwPR3TRKy4eVd4n6w0-fobe4dhiam2xA',
+    description: 'Fullstack Engineer at DESY',
+    location: 'Hamburg, DE',
+    skills: ['React', 'TypeScript', 'Redux', 'Nodejs'],
+  },
+];
+
 export default Dev;
diff --git a/src/pages/Developers.tsx b/src/pages/Developers.tsx
index 154ecf3..8900ab7 100644
--- a/src/pages/Developers.tsx
+++ b/src/pages/Developers.tsx
@@ -1,49 +1,39 @@
 import React, {FC} from 'react';
+// Redux
+import {compose} from 'redux';
+import {connect} from 'react-redux';
+import {firestoreConnect} from 'react-redux-firebase';
+import {RootState} from '../store';
+// Style
 import Header from '../components/Header';
 import DevProfile from '../components/DevProfile';
 import {DevSummary} from '../models/Dev';
 
+interface IProps {
+  developers: DevSummary[];
+}
 /**
  * Developers list page
  */
-// const Developers: FC<DevSummary[]> = (developers) => {
-const Developers: FC = () => {
-  const developers: DevSummary[] = [
-    {
-      id: '0',
-      displayName: 'John Doe',
-      picture:
-        'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200',
-      description: 'Developer at Microsoft',
-      location: 'Seattle, WA',
-      skills: ['HTML', 'CSS', 'JavaScript', 'Python'],
-    },
-    {
-      id: '42',
-      displayName: 'Ruidy Nemausat',
-      picture:
-        'https://lh3.googleusercontent.com/a-/AOh14GhncH95MWKwPR3TRKy4eVd4n6w0-fobe4dhiam2xA',
-      description: 'Fullstack Engineer at DESY',
-      location: 'Hamburg, DE',
-      skills: ['React', 'TypeScript', 'Redux', 'Nodejs'],
-    },
-  ];
+const Developers: FC<IProps> = ({developers}) => (
+  <section className="container">
+    <Header
+      title="Developers"
+      lead="Browse and connect with developers"
+      icon="connectdevelop"
+    />
+    <div className="profiles">
+      {developers?.map(dev => (
+        // use spread operator to pass props
+        <DevProfile key={dev.id} {...dev} />
+      ))}
+    </div>
+  </section>
+);
 
-  return (
-    <section className="container">
-      <Header
-        title="Developers"
-        lead="Browse and connect with developers"
-        icon="connectdevelop"
-      />
-      <div className="profiles">
-        {developers.map(dev => (
-          // use spread operator to pass props
-          <DevProfile key={dev.id} {...dev} />
-        ))}
-      </div>
-    </section>
-  );
-};
-
-export default Developers;
+export default compose<FC>(
+  firestoreConnect(() => ['users']), // or { collection: 'users' }
+  connect((state: RootState, props) => ({
+    developers: state.firestore.ordered.users,
+  })),
+)(Developers);