diff --git a/src/components/columns/navigator/index.tsx b/src/components/columns/navigator/index.tsx index 94997151..6d0d503b 100644 --- a/src/components/columns/navigator/index.tsx +++ b/src/components/columns/navigator/index.tsx @@ -2,73 +2,60 @@ import ActiveLink from '@components/activeLink'; import Messages from '@components/columns/navigator/messages'; import { PlusIcon } from '@radix-ui/react-icons'; +import useLocalStorage from '@rehooks/local-storage'; export default function NavigatorColumn() { + const [follows] = useLocalStorage('follows'); + return ( -
-
- {/* Create post -
-
-
-
{profile.display_name || ''}
- -
- @{profile.username || ''} -
-
- -
-
- */} - {/* Newsfeed */} -
-
-

Newsfeed

- -
-
- -
- -
- following - - -
- -
- circle - -
+
+ {/* Newsfeed */} +
+
+

Newsfeed

+
- {/* Messages */} -
-
-

Messages

- -
-
- -
+
+ +
+ +
+ following + + +
+ +
+ circle + +
+
+ {/* Messages */} +
+
+

Messages

+ +
+
+
diff --git a/src/components/columns/navigator/messages/index.tsx b/src/components/columns/navigator/messages/index.tsx index 4e288a3e..a7c369fb 100644 --- a/src/components/columns/navigator/messages/index.tsx +++ b/src/components/columns/navigator/messages/index.tsx @@ -1,31 +1,14 @@ -import Avatar from 'boring-avatars'; -import { useState } from 'react'; -import { Config, names, uniqueNamesGenerator } from 'unique-names-generator'; +import { UserMini } from '@components/user/mini'; -const config: Config = { - dictionaries: [names], -}; +import { Key } from 'react'; -export default function Messages() { - const [data] = useState([...Array(15)]); +export default function Messages({ data }: { data: any }) { + console.log(data); return ( <> - {data.map((item, index) => ( -
- -
-

{uniqueNamesGenerator(config).toString()}

-
-
+ {data.map((item: string, index: Key) => ( + ))} ); diff --git a/src/components/user/mini.tsx b/src/components/user/mini.tsx new file mode 100644 index 00000000..824ea181 --- /dev/null +++ b/src/components/user/mini.tsx @@ -0,0 +1,75 @@ +import { DatabaseContext } from '@components/contexts/database'; +import { ImageWithFallback } from '@components/imageWithFallback'; + +import { truncate } from '@utils/truncate'; + +import Avatar from 'boring-avatars'; +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, display_name: null }); + + const insertCacheProfile = useCallback( + async (event) => { + const metadata: any = JSON.parse(event.content); + // insert to database + await db.execute( + `INSERT OR IGNORE INTO cache_profiles (id, metadata) VALUES ("${pubkey}", '${JSON.stringify(metadata)}')` + ); + // update state + setProfile(metadata); + }, + [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]); + + 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)); + } + }) + .catch(console.error); + }, [getCacheProfile, insertCacheProfile, pubkey]); + + return ( +
+
+ {profile.picture ? ( + + ) : ( + + )} +
+
+

+ {profile.display_name ? profile.display_name : truncate(pubkey, 16, ' .... ')} +

+
+
+ ); +});