moderate comments UI

.storybook/decorators.js

@@ -5,8 +5,7 @@ import haiDelibTheme from '../codebases/UT-HAI/client-deliberation/src/theme'
 import { Provider as ReduxProvider } from 'react-redux'
 import configureStore from '../codebases/compdem/client-admin/src/store'
 import { MemoryRouter } from 'react-router'
-
-const store = configureStore()
+import { getAcceptedComments, getRejectedComments, getUnmoderatedComments } from './utils'
 
 export const withThemeUi = (Story) => (
   <ThemeProvider theme={compdemAdminTheme}>
@@ -20,11 +19,32 @@ export const withDelibThemeUi = (Story) => (
   </ThemeProvider>
 )
 
-export const withRedux = (Story) => (
-  <ReduxProvider store={store}>
-    <Story />
-  </ReduxProvider>
-)
+/**
+ *
+ * Provide components support for redux-store
+ * optionally passing custom initial state, and using default initial state if not passed
+ *
+ * @example
+ * export const MyComponent = () => Template.bind({})
+ * MyComponent.parameters = {
+ *   store: {
+ *     initialState: {
+ *       foo: 'bar'
+ *     },
+ *   }
+ * };
+ *
+ * Source: https://github.com/yannbf/mealdrop/blob/main/.storybook/decorators.tsx#L118
+ */
+export const withRedux = (Story, { parameters }) => {
+  // Creates a store by merging optional custom initialState
+  const store = configureStore(parameters.store?.initialState || {})
+  return (
+    <ReduxProvider store={store}>
+      <Story />
+    </ReduxProvider>
+  )
+}
 
 export const svgDecorator = (Story) => (
   <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="100">

.storybook/utils.js

@@ -31,6 +31,16 @@ export const getComments = () => {
   return commentsData
 }
 
+export const getUnmoderatedComments = () => {
+  return commentsData.filter(comment => comment.mod === 0)
+}
+export const getAcceptedComments = () => {
+  return commentsData.filter(comment => comment.mod === 1)
+}
+export const getRejectedComments = () => {
+  return commentsData.filter(comment => comment.mod === -1)
+}
+
 // Simulates response data from /api/v3/reports?report_id=r3bpnywujybyru4rkx92i
 export const getReports = () => {
   return reportsData

package.json

@@ -29,7 +29,8 @@
     "react-dom": "^16.14.0",
     "react-redux": "7.2.2",
     "react-router-dom": "^5.2.0",
-    "redux-thunk": "~2.3.0",
+    "redux": "4.0.5",
+    "redux-thunk": "2.3.0",
     "storybook": "^8.3.2",
     "storybook-branch-switcher": "^0.5.0"
   },

stories/compdem/client-admin/ModerateCommentsAccepted.stories.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { withRedux, withThemeUi } from "../../../.storybook/decorators";
+import ModerateCommentsAccepted from "../../../codebases/compdem/client-admin/src/components/conversation-admin/comment-moderation/moderate-comments-accepted";
+import { getAcceptedComments } from "../../../.storybook/utils";
+
+export default {
+  component: ModerateCommentsAccepted,
+  decorators: [withThemeUi, withRedux],
+  parameters: {
+    store: {
+      initialState: {
+        mod_comments_accepted: {},
+      },
+    },
+  },
+};
+
+const Template = (args) => <ModerateCommentsAccepted {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  accepted_comments: getAcceptedComments(),
+};

stories/compdem/client-admin/ModerateCommentsRejected.stories.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { withRedux, withThemeUi } from "../../../.storybook/decorators";
+import ModerateCommentsRejected from "../../../codebases/compdem/client-admin/src/components/conversation-admin/comment-moderation/moderate-comments-rejected";
+import { getRejectedComments } from "../../../.storybook/utils";
+
+export default {
+  component: ModerateCommentsRejected,
+  decorators: [withThemeUi, withRedux],
+  parameters: {
+    store: {
+      initialState: {
+        mod_comments_rejected: {},
+      },
+    },
+  },
+};
+
+const Template = (args) => <ModerateCommentsRejected {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  rejected_comments: getRejectedComments(),
+};

stories/compdem/client-admin/ModerateCommentsTodo.stories.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { withRedux, withThemeUi } from "../../../.storybook/decorators";
+import { getUnmoderatedComments } from "../../../.storybook/utils";
+import ModerateCommentsTodo from "../../../codebases/compdem/client-admin/src/components/conversation-admin/comment-moderation/moderate-comments-todo";
+
+export default {
+  component: ModerateCommentsTodo,
+  decorators: [withThemeUi, withRedux],
+  parameters: {
+    store: {
+      initialState: {
+        mod_comments_unmoderated: {},
+      },
+    },
+  },
+};
+
+const Template = (args) => <ModerateCommentsTodo {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  unmoderated_comments: getUnmoderatedComments(),
+}