strapi-plugin-navigation 3.0.0-beta.0 → 3.0.0-beta.2

package/admin/pages/HomePage/components/NavigationManager/index.js

@@ -1,236 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Flex, Loader, Modal } from '@strapi/design-system';
-import { useNotification } from '@strapi/strapi/admin';
-import { sortBy } from 'lodash';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useIntl } from 'react-intl';
-import { getTrad } from '../../../../translations';
-import { useCreateNavigation, useDeleteNavigations, useHardReset, useLocale, useNavigations, usePurgeNavigation, useUpdateNavigation, } from '../../hooks';
-import { getPendingAction } from '../../utils';
-import { AllNavigations, AllNavigationsFooter } from './AllNavigations';
-import { DeleteConfirmFooter, DeletionConfirm } from './DeletionConfirm';
-import { ErrorDetails, ErrorDetailsFooter } from './ErrorDetails';
-import { NavigationUpdate, NavigationUpdateFooter } from './NavigationUpdate';
-import { NewNavigation, NewNavigationFooter } from './NewNavigation';
-import { PurgeCacheConfirm, PurgeCacheConfirmFooter } from './PurgeCacheConfirm';
-import { Typography } from '@strapi/design-system';
-export const NavigationManager = ({ initialState, isOpened, onClose }) => {
-    const { formatMessage } = useIntl();
-    const [state, setState] = useState(initialState);
-    const { toggleNotification } = useNotification();
-    const hardReset = useHardReset();
-    const deleteNavigationsMutation = useDeleteNavigations();
-    const createNavigationMutation = useCreateNavigation();
-    const updateNavigationMutation = useUpdateNavigation();
-    const purgeNavigationsMutation = usePurgeNavigation();
-    const navigationsQuery = useNavigations();
-    const localeQuery = useLocale();
-    const navigations = useMemo(() => sortBy(navigationsQuery.data ?? [], 'id'), [navigationsQuery.data]);
-    const pending = getPendingAction([
-        deleteNavigationsMutation,
-        navigationsQuery,
-        createNavigationMutation,
-        updateNavigationMutation,
-        purgeNavigationsMutation,
-        localeQuery,
-    ]);
-    const onReset = useCallback(() => setState({ view: 'INITIAL' }), [setState]);
-    const onSubmit = useCallback(async () => {
-        const performAction = state.view === 'DELETE'
-            ? () => {
-                deleteNavigationsMutation.mutate(state.navigations.reduce((acc, navigation) => {
-                    if (navigation.id) {
-                        acc.push(navigation.id);
-                    }
-                    return acc;
-                }, []), {
-                    onSuccess: hardReset,
-                });
-            }
-            : state.view === 'EDIT'
-                ? () => {
-                    updateNavigationMutation.mutate(state.current, {
-                        onSuccess() {
-                            hardReset();
-                            toggleNotification({
-                                type: 'success',
-                                message: formatMessage(getTrad('notification.navigation.submit')),
-                            });
-                        },
-                        onError(error) {
-                            // TODO: handle errors
-                            console.warn(error);
-                            toggleNotification({
-                                type: 'warning',
-                                message: formatMessage(getTrad('notification.navigation.error'), {
-                                    errorTitles: '',
-                                }),
-                            });
-                        },
-                    });
-                }
-                : state.view === 'CREATE' && state.current
-                    ? () => {
-                        createNavigationMutation.mutate(state.current, {
-                            onSuccess() {
-                                hardReset();
-                                toggleNotification({
-                                    type: 'success',
-                                    message: formatMessage(getTrad('notification.navigation.submit')),
-                                });
-                            },
-                            onError(error) {
-                                // TODO: handle errors
-                                console.warn(error);
-                                toggleNotification({
-                                    type: 'warning',
-                                    message: formatMessage(getTrad('notification.navigation.error'), {
-                                        errorTitles: '',
-                                    }),
-                                });
-                            },
-                        });
-                    }
-                    : state.view === 'CACHE_PURGE'
-                        ? () => {
-                            purgeNavigationsMutation.mutate(state.navigations.reduce((acc, navigation) => {
-                                if (navigation.id) {
-                                    acc.push(navigation.id);
-                                }
-                                return acc;
-                            }, []), {
-                                onSuccess: hardReset,
-                            });
-                        }
-                        : () => { };
-        try {
-            performAction();
-            setState({ view: 'INITIAL' });
-        }
-        catch (error) {
-            setState({
-                view: 'ERROR',
-                errors: error instanceof Error ? [error] : [],
-            });
-        }
-    }, [
-        state,
-        setState,
-        hardReset,
-        createNavigationMutation,
-        purgeNavigationsMutation,
-        updateNavigationMutation,
-        deleteNavigationsMutation,
-        toggleNotification,
-        formatMessage,
-        getTrad,
-    ]);
-    useEffect(() => {
-        if (state.view === 'INITIAL' || state.view === 'LIST') {
-            setState({
-                view: 'LIST',
-                navigations,
-                selected: [],
-            });
-        }
-    }, [state.view, navigations]);
-    const header = renderHeader(state, formatMessage, !!pending);
-    const content = renderContent(state, setState, !!pending);
-    const footer = renderFooter({
-        state,
-        setState,
-        onClose,
-        onSubmit,
-        onReset,
-        navigations,
-        isLoading: !!pending,
-    });
-    return (_jsx(Modal.Root, { labelledBy: "condition-modal-breadcrumbs", onOpenChange: (isOpen) => {
-            if (!isOpen) {
-                onClose?.();
-            }
-        }, open: isOpened, children: _jsxs(Modal.Content, { children: [_jsx(Modal.Header, { children: _jsx(Typography, { variant: "omega", fontWeight: "bold", textColor: "neutral800", as: "h2", children: header }) }), _jsx(Modal.Body, { children: content }), footer] }) }));
-};
-const renderHeader = (state, formatMessage, isLoading) => {
-    switch (state.view) {
-        case 'LIST':
-        case 'CREATE':
-        case 'ERROR':
-        case 'CACHE_PURGE':
-        case 'DELETE': {
-            return (_jsxs(Flex, { direction: "row", children: [isLoading ? _jsx(Loader, { small: true }) : null, formatMessage(getTrad(`popup.navigation.manage.header.${state.view}`))] }));
-        }
-        case 'EDIT': {
-            return (_jsxs(Flex, { direction: "row", children: [isLoading ? _jsx(Loader, { small: true }) : null, formatMessage(getTrad('popup.navigation.manage.header.EDIT'), {
-                        name: state.navigation.name,
-                    })] }));
-        }
-        case 'INITIAL': {
-            return null;
-        }
-        default:
-            return handleUnknownState(state);
-    }
-};
-const renderContent = (state, setState, isLoading) => {
-    const commonProps = {
-        setState,
-        isLoading,
-    };
-    switch (state.view) {
-        case 'LIST': {
-            return _jsx(AllNavigations, { ...state, ...commonProps });
-        }
-        case 'EDIT': {
-            return _jsx(NavigationUpdate, { ...state, ...commonProps });
-        }
-        case 'CREATE': {
-            return _jsx(NewNavigation, { ...state, ...commonProps });
-        }
-        case 'DELETE': {
-            return _jsx(DeletionConfirm, { ...state, ...commonProps });
-        }
-        case 'CACHE_PURGE': {
-            return _jsx(PurgeCacheConfirm, { ...state, ...commonProps });
-        }
-        case 'INITIAL': {
-            return _jsx(Loader, { small: true });
-        }
-        case 'ERROR': {
-            return _jsx(ErrorDetails, { ...state, ...commonProps });
-        }
-        default:
-            return handleUnknownState(state);
-    }
-};
-const renderFooter = (props) => {
-    switch (props.state.view) {
-        case 'LIST': {
-            return _jsx(AllNavigationsFooter, { ...props });
-        }
-        case 'CREATE': {
-            return _jsx(NewNavigationFooter, { ...props });
-        }
-        case 'EDIT': {
-            return _jsx(NavigationUpdateFooter, { ...props });
-        }
-        case 'DELETE': {
-            return _jsx(DeleteConfirmFooter, { ...props });
-        }
-        case 'CACHE_PURGE': {
-            return _jsx(PurgeCacheConfirmFooter, { ...props });
-        }
-        case 'ERROR': {
-            return _jsx(ErrorDetailsFooter, { ...props });
-        }
-        case 'INITIAL': {
-            return null;
-        }
-        default:
-            return handleUnknownState(props.state);
-    }
-};
-const handleUnknownState = (state) => {
-    console.warn(`Unknown state "${state?.view}". (${JSON.stringify(state)})`);
-    return null;
-};

package/admin/pages/HomePage/components/NavigationManager/types.js

@@ -1 +0,0 @@
-export {};

package/admin/pages/HomePage/components/Search/index.js

@@ -1,58 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconButton, Searchbar, Typography } from '@strapi/design-system';
-import { Search as SearchIcon } from '@strapi/icons';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useIntl } from 'react-intl';
-import { getTrad } from '../../../../translations';
-const DEFAULT_INDEX = 0;
-export const Search = ({ value, setValue, initialIndex = DEFAULT_INDEX }) => {
-    const [currentValue, setCurrentValue] = useState(value);
-    const [previousValue, setPreviousValue] = useState(value);
-    const [currentIndex, setCurrentIndex] = useState(initialIndex);
-    const [isOpen, setIsOpen] = useState(!!value);
-    const wrapperRef = useRef(null);
-    const { formatMessage } = useIntl();
-    useEffect(() => {
-        if (isOpen) {
-            setTimeout(() => {
-                wrapperRef.current?.querySelector('input')?.focus();
-            }, 0);
-        }
-    }, [isOpen]);
-    useEffect(() => {
-        if (currentIndex && currentValue === previousValue) {
-            setValue({
-                value: currentValue,
-                index: currentIndex,
-            });
-        }
-    }, [currentIndex, currentValue, previousValue]);
-    useEffect(() => {
-        if (currentValue !== previousValue) {
-            setPreviousValue(currentValue);
-            setCurrentIndex(DEFAULT_INDEX);
-            setValue({
-                value: currentValue,
-                index: DEFAULT_INDEX,
-            });
-        }
-    }, [currentValue, previousValue]);
-    const onKeyDown = useCallback((e) => {
-        if (e.code.toLowerCase() === 'enter') {
-            setCurrentIndex((current) => current + 1);
-        }
-    }, []);
-    const onChange = useCallback((e) => {
-        setCurrentValue(e.target.value);
-    }, [setCurrentValue]);
-    const onClear = useCallback(() => {
-        setCurrentValue('');
-        setIsOpen(false);
-    }, [setCurrentValue, setIsOpen]);
-    if (isOpen) {
-        return (_jsxs("div", { ref: wrapperRef, children: [_jsx(Searchbar, { name: "searchbar", onClear: onClear, value: value, size: "S", onChange: onChange, clearLabel: "Clearing the search", placeholder: formatMessage(getTrad('pages.main.search.placeholder', 'Type to start searching...')), onKeyDown: onKeyDown, children: "Search for navigation items" }), _jsx(Typography, { variant: "pi", fontColor: "neutral150", style: { margin: '3px 0 0', display: 'inline-block' }, children: formatMessage(getTrad('pages.main.search.subLabel', 'press ENTER to highlight next item')) })] }));
-    }
-    else {
-        return _jsx(IconButton, { children: _jsx(SearchIcon, {}), onClick: () => setIsOpen(!isOpen) });
-    }
-};

package/admin/pages/HomePage/hooks/index.js

@@ -1,165 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { getFetchClient } from '@strapi/strapi/admin';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useCallback, useMemo, useState } from 'react';
-import { getApiClient } from '../../../api';
-import { I18nCopyNavigationItemsModal } from '../components/I18nCopyNavigationItems';
-export const useLocale = () => {
-    const fetch = getFetchClient();
-    const apiClient = getApiClient(fetch);
-    return useQuery({
-        queryKey: apiClient.readLocaleIndex(),
-        queryFn: apiClient.readLocale,
-        staleTime: Infinity,
-    });
-};
-export const useContentTypeItems = (input) => {
-    const fetch = getFetchClient();
-    const apiClient = getApiClient(fetch);
-    return useQuery({
-        queryKey: apiClient.readContentTypeItemsIndex(input),
-        queryFn: () => apiClient.readContentTypeItems(input),
-        staleTime: 1000 * 60 * 3,
-        enabled: !!input.uid,
-    });
-};
-export const useContentTypes = () => {
-    const fetch = getFetchClient();
-    const apiClient = getApiClient(fetch);
-    return useQuery({
-        queryKey: apiClient.readContentTypeIndex(),
-        queryFn: () => apiClient.readContentType(),
-        staleTime: 1000 * 60 * 3,
-    });
-};
-export const useNavigations = () => {
-    const fetch = getFetchClient();
-    const apiClient = getApiClient(fetch);
-    return useQuery({
-        queryKey: apiClient.readAllIndex(),
-        queryFn() {
-            return apiClient.readAll().then((navigations) => navigations.map((navigation) => ({
-                ...navigation,
-                items: navigation.items.map(appendViewId),
-            })));
-        },
-        staleTime: 1000 * 60 * 5,
-    });
-};
-export const useHardReset = () => {
-    const client = useQueryClient();
-    const fetch = getFetchClient();
-    const apiClient = getApiClient(fetch);
-    return useCallback(() => {
-        client.invalidateQueries({
-            queryKey: apiClient.getIndexPrefix(),
-        });
-    }, [client, fetch, apiClient]);
-};
-export const useDeleteNavigations = () => {
-    const fetch = getFetchClient();
-    const apiClient = getApiClient(fetch);
-    return useMutation({
-        mutationFn(ids) {
-            return Promise.all(ids.map(apiClient.delete));
-        },
-    });
-};
-export const useCopyNavigationItemI18n = () => {
-    const fetch = getFetchClient();
-    const apiClient = getApiClient(fetch);
-    return useMutation({
-        mutationFn: apiClient.copyNavigationItemLocale,
-    });
-};
-export const useCopyNavigationI18n = () => {
-    const fetch = getFetchClient();
-    const apiClient = getApiClient(fetch);
-    // TODO: nicer cache update
-    const queryClient = useQueryClient();
-    return useMutation({
-        mutationFn: apiClient.copyNavigationLocale,
-        onSuccess() {
-            queryClient.invalidateQueries({
-                queryKey: apiClient.readAllIndex(),
-            });
-        },
-    });
-};
-export const useCreateNavigation = () => {
-    const fetch = getFetchClient();
-    const apiClient = getApiClient(fetch);
-    // TODO: nicer cache update
-    const queryClient = useQueryClient();
-    return useMutation({
-        mutationFn: apiClient.create,
-        onSuccess() {
-            queryClient.invalidateQueries({
-                queryKey: apiClient.readAllIndex(),
-            });
-        },
-    });
-};
-export const useUpdateNavigation = (onSuccess) => {
-    const fetch = getFetchClient();
-    const apiClient = getApiClient(fetch);
-    // TODO: nicer cache update
-    const queryClient = useQueryClient();
-    return useMutation({
-        mutationFn: apiClient.update,
-        onSuccess() {
-            queryClient.invalidateQueries({
-                queryKey: apiClient.readAllIndex(),
-            });
-            onSuccess?.();
-        },
-    });
-};
-export const usePurgeNavigation = () => {
-    const fetch = getFetchClient();
-    const apiClient = getApiClient(fetch);
-    return useMutation({
-        mutationFn(ids) {
-            if (!ids?.length) {
-                return apiClient.purge({});
-            }
-            return Promise.all(ids.map((id) => apiClient.purge({ id, withLangVersions: true })));
-        },
-    });
-};
-export const useConfig = () => {
-    const fetch = getFetchClient();
-    const apiClient = getApiClient(fetch);
-    return useQuery({
-        queryKey: apiClient.readConfigIndex(),
-        queryFn: apiClient.readConfig,
-    });
-};
-export const useI18nCopyNavigationItemsModal = (onConfirm) => {
-    const [isOpened, setIsOpened] = useState(false);
-    const [sourceLocale, setSourceLocale] = useState(undefined);
-    const onCancel = useCallback(() => {
-        setIsOpened(false);
-    }, [setIsOpened]);
-    const onConfirmWithModalClose = useCallback(() => {
-        if (!sourceLocale) {
-            return;
-        }
-        onConfirm(sourceLocale);
-        setIsOpened(false);
-    }, [onConfirm, sourceLocale]);
-    const modal = useMemo(() => isOpened ? (_jsx(I18nCopyNavigationItemsModal, { onConfirm: onConfirmWithModalClose, onCancel: onCancel })) : null, [isOpened, onConfirmWithModalClose, onCancel]);
-    return useMemo(() => ({
-        setI18nCopyModalOpened: setIsOpened,
-        setI18nCopySourceLocale: setSourceLocale,
-        i18nCopyItemsModal: modal,
-        i18nCopySourceLocale: sourceLocale,
-    }), [setSourceLocale, setIsOpened, modal, sourceLocale]);
-};
-const appendViewId = (item) => {
-    return {
-        ...item,
-        viewId: Math.floor(Math.random() * 1520000),
-        items: item.items?.map(appendViewId),
-    };
-};