Merge pull request #500 from digi-monkey/develop

feat: release v0.2.12

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flycat",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "private": true,
   "scripts": {
     "wasm:profile": "cd wasm && rustc --crate-type cdylib --target wasm32-unknown-unknown -C lto -C opt-level=z -o profile.wasm examples/profile.rs",
@@ -33,6 +33,7 @@
     "@noble/secp256k1": "1.7.0",
     "@radix-ui/react-avatar": "1.0.4",
     "@radix-ui/react-checkbox": "1.0.4",
+    "@radix-ui/react-collapsible": "1.0.3",
     "@radix-ui/react-dialog": "1.0.5",
     "@radix-ui/react-dropdown-menu": "2.0.6",
     "@radix-ui/react-hover-card": "1.0.7",

src/components/PostItems/PostItem/ui.tsx

@@ -11,6 +11,7 @@ import { noticePubEventResult } from 'components/PubEventNotice';
 import styles from '../index.module.scss';
 import dynamic from 'next/dynamic';
 import { useMemo } from 'react';
+import { useToast } from 'components/shared/ui/Toast/use-toast';
 
 const PostUser = dynamic(
   async () => {
@@ -56,11 +57,12 @@ export const PostUI: React.FC<PostUIProp> = ({
   extraHeader,
   showFromCommunity,
 }) => {
+  const { toast } = useToast();
   const menu = useMemo(() => {
     const onBroadcastEvent = async (event: Event, msg: typeof message) => {
       if (!worker) return msg.error('worker not found.');
       const pubHandler = worker.pubEvent(event);
-      noticePubEventResult(worker.relays.length, pubHandler);
+      noticePubEventResult(toast, worker.relays.length, pubHandler);
     };
     const menu = [
       {

src/components/PostItems/PostReactions/index.tsx

@@ -21,6 +21,7 @@ import { dexieDb } from 'core/db';
 
 import Icon from 'components/Icon';
 import styles from './index.module.scss';
+import { useToast } from 'components/shared/ui/Toast/use-toast';
 
 interface PostReactionsProp {
   ownerEvent: Event;
@@ -36,6 +37,7 @@ const PostReactions: React.FC<PostReactionsProp> = ({
   const { t } = useTranslation();
 
   const router = useRouter();
+  const { toast } = useToast();
   const myPublicKey = useReadonlyMyPublicKey();
   const signEvent = useSelector(
     (state: RootState) => state.loginReducer.signEvent,
@@ -55,7 +57,7 @@ const PostReactions: React.FC<PostReactionsProp> = ({
     const rawEvent = Nip18.createRepost(ownerEvent, seen[0]);
     const event = await signEvent(rawEvent);
     const handler = worker.pubEvent(event);
-    noticePubEventResult(worker.relays.length, handler);
+    noticePubEventResult(toast, worker.relays.length, handler);
   };
 
   const zap = async () => {
@@ -132,7 +134,7 @@ const PostReactions: React.FC<PostReactionsProp> = ({
     const event = await signEvent(rawEvent);
 
     const handler = worker.pubEvent(event);
-    noticePubEventResult(worker.relays.length, handler);
+    noticePubEventResult(toast, worker.relays.length, handler);
     setIsBookMarking(false);
   };
 

src/components/PubEventNotice/index.tsx

@@ -1,25 +1,18 @@
-import { Collapse, Modal, Progress, message } from 'antd';
 import { PubEventResultStream } from 'core/worker/sub';
 import { PubEventResultMsg } from 'core/worker/type';
-
-import styles from './index.module.scss';
-import Link from 'next/link';
-import Icon from 'components/Icon';
-
-const { Panel } = Collapse;
+import { toast as Toast } from 'components/shared/ui/Toast/use-toast';
+import { PublishNotice } from 'components/shared/PublishNotice';
 
 export async function noticePubEventResult(
+  toast: typeof Toast,
   relayCount: number,
   pubStream: PubEventResultStream,
   successCb?: (eventId: string, successRelays: string[]) => any,
 ) {
-  const instance = Modal.info({
+  toast({
     title: `Publish event to ${0}/${relayCount} relays`,
-    icon: null,
-    content: (
-      <Progress percent={calculatePercentage(0, relayCount)} showInfo={false} />
-    ),
-    okButtonProps: { style: { display: 'none' } },
+    status: 'loading',
+    duration: 60000,
   });
 
   const exec = async () => {
@@ -30,16 +23,9 @@ export async function noticePubEventResult(
 
       // update ui
       index++;
-      instance.update({
+      toast({
         title: `Publish event to ${index}/${relayCount} relays`,
-        icon: null,
-        content: (
-          <Progress
-            percent={calculatePercentage(index, relayCount)}
-            showInfo={false}
-          />
-        ),
-        okButtonProps: { style: { display: 'none' } },
+        status: 'loading',
       });
     }
     pubStream.unsubscribe();
@@ -55,68 +41,16 @@ export async function noticePubEventResult(
 
   const pubResult = await exec();
 
-  instance.destroy();
-  const key = 'pub-result';
-  message.info({
-    key,
-    icon: <span></span>,
-    content: (
-      <div className={styles.messageContainer}>
-        <div className={styles.title}>
-          <h3>
-            Publish <Link href={'/event/' + pubStream.eventId}>note</Link> to{' '}
-            {relayCount} relays
-          </h3>
-          <button
-            onClick={() => message.destroy(key)}
-            className={styles.closeButton}
-          >
-            <Icon type="icon-cross" width={24} height={24} />
-          </button>
-        </div>
-
-        <div className={styles.eventId}></div>
-        <Collapse>
-          <Panel header="Expand relay detail" key="1">
-            <div>
-              {pubResult
-                .filter(res => res.isSuccess)
-                .map(res => {
-                  return (
-                    <li key={res.relayUrl} className={styles.item}>
-                      <span className={styles.success}>
-                        <span>{res.relayUrl}</span>
-                        <span>{'☑️'}</span>
-                      </span>
-                    </li>
-                  );
-                })}
-              <hr />
-              {pubResult
-                .filter(res => !res.isSuccess)
-                .map(res => {
-                  return (
-                    <li key={res.relayUrl} className={styles.item}>
-                      <span className={styles.failed}>
-                        <span>{res.relayUrl}</span>
-                        <span>{res.reason}</span>
-                      </span>
-                    </li>
-                  );
-                })}
-            </div>
-          </Panel>
-        </Collapse>
-      </div>
-    ),
+  const success = pubResult.filter(res => res.isSuccess).map(r => r.relayUrl);
+  const fail = pubResult
+    .filter(res => !res.isSuccess)
+    .map(res => {
+      return { relay: res.relayUrl, reason: res.reason || 'unknown reason' };
+    });
+  const content = <PublishNotice success={success} fail={fail} />;
+
+  toast({
+    customContent: content,
+    status: 'success',
   });
 }
-
-function calculatePercentage(finishedCount: number, totalCount: number) {
-  if (totalCount === 0) {
-    throw new Error('Cannot calculate percentage with total count of 0.');
-  }
-  let percentage = (finishedCount / totalCount) * 100;
-  percentage = +percentage.toFixed(0);
-  return percentage;
-}

src/components/PubNoteTextarea/index.tsx

@@ -4,12 +4,13 @@ import { connect } from 'react-redux';
 import { useRouter } from 'next/router';
 import { useCallWorker } from 'hooks/useWorker';
 import { useTranslation } from 'next-i18next';
-import { useEffect, useRef, useState } from 'react';
+import { FormEvent, useEffect, useRef, useState } from 'react';
 import { LoginMode, SignEvent } from 'store/loginReducer';
 import { useReadonlyMyPublicKey } from 'hooks/useMyPublicKey';
 import { Button, Mentions, Popover, Select, Tooltip } from 'antd';
 import { handleFileSelect, handleSubmitText } from './util';
 import { IMentions, useLoadCommunities, useSetMentions } from './hooks';
+import { useToast } from 'components/shared/ui/Toast/use-toast';
 
 import Link from 'next/link';
 import Icon from 'components/Icon';
@@ -19,6 +20,7 @@ import classNames from 'classnames';
 import { Naddr } from 'core/nostr/type';
 import { maxStrings } from 'utils/common';
 import dynamic from 'next/dynamic';
+import { noticePubEventResult } from 'components/PubEventNotice';
 
 const Picker = dynamic(() => import('@emoji-mart/react'), {
   ssr: false,
@@ -54,6 +56,7 @@ const PubNoteTextarea: React.FC<Props> = ({
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const { t } = useTranslation();
+  const { toast } = useToast();
   const { worker, newConn } = useCallWorker();
   const [text, setText] = useState('');
   const [attachImgs, setAttachImgs] = useState<string[]>([]);
@@ -78,29 +81,38 @@ const PubNoteTextarea: React.FC<Props> = ({
     }
   }, []);
 
+  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    if (!worker) return;
+
+    const handler = await handleSubmitText(
+      event,
+      text,
+      attachImgs,
+      setText,
+      setAttachImgs,
+      selectMention,
+      signEvent,
+      myPublicKey,
+      worker,
+      pubSuccessCallback,
+      selectedCommunity,
+    );
+    if (handler)
+      noticePubEventResult(
+        toast,
+        worker.relays.length,
+        handler,
+        pubSuccessCallback,
+      );
+  };
+
   return (
     <div
       className={classNames(styles.pubNoteTextarea, {
         [styles.focus]: mentionsFocus,
       })}
     >
-      <form
-        onSubmit={event =>
-          handleSubmitText(
-            event,
-            text,
-            attachImgs,
-            setText,
-            setAttachImgs,
-            selectMention,
-            signEvent,
-            myPublicKey,
-            worker,
-            pubSuccessCallback,
-            selectedCommunity,
-          )
-        }
-      >
+      <form onSubmit={onSubmit}>
         <Mentions
           rows={3}
           placeholder={t('pubNoteBox.hintText') || ''}

src/components/PubNoteTextarea/util.tsx

@@ -3,7 +3,6 @@ import { CallWorker } from 'core/worker/caller';
 import { ImageProvider, compressImage } from 'core/api/img';
 import { EventTags, Naddr, Tags, WellKnownEventKind } from 'core/nostr/type';
 import { RawEvent } from 'core/nostr/RawEvent';
-import { noticePubEventResult } from 'components/PubEventNotice';
 import { DecodedNprofileResult, Nip19 } from 'core/nip/19';
 
 export const makeInvoice = async setText => {
@@ -145,10 +144,11 @@ export const handleSubmitText = async (
   );
   const event = await signEvent(rawEvent);
   const handler = worker.pubEvent(event);
-  noticePubEventResult(worker.relays.length, handler, pubSuccessCallback);
 
   setText('');
   setAttachImgs([]);
+
+  return handler;
 };
 
 export function extractHashTags(text: string): string[] {

src/components/ReplyNoteInput/index.tsx

@@ -25,6 +25,7 @@ import Picker from '@emoji-mart/react';
 import { Nip23 } from 'core/nip/23';
 import { dbQuery, dexieDb } from 'core/db';
 import { seedRelays } from 'core/relay/pool/seed';
+import { useToast } from 'components/shared/ui/Toast/use-toast';
 
 export interface ReplyEventInputProp {
   replyTo: EventWithSeen;
@@ -39,6 +40,7 @@ export const ReplyEventInput: React.FC<ReplyEventInputProp> = ({
   isLoggedIn,
 }) => {
   const router = useRouter();
+  const { toast } = useToast();
   const { t } = useTranslation();
   const myPublicKey = useReadonlyMyPublicKey();
   const signEvent = useSelector(
@@ -88,7 +90,7 @@ export const ReplyEventInput: React.FC<ReplyEventInputProp> = ({
       const rawEvent = Nip23.commentToArticleEvent(inputText, replyTo);
       const event = await signEvent(rawEvent);
       const handler = worker.pubEvent(event);
-      noticePubEventResult(worker.relays.length, handler, successCb);
+      noticePubEventResult(toast, worker.relays.length, handler, successCb);
       setInputText('');
       return;
     }
@@ -110,7 +112,7 @@ export const ReplyEventInput: React.FC<ReplyEventInputProp> = ({
 
     const event = await signEvent(rawEvent);
     const handler = worker.pubEvent(event);
-    noticePubEventResult(worker.relays.length, handler, successCb);
+    noticePubEventResult(toast, worker.relays.length, handler, successCb);
     setInputText('');
   };