From d9a56255c5278acbc1f0efa5a9600ffd18d95ed9 Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Fri, 9 Aug 2019 14:31:09 +0700
Subject: [PATCH] fixed types

---
 src/components/editors/ImageGrid/index.tsx    | 17 +++++++++++------
 src/components/editors/ImageGrid/styles.scss  |  9 +++++++--
 src/components/upload/ImageUpload/styles.scss | 10 ++++++++--
 src/redux/types.ts                            |  7 ++++---
 4 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/components/editors/ImageGrid/index.tsx b/src/components/editors/ImageGrid/index.tsx
index f761ac19..74453cff 100644
--- a/src/components/editors/ImageGrid/index.tsx
+++ b/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}
     />
   );
 };
diff --git a/src/components/editors/ImageGrid/styles.scss b/src/components/editors/ImageGrid/styles.scss
index 379aafa4..18c1d269 100644
--- a/src/components/editors/ImageGrid/styles.scss
+++ b/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;
-}
\ No newline at end of file
+}
+
+.helper {
+  opacity: 0.5;
+  z-index: 10;
+}
diff --git a/src/components/upload/ImageUpload/styles.scss b/src/components/upload/ImageUpload/styles.scss
index 91f90cf1..9bc34400 100644
--- a/src/components/upload/ImageUpload/styles.scss
+++ b/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;
   }
-}
\ No newline at end of file
+}
+
+.helper {
+  opacity: 0.3;
+}
diff --git a/src/redux/types.ts b/src/redux/types.ts
index 2a2cc24d..b04ebb82 100644
--- a/src/redux/types.ts
+++ b/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[];