diff --git a/src/Element/AsyncButton.tsx b/src/Element/AsyncButton.tsx index f6ed67ac..0c12851d 100644 --- a/src/Element/AsyncButton.tsx +++ b/src/Element/AsyncButton.tsx @@ -20,7 +20,7 @@ export default function AsyncButton(props: any) { } return ( -
handle(e)}> +
handle(e)}> {props.children}
) diff --git a/src/Element/FollowListBase.tsx b/src/Element/FollowListBase.tsx index 59e84b18..7b8dc85d 100644 --- a/src/Element/FollowListBase.tsx +++ b/src/Element/FollowListBase.tsx @@ -16,7 +16,7 @@ export default function FollowListBase({ pubkeys, title }: FollowListBaseProps) return ( <> -
+
{title}
followAll()}>Follow All
diff --git a/src/Pages/NewUserPage.tsx b/src/Pages/NewUserPage.tsx index 1017f68d..369fc78b 100644 --- a/src/Pages/NewUserPage.tsx +++ b/src/Pages/NewUserPage.tsx @@ -1,18 +1,75 @@ import { RecommendedFollows } from "Const"; +import AsyncButton from "Element/AsyncButton"; +import FollowListBase from "Element/FollowListBase"; import ProfilePreview from "Element/ProfilePreview"; +import { HexKey } from "Nostr"; +import { useMemo, useState } from "react"; +import { useSelector } from "react-redux"; +import { RootState } from "State/Store"; +import { bech32ToHex } from "Util"; + +const TwitterFollowsApi = "https://api.snort.social/api/v1/twitter/follows-for-nostr"; export default function NewUserPage() { + const [twitterUsername, setTwitterUsername] = useState(""); + const [follows, setFollows] = useState([]); + const currentFollows = useSelector(s => s.login.follows); + const [error, setError] = useState(""); + + const sortedReccomends = useMemo(() => { + return RecommendedFollows + .sort(a => Math.random() >= 0.5 ? -1 : 1); + }, []); + + const sortedTwitterFollows = useMemo(() => { + return follows.map(a => bech32ToHex(a)) + .sort((a, b) => currentFollows.includes(a) ? 1 : -1); + }, [follows]); + + async function loadFollows() { + setFollows([]); + setError(""); + try { + let rsp = await fetch(`${TwitterFollowsApi}?username=${twitterUsername}`); + if (rsp.ok) { + setFollows(await rsp.json()); + } else { + setError("Failed to load follows, is your profile public?"); + } + } catch (e) { + console.warn(e); + setError("Failed to load follows, is your profile public?"); + } + } function followSomebody() { return ( <>

Follow some popular accounts

-

Here are some suggestions:

- {RecommendedFollows - .sort(a => Math.random() >= 0.5 ? -1 : 1) - .map(a => )} + {sortedReccomends.map(a => )} ) } - return followSomebody() + + function importTwitterFollows() { + return ( + <> +

Import twitter follows

+

Find your twitter follows on nostr (Data provided by nostr.directory)

+
+ setTwitterUsername(e.target.value)} /> + Check +
+ {error.length > 0 && {error}} + {sortedTwitterFollows.length > 0 && ()} + + ) + } + + return ( + <> + {importTwitterFollows()} + {followSomebody()} + + ); } \ No newline at end of file diff --git a/src/index.css b/src/index.css index 5dea9514..05296df4 100644 --- a/src/index.css +++ b/src/index.css @@ -312,6 +312,10 @@ body.scroll-lock { margin-right: 5px; } +.mt10 { + margin-top: 10px; +} + .ml5 { margin-left: 5px; }