8722116213

Committed 17 Apr 2024 12:44PM UTC coverage: 32.029% (+0.02%) from 32.005%

Build # 8722116213

Build Type

Pull #9076

github

Committed by

oetherington

Commit Message

More small cleanup

Pull Request Pull Request #9076: EA Quick takes autosave

Run Details

4661 of 37909 branches covered (12.3%)

Branch coverage included in aggregate %.

11 of 24 new or added lines in 6 files covered. (45.83%)

5 existing lines in 2 files now uncovered.

27099 of 61252 relevant lines covered (44.24%)

182.97 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

13.5

/packages/lesswrong/components/comments/CommentsNewForm.tsx

import { Components, registerComponent, getFragment } from '../../lib/vulcan-lib';
import React, {ComponentProps, useState, useEffect, useRef, useCallback} from 'react';
import Button from '@material-ui/core/Button';
import classNames from 'classnames';
import { useCurrentUser } from '../common/withUser'
import withErrorBoundary from '../common/withErrorBoundary'
import { useDialog } from '../common/withDialog';
import { useSingle } from '../../lib/crud/withSingle';
import { hideUnreviewedAuthorCommentsSettings } from '../../lib/publicSettings';
import { userCanDo } from '../../lib/vulcan-users/permissions';
import { requireNewUserGuidelinesAck, userIsAllowedToComment } from '../../lib/collections/users/helpers';
import { useMessages } from '../common/withMessages';
import { useUpdate } from "../../lib/crud/withUpdate";
import { afNonMemberDisplayInitialPopup, afNonMemberSuccessHandling } from "../../lib/alignment-forum/displayAFNonMemberPopups";
import ArrowForward from '@material-ui/icons/ArrowForward';
import { TagCommentType } from '../../lib/collections/comments/types';
import { commentDefaultToAlignment } from '../../lib/collections/comments/helpers';
import { isInFuture } from '../../lib/utils/timeUtil';
import moment from 'moment';
import { isLWorAF } from '../../lib/instanceSettings';
import { useTracking } from "../../lib/analyticsEvents";
import { isFriendlyUI } from '../../themes/forumTheme';

export type FormDisplayMode = "default" | "minimalist"

export const COMMENTS_NEW_FORM_PADDING = isFriendlyUI ? 12 : 10;

const styles = (theme: ThemeType): JssStyles => ({
  root: isFriendlyUI ? {
    '& .form-component-EditorFormComponent': {
      marginTop: 0
    }
  } : {},
  rootMinimalist: {
    '& .form-input': {
      width: "100%",
      margin: 0,
      marginTop: 4,
    },
    '& form': {
      display: "flex",
      flexDirection: "row",
    }
  },
  rootQuickTakes: {
    '& .form-component-EditorFormComponent': {
      background: theme.palette.grey[100],
      padding: COMMENTS_NEW_FORM_PADDING,
      borderTopLeftRadius: theme.borderRadius.quickTakesEntry,
      borderTopRightRadius: theme.borderRadius.quickTakesEntry,
    }
  },
  loadingRoot: {
    opacity: 0.5
  },
  form: {
    padding: COMMENTS_NEW_FORM_PADDING,
  },
  formMinimalist: {
    padding: '12px 10px 8px 10px',
  },
  quickTakesForm: {
    display: 'flex',
    flexDirection: 'column',
  },
  rateLimitNote: {
    paddingTop: '4px',
    color: theme.palette.text.dim2,
  },
  modNote: {
    paddingTop: '4px',
    color: theme.palette.text.dim2,
  },
  submit: {
    textAlign: 'right',
  },
  submitQuickTakes: {
    background: theme.palette.grey[100],
    padding: COMMENTS_NEW_FORM_PADDING,
    borderBottomLeftRadius: theme.borderRadius.quickTakesEntry,
    borderBottomRightRadius: theme.borderRadius.quickTakesEntry,
  },
  formButton: isFriendlyUI ? {
    fontSize: 14,
    textTransform: 'none',
    padding: '6px 12px',
    borderRadius: 6,
    boxShadow: 'none',
    marginLeft: 8,
  } : {
    fontSize: "16px",
    color: theme.palette.lwTertiary.main,
    marginLeft: "5px",
    "&:hover": {
      opacity: .5,
      backgroundColor: "none",
    },
  },
  cancelButton: {
    color: isFriendlyUI ? undefined : theme.palette.grey[400],
  },
  submitButton: isFriendlyUI ? {
    backgroundColor: theme.palette.buttons.alwaysPrimary,
    color: theme.palette.text.alwaysWhite,
    '&:disabled': {
      backgroundColor: theme.palette.buttons.alwaysPrimary,
      color: theme.palette.text.alwaysWhite,
      opacity: .5,
    }
  } : {},
  submitMinimalist: {
    height: 'fit-content',
    marginTop: "auto",
    marginBottom: 4,
  },
  formButtonMinimalist: {
    padding: "2px",
    fontSize: "16px",
    minWidth: 28,
    minHeight: 28,
    marginLeft: "5px",
    "&:hover": {
      opacity: .8,
      backgroundColor: theme.palette.lwTertiary.main,
    },
    backgroundColor: theme.palette.lwTertiary.main,
    color: theme.palette.background.pageActiveAreaBackground,
    overflowX: "hidden",  // to stop loading dots from wrapping around
  },
  moderationGuidelinesWrapper: {
    backgroundColor: theme.palette.panelBackground.newCommentFormModerationGuidelines,
  }
});

const shouldOpenNewUserGuidelinesDialog = (
  maybeProps: { user: UsersCurrent | null, post?: PostsMinimumInfo }
): maybeProps is Omit<ComponentProps<ComponentTypes['NewUserGuidelinesDialog']>, "onClose" | "classes"> => {
  const { user, post } = maybeProps;
  return !!user && requireNewUserGuidelinesAck(user) && !!post;
};

const getSubmitLabel = (isQuickTake: boolean) => {
  if (!isFriendlyUI) return 'Submit'
  return isQuickTake ? 'Publish' : 'Comment'
}

export type BtnProps = {
  variant?: 'contained',
  color?: 'primary',
  disabled?: boolean
}

export type CommentSuccessCallback = (
  comment: CommentsList,
  otherArgs: {form: AnyBecauseTodo},
) => void | Promise<void>;
export type CommentCancelCallback = (...args: unknown[]) => void | Promise<void>;

export type CommentsNewFormProps = {
  prefilledProps?: any,
  post?: PostsMinimumInfo,
  tag?: TagBasicInfo,
  tagCommentType?: TagCommentType,
  parentComment?: CommentsList,
  successCallback?: CommentSuccessCallback,
  cancelCallback?: CommentCancelCallback,
  type: string,
  removeFields?: any,
  fragment?: FragmentName,
  formProps?: any,
  enableGuidelines?: boolean,
  padding?: boolean,
  formStyle?: FormDisplayMode,
  overrideHintText?: string,
  classes: ClassesType,
  className?: string,
}

const CommentsNewForm = ({
  prefilledProps={},
  post,
  tag,
  tagCommentType="DISCUSSION",
  parentComment,
  successCallback,
  type,
  cancelCallback,
  removeFields,
  fragment="CommentsList",
  formProps,
  enableGuidelines=true,
  padding=true,
  formStyle="default",
  overrideHintText,
  classes,
  className,
}: CommentsNewFormProps) => {
  const currentUser = useCurrentUser();
  const { captureEvent } = useTracking({eventProps: { postId: post?._id, tagId: tag?._id, tagCommentType}});
  const commentSubmitStartTimeRef = useRef(Date.now());
  
  const userWithRateLimit = useSingle({
    documentId: currentUser?._id,
    collectionName: "Users",
    fragmentName: "UsersCurrentCommentRateLimit",
    extraVariables: { postId: 'String' },
    extraVariablesValues: { postId: post?._id },
    fetchPolicy: "cache-and-network",
    skip: !currentUser,
    ssr: false
  });
  const userNextAbleToComment = userWithRateLimit?.document?.rateLimitNextAbleToComment;
  const lastRateLimitExpiry: Date|null = (userNextAbleToComment && new Date(userNextAbleToComment.nextEligible)) ?? null;
  const rateLimitMessage = userNextAbleToComment ? userNextAbleToComment.rateLimitMessage : null
  
  // Disable the form if there's a rate limit and it's more than 1 minute until it
  // expires. (If the user is rate limited but it will expire sooner than that,
  // don't disable the form; it'll probably expire before they finish typing their
  // comment anyways, and this avoids an awkward interaction with the 15-second
  // rate limit that's only supposed to be there to prevent accidental double posts.
  // TODO
  const formDisabledDueToRateLimit = lastRateLimitExpiry && isInFuture(moment(lastRateLimitExpiry).subtract(1,'minutes').toDate());

  const {flash} = useMessages();
  prefilledProps = {
    ...prefilledProps,
    af: commentDefaultToAlignment(currentUser, post, parentComment),
  };
  
  const isQuickTake = !!prefilledProps.shortform
  const isMinimalist = formStyle === "minimalist"
  const [showGuidelines, setShowGuidelines] = useState(false)
  const [loading, setLoading] = useState(false)
  const [_,setForceRefreshState] = useState(0);

  const { openDialog } = useDialog();
  const { mutate: updateComment } = useUpdate({
    collectionName: "Comments",
    fragmentName: 'SuggestAlignmentComment',
  })
  
  // On focus (this bubbles out from the text editor), show moderation guidelines.
  // Defer this through a setTimeout, because otherwise clicking the Cancel button
  // doesn't work (the focus event fires before the click event, the state change
  // causes DOM nodes to get replaced, and replacing the DOM nodes prevents the
  // rest of the click event handlers from firing.)
  const onFocusCommentForm: React.FocusEventHandler = () => {
    setTimeout(() => {
      // TODO: user field for showing new user guidelines
      // TODO: decide if post should be required?  We might not have a post param in the case of shortform, not sure where else
      const dialogProps = { user: currentUser, post };
      if (shouldOpenNewUserGuidelinesDialog(dialogProps)) {
        openDialog({
          componentName: 'NewUserGuidelinesDialog',
          componentProps: dialogProps,
          noClickawayCancel: true
        });
      }
      if (isLWorAF) {
        setShowGuidelines(true);
      }
    }, 0);
  };

  const wrappedSuccessCallback = (comment: CommentsList, { form }: {form: any}) => {
    afNonMemberSuccessHandling({currentUser, document: comment, openDialog, updateDocument: updateComment })
    if (comment.deleted) {
      flash(comment.deletedReason);
    }
    if (successCallback) {
      void successCallback(comment, {form});
    }
    setLoading(false)
    const timeElapsed = Date.now() - commentSubmitStartTimeRef.current;
    captureEvent("wrappedSuccessCallbackFinished", {timeElapsed, commentId: comment._id})
    userWithRateLimit.refetch();
  };

  const wrappedCancelCallback = (...args: unknown[]) => {
    if (cancelCallback) {
      void cancelCallback(...args);
    }
    setLoading(false)
  };

  if (post) {
    prefilledProps = {
      ...prefilledProps,
      postId: post._id
    };
  }

  if (tag) {
    prefilledProps = {
      ...prefilledProps,
      tagId: tag._id,
      tagCommentType: tagCommentType,
    };
  }

  if (parentComment) {
    prefilledProps = {
      ...prefilledProps,
      parentCommentId: parentComment._id,
    };
  }

  const SubmitComponent = useCallback(({submitLabel = "Submit"}) => {
    const { Loading } = Components;
    const formButtonClass = isMinimalist ? classes.formButtonMinimalist : classes.formButton
    // by default, the EA Forum uses MUI contained buttons here
    const cancelBtnProps: BtnProps = isFriendlyUI && !isMinimalist ? {variant: 'contained'} : {}
    const submitBtnProps: BtnProps = isFriendlyUI && !isMinimalist ? {variant: 'contained', color: 'primary'} : {}
    if (formDisabledDueToRateLimit) {
      submitBtnProps.disabled = true
    }

    return <div className={classNames(classes.submit, {
      [classes.submitMinimalist]: isMinimalist,
      [classes.submitQuickTakes]: isQuickTake,
    })}>
      {(type === "reply" && !isMinimalist) && <Button
        onClick={cancelCallback}
        className={classNames(formButtonClass, classes.cancelButton)}
        {...cancelBtnProps}
      >
        Cancel
      </Button>}
      <Button
        type="submit"
        id="new-comment-submit"
        className={classNames(formButtonClass, classes.submitButton)}
        onClick={(ev) => {
          if (!currentUser) {
            openDialog({
              componentName: "LoginPopup",
              componentProps: {}
            });
            ev.preventDefault();
          }
        }}
        {...submitBtnProps}
      >
        {loading ? <Loading /> : (isMinimalist ? <ArrowForward /> : submitLabel)}
      </Button>
    </div>
  }, [classes, cancelCallback, currentUser, formDisabledDueToRateLimit, isMinimalist, isQuickTake, loading, openDialog, type]);

  const hideDate = hideUnreviewedAuthorCommentsSettings.get()
  const commentWillBeHidden = hideDate && new Date(hideDate) < new Date() &&
    currentUser && !currentUser.isReviewed 
  const extraFormProps = {
    ...(isMinimalist ? {commentMinimalistStyle: true, editorHintText: "Reply..."} : {}),
    ...(overrideHintText ? {editorHintText: overrideHintText} : {})
  }
  const parentDocumentId = post?._id || tag?._id

  useEffect(() => {
    // If disabled due to rate limit, set a timer to reenable the comment form when the rate limit expires
    if (formDisabledDueToRateLimit && userNextAbleToComment) {
      const timeLeftOnUserRateLimitMS = new Date(userNextAbleToComment).getTime() - new Date().getTime()
      const timer = setTimeout(() => {
        setForceRefreshState((n) => (n+1));
      }, timeLeftOnUserRateLimitMS);
      
      return () => clearTimeout(timer);
    }
  }, [userNextAbleToComment, formDisabledDueToRateLimit]);
  
  // @ts-ignore FIXME: Not enforcing that the post-author fragment has enough fields for userIsAllowedToComment
  if (currentUser && !userCanDo(currentUser, `posts.moderate.all`) && !userIsAllowedToComment(currentUser, prefilledProps, post?.user, !!parentComment)
  ) {
    return <span>Sorry, you do not have permission to comment at this time.</span>
  }

  const {
    ModerationGuidelinesBox, WrappedSmartForm, RecaptchaWarning,
    NewCommentModerationWarning, RateLimitWarning, FormGroupQuickTakes,
    FormGroupNoStyling,
  } = Components;
  return (
    <div className={classNames(
      className,
      isMinimalist ? classes.rootMinimalist : classes.root,
      {[classes.loadingRoot]: loading, [classes.rootQuickTakes]: isQuickTake}
    )} onFocus={onFocusCommentForm}>
      <RecaptchaWarning currentUser={currentUser}>
        <div className={padding ? classNames({[classes.form]: !isMinimalist, [classes.formMinimalist]: isMinimalist}) : undefined}>
          {formDisabledDueToRateLimit && <RateLimitWarning lastRateLimitExpiry={lastRateLimitExpiry} rateLimitMessage={rateLimitMessage} />}
          <div onFocus={(ev) => {
            afNonMemberDisplayInitialPopup(currentUser, openDialog)
            ev.preventDefault()
          }}>
            <WrappedSmartForm
              id="new-comment-form"
              collectionName="Comments"
              mutationFragment={getFragment(fragment)}
              successCallback={wrappedSuccessCallback}
              cancelCallback={wrappedCancelCallback}
              submitCallback={(data: unknown) => {
                setLoading(true);
                commentSubmitStartTimeRef.current = Date.now()
                captureEvent("wrappedSubmitCallbackStarted")
                return data
              }}
              errorCallback={() => setLoading(false)}
              prefilledProps={prefilledProps}
              layout="elementOnly"
              formComponents={{
                FormSubmit: SubmitComponent,
                FormGroupLayout: isQuickTake ? FormGroupQuickTakes : FormGroupNoStyling,
              }}
              alignmentForumPost={post?.af}
              addFields={currentUser ? [] : ["title", "contents"]}
              removeFields={removeFields}
              formProps={{
                formClassName: isQuickTake ? classes.quickTakesForm : '',
                ...extraFormProps,
                ...formProps,
              }}
              submitLabel={getSubmitLabel(isQuickTake)}
            />
          </div>
        </div>
        {parentDocumentId && enableGuidelines && showGuidelines && <div className={classes.moderationGuidelinesWrapper}>
          {commentWillBeHidden && <div className={classes.modNote}>
            <NewCommentModerationWarning />
          </div>}
          <ModerationGuidelinesBox documentId={parentDocumentId} commentType={post?._id ? "post" : "subforum"} />
        </div>}
      </RecaptchaWarning>
    </div>
  );
};

const CommentsNewFormComponent = registerComponent('CommentsNewForm', CommentsNewForm, {
  styles,
  hocs: [withErrorBoundary]
});

declare global {
  interface ComponentTypes {
    CommentsNewForm: typeof CommentsNewFormComponent,
  }
}

1	import { Components, registerComponent, getFragment } from '../../lib/vulcan-lib';	4✔
2	import React, {ComponentProps, useState, useEffect, useRef, useCallback} from 'react';	1✔
3	import Button from '@material-ui/core/Button';	1✔
4	import classNames from 'classnames';	1✔
5	import { useCurrentUser } from '../common/withUser'	1✔
6	import withErrorBoundary from '../common/withErrorBoundary'	1✔
7	import { useDialog } from '../common/withDialog';	1✔
8	import { useSingle } from '../../lib/crud/withSingle';	1✔
9	import { hideUnreviewedAuthorCommentsSettings } from '../../lib/publicSettings';	1✔
10	import { userCanDo } from '../../lib/vulcan-users/permissions';	1✔
11	import { requireNewUserGuidelinesAck, userIsAllowedToComment } from '../../lib/collections/users/helpers';	1✔
12	import { useMessages } from '../common/withMessages';	1✔
13	import { useUpdate } from "../../lib/crud/withUpdate";	1✔
14	import { afNonMemberDisplayInitialPopup, afNonMemberSuccessHandling } from "../../lib/alignment-forum/displayAFNonMemberPopups";	1✔
15	import ArrowForward from '@material-ui/icons/ArrowForward';	1✔
16	import { TagCommentType } from '../../lib/collections/comments/types';
17	import { commentDefaultToAlignment } from '../../lib/collections/comments/helpers';	1✔
18	import { isInFuture } from '../../lib/utils/timeUtil';	1✔
19	import moment from 'moment';	1✔
20	import { isLWorAF } from '../../lib/instanceSettings';	1✔
21	import { useTracking } from "../../lib/analyticsEvents";	1✔
22	import { isFriendlyUI } from '../../themes/forumTheme';	1✔
23
24	export type FormDisplayMode = "default" \| "minimalist"
25
26	export const COMMENTS_NEW_FORM_PADDING = isFriendlyUI ? 12 : 10;	1!
27
28	const styles = (theme: ThemeType): JssStyles => ({	1✔
29	root: isFriendlyUI ? {	1!
30	'& .form-component-EditorFormComponent': {
31	marginTop: 0
32	}
33	} : {},
34	rootMinimalist: {
35	'& .form-input': {
36	width: "100%",
37	margin: 0,
38	marginTop: 4,
39	},
40	'& form': {
41	display: "flex",
42	flexDirection: "row",
43	}
44	},
45	rootQuickTakes: {
46	'& .form-component-EditorFormComponent': {
47	background: theme.palette.grey[100],
48	padding: COMMENTS_NEW_FORM_PADDING,
49	borderTopLeftRadius: theme.borderRadius.quickTakesEntry,
50	borderTopRightRadius: theme.borderRadius.quickTakesEntry,
51	}
52	},
53	loadingRoot: {
54	opacity: 0.5
55	},
56	form: {
57	padding: COMMENTS_NEW_FORM_PADDING,
58	},
59	formMinimalist: {
60	padding: '12px 10px 8px 10px',
61	},
62	quickTakesForm: {
63	display: 'flex',
64	flexDirection: 'column',
65	},
66	rateLimitNote: {
67	paddingTop: '4px',
68	color: theme.palette.text.dim2,
69	},
70	modNote: {
71	paddingTop: '4px',
72	color: theme.palette.text.dim2,
73	},
74	submit: {
75	textAlign: 'right',
76	},
77	submitQuickTakes: {
78	background: theme.palette.grey[100],
79	padding: COMMENTS_NEW_FORM_PADDING,
80	borderBottomLeftRadius: theme.borderRadius.quickTakesEntry,
81	borderBottomRightRadius: theme.borderRadius.quickTakesEntry,
82	},
83	formButton: isFriendlyUI ? {	1!
84	fontSize: 14,
85	textTransform: 'none',
86	padding: '6px 12px',
87	borderRadius: 6,
88	boxShadow: 'none',
89	marginLeft: 8,
90	} : {
91	fontSize: "16px",
92	color: theme.palette.lwTertiary.main,
93	marginLeft: "5px",
94	"&:hover": {
95	opacity: .5,
96	backgroundColor: "none",
97	},
98	},
99	cancelButton: {
100	color: isFriendlyUI ? undefined : theme.palette.grey[400],	1!
101	},
102	submitButton: isFriendlyUI ? {	1!
103	backgroundColor: theme.palette.buttons.alwaysPrimary,
104	color: theme.palette.text.alwaysWhite,
105	'&:disabled': {
106	backgroundColor: theme.palette.buttons.alwaysPrimary,
107	color: theme.palette.text.alwaysWhite,
108	opacity: .5,
109	}
110	} : {},
111	submitMinimalist: {
112	height: 'fit-content',
113	marginTop: "auto",
114	marginBottom: 4,
115	},
116	formButtonMinimalist: {
117	padding: "2px",
118	fontSize: "16px",
119	minWidth: 28,
120	minHeight: 28,
121	marginLeft: "5px",
122	"&:hover": {
123	opacity: .8,
124	backgroundColor: theme.palette.lwTertiary.main,
125	},
126	backgroundColor: theme.palette.lwTertiary.main,
127	color: theme.palette.background.pageActiveAreaBackground,
128	overflowX: "hidden", // to stop loading dots from wrapping around
129	},
130	moderationGuidelinesWrapper: {
131	backgroundColor: theme.palette.panelBackground.newCommentFormModerationGuidelines,
132	}
133	});
134
135	const shouldOpenNewUserGuidelinesDialog = (	1✔
136	maybeProps: { user: UsersCurrent \| null, post?: PostsMinimumInfo }
137	): maybeProps is Omit<ComponentProps<ComponentTypes['NewUserGuidelinesDialog']>, "onClose" \| "classes"> => {
138	const { user, post } = maybeProps;	×
139	return !!user && requireNewUserGuidelinesAck(user) && !!post;	×
140	};
141
142	const getSubmitLabel = (isQuickTake: boolean) => {	1✔
NEW 143	if (!isFriendlyUI) return 'Submit'	×
NEW 144	return isQuickTake ? 'Publish' : 'Comment'	×
145	}
146
147	export type BtnProps = {
148	variant?: 'contained',
149	color?: 'primary',
150	disabled?: boolean
151	}
152
153	export type CommentSuccessCallback = (
154	comment: CommentsList,
155	otherArgs: {form: AnyBecauseTodo},
156	) => void \| Promise<void>;
157	export type CommentCancelCallback = (...args: unknown[]) => void \| Promise<void>;
158
159	export type CommentsNewFormProps = {
160	prefilledProps?: any,
161	post?: PostsMinimumInfo,
162	tag?: TagBasicInfo,
163	tagCommentType?: TagCommentType,
164	parentComment?: CommentsList,
165	successCallback?: CommentSuccessCallback,
166	cancelCallback?: CommentCancelCallback,
167	type: string,
168	removeFields?: any,
169	fragment?: FragmentName,
170	formProps?: any,
171	enableGuidelines?: boolean,
172	padding?: boolean,
173	formStyle?: FormDisplayMode,
174	overrideHintText?: string,
175	classes: ClassesType,
176	className?: string,
177	}
178
179	const CommentsNewForm = ({	1✔
180	prefilledProps={},	×
181	post,
182	tag,
183	tagCommentType="DISCUSSION",	×
184	parentComment,
185	successCallback,
186	type,
187	cancelCallback,
188	removeFields,
189	fragment="CommentsList",	×
190	formProps,
191	enableGuidelines=true,	×
192	padding=true,	×
193	formStyle="default",	×
194	overrideHintText,
195	classes,
196	className,
197	}: CommentsNewFormProps) => {
198	const currentUser = useCurrentUser();	×
199	const { captureEvent } = useTracking({eventProps: { postId: post?._id, tagId: tag?._id, tagCommentType}});	×
200	const commentSubmitStartTimeRef = useRef(Date.now());	×
201
202	const userWithRateLimit = useSingle({	×
203	documentId: currentUser?._id,	×
204	collectionName: "Users",
205	fragmentName: "UsersCurrentCommentRateLimit",
206	extraVariables: { postId: 'String' },
207	extraVariablesValues: { postId: post?._id },	×
208	fetchPolicy: "cache-and-network",
209	skip: !currentUser,
210	ssr: false
211	});
212	const userNextAbleToComment = userWithRateLimit?.document?.rateLimitNextAbleToComment;	×
213	const lastRateLimitExpiry: Date\|null = (userNextAbleToComment && new Date(userNextAbleToComment.nextEligible)) ?? null;	×
214	const rateLimitMessage = userNextAbleToComment ? userNextAbleToComment.rateLimitMessage : null	×
215
216	// Disable the form if there's a rate limit and it's more than 1 minute until it
217	// expires. (If the user is rate limited but it will expire sooner than that,
218	// don't disable the form; it'll probably expire before they finish typing their
219	// comment anyways, and this avoids an awkward interaction with the 15-second
220	// rate limit that's only supposed to be there to prevent accidental double posts.
221	// TODO
222	const formDisabledDueToRateLimit = lastRateLimitExpiry && isInFuture(moment(lastRateLimitExpiry).subtract(1,'minutes').toDate());	×
223
224	const {flash} = useMessages();	×
225	prefilledProps = {	×
226	...prefilledProps,
227	af: commentDefaultToAlignment(currentUser, post, parentComment),
228	};
229
NEW 230	const isQuickTake = !!prefilledProps.shortform	×
231	const isMinimalist = formStyle === "minimalist"	×
232	const [showGuidelines, setShowGuidelines] = useState(false)	×
233	const [loading, setLoading] = useState(false)	×
234	const [_,setForceRefreshState] = useState(0);	×
235
UNCOV 236	const { openDialog } = useDialog();	×
237	const { mutate: updateComment } = useUpdate({	×
238	collectionName: "Comments",
239	fragmentName: 'SuggestAlignmentComment',
240	})
241
242	// On focus (this bubbles out from the text editor), show moderation guidelines.
243	// Defer this through a setTimeout, because otherwise clicking the Cancel button
244	// doesn't work (the focus event fires before the click event, the state change
245	// causes DOM nodes to get replaced, and replacing the DOM nodes prevents the
246	// rest of the click event handlers from firing.)
247	const onFocusCommentForm: React.FocusEventHandler = () => {	×
248	setTimeout(() => {	×
249	// TODO: user field for showing new user guidelines
250	// TODO: decide if post should be required? We might not have a post param in the case of shortform, not sure where else
251	const dialogProps = { user: currentUser, post };	×
252	if (shouldOpenNewUserGuidelinesDialog(dialogProps)) {	×
253	openDialog({	×
254	componentName: 'NewUserGuidelinesDialog',
255	componentProps: dialogProps,
256	noClickawayCancel: true
257	});
258	}
259	if (isLWorAF) {	×
260	setShowGuidelines(true);	×
261	}
262	}, 0);
263	};
264
265	const wrappedSuccessCallback = (comment: CommentsList, { form }: {form: any}) => {	×
266	afNonMemberSuccessHandling({currentUser, document: comment, openDialog, updateDocument: updateComment })	×
267	if (comment.deleted) {	×
268	flash(comment.deletedReason);	×
269	}
270	if (successCallback) {	×
271	void successCallback(comment, {form});	×
272	}
273	setLoading(false)	×
274	const timeElapsed = Date.now() - commentSubmitStartTimeRef.current;	×
275	captureEvent("wrappedSuccessCallbackFinished", {timeElapsed, commentId: comment._id})	×
276	userWithRateLimit.refetch();	×
277	};
278
279	const wrappedCancelCallback = (...args: unknown[]) => {	×
280	if (cancelCallback) {	×
281	void cancelCallback(...args);	×
282	}
283	setLoading(false)	×
284	};
285
286	if (post) {	×
287	prefilledProps = {	×
288	...prefilledProps,
289	postId: post._id
290	};
291	}
292
293	if (tag) {	×
294	prefilledProps = {	×
295	...prefilledProps,
296	tagId: tag._id,
297	tagCommentType: tagCommentType,
298	};
299	}
300
301	if (parentComment) {	×
302	prefilledProps = {	×
303	...prefilledProps,
304	parentCommentId: parentComment._id,
305	};
306	}
307
308	const SubmitComponent = useCallback(({submitLabel = "Submit"}) => {	×
309	const { Loading } = Components;	×
310	const formButtonClass = isMinimalist ? classes.formButtonMinimalist : classes.formButton	×
311	// by default, the EA Forum uses MUI contained buttons here
312	const cancelBtnProps: BtnProps = isFriendlyUI && !isMinimalist ? {variant: 'contained'} : {}	×
313	const submitBtnProps: BtnProps = isFriendlyUI && !isMinimalist ? {variant: 'contained', color: 'primary'} : {}	×
314	if (formDisabledDueToRateLimit) {	×
315	submitBtnProps.disabled = true	×
316	}
317
NEW 318	return <div className={classNames(classes.submit, {	×
319	[classes.submitMinimalist]: isMinimalist,
320	[classes.submitQuickTakes]: isQuickTake,
321	})}>
322	{(type === "reply" && !isMinimalist) && <Button	×
323	onClick={cancelCallback}
324	className={classNames(formButtonClass, classes.cancelButton)}
325	{...cancelBtnProps}
326	>
327	Cancel
328	</Button>}
329	<Button
330	type="submit"
331	id="new-comment-submit"
332	className={classNames(formButtonClass, classes.submitButton)}
333	onClick={(ev) => {
334	if (!currentUser) {	×
335	openDialog({	×
336	componentName: "LoginPopup",
337	componentProps: {}
338	});
339	ev.preventDefault();	×
340	}
341	}}
342	{...submitBtnProps}
343	>
344	{loading ? <Loading /> : (isMinimalist ? <ArrowForward /> : submitLabel)}	×
345	</Button>
346	</div>
347	}, [classes, cancelCallback, currentUser, formDisabledDueToRateLimit, isMinimalist, isQuickTake, loading, openDialog, type]);
348
349	const hideDate = hideUnreviewedAuthorCommentsSettings.get()	×
350	const commentWillBeHidden = hideDate && new Date(hideDate) < new Date() &&	×
351	currentUser && !currentUser.isReviewed
352	const extraFormProps = {	×
353	...(isMinimalist ? {commentMinimalistStyle: true, editorHintText: "Reply..."} : {}),	×
354	...(overrideHintText ? {editorHintText: overrideHintText} : {})	×
355	}
356	const parentDocumentId = post?._id \|\| tag?._id	×
357
358	useEffect(() => {	×
359	// If disabled due to rate limit, set a timer to reenable the comment form when the rate limit expires
360	if (formDisabledDueToRateLimit && userNextAbleToComment) {	×
361	const timeLeftOnUserRateLimitMS = new Date(userNextAbleToComment).getTime() - new Date().getTime()	×
362	const timer = setTimeout(() => {	×
363	setForceRefreshState((n) => (n+1));	×
364	}, timeLeftOnUserRateLimitMS);
365
366	return () => clearTimeout(timer);	×
367	}
368	}, [userNextAbleToComment, formDisabledDueToRateLimit]);
369
370	// @ts-ignore FIXME: Not enforcing that the post-author fragment has enough fields for userIsAllowedToComment
371	if (currentUser && !userCanDo(currentUser, `posts.moderate.all`) && !userIsAllowedToComment(currentUser, prefilledProps, post?.user, !!parentComment)	×
372	) {
373	return <span>Sorry, you do not have permission to comment at this time.</span>	×
374	}
375
376	const {
377	ModerationGuidelinesBox, WrappedSmartForm, RecaptchaWarning,
378	NewCommentModerationWarning, RateLimitWarning, FormGroupQuickTakes,
379	FormGroupNoStyling,
NEW 380	} = Components;	×
UNCOV 381	return (	×
382	<div className={classNames(
383	className,
384	isMinimalist ? classes.rootMinimalist : classes.root,	×
385	{[classes.loadingRoot]: loading, [classes.rootQuickTakes]: isQuickTake}
386	)} onFocus={onFocusCommentForm}>
387	<RecaptchaWarning currentUser={currentUser}>
388	<div className={padding ? classNames({[classes.form]: !isMinimalist, [classes.formMinimalist]: isMinimalist}) : undefined}>	×
389	{formDisabledDueToRateLimit && <RateLimitWarning lastRateLimitExpiry={lastRateLimitExpiry} rateLimitMessage={rateLimitMessage} />}	×
390	<div onFocus={(ev) => {
391	afNonMemberDisplayInitialPopup(currentUser, openDialog)	×
392	ev.preventDefault()	×
393	}}>
394	<WrappedSmartForm
395	id="new-comment-form"
396	collectionName="Comments"
397	mutationFragment={getFragment(fragment)}
398	successCallback={wrappedSuccessCallback}
399	cancelCallback={wrappedCancelCallback}
400	submitCallback={(data: unknown) => {
401	setLoading(true);	×
402	commentSubmitStartTimeRef.current = Date.now()	×
403	captureEvent("wrappedSubmitCallbackStarted")	×
404	return data	×
405	}}
406	errorCallback={() => setLoading(false)}	×
407	prefilledProps={prefilledProps}
408	layout="elementOnly"
409	formComponents={{
410	FormSubmit: SubmitComponent,
411	FormGroupLayout: isQuickTake ? FormGroupQuickTakes : FormGroupNoStyling,	×
412	}}
413	alignmentForumPost={post?.af}	×
414	addFields={currentUser ? [] : ["title", "contents"]}	×
415	removeFields={removeFields}
416	formProps={{
417	formClassName: isQuickTake ? classes.quickTakesForm : '',	×
418	...extraFormProps,
419	...formProps,
420	}}
421	submitLabel={getSubmitLabel(isQuickTake)}
422	/>
423	</div>
424	</div>
425	{parentDocumentId && enableGuidelines && showGuidelines && <div className={classes.moderationGuidelinesWrapper}>	×
426	{commentWillBeHidden && <div className={classes.modNote}>	×
427	<NewCommentModerationWarning />
428	</div>}
429	<ModerationGuidelinesBox documentId={parentDocumentId} commentType={post?._id ? "post" : "subforum"} />	×
430	</div>}
431	</RecaptchaWarning>
432	</div>
433	);
434	};
435
436	const CommentsNewFormComponent = registerComponent('CommentsNewForm', CommentsNewForm, {	1✔
437	styles,
438	hocs: [withErrorBoundary]
439	});
440
441	declare global {
442	interface ComponentTypes {
443	CommentsNewForm: typeof CommentsNewFormComponent,
444	}
445	}

ForumMagnum / ForumMagnum / 8722116213

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous