From 2ea81dad3cc64a4cdd257ae54e09f267ac9d28d1 Mon Sep 17 00:00:00 2001
From: Toni Ristola <tristola@gmail.com>
Date: Thu, 24 Oct 2019 17:29:38 +0300
Subject: [PATCH] Refactoring patient projects

---
 pages/index.jsx          | 81 +++++++++++-----------------------------
 pages/patientProjects.js | 27 ++++++++++++++
 2 files changed, 48 insertions(+), 60 deletions(-)
 create mode 100644 pages/patientProjects.js

diff --git a/pages/index.jsx b/pages/index.jsx
index 7856ce4..8224471 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -2,10 +2,10 @@ import React from "react";
 import "../styles/style.styl";
 import "../styles/icons.less";
 import Head from "next/head";
-import InviteForm from '../components/InviteForm';
-import Members from '../components/Members';
-import Feed from '../components/Feed';
-
+import InviteForm from "../components/InviteForm";
+import Members from "../components/Members";
+import Feed from "../components/Feed";
+import { projects } from './patientProjects'
 const Hero = () => (
   <div className="header">
     <video
@@ -32,6 +32,20 @@ const Hero = () => (
   </div>
 );
 
+const PatientProject = ({ title, description, url, image }) => (
+  <div className="bread">
+    <div className="column column2-5">
+      <a href={url} target="_blank">
+        <img src={image} style={{ width: "7rem"}} />
+      </a>
+    </div>
+    <div className="column column3-5">
+      <h4>{title}</h4>
+      <p>{description}</p>
+    </div>
+  </div>
+);
+
 const IndexContent = () => (
   <>
     <div className="content with-feed">
@@ -107,62 +121,9 @@ const IndexContent = () => (
         </div>
         <div className="row">
           <h2>Potilaiden projekteja</h2>
-          <div className="bread">
-            <div className="column column2-5">
-              <a href="https://redom.js.org" target="_blank">
-                <img src="/static/images/redom.svg" />
-              </a>
-            </div>
-            <div className="column column3-5">
-              <h4>RE:DOM</h4>
-              <p>
-                Tiny (2 KB) turboboosted JavaScript library for creating user
-                interfaces. Develop web apps with 100 % JavaScript and web
-                standards.
-              </p>
-            </div>
-          </div>
-          <div className="bread">
-            <div className="column column2-5">
-              <a href="https://codestats.net/" target="_blank">
-                <img
-                  src="/static/images/codestats.png"
-                  className="project-image__codestats"
-                />
-              </a>
-            </div>
-            <div className="column column3-5">
-              <h4>Code::Stats</h4>
-              <p>
-                Code::Stats is a free stats tracking service for programmers
-              </p>
-            </div>
-          </div>
-          <div className="bread">
-            <div className="column column2-5">
-              <a href="https://reactabular.js.org/" target="_blank">
-                <img
-                  src="/static/images/reactabular.png"
-                  className="project-image__codestats"
-                />
-              </a>
-            </div>
-            <div className="column column3-5">
-              <h4>Reactabular</h4>
-              <p>A framework for building the React table you need</p>
-            </div>
-          </div>
-          <div className="bread">
-            <div className="column column2-5">
-              <a href="https://avain.app" target="_blank">
-                <img src="/static/images/avain.svg" style={{ width: "7rem" }} />
-              </a>
-            </div>
-            <div className="column column3-5">
-              <h4>Avain.app</h4>
-              <p>Secure one-time password manager (PWA + Web Crypto)</p>
-            </div>
-          </div>
+          {projects.map(project => (
+            <PatientProject key={project.url} {...project} />
+          ))}
         </div>
       </section>
       <div id="feed">
diff --git a/pages/patientProjects.js b/pages/patientProjects.js
new file mode 100644
index 0000000..5fd5e75
--- /dev/null
+++ b/pages/patientProjects.js
@@ -0,0 +1,27 @@
+export const projects = [
+  {
+    title: "RE:DOM",
+    description:
+      " Tiny (2 KB) turboboosted JavaScript library for creating user interfaces. Develop web apps with 100 % JavaScript and web standards.",
+    url: "https://redom.js.org",
+    image: "/static/images/redom.svg",
+  },
+  {
+    title: "Code::Stats",
+    description: "Code::Stats is a free stats tracking service for programmers",
+    url: "https://codestats.net/",
+    image: "/static/images/codestats.png",
+  },
+  {
+    title: "Reactabular",
+    description: "A framework for building the React table you need",
+    url: "https://reactabular.js.org/",
+    image: "/static/images/reactabular.png",
+  },
+  {
+    title: "Avain.app",
+    description: "Secure one-time password manager (PWA + Web Crypto)",
+    url: "https://avain.app",
+    image: "/static/images/avain.svg",
+  },
+];