11079890874

Committed 28 Sep 2024 01:24AM UTC coverage: 31.86% (+0.03%) from 31.833%

Build # 11079890874

Build Type

Pull #9721

github

Committed by

b0b3rt

Commit Message

avoid loading states when autosaving new post and redirecting to edit form

Pull Request Pull Request #9721: Llm chat post drafts

Run Details

5073 of 41376 branches covered (12.26%)

Branch coverage included in aggregate %.

27 of 137 new or added lines in 17 files covered. (19.71%)

16 existing lines in 5 files now uncovered.

29453 of 66991 relevant lines covered (43.97%)

184.18 hits per line

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

14.38

/packages/lesswrong/components/posts/PostsEditForm.tsx

import React, { useEffect, useRef, useState } from 'react';
import { Components, registerComponent, getFragment } from '../../lib/vulcan-lib';
import { useSingle } from '../../lib/crud/withSingle';
import { useMessages } from '../common/withMessages';
import { postGetPageUrl, postGetEditUrl, getPostCollaborateUrl, isNotHostedHere, canUserEditPostMetadata } from '../../lib/collections/posts/helpers';
import { useLocation } from '../../lib/routeUtil'
import { styles } from './PostsNewForm';
import { useDialog } from "../common/withDialog";
import {useCurrentUser} from "../common/withUser";
import { useUpdate } from "../../lib/crud/withUpdate";
import { afNonMemberSuccessHandling } from "../../lib/alignment-forum/displayAFNonMemberPopups";
import type { SubmitToFrontpageCheckboxProps } from './SubmitToFrontpageCheckbox';
import type { PostSubmitProps } from './PostSubmit';
import { userIsPodcaster } from '../../lib/vulcan-users/permissions';
import { SHARE_POPUP_QUERY_PARAM } from './PostsPage/PostsPage';
import { isEAForum } from '../../lib/instanceSettings';
import type { Editor } from '@ckeditor/ckeditor5-core';
import { useNavigate } from '../../lib/reactRouterWrapper';
import { preferredHeadingCase } from '../../themes/forumTheme';
import DeferRender from '../common/DeferRender';
import { useSingleWithPreload } from '@/lib/crud/useSingleWithPreload';

const editor: Editor | null = null
export const EditorContext = React.createContext<[Editor | null, (e: Editor) => void]>([editor, _ => {}]);

function getDraftLabel(post: PostsPage | null) {
  if (!post) return "Save Draft";
  if (!post.draft) return "Move to Drafts";
  return "Save Draft";
}

const PostsEditForm = ({ documentId, version, classes }: {
  documentId: string,
  version?: string | null,
  classes: ClassesType,
}) => {
  const { WrappedSmartForm, PostSubmit, SubmitToFrontpageCheckbox, HeadTags, ForeignCrosspostEditForm, DialogueSubmit, RateLimitWarning, DynamicTableOfContents } = Components

  const { query, params } = useLocation();
  const navigate = useNavigate();
  const { flash } = useMessages();
  const { openDialog } = useDialog();
  const currentUser = useCurrentUser();

  const [editorState, setEditorState] = useState<Editor | null>(editor);

  const { bestResult: document, fetchedResult: { loading } } = useSingleWithPreload({
    documentId,
    collectionName: "Posts",
    fragmentName: 'PostsPage',
    preloadFragmentName: 'PostsPage',
  });

  const { document: userWithRateLimit } = useSingle({
    documentId: currentUser?._id,
    collectionName: "Users",
    fragmentName: "UsersCurrentPostRateLimit",
    skip: !currentUser,
    extraVariables: { eventForm: 'Boolean' },
    extraVariablesValues: { eventForm: document?.isEvent }
  });

  const { mutate: updatePost } = useUpdate({
    collectionName: "Posts",
    fragmentName: 'SuggestAlignmentPost',
  });

  const saveDraftLabel = getDraftLabel(document);

  // If we've been redirected from PostsNewForm because of the post being autosaved, have the WrappedSmartForm try to fetch from the apollo cache first, since we should have prefetched to hydrate it before redirecting.
  const editFormFetchPolicy = query.autosaveRedirect ? 'cache-first' : undefined;

  const rateLimitNextAbleToPost = userWithRateLimit?.rateLimitNextAbleToPost;

  const isDraft = document && document.draft;
  const wasEverDraft = useRef(isDraft);

  useEffect(() => {
    if (wasEverDraft.current === undefined && isDraft !== undefined) {
      wasEverDraft.current = isDraft;
    }
  }, [isDraft]);
  
  if (!document && loading) {
    return <Components.Loading/>
  }

  // If we only have read access to this post, but it's shared with us,
  // redirect to the collaborative editor.
  if (document && !canUserEditPostMetadata(currentUser, document) && !userIsPodcaster(currentUser)) {
    return <Components.PermanentRedirect url={getPostCollaborateUrl(documentId, false, query.key)} status={302}/>
  }
  
  // If we don't have access at all but a link-sharing key was provided, redirect to the
  // collaborative editor
  if (!document && !loading && query?.key) {
    return <Components.PermanentRedirect url={getPostCollaborateUrl(documentId, false, query.key)} status={302}/>
  }
  
  // If the post has a link-sharing key which is not in the URL, redirect to add
  // the link-sharing key to the URL. (linkSharingKey has field-level
  // permissions so it will only be present if we've either already used the
  // link-sharing key, or have access through something other than link-sharing.)
  if (document?.linkSharingKey && !(query?.key)) {
    return <Components.PermanentRedirect url={postGetEditUrl(document._id, false, document.linkSharingKey)} status={302}/>
  }
  
  // If we don't have the post and none of the earlier cases applied, we either
  // have an invalid post ID or the post is a draft that we don't have access
  // to.
  if (!document) {
    return <Components.Error404/>
  }

  if (isNotHostedHere(document)) {
    return <ForeignCrosspostEditForm post={document} />;
  }
  
  const EditPostsSubmit = (props: SubmitToFrontpageCheckboxProps & PostSubmitProps) => {
    return <div className={classes.formSubmit}>
      {!document.isEvent && <SubmitToFrontpageCheckbox {...props} />}
      <PostSubmit
        saveDraftLabel={saveDraftLabel}
        feedbackLabel={"Get Feedback"}
        {...props}
      />
    </div>
  }

  return (
    <DynamicTableOfContents title={document.title}>
      <div className={classes.postForm}>
        <HeadTags title={document.title} />
        {currentUser && <Components.PostsAcceptTos currentUser={currentUser} />}
        {rateLimitNextAbleToPost && <RateLimitWarning lastRateLimitExpiry={rateLimitNextAbleToPost.nextEligible} rateLimitMessage={rateLimitNextAbleToPost.rateLimitMessage}  />}
        <DeferRender ssr={false}>
          <EditorContext.Provider value={[editorState, setEditorState]}>
            <WrappedSmartForm
              collectionName="Posts"
              documentId={documentId}
              queryFragment={getFragment('PostsEditQueryFragment')}
              mutationFragment={getFragment('PostsEditMutationFragment')}
              successCallback={(post: any, options: any) => {
                const alreadySubmittedToAF = post.suggestForAlignmentUserIds && post.suggestForAlignmentUserIds.includes(post.userId)
                if (!post.draft && !alreadySubmittedToAF) afNonMemberSuccessHandling({currentUser, document: post, openDialog, updateDocument: updatePost})
                if (options?.submitOptions?.redirectToEditor) {
                  navigate(postGetEditUrl(post._id, false, post.linkSharingKey));
                } else {
                  // If they are publishing a draft, show the share popup
                  // Note: we can't use isDraft here because it gets updated to true when they click "Publish"
                  const showSharePopup = isEAForum && wasEverDraft.current && !post.draft
                  const sharePostQuery = `?${SHARE_POPUP_QUERY_PARAM}=true`
                  navigate({pathname: postGetPageUrl(post), search: showSharePopup ? sharePostQuery : ''})

                  if (!showSharePopup) {
                    flash({ messageString: `Post "${post.title}" edited`, type: 'success'});
                  }
                }
              }}
              eventForm={document.isEvent}
              removeSuccessCallback={({ documentId, documentTitle }: { documentId: string; documentTitle: string; }) => {
                // post edit form is being included from a single post, redirect to index
                // note: this.props.params is in the worst case an empty obj (from react-router)
                if (params._id) {
                  navigate('/');
                }

                flash({ messageString: `Post "${documentTitle}" deleted.`, type: 'success'});
                // todo: handle events in collection callbacks
                // this.context.events.track("post deleted", {_id: documentId});
              }}
              showRemove={true}
              collabEditorDialogue={!!document.collabEditorDialogue}
              submitLabel={preferredHeadingCase(isDraft ? "Publish" : "Publish Changes")}
              formComponents={{FormSubmit: !!document.collabEditorDialogue ? DialogueSubmit : EditPostsSubmit}}
              extraVariables={{
                version: 'String'
              }}
              extraVariablesValues={{
                version: version ?? 'draft'
              }}
              noSubmitOnCmdEnter
              repeatErrors
              
              /*
              * addFields includes tagRelevance because the field permissions on
              * the schema say the user can't edit this field, but the widget
              * "edits" the tag list via indirect operations (upvoting/downvoting
              * relevance scores).
              */
              addFields={(document.isEvent || !!document.collabEditorDialogue) ? [] : ['tagRelevance']}

              editFormFetchPolicy={editFormFetchPolicy}
            />
          </EditorContext.Provider>
        </DeferRender>
      </div>
    </DynamicTableOfContents>
  );
}

const PostsEditFormComponent = registerComponent('PostsEditForm', PostsEditForm, {styles});

declare global {
  interface ComponentTypes {
    PostsEditForm: typeof PostsEditFormComponent
  }
}

1	import React, { useEffect, useRef, useState } from 'react';	3✔
2	import { Components, registerComponent, getFragment } from '../../lib/vulcan-lib';	1✔
3	import { useSingle } from '../../lib/crud/withSingle';	1✔
4	import { useMessages } from '../common/withMessages';	1✔
5	import { postGetPageUrl, postGetEditUrl, getPostCollaborateUrl, isNotHostedHere, canUserEditPostMetadata } from '../../lib/collections/posts/helpers';	1✔
6	import { useLocation } from '../../lib/routeUtil'	1✔
7	import { styles } from './PostsNewForm';	1✔
8	import { useDialog } from "../common/withDialog";	1✔
9	import {useCurrentUser} from "../common/withUser";	1✔
10	import { useUpdate } from "../../lib/crud/withUpdate";	1✔
11	import { afNonMemberSuccessHandling } from "../../lib/alignment-forum/displayAFNonMemberPopups";	1✔
12	import type { SubmitToFrontpageCheckboxProps } from './SubmitToFrontpageCheckbox';
13	import type { PostSubmitProps } from './PostSubmit';
14	import { userIsPodcaster } from '../../lib/vulcan-users/permissions';	1✔
15	import { SHARE_POPUP_QUERY_PARAM } from './PostsPage/PostsPage';	1✔
16	import { isEAForum } from '../../lib/instanceSettings';	1✔
17	import type { Editor } from '@ckeditor/ckeditor5-core';
18	import { useNavigate } from '../../lib/reactRouterWrapper';	1✔
19	import { preferredHeadingCase } from '../../themes/forumTheme';	1✔
20	import DeferRender from '../common/DeferRender';	1✔
21	import { useSingleWithPreload } from '@/lib/crud/useSingleWithPreload';	1✔
22
23	const editor: Editor \| null = null	1✔
24	export const EditorContext = React.createContext<[Editor \| null, (e: Editor) => void]>([editor, _ => {}]);	1✔
25
26	function getDraftLabel(post: PostsPage \| null) {
NEW 27	if (!post) return "Save Draft";	×
NEW 28	if (!post.draft) return "Move to Drafts";	×
NEW 29	return "Save Draft";	×
30	}
31
32	const PostsEditForm = ({ documentId, version, classes }: {	1✔
33	documentId: string,
34	version?: string \| null,
35	classes: ClassesType,
36	}) => {
NEW 37	const { WrappedSmartForm, PostSubmit, SubmitToFrontpageCheckbox, HeadTags, ForeignCrosspostEditForm, DialogueSubmit, RateLimitWarning, DynamicTableOfContents } = Components	×
38
39	const { query, params } = useLocation();	×
40	const navigate = useNavigate();	×
41	const { flash } = useMessages();	×
42	const { openDialog } = useDialog();	×
UNCOV 43	const currentUser = useCurrentUser();	×
44
NEW 45	const [editorState, setEditorState] = useState<Editor \| null>(editor);	×
46
NEW 47	const { bestResult: document, fetchedResult: { loading } } = useSingleWithPreload({	×
48	documentId,
49	collectionName: "Posts",
50	fragmentName: 'PostsPage',
51	preloadFragmentName: 'PostsPage',
52	});
53
NEW 54	const { document: userWithRateLimit } = useSingle({	×
55	documentId: currentUser?._id,	×
56	collectionName: "Users",
57	fragmentName: "UsersCurrentPostRateLimit",
58	skip: !currentUser,
59	extraVariables: { eventForm: 'Boolean' },
60	extraVariablesValues: { eventForm: document?.isEvent }	×
61	});
62
NEW 63	const { mutate: updatePost } = useUpdate({	×
64	collectionName: "Posts",
65	fragmentName: 'SuggestAlignmentPost',
66	});
67
NEW 68	const saveDraftLabel = getDraftLabel(document);	×
69
70	// If we've been redirected from PostsNewForm because of the post being autosaved, have the WrappedSmartForm try to fetch from the apollo cache first, since we should have prefetched to hydrate it before redirecting.
NEW 71	const editFormFetchPolicy = query.autosaveRedirect ? 'cache-first' : undefined;	×
72
NEW 73	const rateLimitNextAbleToPost = userWithRateLimit?.rateLimitNextAbleToPost;	×
74
NEW 75	const isDraft = document && document.draft;	×
NEW 76	const wasEverDraft = useRef(isDraft);	×
77
NEW 78	useEffect(() => {	×
NEW 79	if (wasEverDraft.current === undefined && isDraft !== undefined) {	×
NEW 80	wasEverDraft.current = isDraft;	×
81	}
82	}, [isDraft]);
83
84	if (!document && loading) {	×
85	return <Components.Loading/>	×
86	}
87
88	// If we only have read access to this post, but it's shared with us,
89	// redirect to the collaborative editor.
90	if (document && !canUserEditPostMetadata(currentUser, document) && !userIsPodcaster(currentUser)) {	×
91	return <Components.PermanentRedirect url={getPostCollaborateUrl(documentId, false, query.key)} status={302}/>	×
92	}
93
94	// If we don't have access at all but a link-sharing key was provided, redirect to the
95	// collaborative editor
96	if (!document && !loading && query?.key) {	×
97	return <Components.PermanentRedirect url={getPostCollaborateUrl(documentId, false, query.key)} status={302}/>	×
98	}
99
100	// If the post has a link-sharing key which is not in the URL, redirect to add
101	// the link-sharing key to the URL. (linkSharingKey has field-level
102	// permissions so it will only be present if we've either already used the
103	// link-sharing key, or have access through something other than link-sharing.)
104	if (document?.linkSharingKey && !(query?.key)) {	×
105	return <Components.PermanentRedirect url={postGetEditUrl(document._id, false, document.linkSharingKey)} status={302}/>	×
106	}
107
108	// If we don't have the post and none of the earlier cases applied, we either
109	// have an invalid post ID or the post is a draft that we don't have access
110	// to.
111	if (!document) {	×
112	return <Components.Error404/>	×
113	}
114
115	if (isNotHostedHere(document)) {	×
116	return <ForeignCrosspostEditForm post={document} />;	×
117	}
118
119	const EditPostsSubmit = (props: SubmitToFrontpageCheckboxProps & PostSubmitProps) => {	×
120	return <div className={classes.formSubmit}>	×
121	{!document.isEvent && <SubmitToFrontpageCheckbox {...props} />}	×
122	<PostSubmit
123	saveDraftLabel={saveDraftLabel}
124	feedbackLabel={"Get Feedback"}
125	{...props}
126	/>
127	</div>
128	}
129
130	return (	×
131	<DynamicTableOfContents title={document.title}>
132	<div className={classes.postForm}>
133	<HeadTags title={document.title} />
134	{currentUser && <Components.PostsAcceptTos currentUser={currentUser} />}	×
135	{rateLimitNextAbleToPost && <RateLimitWarning lastRateLimitExpiry={rateLimitNextAbleToPost.nextEligible} rateLimitMessage={rateLimitNextAbleToPost.rateLimitMessage} />}	×
136	<DeferRender ssr={false}>
137	<EditorContext.Provider value={[editorState, setEditorState]}>
138	<WrappedSmartForm
139	collectionName="Posts"
140	documentId={documentId}
141	queryFragment={getFragment('PostsEditQueryFragment')}
142	mutationFragment={getFragment('PostsEditMutationFragment')}
143	successCallback={(post: any, options: any) => {
144	const alreadySubmittedToAF = post.suggestForAlignmentUserIds && post.suggestForAlignmentUserIds.includes(post.userId)	×
145	if (!post.draft && !alreadySubmittedToAF) afNonMemberSuccessHandling({currentUser, document: post, openDialog, updateDocument: updatePost})	×
146	if (options?.submitOptions?.redirectToEditor) {	×
147	navigate(postGetEditUrl(post._id, false, post.linkSharingKey));	×
148	} else {
149	// If they are publishing a draft, show the share popup
150	// Note: we can't use isDraft here because it gets updated to true when they click "Publish"
151	const showSharePopup = isEAForum && wasEverDraft.current && !post.draft	×
152	const sharePostQuery = `?${SHARE_POPUP_QUERY_PARAM}=true`	×
153	navigate({pathname: postGetPageUrl(post), search: showSharePopup ? sharePostQuery : ''})	×
154
155	if (!showSharePopup) {	×
156	flash({ messageString: `Post "${post.title}" edited`, type: 'success'});	×
157	}
158	}
159	}}
160	eventForm={document.isEvent}
161	removeSuccessCallback={({ documentId, documentTitle }: { documentId: string; documentTitle: string; }) => {
162	// post edit form is being included from a single post, redirect to index
163	// note: this.props.params is in the worst case an empty obj (from react-router)
164	if (params._id) {	×
165	navigate('/');	×
166	}
167
168	flash({ messageString: `Post "${documentTitle}" deleted.`, type: 'success'});	×
169	// todo: handle events in collection callbacks
170	// this.context.events.track("post deleted", {_id: documentId});
171	}}
172	showRemove={true}
173	collabEditorDialogue={!!document.collabEditorDialogue}
174	submitLabel={preferredHeadingCase(isDraft ? "Publish" : "Publish Changes")}	×
175	formComponents={{FormSubmit: !!document.collabEditorDialogue ? DialogueSubmit : EditPostsSubmit}}	×
176	extraVariables={{
177	version: 'String'
178	}}
179	extraVariablesValues={{
180	version: version ?? 'draft'	×
181	}}
182	noSubmitOnCmdEnter
183	repeatErrors
184
185	/*
186	* addFields includes tagRelevance because the field permissions on
187	* the schema say the user can't edit this field, but the widget
188	* "edits" the tag list via indirect operations (upvoting/downvoting
189	* relevance scores).
190	*/
191	addFields={(document.isEvent \|\| !!document.collabEditorDialogue) ? [] : ['tagRelevance']}	×
192
193	editFormFetchPolicy={editFormFetchPolicy}
194	/>
195	</EditorContext.Provider>
196	</DeferRender>
197	</div>
198	</DynamicTableOfContents>
199	);
200	}
201
202	const PostsEditFormComponent = registerComponent('PostsEditForm', PostsEditForm, {styles});	1✔
203
204	declare global {
205	interface ComponentTypes {
206	PostsEditForm: typeof PostsEditFormComponent
207	}
208	}

ForumMagnum / ForumMagnum / 11079890874

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