diff --git a/lib/firebase.tsx b/lib/firebase.tsx index 1e41e73..26325b2 100644 --- a/lib/firebase.tsx +++ b/lib/firebase.tsx @@ -117,6 +117,7 @@ export const FirebaseGalleryProvider: React.FC<{}> = ({ children }) => { const [compositions, setCompositions] = useState([]); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(undefined); + const [lastRefresh, setLastRefresh] = useState(0); const handleError = (e: Error) => { setIsLoading(false); @@ -127,6 +128,7 @@ export const FirebaseGalleryProvider: React.FC<{}> = ({ children }) => { compositions, isLoading, error, + lastRefresh, refresh: useCallback(() => { if (!(appCtx && !isLoading)) return false; @@ -134,6 +136,7 @@ export const FirebaseGalleryProvider: React.FC<{}> = ({ children }) => { setIsLoading(true); getDocs(getGalleryCollection(appCtx)) .then((snapshot) => { + setLastRefresh(Date.now()); setIsLoading(false); setCompositions( snapshot.docs.map((doc) => ({ diff --git a/lib/gallery-context.tsx b/lib/gallery-context.tsx index 72c5d97..fa017a3 100644 --- a/lib/gallery-context.tsx +++ b/lib/gallery-context.tsx @@ -14,10 +14,12 @@ export interface GalleryContext { isLoading: boolean; error?: string; refresh(): boolean; + lastRefresh: number; } export const GalleryContext = React.createContext({ compositions: [], isLoading: false, refresh: () => true, + lastRefresh: 0, }); diff --git a/lib/pages/gallery-page.tsx b/lib/pages/gallery-page.tsx index 7cd7e2e..7c3c421 100644 --- a/lib/pages/gallery-page.tsx +++ b/lib/pages/gallery-page.tsx @@ -1,4 +1,4 @@ -import React, { useContext, useEffect, useState } from "react"; +import React, { useContext, useEffect } from "react"; import { GalleryComposition, GalleryContext } from "../gallery-context"; import { Page } from "../page"; import { createPageWithStateSearchParams } from "../page-with-shareable-state"; @@ -23,20 +23,17 @@ const GalleryCompositionView: React.FC = (props) => { export const GalleryPage: React.FC<{}> = () => { const ctx = useContext(GalleryContext); - const [refreshed, setRefreshed] = useState(false); useEffect(() => { - if (!refreshed) { - if (ctx.refresh()) { - setRefreshed(true); - } + if (ctx.lastRefresh === 0) { + ctx.refresh(); } - }, [ctx, refreshed]); + }, [ctx]); return (
- {ctx.error &&

{ctx.error}

}