Open selimyalinkilic opened 5 years ago
Have you got to make it work?. Can you shed some lights on how you have solved it? I don't see any reference documentation using the firestoreConnect way.
I couldn't find any way. So i didn't make pagination
Still no one here? I still need help paginating my data using fireStoreConnect
I have the same issue.. Have you found some solution?
Hi, I was able to get pagination working in a hook by using a hack. I'll post it below. Each paginated batch of records has to be stored with a new key in the ordered object within firestore. This is then able to be merged together when a component requests it. By fetching n+1 records I am able to use the last record to determine if there is a next page.
import {
useFirestoreConnect,
useFirebase,
isEmpty,
isLoaded,
} from 'react-redux-firebase';
import { useSelector } from 'react-redux';
const mergeLists = (ordered, storeAs, limit) => {
let nextPage = false;
let list = Object.entries(ordered).filter(([key, value]) => {
return key.includes(storeAs);
});
list = list.map((item, index) => {
if (item[1].length - 1 === limit) {
if (list.length - 1 === index) {
nextPage = true;
}
return item[1].slice(0, -1);
}
return item[1];
});
return [list.flat(), nextPage];
};
const useHook = ({
limit,
startAfter, //uses orderBy timestamp
}) => {
const storeAs = 'some_key',
const key = `${storeAs}/${startAfter || 0}`;
const firebase = useFirebase();
useFirestoreConnect({
collection: 'users',
doc: ...,
subcollections: ...,
orderBy: [['timestamp', 'desc']],
storeAs: key,
limit: limit + 1,
startAfter,
});
return useSelector(({ firestore: { status, ordered, errors } }) => {
const loading =
status.requesting[key] === undefined ||
Object.entries(status.requesting).some(
([key, value]) => key.includes(storeAs) && value,
);
const error = Object.entries(errors).find(
([key, value]) => key.includes(storeAs) && !!value,
);
const [list, nextPage] = mergeLists(ordered, storeAs, limit);
return {
loading,
error,
data: list,
nextPage,
};
});
};
Within a component:
const [cursor, setCursor] = useState(undefined);
const state = useHook({
startAfter: cursor,
limit: 20,
});
Later on a button click:
setCursor(state.data[state.data.length - 1].timestamp);
Hope this helps
hi how about back (prev) button ?? anyone who knows how to write with react redux firestore ?
Hi,
I wanna make pagination, but i can't make it. Maybe someone knows how to make it. Can you help me please. My dashboard component codes are as below.