芝麻web文件管理V1.00

编辑当前文件:/home/freeclou/app.optimyar.com/backend/.cache/admin/src/containers/Users/ListPage/index.js

import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
import {
  BaselineAlignment,
  useQuery,
  request,
  useUserPermissions,
  LoadingIndicatorPage,
  PopUpWarning,
} from 'strapi-helper-plugin';
import { get } from 'lodash';
import { useHistory, useLocation } from 'react-router-dom';
import { Flex, Padded } from '@buffetjs/core';
import PageTitle from '../../../components/SettingsPageTitle';
import { useSettingsHeaderSearchContext } from '../../../hooks';
import { Footer, List, Filter, FilterPicker, SortPicker } from '../../../components/Users';
import adminPermissions from '../../../permissions';
import Header from './Header';
import ModalForm from './ModalForm';
import getFilters from './utils/getFilters';
import init from './init';
import { initialState, reducer } from './reducer';

const [
    {
      data,
      dataToDelete,
      isLoading,
      pagination: { total },
      shouldRefetchData,
      showModalConfirmButtonLoading,
    },
    dispatch,
  ] = useReducer(reducer, initialState, init);
  const pageSize = parseInt(query.get('pageSize') || 10, 10);
  const page = parseInt(query.get('page') || 0, 10);
  const _sort = decodeURIComponent(query.get('_sort'));
  const _q = decodeURIComponent(query.get('_q') || '');
  const getDataRef = useRef();
  const listRef = useRef();

getDataRef.current = async () => {
    if (!canRead) {
      dispatch({
        type: 'UNSET_IS_LOADING',
      });

return;
    }
    // Show the loading state and reset the state
    dispatch({
      type: 'GET_DATA',
    });

try {
      const {
        data: { results, pagination },
      } = await request(`/admin/users${search}`, { method: 'GET' });

dispatch({
        type: 'GET_DATA_SUCCEEDED',
        data: results,
        pagination,
      });
    } catch (err) {
      console.error(err.response);
      strapi.notification.toggle({
        type: 'warning',
        message: { id: 'notification.error' },
      });
    }
  };

useEffect(() => {
    if (!isLoadingForPermissions) {
      getDataRef.current();
    }
  }, [search, isLoadingForPermissions]);

useEffect(() => {
    if (canRead) {
      toggleHeaderSearch({ id: 'Settings.permissions.menu.link.users.label' });
    }

return () => {
      if (canRead) {
        toggleHeaderSearch();
      }
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [canRead]);

const handleChangeDataToDelete = ids => {
    dispatch({
      type: 'ON_CHANGE_DATA_TO_DELETE',
      dataToDelete: ids,
    });
  };

const handleChangeFilter = ({ filter, name, value }) => {
    const filterName = `${name}${filter}`;

updateSearchParams(filterName, encodeURIComponent(value), true);
  };

const handleChangeFooterParams = ({ target: { name, value } }) => {
    let paramName = name.split('.')[1].replace('_', '');

if (paramName === 'limit') {
      paramName = 'pageSize';
    }

updateSearchParams(paramName, value);
  };

const handleChangeSort = ({ target: { name, value } }) => {
    updateSearchParams(name, value);
  };

const handleClickDeleteFilter = ({ target: { name } }) => {
    const currentSearch = new URLSearchParams(search);

currentSearch.delete(name);

push({ search: currentSearch.toString() });
  };

const handleClickDelete = useCallback(id => {
    handleToggleModal();

dispatch({
      type: 'ON_CHANGE_DATA_TO_DELETE',
      dataToDelete: [id],
    });
  }, []);

const handleCloseModal = () => {
    // Refetch data
    getDataRef.current();
  };

const handleClosedModalDelete = () => {
    if (shouldRefetchData) {
      getDataRef.current();
    } else {
      // Empty the selected ids when the modal closes
      dispatch({
        type: 'RESET_DATA_TO_DELETE',
      });

// Reset the list's reducer dataToDelete state using a ref so we don't need an effect
      listRef.current.resetDataToDelete();
    }
  };

const handleConfirmDeleteData = useCallback(async () => {
    dispatch({
      type: 'ON_DELETE_USERS',
    });

let shouldDispatchSucceededAction = false;

try {
      await request('/admin/users/batch-delete', {
        method: 'POST',
        body: {
          ids: dataToDelete,
        },
      });
      shouldDispatchSucceededAction = true;
    } catch (err) {
      const errorMessage = get(err, 'response.payload.data', 'An error occured');

strapi.notification.toggle({
        type: 'warning',
        message: errorMessage,
      });
    }

// Only dispatch the action once
    if (shouldDispatchSucceededAction) {
      dispatch({
        type: 'ON_DELETE_USERS_SUCCEEDED',
      });
    }

handleToggleModal();
  }, [dataToDelete]);

const handleToggle = () => setIsModalOpened(prev => !prev);

const handleToggleModal = () => setIsWarningDeleteAllOpened(prev => !prev);

const updateSearchParams = (name, value, shouldDeleteSearch = false) => {
    const currentSearch = new URLSearchParams(search);
    // Update the currentSearch
    currentSearch.set(name, value);

if (shouldDeleteSearch) {
      currentSearch.delete('_q');
    }

push({
      search: currentSearch.toString(),
    });
  };

if (isLoadingForPermissions) {
    return <LoadingIndicatorPage />;
  }

return (
    <div>
      <PageTitle name="Users" />
      <Header
        canCreate={canCreate}
        canDelete={canDelete}
        canRead={canRead}
        count={total}
        dataToDelete={dataToDelete}
        onClickAddUser={handleToggle}
        onClickDelete={handleToggleModal}
        isLoading={isLoading}
      />
      {canRead && (
        <>
          <BaselineAlignment top size="1px">
            <Flex flexWrap="wrap">
              <SortPicker onChange={handleChangeSort} value={_sort} />
              <Padded right size="10px" />
              <BaselineAlignment bottom size="6px">
                <FilterPicker onChange={handleChangeFilter} />
              </BaselineAlignment>
              <Padded right size="10px" />
              {filters.map((filter, i) => (
                // eslint-disable-next-line react/no-array-index-key
                <Filter key={i} {...filter} onClick={handleClickDeleteFilter} />
              ))}
            </Flex>
          </BaselineAlignment>
          <BaselineAlignment top size="8px" />
          <Padded top size="sm">
            <List
              canDelete={canDelete}
              canUpdate={canUpdate}
              dataToDelete={dataToDelete}
              isLoading={isLoading}
              data={data}
              onChange={handleChangeDataToDelete}
              onClickDelete={handleClickDelete}
              searchParam={_q}
              filters={filters}
              ref={listRef}
            />
          </Padded>
          <Footer
            count={total}
            onChange={handleChangeFooterParams}
            params={{ _limit: pageSize, _page: page }}
          />
        </>
      )}
      <ModalForm isOpen={isModalOpened} onClosed={handleCloseModal} onToggle={handleToggle} />
      <PopUpWarning
        isOpen={isWarningDeleteAllOpened}
        onClosed={handleClosedModalDelete}
        onConfirm={handleConfirmDeleteData}
        toggleModal={handleToggleModal}
        isConfirmButtonLoading={showModalConfirmButtonLoading}
      />
    </div>
  );
};

export default ListPage;