put rendering solution back

djrosenbaum · Mar 15, 2016 · 209dc89 · 209dc89
1 parent 2d145a0
commit 209dc89
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 51 deletions.
diff --git a/subjects/02-rendering/exercise.js b/subjects/02-rendering/exercise.js
@@ -16,14 +16,6 @@ import React from 'react'
 import { render } from 'react-dom'
 import sortBy from 'sort-by'
 
-function Menu() {
-  return (
-    <div>
-      Open the console, you have failing tests
-    </div>
-  )
-}
-
 const DATA = {
   title: 'Menu',
   items: [
@@ -36,6 +28,16 @@ const DATA = {
   ]
 }
 
+function Menu() {
+
+  return (
+    <div>
+      Open the console, you have failing tests.
+    </div>
+  )
+}
+
 render(<Menu/>, document.getElementById('app'), function () {
   require('./tests').run()
 })
+
diff --git a/subjects/02-rendering/solution.js b/subjects/02-rendering/solution.js
@@ -16,45 +16,6 @@ import React from 'react'
 import { render } from 'react-dom'
 import sortBy from 'sort-by'
 
-let foodType = 'mexican'
-let sortOrder = 'descending'
-
-function handleChange(event) {
-  foodType = event.target.value
-  updateThePage()
-}
-
-function changeSort(order) {
-  sortOrder = order
-  updateThePage()
-}
-
-function Menu({ data }) {
-  const items = data.items
-    .filter(item => item.type === foodType)
-    .sort(sortBy(sortOrder === 'ascending' ? 'name' : '-name'))
-    .map(item => (
-      <li key={item.id}>{item.name}</li>
-    ))
-
-  return (
-    <div>
-      <h1>{data.title}</h1>
-      {sortOrder === 'ascending' ?
-        <button onClick={() => changeSort('descending')}>sort descending</button> :
-        <button onClick={() => changeSort('ascending')}>sort ascending</button>
-      }
-      <select onChange={handleChange}>
-        <option>mexican</option>
-        <option>english</option>
-      </select>
-      <ul>
-        {items}
-      </ul>
-    </div>
-  )
-}
-
 const DATA = {
   title: 'Menu',
   items: [
@@ -67,10 +28,23 @@ const DATA = {
   ]
 }
 
-function updateThePage() {
-  render(<Menu data={DATA}/>, document.getElementById('app'), function () {
-    require('./tests').run()
+function Menu() {
+  const items = DATA.items.filter(function (item) {
+    return item.type === 'mexican'
+  }).sort(sortBy('name')).map(function (item) {
+    return <li key={item.id}>{item.name}</li>
   })
+
+  return (
+    <div>
+      <h1>{DATA.title}</h1>
+      <ul>
+        {items}
+      </ul>
+    </div>
+  )
 }
 
-updateThePage()
+render(<Menu/>, document.getElementById('app'), function () {
+  require('./tests').run()
+})