[deploy] Add comment subscription component to article page (#7205)

* wip * Right aligned the comment subscription panel. * Cleaned up the comment area on the article page so it uses crayon margin classes. * Updated tests * Removed old UI for comment subscriptions. * Made Discussion text bigger and bolder. * Fixed some layout issues as per PR comments. * Fixed some layout issues as per PR comments. * Updated Storybook stories, tests and snapshots * wip * Everything works now, just need to integrate snackbar. * Removed setTimeout I was debugging with. * Using the new utilities/http/request utility now. * Added the <SnackbarPoller /> * Now when unsubscribed, the subscription type resets to all comments. * Removed overflow hidden from .home CSS class so comment subscription component displays properly. * Now unsuccessful subscribes/unsubscribes error properly. * Changed button text from Done to Subscribe * Merged the <SnackbarPoller /> component into the <Snackbar /> component. * Fixed a propType issue. * Fixed a test. * Removed snackbar tests for now. Need to figure out polling in tests. * Now comment subscription component is only loaded for logged on users. * Added a comment. * Updated some storybook stories. * Fixed a small formatting issue. * Reduced snackbar item lifespans to 3 seconds. * Extracted <CogIcon /> to it's own file because other features are going to need it. * Added some Storybook stories and tests for the <CogIcon /> component. * Revert "Extracted <CogIcon /> to it's own file because other features are going to need it." This reverts commit b30406a. * Put back <CogIcon /> component. * Added some error handling if the component doesn't load. * Moving some things around. * Rename the article pack file. * Changed wording from "article" to "post". * Fixed false negative CSS issue. It was a dangling div tag. * Add the option to add an optional close button to snackbar items. * Fixed z-index of subscription type options panel so it is always visible on mobile. * Reworked the comment subsciption utilities a bit. * Added test for comment subscription utilities. * Fixed a broken test from a refactor. * Added more tests for comment subscription utiltities. * Fixed comments footer bottom padding. * Fixed issue with stale find in comment subscription test. * Update app/javascript/packs/articlePage.jsx Co-authored-by: ludwiczakpawel <ludwiczakpawel@gmail.com> * Update app/assets/stylesheets/article-show.scss Co-authored-by: ludwiczakpawel <ludwiczakpawel@gmail.com> * Changed close button wording to Dismiss. * Fixed padding to use utility variable instead. * Added missing import for SASS file. Co-authored-by: ludwiczakpawel <ludwiczakpawel@gmail.com>
forem · May 5, 2020 · a71d78d · a71d78d
1 parent 6229075
commit a71d78d
Show file tree

Hide file tree

Showing 27 changed files with 832 additions and 542 deletions.
diff --git a/app/assets/stylesheets/article-show.scss b/app/assets/stylesheets/article-show.scss
@@ -1,5 +1,6 @@
 @import 'variables';
 @import 'mixins';
+@import 'config/import';
 
 .unpublished {
   background: $red;
@@ -1308,6 +1309,7 @@ article {
   max-width: 98%;
   margin: auto;
   margin-top: -80px;
+  padding-bottom: $su-6;
   text-align: center;
 
   .full-discussion-button {

diff --git a/app/assets/stylesheets/comments.scss b/app/assets/stylesheets/comments.scss
@@ -124,8 +124,6 @@ a.header-link {
 }
 
 .comments-container {
-  width: 800px;
-  max-width: 98%;
   padding-top: 10px;
   margin: auto;
   margin-bottom: 100px;

diff --git a/app/javascript/CommentSubscription/CommentSubscription.jsx b/app/javascript/CommentSubscription/CommentSubscription.jsx
@@ -8,28 +8,42 @@ import {
   RadioButton,
 } from '@crayons';
 
-const COMMENT_SUBSCRIPTION_TYPE = {
+export const COMMENT_SUBSCRIPTION_TYPE = Object.freeze({
   ALL: 'all_comments',
   TOP: 'top_level_comments',
   AUTHOR: 'only_author_comments',
-};
+  NOT_SUBSCRIBED: 'not_subscribed',
+});
 
 export class CommentSubscription extends Component {
-  state = {
-    showOptions: false,
-    commentSubscriptionType: COMMENT_SUBSCRIPTION_TYPE.ALL,
-    subscribed: false,
-  };
-
-  componentDidMount() {
-    window.addEventListener('scroll', this.dropdownPlacementHandler);
+  constructor(props) {
+    const { subscriptionType } = props;
+    super(props);
+
+    const subscribed =
+      subscriptionType &&
+      (subscriptionType.length > 0 && subscriptionType) !==
+        COMMENT_SUBSCRIPTION_TYPE.NOT_SUBSCRIBED;
+
+    const initialState = {
+      subscriptionType: subscribed
+        ? subscriptionType
+        : COMMENT_SUBSCRIPTION_TYPE.ALL,
+      subscribed,
+      showOptions: false,
+    };
+
+    this.state = initialState;
   }
 
   componentDidUpdate() {
     const { showOptions } = this.state;
 
     if (showOptions) {
+      window.addEventListener('scroll', this.dropdownPlacementHandler);
       this.dropdownPlacementHandler();
+    } else {
+      window.removeEventListener('scroll', this.dropdownPlacementHandler);
     }
   }
 
@@ -57,13 +71,17 @@ export class CommentSubscription extends Component {
 
   commentSubscriptionClick = (event) => {
     this.setState({
-      commentSubscriptionType: event.target.value,
+      subscriptionType: event.target.value,
     });
   };
 
   render() {
-    const { showOptions, commentSubscriptionType, subscribed } = this.state;
-    const { onSubscribe, onUnsubscribe } = this.props;
+    const { showOptions, subscriptionType, subscribed } = this.state;
+    const {
+      onSubscribe,
+      onUnsubscribe,
+      positionType = 'relative',
+    } = this.props;
 
     const CogIcon = () => (
       <svg
@@ -80,7 +98,7 @@ export class CommentSubscription extends Component {
     );
 
     return (
-      <div className="relative">
+      <div className={positionType}>
         <ButtonGroup
           ref={(element) => {
             this.buttonGroupElement = element;
@@ -90,9 +108,12 @@ export class CommentSubscription extends Component {
             variant="outlined"
             onClick={(_event) => {
               if (subscribed) {
-                onUnsubscribe();
+                onUnsubscribe(COMMENT_SUBSCRIPTION_TYPE.NOT_SUBSCRIBED);
+                this.setState({
+                  subscriptionType: COMMENT_SUBSCRIPTION_TYPE.ALL,
+                });
               } else {
-                onSubscribe(commentSubscriptionType);
+                onSubscribe(subscriptionType);
               }
 
               this.setState({ subscribed: !subscribed });
@@ -113,7 +134,13 @@ export class CommentSubscription extends Component {
         </ButtonGroup>
         {subscribed && (
           <Dropdown
-            className={showOptions ? 'inline-block w-full' : null}
+            className={
+              showOptions
+                ? `inline-block z-30 right-4 left-4 s:right-0 s:left-auto${
+                    positionType === 'relative' ? ' w-full' : ''
+                  }`
+                : null
+            }
             ref={(element) => {
               this.dropdownElement = element;
             }}
@@ -123,10 +150,8 @@ export class CommentSubscription extends Component {
                 <RadioButton
                   id="subscribe-all"
                   name="subscribe_comments"
-                  value="all_comments"
-                  checked={
-                    commentSubscriptionType === COMMENT_SUBSCRIPTION_TYPE.ALL
-                  }
+                  value={COMMENT_SUBSCRIPTION_TYPE.ALL}
+                  checked={subscriptionType === COMMENT_SUBSCRIPTION_TYPE.ALL}
                   onClick={this.commentSubscriptionClick}
                 />
                 <label htmlFor="subscribe-all" className="crayons-field__label">
@@ -141,11 +166,9 @@ export class CommentSubscription extends Component {
                 <RadioButton
                   id="subscribe-toplevel"
                   name="subscribe_comments"
-                  value="top_level_comments"
+                  value={COMMENT_SUBSCRIPTION_TYPE.TOP}
                   onClick={this.commentSubscriptionClick}
-                  checked={
-                    commentSubscriptionType === COMMENT_SUBSCRIPTION_TYPE.TOP
-                  }
+                  checked={subscriptionType === COMMENT_SUBSCRIPTION_TYPE.TOP}
                 />
                 <label
                   htmlFor="subscribe-toplevel"
@@ -163,10 +186,10 @@ export class CommentSubscription extends Component {
                 <RadioButton
                   id="subscribe-author"
                   name="subscribe_comments"
-                  value="only_author_comments"
+                  value={COMMENT_SUBSCRIPTION_TYPE.AUTHOR}
                   onClick={this.commentSubscriptionClick}
                   checked={
-                    commentSubscriptionType === COMMENT_SUBSCRIPTION_TYPE.AUTHOR
+                    subscriptionType === COMMENT_SUBSCRIPTION_TYPE.AUTHOR
                   }
                 />
                 <label
@@ -186,7 +209,7 @@ export class CommentSubscription extends Component {
               className="w-100"
               onClick={(_event) => {
                 this.setState((prevState) => {
-                  onSubscribe(prevState.commentSubscriptionType);
+                  onSubscribe(prevState.subscriptionType);
 
                   return { ...prevState, showOptions: false };
                 });
@@ -204,6 +227,10 @@ export class CommentSubscription extends Component {
 CommentSubscription.displayName = 'CommentSubscription';
 
 CommentSubscription.propTypes = {
+  positionType: PropTypes.oneOf(['absolute', 'relative', 'static']).isRequired,
   onSubscribe: PropTypes.func.isRequired,
   onUnsubscribe: PropTypes.func.isRequired,
+  subscriptionType: PropTypes.oneOf(
+    Object.entries(COMMENT_SUBSCRIPTION_TYPE).map(([, value]) => value),
+  ).isRequired,
 };
diff --git a/app/javascript/CommentSubscription/__stories__/CommentSubscription.stories.jsx b/app/javascript/CommentSubscription/__stories__/CommentSubscription.stories.jsx
@@ -1,14 +1,62 @@
 import { h } from 'preact';
 import { action } from '@storybook/addon-actions';
-import { CommentSubscription } from '../CommentSubscription';
+import { withKnobs, select } from '@storybook/addon-knobs/react';
+import {
+  CommentSubscription,
+  COMMENT_SUBSCRIPTION_TYPE,
+} from '../CommentSubscription';
 
 export default {
   title: 'App Components/Comment Subscription',
+  decorators: [withKnobs],
 };
 
-export const Default = () => (
+const commonProps = {
+  onSubscribe: action('subscribed'),
+  onUnsubscribe: action('unsubscribed'),
+};
+
+export const Unsubscribed = () => (
+  <CommentSubscription
+    {...commonProps}
+    subscriptionType={select(
+      'subscriptionType',
+      COMMENT_SUBSCRIPTION_TYPE,
+      COMMENT_SUBSCRIPTION_TYPE.NOT_SUBSCRIBED,
+    )}
+  />
+);
+
+Unsubscribed.story = {
+  name: 'unsubscribed',
+};
+
+export const Subscribed = () => (
   <CommentSubscription
-    onSubscribe={action('subscribed')}
-    onUnsubscribe={action('unsubscribed')}
+    {...commonProps}
+    subscriptionType={select(
+      'subscriptionType',
+      COMMENT_SUBSCRIPTION_TYPE,
+      COMMENT_SUBSCRIPTION_TYPE.ALL,
+    )}
   />
 );
+
+Subscribed.story = {
+  name: 'subscribed',
+};
+
+export const SubscribedButNotDefault = () => (
+  <CommentSubscription
+    {...commonProps}
+    subscriptionType={select(
+      'subscriptionType',
+      COMMENT_SUBSCRIPTION_TYPE,
+      COMMENT_SUBSCRIPTION_TYPE.AUTHOR,
+    )}
+  />
+);
+
+SubscribedButNotDefault.story = {
+  name: 'subscribed (with comment type other than the default',
+};