@pranaysahith/decap-cms-core 3.9.1

package/src/reducers/mediaLibrary.ts

@@ -0,0 +1,296 @@
+import { Map, List } from 'immutable';
+import { v4 as uuid } from 'uuid';
+import { dirname } from 'path';
+
+import {
+  MEDIA_LIBRARY_OPEN,
+  MEDIA_LIBRARY_CLOSE,
+  MEDIA_LIBRARY_CREATE,
+  MEDIA_INSERT,
+  MEDIA_REMOVE_INSERTED,
+  MEDIA_LOAD_REQUEST,
+  MEDIA_LOAD_SUCCESS,
+  MEDIA_LOAD_FAILURE,
+  MEDIA_PERSIST_REQUEST,
+  MEDIA_PERSIST_SUCCESS,
+  MEDIA_PERSIST_FAILURE,
+  MEDIA_DELETE_REQUEST,
+  MEDIA_DELETE_SUCCESS,
+  MEDIA_DELETE_FAILURE,
+  MEDIA_DISPLAY_URL_REQUEST,
+  MEDIA_DISPLAY_URL_SUCCESS,
+  MEDIA_DISPLAY_URL_FAILURE,
+} from '../actions/mediaLibrary';
+import { selectEditingDraft, selectMediaFolder } from './entries';
+import { selectIntegration } from './';
+
+import type { MediaLibraryAction } from '../actions/mediaLibrary';
+import type {
+  State,
+  MediaLibraryInstance,
+  MediaFile,
+  MediaFileMap,
+  DisplayURLState,
+  EntryField,
+} from '../types/redux';
+
+const defaultState: {
+  isVisible: boolean;
+  showMediaButton: boolean;
+  controlMedia: Map<string, string>;
+  displayURLs: Map<string, string>;
+  externalLibrary?: MediaLibraryInstance;
+  controlID?: string;
+  page?: number;
+  files?: MediaFile[];
+  config: Map<string, unknown>;
+  field?: EntryField;
+  value?: string | string[];
+  replaceIndex?: number | boolean;
+} = {
+  isVisible: false,
+  showMediaButton: true,
+  controlMedia: Map(),
+  displayURLs: Map(),
+  config: Map(),
+};
+
+function mediaLibrary(state = Map(defaultState), action: MediaLibraryAction) {
+  switch (action.type) {
+    case MEDIA_LIBRARY_CREATE:
+      return state.withMutations(map => {
+        map.set('externalLibrary', action.payload);
+        map.set('showMediaButton', action.payload.enableStandalone());
+      });
+
+    case MEDIA_LIBRARY_OPEN: {
+      const { controlID, forImage, privateUpload, config, field, value, replaceIndex } =
+        action.payload;
+      const libConfig = config || Map();
+      const privateUploadChanged = state.get('privateUpload') !== privateUpload;
+      if (privateUploadChanged) {
+        return Map({
+          isVisible: true,
+          forImage,
+          controlID,
+          canInsert: !!controlID,
+          privateUpload,
+          config: libConfig,
+          controlMedia: Map(),
+          displayURLs: Map(),
+          field,
+          value,
+          replaceIndex,
+        });
+      }
+      return state.withMutations(map => {
+        map.set('isVisible', true);
+        map.set('forImage', forImage ?? false);
+        map.set('controlID', controlID ?? '');
+        map.set('canInsert', !!controlID);
+        map.set('privateUpload', privateUpload);
+        map.set('config', libConfig);
+        map.set('field', field ?? '');
+        map.set('value', value == '' && libConfig.get('multiple') ? [] : value ?? '');
+        map.set('replaceIndex', replaceIndex ?? false);
+      });
+    }
+
+    case MEDIA_LIBRARY_CLOSE:
+      return state.set('isVisible', false);
+
+    case MEDIA_INSERT: {
+      const { mediaPath } = action.payload;
+      const controlID = state.get('controlID');
+      const value = state.get('value');
+
+      if (!Array.isArray(value)) {
+        return state.withMutations(map => {
+          map.setIn(['controlMedia', controlID], mediaPath);
+        });
+      }
+
+      const replaceIndex = state.get('replaceIndex');
+      const mediaArray = Array.isArray(mediaPath) ? mediaPath : [mediaPath];
+      const valueArray = value as string[];
+      if (typeof replaceIndex == 'number') {
+        valueArray[replaceIndex] = mediaArray[0];
+      } else {
+        valueArray.push(...mediaArray);
+      }
+
+      return state.withMutations(map => {
+        map.setIn(['controlMedia', controlID], valueArray);
+      });
+    }
+
+    case MEDIA_REMOVE_INSERTED: {
+      const controlID = action.payload.controlID;
+      return state.setIn(['controlMedia', controlID], '');
+    }
+
+    case MEDIA_LOAD_REQUEST:
+      return state.withMutations(map => {
+        map.set('isLoading', true);
+        map.set('isPaginating', action.payload.page > 1);
+      });
+
+    case MEDIA_LOAD_SUCCESS: {
+      const {
+        files = [],
+        page,
+        canPaginate,
+        dynamicSearch,
+        dynamicSearchQuery,
+        privateUpload,
+      } = action.payload;
+      const privateUploadChanged = state.get('privateUpload') !== privateUpload;
+
+      if (privateUploadChanged) {
+        return state;
+      }
+
+      const filesWithKeys = files.map(file => ({ ...file, key: uuid() }));
+      return state.withMutations(map => {
+        map.set('isLoading', false);
+        map.set('isPaginating', false);
+        map.set('page', page ?? 1);
+        map.set('hasNextPage', !!(canPaginate && files.length > 0));
+        map.set('dynamicSearch', dynamicSearch ?? false);
+        map.set('dynamicSearchQuery', dynamicSearchQuery ?? '');
+        map.set('dynamicSearchActive', !!dynamicSearchQuery);
+        if (page && page > 1) {
+          const updatedFiles = (map.get('files') as MediaFile[]).concat(filesWithKeys);
+          map.set('files', updatedFiles);
+        } else {
+          map.set('files', filesWithKeys);
+        }
+      });
+    }
+
+    case MEDIA_LOAD_FAILURE: {
+      const privateUploadChanged = state.get('privateUpload') !== action.payload.privateUpload;
+      if (privateUploadChanged) {
+        return state;
+      }
+      return state.set('isLoading', false);
+    }
+
+    case MEDIA_PERSIST_REQUEST:
+      return state.set('isPersisting', true);
+
+    case MEDIA_PERSIST_SUCCESS: {
+      const { file, privateUpload } = action.payload;
+      const privateUploadChanged = state.get('privateUpload') !== privateUpload;
+      if (privateUploadChanged) {
+        return state;
+      }
+      return state.withMutations(map => {
+        const fileWithKey = { ...file, key: uuid() };
+        const files = map.get('files') as MediaFile[];
+        const updatedFiles = [fileWithKey, ...files];
+        map.set('files', updatedFiles);
+        map.set('isPersisting', false);
+      });
+    }
+
+    case MEDIA_PERSIST_FAILURE: {
+      const privateUploadChanged = state.get('privateUpload') !== action.payload.privateUpload;
+      if (privateUploadChanged) {
+        return state;
+      }
+      return state.set('isPersisting', false);
+    }
+
+    case MEDIA_DELETE_REQUEST:
+      return state.set('isDeleting', true);
+
+    case MEDIA_DELETE_SUCCESS: {
+      const { file, privateUpload } = action.payload;
+      const { key, id } = file;
+      const privateUploadChanged = state.get('privateUpload') !== privateUpload;
+      if (privateUploadChanged) {
+        return state;
+      }
+      return state.withMutations(map => {
+        const files = map.get('files') as MediaFile[];
+        const updatedFiles = files.filter(file => (key ? file.key !== key : file.id !== id));
+        map.set('files', updatedFiles);
+        map.deleteIn(['displayURLs', id]);
+        map.set('isDeleting', false);
+      });
+    }
+
+    case MEDIA_DELETE_FAILURE: {
+      const privateUploadChanged = state.get('privateUpload') !== action.payload.privateUpload;
+      if (privateUploadChanged) {
+        return state;
+      }
+      return state.set('isDeleting', false);
+    }
+
+    case MEDIA_DISPLAY_URL_REQUEST:
+      return state.setIn(['displayURLs', action.payload.key, 'isFetching'], true);
+
+    case MEDIA_DISPLAY_URL_SUCCESS: {
+      const displayURLPath = ['displayURLs', action.payload.key];
+      return state
+        .setIn([...displayURLPath, 'isFetching'], false)
+        .setIn([...displayURLPath, 'url'], action.payload.url);
+    }
+
+    case MEDIA_DISPLAY_URL_FAILURE: {
+      const displayURLPath = ['displayURLs', action.payload.key];
+      return (
+        state
+          .setIn([...displayURLPath, 'isFetching'], false)
+          // make sure that err is set so the CMS won't attempt to load
+          // the image again
+          .setIn([...displayURLPath, 'err'], action.payload.err || true)
+          .deleteIn([...displayURLPath, 'url'])
+      );
+    }
+
+    default:
+      return state;
+  }
+}
+
+export function selectMediaFiles(state: State, field?: EntryField) {
+  const { mediaLibrary, entryDraft } = state;
+  const editingDraft = selectEditingDraft(state.entryDraft);
+  const integration = selectIntegration(state, null, 'assetStore');
+
+  let files;
+  if (editingDraft && !integration) {
+    const entryFiles = entryDraft
+      .getIn(['entry', 'mediaFiles'], List<MediaFileMap>())
+      .toJS() as MediaFile[];
+    const entry = entryDraft.get('entry');
+    const collection = state.collections.get(entry?.get('collection'));
+    const mediaFolder = selectMediaFolder(state.config, collection, entry, field);
+    files = entryFiles
+      .filter(f => dirname(f.path) === mediaFolder)
+      .map(file => ({ key: file.id, ...file }));
+  } else {
+    files = mediaLibrary.get('files') || [];
+  }
+
+  return files;
+}
+
+export function selectMediaFileByPath(state: State, path: string) {
+  const files = selectMediaFiles(state);
+  const file = files.find(file => file.path === path);
+  return file;
+}
+
+export function selectMediaDisplayURL(state: State, id: string) {
+  const displayUrlState = state.mediaLibrary.getIn(
+    ['displayURLs', id],
+    Map() as unknown as DisplayURLState,
+  );
+  return displayUrlState;
+}
+
+export default mediaLibrary;

package/src/reducers/medias.ts

@@ -0,0 +1,66 @@
+import { produce } from 'immer';
+
+import {
+  ADD_ASSETS,
+  ADD_ASSET,
+  REMOVE_ASSET,
+  LOAD_ASSET_REQUEST,
+  LOAD_ASSET_SUCCESS,
+  LOAD_ASSET_FAILURE,
+} from '../actions/media';
+
+import type { MediasAction } from '../actions/media';
+import type AssetProxy from '../valueObjects/AssetProxy';
+
+export type Medias = {
+  [path: string]: { asset: AssetProxy | undefined; isLoading: boolean; error: Error | null };
+};
+
+const defaultState: Medias = {};
+
+const medias = produce((state: Medias, action: MediasAction) => {
+  switch (action.type) {
+    case ADD_ASSETS: {
+      const assets = action.payload;
+      assets.forEach(asset => {
+        state[asset.path] = { asset, isLoading: false, error: null };
+      });
+      break;
+    }
+    case ADD_ASSET: {
+      const asset = action.payload;
+      state[asset.path] = { asset, isLoading: false, error: null };
+      break;
+    }
+    case REMOVE_ASSET: {
+      const path = action.payload;
+      delete state[path];
+      break;
+    }
+    case LOAD_ASSET_REQUEST: {
+      const { path } = action.payload;
+      state[path] = state[path] || {};
+      state[path].isLoading = true;
+      break;
+    }
+    case LOAD_ASSET_SUCCESS: {
+      const { path } = action.payload;
+      state[path] = state[path] || {};
+      state[path].isLoading = false;
+      state[path].error = null;
+      break;
+    }
+    case LOAD_ASSET_FAILURE: {
+      const { path, error } = action.payload;
+      state[path] = state[path] || {};
+      state[path].isLoading = false;
+      state[path].error = error;
+    }
+  }
+}, defaultState);
+
+export function selectIsLoadingAsset(state: Medias) {
+  return Object.values(state).some(state => state.isLoading);
+}
+
+export default medias;

package/src/reducers/notifications.ts

@@ -0,0 +1,52 @@
+import { produce } from 'immer';
+import { v4 as uuid } from 'uuid';
+
+import {
+  NOTIFICATION_SEND,
+  NOTIFICATION_DISMISS,
+  NOTIFICATIONS_CLEAR,
+} from '../actions/notifications';
+
+import type {
+  NotificationsAction,
+  NotificationMessage,
+  NotificationPayload,
+} from '../actions/notifications';
+import type { TypeOptions } from 'react-toastify';
+
+export type Notification = {
+  id: string;
+  message: string | NotificationMessage;
+  dismissAfter?: number;
+  type: TypeOptions | undefined;
+};
+
+export type NotificationsState = {
+  notifications: Notification[];
+};
+
+const defaultState: NotificationsState = {
+  notifications: [],
+};
+
+const notifications = produce((state: NotificationsState, action: NotificationsAction) => {
+  switch (action.type) {
+    case NOTIFICATIONS_CLEAR:
+      state.notifications = [];
+      break;
+    case NOTIFICATION_DISMISS:
+      state.notifications = state.notifications.filter(n => n.id !== action.id);
+      break;
+    case NOTIFICATION_SEND:
+      state.notifications = [
+        ...state.notifications,
+        {
+          id: uuid(),
+          ...(action.payload as NotificationPayload),
+        },
+      ];
+      break;
+  }
+}, defaultState);
+
+export default notifications;

package/src/reducers/search.ts

@@ -0,0 +1,111 @@
+import { produce } from 'immer';
+
+import {
+  QUERY_FAILURE,
+  QUERY_REQUEST,
+  QUERY_SUCCESS,
+  SEARCH_CLEAR,
+  SEARCH_ENTRIES_FAILURE,
+  SEARCH_ENTRIES_REQUEST,
+  SEARCH_ENTRIES_SUCCESS,
+  CLEAR_REQUESTS,
+} from '../actions/search';
+
+import type { SearchAction } from '../actions/search';
+import type { EntryValue } from '../valueObjects/Entry';
+
+export type Search = {
+  isFetching: boolean;
+  term: string;
+  collections: string[];
+  page: number;
+  entryIds: { collection: string; slug: string }[];
+  queryHits: Record<string, EntryValue[]>;
+  error: Error | undefined;
+  requests: QueryRequest[];
+};
+
+type QueryResponse = {
+  hits: EntryValue[];
+  query: string;
+};
+
+export type QueryRequest = {
+  id: string;
+  expires: Date;
+  queryResponse: Promise<QueryResponse>;
+};
+
+const defaultState: Search = {
+  isFetching: false,
+  term: '',
+  collections: [],
+  page: 0,
+  entryIds: [],
+  queryHits: {},
+  error: undefined,
+  requests: [],
+};
+
+const search = produce((state: Search, action: SearchAction) => {
+  switch (action.type) {
+    case SEARCH_CLEAR:
+      return defaultState;
+
+    case SEARCH_ENTRIES_REQUEST: {
+      const { page, searchTerm, searchCollections } = action.payload;
+      state.isFetching = true;
+      state.term = searchTerm;
+      state.collections = searchCollections;
+      state.page = page;
+      break;
+    }
+
+    case SEARCH_ENTRIES_SUCCESS: {
+      const { entries, page } = action.payload;
+      const entryIds = entries.map(entry => ({ collection: entry.collection, slug: entry.slug }));
+      state.isFetching = false;
+      state.page = page;
+      state.entryIds =
+        !page || isNaN(page) || page === 0 ? entryIds : state.entryIds.concat(entryIds);
+      break;
+    }
+
+    case SEARCH_ENTRIES_FAILURE: {
+      const { error } = action.payload;
+      state.isFetching = false;
+      state.error = error;
+      break;
+    }
+
+    case QUERY_REQUEST: {
+      const { searchTerm, request } = action.payload;
+      state.isFetching = true;
+      state.term = searchTerm;
+      if (request) {
+        state.requests.push(request);
+      }
+      break;
+    }
+
+    case CLEAR_REQUESTS: {
+      state.requests = state.requests.filter(req => req.expires >= new Date());
+      break;
+    }
+
+    case QUERY_SUCCESS: {
+      const { namespace, hits } = action.payload;
+      state.isFetching = false;
+      state.queryHits[namespace] = hits;
+      break;
+    }
+
+    case QUERY_FAILURE: {
+      const { error } = action.payload;
+      state.isFetching = false;
+      state.error = error;
+    }
+  }
+}, defaultState);
+
+export default search;

package/src/reducers/status.ts

@@ -0,0 +1,40 @@
+import { produce } from 'immer';
+
+import { STATUS_REQUEST, STATUS_SUCCESS, STATUS_FAILURE } from '../actions/status';
+
+import type { StatusAction } from '../actions/status';
+
+export type Status = {
+  isFetching: boolean;
+  status: {
+    auth: { status: boolean };
+    api: { status: boolean; statusPage: string };
+  };
+  error: Error | undefined;
+};
+
+const defaultState: Status = {
+  isFetching: false,
+  status: {
+    auth: { status: true },
+    api: { status: true, statusPage: '' },
+  },
+  error: undefined,
+};
+
+const status = produce((state: Status, action: StatusAction) => {
+  switch (action.type) {
+    case STATUS_REQUEST:
+      state.isFetching = true;
+      break;
+    case STATUS_SUCCESS:
+      state.isFetching = false;
+      state.status = action.payload.status;
+      break;
+    case STATUS_FAILURE:
+      state.isFetching = false;
+      state.error = action.payload.error;
+  }
+}, defaultState);
+
+export default status;

package/src/redux/index.ts

@@ -0,0 +1,18 @@
+import { createStore, applyMiddleware } from 'redux';
+import { composeWithDevTools } from 'redux-devtools-extension';
+import thunkMiddleware from 'redux-thunk';
+
+import { waitUntilAction } from './middleware/waitUntilAction';
+import createRootReducer from '../reducers/combinedReducer';
+
+import type { ThunkMiddleware } from 'redux-thunk';
+import type { AnyAction } from 'redux';
+import type { State } from '../types/redux';
+import type { Reducer } from 'react';
+
+const store = createStore<State | undefined, AnyAction, unknown, unknown>(
+  createRootReducer() as unknown as Reducer<State | undefined, AnyAction>,
+  composeWithDevTools(applyMiddleware(thunkMiddleware as ThunkMiddleware<State>, waitUntilAction)),
+);
+
+export { store };

package/src/redux/middleware/waitUntilAction.ts

@@ -0,0 +1,64 @@
+// Based on wait-service by Mozilla:
+// https://github.com/mozilla/gecko-dev/blob/master/devtools/client/shared/redux/middleware/wait-service.js
+
+/**
+ * A middleware that provides the ability for actions to install a
+ * function to be run once when a specific condition is met by an
+ * action coming through the system. Think of it as a thunk that
+ * blocks until the condition is met.
+ */
+import type { Middleware, MiddlewareAPI, Dispatch, AnyAction } from 'redux';
+import type { State } from '../../types/redux';
+
+export const WAIT_UNTIL_ACTION = 'WAIT_UNTIL_ACTION';
+
+export interface WaitActionArgs {
+  predicate: (action: AnyAction) => boolean;
+  run: (dispatch: Dispatch, getState: () => State, action: AnyAction) => void;
+}
+
+interface WaitAction extends WaitActionArgs {
+  type: typeof WAIT_UNTIL_ACTION;
+}
+
+// eslint-disable-next-line func-style
+export const waitUntilAction: Middleware<{}, State, Dispatch> = ({
+  dispatch,
+  getState,
+}: MiddlewareAPI<Dispatch, State>) => {
+  let pending: WaitAction[] = [];
+
+  function checkPending(action: AnyAction): void {
+    const readyRequests = [];
+    const stillPending = [];
+
+    // Find the pending requests whose predicates are satisfied with
+    // this action. Wait to run the requests until after we update the
+    // pending queue because the request handler may synchronously
+    // dispatch again and run this service (that use case is
+    // completely valid).
+    for (const request of pending) {
+      if (request.predicate(action)) {
+        readyRequests.push(request);
+      } else {
+        stillPending.push(request);
+      }
+    }
+
+    pending = stillPending;
+    for (const request of readyRequests) {
+      request.run(dispatch, getState, action);
+    }
+  }
+
+  return (next: Dispatch<AnyAction>) =>
+    (action: AnyAction): null | AnyAction => {
+      if (action.type === WAIT_UNTIL_ACTION) {
+        pending.push(action as WaitAction);
+        return null;
+      }
+      const result = next(action);
+      checkPending(action);
+      return result;
+    };
+};

package/src/routing/__tests__/history.spec.ts

@@ -0,0 +1,49 @@
+import { createHashHistory } from 'history';
+import { mocked } from 'jest-mock';
+
+import type { History } from 'history';
+
+jest.mock('history');
+
+const history = { push: jest.fn(), replace: jest.fn() } as unknown as History;
+const mockedCreateHashHistory = mocked(createHashHistory);
+mockedCreateHashHistory.mockReturnValue(history);
+
+describe('history', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('navigateToCollection', () => {
+    it('should push route', () => {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const { navigateToCollection } = require('../history');
+
+      navigateToCollection('posts');
+      expect(history.push).toHaveBeenCalledTimes(1);
+      expect(history.push).toHaveBeenCalledWith('/collections/posts');
+    });
+  });
+
+  describe('navigateToNewEntry', () => {
+    it('should replace route', () => {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const { navigateToNewEntry } = require('../history');
+
+      navigateToNewEntry('posts');
+      expect(history.replace).toHaveBeenCalledTimes(1);
+      expect(history.replace).toHaveBeenCalledWith('/collections/posts/new');
+    });
+  });
+
+  describe('navigateToEntry', () => {
+    it('should replace route', () => {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const { navigateToEntry } = require('../history');
+
+      navigateToEntry('posts', 'index');
+      expect(history.replace).toHaveBeenCalledTimes(1);
+      expect(history.replace).toHaveBeenCalledWith('/collections/posts/entries/index');
+    });
+  });
+});