useCachedFetch hook for trending api calls
This commit is contained in:
parent
6b88df96ab
commit
f70d752fae
@ -1,23 +1,18 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useLocale } from "@/IntlProvider";
|
||||
import NostrBandApi from "@/External/NostrBand";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import useCachedFetch from "@/Hooks/useCachedFetch";
|
||||
|
||||
export function TrendingHashTagsLine(props: { onClick: (tag: string) => void }) {
|
||||
const [hashtags, setHashtags] = useState<Array<{ hashtag: string; posts: number }>>();
|
||||
const { lang } = useLocale();
|
||||
const api = new NostrBandApi();
|
||||
const trendingHashtagsUrl = api.trendingHashtagsUrl(lang);
|
||||
const storageKey = `nostr-band-${trendingHashtagsUrl}`;
|
||||
|
||||
async function loadTrendingHashtags() {
|
||||
const api = new NostrBandApi();
|
||||
const rsp = await api.trendingHashtags(lang);
|
||||
setHashtags(rsp.hashtags);
|
||||
}
|
||||
const { data: hashtags, isLoading, error } = useCachedFetch(trendingHashtagsUrl, storageKey, data => data.hashtags);
|
||||
|
||||
useEffect(() => {
|
||||
loadTrendingHashtags().catch(console.error);
|
||||
}, []);
|
||||
if (isLoading || error || !hashtags || hashtags.length === 0) return null;
|
||||
|
||||
if (!hashtags || hashtags.length === 0) return;
|
||||
return (
|
||||
<div className="flex flex-col g4">
|
||||
<small>
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useState } from "react";
|
||||
import { HexKey, NostrPrefix } from "@snort/system";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
|
||||
@ -9,6 +9,7 @@ import SemisolDevApi from "@/External/SemisolDev";
|
||||
import useLogin from "@/Hooks/useLogin";
|
||||
import { hexToBech32 } from "@/SnortUtils";
|
||||
import { ErrorOrOffline } from "./ErrorOrOffline";
|
||||
import useCachedFetch from "@/Hooks/useCachedFetch";
|
||||
|
||||
enum Provider {
|
||||
NostrBand = 1,
|
||||
@ -17,42 +18,40 @@ enum Provider {
|
||||
|
||||
export default function SuggestedProfiles() {
|
||||
const login = useLogin(s => ({ publicKey: s.publicKey, follows: s.follows.item }));
|
||||
const [userList, setUserList] = useState<HexKey[]>();
|
||||
const [provider, setProvider] = useState(Provider.NostrBand);
|
||||
const [error, setError] = useState<Error>();
|
||||
|
||||
async function loadSuggestedProfiles() {
|
||||
if (!login.publicKey) return;
|
||||
setUserList(undefined);
|
||||
setError(undefined);
|
||||
|
||||
try {
|
||||
switch (provider) {
|
||||
case Provider.NostrBand: {
|
||||
const api = new NostrBandApi();
|
||||
const users = await api.sugguestedFollows(hexToBech32(NostrPrefix.PublicKey, login.publicKey));
|
||||
const keys = users.profiles.map(a => a.pubkey);
|
||||
setUserList(keys);
|
||||
break;
|
||||
}
|
||||
case Provider.SemisolDev: {
|
||||
const api = new SemisolDevApi();
|
||||
const users = await api.sugguestedFollows(login.publicKey, login.follows);
|
||||
const keys = users.recommendations.sort(a => a[1]).map(a => a[0]);
|
||||
setUserList(keys);
|
||||
break;
|
||||
}
|
||||
const getUrlAndKey = () => {
|
||||
if (!login.publicKey) return { url: null, key: null };
|
||||
switch (provider) {
|
||||
case Provider.NostrBand: {
|
||||
const api = new NostrBandApi();
|
||||
const url = api.suggestedFollowsUrl(hexToBech32(NostrPrefix.PublicKey, login.publicKey));
|
||||
return { url, key: `nostr-band-${url}` };
|
||||
}
|
||||
} catch (e) {
|
||||
if (e instanceof Error) {
|
||||
setError(e);
|
||||
case Provider.SemisolDev: {
|
||||
const api = new SemisolDevApi();
|
||||
const url = api.suggestedFollowsUrl(login.publicKey, login.follows);
|
||||
return { url, key: `semisol-dev-${url}` };
|
||||
}
|
||||
default:
|
||||
return { url: null, key: null };
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadSuggestedProfiles();
|
||||
}, [login.publicKey, login.follows, provider]);
|
||||
const { url, key } = getUrlAndKey();
|
||||
const { data: userList, error } = useCachedFetch(url, key, data => {
|
||||
switch (provider) {
|
||||
case Provider.NostrBand:
|
||||
return data.profiles.map(a => a.pubkey);
|
||||
case Provider.SemisolDev:
|
||||
return data.recommendations.sort(a => a[1]).map(a => a[0]);
|
||||
default:
|
||||
return [];
|
||||
}
|
||||
});
|
||||
|
||||
if (error) return <ErrorOrOffline error={error} onRetry={() => {}} />;
|
||||
if (!userList) return <PageSpinner />;
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -63,9 +62,7 @@ export default function SuggestedProfiles() {
|
||||
{/*<option value={Provider.SemisolDev}>semisol.dev</option>*/}
|
||||
</select>
|
||||
</div>
|
||||
{error && <ErrorOrOffline error={error} onRetry={loadSuggestedProfiles} />}
|
||||
{userList && <FollowListBase pubkeys={userList} showAbout={true} />}
|
||||
{!userList && !error && <PageSpinner />}
|
||||
<FollowListBase pubkeys={userList as HexKey[]} showAbout={true} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -1,12 +1,12 @@
|
||||
import { ReactNode, useEffect, useState } from "react";
|
||||
|
||||
import PageSpinner from "@/Element/PageSpinner";
|
||||
import { ReactNode } from "react";
|
||||
import NostrBandApi from "@/External/NostrBand";
|
||||
import { ErrorOrOffline } from "../ErrorOrOffline";
|
||||
import { HashTagHeader } from "@/Pages/HashTagsPage";
|
||||
import { useLocale } from "@/IntlProvider";
|
||||
import classNames from "classnames";
|
||||
import { Link } from "react-router-dom";
|
||||
import useCachedFetch from "@/Hooks/useCachedFetch";
|
||||
import PageSpinner from "@/Element/PageSpinner";
|
||||
|
||||
export default function TrendingHashtags({
|
||||
title,
|
||||
@ -17,38 +17,28 @@ export default function TrendingHashtags({
|
||||
count?: number;
|
||||
short?: boolean;
|
||||
}) {
|
||||
const [hashtags, setHashtags] = useState<Array<{ hashtag: string; posts: number }>>();
|
||||
const [error, setError] = useState<Error>();
|
||||
const { lang } = useLocale();
|
||||
const api = new NostrBandApi();
|
||||
const trendingHashtagsUrl = api.trendingHashtagsUrl(lang);
|
||||
const storageKey = `nostr-band-${trendingHashtagsUrl}`;
|
||||
|
||||
async function loadTrendingHashtags() {
|
||||
const api = new NostrBandApi();
|
||||
const rsp = await api.trendingHashtags(lang);
|
||||
setHashtags(rsp.hashtags.slice(0, count)); // Limit the number of hashtags to the count
|
||||
}
|
||||
const {
|
||||
data: hashtags,
|
||||
error,
|
||||
isLoading,
|
||||
} = useCachedFetch(trendingHashtagsUrl, storageKey, data => data.hashtags.slice(0, count));
|
||||
|
||||
useEffect(() => {
|
||||
loadTrendingHashtags().catch(e => {
|
||||
if (e instanceof Error) {
|
||||
setError(e);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (error) return <ErrorOrOffline error={error} onRetry={loadTrendingHashtags} className="p" />;
|
||||
if (!hashtags) return <PageSpinner />;
|
||||
if (error) return <ErrorOrOffline error={error} onRetry={() => {}} className="p" />;
|
||||
if (isLoading) return <PageSpinner />;
|
||||
|
||||
return (
|
||||
<>
|
||||
{title}
|
||||
{hashtags.map(a => {
|
||||
if (short) {
|
||||
// return just the hashtag (not HashTagHeader) and post count
|
||||
return (
|
||||
<div className="my-1 font-bold" key={a.hashtag}>
|
||||
<Link to={`/t/${a.hashtag}`} key={a.hashtag}>
|
||||
#{a.hashtag}
|
||||
</Link>
|
||||
<Link to={`/t/${a.hashtag}`}>#{a.hashtag}</Link>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { NostrEvent, NostrLink, TaggedNostrEvent } from "@snort/system";
|
||||
import { useState } from "react";
|
||||
import { NostrLink, TaggedNostrEvent } from "@snort/system";
|
||||
import { useReactions } from "@snort/system-react";
|
||||
|
||||
import PageSpinner from "@/Element/PageSpinner";
|
||||
@ -14,54 +14,42 @@ import { DisplayAs, DisplayAsSelector } from "@/Element/Feed/DisplayAsSelector";
|
||||
import ImageGridItem from "@/Element/Feed/ImageGridItem";
|
||||
import { SpotlightThreadModal } from "@/Element/Spotlight/SpotlightThreadModal";
|
||||
import useLogin from "@/Hooks/useLogin";
|
||||
import useCachedFetch from "@/Hooks/useCachedFetch";
|
||||
|
||||
export default function TrendingNotes({ count = Infinity, small = false }) {
|
||||
const api = new NostrBandApi();
|
||||
const { lang } = useLocale();
|
||||
const trendingNotesUrl = api.trendingNotesUrl(lang); // Get the URL for trending notes
|
||||
const storageKey = `nostr-band-${trendingNotesUrl}`;
|
||||
|
||||
const {
|
||||
data: trendingNotesData,
|
||||
isLoading,
|
||||
error,
|
||||
} = useCachedFetch(
|
||||
trendingNotesUrl,
|
||||
storageKey,
|
||||
data => data.notes.map(a => a.event), // Process the data as needed
|
||||
);
|
||||
|
||||
const login = useLogin();
|
||||
const displayAsInitial = small ? "list" : login.feedDisplayAs ?? "list";
|
||||
// Added count prop with a default value
|
||||
const [posts, setPosts] = useState<Array<NostrEvent>>();
|
||||
const [error, setError] = useState<Error>();
|
||||
const { lang } = useLocale();
|
||||
const { isEventMuted } = useModeration();
|
||||
const [displayAs, setDisplayAs] = useState<DisplayAs>(displayAsInitial);
|
||||
const related = useReactions("trending", posts?.map(a => NostrLink.fromEvent(a)) ?? [], undefined, true);
|
||||
const { isEventMuted } = useModeration();
|
||||
const related = useReactions("trending", trendingNotesData?.map(a => NostrLink.fromEvent(a)) ?? [], undefined, true);
|
||||
const [modalThread, setModalThread] = useState<NostrLink | undefined>(undefined);
|
||||
|
||||
async function loadTrendingNotes() {
|
||||
const api = new NostrBandApi();
|
||||
const trending = await api.trendingNotes(lang);
|
||||
setPosts(trending.notes.map(a => a.event));
|
||||
}
|
||||
if (error) return <ErrorOrOffline error={error} className="p" />;
|
||||
if (isLoading) return <PageSpinner />;
|
||||
|
||||
useEffect(() => {
|
||||
loadTrendingNotes().catch(e => {
|
||||
if (e instanceof Error) {
|
||||
setError(e);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (error) return <ErrorOrOffline error={error} onRetry={loadTrendingNotes} className="p" />;
|
||||
if (!posts) return <PageSpinner />;
|
||||
|
||||
// if small, render less stuff
|
||||
const options = {
|
||||
showFooter: !small,
|
||||
showReactionsLink: !small,
|
||||
showMedia: !small,
|
||||
longFormPreview: !small,
|
||||
truncate: small,
|
||||
showContextMenu: !small,
|
||||
};
|
||||
|
||||
const filteredAndLimitedPosts = () => {
|
||||
return posts.filter(a => !isEventMuted(a)).slice(0, count);
|
||||
};
|
||||
const filteredAndLimitedPosts = trendingNotesData
|
||||
? trendingNotesData.filter(a => !isEventMuted(a)).slice(0, count)
|
||||
: [];
|
||||
|
||||
const renderGrid = () => {
|
||||
return (
|
||||
<div className="grid grid-cols-3 gap-px md:gap-1">
|
||||
{filteredAndLimitedPosts().map(e => (
|
||||
{filteredAndLimitedPosts.map(e => (
|
||||
<ImageGridItem
|
||||
key={e.id}
|
||||
event={e as TaggedNostrEvent}
|
||||
@ -73,11 +61,24 @@ export default function TrendingNotes({ count = Infinity, small = false }) {
|
||||
};
|
||||
|
||||
const renderList = () => {
|
||||
return filteredAndLimitedPosts().map(e =>
|
||||
return filteredAndLimitedPosts.map(e =>
|
||||
small ? (
|
||||
<ShortNote key={e.id} event={e as TaggedNostrEvent} />
|
||||
) : (
|
||||
<Note key={e.id} data={e as TaggedNostrEvent} related={related?.data ?? []} depth={0} options={options} />
|
||||
<Note
|
||||
key={e.id}
|
||||
data={e as TaggedNostrEvent}
|
||||
related={related?.data ?? []}
|
||||
depth={0}
|
||||
options={{
|
||||
showFooter: !small,
|
||||
showReactionsLink: !small,
|
||||
showMedia: !small,
|
||||
longFormPreview: !small,
|
||||
truncate: small,
|
||||
showContextMenu: !small,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
);
|
||||
};
|
||||
|
@ -1,32 +1,29 @@
|
||||
import { ReactNode, useEffect, useState } from "react";
|
||||
import { ReactNode } from "react";
|
||||
import { HexKey } from "@snort/system";
|
||||
|
||||
import FollowListBase from "@/Element/User/FollowListBase";
|
||||
import PageSpinner from "@/Element/PageSpinner";
|
||||
import NostrBandApi from "@/External/NostrBand";
|
||||
import { ErrorOrOffline } from "../ErrorOrOffline";
|
||||
import useCachedFetch from "@/Hooks/useCachedFetch";
|
||||
|
||||
export default function TrendingUsers({ title, count = Infinity }: { title?: ReactNode; count?: number }) {
|
||||
const [userList, setUserList] = useState<HexKey[]>();
|
||||
const [error, setError] = useState<Error>();
|
||||
const api = new NostrBandApi();
|
||||
const trendingProfilesUrl = api.trendingProfilesUrl();
|
||||
const storageKey = `nostr-band-${trendingProfilesUrl}`;
|
||||
|
||||
async function loadTrendingUsers() {
|
||||
const api = new NostrBandApi();
|
||||
const users = await api.trendingProfiles();
|
||||
const keys = users.profiles.map(a => a.pubkey).slice(0, count); // Limit the user list to the count
|
||||
setUserList(keys);
|
||||
const {
|
||||
data: trendingUsersData,
|
||||
isLoading,
|
||||
error,
|
||||
} = useCachedFetch(trendingProfilesUrl, storageKey, data => data.profiles.map(a => a.pubkey));
|
||||
|
||||
if (error) {
|
||||
return <ErrorOrOffline error={error} onRetry={() => {}} className="p" />;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadTrendingUsers().catch(e => {
|
||||
if (e instanceof Error) {
|
||||
setError(e);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
if (isLoading || !trendingUsersData) {
|
||||
return <PageSpinner />;
|
||||
}
|
||||
|
||||
if (error) return <ErrorOrOffline error={error} onRetry={loadTrendingUsers} className="p" />;
|
||||
if (!userList) return <PageSpinner />;
|
||||
|
||||
return <FollowListBase pubkeys={userList} showAbout={true} title={title} />;
|
||||
return <FollowListBase pubkeys={trendingUsersData.slice(0, count) as HexKey[]} showAbout={true} title={title} />;
|
||||
}
|
||||
|
103
packages/app/src/External/NostrBand.ts
vendored
103
packages/app/src/External/NostrBand.ts
vendored
@ -1,105 +1,20 @@
|
||||
import { throwIfOffline } from "@snort/shared";
|
||||
import { NostrEvent } from "@snort/system";
|
||||
|
||||
export interface TrendingUser {
|
||||
pubkey: string;
|
||||
}
|
||||
|
||||
export interface TrendingUserResponse {
|
||||
profiles: Array<TrendingUser>;
|
||||
}
|
||||
|
||||
export interface TrendingNote {
|
||||
event: NostrEvent;
|
||||
author: NostrEvent; // kind0 event
|
||||
}
|
||||
|
||||
export interface TrendingNoteResponse {
|
||||
notes: Array<TrendingNote>;
|
||||
}
|
||||
|
||||
export interface TrendingHashtagsResponse {
|
||||
hashtags: Array<{
|
||||
hashtag: string;
|
||||
posts: number;
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface SuggestedFollow {
|
||||
pubkey: string;
|
||||
}
|
||||
|
||||
export interface SuggestedFollowsResponse {
|
||||
profiles: Array<SuggestedFollow>;
|
||||
}
|
||||
|
||||
export class NostrBandError extends Error {
|
||||
body: string;
|
||||
statusCode: number;
|
||||
|
||||
constructor(message: string, body: string, status: number) {
|
||||
super(message);
|
||||
this.body = body;
|
||||
this.statusCode = status;
|
||||
}
|
||||
}
|
||||
|
||||
export default class NostrBandApi {
|
||||
readonly #url = "https://api.nostr.band";
|
||||
readonly #supportedLangs = ["en", "de", "ja", "zh", "th", "pt", "es", "fr"];
|
||||
async trendingProfiles() {
|
||||
return await this.#json<TrendingUserResponse>("GET", "/v0/trending/profiles");
|
||||
|
||||
trendingProfilesUrl() {
|
||||
return `${this.#url}/v0/trending/profiles`;
|
||||
}
|
||||
|
||||
async trendingNotes(lang?: string) {
|
||||
if (lang && this.#supportedLangs.includes(lang)) {
|
||||
return await this.#json<TrendingNoteResponse>("GET", `/v0/trending/notes?lang=${lang}`);
|
||||
}
|
||||
return await this.#json<TrendingNoteResponse>("GET", "/v0/trending/notes");
|
||||
trendingNotesUrl(lang?: string) {
|
||||
return `${this.#url}/v0/trending/notes${lang && this.#supportedLangs.includes(lang) ? `?lang=${lang}` : ""}`;
|
||||
}
|
||||
|
||||
async sugguestedFollows(pubkey: string) {
|
||||
return await this.#json<SuggestedFollowsResponse>("GET", `/v0/suggested/profiles/${pubkey}`);
|
||||
suggestedFollowsUrl(pubkey: string) {
|
||||
return `${this.#url}/v0/suggested/profiles/${pubkey}`;
|
||||
}
|
||||
|
||||
async trendingHashtags(lang?: string) {
|
||||
if (lang && this.#supportedLangs.includes(lang)) {
|
||||
return await this.#json<TrendingHashtagsResponse>("GET", `/v0/trending/hashtags?lang=${lang}`);
|
||||
}
|
||||
return await this.#json<TrendingHashtagsResponse>("GET", "/v0/trending/hashtags");
|
||||
}
|
||||
|
||||
async #json<T>(method: string, path: string) {
|
||||
throwIfOffline();
|
||||
|
||||
const storageKey = `nostr-band-${path}`;
|
||||
const cachedData = localStorage.getItem(storageKey);
|
||||
if (cachedData) {
|
||||
const parsedData = JSON.parse(cachedData);
|
||||
const { timestamp, data } = parsedData;
|
||||
|
||||
const ageInMinutes = (new Date().getTime() - timestamp) / 1000 / 60;
|
||||
if (ageInMinutes < 15) {
|
||||
return data as T;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch(`${this.#url}${path}`, { method: method ?? "GET" });
|
||||
if (res.ok) {
|
||||
const data = (await res.json()) as T;
|
||||
// Cache the new data with a timestamp
|
||||
localStorage.setItem(storageKey, JSON.stringify({ data, timestamp: new Date().getTime() }));
|
||||
return data;
|
||||
} else {
|
||||
throw new NostrBandError("Failed to load content from nostr.band", await res.text(), res.status);
|
||||
}
|
||||
} catch (error) {
|
||||
if (cachedData) {
|
||||
return JSON.parse(cachedData).data as T;
|
||||
} else {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
trendingHashtagsUrl(lang?: string) {
|
||||
return `${this.#url}/v0/trending/hashtags${lang && this.#supportedLangs.includes(lang) ? `?lang=${lang}` : ""}`;
|
||||
}
|
||||
}
|
||||
|
44
packages/app/src/External/SemisolDev.ts
vendored
44
packages/app/src/External/SemisolDev.ts
vendored
@ -1,46 +1,8 @@
|
||||
import { throwIfOffline } from "@snort/shared";
|
||||
|
||||
export interface RecommendedProfilesResponse {
|
||||
quality: number;
|
||||
recommendations: Array<[pubkey: string, score: number]>;
|
||||
}
|
||||
|
||||
export class SemisolDevApiError extends Error {
|
||||
body: string;
|
||||
statusCode: number;
|
||||
|
||||
constructor(message: string, body: string, status: number) {
|
||||
super(message);
|
||||
this.body = body;
|
||||
this.statusCode = status;
|
||||
}
|
||||
}
|
||||
|
||||
export default class SemisolDevApi {
|
||||
readonly #url = "https://api.semisol.dev";
|
||||
|
||||
async sugguestedFollows(pubkey: string, follows: Array<string>) {
|
||||
return await this.#json<RecommendedProfilesResponse>("POST", "/nosgraph/v1/recommend", {
|
||||
pubkey,
|
||||
exclude: [],
|
||||
following: follows,
|
||||
});
|
||||
}
|
||||
|
||||
async #json<T>(method: string, path: string, body?: unknown) {
|
||||
throwIfOffline();
|
||||
const url = `${this.#url}${path}`;
|
||||
const res = await fetch(url, {
|
||||
method: method ?? "GET",
|
||||
body: body ? JSON.stringify(body) : undefined,
|
||||
headers: {
|
||||
...(body ? { "content-type": "application/json" } : {}),
|
||||
},
|
||||
});
|
||||
if (res.ok) {
|
||||
return (await res.json()) as T;
|
||||
} else {
|
||||
throw new SemisolDevApiError(`Failed to load content from ${url}`, await res.text(), res.status);
|
||||
}
|
||||
suggestedFollowsUrl(pubkey: string, follows: Array<string>) {
|
||||
const query = new URLSearchParams({ pubkey, follows: JSON.stringify(follows) });
|
||||
return `${this.#url}/nosgraph/v1/recommend?${query.toString()}`;
|
||||
}
|
||||
}
|
||||
|
46
packages/app/src/Hooks/useCachedFetch.ts
Normal file
46
packages/app/src/Hooks/useCachedFetch.ts
Normal file
@ -0,0 +1,46 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
|
||||
const useCachedFetch = (url, storageKey, dataProcessor = data => data) => {
|
||||
const cachedData = useMemo(() => {
|
||||
const cached = localStorage.getItem(storageKey);
|
||||
return cached ? JSON.parse(cached) : null;
|
||||
}, [storageKey]);
|
||||
|
||||
const initialData = cachedData ? cachedData.data : null;
|
||||
const [data, setData] = useState(initialData);
|
||||
const [isLoading, setIsLoading] = useState(!cachedData);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const res = await fetch(url);
|
||||
if (!res.ok) {
|
||||
throw new Error(`HTTP error! status: ${res.status}`);
|
||||
}
|
||||
const fetchedData = await res.json();
|
||||
const processedData = dataProcessor(fetchedData);
|
||||
setData(processedData);
|
||||
localStorage.setItem(storageKey, JSON.stringify({ data: processedData, timestamp: new Date().getTime() }));
|
||||
} catch (e) {
|
||||
setError(e);
|
||||
if (cachedData?.data) {
|
||||
setData(cachedData.data);
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!cachedData || (new Date().getTime() - cachedData.timestamp) / 1000 / 60 >= 15) {
|
||||
fetchData();
|
||||
}
|
||||
}, [url, storageKey, dataProcessor]);
|
||||
|
||||
return { data, isLoading, error };
|
||||
};
|
||||
|
||||
export default useCachedFetch;
|
@ -75,7 +75,6 @@
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user