@selfcommunity/react-ui/lib/esm/components/EditCourse/Requests.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Stack, Typography } from '@mui/material';
import { FormattedMessage } from 'react-intl';
import { memo, useCallback, useEffect, useReducer, useRef } from 'react';
import { CacheStrategies, Logger } from '@selfcommunity/utils';
import { SCOPE_SC_UI } from '../../constants/Errors';
import Status from './Status';
import CourseUsersTable from '../../shared/CourseUsersTable';
import { DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
import { SCCache, useSCUser } from '@selfcommunity/react-core';
import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../utils/widget';
import { CourseService, Endpoints } from '@selfcommunity/api-services';
import { PREFIX } from './constants';
import PubSub from 'pubsub-js';
import { SCCourseEventType, SCTopicType } from '../../constants/PubSub';
import { SCCourseUsersTableModeType } from '../../types/course';
const classes = {
    usersStatusWrapper: `${PREFIX}-users-status-wrapper`,
    contrastColor: `${PREFIX}-contrast-color`
};
const headerCells = [
    {
        id: 'ui.editCourse.tab.users.table.header.name'
    },
    {
        id: 'ui.editCourse.tab.users.table.header.registration'
    },
    {
        id: 'ui.editCourse.tab.users.table.header.latestActivity'
    },
    {}
];
function Requests(props) {
    // PROPS
    const { course, endpointQueryParams = {
        limit: 6,
        offset: DEFAULT_PAGINATION_OFFSET
    }, handleTabChange } = props;
    // STATES
    const [state, dispatch] = useReducer(dataWidgetReducer, {
        isLoadingPrevious: false,
        isLoadingNext: false,
        next: null,
        cacheKey: SCCache.getWidgetStateCacheKey(SCCache.USERS_REQUESTS_COURSES_STATE_CACHE_PREFIX_KEY, course.id),
        cacheStrategy: CacheStrategies.NETWORK_ONLY,
        visibleItems: endpointQueryParams.limit
    }, stateWidgetInitializer);
    // CONTEXTS
    const scUserContext = useSCUser();
    // REFS
    const updatedUsers = useRef(null);
    // CALLBACKS
    const _init = useCallback(() => {
        if (!state.initialized && !state.isLoadingNext) {
            dispatch({ type: actionWidgetTypes.LOADING_NEXT });
            CourseService.getCourseWaitingApproval(course.id, Object.assign({}, endpointQueryParams))
                .then((payload) => {
                dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload), { initialized: true }) });
            })
                .catch((error) => {
                dispatch({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
                Logger.error(SCOPE_SC_UI, error);
            });
        }
    }, [state.isLoadingNext, state.initialized, course, dispatch, endpointQueryParams]);
    // HANDLERS
    const handleRejectUser = useCallback((_msg, user) => {
        dispatch({
            type: actionWidgetTypes.SET_RESULTS,
            payload: { count: state.results.length - 1, results: state.results.filter((result) => result.id !== user.id) }
        });
    }, [state.count, state.results, dispatch]);
    // EFFECTS
    useEffect(() => {
        let _t;
        if (scUserContext.user) {
            _t = setTimeout(_init);
            return () => {
                clearTimeout(_t);
            };
        }
    }, [scUserContext.user, _init]);
    useEffect(() => {
        updatedUsers.current = PubSub.subscribe(`${SCTopicType.COURSE}.${SCCourseEventType.REJECT_MEMBER}`, handleRejectUser);
        return () => {
            updatedUsers.current && PubSub.unsubscribe(updatedUsers.current);
        };
    }, [handleRejectUser]);
    return (_jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "h6", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.requests.title", defaultMessage: "ui.editCourse.tab.requests.title", values: { requestsNumber: state.results.length } }) })), _jsx(Stack, Object.assign({ className: classes.usersStatusWrapper }, { children: _jsx(Status, { course: course, handleTabChange: handleTabChange }) })), _jsx(CourseUsersTable, { state: state, dispatch: dispatch, course: course, endpointSearch: {
                    url: () => Endpoints.GetCourseWaitingApproval.url({ id: course.id }),
                    method: Endpoints.GetCourseWaitingApproval.method
                }, headerCells: headerCells, mode: SCCourseUsersTableModeType.REQUESTS, emptyStatusTitle: "ui.courseUsersTable.empty.requests.title" })] }));
}
export default memo(Requests);