@akemona-org/strapi-plugin-upload 3.7.0

package/admin/src/containers/HomePage/index.js

@@ -0,0 +1,373 @@
+import React, { useCallback, useReducer, useRef, useState, useEffect } from 'react';
+import { get, includes, toString, isEqual, intersectionWith } from 'lodash';
+import { useHistory, useLocation } from 'react-router-dom';
+import { Header } from '@buffetjs/custom';
+import { Button, Padded } from '@buffetjs/core';
+import {
+  PopUpWarning,
+  useGlobalContext,
+  generateFiltersFromSearch,
+  generateSearchFromFilters,
+  request,
+  useQuery,
+} from 'strapi-helper-plugin';
+import { formatFileForEditing, getRequestUrl, getTrad, getFileModelTimestamps } from '../../utils';
+import Container from '../../components/Container';
+import HomePageContent from './HomePageContent';
+import { useAppContext } from '../../hooks';
+import ModalStepper from '../ModalStepper';
+import { generateStringFromParams, getHeaderLabel } from './utils';
+import init from './init';
+import reducer, { initialState } from './reducer';
+
+const HomePage = () => {
+  const { allowedActions } = useAppContext();
+  const { canRead } = allowedActions;
+  const { formatMessage, plugins } = useGlobalContext();
+  const [, updated_at] = getFileModelTimestamps(plugins);
+  const [reducerState, dispatch] = useReducer(reducer, initialState, () =>
+    init(initialState, allowedActions)
+  );
+  const query = useQuery();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+  const [fileToEdit, setFileToEdit] = useState(null);
+  const [shouldRefetch, setShouldRefetch] = useState(false);
+  const [modalInitialStep, setModalInitialStep] = useState('browse');
+  const { push } = useHistory();
+  const { search } = useLocation();
+  const isMounted = useRef(true);
+  const {
+    data,
+    dataCount,
+    dataToDelete,
+    isLoading,
+    shouldRefetchData,
+    showModalConfirmButtonLoading,
+  } = reducerState.toJS();
+  const pluginName = formatMessage({ id: getTrad('plugin.name') });
+  const paramsKeys = ['_limit', '_start', '_q', '_sort'];
+
+  useEffect(() => {
+    return () => (isMounted.current = false);
+  }, []);
+
+  useEffect(() => {
+    fetchListData();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [search]);
+
+  const deleteMedia = async id => {
+    const requestURL = getRequestUrl(`files/${id}`);
+
+    try {
+      await request(requestURL, {
+        method: 'DELETE',
+      });
+
+      return Promise.resolve();
+    } catch (err) {
+      const errorMessage = get(err, 'response.payload.message', 'An error occured');
+
+      return Promise.reject(errorMessage);
+    }
+  };
+
+  const fetchData = async () => {
+    const dataRequestURL = getRequestUrl('files');
+    const params = generateStringFromParams(query);
+
+    const paramsToSend = params.includes('_sort')
+      ? params
+      : params.concat(`&_sort=${updated_at}:DESC`);
+
+    try {
+      const data = await request(`${dataRequestURL}?${paramsToSend}`, {
+        method: 'GET',
+      });
+
+      return Promise.resolve(data);
+    } catch (err) {
+      if (isMounted.current) {
+        dispatch({ type: 'GET_DATA_ERROR' });
+        strapi.notification.toggle({
+          type: 'warning',
+          message: { id: 'notification.error' },
+        });
+      }
+    }
+
+    return [];
+  };
+
+  const fetchDataCount = async () => {
+    const params = generateStringFromParams(query, ['_limit', '_sort', '_start']);
+    const requestURL = getRequestUrl('files/count');
+
+    try {
+      const { count } = await request(`${requestURL}?${params}`, {
+        method: 'GET',
+      });
+
+      return Promise.resolve(count);
+    } catch (err) {
+      if (isMounted.current) {
+        dispatch({ type: 'GET_DATA_ERROR' });
+        strapi.notification.toggle({
+          type: 'warning',
+          message: { id: 'notification.error' },
+        });
+      }
+    }
+
+    return null;
+  };
+
+  const fetchListData = async () => {
+    if (canRead) {
+      dispatch({ type: 'GET_DATA' });
+
+      const [data, count] = await Promise.all([fetchData(), fetchDataCount()]);
+
+      if (isMounted.current) {
+        dispatch({
+          type: 'GET_DATA_SUCCEEDED',
+          data,
+          count,
+        });
+      }
+    }
+  };
+
+  const generateNewSearch = (updatedParams = {}) => {
+    return {
+      ...getSearchParams(),
+      filters: generateFiltersFromSearch(search),
+      ...updatedParams,
+    };
+  };
+
+  const getSearchParams = () => {
+    const params = {};
+
+    query.forEach((value, key) => {
+      if (includes(paramsKeys, key)) {
+        params[key] = value;
+      }
+    });
+
+    return params;
+  };
+
+  const handleChangeCheck = ({ target: { name } }) => {
+    dispatch({
+      type: 'ON_CHANGE_DATA_TO_DELETE',
+      id: name,
+    });
+  };
+
+  const handleChangeParams = ({ target: { name, value } }) => {
+    let updatedQueryParams = generateNewSearch({ [name]: value });
+
+    if (name === 'filters') {
+      const existingFilters = generateFiltersFromSearch(search);
+      const canAddFilter = intersectionWith(existingFilters, [value], isEqual).length === 0;
+      updatedQueryParams = generateNewSearch({ [name]: existingFilters });
+
+      if (canAddFilter) {
+        const filters = [...existingFilters, value];
+
+        updatedQueryParams = generateNewSearch({ [name]: filters });
+      }
+    }
+
+    if (name === '_limit') {
+      updatedQueryParams = generateNewSearch({ [name]: value, _start: 0 });
+    }
+
+    const newSearch = generateSearchFromFilters(updatedQueryParams);
+
+    push({ search: newSearch });
+  };
+
+  const handleClickEditFile = id => {
+    if (allowedActions.canUpdate) {
+      const file = formatFileForEditing(data.find(file => toString(file.id) === toString(id)));
+
+      setFileToEdit(file);
+      setModalInitialStep('edit');
+      handleClickToggleModal();
+    }
+  };
+
+  const handleClickToggleModal = (refetch = false) => {
+    setIsModalOpen(prev => !prev);
+    setShouldRefetch(refetch);
+  };
+
+  const handleClickTogglePopup = () => {
+    setIsPopupOpen(prev => !prev);
+  };
+
+  const handleDeleteFilter = index => {
+    const filters = generateFiltersFromSearch(search).filter(
+      (filter, filterIndex) => filterIndex !== index
+    );
+
+    const updatedQueryParams = generateNewSearch({ filters });
+
+    const newSearch = generateSearchFromFilters(updatedQueryParams);
+
+    push({ search: newSearch });
+  };
+
+  const handleConfirmDeleteMedias = useCallback(async () => {
+    dispatch({ type: 'ON_DELETE_MEDIAS' });
+
+    try {
+      await Promise.all(dataToDelete.map(item => deleteMedia(item.id)));
+
+      dispatch({
+        type: 'ON_DELETE_MEDIAS_SUCCEEDED',
+      });
+    } catch (err) {
+      strapi.notification.toggle({
+        type: 'warning',
+        message: err,
+      });
+
+      dispatch({
+        type: 'ON_DELETE_MEDIAS_ERROR',
+      });
+    } finally {
+      setIsPopupOpen(false);
+    }
+  }, [dataToDelete]);
+
+  const handleClosedModalDeleteAll = useCallback(() => {
+    if (shouldRefetchData) {
+      fetchListData();
+    } else {
+      dispatch({ type: 'RESET_DATA_TO_DELETE' });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [shouldRefetchData]);
+
+  const handleModalClose = () => {
+    resetModalState();
+
+    if (shouldRefetch) {
+      fetchListData();
+      setShouldRefetch(false);
+    }
+  };
+
+  const handleSelectAll = () => {
+    dispatch({
+      type: 'TOGGLE_SELECT_ALL',
+    });
+  };
+
+  const resetModalState = () => {
+    setModalInitialStep('browse');
+    setFileToEdit(null);
+  };
+
+  const headerProps = {
+    title: {
+      label: pluginName,
+    },
+    /* eslint-disable indent */
+    content: canRead
+      ? formatMessage(
+          {
+            id: getTrad(getHeaderLabel(dataCount)),
+          },
+          { number: dataCount }
+        )
+      : null,
+    /* eslint-enable indent */
+    actions: [
+      {
+        disabled: dataToDelete.length === 0,
+        color: 'delete',
+        // TradId from the strapi-admin package
+        label: formatMessage({ id: 'app.utils.delete' }),
+        onClick: () => setIsPopupOpen(true),
+        type: 'button',
+        Component: buttonProps => {
+          if (!allowedActions.canUpdate) {
+            return null;
+          }
+
+          return <Button {...buttonProps} />;
+        },
+      },
+      {
+        disabled: false,
+        color: 'primary',
+        label: formatMessage({ id: getTrad('header.actions.upload-assets') }),
+        onClick: () => handleClickToggleModal(),
+        type: 'button',
+        Component: buttonProps => {
+          if (!allowedActions.canCreate) {
+            return null;
+          }
+
+          return <Button {...buttonProps} />;
+        },
+      },
+    ],
+  };
+
+  const handleRemoveFileFromDataToDelete = useCallback(id => {
+    dispatch({
+      type: 'ON_CHANGE_DATA_TO_DELETE',
+      id,
+    });
+  }, []);
+
+  const content = canRead ? (
+    <HomePageContent
+      data={data}
+      dataCount={dataCount}
+      dataToDelete={dataToDelete}
+      isLoading={isLoading}
+      onCardCheck={handleChangeCheck}
+      onCardClick={handleClickEditFile}
+      onClick={handleClickToggleModal}
+      onFilterDelete={handleDeleteFilter}
+      onParamsChange={handleChangeParams}
+      onSelectAll={handleSelectAll}
+    />
+  ) : null;
+
+  return (
+    <Container>
+      <Header {...headerProps} isLoading={isLoading} />
+      {content}
+      <ModalStepper
+        initialFileToEdit={fileToEdit}
+        initialStep={modalInitialStep}
+        isOpen={isModalOpen}
+        onClosed={handleModalClose}
+        onRemoveFileFromDataToDelete={handleRemoveFileFromDataToDelete}
+        onToggle={handleClickToggleModal}
+        refetchData={fetchListData}
+      />
+      <PopUpWarning
+        isOpen={isPopupOpen}
+        isConfirmButtonLoading={showModalConfirmButtonLoading}
+        onConfirm={handleConfirmDeleteMedias}
+        onClosed={handleClosedModalDeleteAll}
+        toggleModal={handleClickTogglePopup}
+        popUpWarningType="danger"
+      />
+      <Padded bottom size="md" />
+      <Padded bottom size="md" />
+    </Container>
+  );
+};
+
+export default HomePage;

package/admin/src/containers/HomePage/init.js

@@ -0,0 +1,5 @@
+const init = (initialState, allowedActions) => {
+  return initialState.set('isLoading', allowedActions.canRead);
+};
+
+export default init;

package/admin/src/containers/HomePage/reducer.js

@@ -0,0 +1,88 @@
+import { fromJS } from 'immutable';
+
+const initialState = fromJS({
+  data: [],
+  dataCount: 0,
+  dataToDelete: [],
+  isLoading: true,
+  showModalConfirmButtonLoading: false,
+  shouldRefetchData: false,
+});
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'CLEAR_DATA_TO_DELETE':
+      return state.update('dataToDelete', () => fromJS([]));
+    case 'GET_DATA':
+      return state.update('isLoading', () => true);
+    case 'GET_DATA_ERROR':
+      return state.update('isLoading', () => false);
+    case 'GET_DATA_SUCCEEDED':
+      return state
+        .update('data', () => fromJS(action.data))
+        .update('dataCount', () => action.count)
+        .update('isLoading', () => false);
+    case 'ON_CHANGE_DATA_TO_DELETE': {
+      const { id } = action;
+      const isSelected = state
+        .get('dataToDelete')
+        .find(item => item.get('id').toString() === id.toString());
+
+      if (!isSelected) {
+        const item = state.get('data').find(item => item.get('id').toString() === id.toString());
+
+        return state.update('dataToDelete', dataToDelete => {
+          return dataToDelete.push(item);
+        });
+      }
+
+      const index = state
+        .get('dataToDelete')
+        .findIndex(item => item.get('id').toString() === id.toString());
+
+      return state.removeIn(['dataToDelete', index]);
+    }
+    case 'ON_DELETE_MEDIAS': {
+      return state.update('showModalConfirmButtonLoading', () => true);
+    }
+    case 'ON_DELETE_MEDIAS_SUCCEEDED': {
+      return state
+        .update('dataToDelete', () => fromJS([]))
+        .update('shouldRefetchData', () => true)
+        .update('showModalConfirmButtonLoading', () => false);
+    }
+    case 'ON_DELETE_MEDIAS_ERROR': {
+      return state
+        .update('dataToDelete', () => fromJS([]))
+        .update('showModalConfirmButtonLoading', () => false);
+    }
+    case 'RESET_DATA_TO_DELETE': {
+      return state
+        .update('dataToDelete', () => fromJS([]))
+        .update('shouldRefetchData', () => false)
+        .update('showModalConfirmButtonLoading', () => false);
+    }
+    case 'TOGGLE_SELECT_ALL': {
+      const isSelected = state.get('data').every(item => state.get('dataToDelete').includes(item));
+
+      if (isSelected) {
+        return state.update('dataToDelete', dataToDelete =>
+          dataToDelete.filter(item => !state.get('data').includes(item))
+        );
+      }
+
+      return state.update('dataToDelete', dataToDelete => {
+        const newItems = state.get('data').filter(item => {
+          return !state.get('dataToDelete').includes(item);
+        });
+
+        return dataToDelete.concat(newItems);
+      });
+    }
+    default:
+      return state;
+  }
+};
+
+export default reducer;
+export { initialState };

package/admin/src/containers/HomePage/utils/generateParamsFromQuery.js

@@ -0,0 +1,14 @@
+const generateParamsFromQuery = query => {
+  const params = {
+    _limit: 10,
+    _start: 0,
+  };
+
+  query.forEach((value, key) => {
+    params[key] = value;
+  });
+
+  return params;
+};
+
+export default generateParamsFromQuery;

package/admin/src/containers/HomePage/utils/generateStringFromParams.js

@@ -0,0 +1,27 @@
+import { isEmpty, toString } from 'lodash';
+import generateParamsFromQuery from './generateParamsFromQuery';
+
+const generateStringFromParams = (query, paramsToFilter = []) => {
+  let paramsString = '';
+  const paramsObject = generateParamsFromQuery(query);
+
+  Object.keys(paramsObject)
+    .filter(key => {
+      return !paramsToFilter.includes(key) && !isEmpty(toString(paramsObject[key]));
+    })
+    .forEach(key => {
+      const value = paramsObject[key];
+
+      if (key.includes('mime') && value === 'file') {
+        const revertedKey = key.includes('_ncontains') ? 'mime_contains' : 'mime_ncontains';
+
+        paramsString += `&${revertedKey}=image&${revertedKey}=video`;
+      } else {
+        paramsString += `&${key}=${value}`;
+      }
+    });
+
+  return paramsString.substring(1);
+};
+
+export default generateStringFromParams;

package/admin/src/containers/HomePage/utils/getHeaderLabel.js

@@ -0,0 +1,13 @@
+const getHeaderLabel = count => {
+  let headerLabel = 'header.content.assets-single';
+
+  if (count === 0) {
+    headerLabel = 'header.content.assets-empty';
+  } else if (count > 1) {
+    headerLabel = 'header.content.assets-multiple';
+  }
+
+  return headerLabel;
+};
+
+export default getHeaderLabel;

package/admin/src/containers/HomePage/utils/index.js

@@ -0,0 +1,2 @@
+export { default as generateStringFromParams } from './generateStringFromParams';
+export { default as getHeaderLabel } from './getHeaderLabel';

package/admin/src/containers/Initializer/index.js

@@ -0,0 +1,44 @@
+/**
+ *
+ * Initializer
+ *
+ */
+
+import { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { request } from 'strapi-helper-plugin';
+import pluginId from '../../pluginId';
+
+const Initializer = ({ updatePlugin }) => {
+  const ref = useRef();
+  ref.current = updatePlugin;
+
+  useEffect(() => {
+    const getData = async () => {
+      const requestURL = '/content-manager/content-types';
+
+      try {
+        const { data } = await request(requestURL, { method: 'GET' });
+        const fileModel = data.find(model => model.uid === 'plugins::upload.file');
+
+        ref.current(pluginId, 'fileModel', fileModel);
+        ref.current(pluginId, 'isReady', true);
+      } catch (err) {
+        strapi.notification.toggle({
+          type: 'warning',
+          message: { id: 'content-manager.error.model.fetch' },
+        });
+      }
+    };
+
+    getData();
+  }, []);
+
+  return null;
+};
+
+Initializer.propTypes = {
+  updatePlugin: PropTypes.func.isRequired,
+};
+
+export default Initializer;

package/admin/src/containers/InputModalStepper/HeaderSearch.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { HeaderSearch as BaseHeaderSearch } from 'strapi-helper-plugin';
+
+const HeaderSearch = styled(BaseHeaderSearch)`
+  position: relative;
+  margin-top: -1px;
+  line-height: 5.8rem;
+  border-right: none;
+  background-color: transparent;
+`;
+
+export default HeaderSearch;