highperfocused/lume
1
0
Fork 0
mirror of https://github.com/lumehq/lume.git synced 2025-03-26 01:31:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

fixed my buggy codes

Browse Source
This commit is contained in:
Ren Amamiya 2023-03-21 13:49:00 +07:00
parent 3ad1fff4f8
commit 283931bfa1
8 changed files with 108 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/note/content/index.tsx
View File

@ -32,7 +32,7 @@ export const Content = memo(function Content({ data }: { data: any }) {
return <UserMention key={match + i} pubkey={tags[match][1]} />;
} else {
// #TODO: handle mention other note
console.log(tags[match]);
// console.log(tags[match]);
}
});
}

10
src/components/note/content/metadata.tsx
View File

@ -3,7 +3,7 @@ import { CommentsCounter } from '@components/note/counter/comments';
import { LikesCounter } from '@components/note/counter/likes';
import { useLocalStorage } from '@rehooks/local-storage';
import { useContext, useMemo, useState } from 'react';
import { useContext, useEffect, useState } from 'react';
export default function NoteMetadata({
eventID,
@ -22,8 +22,8 @@ export default function NoteMetadata({
const [likes, setLikes] = useState(0);
const [comments, setComments] = useState(0);
useMemo(() => {
relayPool.subscribe(
useEffect(() => {
const unsubscribe = relayPool.subscribe(
[
{
'#e': [eventID],
@ -52,6 +52,10 @@ export default function NoteMetadata({
unsubscribeOnEose: true,
}
);
return () => {
unsubscribe();
};
}, [eventID, relayPool, relays]);
return (

47
src/components/note/counter/likes.tsx
View File

@ -7,7 +7,7 @@ import LikedIcon from '@assets/icons/liked';
import { useLocalStorage } from '@rehooks/local-storage';
import { getEventHash, signEvent } from 'nostr-tools';
import { memo, useCallback, useContext, useState } from 'react';
import { memo, useContext, useState } from 'react';
export const LikesCounter = memo(function LikesCounter({
count,
@ -26,31 +26,28 @@ export const LikesCounter = memo(function LikesCounter({
const [isReact, setIsReact] = useState(false);
const [like, setLike] = useState(count);
const handleLike = useCallback(
(e: any) => {
e.stopPropagation();
const handleLike = (e: any) => {
e.stopPropagation();
const event: any = {
content: '+',
kind: 7,
tags: [
['e', eventID],
['p', eventPubkey],
],
created_at: dateToUnix(),
pubkey: currentUser.id,
};
event.id = getEventHash(event);
event.sig = signEvent(event, currentUser.privkey);
// publish event to all relays
relayPool.publish(event, relays);
// update state to change icon to filled heart
setIsReact(true);
// update counter
setLike(like + 1);
},
[eventID, eventPubkey, currentUser.id, currentUser.privkey, relayPool, relays, like]
);
const event: any = {
content: '+',
kind: 7,
tags: [
['e', eventID],
['p', eventPubkey],
],
created_at: dateToUnix(),
pubkey: currentUser.id,
};
event.id = getEventHash(event);
event.sig = signEvent(event, currentUser.privkey);
// publish event to all relays
relayPool.publish(event, relays);
// update state to change icon to filled heart
setIsReact(true);
// update counter
setLike(like + 1);
};
return (
<button onClick={(e) => handleLike(e)} className="group flex w-16 items-center gap-1 text-sm text-zinc-500">

2
src/components/note/preview/image.tsx
View File

@ -5,7 +5,7 @@ export const ImagePreview = memo(function ImagePreview({ data }: { data: any })
return (
<div className="relative mt-2 flex flex-col overflow-hidden">
{data.map((image: string, index: number) => (
<div key={index} className={`relative h-full w-full rounded-lg xl:w-2/3 ${index == 1 ? 'mt-2' : ''}`}>
<div key={index} className={`relative h-full w-full rounded-lg xl:w-2/3 ${index >= 1 ? 'mt-2' : ''}`}>
<Image
placeholder="blur"
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="

30
src/components/user/base.tsx
View File

@ -3,13 +3,22 @@ import { ImageWithFallback } from '@components/imageWithFallback';
import { truncate } from '@utils/truncate';
import { fetch } from '@tauri-apps/api/http';
import Avatar from 'boring-avatars';
import { memo, useCallback, useContext, useMemo, useState } from 'react';
import { memo, useCallback, useContext, useEffect, useState } from 'react';
export const UserBase = memo(function UserBase({ pubkey }: { pubkey: string }) {
const { db }: any = useContext(DatabaseContext);
const [profile, setProfile] = useState({ picture: null, display_name: null, name: null });
const fetchProfile = useCallback(async (id: string) => {
const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
method: 'GET',
timeout: 30,
});
return res;
}, []);
const cacheProfile = useCallback(
async (event) => {
// insert to database
@ -20,20 +29,11 @@ export const UserBase = memo(function UserBase({ pubkey }: { pubkey: string }) {
[db, pubkey]
);
useMemo(() => {
fetch(`https://rbr.bio/${pubkey}/metadata.json`, { redirect: 'follow' })
.then((response) => {
if (response.ok) {
return response.json();
} else if (response.status === 404) {
return Promise.reject('error 404');
} else {
return Promise.reject('some other error: ' + response.status);
}
})
.then((data) => cacheProfile(data))
.catch((error) => console.log('error is', error));
}, [cacheProfile, pubkey]);
useEffect(() => {
fetchProfile(pubkey)
.then((res) => cacheProfile(res))
.catch(console.error);
}, [fetchProfile, cacheProfile, pubkey]);
return (
<div className="flex items-center gap-2">

40
src/components/user/extend.tsx
View File

@ -4,10 +4,11 @@ import { ImageWithFallback } from '@components/imageWithFallback';
import { truncate } from '@utils/truncate';
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
import { fetch } from '@tauri-apps/api/http';
import Avatar from 'boring-avatars';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { memo, useCallback, useContext, useMemo, useState } from 'react';
import { memo, useCallback, useContext, useEffect, useState } from 'react';
dayjs.extend(relativeTime);
@ -15,6 +16,19 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
const { db }: any = useContext(DatabaseContext);
const [profile, setProfile] = useState({ picture: null, name: null, username: null });
const fetchProfile = useCallback(async (id: string) => {
const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
method: 'GET',
timeout: 30,
});
return res.data;
}, []);
const getCacheProfile = useCallback(async () => {
const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE id = "${pubkey}"`);
return result[0];
}, [db, pubkey]);
const insertCacheProfile = useCallback(
async (event) => {
// insert to database
@ -25,33 +39,19 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
[db, pubkey]
);
const getCacheProfile = useCallback(async () => {
const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE id = "${pubkey}"`);
return result[0];
}, [db, pubkey]);
useMemo(() => {
useEffect(() => {
getCacheProfile()
.then((res) => {
if (res !== undefined) {
setProfile(JSON.parse(res.metadata));
} else {
fetch(`https://rbr.bio/${pubkey}/metadata.json`, { redirect: 'follow' })
.then((response) => {
if (response.ok) {
return response.json();
} else if (response.status === 404) {
return Promise.reject('error 404');
} else {
return Promise.reject('some other error: ' + response.status);
}
})
.then((data) => insertCacheProfile(data))
.catch((error) => console.log('error is', error));
fetchProfile(pubkey)
.then((res) => insertCacheProfile(res))
.catch(console.error);
}
})
.catch(console.error);
}, [getCacheProfile, insertCacheProfile, pubkey]);
}, [fetchProfile, getCacheProfile, insertCacheProfile, pubkey]);
return (
<div className="flex items-start gap-2">

44
src/components/user/mention.tsx
View File

@ -2,11 +2,25 @@ import { DatabaseContext } from '@components/contexts/database';
import { truncate } from '@utils/truncate';
import { memo, useCallback, useContext, useMemo, useState } from 'react';
import { fetch } from '@tauri-apps/api/http';
import { memo, useCallback, useContext, useEffect, useState } from 'react';
export const UserMention = memo(function UserMention({ pubkey }: { pubkey: string }) {
const { db }: any = useContext(DatabaseContext);
const [profile, setProfile] = useState({ name: null });
const [profile, setProfile] = useState(null);
const fetchProfile = useCallback(async (id: string) => {
const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
method: 'GET',
timeout: 30,
});
return res.data;
}, []);
const getCacheProfile = useCallback(async () => {
const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE id = "${pubkey}"`);
return result[0];
}, [db, pubkey]);
const insertCacheProfile = useCallback(
async (event) => {
@ -18,33 +32,19 @@ export const UserMention = memo(function UserMention({ pubkey }: { pubkey: strin
[db, pubkey]
);
const getCacheProfile = useCallback(async () => {
const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE id = "${pubkey}"`);
return result[0];
}, [db, pubkey]);
useMemo(() => {
useEffect(() => {
getCacheProfile()
.then((res) => {
if (res !== undefined) {
setProfile(JSON.parse(res.metadata));
} else {
fetch(`https://rbr.bio/${pubkey}/metadata.json`, { redirect: 'follow' })
.then((response) => {
if (response.ok) {
return response.json();
} else if (response.status === 404) {
return Promise.reject('error 404');
} else {
return Promise.reject('some other error: ' + response.status);
}
})
.then((data) => insertCacheProfile(data))
.catch((error) => console.log('error is', error));
fetchProfile(pubkey)
.then((res) => insertCacheProfile(res))
.catch(console.error);
}
})
.catch(console.error);
}, [getCacheProfile, insertCacheProfile, pubkey]);
}, [fetchProfile, getCacheProfile, insertCacheProfile, pubkey]);
return <span className="text-fuchsia-500">@{profile.name ? profile.name : truncate(pubkey, 16, ' .... ')}</span>;
return <span className="text-fuchsia-500">@{profile ? profile.name : truncate(pubkey, 16, ' .... ')}</span>;
});

40
src/components/user/mini.tsx
View File

@ -3,13 +3,27 @@ import { ImageWithFallback } from '@components/imageWithFallback';
import { truncate } from '@utils/truncate';
import { fetch } from '@tauri-apps/api/http';
import Avatar from 'boring-avatars';
import { memo, useCallback, useContext, useMemo, useState } from 'react';
import { memo, useCallback, useContext, useEffect, useState } from 'react';
export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
const { db }: any = useContext(DatabaseContext);
const [profile, setProfile] = useState({ picture: null, name: null });
const fetchProfile = useCallback(async (id: string) => {
const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
method: 'GET',
timeout: 30,
});
return res.data;
}, []);
const getCacheProfile = useCallback(async () => {
const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE id = "${pubkey}"`);
return result[0];
}, [db, pubkey]);
const insertCacheProfile = useCallback(
async (event) => {
// insert to database
@ -20,33 +34,19 @@ export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
[db, pubkey]
);
const getCacheProfile = useCallback(async () => {
const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE id = "${pubkey}"`);
return result[0];
}, [db, pubkey]);
useMemo(() => {
useEffect(() => {
getCacheProfile()
.then((res) => {
if (res !== undefined) {
setProfile(JSON.parse(res.metadata));
} else {
fetch(`https://rbr.bio/${pubkey}/metadata.json`, { redirect: 'follow' })
.then((response) => {
if (response.ok) {
return response.json();
} else if (response.status === 404) {
return Promise.reject('error 404');
} else {
return Promise.reject('some other error: ' + response.status);
}
})
.then((data) => insertCacheProfile(data))
.catch((error) => console.log('error is', error));
fetchProfile(pubkey)
.then((res) => insertCacheProfile(res))
.catch(console.error);
}
})
.catch(console.error);
}, [getCacheProfile, insertCacheProfile, pubkey]);
}, [fetchProfile, getCacheProfile, insertCacheProfile, pubkey]);
return (
<div className="flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-medium hover:bg-zinc-900">