Do not load entries before default sort is set

This commit is contained in:
Daniel Lautzenheiser 2022-09-29 13:43:59 -04:00
parent d4b55e1411
commit 2c14223932
3 changed files with 34 additions and 10 deletions

View File

@ -515,10 +515,12 @@ export function deleteLocalBackup(collection: Collection, slug: string) {
* Exported Thunk Action Creators
*/
export function loadEntry(collection: Collection, slug: string) {
export function loadEntry(collection: Collection, slug: string, silent = false) {
return async (dispatch: ThunkDispatch<State, {}, AnyAction>, getState: () => State) => {
await waitForMediaLibraryToLoad(dispatch, getState());
dispatch(entryLoading(collection, slug));
if (!silent) {
dispatch(entryLoading(collection, slug));
}
try {
const loadedEntry = await tryLoadEntry(getState(), collection, slug);
@ -931,6 +933,8 @@ export function persistEntry(collection: Collection) {
if (entry.get('slug') !== newSlug) {
await dispatch(loadEntry(collection, newSlug));
navigateToEntry(collection.get('name'), newSlug);
} else {
await dispatch(loadEntry(collection, newSlug, true));
}
})
.catch((error: Error) => {

View File

@ -1,5 +1,5 @@
import styled from '@emotion/styled';
import React, { useCallback, useEffect, useMemo } from 'react';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { translate } from 'react-polyglot';
import { connect } from 'react-redux';
@ -84,6 +84,8 @@ const CollectionView = ({
onChangeViewStyle,
viewStyle,
}: ReturnType<typeof mergeProps>) => {
const [readyToLoad, setReadyToLoad] = useState(false);
const newEntryUrl = useMemo(() => {
let url = collection.get('create') ? getNewEntryUrl(collectionName) : '';
if (url && filterTerm) {
@ -102,9 +104,9 @@ const CollectionView = ({
const renderEntriesCollection = useCallback(() => {
return (
<EntriesCollection collection={collection} viewStyle={viewStyle} filterTerm={filterTerm} />
<EntriesCollection collection={collection} viewStyle={viewStyle} filterTerm={filterTerm} readyToLoad={readyToLoad} />
);
}, [collection, filterTerm, viewStyle]);
}, [collection, filterTerm, viewStyle, readyToLoad]);
const renderEntriesSearch = useCallback(() => {
return (
@ -117,6 +119,7 @@ const CollectionView = ({
useEffect(() => {
if (sort?.first()?.get('key')) {
setReadyToLoad(true);
return;
}
@ -125,10 +128,26 @@ const CollectionView = ({
| undefined;
if (!defaultSort || !defaultSort.get('field')) {
setReadyToLoad(true);
return;
}
onSortClick(defaultSort.get('field'), defaultSort.get('direction') ?? SortDirection.Ascending);
let alive = true;
const sortEntries = async () => {
await onSortClick(
defaultSort.get('field'),
defaultSort.get('direction') ?? SortDirection.Ascending,
);
if (alive) {
setReadyToLoad(true);
}
};
sortEntries();
return () => {
alive = false;
};
}, [collection]);
return (

View File

@ -68,18 +68,19 @@ class EntriesCollection extends React.Component {
loadEntries: PropTypes.func.isRequired,
traverseCollectionCursor: PropTypes.func.isRequired,
entriesLoaded: PropTypes.bool,
readyToLoad: PropTypes.bool,
};
componentDidMount() {
const { collection, entriesLoaded, loadEntries } = this.props;
if (collection && !entriesLoaded) {
const { collection, entriesLoaded, loadEntries, readyToLoad } = this.props;
if (collection && !entriesLoaded && readyToLoad) {
loadEntries(collection);
}
}
componentDidUpdate(prevProps) {
const { collection, entriesLoaded, loadEntries } = this.props;
if (collection !== prevProps.collection && !entriesLoaded) {
const { collection, entriesLoaded, loadEntries, readyToLoad } = this.props;
if (!entriesLoaded && readyToLoad && !prevProps.readyToLoad) {
loadEntries(collection);
}
}