re-implement marquee

1 files changed, 51 insertions, 0 deletions

diff --git a/frontend/site/projects/museum/views/marquee.js b/frontend/site/projects/museum/views/marquee.js
new file mode 100644
index 0000000..5d031eb
--- /dev/null
+++ b/frontend/site/projects/museum/views/marquee.js
@@ -0,0 +1,51 @@
+import React, { Component } from 'react'
+import Marquee from "react-fast-marquee"
+
+import "./marquee.css"
+
+import { MARQUEES } from "site/projects/museum/constants"
+
+export default class MarqueeContainer extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+    }
+  }
+
+  componentDidMount() {
+    this.load()
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.location.pathname !== prevProps.location.pathname) {
+      this.load()
+    }
+  }
+
+  load() {
+    const { match } = this.props
+    const { page_name } = match.params
+    if (!(page_name in MARQUEES)) {
+      this.setState({ message: null })
+    }
+    this.setState({ message: MARQUEES[page_name] })
+  }
+
+  render() {
+    const { language } = this.props
+    if (!this.state.message) return null
+    return (
+      <div className="marquee-container">
+        <Marquee
+          direction="left"
+          speed={412}
+          gradient={false}
+        >
+          <span className="marquee-text">
+            {this.state.message[language]}
+          </span>
+        </Marquee>
+      </div>
+    )
+  }
+}