Skip to content

Commit

Permalink
Merge pull request #132 from Crossbell-Box/feat/notification
Browse files Browse the repository at this point in the history
feat: notification related updates
  • Loading branch information
runjuu authored Jan 17, 2023
2 parents 3af39be + da55b28 commit e8321b1
Show file tree
Hide file tree
Showing 5 changed files with 100 additions and 33 deletions.
9 changes: 9 additions & 0 deletions packages/notification/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,19 @@
},
"./package.json": "./package.json"
},
"dependencies": {
"@emotion/react": "^11",
"@mantine/core": "^5",
"@mantine/modals": "^5",
"@mantine/hooks": "^5",
"classnames": "^2",
"react-intersection-observer": "^9"
},
"peerDependencies": {
"@crossbell/connect-kit": "workspace:*",
"@crossbell/util-metadata": "workspace:*",
"@crossbell/util-hooks": "workspace:*",
"@crossbell/util-ipfs": "workspace:*",
"@crossbell/indexer": "workspace:*",
"@crossbell/ui": "workspace:*",
"react": "18.x.x",
Expand Down
22 changes: 11 additions & 11 deletions packages/notification/src/notification-modal/components/item.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
import React from "react";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import { Indicator } from "@mantine/core";
// https://github.com/iamkun/dayjs/issues/1167
import relativeTime from "dayjs/plugin/relativeTime.js";
import { Indicator, Avatar } from "@mantine/core";

import { ParsedNotification } from "@crossbell/indexer";
import { CrossbellChainLogo } from "@crossbell/ui";
import { extractCharacterName } from "@crossbell/util-metadata";

import { Avatar } from "~/shared/components/avatar";
import {
composeCharacterHref,
composeNoteHref,
composeScanTxHref,
} from "~/shared/url";
import { useCharacterAvatar } from "~/shared/components/avatar/use-character-avatar";
import { composeCharacterHref, composeNoteHref } from "~/shared/url/href";
import { composeScanTxHref } from "~/shared/url/href-external";

import styles from "./item.module.css";

Expand All @@ -24,11 +22,13 @@ export type ItemProps = {
};

export function Item({ notification, isRead }: ItemProps) {
if (!notification) return null;

const character = notification.fromCharacter;
const titleInfo = getTitleInfo(notification);

const avatar = useCharacterAvatar(character);

if (!notification) return null;

return (
<div className={styles.container}>
<a
Expand All @@ -37,7 +37,7 @@ export function Item({ notification, isRead }: ItemProps) {
rel="noreferrer"
>
<Indicator size={9} disabled={isRead} color="red" offset={4.5}>
<Avatar character={character} />
<Avatar radius="xl" src={avatar.src} />
</Indicator>
</a>
<div className={styles.main}>
Expand Down
32 changes: 32 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

30 changes: 8 additions & 22 deletions shared/components/avatar/index.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import React from "react";
import { useCharacter } from "@crossbell/indexer";
import { ipfsLinkToHttpLink } from "@crossbell/util-ipfs";
import { extractCharacterAvatar } from "@crossbell/util-metadata";
import { Avatar as Avatar_, AvatarProps } from "@mantine/core";
import { CharacterEntity } from "crossbell.js";
import { PropsWithChildren } from "react";

import CharacterHoverCard from "~/shared/components/character/character-hover-card";
import { getDefaultAvatar } from "~/shared/avatar";

import { useCharacterAvatar } from "./use-character-avatar";

export function Avatar({
characterId,
Expand All @@ -30,29 +28,17 @@ export function Avatar({
showHoverCard?: boolean;
} & AvatarProps
>) {
const { isLoading, data: character } = useCharacter(
characterId ?? initialCharacter?.characterId,
{
enabled: Boolean(characterId) && !src,
initialData: initialCharacter,
}
);

let src_ =
src ??
extractCharacterAvatar(character) ??
(isLoading
? getDefaultAvatar()
: extractCharacterAvatar(character) ??
getDefaultAvatar(character?.handle));

src_ = ipfsLinkToHttpLink(src_);
const { src: avatarSrc, character } = useCharacterAvatar({
character: initialCharacter,
characterId,
disabled: !!src,
});

return (
<CharacterHoverCard character={character} showHoverCard={showHoverCard}>
<Avatar_
className="bg-coolgray-100"
src={src_}
src={src ?? avatarSrc}
alt={alt}
radius="xl"
{...props}
Expand Down
40 changes: 40 additions & 0 deletions shared/components/avatar/use-character-avatar.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { useCharacter } from "@crossbell/indexer";
import { extractCharacterAvatar } from "@crossbell/util-metadata";
import { ipfsLinkToHttpLink } from "@crossbell/util-ipfs";
import { CharacterEntity } from "crossbell.js";

import { getDefaultAvatar } from "~/shared/avatar";
import React from "react";

export type UseCharacterAvatarParams = {
characterId?: number | null;
character?: CharacterEntity | null;
disabled?: boolean;
};

export function useCharacterAvatar({
character,
characterId,
disabled,
}: UseCharacterAvatarParams) {
const { isLoading, data } = useCharacter(
characterId ?? character?.characterId,
{
enabled: !!characterId && !disabled,
initialData: character,
}
);

return React.useMemo(
() => ({
src: ipfsLinkToHttpLink(
extractCharacterAvatar(data) ??
(isLoading
? getDefaultAvatar()
: extractCharacterAvatar(data) ?? getDefaultAvatar(data?.handle))
),
character: data,
}),
[data, isLoading]
);
}

2 comments on commit e8321b1

@vercel
Copy link

@vercel vercel bot commented on e8321b1 Jan 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

x-sync – ./sites/x-sync

xsync.app
x-sync.vercel.app
x-sync-crossbell.vercel.app
x-sync-git-main-crossbell.vercel.app
www.xsync.app

@vercel
Copy link

@vercel vercel bot commented on e8321b1 Jan 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

crossbell-io – ./sites/crossbell.io

crossbell-io-crossbell.vercel.app
crossbell-io-git-main-crossbell.vercel.app
crossbell.vercel.app

Please sign in to comment.