@blaze-cms/plugin-media-ui 0.121.0 → 0.123.0-alpha.2

package/src/components/FileList/useGetFilesList/useGetFilesList.js

@@ -1,9 +1,7 @@
 import { useState, useEffect } from 'react';
 import differenceWith from 'lodash.differencewith';
 import isEqual from 'lodash.isequal';
-import { useApolloClient } from '@apollo/client';
 import useGetFiles from '../useGetFiles';
-import getCounters from './getCounters';
 
 function useGetFilesList() {
   const [
@@ -19,13 +17,12 @@ function useGetFilesList() {
   const [currentResults, setCurrentResults] = useState([]);
   const [allResults, setAllResults] = useState([]);
   const [currentFilter, setCurrentFilter] = useState(null);
-  const [allFilesCounter, setAllFilesCounter] = useState(null);
+  const [allFilesCounter, setAllFilesCounter] = useState({ all: 0, text: 0, image: 0, video: 0 });
   const [counters, setCounters] = useState(null);
-  const client = useApolloClient();
 
   useEffect(
     () => {
-      if (queryParams.isSearch && all && image && video && text) {
+      if (all && image && video && text) {
         setCounters({
           all: all.total,
           image: image.total,
@@ -34,17 +31,11 @@ function useGetFilesList() {
         });
       }
     },
-    [queryParams.isSearch, all, image, video, text]
+    [all, image, video, text]
   );
 
   useEffect(
     () => {
-      if (counters === null) {
-        getCounters(client).then(initialCounter => {
-          setCounters(initialCounter);
-          setAllFilesCounter(initialCounter);
-        });
-      }
       if (!currentFilter && previousFilter) {
         setCurrentFilter(previousFilter);
       }
@@ -56,17 +47,13 @@ function useGetFilesList() {
       }
 
       const isContentDifferent = !!differenceWith(results, currentResults, isEqual).length;
-
       if (isContentDifferent) {
         setAllResults([...allResults, ...results]);
         setCurrentResults(results);
       }
 
       const shouldSetContentIfListIsVoid =
-        !isContentDifferent &&
-        !allResults.length &&
-        results.length &&
-        allFilesCounter[currentFilter] !== 0;
+        !isContentDifferent && !allResults.length && results.length;
 
       if (shouldSetContentIfListIsVoid) {
         setAllResults(results);
@@ -149,31 +136,36 @@ function useGetFilesList() {
   const setQueryParams = params => {
     const isNewSearchTerm = params.isSearch && previousSearchTerm !== params.searchTerm;
     const hasDeletedSearchTerm = previousSearchTerm && params.searchTerm === null;
-    const isNewFilter = params.where.type !== previousFilter;
+    const newFilter = JSON.stringify(params.where);
+    const isNewFilter = newFilter !== previousFilter;
     const shouldClearList = hasDeletedSearchTerm || isNewFilter || isNewSearchTerm;
     shouldClearList ? clearList(params) : setParams(params);
-    setCurrentFilter(params.where.type);
+    setCurrentFilter(newFilter);
   };
 
   const parsedQueryParams = {
     ...queryParams,
-    where: currentFilter === 'all' ? {} : queryParams.where
+    where: { ...queryParams.where }
   };
 
+  if (parsedQueryParams.where.type === 'all') delete parsedQueryParams.where.type;
+
   return [
     {
       queryParams: parsedQueryParams,
       loading,
       data: {
         files: allResults,
-        all: counters ? counters.all : 0,
-        images: counters ? counters.image : 0,
-        videos: counters ? counters.video : 0,
-        documents: counters ? counters.text : 0
+        all: counters ? formatCounterNumber(counters.all) : 0,
+        images: counters ? formatCounterNumber(counters.image) : 0,
+        videos: counters ? formatCounterNumber(counters.video) : 0,
+        documents: counters ? formatCounterNumber(counters.text) : 0
       }
     },
     { setQueryParams, clearList, removeFile, addNewFile, updateFile }
   ];
 }
 
+const formatCounterNumber = n => (n === 10000 ? '10000+' : n);
+
 export default useGetFilesList;

package/src/components/FilterPanel/FilterPanel.js

@@ -4,22 +4,17 @@ import React, { useState, useEffect } from 'react';
 import { SearchBar } from '@blaze-cms/plugin-search-ui';
 import classnames from 'classnames';
 import Select from '@blaze-react/select';
-import { getQuery } from '@blaze-cms/admin-ui-utils';
-import { useQuery } from '@apollo/client';
 import { useMediaContext, MediaContext } from '../../utils/media-context';
 import useFileList from '../FileList/useFileList';
 
 const FilterPanel = () => {
   const [searchTerm, setSearchTerm] = useState('');
-  const { filters, selectedFilter, changeSelectedFilter } = useMediaContext(MediaContext);
+  const { filters, selectedFilter, changeSelectedFilter, fileStores } = useMediaContext(
+    MediaContext
+  );
   const { queryParams, data } = useFileList();
   const [active, setActive] = useState(filters[0].id);
 
-  const fileStoresType = getQuery('GET_FILE_STORES');
-  const { data: { getFileStores: storeType = [] } = {} } = useQuery(fileStoresType, {
-    variables: { visibleInAdmin: true }
-  });
-
   useEffect(
     () => {
       if (queryParams.searchTerm === null) {
@@ -91,8 +86,7 @@ const FilterPanel = () => {
     return acc;
   }, {});
   const activeBarSegment = classnames('filter-panel__barWrapper--active', activeSegements);
-
-  const storeOptions = (storeType || []).map(type => [type.key, type.name]);
+  const storeOptions = (fileStores || []).map(type => [type.key, type.name]);
 
   return (
     <div className="filter-panel">
@@ -119,7 +113,11 @@ const FilterPanel = () => {
       </div>
       <div className="filter-panel__searchBarWrapper">
         <div className="select__wrapper">
-          <Select options={storeOptions} onChange={onSelectFilter} />
+          <Select
+            options={storeOptions}
+            onChange={onSelectFilter}
+            selected={selectedFilter.storeKey}
+          />
         </div>
         <SearchBar
           search={() =>

package/src/components/ListingContainer/ListingContainer.js

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import { useQuery } from '@apollo/client';
+import { getQuery } from '@blaze-cms/admin-ui-utils';
 import Listing from './Listing';
 import { availableFilters } from '../../utils/available-filters/available-filters';
 import { MediaContextProvider } from '../../utils/media-context';
@@ -12,9 +14,16 @@ const ListingContainer = ({ handleSelectedFiles, maxItems, filesSelected }) => {
   const [selectedFilter, setSelectedFilter] = useState({
     filter: 'all',
     isSearch: false,
-    searchTerm: null
+    searchTerm: null,
+    storeKey: null
   });
 
+  const fileStoresType = getQuery('GET_FILE_STORES');
+  const { loading, data: { getFileStores: fileStores = [] } = {} } = useQuery(fileStoresType, {
+    variables: { visibleInAdmin: true }
+  });
+  if (loading) return null;
+
   const getSelectedFiles = ({ id }) => {
     const existPreviousFile = existPrevious(selectedFiles, id);
 
@@ -33,11 +42,18 @@ const ListingContainer = ({ handleSelectedFiles, maxItems, filesSelected }) => {
 
   const handleDisplayFileUploadModal = param => setDisplayFileUploadModal(param);
 
+  const defaultFileStore = (fileStores.find(({ isDefault }) => isDefault) || {}).key;
+
   return (
     <MediaContextProvider
       value={{
+        fileStores,
+        defaultFileStore,
         changeSelectedFilter: value => setSelectedFilter(value),
-        selectedFilter,
+        selectedFilter: {
+          ...selectedFilter,
+          storeKey: selectedFilter.storeKey || defaultFileStore
+        },
         selectedFiles,
         getSelectedFiles,
         filters: availableFilters,

package/src/constants.js

@@ -22,7 +22,7 @@ const STORE_KEY = 'storeKey';
 const NAME = 'name';
 
 const ALL = 'all';
-const INVALID_STORE_KEY_VALUES = ['', 'Please Choose...'];
+const INVALID_STORE_KEY_VALUES = [null, '', 'Please Choose...'];
 const PREVIEW = 'Preview';
 const REORDER = 'Reorder';
 const IMAGES = 'Images';