node editing saga

src/components/editors/ImageEditor/index.tsx

@@ -4,6 +4,7 @@ import { INode, IFile } from '~/redux/types';
 import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
 import { selectUploads } from '~/redux/uploads/selectors';
 import { ImageGrid } from '~/components/editors/ImageGrid';
+import * as styles from './styles.scss';
 
 const mapStateToProps = selectUploads;
 const mapDispatchToProps = {
@@ -26,7 +27,11 @@ const ImageEditorUnconnected: FC<IProps> = ({ data, setData, temp, statuses }) =
 
   const setFiles = useCallback((files: IFile[]) => setData({ ...data, files }), [data, setData]);
 
-  return <ImageGrid files={data.files} setFiles={setFiles} locked={pending_files} />;
+  return (
+    <div className={styles.wrap}>
+      <ImageGrid files={data.files} setFiles={setFiles} locked={pending_files} />
+    </div>
+  );
 };
 
 const ImageEditor = connect(

src/components/editors/ImageEditor/styles.scss

@@ -1,14 +1,4 @@
-.uploads {
+.wrap {
   min-height: 200px;
   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));
-
-  @media (max-width: 600px) {
-    grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
-  }
 }

src/containers/dialogs/LoadingDialog/index.tsx

@@ -0,0 +1,11 @@
+import React, { FC } from 'react';
+import { LoaderCircle } from '~/components/input/LoaderCircle';
+import * as styles from './styles.scss';
+
+const LoadingDialog: FC<{}> = () => (
+  <div className={styles.wrap}>
+    <LoaderCircle size={64} />
+  </div>
+);
+
+export { LoadingDialog };

src/containers/dialogs/LoadingDialog/styles.scss

@@ -0,0 +1,11 @@
+.wrap {
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    fill: white;
+    opacity: 0.5;
+  }
+}

src/redux/modal/constants.ts

@@ -1,5 +1,6 @@
 import { ValueOf } from '~/redux/types';
 import { LoginDialog } from '~/containers/dialogs/LoginDialog';
+import { LoadingDialog } from '~/containers/dialogs/LoadingDialog';
 import { EditorDialogImage } from '~/containers/editors/EditorDialogImage';
 import { EditorDialogText } from '~/containers/editors/EditorDialogText';
 import { EditorDialogVideo } from '~/containers/editors/EditorDialogVideo';
@@ -18,6 +19,7 @@ export const DIALOGS = {
   EDITOR_VIDEO: 'EDITOR_VIDEO',
   EDITOR_AUDIO: 'EDITOR_AUDIO',
   LOGIN: 'LOGIN',
+  LOADING: 'LOADING',
 };
 
 export const DIALOG_CONTENT = {
@@ -26,6 +28,7 @@ export const DIALOG_CONTENT = {
   [DIALOGS.EDITOR_VIDEO]: EditorDialogVideo,
   [DIALOGS.EDITOR_AUDIO]: EditorDialogAudio,
   [DIALOGS.LOGIN]: LoginDialog,
+  [DIALOGS.LOADING]: LoadingDialog,
 };
 
 export const NODE_EDITOR_DIALOGS = {

src/redux/node/sagas.ts

@@ -17,6 +17,7 @@ import {
   nodeSetTags,
   nodeCreate,
   nodeSetEditor,
+  nodeEdit,
 } from './actions';
 import { postNode, getNode, postNodeComment, getNodeComments, updateNodeTags } from './api';
 import { reqWrapper } from '../auth/sagas';
@@ -27,7 +28,7 @@ import { selectFlowNodes } from '../flow/selectors';
 import { URLS } from '~/constants/urls';
 import { selectNode } from './selectors';
 import { IResultWithStatus, INode } from '../types';
-import { NODE_EDITOR_DIALOGS } from '../modal/constants';
+import { NODE_EDITOR_DIALOGS, DIALOGS } from '../modal/constants';
 
 function* onNodeSave({ node }: ReturnType<typeof nodeSave>) {
   yield put(nodeSetSaveErrors({}));
@@ -128,10 +129,26 @@ function* onCreateSaga({ node_type: type }: ReturnType<typeof nodeCreate>) {
   yield put(modalShowDialog(NODE_EDITOR_DIALOGS[type]));
 }
 
+function* onEditSaga({ id }: ReturnType<typeof nodeEdit>) {
+  yield put(modalShowDialog(DIALOGS.LOADING));
+
+  const {
+    data: { node },
+    error,
+  } = yield call(reqWrapper, getNode, { id });
+
+  if (error || !node || !node.type || !NODE_EDITOR_DIALOGS[node.type])
+    return yield put(modalSetShown(false));
+
+  yield put(nodeSetEditor(node));
+  yield put(modalShowDialog(NODE_EDITOR_DIALOGS[node.type]));
+}
+
 export default function* nodeSaga() {
   yield takeLatest(NODE_ACTIONS.SAVE, onNodeSave);
   yield takeLatest(NODE_ACTIONS.LOAD_NODE, onNodeLoad);
   yield takeLatest(NODE_ACTIONS.POST_COMMENT, onPostComment);
   yield takeLatest(NODE_ACTIONS.UPDATE_TAGS, onUpdateTags);
   yield takeLatest(NODE_ACTIONS.CREATE, onCreateSaga);
+  yield takeLatest(NODE_ACTIONS.EDIT, onEditSaga);
 }