fix(client): Media Center Filters should rerender Gallery

Author: Marius Ostheimer

client/src/Media/Gallery.tsx

@@ -68,7 +68,12 @@ export default class Gallery extends Component<Props> {
         (mediaFilter.maxHeight && mediaFilter.maxHeight < media.height) ||
         (mediaFilter.minHeight && mediaFilter.minHeight > media.height));
     return (
-      <CellMeasurer cache={this.cache} index={index} key={media.id} parent={parent}>
+      <CellMeasurer
+        cache={this.cache}
+        index={index}
+        key={media.id}
+        parent={parent}
+      >
         <Image
           style={style}
           {...media}

client/src/Media/Topbar.tsx

@@ -146,6 +146,7 @@ export default function Topbar(props: Props) {
   });
 
   useEffect(() => {
+    if (!progress) return;
     onUploadProgress(progress || 0);
   }, [progress, onUploadProgress]);
 

client/src/Media/UploadZone.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect, memo } from "react";
+import React, { useMemo, useEffect } from "react";
 import { useDropzone } from "react-dropzone";
 import { useUpload } from "react-use-upload";
 import createValidator, { MediaFilter } from "./createValidator";
@@ -27,7 +27,6 @@ export default function UploadZone({
   mediaType,
   mediaFilter
 }: Props) {
-  const Render = useMemo(() => memo(props => render(props)), [render]);
   const validator = useMemo(() => createValidator(mediaType, mediaFilter), [
     mediaType,
     mediaFilter
@@ -61,16 +60,14 @@ export default function UploadZone({
       className={`${className} ${isDragActive ? activeClass : ""}`}
     >
       <input {...getInputProps()} />
-      <Render
-        {...{
+      {render({...{
           ...response,
           complete: done,
           onFiles,
           progress,
           error,
           files
-        }}
-      />
+        }})}
     </div>
   );
 }

client/src/Media/index.tsx

@@ -1,5 +1,5 @@
 import * as Cotype from "../../../typings";
-import React, { Component, Fragment } from "react";
+import React, { Component } from "react";
 import styled, { css } from "react-emotion";
 import { RenderInfo } from "../common/ScrollList";
 import api from "../api";
@@ -104,12 +104,16 @@ export default class Media extends Component<Props, State> {
     if (!props.onSelect) {
       this.state.editable = true;
     }
-    if (props.mediaType && typeof props.mediaType === 'string' && props.mediaType !== "all") {
+    if (
+      props.mediaType &&
+      typeof props.mediaType === "string" &&
+      props.mediaType !== "all"
+    ) {
       this.state.filters = this.state.filters.filter(el =>
         el.value.includes(props.mediaType as string)
       );
-      if(this.state.filters.length >0){
-        this.state.fileType = this.state.filters[0].value
+      if (this.state.filters.length > 0) {
+        this.state.fileType = this.state.filters[0].value;
       }
     }
   }
@@ -265,8 +269,7 @@ export default class Media extends Component<Props, State> {
       editable,
       conflictingItems,
       filters,
-      topbarProgress,
-      fileType
+      topbarProgress
     } = this.state;
     return (
       <Root {...testable("upload-zone")}>
@@ -306,27 +309,31 @@ export default class Media extends Component<Props, State> {
           activeClass={activeClass}
           onUpload={this.onUpload}
           render={({ progress, onFiles }: any) => {
-            const itemCount =
-              !!progress || !!topbarProgress ? total + 1 : total;
-            const data =
-              !!progress || !!topbarProgress
-                ? [{ progress: progress || topbarProgress }, ...items]
-                : items;
+            const isProgress =
+              (progress && progress < 100) ||
+              (topbarProgress && topbarProgress < 100);
+            const itemCount = isProgress ? total + 1 : total;
+            const data = isProgress
+              ? [
+                  {
+                    progress:
+                      progress && progress < 100 ? progress : topbarProgress
+                  },
+                  ...items
+                ]
+              : items;
             return (
-              <Fragment>
-                <Main>
-                  <Gallery
-                    key={fileType}
-                    count={itemCount}
-                    data={data}
-                    editable={editable}
-                    onSelect={this.onSelect}
-                    onDelete={this.deleteMedia}
-                    onRowsRendered={this.onRowsRendered}
-                    mediaFilter={this.props.mediaFilter}
-                  />
-                </Main>
-              </Fragment>
+              <Main>
+                <Gallery
+                  count={itemCount}
+                  data={data}
+                  editable={editable}
+                  onSelect={this.onSelect}
+                  onDelete={this.deleteMedia}
+                  onRowsRendered={this.onRowsRendered}
+                  mediaFilter={this.props.mediaFilter}
+                />
+              </Main>
             );
           }}
         />

src/persistence/adapter/knex/KnexContent.ts

@@ -751,7 +751,7 @@ export default class KnexContent implements ContentAdapter {
     if (contents.length > 0) {
       // TODO action delete/unpublish/schedule
       const err = new ReferenceConflictError({ type: "content" });
-      err.refs = contents.map(c => this.parseData(c));
+      err.refs = contents.map((c:any) => this.parseData(c));
       throw err;
     }
   }
@@ -894,7 +894,7 @@ export default class KnexContent implements ContentAdapter {
 
     return {
       total,
-      items: items.map(i => this.parseData(i))
+      items: items.map((i:any) => this.parseData(i))
     };
   }
 
@@ -916,7 +916,7 @@ export default class KnexContent implements ContentAdapter {
       .where("content_references.media", "=", media)
       .andWhere("contents.deleted", false);
 
-    return contents.map(c => this.parseData(c));
+    return contents.map((c:any) => this.parseData(c));
   }
 
   async list(
@@ -1303,7 +1303,7 @@ export default class KnexContent implements ContentAdapter {
       state: "applied"
     });
     const outstanding = migrations.filter(
-      m => !applied.some(a => a.name === m.name)
+      m => !applied.some((a:any) => a.name === m.name)
     );
 
     if (!outstanding.length) {
@@ -1317,7 +1317,7 @@ export default class KnexContent implements ContentAdapter {
       await this.knex("content_migrations").insert(
         names.map(name => ({ name, state: "pending" }))
       );
-      const tx = await this.knex.transaction();
+      const tx = await (this.knex as any).transaction(); // TODO: Fix Line
       try {
         await callback(new KnexContent(tx), outstanding);
         await tx.commit();