got prettier working, so lets pretty

reach · Feb 12, 2019 · 278af51 · 278af51
1 parent 68e3b7c
commit 278af51
Show file tree

Hide file tree

Showing 34 changed files with 5,878 additions and 3,790 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/.prettierrc b/.prettierrc
@@ -1,3 +1,4 @@
 tabWidth: 2
 semi: false
-singleQuote: true
+singleQuote: true
+printWidth: 100
diff --git a/1-rendering/src/exercise.js b/1-rendering/src/exercise.js
@@ -13,26 +13,26 @@
 // - Hint: you'll need an `updateThePage` function that calls `render`,
 //   and then you'll need to call it in the event handlers of the form controls
 ////////////////////////////////////////////////////////////////////////////////
-import "./index.css";
-import React from "react";
-import ReactDOM from "react-dom";
-import sortBy from "sort-by";
+import './index.css'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import sortBy from 'sort-by'
 
 const DATA = {
-  title: "Menu",
+  title: 'Menu',
   items: [
-    { id: 1, name: "tacos", type: "mexican" },
-    { id: 2, name: "burrito", type: "mexican" },
-    { id: 3, name: "tostada", type: "mexican" },
-    { id: 4, name: "mushy peas", type: "english" },
-    { id: 5, name: "fish and chips", type: "english" },
-    { id: 6, name: "black pudding", type: "english" }
+    { id: 1, name: 'tacos', type: 'mexican' },
+    { id: 2, name: 'burrito', type: 'mexican' },
+    { id: 3, name: 'tostada', type: 'mexican' },
+    { id: 4, name: 'mushy peas', type: 'english' },
+    { id: 5, name: 'fish and chips', type: 'english' },
+    { id: 6, name: 'black pudding', type: 'english' }
   ]
-};
+}
 
 const element = (
   // put your code here!
   <div>Make it happen</div>
-);
+)
 
-ReactDOM.render(element, document.getElementById("root"));
+ReactDOM.render(element, document.getElementById('root'))
diff --git a/1-rendering/src/lecture.js b/1-rendering/src/lecture.js
@@ -1,13 +1,13 @@
-import React from "react";
-import ReactDOM from "react-dom";
+import React from 'react'
+import ReactDOM from 'react-dom'
 
 let tacos = [
-  { name: "Carnitas", stars: 5 },
-  { name: "Pollo", stars: 3 },
-  { name: "Carne Asada", stars: 4 },
-  { name: "Al Carbon", stars: 3 },
-  { name: "Mole", stars: 5 }
-];
+  { name: 'Carnitas', stars: 5 },
+  { name: 'Pollo', stars: 3 },
+  { name: 'Carne Asada', stars: 4 },
+  { name: 'Al Carbon', stars: 3 },
+  { name: 'Mole', stars: 5 }
+]
 
 ReactDOM.render(
   <div>
@@ -16,24 +16,15 @@ ReactDOM.render(
       {tacos
         .sort((a, b) => b.stars - a.stars)
         .map(taco => (
-          <li style={{ margin: "10px" }}>
-            <button
-              onClick={() =>
-                alert(taco.name + " is my favorite!")
-              }
-            >
+          <li style={{ margin: '10px' }}>
+            <button onClick={() => alert(taco.name + ' is my favorite!')}>
               +1
-            </button>{" "}
-            {Array.from({ length: taco.stars }).map(
-              () => "★"
-            )}
-            {Array.from({ length: 5 - taco.stars }).map(
-              () => "☆"
-            )}{" "}
-            {taco.name}
+            </button>{' '}
+            {Array.from({ length: taco.stars }).map(() => '★')}
+            {Array.from({ length: 5 - taco.stars }).map(() => '☆')} {taco.name}
           </li>
         ))}
     </ul>
   </div>,
-  document.getElementById("root")
-);
+  document.getElementById('root')
+)
diff --git a/1-rendering/src/solution.js b/1-rendering/src/solution.js
@@ -13,34 +13,36 @@
 // - Hint: you'll need an `updateThePage` function that calls `render`,
 //   and then you'll need to call it in the event handlers of the form controls
 ////////////////////////////////////////////////////////////////////////////////
-import "./index.css";
-import React from "react";
-import ReactDOM from "react-dom";
-import sortBy from "sort-by";
+import './index.css'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import sortBy from 'sort-by'
 
 const DATA = {
-  title: "Menu",
+  title: 'Menu',
   items: [
-    { id: 1, name: "tacos", type: "mexican" },
-    { id: 2, name: "burrito", type: "mexican" },
-    { id: 3, name: "tostada", type: "mexican" },
-    { id: 4, name: "mushy peas", type: "english" },
-    { id: 5, name: "fish and chips", type: "english" },
-    { id: 6, name: "black pudding", type: "english" }
+    { id: 1, name: 'tacos', type: 'mexican' },
+    { id: 2, name: 'burrito', type: 'mexican' },
+    { id: 3, name: 'tostada', type: 'mexican' },
+    { id: 4, name: 'mushy peas', type: 'english' },
+    { id: 5, name: 'fish and chips', type: 'english' },
+    { id: 6, name: 'black pudding', type: 'english' }
   ]
-};
+}
 
 const element = (
   // put your code here!
   <div>
     <h1>{DATA.title}</h1>
     <ul>
       {DATA.items
-        .filter(item => item.type === "mexican")
-        .sort(sortBy("name"))
-        .map(item => <li key={item.id}>{item.name}</li>)}
+        .filter(item => item.type === 'mexican')
+        .sort(sortBy('name'))
+        .map(item => (
+          <li key={item.id}>{item.name}</li>
+        ))}
     </ul>
   </div>
-);
+)
 
-ReactDOM.render(element, document.getElementById("root"));
+ReactDOM.render(element, document.getElementById('root'))
diff --git a/2-composition/src/exercise.js b/2-composition/src/exercise.js
@@ -7,45 +7,30 @@
 //    mexican food and one for english food
 // 4. Pass in a custom "name" to each Menu
 ////////////////////////////////////////////////////////
-import "./index.css";
-import React from "react";
-import ReactDOM from "react-dom";
-import sortBy from "sort-by";
+import './index.css'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import sortBy from 'sort-by'
 
-let items = [
-  { id: 1, name: "tacos", type: "mexican", price: 6 },
-  { id: 2, name: "burrito", type: "mexican", price: 9 },
-  { id: 3, name: "tostada", type: "mexican", price: 8 },
-  {
-    id: 4,
-    name: "mushy peas",
-    type: "english",
-    price: 3
-  },
-  {
-    id: 5,
-    name: "fish and chips",
-    type: "english",
-    price: 12
-  },
-  {
-    id: 6,
-    name: "black pudding",
-    type: "english",
-    price: 12
-  }
-];
+const items = [
+  { id: 1, name: 'tacos', type: 'mexican', price: 6 },
+  { id: 2, name: 'burrito', type: 'mexican', price: 9 },
+  { id: 3, name: 'tostada', type: 'mexican', price: 8 },
+  { id: 4, name: 'mushy peas', type: 'english', price: 3 },
+  { id: 5, name: 'fish and chips', type: 'english', price: 12 },
+  { id: 6, name: 'black pudding', type: 'english', price: 12 }
+]
 
 ReactDOM.render(
   <div>
     <h1>Menu</h1>
     <ul>
-      {items.sort(sortBy("name")).map(item => (
+      {items.sort(sortBy('name')).map(item => (
         <li key={item.id}>
           {item.name} - <small>${item.price}</small>
         </li>
       ))}
     </ul>
   </div>,
-  document.getElementById("root")
-);
+  document.getElementById('root')
+)
diff --git a/2-composition/src/lecture.js b/2-composition/src/lecture.js
@@ -1,13 +1,13 @@
-import React from "react";
-import ReactDOM from "react-dom";
+import React from 'react'
+import ReactDOM from 'react-dom'
 
-let tacos = [
-  { name: "Carnitas", stars: 5 },
-  { name: "Pollo", stars: 3 },
-  { name: "Carne Asada", stars: 4 },
-  { name: "Al Carbon", stars: 3 },
-  { name: "Mole", stars: 5 }
-];
+const tacos = [
+  { name: 'Carnitas', stars: 5 },
+  { name: 'Pollo', stars: 3 },
+  { name: 'Carne Asada', stars: 4 },
+  { name: 'Al Carbon', stars: 3 },
+  { name: 'Mole', stars: 5 }
+]
 
 ReactDOM.render(
   <div>
@@ -16,70 +16,57 @@ ReactDOM.render(
       {tacos
         .sort((a, b) => b.stars - a.stars)
         .map((taco, i) => (
-          <li key={i} style={{ margin: "10px" }}>
-            <button
-              onClick={() =>
-                alert(taco.name + " is my favorite!")
-              }
-            >
+          <li key={i} style={{ margin: '10px' }}>
+            <button onClick={() => alert(taco.name + ' is my favorite!')}>
               +1
-            </button>{" "}
-            {Array.from({ length: taco.stars }).map(
-              () => "★"
-            )}
-            {Array.from({ length: 5 - taco.stars }).map(
-              () => "☆"
-            )}{" "}
-            {taco.name}
+            </button>{' '}
+            {Array.from({ length: taco.stars }).map(() => '★')}
+            {Array.from({ length: 5 - taco.stars }).map(() => '☆')} {taco.name}
           </li>
         ))}
     </ul>
   </div>,
-  document.getElementById("root")
-);
+  document.getElementById('root')
+)
 
-// import React from "react";
-// import ReactDOM from "react-dom";
+// import React from 'react'
+// import ReactDOM from 'react-dom'
 
 // let tacos = [
-//   { name: "Carnitas", stars: 5 },
-//   { name: "Pollo", stars: 3 },
-//   { name: "Carne Asada", stars: 4 },
-//   { name: "Al Carbon", stars: 3 },
-//   { name: "Mole", stars: 5 }
-// ];
+//   { name: 'Carnitas', stars: 5 },
+//   { name: 'Pollo', stars: 3 },
+//   { name: 'Carne Asada', stars: 4 },
+//   { name: 'Al Carbon', stars: 3 },
+//   { name: 'Mole', stars: 5 }
+// ]
 
 // let Stars = ({ stars, total = 5 }) => (
 //   <span>
-//     {Array.from({ length: stars }).map(() => "★")}
+//     {Array.from({ length: stars }).map(() => '★')}
 //     {Array.from({
 //       length: total - stars
-//     }).map(() => "☆")}
+//     }).map(() => '☆')}
 //   </span>
-// );
+// )
 
 // let Taco = ({ taco }) => (
-//   <li style={{ margin: "10px" }}>
-//     <button
-//       onClick={() =>
-//         alert(taco.name + " is my favorite!")
-//       }
-//     >
-//       +1
-//     </button>{" "}
+//   <li style={{ margin: '10px' }}>
+//     <button onClick={() => alert(taco.name + ' is my favorite!')}>+1</button>{' '}
 //     <Stars stars={taco.stars} /> {taco.name}
 //   </li>
-// );
+// )
 
 // let App = () => (
 //   <div>
 //     <h1>Welcome to React!</h1>
 //     <ul>
 //       {tacos
 //         .sort((a, b) => b.stars - a.stars)
-//         .map(taco => <Taco taco={taco} />)}
+//         .map(taco => (
+//           <Taco taco={taco} />
+//         ))}
 //     </ul>
 //   </div>
-// );
+// )
 
-// ReactDOM.render(<App />, document.getElementById("root"));
+// ReactDOM.render(<App />, document.getElementById('root'))