8817439096

Committed 24 Apr 2024 01:31PM UTC coverage: 32.047% (+0.07%) from 31.973%

Build # 8817439096

Build Type

Pull #9076

github

Committed by

oetherington

Commit Message

Fix styles for new quick take form on core topic page

Pull Request Pull Request #9076: EA Quick takes autosave

Run Details

4693 of 38074 branches covered (12.33%)

Branch coverage included in aggregate %.

13 of 26 new or added lines in 7 files covered. (50.0%)

5 existing lines in 2 files now uncovered.

27199 of 61441 relevant lines covered (44.27%)

181.97 hits per line

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

13.23

/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) => ({
  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,
    },
  },
  quickTakesSubmitButtonAtBottom: isFriendlyUI
    ? {
      "& .form-component-EditorFormComponent": {
        background: "transparent",
        borderRadius: theme.borderRadius.quickTakesEntry,
      },
      "& .form-input": {
        padding: "0 20px",
      },
    }
    : {},
  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,
  },
  submitQuickTakesButtonAtBottom: isFriendlyUI
    ? {
      marginTop: 20,
      padding: 20,
      borderTop: `1px solid ${theme.palette.grey[300]}`,
    }
    : {},
  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,
  quickTakesSubmitButtonAtBottom?: boolean,
  className?: string,
  classes: ClassesType<typeof styles>,
}

const CommentsNewForm = ({
  prefilledProps={},
  post,
  tag,
  tagCommentType="DISCUSSION",
  parentComment,
  successCallback,
  type,
  cancelCallback,
  removeFields,
  fragment="CommentsList",
  formProps,
  enableGuidelines=true,
  padding=true,
  formStyle="default",
  overrideHintText,
  quickTakesSubmitButtonAtBottom,
  className,
  classes,
}: 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 && !(quickTakesSubmitButtonAtBottom && isFriendlyUI),
      [classes.submitQuickTakesButtonAtBottom]: isQuickTake && quickTakesSubmitButtonAtBottom,
    })}>
      {(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, quickTakesSubmitButtonAtBottom]);

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

ForumMagnum / ForumMagnum / 8817439096

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