diff --git a/src/components/editors/ImageEditor/index.tsx b/src/components/editors/ImageEditor/index.tsx index d5762d6c..7b3eb4cb 100644 --- a/src/components/editors/ImageEditor/index.tsx +++ b/src/components/editors/ImageEditor/index.tsx @@ -86,14 +86,8 @@ const ImageEditorUnconnected: FC = ({ data, setData, uploadUploadFiles, useEffect(() => console.log({ data }), [data]); useEffect(() => { - console.log({ temp, files }); - Object.entries(statuses).forEach(([id, status]) => { - // todo: make this working - console.log({ id, uuid: status.uuid, file: files[status.uuid], files }); - if (temp.includes(id) && !!status.uuid && files[status.uuid]) { - console.log(`${id} uploaded`); onFileAdd(files[status.uuid]); setTemp(temp.filter(el => el !== id)); } @@ -103,7 +97,7 @@ const ImageEditorUnconnected: FC = ({ data, setData, uploadUploadFiles, return ( statuses[id])} + locked={temp.filter(id => !!statuses[id]).map(id => statuses[id])} /> ); }; diff --git a/src/components/editors/ImageGrid/index.tsx b/src/components/editors/ImageGrid/index.tsx index aa1a01af..b89392c2 100644 --- a/src/components/editors/ImageGrid/index.tsx +++ b/src/components/editors/ImageGrid/index.tsx @@ -17,7 +17,7 @@ const SortableList = SortableContainer(({ items, locked }: { items: IFile[], loc
{ items.map((file, index) => ( - + )) } + { + locked.map((item, index) => ( + + + + )) + }
); diff --git a/src/components/editors/ImageGrid/styles.scss b/src/components/editors/ImageGrid/styles.scss index 5a6ef4bb..b4428ad5 100644 --- a/src/components/editors/ImageGrid/styles.scss +++ b/src/components/editors/ImageGrid/styles.scss @@ -3,22 +3,22 @@ padding-bottom: 60px; box-sizing: border-box; - // display: grid; - // grid-column-gap: $gap; - // grid-row-gap: $gap; - // grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + display: grid; + grid-column-gap: $gap; + grid-row-gap: $gap; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); // display: flex; // flex-wrap: wrap; - // @media (max-width: 600px) { - // grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr)); - // } + @media (max-width: 600px) { + grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr)); + } } .item { // flex: 0 4 25%; - width: 25%; - float: left; + // width: 25%; + // float: left; // padding: $gap / 2; z-index: 100; box-sizing: border-box; diff --git a/src/redux/uploads/constants.ts b/src/redux/uploads/constants.ts index c302893b..1d7bd25d 100644 --- a/src/redux/uploads/constants.ts +++ b/src/redux/uploads/constants.ts @@ -37,4 +37,5 @@ export const EMPTY_UPLOAD_STATUS: IUploadStatus = { progress: 0, thumbnail_url: null, type: null, + temp_id: null, } \ No newline at end of file diff --git a/src/redux/uploads/reducer.ts b/src/redux/uploads/reducer.ts index 9c9d410a..dfb03bb2 100644 --- a/src/redux/uploads/reducer.ts +++ b/src/redux/uploads/reducer.ts @@ -11,6 +11,7 @@ export interface IUploadStatus { type: string; thumbnail_url: string; progress: number; + temp_id: UUID; } export interface IUploadState { diff --git a/src/redux/uploads/sagas.ts b/src/redux/uploads/sagas.ts index dba3ffb3..23cd607e 100644 --- a/src/redux/uploads/sagas.ts +++ b/src/redux/uploads/sagas.ts @@ -49,6 +49,7 @@ function* uploadFile({ file, temp_id }: IFileWithUUID) { preview, is_uploading: true, type: file.type, + temp_id, } ) );