Process incoming story messages

ts/components/StoryViewsNRepliesModal.stories.tsx

@@ -0,0 +1,125 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import type { PropsType } from './StoryViewsNRepliesModal';
+import * as durations from '../util/durations';
+import enMessages from '../../_locales/en/messages.json';
+import { IMAGE_JPEG } from '../types/MIME';
+import { StoryViewsNRepliesModal } from './StoryViewsNRepliesModal';
+import { fakeAttachment } from '../test-both/helpers/fakeAttachment';
+import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
+import { setupI18n } from '../util/setupI18n';
+
+const i18n = setupI18n('en', enMessages);
+
+const story = storiesOf('Components/StoryViewsNRepliesModal', module);
+
+function getDefaultProps(): PropsType {
+  return {
+    authorTitle: getDefaultConversation().title,
+    getPreferredBadge: () => undefined,
+    i18n,
+    isMyStory: false,
+    onClose: action('onClose'),
+    onSetSkinTone: action('onSetSkinTone'),
+    onReact: action('onReact'),
+    onReply: action('onReply'),
+    onTextTooLong: action('onTextTooLong'),
+    onUseEmoji: action('onUseEmoji'),
+    preferredReactionEmoji: ['❤️', '👍', '👎', '😂', '😮', '😢'],
+    renderEmojiPicker: () => <div />,
+    replies: [],
+    storyPreviewAttachment: fakeAttachment({
+      thumbnail: {
+        contentType: IMAGE_JPEG,
+        height: 64,
+        objectUrl: '/fixtures/nathan-anderson-316188-unsplash.jpg',
+        path: '',
+        width: 40,
+      },
+    }),
+    views: [],
+  };
+}
+
+function getViewsAndReplies() {
+  const p1 = getDefaultConversation();
+  const p2 = getDefaultConversation();
+  const p3 = getDefaultConversation();
+  const p4 = getDefaultConversation();
+  const p5 = getDefaultConversation();
+
+  const views = [
+    {
+      ...p1,
+      timestamp: Date.now() - 20 * durations.MINUTE,
+    },
+    {
+      ...p2,
+      timestamp: Date.now() - 25 * durations.MINUTE,
+    },
+    {
+      ...p3,
+      timestamp: Date.now() - 15 * durations.MINUTE,
+    },
+    {
+      ...p4,
+      timestamp: Date.now() - 5 * durations.MINUTE,
+    },
+    {
+      ...p5,
+      timestamp: Date.now() - 30 * durations.MINUTE,
+    },
+  ];
+
+  const replies = [
+    {
+      ...p2,
+      body: 'So cute ❤️',
+      timestamp: Date.now() - 24 * durations.MINUTE,
+    },
+    {
+      ...p3,
+      body: "That's awesome",
+      timestamp: Date.now() - 13 * durations.MINUTE,
+    },
+    {
+      ...p4,
+      reactionEmoji: '❤️',
+      timestamp: Date.now() - 5 * durations.MINUTE,
+    },
+  ];
+
+  return {
+    views,
+    replies,
+  };
+}
+
+story.add('Can reply', () => (
+  <StoryViewsNRepliesModal {...getDefaultProps()} />
+));
+
+story.add('Views only', () => (
+  <StoryViewsNRepliesModal
+    {...getDefaultProps()}
+    isMyStory
+    views={getViewsAndReplies().views}
+  />
+));
+
+story.add('In a group', () => {
+  const { views, replies } = getViewsAndReplies();
+
+  return (
+    <StoryViewsNRepliesModal
+      {...getDefaultProps()}
+      replies={replies}
+      views={views}
+    />
+  );
+});