@blaze-cms/plugin-data-ui 0.146.0-translations.8 → 0.147.0-rc-eagle.2

package/src/components/EntityManager/EntityManager.js

@@ -19,56 +19,63 @@ const EntityManager = ({ match, history }) => {
 
   const { action, entityIdentifier, id = null, onViewUrl } = match.params;
 
-  useEffect(
-    () => {
-      (async () => {
-        try {
-          const [entitySchema, data = {}, requestedQuery] = await entityAvailableActions[action]({
-            client,
-            identifier: entityIdentifier,
-            id
-          });
-
-          if (!data) {
-            addToast(PAGE_NOT_FOUND, {
-              appearance: ERROR,
-              autoDismiss: true
-            });
-
-            history.push(`/data-listing/${entityIdentifier}`);
-          }
-
-          let localData = data;
-
-          if (isPageBuilderTemplateSet(data)) {
-            const pageBuilderComponents = await getPageBuilderComponents({
-              entitySchema,
-              client,
-              id
-            });
-
-            localData = {
-              ...localData,
-              pageBuilder: pageBuilderComponents || localData.pageBuilder
-            };
-          }
-
-          setFormData({ values: localData });
-          setEntity(data);
-          setSchema(entitySchema);
-          setPreviousQuery(requestedQuery);
-          setShouldRefetch(false);
-        } catch (error) {
-          addToast(error.message, {
+  useEffect(() => {
+    (async () => {
+      try {
+        const [entitySchema, data = {}, requestedQuery] = await entityAvailableActions[action]({
+          client,
+          identifier: entityIdentifier,
+          id
+        });
+
+        if (!data) {
+          addToast(PAGE_NOT_FOUND, {
             appearance: ERROR,
             autoDismiss: true
           });
+
           history.push(`/data-listing/${entityIdentifier}`);
         }
-      })();
-    },
-    [action, addToast, client, entityIdentifier, history, history.push, id, schema, shouldRefetch]
-  );
+
+        let localData = data;
+
+        if (isPageBuilderTemplateSet(data)) {
+          const pageBuilderComponents = await getPageBuilderComponents({
+            entitySchema,
+            client,
+            id
+          });
+
+          localData = {
+            ...localData,
+            pageBuilder: pageBuilderComponents || localData.pageBuilder
+          };
+        }
+
+        setFormData({ values: localData });
+        setEntity(data);
+        setSchema(entitySchema);
+        setPreviousQuery(requestedQuery);
+        setShouldRefetch(false);
+      } catch (error) {
+        addToast(error.message, {
+          appearance: ERROR,
+          autoDismiss: true
+        });
+        history.push(`/data-listing/${entityIdentifier}`);
+      }
+    })();
+  }, [
+    action,
+    addToast,
+    client,
+    entityIdentifier,
+    history,
+    history.push,
+    id,
+    schema,
+    shouldRefetch
+  ]);
 
   const updateFormData = (updatedFormData, shouldRefresh) => {
     if (shouldRefresh) setShouldRefetch(true);

package/src/components/InfoBoxes/container/InfoBoxContainer.js

@@ -9,12 +9,9 @@ const InfoBoxContainer = ({ id, schema, infoBox }) => {
 
   const { data, refetch } = useData({ id, schema, infoBox });
 
-  useEffect(
-    () => {
-      refetch();
-    },
-    [externalUpdateTime, refetch]
-  );
+  useEffect(() => {
+    refetch();
+  }, [externalUpdateTime, refetch]);
 
   if (!data || !Object.keys(data) || Object.keys(data).length === 0) return null;
 

package/src/components/InfoBoxes/hooks/useData.js

@@ -12,7 +12,12 @@ function useData({ id, schema, infoBox }) {
       }
     `;
 
-  const { data = {}, loading, error, refetch } = useQuery(infoBoxQuery, {
+  const {
+    data = {},
+    loading,
+    error,
+    refetch
+  } = useQuery(infoBoxQuery, {
     variables: { id },
     skip: !query
   });

package/src/components/ListingTable/ListingTable.js

@@ -144,7 +144,6 @@ const ListingTable = ({ match, entitySchema, history }) => {
     });
     history.push('?page=1');
   };
-
   if (!tableData || !tableData.rows) return 'loading';
 
   const {
@@ -160,27 +159,20 @@ const ListingTable = ({ match, entitySchema, history }) => {
 
   return (
     <div className="page">
-      {modalStatus &&
-        _deleteAction.active && (
-          <DeleteAction
-            data-testid="deleteEntity"
-            onClose={toggleModal}
-            deleteAction={deleteAction}
-            itemName={itemToDelete.name}
-          />
-        )}
+      {modalStatus && _deleteAction.active && (
+        <DeleteAction
+          data-testid="deleteEntity"
+          onClose={toggleModal}
+          deleteAction={deleteAction}
+          itemName={itemToDelete.name}
+        />
+      )}
       <PageHeader title={entitySchema.displayName} subtitle="">
-        {createAction.active &&
-          !showAddButton && (
-            <Fragment>
-              <Link
-                data-testid="addEntity"
-                className="button button--small"
-                to={`${match.url}/create`}>
-                Add
-              </Link>
-            </Fragment>
-          )}
+        {createAction.active && !showAddButton && (
+          <Link data-testid="addEntity" className="button button--small" to={`${match.url}/create`}>
+            Add
+          </Link>
+        )}
       </PageHeader>
       {showAddButton ? (
         <CardPrompt>

package/src/components/ListingTable/ListingTableContent/ListingTableContent.js

@@ -1,7 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import Table from '@blaze-react/table';
 import Pagination from '@blaze-react/pagination';
-
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 
@@ -18,53 +17,48 @@ const ListingTableContent = ({
   const { isEnquiry } = tableData;
   const className = `page__content${isEnquiry ? ' array-table' : ''}`;
 
-  useEffect(
-    () => {
-      // set table head to match body column widths to handle dynamic content
-      if (ref.current) {
-        const tableHeadCells = ref.current.querySelectorAll('.table-head .table-cell');
-        const firstRowCells = ref.current.querySelectorAll(
-          '.table-body .table-row:first-child .table-cell'
-        );
+  useEffect(() => {
+    // set table head to match body column widths to handle dynamic content
+    if (ref.current && displayTable) {
+      const tableHeadCells = ref.current.querySelectorAll('.table-head .table-cell');
+      const firstRowCells = ref.current.querySelectorAll(
+        '.table-body .table-row:first-child .table-cell'
+      );
 
-        firstRowCells.forEach((element, i) => {
-          const styles = window.getComputedStyle(element);
+      firstRowCells.forEach((element, i) => {
+        const styles = window.getComputedStyle(element);
 
-          if (tableHeadCells[i]) {
-            tableHeadCells[i].style.flex = styles.flex;
-            tableHeadCells[i].style['justify-content'] = styles['justify-content'];
-          }
-        });
-      }
-    },
-    [tableData]
-  );
+        if (tableHeadCells[i]) {
+          tableHeadCells[i].style.flex = styles.flex;
+          tableHeadCells[i].style['justify-content'] = styles['justify-content'];
+        }
+      });
+    }
+  }, [tableData, displayTable]);
+
+  if (displayTable) {
+    return (
+      <div ref={ref} className={className}>
+        <Table
+          onSort={onSort}
+          data={tableData}
+          onSelect={handleSelect}
+          data-testid="listing-table-content"
+        />
+        <Pagination
+          visiblePages={10}
+          totalItems={totalItems}
+          currentPage={currentPage}
+          onPageChange={handleOnPageChange}
+        />
+      </div>
+    );
+  }
 
   return (
-    <>
-      {displayTable ? (
-        <>
-          <div ref={ref} className={className}>
-            <Table
-              onSort={onSort}
-              data={tableData}
-              onSelect={handleSelect}
-              data-testid="listing-table-content"
-            />
-            <Pagination
-              visiblePages={10}
-              totalItems={totalItems}
-              currentPage={currentPage}
-              onPageChange={handleOnPageChange}
-            />
-          </div>
-        </>
-      ) : (
-        <span className="table-no-results" data-testid="no-results">
-          No results
-        </span>
-      )}
-    </>
+    <span className="table-no-results" data-testid="no-results">
+      No results
+    </span>
   );
 };
 

package/src/components/ListingTable/SearchFilter/SearchContainer.js

@@ -23,20 +23,17 @@ const SearchContainer = ({
   const displaySearchFilter = keywordFiltersToUse.length > 0;
   const displaySelectFilters = selectFiltersToDisplay.length > 0;
 
-  const { keywordSearchProperties, keywordSearchLabels } = useMemo(
-    () => {
-      const labels = [];
-      const properties = [];
+  const { keywordSearchProperties, keywordSearchLabels } = useMemo(() => {
+    const labels = [];
+    const properties = [];
 
-      keywordFiltersToUse.forEach(([property, { label }]) => {
-        if (label) labels.push(label);
-        properties.push(property);
-      });
+    keywordFiltersToUse.forEach(([property, { label }]) => {
+      if (label) labels.push(label);
+      properties.push(property);
+    });
 
-      return { keywordSearchProperties: properties, keywordSearchLabels: labels };
-    },
-    [keywordFiltersToUse]
-  );
+    return { keywordSearchProperties: properties, keywordSearchLabels: labels };
+  }, [keywordFiltersToUse]);
 
   const { gqlFields, rawQuery } = useMemo(
     () => buildQueryFields(selectFiltersToDisplay, schema.id),
@@ -52,101 +49,93 @@ const SearchContainer = ({
     fetchPolicy: 'cache-and-network'
   });
 
-  const filterData = useMemo(
-    () => {
-      const { searchResults: { rawResults: { aggregations = {} } = {} } = {} } = data || {};
-      const proccessedData = [];
-      Object.entries(aggregations).forEach(([key, { buckets }]) => {
-        proccessedData.push(
-          Array.isArray(buckets) ? [key, buckets.map(b => b.key).filter(Boolean)] : []
-        );
-      });
-
-      return proccessedData;
-    },
-    [data]
-  );
+  const filterData = useMemo(() => {
+    const { searchResults: { rawResults: { aggregations = {} } = {} } = {} } = data || {};
+    const proccessedData = [];
+    Object.entries(aggregations).forEach(([key, { buckets }]) => {
+      proccessedData.push(
+        Array.isArray(buckets) ? [key, buckets.map(b => b.key).filter(Boolean)] : []
+      );
+    });
 
-  useEffect(
-    () => {
-      if (!filterData.length) {
-        setSelectOptions([]);
-        return;
-      }
-
-      (async () => {
-        const results = await Promise.all(
-          filterData.map(async ([property, ids]) => {
-            try {
-              if (!ids || !ids.length) return {};
-
-              const [, selectionDetails] =
-                selectFiltersToDisplay.find(([selectProperty]) => selectProperty === property) ||
-                [];
-
-              if (!selectionDetails) return null;
-
-              if (!selectionDetails.relation) {
-                return {
-                  id: property,
-                  label: selectionDetails.label,
-                  options: ids.map(value => [value, value])
-                };
-              }
-              const query = getQuery('GET_ENTITY_SCHEMA');
-              const {
-                data: {
-                  getEntitySchemas: [relationSchema]
-                }
-              } = await apolloClient.query({
-                query,
-                variables: { identifier: selectionDetails.relation.entityIdentifier }
-              });
-
-              const {
-                data: { result: selected = [] }
-              } = await apolloClient
-                .query({
-                  query: getDynamicQuery('GET_ALL_ENTITIES')(relationSchema),
-                  variables: {
-                    where: {
-                      id: {
-                        _in: ids
-                      }
-                    },
-                    sort: [{ property: 'name', direction: 'asc' }]
-                  }
-                })
-                // eslint-disable-next-line no-console
-                .catch(e => console.error(e));
+    return proccessedData;
+  }, [data]);
+
+  useEffect(() => {
+    if (!filterData.length) {
+      setSelectOptions([]);
+      return;
+    }
+
+    (async () => {
+      const results = await Promise.all(
+        filterData.map(async ([property, ids]) => {
+          try {
+            if (!ids || !ids.length) return {};
+
+            const [, selectionDetails] =
+              selectFiltersToDisplay.find(([selectProperty]) => selectProperty === property) || [];
+
+            if (!selectionDetails) return null;
 
+            if (!selectionDetails.relation) {
               return {
                 id: property,
                 label: selectionDetails.label,
-                options: selected.map(item => [item.id, item.name])
+                options: ids.map(value => [value, value])
               };
-            } catch {
-              return null;
             }
-          })
-        );
+            const query = getQuery('GET_ENTITY_SCHEMA');
+            const {
+              data: {
+                getEntitySchemas: [relationSchema]
+              }
+            } = await apolloClient.query({
+              query,
+              variables: { identifier: selectionDetails.relation.entityIdentifier }
+            });
+
+            const {
+              data: { result: selected = [] }
+            } = await apolloClient
+              .query({
+                query: getDynamicQuery('GET_ALL_ENTITIES')(relationSchema),
+                variables: {
+                  where: {
+                    id: {
+                      _in: ids
+                    }
+                  },
+                  sort: [{ property: 'name', direction: 'asc' }]
+                }
+              })
+              // eslint-disable-next-line no-console
+              .catch(e => console.error(e));
+
+            return {
+              id: property,
+              label: selectionDetails.label,
+              options: selected.map(item => [item.id, item.name])
+            };
+          } catch {
+            return null;
+          }
+        })
+      );
 
-        setSelectOptions(results.filter(Boolean));
-      })();
-    },
-    [apolloClient, filterData, schema, selectFiltersToDisplay]
-  );
+      setSelectOptions(results.filter(Boolean));
+    })();
+  }, [apolloClient, filterData, schema, selectFiltersToDisplay]);
 
   const updateFilters = useCallback(
     (term, filters) => updateListFilters(term, filters, setListFilters, keywordSearchProperties),
     [setListFilters, keywordSearchProperties]
   );
 
-  const handleSearch = useCallback(() => updateFilters(searchTerm, selectedFilters), [
-    searchTerm,
-    selectedFilters,
-    updateFilters
-  ]);
+  const handleSearch = useCallback(
+    () => updateFilters(searchTerm, selectedFilters),
+    [searchTerm, selectedFilters, updateFilters]
+  );
   const handleSearchChange = useCallback(e => setSearchTerm(e.target.value), []);
   const handleEnterKey = useCallback(
     e => {
@@ -154,19 +143,16 @@ const SearchContainer = ({
     },
     [handleSearch]
   );
-  const handleReset = useCallback(
-    () => {
-      setSearchTerm('');
-      setSelectedFilters(
-        Object.keys(selectedFilters).reduce(
-          (acc, key) => ({ ...acc, [key]: DEFAULT_FILTER_OPTION_LABEL }),
-          {}
-        )
-      );
-      updateFilters('', {});
-    },
-    [selectedFilters, updateFilters]
-  );
+  const handleReset = useCallback(() => {
+    setSearchTerm('');
+    setSelectedFilters(
+      Object.keys(selectedFilters).reduce(
+        (acc, key) => ({ ...acc, [key]: DEFAULT_FILTER_OPTION_LABEL }),
+        {}
+      )
+    );
+    updateFilters('', {});
+  }, [selectedFilters, updateFilters]);
   const handleSelect = useCallback(
     (property, event) => {
       const { value } = event;
@@ -200,20 +186,19 @@ const SearchContainer = ({
       {displaySelectFilters &&
         selectOptions.map(({ id, options, label }) => (
           <>
-            {options &&
-              !!options.length && (
-                <div className="search-container__select-wrapper">
-                  <Select
-                    label={label}
-                    id={id}
-                    name={id}
-                    onChange={event => handleSelect(id, event)}
-                    options={options}
-                    value={selectedFilters[id]}
-                    defaultTextValue={DEFAULT_FILTER_OPTION_LABEL}
-                  />
-                </div>
-              )}
+            {options && !!options.length && (
+              <div className="search-container__select-wrapper">
+                <Select
+                  label={label}
+                  id={id}
+                  name={id}
+                  onChange={event => handleSelect(id, event)}
+                  options={options}
+                  value={selectedFilters[id]}
+                  defaultTextValue={DEFAULT_FILTER_OPTION_LABEL}
+                />
+              </div>
+            )}
           </>
         ))}
 

package/src/components/ListingTable/service/index.js

@@ -34,9 +34,8 @@ function buildVariables({ entitySchema, isSearchQuery, listFilters = [], queryPa
 }
 
 const fetchData = async ({ client, querySettings: { entitySchema, queryParams }, listFilters }) => {
-  const {
-    displayProperties: { adminListings: { dataSource: { source, index } = {} } = {} } = {}
-  } = entitySchema;
+  const { displayProperties: { adminListings: { dataSource: { source, index } = {} } = {} } = {} } =
+    entitySchema;
 
   const isSearchQuery = source === 'search';
   const query = buildListingQuery(entitySchema, index, isSearchQuery);

package/src/components/Tabs/index.js

@@ -1,11 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Tab, TabItem } from '@blaze-react/tab';
-import {
-  useReadFromCache,
-  GET_CURRENT_TAB_ID,
-  TabsContextProvider
-} from '@blaze-cms/admin-ui-utils';
+import { useTabsContext, TabsContextProvider } from '@blaze-cms/admin-ui-utils';
 import {
   PAGE_BUILDER_TAB,
   PAGE_BUILDER_TAB_INDEX,
@@ -14,25 +10,25 @@ import {
 } from '../../constants';
 
 const Tabs = ({ children, onTabChange, enabled }) => {
-  const { currentTabId } = useReadFromCache({ query: GET_CURRENT_TAB_ID }) || EDITOR_VIEW_TAB_INDEX;
+  const { currentTabId = EDITOR_VIEW_TAB_INDEX } = useTabsContext() || {};
   const [activeAccordions, setActiveAccordions] = useState([]);
-  return enabled ? (
-    <>
-      <TabsContextProvider value={{ currentTabId, activeAccordions, setActiveAccordions }}>
-        <Tab selected={currentTabId}>
-          <TabItem title={EDITOR_VIEW_TAB} action={() => onTabChange(EDITOR_VIEW_TAB_INDEX)}>
-            {children}
-          </TabItem>
-          <TabItem title={PAGE_BUILDER_TAB} action={() => onTabChange(PAGE_BUILDER_TAB_INDEX)}>
-            {children}
-          </TabItem>
-        </Tab>
-      </TabsContextProvider>
-    </>
-  ) : (
-    <>{children}</>
+
+  if (!enabled) return children;
+
+  return (
+    <TabsContextProvider value={{ currentTabId, activeAccordions, setActiveAccordions }}>
+      <Tab selected={currentTabId}>
+        <TabItem title={EDITOR_VIEW_TAB} action={() => onTabChange(EDITOR_VIEW_TAB_INDEX)}>
+          {children}
+        </TabItem>
+        <TabItem title={PAGE_BUILDER_TAB} action={() => onTabChange(PAGE_BUILDER_TAB_INDEX)}>
+          {children}
+        </TabItem>
+      </Tab>
+    </TabsContextProvider>
   );
 };
+
 Tabs.propTypes = {
   children: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]).isRequired,
   onTabChange: PropTypes.func.isRequired,

package/src/index.js

@@ -1,16 +1,18 @@
 import { getFormBuilderLookup, formFieldTypes } from '@blaze-cms/react-form-builder';
-import React from 'react';
 import pkg from '../package.json';
 import { DATA_LISTING_PREFIX, PLUGIN_NAME } from './constants';
 import getAddContentMenuItems from './utils/add-content-menu-items';
 import { UserIcon, TaxonomyIcon, ContentIcon, SettingsIcon } from './icons';
+import EntityDataListing from './components/EntityDataListing';
+import EntityManager from './components/EntityManager';
 
-const EntityDataListing = React.lazy(() =>
-  import(/* webpackChunkName: 'EntityDataListing' */ './components/EntityDataListing')
-);
-const EntityManager = React.lazy(() =>
-  import(/* webpackChunkName: 'EntityManager' */ './components/EntityManager')
-);
+// todo: renable lazy loading after bundler optimisations, currently they are too slow in dev mode
+// const EntityDataListing = React.lazy(
+//   () => import(/* webpackChunkName: 'EntityDataListing' */ './components/EntityDataListing')
+// );
+// const EntityManager = React.lazy(
+//   () => import(/* webpackChunkName: 'EntityManager' */ './components/EntityManager')
+// );
 
 export default async function load(app) {
   app.events.once('admin:menu:config:load', getAddContentMenuItems(app));

package/src/utils/hoc/withContext.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { useMainContext, MainContext } from '@blaze-cms/admin-ui-utils';
 
-export const withContext = Component => props => {
-  const contexts = useMainContext(MainContext);
-  return <Component {...props} {...contexts} />;
-};
+export const withContext = Component =>
+  function (props) {
+    const contexts = useMainContext(MainContext);
+    return <Component {...props} {...contexts} />;
+  };