Files
snort/packages/app/src/Element/SuggestedProfiles.tsx
2023-12-26 20:15:26 +02:00

69 lines
2.3 KiB
TypeScript

import { useState } from "react";
import { HexKey, NostrPrefix } from "@snort/system";
import { FormattedMessage } from "react-intl";
import FollowListBase from "@/Element/User/FollowListBase";
import PageSpinner from "@/Element/PageSpinner";
import NostrBandApi from "@/External/NostrBand";
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,
SemisolDev = 2,
}
export default function SuggestedProfiles() {
const login = useLogin(s => ({ publicKey: s.publicKey, follows: s.follows.item }));
const [provider, setProvider] = useState(Provider.NostrBand);
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}` };
}
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 };
}
};
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 (
<>
<div className="flex items-center justify-between bg-superdark p br">
<FormattedMessage defaultMessage="Provider" id="xaj9Ba" />
<select onChange={e => setProvider(Number(e.target.value))}>
<option value={Provider.NostrBand}>nostr.band</option>
{/*<option value={Provider.SemisolDev}>semisol.dev</option>*/}
</select>
</div>
<FollowListBase pubkeys={userList as HexKey[]} showAbout={true} />
</>
);
}