From 35d7ec4685dd25fc6b1a6e207d491f870dac8df2 Mon Sep 17 00:00:00 2001 From: Martti Malmi Date: Wed, 10 Jan 2024 15:40:40 +0200 Subject: [PATCH] followed by foafs --- .../app/src/Components/Embed/LinkPreview.tsx | 2 +- .../src/Components/Feed/TimelineFollows.tsx | 4 +- .../app/src/Components/User/FollowedBy.tsx | 71 ++++++++++++------- packages/app/src/Pages/ErrorPage.tsx | 4 +- packages/app/src/lang.json | 3 + packages/app/src/service-worker.ts | 4 +- packages/app/src/translations/en.json | 1 + packages/app/vite.config.ts | 4 +- 8 files changed, 57 insertions(+), 36 deletions(-) diff --git a/packages/app/src/Components/Embed/LinkPreview.tsx b/packages/app/src/Components/Embed/LinkPreview.tsx index e00fdfa2..4f8aedeb 100644 --- a/packages/app/src/Components/Embed/LinkPreview.tsx +++ b/packages/app/src/Components/Embed/LinkPreview.tsx @@ -1,7 +1,7 @@ import "./LinkPreview.css"; import { CSSProperties, useEffect, useState } from "react"; -import { LRUCache } from 'typescript-lru-cache'; +import { LRUCache } from "typescript-lru-cache"; import { MediaElement } from "@/Components/Embed/MediaElement"; import Spinner from "@/Components/Icons/Spinner"; diff --git a/packages/app/src/Components/Feed/TimelineFollows.tsx b/packages/app/src/Components/Feed/TimelineFollows.tsx index ff282f1e..b41f4925 100644 --- a/packages/app/src/Components/Feed/TimelineFollows.tsx +++ b/packages/app/src/Components/Feed/TimelineFollows.tsx @@ -12,10 +12,10 @@ import { DisplayAs, DisplayAsSelector } from "@/Components/Feed/DisplayAsSelecto import { TimelineRenderer } from "@/Components/Feed/TimelineRenderer"; import { LiveStreams } from "@/Components/LiveStream/LiveStreams"; import useHashtagsFeed from "@/Feed/HashtagsFeed"; +import useHistoryState from "@/Hooks/useHistoryState"; import useLogin from "@/Hooks/useLogin"; import useModeration from "@/Hooks/useModeration"; import { dedupeByPubkey, findTag, orderDescending } from "@/Utils"; -import useHistoryState from "@/Hooks/useHistoryState"; export interface TimelineFollowsProps { postsOnly: boolean; @@ -34,7 +34,7 @@ const TimelineFollows = (props: TimelineFollowsProps) => { const login = useLogin(); const displayAsInitial = props.displayAs ?? login.feedDisplayAs ?? "list"; const [displayAs, setDisplayAs] = useState(displayAsInitial); - const [latest, setLatest] = useHistoryState(unixNow(), 'TimelineFollowsLatest'); + const [latest, setLatest] = useHistoryState(unixNow(), "TimelineFollowsLatest"); const feed = useSyncExternalStore( cb => FollowsFeed.hook(cb, "*"), () => FollowsFeed.snapshot(), diff --git a/packages/app/src/Components/User/FollowedBy.tsx b/packages/app/src/Components/User/FollowedBy.tsx index 6fa9f436..4b107678 100644 --- a/packages/app/src/Components/User/FollowedBy.tsx +++ b/packages/app/src/Components/User/FollowedBy.tsx @@ -1,5 +1,5 @@ -import { socialGraphInstance } from "@snort/system"; -import { Fragment } from "react"; +import { HexKey, socialGraphInstance } from "@snort/system"; +import React, { Fragment, useMemo } from "react"; import { FormattedMessage } from "react-intl"; import DisplayName from "@/Components/User/DisplayName"; @@ -9,52 +9,71 @@ import { ProfileLink } from "@/Components/User/ProfileLink"; const MAX_FOLLOWED_BY_FRIENDS = 3; -export default function FollowedBy({ pubkey }: { pubkey: string }) { - const followedByFriends = socialGraphInstance.followedByFriends(pubkey); - const followedByFriendsArray = Array.from(followedByFriends).slice(0, MAX_FOLLOWED_BY_FRIENDS); +export default function FollowedBy({ pubkey }: { pubkey: HexKey }) { + const followDistance = socialGraphInstance.getFollowDistance(pubkey); + const { followedByFriendsArray, totalFollowedByFriends } = useMemo(() => { + const followedByFriends = socialGraphInstance.followedByFriends(pubkey); + return { + followedByFriendsArray: Array.from(followedByFriends).slice(0, MAX_FOLLOWED_BY_FRIENDS), + totalFollowedByFriends: followedByFriends.size, + }; + }, [pubkey, followDistance]); + + const renderFollowedByFriends = () => { + return followedByFriendsArray.map((a, index) => ( +
0 ? "-ml-5" : ""}`} + key={a} + style={{ zIndex: followedByFriendsArray.length - index }}> + +
+ )); + }; + + const renderFollowedByFriendsLinks = () => { + return followedByFriendsArray.map((a, index) => ( + + + + + {index < followedByFriendsArray.length - 1 && ","}{" "} + + )); + }; + return (
- {followedByFriendsArray.map((a, index) => { - const zIndex = followedByFriendsArray.length - index; - - return ( -
0 ? "-ml-5" : ""}`} key={a} style={{ zIndex }}> - -
- ); - })} + {renderFollowedByFriends()}
- {followedByFriends.size > 0 && ( + {totalFollowedByFriends > 0 && (
- {followedByFriendsArray.map((a, index) => ( - - - - - {index < followedByFriendsArray.length - 1 && ","}{" "} - - ))} - {followedByFriends.size > MAX_FOLLOWED_BY_FRIENDS && ( + {renderFollowedByFriendsLinks()} + {totalFollowedByFriends > MAX_FOLLOWED_BY_FRIENDS && ( )}
)} - {followedByFriends.size === 0 && ( + {followDistance > 3 && (
)} + {followDistance === 3 && ( +
+ +
+ )}
); } diff --git a/packages/app/src/Pages/ErrorPage.tsx b/packages/app/src/Pages/ErrorPage.tsx index 178a4e1d..cfc8c169 100644 --- a/packages/app/src/Pages/ErrorPage.tsx +++ b/packages/app/src/Pages/ErrorPage.tsx @@ -23,9 +23,7 @@ const ErrorPage = () => {
{error.message}
{error.message}
- 
-        {error.stack}
-
+ 
{error.stack}
); }; diff --git a/packages/app/src/lang.json b/packages/app/src/lang.json index 40278fb6..264f0fd2 100644 --- a/packages/app/src/lang.json +++ b/packages/app/src/lang.json @@ -147,6 +147,9 @@ "2mcwT8": { "defaultMessage": "New Note" }, + "2oCF7O": { + "defaultMessage": "Followed by friends of friends" + }, "2ukA4d": { "defaultMessage": "{n} hours" }, diff --git a/packages/app/src/service-worker.ts b/packages/app/src/service-worker.ts index f0bf67af..1fda3da9 100644 --- a/packages/app/src/service-worker.ts +++ b/packages/app/src/service-worker.ts @@ -26,7 +26,7 @@ registerRoute( maxEntries: 200, matchOptions: { ignoreVary: true, - } + }, }), ], }), @@ -51,7 +51,7 @@ registerRoute( maxEntries: 200, matchOptions: { ignoreVary: true, - } + }, }), ], }), diff --git a/packages/app/src/translations/en.json b/packages/app/src/translations/en.json index 095d3e6a..5a3b8ebb 100644 --- a/packages/app/src/translations/en.json +++ b/packages/app/src/translations/en.json @@ -48,6 +48,7 @@ "2a2YiP": "{n} Bookmarks", "2k0Cv+": "Dislikes ({n})", "2mcwT8": "New Note", + "2oCF7O": "Followed by friends of friends", "2ukA4d": "{n} hours", "2zJXeA": "Profiles", "39AHJm": "Sign Up", diff --git a/packages/app/vite.config.ts b/packages/app/vite.config.ts index bdab157b..5697cbd9 100644 --- a/packages/app/vite.config.ts +++ b/packages/app/vite.config.ts @@ -19,9 +19,9 @@ export default defineConfig({ type: "module", }, workbox: { - globPatterns: ['**/*.{js,html,wasm,woff,woff2,ttf,svg,png,jpg,jpeg,webp,ico,json}'], + globPatterns: ["**/*.{js,html,wasm,woff,woff2,ttf,svg,png,jpg,jpeg,webp,ico,json}"], sourcemap: true, - } + }, }), visualizer({ open: true,