fixed types

src/components/editors/ImageGrid/index.tsx

@@ -15,7 +15,9 @@ interface IProps {
   onDrop: DragEventHandler<HTMLFormElement>;
 }
 
-const SortableItem = SortableElement(({ children }) => <div className={styles.item}>{children}</div>);
+const SortableItem = SortableElement(({ children }) => (
+  <div className={styles.item}>{children}</div>
+));
 
 const SortableList = SortableContainer(
   ({
@@ -23,10 +25,10 @@ const SortableList = SortableContainer(
     locked,
     onDrop
   }: {
-    items: IFile[];
-    locked: IUploadStatus[];
-    onUpload: ChangeEventHandler<HTMLInputElement>;
-    onDrop: DragEventHandler<HTMLFormElement>;
+  items: IFile[];
+  locked: IUploadStatus[];
+  onUpload: ChangeEventHandler<HTMLInputElement>;
+  onDrop: DragEventHandler<HTMLFormElement>;
   }) => (
     <form className={styles.grid} onDrop={onDrop}>
       {items.map((file, index) => (
@@ -46,7 +48,9 @@ const SortableList = SortableContainer(
 const ImageGrid: FC<IProps> = ({
   items, locked, onFileMove, onUpload, onDrop
 }) => {
-  const onMove = useCallback(({ oldIndex, newIndex }) => onFileMove(oldIndex, newIndex), [onFileMove]);
+  const onMove = useCallback(({ oldIndex, newIndex }) => onFileMove(oldIndex, newIndex), [
+    onFileMove
+  ]);
 
   return (
     <SortableList
@@ -57,6 +61,7 @@ const ImageGrid: FC<IProps> = ({
       onUpload={onUpload}
       onDrop={onDrop}
       pressDelay={100}
+      helperClass={styles.helper}
     />
   );
 };

src/components/editors/ImageGrid/styles.scss

@@ -20,6 +20,11 @@
   // width: 25%;
   // float: left;
   // padding: $gap / 2;
-  z-index: 10;
+  z-index: 1;
   box-sizing: border-box;
-}
+}
+
+.helper {
+  opacity: 0.5;
+  z-index: 10;
+}

src/components/upload/ImageUpload/styles.scss

@@ -3,6 +3,7 @@
   padding-bottom: 100%;
   border-radius: $radius;
   position: relative;
+  user-select: none;
 }
 
 .thumb_wrap {
@@ -30,7 +31,8 @@
   border-radius: $radius;
   background: no-repeat 50% 50%;
   background-size: cover;
-  opacity: 0.3;
+  opacity: 1;
+  filter: saturate(0);
 }
 
 .progress {
@@ -50,4 +52,8 @@
     // stroke: white
     fill: white;
   }
-}
+}
+
+.helper {
+  opacity: 0.3;
+}

src/redux/types.ts

@@ -73,8 +73,9 @@ export interface IFileWithUUID {
 
 export interface IBlock {
   type: 'image' | 'text' | 'media' | 'youtube' | 'video';
-  temp_ids: UUID[];
-  attaches: UUID[];
+  files: UUID[];
+  content: string;
+  embeds: string[];
 }
 
 export interface INode {
@@ -84,7 +85,7 @@ export interface INode {
   title: string;
   files: IFile[];
 
-  cover: IFile['id'];
+  cover: IFile;
   type: 'image';
 
   blocks: IBlock[];