Adding image upload views for admins and profiles.

package.json

@@ -60,7 +60,7 @@
     "inferno-router": "^8.2.3",
     "inferno-server": "^8.2.3",
     "jwt-decode": "^4.0.0",
-    "lemmy-js-client": "0.19.4-alpha.16",
+    "lemmy-js-client": "0.19.4-alpha.17",
     "lodash.isequal": "^4.5.0",
     "markdown-it": "^14.1.0",
     "markdown-it-bidi": "^0.1.0",

src/shared/components/common/media-uploads.tsx

@@ -0,0 +1,106 @@
+import { Component, InfernoNode, linkEvent } from "inferno";
+import { ListMediaResponse, LocalImage } from "lemmy-js-client";
+import { HttpService, I18NextService } from "../../services";
+import { PersonListing } from "../person/person-listing";
+import { tippyMixin } from "../mixins/tippy-mixin";
+import { MomentTime } from "./moment-time";
+import { PictrsImage } from "./pictrs-image";
+import { getHttpBase } from "@utils/env";
+import { toast } from "../../toast";
+
+interface Props {
+  uploads: ListMediaResponse;
+  showUploader?: boolean;
+}
+
+@tippyMixin
+export class MediaUploads extends Component<Props, any> {
+  constructor(props: any, context: any) {
+    super(props, context);
+  }
+
+  componentWillReceiveProps(
+    nextProps: Readonly<{ children?: InfernoNode } & Props>,
+  ): void {
+    if (this.props !== nextProps) {
+      this.setState({ loading: false });
+    }
+  }
+
+  render() {
+    const images = this.props.uploads.images;
+
+    return (
+      <div className="media-uploads table-responsive">
+        <table className="table">
+          <thead>
+            <tr>
+              {this.props.showUploader && (
+                <th>{I18NextService.i18n.t("uploader")}</th>
+              )}
+              <th colSpan={3}>{I18NextService.i18n.t("time")}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {images.map(i => (
+              <tr key={i.local_image.pictrs_alias}>
+                {this.props.showUploader && (
+                  <td>
+                    <PersonListing person={i.person} />
+                  </td>
+                )}
+                <td>
+                  <MomentTime published={i.local_image.published} />
+                </td>
+                <td>
+                  <PictrsImage
+                    src={buildImageUrl(i.local_image.pictrs_alias)}
+                  />
+                </td>
+                <td>{this.deleteImageBtn(i.local_image)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+
+  deleteImageBtn(image: LocalImage) {
+    return (
+      <button
+        onClick={linkEvent({ i: this, image }, this.handleDeleteImage)}
+        className="btn btn-danger"
+      >
+        {I18NextService.i18n.t("delete")}
+      </button>
+    );
+  }
+
+  async handleDeleteImage({ image }: { i: MediaUploads; image: LocalImage }) {
+    const form = {
+      token: image.pictrs_delete_token,
+      filename: image.pictrs_alias,
+    };
+    const res = await HttpService.client.deleteImage(form);
+    const filename = image.pictrs_alias;
+    if (res.state === "success") {
+      const deletePictureText = I18NextService.i18n.t("picture_deleted", {
+        filename,
+      });
+      toast(deletePictureText);
+    } else if (res.state === "failed") {
+      const failedDeletePictureText = I18NextService.i18n.t(
+        "failed_to_delete_picture",
+        {
+          filename,
+        },
+      );
+      toast(failedDeletePictureText, "danger");
+    }
+  }
+}
+
+function buildImageUrl(pictrsAlias: string): string {
+  return `${getHttpBase()}/pictrs/image/${pictrsAlias}`;
+}

src/shared/components/common/tabs.tsx

@@ -20,7 +20,7 @@ function handleSwitchTab({ ctx, tab }: { ctx: Tabs; tab: string }) {
 }
 
 export default class Tabs extends Component<TabsProps, TabsState> {
-  constructor(props: TabsProps, context) {
+  constructor(props: TabsProps, context: any) {
     super(props, context);
 
     this.state = {

src/shared/components/home/admin-settings.tsx

@@ -13,6 +13,7 @@ import {
   GetFederatedInstancesResponse,
   GetSiteResponse,
   LemmyHttp,
+  ListMediaResponse,
   PersonView,
 } from "lemmy-js-client";
 import { InitialFetchRequest } from "../../interfaces";
@@ -37,10 +38,14 @@ import { TaglineForm } from "./tagline-form";
 import { getHttpBaseInternal } from "../../utils/env";
 import { RouteComponentProps } from "inferno-router/dist/Route";
 import { IRoutePropsWithFetch } from "../../routes";
+import { MediaUploads } from "../common/media-uploads";
+import { Paginator } from "../common/paginator";
+import { snapToTop } from "@utils/browser";
 
 type AdminSettingsData = RouteDataResponse<{
   bannedRes: BannedPersonsResponse;
   instancesRes: GetFederatedInstancesResponse;
+  uploadsRes: ListMediaResponse;
 }>;
 
 interface AdminSettingsState {
@@ -50,6 +55,8 @@ interface AdminSettingsState {
   instancesRes: RequestState<GetFederatedInstancesResponse>;
   bannedRes: RequestState<BannedPersonsResponse>;
   leaveAdminTeamRes: RequestState<GetSiteResponse>;
+  uploadsRes: RequestState<ListMediaResponse>;
+  uploadsPage: number;
   loading: boolean;
   themeList: string[];
   isIsomorphic: boolean;
@@ -76,13 +83,19 @@ export class AdminSettings extends Component<
     bannedRes: EMPTY_REQUEST,
     instancesRes: EMPTY_REQUEST,
     leaveAdminTeamRes: EMPTY_REQUEST,
+    uploadsRes: EMPTY_REQUEST,
+    uploadsPage: 1,
     loading: false,
     themeList: [],
     isIsomorphic: false,
   };
 
   loadingSettled() {
-    return resourcesSettled([this.state.bannedRes, this.state.instancesRes]);
+    return resourcesSettled([
+      this.state.bannedRes,
+      this.state.instancesRes,
+      this.state.uploadsRes,
+    ]);
   }
 
   constructor(props: any, context: any) {
@@ -92,15 +105,17 @@ export class AdminSettings extends Component<
     this.handleEditEmoji = this.handleEditEmoji.bind(this);
     this.handleDeleteEmoji = this.handleDeleteEmoji.bind(this);
     this.handleCreateEmoji = this.handleCreateEmoji.bind(this);
+    this.handleUploadsPageChange = this.handleUploadsPageChange.bind(this);
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
-      const { bannedRes, instancesRes } = this.isoData.routeData;
+      const { bannedRes, instancesRes, uploadsRes } = this.isoData.routeData;
 
       this.state = {
         ...this.state,
         bannedRes,
         instancesRes,
+        uploadsRes,
         isIsomorphic: true,
       };
     }
@@ -115,6 +130,7 @@ export class AdminSettings extends Component<
     return {
       bannedRes: await client.getBannedPersons(),
       instancesRes: await client.getFederatedInstances(),
+      uploadsRes: await client.listAllMedia(),
     };
   }
 
@@ -256,6 +272,21 @@ export class AdminSettings extends Component<
                 </div>
               ),
             },
+            {
+              key: "uploads",
+              label: I18NextService.i18n.t("uploads"),
+              getNode: isSelected => (
+                <div
+                  className={classNames("tab-pane", {
+                    active: isSelected,
+                  })}
+                  role="tabpanel"
+                  id="uploads-tab-pane"
+                >
+                  {this.uploads()}
+                </div>
+              ),
+            },
           ]}
         />
       </div>
@@ -266,22 +297,34 @@ export class AdminSettings extends Component<
     this.setState({
       bannedRes: LOADING_REQUEST,
       instancesRes: LOADING_REQUEST,
+      uploadsRes: LOADING_REQUEST,
       themeList: [],
     });
 
-    const [bannedRes, instancesRes, themeList] = await Promise.all([
+    const [bannedRes, instancesRes, uploadsRes, themeList] = await Promise.all([
       HttpService.client.getBannedPersons(),
       HttpService.client.getFederatedInstances(),
+      HttpService.client.listAllMedia({
+        page: this.state.uploadsPage,
+      }),
       fetchThemeList(),
     ]);
 
     this.setState({
       bannedRes,
       instancesRes,
+      uploadsRes,
       themeList,
     });
   }
 
+  async fetchUploadsOnly() {
+    const uploadsRes = await HttpService.client.listAllMedia({
+      page: this.state.uploadsPage,
+    });
+    this.setState({ uploadsRes });
+  }
+
   admins() {
     return (
       <>
@@ -341,6 +384,30 @@ export class AdminSettings extends Component<
     }
   }
 
+  uploads() {
+    switch (this.state.uploadsRes.state) {
+      case "loading":
+        return (
+          <h5>
+            <Spinner large />
+          </h5>
+        );
+      case "success": {
+        const uploadsRes = this.state.uploadsRes.data;
+        return (
+          <div>
+            <MediaUploads showUploader uploads={uploadsRes} />
+            <Paginator
+              page={this.state.uploadsPage}
+              onChange={this.handleUploadsPageChange}
+              nextDisabled={false}
+            />
+          </div>
+        );
+      }
+    }
+  }
+
   async handleEditSite(form: EditSite) {
     this.setState({ loading: true });
 
@@ -397,4 +464,10 @@ export class AdminSettings extends Component<
       updateEmojiDataModel(res.data.custom_emoji);
     }
   }
+
+  async handleUploadsPageChange(val: number) {
+    this.setState({ uploadsPage: val });
+    snapToTop();
+    await this.fetchUploadsOnly();
+  }
 }