From 52d3bd5bb3b7ae33a7802a2a3fbbb5caacb9a1cf Mon Sep 17 00:00:00 2001
From: alexlee-dev <alex@alexlee.dev>
Date: Sun, 22 Sep 2019 08:44:10 -0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=8F=EF=B8=8F=20Planet=20Names?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cypress/integration/Planets-spec.js | 20 ++++++++++++++++----
 src/components/Map.js               | 23 ++++++++++++++++-------
 2 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/cypress/integration/Planets-spec.js b/cypress/integration/Planets-spec.js
index ec9dce6..98f4027 100644
--- a/cypress/integration/Planets-spec.js
+++ b/cypress/integration/Planets-spec.js
@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 
-import { setMockState } from '../fixtures/default'
+import { setMockState, mockState } from '../fixtures/default'
 
 describe('Planets', () => {
   beforeEach(() => {
@@ -10,8 +10,20 @@ describe('Planets', () => {
   })
 
   it('Should display planets.', () => {
-    cy.get('body').contains('Planet 1')
-    cy.get('body').contains('Planet 2')
-    cy.get('body').contains('Planet 3')
+    cy.get('body').contains(mockState.world.planets[0].name)
+    cy.get('body').contains(mockState.world.planets[1].name)
+    cy.get('body').contains(mockState.world.planets[2].name)
+  })
+
+  // * Update this in the future
+  it('Should display an alert when clicking a planet.', () => {
+    const stub = cy.stub()
+    cy.on('window:alert', stub)
+    cy.get('body')
+      .contains(mockState.world.planets[0].name)
+      .click()
+      .then(() => {
+        expect(stub.getCall(0)).to.be.calledWith('Clicked!')
+      })
   })
 })
diff --git a/src/components/Map.js b/src/components/Map.js
index 4f14a2e..29070b5 100644
--- a/src/components/Map.js
+++ b/src/components/Map.js
@@ -1,6 +1,8 @@
 import React, { useEffect } from 'react'
+import PropTypes from 'prop-types'
 import { Paper } from '@material-ui/core'
 import * as d3 from 'd3'
+import { connect } from 'react-redux'
 
 const radius = 23
 const fill = '#1976d2'
@@ -75,7 +77,7 @@ const addEventsToNodes = svg => {
   })
 }
 
-const Map = () => {
+const Map = ({ planets }) => {
   const drawChart = () => {
     const height = d3.select('#map-root').property('clientHeight')
     const width = d3.select('#map-root').property('clientWidth')
@@ -83,9 +85,9 @@ const Map = () => {
     const svg = createSvg('#map-root', height, width)
 
     const nodes_data = [
-      { name: 'Planet 1' },
-      { name: 'Planet 2' },
-      { name: 'Planet 3' }
+      { name: planets[0].name },
+      { name: planets[1].name },
+      { name: planets[2].name }
     ]
 
     const simulation = createSimulation(nodes_data)
@@ -118,8 +120,8 @@ const Map = () => {
 
     //Create links data
     const links_data = [
-      { source: 'Planet 1', target: 'Planet 2', distance: 5 },
-      { source: 'Planet 2', target: 'Planet 3', distance: 10 }
+      { source: planets[0].name, target: planets[1].name, distance: 5 },
+      { source: planets[1].name, target: planets[2].name, distance: 10 }
     ]
 
     //Create the link force
@@ -151,9 +153,16 @@ const Map = () => {
 
   useEffect(() => {
     drawChart()
+    // eslint-disable-next-line
   }, [])
 
   return <Paper id="map-root" style={{ height: 'calc(100vh - 50px)' }} />
 }
 
-export default Map
+Map.propTypes = {
+  planets: PropTypes.array.isRequired
+}
+
+const mapStateToProps = ({ world }) => ({ planets: world.planets })
+
+export default connect(mapStateToProps)(Map)