alpinesmuseum-public/assets/js/redux/middleware/catalog.js

import {
	FETCH_CATALOG_SUCCESS,
	FETCH_CATALOG_ERROR,
	GET_CATALOG,
	updateCatalog,
	SEARCH_CATALOG,
	SEARCH_CATALOG_SUCCESS,
	FILTER_CATALOG,
	FILTER_CATALOG_SUCCESS,
	UPDATE_CATALOG
} from '../actions/catalog';
import {
	showSpinner,
	toggleShowingSearchResults,
	hideSpinner,
	setMagnetInstance
} from '../actions/ui';
import { apiRequest } from '../actions/api';
import shuffleSeed from 'shuffle-seed';
import { UPDATE_ADS } from '../actions/ads';

const rand = () => Math.floor(Math.random() * 1000000) + 1;

// this middleware only care about the getCatalog action
export const getCatalogFlow = store => next => action => {
	next(action);

	const state = store.getState();
	if (action.type === GET_CATALOG && !state.ui.isPreLaunch) {
		store.dispatch(showSpinner());
		if (action.payload) {
			// if we want to clear the list
			store.dispatch(updateCatalog([]));
		}
		store.dispatch(apiRequest('GET', state.urls.items, null, FETCH_CATALOG_SUCCESS, FETCH_CATALOG_ERROR));
		store.dispatch(setMagnetInstance());
	}
};

// on successful fetch, process the catalog data
export const processCatalogCollection = ({ dispatch }) => next => action => {
	next(action);

	if (action.type === FETCH_CATALOG_SUCCESS) {
		dispatch(toggleShowingSearchResults(false));
		dispatch(updateCatalog(action.payload.catalog));
		dispatch(hideSpinner());
	}
};

export const searchCatalogFlow = (store) => next => action => {
	next(action);
	const state = store.getState();
	const url = new URL(state.urls.items, window.location.origin);
	url.searchParams.set("query", encodeURIComponent(action.payload));

	if (action.type === SEARCH_CATALOG) {
		store.dispatch(
			apiRequest(
				'GET',
				url.pathname + url.search,
				null,
				SEARCH_CATALOG_SUCCESS,
				FETCH_CATALOG_ERROR
			)
		);
		store.dispatch(showSpinner());
	}
};

export const updateCatalogFlow = store => next => action => {
	if (action.type === UPDATE_CATALOG || action.type === UPDATE_ADS) {
		const state = store.getState();
		if (action.type === UPDATE_ADS && state.catalog.length === 0) {
			next(action);
			return;
		}
		const ITEMS_PER_PAGE = 10;
		let ads = state.ads;
		if (action.type === UPDATE_ADS) {
			ads = action.payload
		}
		let items = state.catalog;
		if (action.type === UPDATE_CATALOG) {
			items = action.payload;
		}
		if (!state.ui.showingSearchResults && state.ui.isInternal) {
			items = items.concat(ads.filter(ad => {
				return !ad.show_per_page;
			}));
		}
		if (!state.ui.showingSearchResults && !state.ui.isInternal) {
			items = items.concat(ads);
		}
		const shuffled = shuffleSeed.shuffle(items, rand());
		const prio = shuffled.filter(item => {
			return item.prio;
		});
		const not_prio = shuffled.filter(item => {
			return !item.prio;
		});
		const all_items = prio.concat(not_prio);
		if(!state.ui.showingSearchResults && state.ui.isInternal) {
			const perPageAds = ads.filter(ad => {
				return ad.show_per_page;
			});
			const pages_count = parseInt((all_items.length - 1) /  ITEMS_PER_PAGE);
			for (let step = 1; step < pages_count; step++) {
				perPageAds.map((ad, i) => {
					let indx = (step) * ITEMS_PER_PAGE;
					all_items.splice(indx, 0, ad);
				});
			}
			console.log(all_items);
		}
		if (action.type === UPDATE_ADS) {
			store.dispatch(updateCatalog(all_items));
		} else {
			action.payload = all_items;
		}
	}
	next(action);
};

// on successful search, process the catalog data
export const processCatalogSearchCollection = ({ dispatch }) => next => action => {
	next(action);

	if (action.type === SEARCH_CATALOG_SUCCESS) {
		dispatch(toggleShowingSearchResults(true));
		dispatch(updateCatalog(action.payload.catalog));
		dispatch(hideSpinner());
	}
};

export const filterCatalogFlow = (store) => next => action => {
	next(action);

	const state = store.getState();
	if (action.type === FILTER_CATALOG) {
		const tagsStr = action.payload.join(',');
		const url = new URL(state.urls.items, window.location.origin);
		url.searchParams.set("tags", encodeURIComponent(tagsStr));
		store.dispatch(
			apiRequest(
				'GET',
				url.pathname + url.search,
				null,
				FILTER_CATALOG_SUCCESS,
				FETCH_CATALOG_ERROR
			)
		);
		store.dispatch(showSpinner());
	}
};

// on successful filter, process the catalog data
export const processCatalogFilterCollection = ({ dispatch }) => next => action => {
	next(action);

	if (action.type === FILTER_CATALOG_SUCCESS) {
		dispatch(toggleShowingSearchResults(true));
		dispatch(updateCatalog(action.payload.catalog));
		dispatch(hideSpinner());
	}
};

export const catalogMdl = [
	getCatalogFlow,
	searchCatalogFlow,
	processCatalogCollection,
	updateCatalogFlow,
	processCatalogSearchCollection,
	filterCatalogFlow,
	processCatalogFilterCollection
];