From a5edc770771479532f6e4af08e71b242744625d2 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 2 Apr 2021 15:54:30 +0200
Subject: mitigating some weird nav issues and FOUC

---
 frontend/site/projects/museum/views/nav.overlay.js | 74 +++++++++++++++++-----
 1 file changed, 58 insertions(+), 16 deletions(-)

(limited to 'frontend/site/projects/museum/views/nav.overlay.js')

diff --git a/frontend/site/projects/museum/views/nav.overlay.js b/frontend/site/projects/museum/views/nav.overlay.js
index 36af7db..ed6a0f5 100644
--- a/frontend/site/projects/museum/views/nav.overlay.js
+++ b/frontend/site/projects/museum/views/nav.overlay.js
@@ -4,7 +4,9 @@ import actions from 'site/actions'
 
 import "./nav.css"
 
-import { ARTISTS } from "site/projects/museum/constants"
+import { ARTISTS, ARTIST_ORDER } from "site/projects/museum/constants"
+import { ArrowLeft, ArrowRight } from "site/projects/museum/icons"
+import { history } from "site/store"
 
 export default class NavOverlay extends Component {
   state = {
@@ -16,58 +18,98 @@ export default class NavOverlay extends Component {
 
   constructor(props) {
     super(props)
+    this.previousArtist = this.previousArtist.bind(this)
+    this.nextArtist = this.nextArtist.bind(this)
+    this.goHome = this.goHome.bind(this)
   }
 
   componentDidMount() {
     this.load()
   }
-  componentDidUpdate() {
+
+  componentDidUpdate(prevProps) {
+    // console.log(this.props.location.pathname, prevProps.location.pathname)
     if (this.props.location.pathname !== prevProps.location.pathname) {
       this.load()
     }
   }
 
   load() {
-    const { pathname } = this.props.location
-    const pathPartz = pathname.split("-")
+    const { page_name } = this.props.match.params
+    const pathPartz = page_name.split("-")
     const pathkey = pathPartz[0]
+    // console.log(pathkey)
     if (pathkey === 'start') {
       this.setState({
         showFooter: true,
         showArtist: false,
-        artist: {}
+        currentArtist: null,
+        artist: {},
       })
     } else if (pathkey in ARTISTS) {
       this.setState({
+        showHome: true,
         showFooter: true,
         showArtist: true,
-        artist: ARTISTS[pathkey]
+        currentArtist: pathkey,
+        artist: ARTISTS[pathkey],
       })
     } else {
       this.setState({
         showFooter: false,
         showArtist: false,
-        artist: {}
+        currentArtist: null,
+        artist: {},
       })
     }
   }
 
+  previousArtist() {
+    this.go(-1)
+  }
+
+  nextArtist() {
+    this.go(1)
+  }
+
+  go(step) {
+    if (!this.state.currentArtist) return
+    const index = ARTIST_ORDER.indexOf(this.state.currentArtist)
+    const nextIndex = (index + step + ARTIST_ORDER.length) % ARTIST_ORDER.length
+    const currentArtist = ARTIST_ORDER[nextIndex]
+    const artist = ARTISTS[currentArtist]
+    this.setState({ currentArtist, artist })
+    history.push(`/last-museum/${artist.start}`)
+  }
+
+  goHome() {
+    history.push(`/last-museum/`)
+  }
+
   render() {
-    const { showArtist, showHome, artist } = this.state
+    const { showArtist, showHome, showFooter, artist } = this.state
     return (
       <div className="museum-nav">
+        {showHome && (
+          <div className="home-link" onClick={this.goHome}>
+            Home
+          </div>
+        )}
         {showFooter && (
           showArtist ? (
-            <div className="footer">
-              <span className="arrow-left">{ArrowLeft}</span>
-              <span className="artist-name">{artist.name}</span>
-              <span className="artist-location">{artist.location}</span>
-              <span className="arrow-right">{ArrowRight}</span>
+            <div className="footer with-artist">
+              <div className="footer-gradient" />
+              <div className="artist-desc">
+                <span className="artist-name">{artist.name}</span>
+                <span className="artist-location">{artist.location}</span>
+              </div>
+              <div className="arrow arrow-left" onClick={this.previousArtist}>{ArrowLeft}</div>
+              <div className="arrow arrow-right" onClick={this.nextArtist}>{ArrowRight}</div>
             </div>
-          } : (
-            <div className="footer" />
+          ) : (
+            <div className="footer no-artist" />
           )
-        ))}
+        )}
       </div>
     )
   }
-- 
cgit v1.2.3-70-g09d2