photoswipe element

src/redux/modal/actions.ts

@@ -1,5 +1,11 @@
 import { IModalState } from '~/redux/modal/reducer';
 import { MODAL_ACTIONS } from '~/redux/modal/constants';
+import { IFile } from '../types';
+
+export const modalSet = (modal: Partial<IModalState>) => ({
+  type: MODAL_ACTIONS.SET,
+  modal,
+});
 
 export const modalSetShown = (is_shown: IModalState['is_shown']) => ({
   is_shown,
@@ -15,3 +21,9 @@ export const modalShowDialog = (dialog: IModalState['dialog']) => ({
   dialog,
   type: MODAL_ACTIONS.SHOW_DIALOG,
 });
+
+export const modalShowPhotoswipe = (images: IFile[], index: number) => ({
+  type: MODAL_ACTIONS.SHOW_PHOTOSWIPE,
+  images,
+  index,
+});

src/redux/modal/constants.ts

@@ -11,12 +11,17 @@ export const DIALOGS = {
   RESTORE_REQUEST: 'RESTORE_REQUEST',
   RESTORE_PASSWORD: 'RESTORE_PASSWORD',
   TEST: 'TEST',
+  PHOTOSWIPE: 'PHOTOSWIPE',
 };
 
+const prefix = 'MODAL.';
+
 export const MODAL_ACTIONS = {
-  SET_SHOWN: 'MODAL.SET_SHOWN',
-  SET_DIALOG: 'SET_DIALOG',
-  SHOW_DIALOG: 'SHOW_DIALOG',
+  SET: `${prefix}SET`,
+  SET_SHOWN: `${prefix}MODAL.SET_SHOWN`,
+  SET_DIALOG: `${prefix}SET_DIALOG`,
+  SHOW_DIALOG: `${prefix}SHOW_DIALOG`,
+  SHOW_PHOTOSWIPE: `${prefix}SHOW_PHOTOSWIPE`,
 };
 
 export interface IDialogProps {

src/redux/modal/handlers.ts

@@ -1,10 +1,13 @@
 import { MODAL_ACTIONS } from '~/redux/modal/constants';
+import { modalSet } from './actions';
 
+const setState = (state, { modal }: ReturnType<typeof modalSet>) => ({ ...state, ...modal });
 const setShown = (state, { is_shown }) => ({ ...state, is_shown });
 const showDialog = (state, { dialog }) => ({ ...state, dialog, is_shown: true });
 const setDialog = (state, { dialog }) => ({ ...state, dialog });
 
 export const MODAL_HANDLERS = {
+  [MODAL_ACTIONS.SET]: setState,
   [MODAL_ACTIONS.SET_SHOWN]: setShown,
   [MODAL_ACTIONS.SHOW_DIALOG]: showDialog,
   [MODAL_ACTIONS.SET_DIALOG]: setDialog,

src/redux/modal/reducer.ts

@@ -1,16 +1,24 @@
 import { MODAL_HANDLERS } from '~/redux/modal/handlers';
 import { createReducer } from '~/utils/reducer';
 import { DIALOGS } from '~/redux/modal/constants';
-import { ValueOf } from '~/redux/types';
+import { ValueOf, IFile } from '~/redux/types';
 
 export interface IModalState {
   is_shown: boolean;
   dialog: ValueOf<typeof DIALOGS>;
+  photoswipe: {
+    images: IFile[];
+    index: number;
+  };
 }
 
 const INITIAL_STATE: IModalState = {
   is_shown: false,
   dialog: null,
+  photoswipe: {
+    images: [],
+    index: 0,
+  },
 };
 
 export default createReducer(INITIAL_STATE, MODAL_HANDLERS);

src/redux/modal/sagas.ts

@@ -1,6 +1,8 @@
 import { takeEvery, put } from 'redux-saga/effects';
 import { LocationChangeAction, LOCATION_CHANGE } from 'connected-react-router';
 import { authOpenProfile, authShowRestoreModal } from '../auth/actions';
+import { MODAL_ACTIONS, DIALOGS } from './constants';
+import { modalShowPhotoswipe, modalSet } from './actions';
 
 function* onPathChange({
   payload: {
@@ -18,6 +20,21 @@ function* onPathChange({
   }
 }
 
+function* onShowPhotoswipe({ images, index }: ReturnType<typeof modalShowPhotoswipe>) {
+  console.log({ images, index });
+  yield put(
+    modalSet({
+      dialog: DIALOGS.PHOTOSWIPE,
+      is_shown: true,
+      photoswipe: {
+        images,
+        index,
+      },
+    })
+  );
+}
+
 export function* modalSaga() {
   yield takeEvery(LOCATION_CHANGE, onPathChange);
+  yield takeEvery(MODAL_ACTIONS.SHOW_PHOTOSWIPE, onShowPhotoswipe);
 }

src/redux/node/constants.ts

@@ -13,6 +13,7 @@ import { EditorImageUploadButton } from '~/components/editors/EditorImageUploadB
 import { EditorAudioUploadButton } from '~/components/editors/EditorAudioUploadButton';
 import { EditorUploadCoverButton } from '~/components/editors/EditorUploadCoverButton';
 import { Filler } from '~/components/containers/Filler';
+import { modalShowPhotoswipe } from '../modal/actions';
 
 const prefix = 'NODE.';
 export const NODE_ACTIONS = {
@@ -77,7 +78,13 @@ export const NODE_TYPES = {
 
 type INodeComponents = Record<
   ValueOf<typeof NODE_TYPES>,
-  FC<{ node: INode; is_loading: boolean; layout: {}; updateLayout: () => void }>
+  FC<{
+    node: INode;
+    is_loading: boolean;
+    layout: {};
+    updateLayout: () => void;
+    modalShowPhotoswipe: typeof modalShowPhotoswipe;
+  }>
 >;
 
 export const NODE_COMPONENTS: INodeComponents = {