Merge pull request #14 from gregoranders/development

#11 - Add another recoil example, adjust test

docs/Intro.stories.mdx

@@ -2,7 +2,7 @@ import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Docs|Intro" />
 
-# ts-react-playground - [TypeScript](http://www.typescriptlang.org/) [React](https://reactjs.org/) Playground v0.0.2
+# ts-react-playground - [TypeScript](http://www.typescriptlang.org/) [React](https://reactjs.org/) Playground 0.0.4
 
 [![Dependency Status][daviddm-image]][daviddm-url]
 [![License][license-image]][license-url]

e2e/journey.spec.ts

@@ -68,7 +68,7 @@ describe('index', () => {
       await page.click('button');
       await page.waitFor(1000);
       const html = await page.evaluate((h2) => h2.innerHTML, button);
-      expect(html).toBe('Generate Users [100]');
+      expect(html).toBe('Generate Users [15]');
     },
     timeout,
   );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ts-react-playground",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "TypeScript React Playground",
   "scripts": {
     "start": "webpack-dev-server --open --progress --config webpack.config.js",

src/script/components/organisms/users/__snapshots__/index.spec.tsx.snap

@@ -1,12 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`UsersModelView snapshot 1`] = `
-<button
-  disabled={false}
-  onClick={[Function]}
->
-  Generate Users [
-  0
-  ]
-</button>
+Array [
+  <button
+    disabled={false}
+    onClick={[Function]}
+  >
+    Generate Users [
+    0
+    ]
+  </button>,
+  <table>
+    <tr>
+      <td />
+      <td />
+      <td />
+    </tr>
+  </table>,
+]
 `;

src/script/components/organisms/users/index.spec.tsx

@@ -44,6 +44,6 @@ describe(`${TestSubject.UsersModelView.displayName}`, () => {
       </RecoilRoot>,
     );
     testSubject.find('button').simulate('click');
-    expect(testSubject.text()).toContain('Generate Users [100]');
+    expect(testSubject.text()).toContain('Generate Users [15]');
   });
 });

src/script/components/organisms/users/index.tsx

@@ -1,23 +1,37 @@
 import React, { FunctionComponent, memo } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
-import { generate, UsersAtom, UsersLength } from '@models/user';
+import { generate, UsersAtom, UsersLength, UsersTop10, UsersBottom10 } from '@models/user';
 
 import Button from '@atoms/button';
 import UsersView from '@molecules/users';
 
 export const UsersModelView: FunctionComponent = () => {
   const [users, setUsers] = useRecoilState(UsersAtom);
   const usersLength = useRecoilValue(UsersLength);
+  const usersTop10 = useRecoilValue(UsersTop10);
+  const usersBottom10 = useRecoilValue(UsersBottom10);
 
   const generateUsers = () => {
-    setUsers(generate());
+    setUsers(generate(15));
   };
 
   return (
     <>
       <Button onClick={generateUsers}>Generate Users [{usersLength}]</Button>
-      <UsersView users={users} />
+      <table>
+        <tr>
+          <td>
+            <UsersView users={usersTop10} />
+          </td>
+          <td>
+            <UsersView users={users} />
+          </td>
+          <td>
+            <UsersView users={usersBottom10} />
+          </td>
+        </tr>
+      </table>
     </>
   );
 };

src/script/components/pages/home/__snapshots__/index.spec.tsx.snap

@@ -1,12 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HomePage snapshot 1`] = `
-<button
-  disabled={false}
-  onClick={[Function]}
->
-  Generate Users [
-  0
-  ]
-</button>
+Array [
+  <button
+    disabled={false}
+    onClick={[Function]}
+  >
+    Generate Users [
+    0
+    ]
+  </button>,
+  <table>
+    <tr>
+      <td />
+      <td />
+      <td />
+    </tr>
+  </table>,
+]
 `;

src/script/models/user.spec.tsx

@@ -29,6 +29,14 @@ describe(`models/user`, () => {
     expect(TestSubject.UsersLength).toBeDefined();
   });
 
+  it('exports Selector', () => {
+    expect(TestSubject.UsersTop10).toBeDefined();
+  });
+
+  it('exports Selector', () => {
+    expect(TestSubject.UsersBottom10).toBeDefined();
+  });
+
   it('generate default number of users', async () => {
     const result = TestSubject.generate();
     expect(result.length).toBe(100);

src/script/models/user.tsx

@@ -102,4 +102,24 @@ export const UsersLength = selector({
   },
 });
 
+const TOP10_KEY = 'usersTopTen';
+
+export const UsersTop10 = selector({
+  key: TOP10_KEY,
+  get: ({ get }) => {
+    const users = get(UsersAtom);
+    return users.slice(0, 10);
+  },
+});
+
+const BOTTOM10_KEY = 'usersBottomTen';
+
+export const UsersBottom10 = selector({
+  key: BOTTOM10_KEY,
+  get: ({ get }) => {
+    const users = get(UsersAtom);
+    return users.slice(users.length - 10);
+  },
+});
+
 export default UsersAtom;

src/style/styles.scss

@@ -16,3 +16,17 @@ header {
     }
   }
 }
+
+table {
+  width: 100%;
+
+  > tr {
+    vertical-align: top;
+
+    > td {
+      &:nth-child(3) {
+        vertical-align: bottom;
+      }
+    }
+  }
+}