Format examples with Prettier

acdlite · Nov 23, 2017 · a03aa6c · a03aa6c
1 parent 77aab0b
commit a03aa6c
Show file tree

Hide file tree

Showing 12 changed files with 185 additions and 110 deletions.
diff --git a/examples/components-and-props/composing-components.js b/examples/components-and-props/composing-components.js
@@ -14,5 +14,5 @@ function App() {
 
 ReactDOM.render(
   <App />,
-  document.getElementById('root')
-);
+  document.getElementById('root'),
+);
diff --git a/examples/components-and-props/extracting-components-continued.js b/examples/components-and-props/extracting-components-continued.js
@@ -4,9 +4,11 @@ function formatDate(date) {
 
 function Avatar(props) {
   return (
-    <img className="Avatar"
-         src={props.user.avatarUrl}
-         alt={props.user.name} />
+    <img
+      className="Avatar"
+      src={props.user.avatarUrl}
+      alt={props.user.name}
+    />
   );
 }
 
@@ -40,13 +42,15 @@ const comment = {
   text: 'I hope you enjoy learning React!',
   author: {
     name: 'Hello Kitty',
-    avatarUrl: 'http://placekitten.com/g/64/64'
-  }
+    avatarUrl:
+      'http://placekitten.com/g/64/64',
+  },
 };
 ReactDOM.render(
   <Comment
     date={comment.date}
     text={comment.text}
-    author={comment.author} />,
-  document.getElementById('root')
-);
+    author={comment.author}
+  />,
+  document.getElementById('root'),
+);
diff --git a/examples/components-and-props/extracting-components.js b/examples/components-and-props/extracting-components.js
@@ -6,9 +6,11 @@ function Comment(props) {
   return (
     <div className="Comment">
       <div className="UserInfo">
-        <img className="Avatar"
-             src={props.author.avatarUrl}
-             alt={props.author.name} />
+        <img
+          className="Avatar"
+          src={props.author.avatarUrl}
+          alt={props.author.name}
+        />
         <div className="UserInfo-name">
           {props.author.name}
         </div>
@@ -28,13 +30,15 @@ const comment = {
   text: 'I hope you enjoy learning React!',
   author: {
     name: 'Hello Kitty',
-    avatarUrl: 'http://placekitten.com/g/64/64'
-  }
+    avatarUrl:
+      'http://placekitten.com/g/64/64',
+  },
 };
 ReactDOM.render(
   <Comment
     date={comment.date}
     text={comment.text}
-    author={comment.author} />,
-  document.getElementById('root')
-);
+    author={comment.author}
+  />,
+  document.getElementById('root'),
+);
diff --git a/examples/components-and-props/rendering-a-component.js b/examples/components-and-props/rendering-a-component.js
@@ -5,5 +5,5 @@ function Welcome(props) {
 const element = <Welcome name="Sara" />;
 ReactDOM.render(
   element,
-  document.getElementById('root')
-);
+  document.getElementById('root'),
+);
diff --git a/examples/es5-syntax-example.js b/examples/es5-syntax-example.js
@@ -1,3 +1,5 @@
 const element = <h1>Hello, world!</h1>;
-const container = document.getElementById('root');
-ReactDOM.render(element, container);
+const container = document.getElementById(
+  'root',
+);
+ReactDOM.render(element, container);
diff --git a/examples/hello-world.js b/examples/hello-world.js
@@ -1,4 +1,4 @@
 ReactDOM.render(
   <h1>Hello, world!</h1>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );
diff --git a/examples/introducing-jsx.js b/examples/introducing-jsx.js
@@ -1,5 +1,7 @@
 function formatName(user) {
-  return user.firstName + ' ' + user.lastName;
+  return (
+    user.firstName + ' ' + user.lastName
+  );
 }
 
 const user = {
@@ -8,12 +10,10 @@ const user = {
 };
 
 const element = (
-  <h1>
-    Hello, {formatName(user)}!
-  </h1>
+  <h1>Hello, {formatName(user)}!</h1>
 );
 
 ReactDOM.render(
   element,
-  document.getElementById('root')
+  document.getElementById('root'),
 );
diff --git a/examples/jsx-simple-example.js b/examples/jsx-simple-example.js
@@ -1,3 +1,3 @@
 function hello() {
   return <div>Hello world!</div>;
-}
+}
diff --git a/examples/reconciliation/index-used-as-key.js b/examples/reconciliation/index-used-as-key.js
@@ -1,8 +1,16 @@
-const ToDo = (props) => (
+const ToDo = props => (
   <tr>
-    <td><label>{props.id}</label></td>
-    <td><input/></td>
-    <td><label>{props.createdAt.toTimeString()}</label></td>
+    <td>
+      <label>{props.id}</label>
+    </td>
+    <td>
+      <input />
+    </td>
+    <td>
+      <label>
+        {props.createdAt.toTimeString()}
+      </label>
+    </td>
   </tr>
 );
 
@@ -14,90 +22,111 @@ class ToDoList extends React.Component {
     this.state = {
       todoCounter: todoCounter,
       list: [
-        { id: todoCounter, createdAt: date },
-      ]
-    }
+        {
+          id: todoCounter,
+          createdAt: date,
+        },
+      ],
+    };
   }
 
   sortByEarliest() {
-    const sortedList = this.state.list.sort((a, b) => {
-      return a.createdAt - b.createdAt;
-    });
+    const sortedList = this.state.list.sort(
+      (a, b) => {
+        return a.createdAt - b.createdAt;
+      },
+    );
     this.setState({
-      list: [...sortedList]
-    })
+      list: [...sortedList],
+    });
   }
 
   sortByLatest() {
-    const sortedList = this.state.list.sort((a, b) => {
-      return b.createdAt - a.createdAt;
-    });
+    const sortedList = this.state.list.sort(
+      (a, b) => {
+        return b.createdAt - a.createdAt;
+      },
+    );
     this.setState({
-      list: [...sortedList]
-    })
+      list: [...sortedList],
+    });
   }
 
   addToEnd() {
     const date = new Date();
-    const nextId = this.state.todoCounter + 1;
+    const nextId =
+      this.state.todoCounter + 1;
     const newList = [
       ...this.state.list,
-      { id: nextId, createdAt: date }
+      {id: nextId, createdAt: date},
     ];
     this.setState({
       list: newList,
-      todoCounter: nextId
+      todoCounter: nextId,
     });
   }
 
   addToStart() {
     const date = new Date();
-    const nextId = this.state.todoCounter + 1;
+    const nextId =
+      this.state.todoCounter + 1;
     const newList = [
-      { id: nextId, createdAt: date },
-      ...this.state.list
+      {id: nextId, createdAt: date},
+      ...this.state.list,
     ];
     this.setState({
       list: newList,
-      todoCounter: nextId
+      todoCounter: nextId,
     });
   }
 
   render() {
-    return(
+    return (
       <div>
-        <code>key=index</code><br/>
-        <button onClick={this.addToStart.bind(this)}>
+        <code>key=index</code>
+        <br />
+        <button
+          onClick={this.addToStart.bind(
+            this,
+          )}>
           Add New to Start
         </button>
-        <button onClick={this.addToEnd.bind(this)}>
+        <button
+          onClick={this.addToEnd.bind(
+            this,
+          )}>
           Add New to End
         </button>
-        <button onClick={this.sortByEarliest.bind(this)}>
+        <button
+          onClick={this.sortByEarliest.bind(
+            this,
+          )}>
           Sort by Earliest
         </button>
-        <button onClick={this.sortByLatest.bind(this)}>
+        <button
+          onClick={this.sortByLatest.bind(
+            this,
+          )}>
           Sort by Latest
         </button>
         <table>
           <tr>
-            <th>ID</th><th></th><th>created at</th>
+            <th>ID</th>
+            <th />
+            <th>created at</th>
           </tr>
-          {
-            this.state.list.map((todo, index) => (
-              <ToDo
-                key={index}
-                {...todo}
-              />
-            ))
-          }
+          {this.state.list.map(
+            (todo, index) => (
+              <ToDo key={index} {...todo} />
+            ),
+          )}
         </table>
       </div>
-    )
+    );
   }
 }
 
 ReactDOM.render(
   <ToDoList />,
-  document.getElementById('root')
+  document.getElementById('root'),
 );