duplicated upload button; old discussion-f route

yuanzhongqiao · Jun 6, 2022 · 57f0c5e · 57f0c5e
1 parent 2622ff2
commit 57f0c5e
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 15 deletions.
diff --git a/saas/app/components/discussions/CreateDiscussionForm.tsx b/saas/app/components/discussions/CreateDiscussionForm.tsx
@@ -132,9 +132,10 @@ class CreateDiscussionForm extends React.Component<Props, State> {
               <p />
               <PostEditor
                 content={this.state.content}
-                onChanged={(content) => this.setState({ content })}
+                onChanged={this.onContentChanged}
                 members={Array.from(store.currentTeam.members.values())}
                 store={store}
+                parentComponent="CDF"
               />
               <p />
               <div>
@@ -181,6 +182,11 @@ class CreateDiscussionForm extends React.Component<Props, State> {
     this.props.onClose();
   };
 
+  private onContentChanged = (content: string) => {
+    console.log('onContentChanged', content);
+    this.setState({ content });
+  };
+
   private onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 

diff --git a/saas/app/components/discussions/DiscussionListItem.tsx b/saas/app/components/discussions/DiscussionListItem.tsx
@@ -45,7 +45,7 @@ class DiscussionListItem extends React.Component<Props> {
         <li key={discussion._id} style={{ whiteSpace: 'nowrap', paddingRight: '10px' }}>
           <Link
             scroll={false}
-            href={`/discussion-f?teamSlug=${team.slug}&discussionSlug=${discussion.slug}`}
+            href={`/discussion?teamSlug=${team.slug}&discussionSlug=${discussion.slug}`}
             as={`/teams/${team.slug}/discussions/${discussion.slug}`}
           >
             <a

diff --git a/saas/app/components/posts/PostEditor.tsx b/saas/app/components/posts/PostEditor.tsx
@@ -43,6 +43,7 @@ type Props = {
   members: User[];
   textareaHeight?: string;
   placeholder?: string;
+  parentComponent: string;
 };
 
 type State = { htmlContent: string };
@@ -58,7 +59,7 @@ class PostEditor extends React.Component<Props, State> {
 
   public render() {
     const { htmlContent } = this.state;
-    const { content, members, store } = this.props;
+    const { content, members, store, parentComponent } = this.props;
     const { currentUser } = store;
 
     const membersMinusCurrentUser = members.filter((member) => member._id !== currentUser._id);
@@ -86,21 +87,21 @@ class PostEditor extends React.Component<Props, State> {
         </div>
 
         <div style={{ display: 'inline', float: 'left' }}>
-          <label htmlFor="upload-file-post-editor">
+          <label htmlFor={'upload-file-post-editor-' + parentComponent}>
             <Button component="span" style={{ color: '#58a6ff' }}>
               <InsertPhotoIcon style={{ fontSize: '22px' }} />
             </Button>
           </label>
           <input
             accept="image/*"
-            name="upload-file-post-editor"
-            id="upload-file-post-editor"
+            name={'upload-file-post-editor-' + parentComponent}
+            id={'upload-file-post-editor-' + parentComponent}
             type="file"
             style={{ display: 'none' }}
-            onChange={(event) => {
+            onChange={async (event) => {
               const file = event.target.files[0];
+              await this.uploadFile(file);
               event.target.value = '';
-              this.uploadFile(file);
             }}
           />
         </div>
@@ -257,7 +258,7 @@ class PostEditor extends React.Component<Props, State> {
         bucket,
       });
 
-      let imageMarkdown;
+      let fileHtmlOrMarkdown;
       let fileUrl;
 
       if (file.type.startsWith('image/')) {
@@ -275,7 +276,7 @@ class PostEditor extends React.Component<Props, State> {
 
         const finalWidth = width > 768 ? '100%' : `${width}px`;
 
-        imageMarkdown = `
+        fileHtmlOrMarkdown = `
           <div>
             <img style="max-width: ${finalWidth}; width:100%" src="${fileUrl}" alt="Async" class="s3-image" />
           </div>`;
@@ -286,14 +287,13 @@ class PostEditor extends React.Component<Props, State> {
         );
 
         fileUrl = responseFromApiServerForUpload.url;
-        imageMarkdown = `[${file.name}](${fileUrl})`;
+        fileHtmlOrMarkdown = `[${file.name}](${fileUrl})`;
       }
 
-      const content = `${this.props.content}\n${imageMarkdown.replace(/\s+/g, ' ')}`;
+      const content = `${this.props.content}\n${fileHtmlOrMarkdown.replace(/\s+/g, ' ')}`;
 
       this.props.onChanged(content);
 
-      NProgress.done();
       notify('You successfully uploaded file.');
     } catch (error) {
       console.log(error);

diff --git a/saas/app/components/posts/PostForm.tsx b/saas/app/components/posts/PostForm.tsx
@@ -110,6 +110,7 @@ class PostForm extends React.Component<Props, State> {
             members={members}
             store={store}
             textareaHeight="100%"
+            parentComponent="PF"
           />
           <p />
           <div style={{ margin: '20px 0px' }}>

diff --git a/saas/app/pages/discussion.tsx b/saas/app/pages/discussion.tsx
@@ -112,8 +112,8 @@ function DiscussionPageCompFunctional({
 
     if (!slug && currentTeam.discussions.length > 0) {
       Router.replace(
-        `/discussion-f?teamSlug=${teamSlug}&discussionSlug=${currentTeam.orderedDiscussions[0].slug}`,
-        `/teams/${teamSlug}/discussions-f/${currentTeam.orderedDiscussions[0].slug}`,
+        `/discussion?teamSlug=${teamSlug}&discussionSlug=${currentTeam.orderedDiscussions[0].slug}`,
+        `/teams/${teamSlug}/discussions/${currentTeam.orderedDiscussions[0].slug}`,
       );
       return;
     }