reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clean up & small fixes

Browse Source
This commit is contained in:
Ren Amamiya
2023-08-26 14:52:02 +07:00
parent 0f212828a7
commit fe28cd95bd
15 changed files with 247 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/auth/components/user.tsx
View File

@@ -28,7 +28,7 @@ export function User({ pubkey, fallback }: { pubkey: string; fallback?: string }
/>
</div>
<div className="flex w-full flex-1 flex-col items-start text-start">
<p className="truncate font-medium leading-tight text-white">
<p className="max-w-[15rem] truncate font-medium leading-tight text-white">
{user?.name || user?.display_name || user?.nip05}
</p>
<span className="max-w-[15rem] truncate text-base leading-tight text-white/50">

15
src/app/space/components/forms/feed.tsx
View File

@@ -28,6 +28,10 @@ export function FeedWidgetForm({ params }: { params: Widget }) {
setGroups(arr);
};
const cancel = () => {
removeWidget(db, params.id);
};
const submit = async () => {
setWidget(db, {
kind: WidgetKinds.feed,
@@ -39,7 +43,7 @@ export function FeedWidgetForm({ params }: { params: Widget }) {
};
return (
<div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center">
<div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center bg-white/10">
<div className="w-full px-5">
<h3 className="mb-4 text-center text-lg font-semibold">
Choose account you want to add to group feeds
@@ -70,7 +74,7 @@ export function FeedWidgetForm({ params }: { params: Widget }) {
</button>
))}
</div>
<div className="flex items-center justify-center">
<div className="flex flex-col items-center justify-center gap-2">
<button
type="submit"
disabled={groups.length < 1}
@@ -81,6 +85,13 @@ export function FeedWidgetForm({ params }: { params: Widget }) {
<span>Add {groups.length} account to group feed</span>
<ArrowRightCircleIcon className="h-5 w-5" />
</button>
<button
type="button"
onClick={cancel}
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-white hover:bg-white/20 focus:outline-none disabled:opacity-50"
>
Cancel
</button>
</div>
</div>
</div>

15
src/app/space/components/forms/hashtag.tsx
View File

@@ -40,6 +40,10 @@ export function HashTagWidgetForm({ params }: { params: Widget }) {
formState: { errors, isDirty, isValid },
} = useForm<FormValues>({ resolver });
const cancel = () => {
removeWidget(db, params.id);
};
const onSubmit = async (data: FormValues) => {
try {
setWidget(db, {
@@ -58,7 +62,7 @@ export function HashTagWidgetForm({ params }: { params: Widget }) {
};
return (
<div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center">
<div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center bg-white/10">
<div className="w-full px-5">
<h3 className="mb-4 text-center text-lg font-semibold">
Enter hashtag you want to follow
@@ -74,7 +78,7 @@ export function HashTagWidgetForm({ params }: { params: Widget }) {
{errors.hashtag && <p>{errors.hashtag.message}</p>}
</span>
</div>
<div className="flex items-center justify-center">
<div className="flex flex-col items-center justify-center gap-2">
<button
type="submit"
disabled={!isDirty || !isValid}
@@ -84,6 +88,13 @@ export function HashTagWidgetForm({ params }: { params: Widget }) {
<span>Create</span>
<ArrowRightCircleIcon className="h-5 w-5" />
</button>
<button
type="button"
onClick={cancel}
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-white hover:bg-white/20 focus:outline-none disabled:opacity-50"
>
Cancel
</button>
</div>
</form>
</div>

30
src/app/space/components/userProfile.tsx
View File

@@ -1,10 +1,12 @@
import { useQuery } from '@tanstack/react-query';
import { useEffect, useState } from 'react';
import { FollowIcon, LoaderIcon, UnfollowIcon } from '@shared/icons';
import { useStorage } from '@libs/storage/provider';
import { FollowIcon, UnfollowIcon } from '@shared/icons';
import { Image } from '@shared/image';
import { useSocial } from '@utils/hooks/useSocial';
import { useNostr } from '@utils/hooks/useNostr';
import { compactNumber } from '@utils/number';
import { shortenKey } from '@utils/shortenKey';
@@ -14,7 +16,8 @@ export interface Profile {
}
export function UserProfile({ data }: { data: Profile }) {
const { status: socialStatus, userFollows, follow, unfollow } = useSocial();
const { db } = useStorage();
const { addContact, removeContact } = useNostr();
const { status, data: userStats } = useQuery(
['user-stats', data.pubkey],
async () => {
@@ -36,7 +39,7 @@ export function UserProfile({ data }: { data: Profile }) {
const followUser = (pubkey: string) => {
try {
follow(pubkey);
addContact(pubkey);
// update state
setFollowed(true);
} catch (error) {
@@ -46,7 +49,7 @@ export function UserProfile({ data }: { data: Profile }) {
const unfollowUser = (pubkey: string) => {
try {
unfollow(pubkey);
removeContact(pubkey);
// update state
setFollowed(false);
} catch (error) {
@@ -55,12 +58,10 @@ export function UserProfile({ data }: { data: Profile }) {
};
useEffect(() => {
if (status === 'success' && userFollows) {
if (userFollows.includes(data.pubkey)) {
setFollowed(true);
}
if (db.account.follows.includes(data.pubkey)) {
setFollowed(true);
}
}, [status]);
}, []);
if (!profile) {
return (
@@ -88,14 +89,7 @@ export function UserProfile({ data }: { data: Profile }) {
</div>
</div>
<div className="inline-flex items-center gap-2">
{socialStatus === 'loading' ? (
<button
type="button"
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 hover:bg-fuchsia-500"
>
<LoaderIcon className="h-4 w-4 animate-spin text-white" />
</button>
) : followed ? (
{followed ? (
<button
type="button"
onClick={() => unfollowUser(data.pubkey)}

27
src/app/users/components/profile.tsx
View File

@@ -8,21 +8,20 @@ import { useStorage } from '@libs/storage/provider';
import { EditProfileModal } from '@shared/editProfileModal';
import { Image } from '@shared/image';
import { useNostr } from '@utils/hooks/useNostr';
import { useProfile } from '@utils/hooks/useProfile';
import { useSocial } from '@utils/hooks/useSocial';
import { shortenKey } from '@utils/shortenKey';
export function UserProfile({ pubkey }: { pubkey: string }) {
const { db } = useStorage();
const { user } = useProfile(pubkey);
const { status, userFollows, follow, unfollow } = useSocial();
const { addContact, removeContact } = useNostr();
const [followed, setFollowed] = useState(false);
const followUser = (pubkey: string) => {
try {
follow(pubkey);
addContact(pubkey);
// update state
setFollowed(true);
} catch (error) {
@@ -32,8 +31,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
const unfollowUser = (pubkey: string) => {
try {
unfollow(pubkey);
removeContact(pubkey);
// update state
setFollowed(false);
} catch (error) {
@@ -42,12 +40,10 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
};
useEffect(() => {
if (status === 'success' && userFollows) {
if (userFollows.includes(pubkey)) {
setFollowed(true);
}
if (db.account.follows.includes(pubkey)) {
setFollowed(true);
}
}, [status]);
}, []);
if (!user) return <p>Loading...</p>;
@@ -92,14 +88,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
</div>
</div>
<div className="inline-flex items-center justify-center gap-2">
{status === 'loading' ? (
<button
type="button"
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
>
Loading...
</button>
) : followed ? (
{followed ? (
<button
type="button"
onClick={() => unfollowUser(pubkey)}

2
src/app/users/components/stats.tsx
View File

@@ -26,7 +26,7 @@ export function UserStats({ pubkey }: { pubkey: string }) {
}
return (
<div className="flex w-full items-center gap-10">
<div className="flex w-full items-center justify-center gap-10">
<div className="inline-flex flex-col items-center gap-1">
<span className="font-semibold leading-none text-white">
{compactNumber.format(data.stats[pubkey].followers_pubkey_count) ?? 0}

2
src/app/users/index.tsx
View File

@@ -37,7 +37,7 @@ export function UserScreen() {
count: data ? data.length : 0,
getScrollElement: () => parentRef.current,
estimateSize: () => 650,
overscan: 2,
overscan: 4,
});
const items = virtualizer.getVirtualItems();

14
src/shared/notes/replies/list.tsx
View File

@@ -11,10 +11,13 @@ export function RepliesList({ id }: { id: string }) {
const [data, setData] = useState<null | NDKEventWithReplies[]>(null);
useEffect(() => {
let isCancelled = false;
async function fetchRepliesAndSub() {
const events = await fetchAllReplies(id);
setData(events);
if (!isCancelled) {
setData(events);
}
// subscribe for new replies
sub(
{
@@ -26,9 +29,12 @@ export function RepliesList({ id }: { id: string }) {
false
);
}
fetchRepliesAndSub();
}, []);
return () => {
isCancelled = true;
};
}, [id]);
if (!data) {
return (

2
src/shared/notes/stats.tsx
View File

@@ -72,7 +72,7 @@ export function NoteStats({ id }: { id: string }) {
<span className="font-semibold text-white">
{compactNumber.format(data.reposts)}
</span>{' '}
reposts
repostrs
</p>
<span className="text-white/50">·</span>
<p className="text-white/50">

28
src/shared/userProfile.tsx
View File

@@ -3,21 +3,24 @@ import { Link } from 'react-router-dom';
import { UserStats } from '@app/users/components/stats';
import { useStorage } from '@libs/storage/provider';
import { Image } from '@shared/image';
import { useNostr } from '@utils/hooks/useNostr';
import { useProfile } from '@utils/hooks/useProfile';
import { useSocial } from '@utils/hooks/useSocial';
import { displayNpub } from '@utils/shortenKey';
export function UserProfile({ pubkey }: { pubkey: string }) {
const { db } = useStorage();
const { user } = useProfile(pubkey);
const { status, userFollows, follow, unfollow } = useSocial();
const { addContact, removeContact } = useNostr();
const [followed, setFollowed] = useState(false);
const followUser = (pubkey: string) => {
try {
follow(pubkey);
addContact(pubkey);
// update state
setFollowed(true);
@@ -28,7 +31,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
const unfollowUser = (pubkey: string) => {
try {
unfollow(pubkey);
removeContact(pubkey);
// update state
setFollowed(false);
@@ -38,12 +41,10 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
};
useEffect(() => {
if (status === 'success' && userFollows) {
if (userFollows.includes(pubkey)) {
setFollowed(true);
}
if (db.account.follows.includes(pubkey)) {
setFollowed(true);
}
}, [status]);
}, []);
return (
<div>
@@ -68,14 +69,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
<UserStats pubkey={pubkey} />
</div>
<div className="mt-4 inline-flex items-center gap-2">
{status === 'loading' ? (
<button
type="button"
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
>
Loading...
</button>
) : followed ? (
{followed ? (
<button
type="button"
onClick={() => unfollowUser(pubkey)}

28
src/utils/hooks/useNostr.ts
View File

@@ -98,6 +98,32 @@ export function useNostr() {
}
};
const addContact = async (pubkey: string) => {
const list = new Set(db.account.follows);
list.add(pubkey);
const tags = [];
list.forEach((item) => {
tags.push(['p', item]);
});
// publish event
publish({ content: '', kind: NDKKind.Contacts, tags: tags });
};
const removeContact = async (pubkey: string) => {
const list = new Set(db.account.follows);
list.delete(pubkey);
const tags = [];
list.forEach((item) => {
tags.push(['p', item]);
});
// publish event
publish({ content: '', kind: NDKKind.Contacts, tags: tags });
};
const prefetchEvents = async () => {
try {
const fetcher = NostrFetcher.withCustomPool(ndkAdapter(ndk));
@@ -309,6 +335,8 @@ export function useNostr() {
return {
sub,
fetchUserData,
addContact,
removeContact,
prefetchEvents,
fetchActivities,
fetchNIP04Chats,

69
src/utils/hooks/useSocial.ts
View File

@@ -1,69 +0,0 @@
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { useNDK } from '@libs/ndk/provider';
import { useStorage } from '@libs/storage/provider';
import { useNostr } from '@utils/hooks/useNostr';
export function useSocial() {
const queryClient = useQueryClient();
const { publish } = useNostr();
const { ndk } = useNDK();
const { db } = useStorage();
const { status, data: userFollows } = useQuery(
['userFollows', db.account.pubkey],
async () => {
const keys = [];
const user = ndk.getUser({ hexpubkey: db.account.pubkey });
const follows = await user.follows();
follows.forEach((item) => {
keys.push(item.hexpubkey);
});
return keys;
},
{
refetchOnReconnect: false,
refetchOnMount: false,
refetchOnWindowFocus: false,
}
);
const unfollow = (pubkey: string) => {
const followsAsSet = new Set(userFollows);
followsAsSet.delete(pubkey);
const tags = [];
followsAsSet.forEach((item) => {
tags.push(['p', item]);
});
// publish event
publish({ content: '', kind: 3, tags: tags });
// invalid cache
queryClient.invalidateQueries({
queryKey: ['userFollows', db.account.pubkey],
});
};
const follow = async (pubkey: string) => {
const followsAsSet = new Set(userFollows);
followsAsSet.add(pubkey);
const tags = [];
followsAsSet.forEach((item) => {
tags.push(['p', item]);
});
// publish event
publish({ content: '', kind: 3, tags: tags });
// invalid cache
queryClient.invalidateQueries({
queryKey: ['userFollows', db.account.pubkey],
});
};
return { status, userFollows, follow, unfollow };
}