@jetshop/core/hooks/ProductList/ProductListContext.js

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { useEffect, useMemo } from 'react';
import { useMutation, useQuery } from 'react-apollo';
import useAuth from '../../components/AuthContext/useAuth';
import { useThunkReducer } from '../useThunkReducer';
import { loginAction, refreshAction } from './action-creators';
import { normalizeServerList } from './list-transforms';
import { init, reducer } from './product-list-reducer';
export const ProductListContext = React.createContext(undefined);
// TODO: Provider could take id in order to scope all CRUD to that list id
export const ProductListProvider = function ProductListProvider(_a) {
    var { queries, initialState = {} } = _a, rest = __rest(_a, ["queries", "initialState"]);
    const { loggedIn } = useAuth();
    const requestIdRef = React.useRef(null);
    const { data: serverList } = useQuery(queries.query, {
        variables: { id: null },
        skip: !loggedIn
    });
    const defaultInitialState = Object.assign({ loggedIn,
        requestIdRef, list: normalizeServerList(serverList) }, initialState);
    const [state, dispatch] = useThunkReducer(reducer, defaultInitialState, initialState => init(initialState));
    const usingLocalList = !state.loggedIn;
    usePersistLocalList({ list: state.list });
    useLocalStorageListener({ refresh });
    const [loginMutation] = useMutation(queries.login);
    function refresh() {
        dispatch(refreshAction());
    }
    useEffect(() => {
        if (loggedIn === state.loggedIn)
            return;
        loggedIn
            ? dispatch(loginAction({ loginMutation }))
            : dispatch({ type: 'LOGOUT' });
    }, [dispatch, loggedIn, loginMutation, state.loggedIn]);
    const value = useMemo(() => ({
        state,
        dispatch,
        queries,
        usingLocalList
    }), [dispatch, queries, state, usingLocalList]);
    // We spread props here so during testing we can override value
    return React.createElement(ProductListContext.Provider, Object.assign({ value: value }, rest));
};
/**
 * Persist local list to localStorage on every change
 */
function usePersistLocalList({ list }) {
    useEffect(() => {
        localStorage.setItem('productList', JSON.stringify(list));
    }, [list]);
}
function useLocalStorageListener({ refresh }) {
    useEffect(() => {
        const listener = (e) => {
            if (e.storageArea === localStorage && e.key === 'productList') {
                refresh();
            }
        };
        window.addEventListener('storage', listener);
        return () => {
            window.removeEventListener('storage', listener);
        };
    }, []);
}
//# sourceMappingURL=ProductListContext.js.map