Add various features to test

Author: Enoah Netzach

packages/react-scripts/templates/kitchensink/src/1x1-img.jpg

@@ -1,24 +1,43 @@
 // @flow
 import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
-import EnvVariableMessages from './EnvVariableMessages';
 // testing absolute imports using NODE_PATH=src
 import CommentsList from 'CommentsList';
 import UsersList from 'UsersList';
+import logo from './logo.svg';
+import './App.css';
+import EnvVariableMessages from './EnvVariableMessages';
+import { abstract } from './abstract.json';
+import verySmallImage from './1x1-img.jpg';
+import aFileWithoutExt from './aFileWithoutExt';
+import aFileWithUnknownExt from './aFileWithExt.unknown'
+import aDeepJsModule from './subfolder/lol'
 
 class App extends Component {
   render() {
     const templateName : string = "Kitchen Sink"
     return (
       <div className="App">
         <div className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
+          <img id="svg-import" src={logo} className="App-logo" alt="logo" />
           <h2>Welcome to the {templateName} Template</h2>
         </div>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+
+        <details>
+          <summary>
+            {abstract}
+          </summary>
+
+          <p className="App-intro">
+            To get started, edit <code>src/App.js</code> and save to reload.
+          </p>
+        </details>
+
+        <img id="img-import" src={verySmallImage} alt="a very small cat" />
+
+        <span id="no-ext-import">{aFileWithoutExt}</span>
+        <span id="unknown-ext-import">{aFileWithUnknownExt}</span>
+        <span id="subfolder-js-import">{aDeepJsModule()} {aDeepJsModule.toString()}</span>
+
         <EnvVariableMessages />
         <UsersList />
         <CommentsList user="User 1" />

packages/react-scripts/templates/kitchensink/src/App.js

@@ -2,6 +2,10 @@
 import React, { Component, PropTypes } from 'react';
 import loadComments from './loadComments';
 
+const previousComments = {
+  'idOld': { id: 'old', body: 'comment old' },
+};
+
 class CommentsList extends Component {
   static propTypes = {
     user: PropTypes.string,
@@ -13,7 +17,11 @@ class CommentsList extends Component {
   } = { loading: true, comments: [] };
 
   componentDidMount() {
-    loadComments().then(comments => this.setState({ loading: false, comments }))
+    loadComments({ max: 4, ...previousComments })
+      .then(comments => {
+        const commentArray = Object.keys(comments).map(key => comments[key]);
+        this.setState({ loading: false, comments: commentArray });
+      })
   }
 
   render() {
@@ -25,7 +33,7 @@ class CommentsList extends Component {
         {
           loading
             ? <div>Comments are loading</div>
-            : <ul>{comments.map((comment, i) => <li key={i}>{comment}</li>)}</ul>
+            : <ul>{comments.map((comment) => <li key={comment.id}>{`message: ${comment.body}`}</li>)}</ul>
         }
       </div>
     )

packages/react-scripts/templates/kitchensink/src/CommentsList.js

@@ -2,6 +2,11 @@
 import React, { Component } from 'react';
 import userGenerator from './userGenerator';
 
+const styled = ([style]) => style.trim()
+  .split(/\s*;\s*/)
+  .map(rule => rule.split(/\s*:\s*/))
+  .reduce((rules, rule) => ({ ...rules, [rule[0]]: rule[1] }), {})
+
 class UsersList extends Component {
   static defaultProps: { limit: number } = { limit: 5 };
 
@@ -17,11 +22,16 @@ class UsersList extends Component {
   }
 
   render() {
+    const veryInlineStyle = styled`
+      background: palevioletred;
+      color: papayawhip;
+    `;
+
     return (
       <div>
         <h3>Users</h3>
         <ul>
-          {this.state.users.map((user, i) => <li key={i}>{user}</li>)}
+          {this.state.users.map((user, i) => <li key={i} style={veryInlineStyle}>{user}</li>)}
         </ul>
       </div>
     )

packages/react-scripts/templates/kitchensink/src/UsersList.js

@@ -0,0 +1 @@
+whoooo, spooky!

packages/react-scripts/templates/kitchensink/src/aFileWithExt.unknown

@@ -0,0 +1 @@
+this is just a file without an extension

packages/react-scripts/templates/kitchensink/src/aFileWithoutExt

@@ -0,0 +1,3 @@
+{
+  "abstract": "This is an abstract"
+}

packages/react-scripts/templates/kitchensink/src/abstract.json

@@ -1,9 +1,23 @@
 // @flow
 function fakeApiCall() : Promise<string[]> {
-  return Promise.resolve({ comments: ['Comment 1', 'Comment 2', 'Comment 3'] })
+  return Promise.resolve({
+    comments: {
+      'id1': { id: 1, body: 'comment 1' },
+      'id2': { id: 2, body: 'comment 2' },
+      'id3': { id: 3, body: 'comment 3' },
+      'id4': { id: 3, body: 'comment 4' },
+    }
+  });
 }
 
-export default async function loadComments() : Promise<string[]> {
-  const { comments } = await fakeApiCall();
-  return comments;
+export default async function loadComments({ max, ...comments } = {}) : Promise<string[]> {
+  const { comments: fetchedComments } = await fakeApiCall();
+  const totalComments = {
+    ...comments,
+    ...fetchedComments,
+  };
+
+  return Object.keys(totalComments)
+    .slice(0, max)
+    .reduce((slicedComments, key) => ({ ...slicedComments, [key]: totalComments[key] }), {});
 }

packages/react-scripts/templates/kitchensink/src/loadComments.js

@@ -0,0 +1 @@
+module.exports = function() { return `haha` }