From bcb7c778eee1a2dd14fe222f7a30eada1fd8f902 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 23 Jul 2020 22:19:12 +0200
Subject: pulling out section list

---
 .../app/views/viewer/nav/viewer.sections.js        | 40 ++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 animism-align/frontend/app/views/viewer/nav/viewer.sections.js

(limited to 'animism-align/frontend/app/views/viewer/nav/viewer.sections.js')

diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.sections.js b/animism-align/frontend/app/views/viewer/nav/viewer.sections.js
new file mode 100644
index 0000000..76402e8
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.sections.js
@@ -0,0 +1,40 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+import { Arrow } from './viewer.icons'
+import ViewerSectionsNav from './viewer.sections.nav'
+import { ROMAN_NUMERALS } from 'app/constants'
+import { thumbnailURL } from 'app/views/align/align.util'
+
+class ViewerSections extends Component {
+  componentDidMount() {
+  }
+  
+  render() {
+    const { sections } = this.props
+    return (
+      <div className="viewer-sections">
+        {sections.map(section => {
+          console.log(section)
+          return (
+            <div className="viewer-section" key={section.index}>
+              <div className="section-thumbnail" style={{
+                backgroundImage: section.media.length && 'url(' + thumbnailURL(section.media[0]) + ')',
+              }}/>
+              {ROMAN_NUMERALS[section.index]}: {section.title}
+            </div>
+          )
+        })}
+        <ViewerSectionsNav />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  sections: state.viewer.sections,
+})
+
+export default connect(mapStateToProps)(ViewerSections)
-- 
cgit v1.2.3-70-g09d2