From 6fdfc1864355f4c3f7350308b73d09e450eff069 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Thu, 11 Jan 2018 20:13:12 -0800
Subject: [PATCH] Add AvsWindow on top of GenWindow

---
 css/gen-window.css                            |  1 +
 js/components/AvsWindow/index.js              | 21 +++++++++++++
 .../__snapshots__/index.test.js.snap          |  1 +
 js/components/GenWindow/index.js              | 30 ++++++++++++++++---
 js/components/GenWindow/index.test.js         | 11 +++++--
 5 files changed, 58 insertions(+), 6 deletions(-)
 create mode 100644 js/components/AvsWindow/index.js

diff --git a/css/gen-window.css b/css/gen-window.css
index cf38aa06..c782baef 100644
--- a/css/gen-window.css
+++ b/css/gen-window.css
@@ -81,6 +81,7 @@
 
 #winamp2-js .gen-middle-center {
     flex-grow: 1;
+    position: relative;
 }
 
 #winamp2-js .gen-middle-right {
diff --git a/js/components/AvsWindow/index.js b/js/components/AvsWindow/index.js
new file mode 100644
index 00000000..c48c79ae
--- /dev/null
+++ b/js/components/AvsWindow/index.js
@@ -0,0 +1,21 @@
+import React from "react";
+import GenWindow from "../GenWindow";
+import "../../../css/gen-window.css";
+
+const AvsWindow = () => (
+  <GenWindow title="Avs" close={() => {}} windowId="AVS_WINDOW">
+    <canvas
+      style={{
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: "100%",
+        width: "100%"
+      }}
+    />
+  </GenWindow>
+);
+
+export default AvsWindow;
diff --git a/js/components/GenWindow/__snapshots__/index.test.js.snap b/js/components/GenWindow/__snapshots__/index.test.js.snap
index 82555ef6..85f2b388 100644
--- a/js/components/GenWindow/__snapshots__/index.test.js.snap
+++ b/js/components/GenWindow/__snapshots__/index.test.js.snap
@@ -3,6 +3,7 @@
 exports[`GenWindow renders to snapshot 1`] = `
 <div
   className="gen-window window selected"
+  onMouseDown={[Function]}
 >
   <div
     className="gen-top draggable"
diff --git a/js/components/GenWindow/index.js b/js/components/GenWindow/index.js
index 837a5e94..ebf2127a 100644
--- a/js/components/GenWindow/index.js
+++ b/js/components/GenWindow/index.js
@@ -1,7 +1,9 @@
 import React from "react";
+import { connect } from "react-redux";
 import PropTypes from "prop-types";
 import classnames from "classnames";
-import "../../../css/gen-window.css";
+
+import { SET_FOCUSED_WINDOW } from "../../actionTypes";
 
 const Text = ({ children }) => {
   const letters = children.split("");
@@ -15,8 +17,19 @@ const Text = ({ children }) => {
   ));
 };
 
-const GenWindow = ({ selected, children, close, title }) => (
-  <div className={classnames("gen-window", "window", { selected })}>
+// Named export for testing
+export const GenWindow = ({
+  selected,
+  children,
+  close,
+  title,
+  setFocus,
+  windowId
+}) => (
+  <div
+    className={classnames("gen-window", "window", { selected })}
+    onMouseDown={() => setFocus(windowId)}
+  >
     <div className="gen-top draggable">
       <div className="gen-top-left draggable" />
       <div className="gen-top-left-right-fill draggable" />
@@ -48,9 +61,18 @@ const GenWindow = ({ selected, children, close, title }) => (
 
 GenWindow.propTypes = {
   title: PropTypes.string.isRequired,
+  windowId: PropTypes.string.isRequired,
   children: PropTypes.node,
   close: PropTypes.func.isRequired,
   selected: PropTypes.bool.isRequired
 };
 
-export default GenWindow;
+const mapStateToProps = (state, ownProps) => ({
+  selected: state.windows.focused === ownProps.windowId
+});
+
+const mapDispatchToProps = {
+  setFocus: window => ({ type: SET_FOCUSED_WINDOW, window })
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(GenWindow);
diff --git a/js/components/GenWindow/index.test.js b/js/components/GenWindow/index.test.js
index 0f763627..1927f2ad 100644
--- a/js/components/GenWindow/index.test.js
+++ b/js/components/GenWindow/index.test.js
@@ -1,12 +1,19 @@
 import React from "react";
 import renderer from "react-test-renderer";
 
-import GenWindow from "./index";
+import { GenWindow } from "./index";
 
 describe("GenWindow", () => {
   it("renders to snapshot", () => {
     const tree = renderer
-      .create(<GenWindow title="My Window" selected close={() => {}} />)
+      .create(
+        <GenWindow
+          title="My Window"
+          selected
+          close={() => {}}
+          windowId="TEST_WINDOW_ID"
+        />
+      )
       .toJSON();
     expect(tree).toMatchSnapshot();
   });