Skip to content

Commit

Permalink
client-web: improve reactions; add replies
Browse files Browse the repository at this point in the history
  • Loading branch information
@franzos
franzos committed Aug 27, 2023
1 parent a39484b commit 7bf56b1
Show file tree
Hide file tree
Showing 36 changed files with 1,758 additions and 589 deletions.
2 changes: 1 addition & 1 deletion client-web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"framer-motion": "^10.15.0",
"idb": "^7.1.1",
"mdi-react": "^9.2.0",
"nanoid": "^4.0.2",
"nanoid": "^3.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.15.0",
Expand Down
12 changes: 2 additions & 10 deletions client-web/src/components/bottom-bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export function BottomBar() {
} else if (event.data[0] === RELAY_MESSAGE_TYPE.EOSE) {
// Ignore for now
return;
description = `Loaded all requested events for subscription ${event.data[1]}`;
// description = `Loaded all requested events for subscription ${event.data[1]}`;
} else if (event.data[0] === RELAY_MESSAGE_TYPE.COUNT) {
description = `Relay ${event.data[1]}: ${JSON.stringify(
event.data[2]
Expand All @@ -73,15 +73,7 @@ export function BottomBar() {
}, [relayEvents]);

return (
<Box
position="fixed"
bottom={0}
left={0}
right={0}
bg="white"
boxShadow="md"
p={3}
>
<Box position="fixed" bottom={0} left={0} right={0} p={3}>
<HStack spacing={4}>
<>
<HStack spacing={2}>
Expand Down
8 changes: 7 additions & 1 deletion client-web/src/components/create-event-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,13 @@ export const CreateEventForm = () => {
<FormLabel>Type: {translateNameToLabel(newEventName)}</FormLabel>

{users.map((user) => (
<User user={user} key={user.pubkey} relayUrls={[userrelayUrl]} />
<User
user={user}
key={user.pubkey}
options={{
relayUrls: [userrelayUrl],
}}
/>
))}
</FormControl>
<FormControl marginBottom={4}>
Expand Down
227 changes: 175 additions & 52 deletions client-web/src/components/event.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import ThumbDownIcon from "mdi-react/ThumbDownIcon";
import RepeatIcon from "mdi-react/RepeatIcon";
import { unixTimeToRelative } from "../lib/relative-time";
import { excerpt } from "../lib/excerpt";
import { UserIcon } from "./user-icon";

export interface EventProps extends NEventWithUserBase {
userComponent?: JSX.Element;
Expand All @@ -44,6 +45,8 @@ export function Event({
event,
reactions,
reposts,
mentions,
replies,
eventRelayUrls,
}: EventProps) {
const [isReady] = useNClient((state) => [
Expand All @@ -60,17 +63,22 @@ export function Event({
}>({});

useEffect(() => {
setDownVotesCount(reactions?.filter((r) => r.content === "-").length || 0);
setUpVotesCount(reactions?.filter((r) => r.content === "+").length || 0);
setDownVotesCount(
reactions?.filter((r) => r.event.content === "-").length || 0
);
setUpVotesCount(
reactions?.filter((r) => r.event.content === "+").length || 0
);
setRepostsCount(reposts?.length || 0);
setReactionsWithCount(
reactions
?.filter((r) => r.content !== "+" && r.content !== "-")
?.filter((r) => r.event.content !== "+" && r.event.content !== "-")
.reduce((acc, r) => {
if (acc[r.content]) {
acc[r.content] += 1;
} else {
acc[r.content] = 1;
const content = r.event?.content ? r.event.content : undefined;
if (content && acc[content]) {
acc[content] += 1;
} else if (content) {
acc[content] = 1;
}
return acc;
}, {} as { [key: string]: number }) || {}
Expand Down Expand Up @@ -287,56 +295,171 @@ export function Event({
</Modal>
);

return (
<>
<Card border="1px solid #e1e1e1" overflow="hidden">
<CardHeader p={0}>
<Box>
{images && images?.length > 0 && (
<Box className="image-container" marginBottom={4}>
{images.map((i, index) => (
<Image
key={index}
src={i}
fallback={<Image src="/no-image.png" />}
fallbackStrategy="onError"
alt=""
onClick={() => openImage(i)}
/>
))}
</Box>
)}
<Box p={4} paddingBottom={0}>
{userComponent && userComponent}
function makeLinksClickable(text: string) {
if (!text) return "";
const urlRegex = /(https?:\/\/[^\s]+)/g;
return text.replace(
urlRegex,
(url) =>
`<a href="${url}" target="_blank" class="is-inline">${excerpt(
url,
20
)}</a>`
);
}

const EventCard = (
<Card
border="1px solid #e1e1e1"
style={{ overflowWrap: "break-word", wordWrap: "break-word" }}
>
<CardHeader p={0}>
<Box>
{images && images?.length > 0 && (
<Box className="image-container" marginBottom={4}>
{images.map((i, index) => (
<Image
key={index}
src={i}
fallback={<Image src="/no-image.png" />}
fallbackStrategy="onError"
alt=""
onClick={() => openImage(i)}
/>
))}
</Box>
)}
<Box p={4} paddingBottom={0}>
{userComponent && userComponent}
</Box>
</CardHeader>
<CardBody p={4}>
<Text>{event.content}</Text>
<Text fontWeight="bold" fontSize={12} marginTop={2}>
{unixTimeToRelative(event.created_at)}
</Text>
</CardBody>
<CardFooter p={4}>
<HStack width="100%">
<ActionButtons />
</Box>
</CardHeader>
<CardBody p={4}>
<Box
style={{ overflowWrap: "anywhere" }}
dangerouslySetInnerHTML={{
__html: makeLinksClickable(event.content),
}}
/>
<Text fontWeight="bold" fontSize={12} marginTop={2}>
{unixTimeToRelative(event.created_at)}
</Text>
</CardBody>
<CardFooter p={4}>
<HStack width="100%">
<ActionButtons />

<Spacer />
<Text>Relay {eventRelayUrls[0]}</Text>
<Spacer />
<Text>{eventRelayUrls[0]}</Text>

<Button
size={"sm"}
variant="outline"
onClick={() => {
onEventModalOpen();
}}
>
Details
</Button>
</HStack>
</CardFooter>
</Card>
<Button
size={"sm"}
variant="outline"
onClick={() => {
onEventModalOpen();
}}
>
Details
</Button>
</HStack>
</CardFooter>
</Card>
);

return (
<>
{EventCard}
<HStack padding={2} flexWrap="wrap">
{reactions && (
<>
<Text>Reactions</Text>
{reactions.map((r, index) => {
const user = r.user || { pubkey: r.event.pubkey };
return (
<Box key={`${index}_${r.event.id}_${user.pubkey}_reactions`}>
<UserIcon
user={user}
options={{
title: "Reaction",
showAbout: true,
showBanner: true,
relayUrls: eventRelayUrls,
reaction: r.event.content,
avatarSize: "xs",
}}
/>
</Box>
);
})}
</>
)}
{reposts && (
<>
<Text>Reposts</Text>
{reposts.map((r) => {
const user = r.user ? r.user : { pubkey: r.event.pubkey };
return (
<Box key={`${r.event.id}_${user.pubkey}_reposts`}>
<UserIcon
user={user}
options={{
title: "Repost",
showAbout: true,
showBanner: true,
relayUrls: eventRelayUrls,
avatarSize: "xs",
}}
/>
<Icon as={RepeatIcon} />
</Box>
);
})}
</>
)}
{
// TODO: Relay urls
mentions && (
<>
<Text>Mentions</Text>
{mentions.map((u) => (
<Box key={`${event.id}_${u.pubkey}_mention`}>
<UserIcon
user={u}
options={{
title: "Mentioned",
showAbout: true,
showBanner: true,
relayUrls: eventRelayUrls,
}}
/>
</Box>
))}
</>
)
}
</HStack>

{replies &&
replies.map((r) => {
const user = r.user ? r.user : { pubkey: r.event.pubkey };
return (
<Box key={`${r.event.id}_${user.pubkey}_replies`} marginLeft={10}>
<Event
event={r.event}
userComponent={
<UserIcon
user={user}
// TODO: More accurate
options={{
relayUrls: eventRelayUrls,
}}
/>
}
eventRelayUrls={eventRelayUrls}
/>
</Box>
);
})}
{ImageModal}
{EventModal}
</>
Expand Down
13 changes: 10 additions & 3 deletions client-web/src/components/events.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export function Events(props: {
};

return (
<Box maxHeight="80vh" overflowY="auto">
<Box style={{ overflowWrap: "break-word", wordWrap: "break-word" }}>
{events.map((event) => {
return (
<Box padding={2} key={event.event.id}>
Expand All @@ -47,21 +47,28 @@ export function Events(props: {
user={event.user}
reactions={event.reactions}
reposts={event.reposts}
mentions={event.mentions}
replies={event.replies}
eventRelayUrls={event.eventRelayUrls}
key={event.event.id}
userComponent={
props && props.userComponent ? (
event.user && event.user.pubkey ? (
<props.userComponent
user={event.user}
relayUrls={event.eventRelayUrls}
options={{
showFollowing: true,
relayUrls: event.eventRelayUrls,
}}
/>
) : (
<props.userComponent
user={{
pubkey: event.event.pubkey,
}}
relayUrls={event.eventRelayUrls}
options={{
relayUrls: event.eventRelayUrls,
}}
/>
)
) : undefined
Expand Down
Loading

0 comments on commit 7bf56b1

Please sign in to comment.