From 2597e8a63ce5fbb3b401eb241706bfc134805fa1 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 19 Feb 2019 17:39:53 +0100
Subject: [PATCH] progress component setup

---
 src/routes/Publish/Progress.tsx | 26 ++++++++++++++++++++++++++
 src/routes/Publish/index.tsx    |  7 ++++++-
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/Publish/Progress.tsx

diff --git a/src/routes/Publish/Progress.tsx b/src/routes/Publish/Progress.tsx
new file mode 100644
index 0000000..91e6cb3
--- /dev/null
+++ b/src/routes/Publish/Progress.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+
+const Progress = ({
+    currentStep,
+    totalSteps,
+    steps
+}: {
+    currentStep: number
+    totalSteps: number
+    steps: any[]
+}) => {
+    return (
+        <aside>
+            <ul>
+                {steps.map(({ title }, index) => (
+                    <li key={index}>
+                        {index + 1}
+                        {title}
+                    </li>
+                ))}
+            </ul>
+        </aside>
+    )
+}
+
+export default Progress
diff --git a/src/routes/Publish/index.tsx b/src/routes/Publish/index.tsx
index 3583534..f035ec5 100644
--- a/src/routes/Publish/index.tsx
+++ b/src/routes/Publish/index.tsx
@@ -5,6 +5,7 @@ import Form from '../../components/atoms/Form/Form'
 import AssetModel from '../../models/AssetModel'
 import Web3message from '../../components/Web3message'
 import Step from './Step'
+import Progress from './Progress'
 
 import form from '../../data/form-publish.json'
 
@@ -169,7 +170,11 @@ class Publish extends Component<{}, PublishState> {
                     this.publishedState()
                 ) : (
                     <>
-                        <p>Step {this.state.currentStep} </p>
+                        <Progress
+                            steps={form.steps}
+                            currentStep={this.state.currentStep}
+                            totalSteps={form.steps.length}
+                        />
 
                         <Form onSubmit={this.registerAsset}>
                             {form.steps.map((step: any, index: number) => (