Use http client (#1081)

* Beginning work on websocket -> http client conversion.

* About 30% done.

* half done.

* more done.

* Almost passing lint.

* Passing lint, but untested.

* Add back in event listeners.

* Fixing some community forms.

* Remove webpack cache.

* fixing some more.

* Fixed ISOwrappers.

* A few more fixes.

* Refactor utils

* Fix instance add/remove buttons

* Not catching errors in isoWrapper.

* Wrap Http client

* Fixing up tagline and ratelimit forms.

* Make all http client wrapping be in one place

* Reworking some more forms.

* Upgrading lemmy-js-client.

* Fixing verify email.

* Fix linting errors

* Upgrading woodpecker node.

* Fix comment scrolling rerender bug.

* Fixing a few things, commenting out props for now.

* v0.18.0-beta.1

* Trying to fix woodpecker, 1.

* Trying to fix woodpecker, 2.

* Handroll prompt

* Add navigation prompt to other pages

* Fix prompt navigation bug

* Fix prompt bug introduced from last bug fix

* Fix PWA bug

* Fix isoData not working

* Fix search page update url

* Fix sharp issue.

* v0.18.0-beta.2

* Make create post pre-fetch communities

* Fix bug from last commit

* Fix issue of posts/comments not being switched when changing select options

* Fix unnecessary fetches on home screen

* Make circular icon buttons not look stupid

* Prevent unnecessary fetches

* Make login experience smoother

* Add PWA shortcuts

* Add related application to PWA

* Update translations

* Forgot to add post editing.

* Fixing site setup.

* Deploy script setup.

* v0.18.0-beta.4

* Sanitize again.

* Adding sanitize json function.

* Upping version.

* Another sanitize fix.

* Upping version.

* Prevent search nav item from disappearing when on search page

* Allow admin and mod actions on non-local comments.

* Fix mobile menu collapse bug

* Completely fix prompt component

* Fix undefined value checks in use_http_client_2 (#1230)

* fix: filter out undefined from posts

* fix: emoji initialisation passing undefined

* fix: || => ?? to be more explicit

* linting

---------

Co-authored-by: Alex Maras <alexmaras@gmail.com>

* Re-add accidentally removed state

* Fix dropdown bug

* Use linkEvent where appropriate

* Fix navigation warnings.

---------

Co-authored-by: Dessalines <tyhou13@gmx.com>
Co-authored-by: Alex Maras <dev@alexmaras.com>
Co-authored-by: Alex Maras <alexmaras@gmail.com>

src/shared/components/common/markdown-textarea.tsx

@@ -3,7 +3,7 @@ import { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent } from "inferno";
 import { Language } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { UserService } from "../../services";
+import { HttpService, UserService } from "../../services";
 import {
   concurrentImageUpload,
   customEmojisLookup,
@@ -19,7 +19,6 @@ import {
   setupTippy,
   setupTribute,
   toast,
-  uploadImage,
 } from "../../utils";
 import { EmojiPicker } from "./emoji-picker";
 import { Icon, Spinner } from "./icon";
@@ -39,9 +38,9 @@ interface MarkdownTextAreaProps {
   finished?: boolean;
   showLanguage?: boolean;
   hideNavigationWarnings?: boolean;
-  onContentChange?(val: string): any;
-  onReplyCancel?(): any;
-  onSubmit?(msg: { val?: string; formId: string; languageId?: number }): any;
+  onContentChange?(val: string): void;
+  onReplyCancel?(): void;
+  onSubmit?(content: string, formId: string, languageId?: number): void;
   allLanguages: Language[]; // TODO should probably be nullable
   siteLanguages: number[]; // TODO same
 }
@@ -55,8 +54,9 @@ interface MarkdownTextAreaState {
   content?: string;
   languageId?: number;
   previewMode: boolean;
-  loading: boolean;
   imageUploadStatus?: ImageUploadStatus;
+  loading: boolean;
+  submitted: boolean;
 }
 
 export class MarkdownTextArea extends Component<
@@ -72,6 +72,7 @@ export class MarkdownTextArea extends Component<
     languageId: this.props.initialLanguageId,
     previewMode: false,
     loading: false,
+    submitted: false,
   };
 
   constructor(props: any, context: any) {
@@ -105,17 +106,14 @@ export class MarkdownTextArea extends Component<
     }
   }
 
-  componentDidUpdate() {
-    if (!this.props.hideNavigationWarnings && this.state.content) {
-      window.onbeforeunload = () => true;
-    } else {
-      window.onbeforeunload = null;
-    }
-  }
-
   componentWillReceiveProps(nextProps: MarkdownTextAreaProps) {
     if (nextProps.finished) {
-      this.setState({ previewMode: false, loading: false, content: undefined });
+      this.setState({
+        previewMode: false,
+        imageUploadStatus: undefined,
+        loading: false,
+        content: undefined,
+      });
       if (this.props.replyType) {
         this.props.onReplyCancel?.();
       }
@@ -127,16 +125,23 @@ export class MarkdownTextArea extends Component<
     }
   }
 
-  componentWillUnmount() {
-    window.onbeforeunload = null;
-  }
-
   render() {
     const languageId = this.state.languageId;
 
+    // TODO add these prompts back in at some point
+    // <Prompt
+    //   when={!this.props.hideNavigationWarnings && this.state.content}
+    //   message={i18n.t("block_leaving")}
+    // />
     return (
       <form id={this.formId} onSubmit={linkEvent(this, this.handleSubmit)}>
-        <NavigationPrompt when={!!this.state.content} />
+        <NavigationPrompt
+          when={
+            !this.props.hideNavigationWarnings &&
+            !!this.state.content &&
+            !this.state.submitted
+          }
+        />
         <div className="form-group row">
           <div className={`col-sm-12`}>
             <textarea
@@ -390,29 +395,29 @@ export class MarkdownTextArea extends Component<
     }
   }
 
-  async uploadSingleImage(i: MarkdownTextArea, file: File) {
-    try {
-      const res = await uploadImage(file);
-      console.log("pictrs upload:");
-      console.log(res);
-      if (res.msg === "ok") {
-        const imageMarkdown = `![](${res.url})`;
+  async uploadSingleImage(i: MarkdownTextArea, image: File) {
+    const res = await HttpService.client.uploadImage({ image });
+    console.log("pictrs upload:");
+    console.log(res);
+    if (res.state === "success") {
+      if (res.data.msg === "ok") {
+        const imageMarkdown = `![](${res.data.url})`;
         i.setState(({ content }) => ({
           content: content ? `${content}\n${imageMarkdown}` : imageMarkdown,
         }));
         i.contentChange();
         const textarea: any = document.getElementById(i.id);
         autosize.update(textarea);
-        pictrsDeleteToast(file.name, res.delete_url as string);
+        pictrsDeleteToast(image.name, res.data.delete_url as string);
       } else {
-        throw JSON.stringify(res);
+        throw JSON.stringify(res.data);
       }
-    } catch (error) {
+    } else if (res.state === "failed") {
       i.setState({ imageUploadStatus: undefined });
-      console.error(error);
-      toast(error, "danger");
+      console.error(res.msg);
+      toast(res.msg, "danger");
 
-      throw error;
+      throw res.msg;
     }
   }
 
@@ -486,13 +491,10 @@ export class MarkdownTextArea extends Component<
 
   handleSubmit(i: MarkdownTextArea, event: any) {
     event.preventDefault();
-    i.setState({ loading: true });
-    const msg = {
-      val: i.state.content,
-      formId: i.formId,
-      languageId: i.state.languageId,
-    };
-    i.props.onSubmit?.(msg);
+    if (i.state.content) {
+      i.setState({ loading: true, submitted: true });
+      i.props.onSubmit?.(i.state.content, i.formId, i.state.languageId);
+    }
   }
 
   handleReplyCancel(i: MarkdownTextArea) {