setup: useEffect to load messages

ShMcK · ShMcK · commit 8b9c28cf4df8 · 2019-12-24T09:58:38.000-08:00
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.12.0",
     "@fortawesome/react-fontawesome": "^0.1.8",
     "bootstrap": "^4.4.1",
+    "faker": "^4.1.0",
     "react": "^16.12.0",
     "react-bootstrap": "^1.0.0-beta.16",
     "react-dom": "^16.12.0",
diff --git a/src/components/Feed/index.js b/src/components/Feed/index.js
@@ -0,0 +1,44 @@
+import React from "react";
+import { Icon } from "../Icon";
+import { Message } from "../Message";
+import "./styles.css";
+
+import fetchData from "../../services/api";
+
+export const Feed = () => {
+  const loading = true;
+  const error = null;
+  const data = null;
+
+  // TODO: useEffect to load state from fetchData
+  fetchData("messages")
+    .then(messages => {
+      data = messages;
+      loading = false;
+    })
+    .catch(error => {
+      error = error;
+    });
+
+  if (loading) {
+    return (
+      <div className="Feed">
+        <div className="Feed_Loading" title="loading">
+          <Icon icon="loading" spin size="lg" data-testid="loading" />
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return <div title="error">{error.message}</div>;
+  }
+
+  return (
+    <div className="Feed" title="feed">
+      {data.map(post => (
+        <Message key={post.id_str} {...post} />
+      ))}
+    </div>
+  );
+};
diff --git a/src/components/Feed/styles.css b/src/components/Feed/styles.css
@@ -0,0 +1,9 @@
+.Feed {
+  background-color: "red";
+}
+
+.Feed_Loading {
+  display: flex;
+  justify-content: center;
+  padding-top: 30px;
+}
diff --git a/src/components/Message/index.js b/src/components/Message/index.js
diff --git a/src/services/api.js b/src/services/api.js
@@ -0,0 +1,38 @@
+import * as faker from 'faker'
+
+const api = async url => {
+	// sign up for a developer twitter account to get real tweets
+	// examples at https://api.twitter.com/1.1/search/tweets.json
+
+	// fake api delay
+	await new Promise((resolve, reject) => {
+		setTimeout(resolve, 1500)
+	})
+
+	// fake api
+	switch (url) {
+		case 'messages':
+			// generate fake data
+			const fakeMessages = [1, 2, 3, 4, 5, 6].map(() => ({
+				id_str: faker.random.uuid(),
+				created_at: faker.date.recent().toISOString(),
+				text: faker.lorem.paragraph(),
+				retweet_count: faker.random.number(50),
+				retweeted: false,
+				favorite_count: faker.random.number(50),
+				favorited: false,
+				user: {
+					id_str: faker.random.uuid(),
+					name: faker.internet.userName(),
+					screen_name: faker.internet.userName(),
+					profile_image_url_https: faker.image.avatar(),
+				},
+			}))
+
+			return fakeMessages
+		default:
+			throw new Error('Unknown API endpoint')
+	}
+}
+
+export default api
diff --git a/src/stories/2-Message.stories.js b/src/stories/2-Message.stories.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { Message as UseStateMessage } from "../components/Message/useState";
-import { Message as UseReducerMessage } from "../components/Message/useReducer";
+import { Message as UseReducerMessage } from "../components/Message";
 import { USER } from "../config";
 
 export default {
diff --git a/src/stories/3-Feed.stories.js b/src/stories/3-Feed.stories.js
@@ -0,0 +1,10 @@
+import React from "react";
+import { Feed } from "../components/Feed";
+
+export default {
+  title: "Feed"
+};
+
+export const feed = () => {
+  return <Feed />;
+};
diff --git a/src/tests/components/Feed.test.js b/src/tests/components/Feed.test.js
@@ -0,0 +1,47 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { waitForElementToBeRemoved } from "@testing-library/dom";
+import { Feed } from "../../components/Feed";
+
+const mockData = [
+  {
+    id_str: "1",
+    created_at: new Date().toISOString(),
+    text: "Some text",
+    retweet_count: 10,
+    retweeted: false,
+    favorite_count: 15,
+    favorited: false,
+    user: {
+      id_str: "u1",
+      name: "Some User",
+      screen_name: "someUser",
+      profile_image_url_https: ""
+    }
+  }
+];
+
+jest.mock("../../services/api.js", () => jest.fn(async () => mockData));
+
+// UI
+
+describe("Feed", () => {
+  // generated useEffect async warnings
+  test("should initially display loading", () => {
+    const utils = render(<Feed />);
+    const loading = utils.getByTitle("loading");
+    expect(loading).toBeDefined();
+    const feed = utils.queryByTitle("feed"); // query doesn't throw
+    expect(feed).toBe(null);
+  });
+
+  test("should display feed when loaded", async () => {
+    const utils = render(<Feed />);
+
+    await waitForElementToBeRemoved(() => {
+      return utils.getByTestId("loading");
+    });
+    const feed = utils.getByTitle("feed");
+    expect(feed).toBeDefined();
+  });
+});
diff --git a/src/tests/components/Message.test.js b/src/tests/components/Message.test.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { render, fireEvent } from "@testing-library/react";
-import { Message, messageReducer } from "../../components/Message/useReducer";
+import { Message, messageReducer } from "../../components/Message";
 import { USER } from "../../config";
 
 const mockProps = {
@@ -13,7 +13,7 @@ const mockProps = {
   favorite_count: 22
 };
 
-describe("Message", () => {
+describe.skip("Message", () => {
   test("should display the initial favorite count", () => {
     const utils = render(<Message {...mockProps} />);
     const count = utils.getByTitle("favorite_count");
@@ -68,7 +68,7 @@ const initialState = {
   favorite_count: 22
 };
 
-describe("messageReducer", () => {
+describe.skip("messageReducer", () => {
   test("should display the initial values", () => {
     const returnsState = messageReducer(initialState, { type: "UNKNOWN" });
     expect(returnsState).toEqual(initialState);
