setup: useReducer message

ShMcK · ShMcK · commit 9448dd98ce4e · 2019-12-24T09:58:38.000-08:00
diff --git a/src/components/Message/useReducer.js b/src/components/Message/useReducer.js
@@ -0,0 +1,87 @@
+import React from "react";
+
+import { Card } from "../Card";
+import { MessageHeader } from "./Header";
+import { Icon, IconButton, IconCountWrapper } from "../Icon";
+import "./styles.css";
+
+export const messageReducer = (state, action) => {
+  switch (action.type) {
+    case "RETWEET":
+    // TODO: retweet
+    case "FAVORITE":
+    // TODO: favorite
+    default:
+      return state;
+  }
+};
+
+export const Message = props => {
+  const {
+    user,
+    created_at,
+    retweet_count,
+    retweeted,
+    favorite_count,
+    favorited,
+    text
+  } = props;
+
+  const [state, dispatch] = React.useReducer(messageReducer, {
+    retweet_count,
+    retweeted,
+    favorite_count,
+    favorited
+  });
+
+  return (
+    <Card
+      className="Message"
+      title="message"
+      profile_image={user.profile_image_url_https}
+    >
+      <div>
+        <div className="Message_Header">
+          <MessageHeader
+            name={user.name}
+            screen_name={user.screen_name}
+            created_at={created_at}
+          />
+        </div>
+        <div className="Message_Body">{text}</div>
+        <div className="Message_Footer">
+          <Icon icon="comment" title="comment" />
+          <IconCountWrapper title="retweet_count" count={0}>
+            <IconButton
+              role="retweet"
+              onClick={() => {
+                /* toggle retweet */
+              }}
+            >
+              <Icon
+                icon="retweet"
+                active={false}
+                highlight="rgb(23, 191, 99)"
+              />
+            </IconButton>
+          </IconCountWrapper>
+          <IconCountWrapper title="favorite_count" count={0}>
+            <IconButton
+              role="favorite"
+              onClick={() => {
+                /* toggle favorite */
+              }}
+            >
+              <Icon
+                icon="favorite"
+                active={false}
+                highlight="rgb(224, 36, 94)"
+              />
+            </IconButton>
+          </IconCountWrapper>
+          <Icon icon="share" title="share" />
+        </div>
+      </div>
+    </Card>
+  );
+};
diff --git a/src/stories/2-Message.stories.js b/src/stories/2-Message.stories.js
@@ -1,5 +1,6 @@
 import React from "react";
-import { Message } from "../components/Message/useState";
+import { Message as UseStateMessage } from "../components/Message/useState";
+import { Message as UseReducerMessage } from "../components/Message/useReducer";
 import { USER } from "../config";
 
 export default {
@@ -21,9 +22,17 @@ const post = {
 };
 
 export const useStateMessage = () => {
-  return <Message {...post} />;
+  return <UseStateMessage {...post} />;
 };
 
 useStateMessage.story = {
   name: "useState example"
 };
+
+export const useReducerMessage = () => {
+  return <UseReducerMessage {...post} />;
+};
+
+useReducerMessage.story = {
+  name: "useReducer example"
+};
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 } from "../../components/Message/useState";
+import { Message, messageReducer } from "../../components/Message/useReducer";
 import { USER } from "../../config";
 
 const mockProps = {
@@ -60,3 +60,55 @@ describe("Message", () => {
     expect(count.textContent).toBe("12");
   });
 });
+
+const initialState = {
+  retweeted: false,
+  retweet_count: 12,
+  favorited: false,
+  favorite_count: 22
+};
+
+describe("messageReducer", () => {
+  test("should display the initial values", () => {
+    const returnsState = messageReducer(initialState, { type: "UNKNOWN" });
+    expect(returnsState).toEqual(initialState);
+  });
+
+  test('should increment on "FAVORITE"', () => {
+    const nextState = messageReducer(initialState, { type: "FAVORITE" });
+    expect(nextState).toEqual({
+      ...initialState,
+      favorited: true,
+      favorite_count: 23
+    });
+  });
+
+  test('should return to default on second "FAVORITE"', () => {
+    const first = messageReducer(initialState, { type: "FAVORITE" });
+    const second = messageReducer(first, { type: "FAVORITE" });
+    expect(second).toEqual({
+      ...initialState,
+      favorited: false,
+      favorite_count: 22
+    });
+  });
+
+  test('should increment on "RETWEET"', () => {
+    const nextState = messageReducer(initialState, { type: "RETWEET" });
+    expect(nextState).toEqual({
+      ...initialState,
+      retweeted: true,
+      retweet_count: 13
+    });
+  });
+
+  test('should return to default on second "RETWEET"', () => {
+    const first = messageReducer(initialState, { type: "RETWEET" });
+    const second = messageReducer(first, { type: "RETWEET" });
+    expect(second).toEqual({
+      ...initialState,
+      retweeted: false,
+      retweet_count: 12
+    });
+  });
+});
