Adding option types 2 (#689)

* Not working, because of wrong API types.

* Adding Rust-style Result and Option types.

- Fixes #646

* Updating to use new lemmy-js-client with Options.

src/shared/components/common/image-upload-form.tsx

@@ -1,3 +1,4 @@
+import { Option } from "@sniptt/monads";
 import { Component, linkEvent } from "inferno";
 import { pictrsUri } from "../../env";
 import { i18n } from "../../i18next";
@@ -7,7 +8,7 @@ import { Icon } from "./icon";
 
 interface ImageUploadFormProps {
   uploadTitle: string;
-  imageSrc: string;
+  imageSrc: Option<string>;
   onUpload(url: string): any;
   onRemove(): any;
   rounded?: boolean;
@@ -38,26 +39,29 @@ export class ImageUploadForm extends Component<
           htmlFor={this.id}
           class="pointer text-muted small font-weight-bold"
         >
-          {!this.props.imageSrc ? (
-            <span class="btn btn-secondary">{this.props.uploadTitle}</span>
-          ) : (
-            <span class="d-inline-block position-relative">
-              <img
-                src={this.props.imageSrc}
-                height={this.props.rounded ? 60 : ""}
-                width={this.props.rounded ? 60 : ""}
-                className={`img-fluid ${
-                  this.props.rounded ? "rounded-circle" : ""
-                }`}
-              />
-              <a
-                onClick={linkEvent(this, this.handleRemoveImage)}
-                aria-label={i18n.t("remove")}
-              >
-                <Icon icon="x" classes="mini-overlay" />
-              </a>
-            </span>
-          )}
+          {this.props.imageSrc.match({
+            some: imageSrc => (
+              <span class="d-inline-block position-relative">
+                <img
+                  src={imageSrc}
+                  height={this.props.rounded ? 60 : ""}
+                  width={this.props.rounded ? 60 : ""}
+                  className={`img-fluid ${
+                    this.props.rounded ? "rounded-circle" : ""
+                  }`}
+                />
+                <a
+                  onClick={linkEvent(this, this.handleRemoveImage)}
+                  aria-label={i18n.t("remove")}
+                >
+                  <Icon icon="x" classes="mini-overlay" />
+                </a>
+              </span>
+            ),
+            none: (
+              <span class="btn btn-secondary">{this.props.uploadTitle}</span>
+            ),
+          })}
         </label>
         <input
           id={this.id}
@@ -65,7 +69,7 @@ export class ImageUploadForm extends Component<
           accept="image/*,video/*"
           name={this.id}
           class="d-none"
-          disabled={!UserService.Instance.myUserInfo}
+          disabled={UserService.Instance.myUserInfo.isNone()}
           onChange={linkEvent(this, this.handleImageUpload)}
         />
       </form>