@streamplace/components 0.7.29 → 0.7.32

package/dist/components/chat/mod-view.js

@@ -25,6 +25,7 @@ exports.ModView = (0, react_1.forwardRef)(() => {
     const setReportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.setReportModalOpen);
     const setReportSubject = (0, player_store_1.usePlayerStore)((x) => x.setReportSubject);
     const setModMessage = (0, player_store_1.usePlayerStore)((x) => x.setModMessage);
+    const deleteChatMessage = (0, livestream_store_1.useDeleteChatMessage)();
     // get the channel did
     const channelId = (0, player_store_1.usePlayerStore)((state) => state.src);
     // get the logged in user's identity
@@ -77,23 +78,43 @@ exports.ModView = (0, react_1.forwardRef)(() => {
                                             ? "Blocking..."
                                             : `Block user @${message.author.handle} from this channel` })) })] })), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuGroup, { title: `User actions`, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {
                                         react_native_1.Linking.openURL(`https://${BSKY_FRONTEND_DOMAIN}/profile/${message.author.handle}`);
-                                    }, children: (0, jsx_runtime_1.jsxs)(ui_1.Text, { color: "primary", children: ["View user on ", BSKY_FRONTEND_DOMAIN] }) }), message.author.did === agent?.did && ((0, jsx_runtime_1.jsx)(DeleteButton, { message: message })), message.author.did !== agent?.did && ((0, jsx_runtime_1.jsx)(ReportButton, { message: message, setReportModalOpen: setReportModalOpen, setReportSubject: setReportSubject }))] })] })) })] }));
+                                    }, children: (0, jsx_runtime_1.jsxs)(ui_1.Text, { color: "primary", children: ["View user on ", BSKY_FRONTEND_DOMAIN] }) }), message.author.did === agent?.did && ((0, jsx_runtime_1.jsx)(DeleteButton, { message: message, deleteChatMessage: deleteChatMessage })), message.author.did !== agent?.did && ((0, jsx_runtime_1.jsx)(ReportButton, { message: message, setReportModalOpen: setReportModalOpen, setReportSubject: setReportSubject }))] })] })) })] }));
 });
-function DeleteButton({ message, }) {
-    const deleteChatMessage = (0, livestream_store_1.useDeleteChatMessage)();
-    const [confirming, setConfirming] = (0, react_1.useState)(false);
+var DeleteState;
+(function (DeleteState) {
+    DeleteState[DeleteState["None"] = 0] = "None";
+    DeleteState[DeleteState["Confirmed"] = 1] = "Confirmed";
+    DeleteState[DeleteState["Deleting"] = 2] = "Deleting";
+})(DeleteState || (DeleteState = {}));
+function DeleteButton({ message, deleteChatMessage, }) {
+    const [confirming, setConfirming] = (0, react_1.useState)(DeleteState.None);
     const { onOpenChange } = (0, dropdown_menu_1.useRootContext)();
+    const toast = (0, ui_1.useToast)();
     return ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {
             if (!message)
                 return;
             if (!confirming) {
-                setConfirming(true);
+                setConfirming(DeleteState.Confirmed);
                 return;
             }
-            deleteChatMessage(message.uri).then(() => {
+            if (confirming === DeleteState.Confirmed) {
+                setConfirming(DeleteState.Deleting);
+            }
+            deleteChatMessage(message.uri)
+                .then(() => {
+                // wait ~a second before resetting state to allow deletion to take effect
+                setTimeout(() => setConfirming(DeleteState.None), 1000);
                 onOpenChange?.(false);
+            })
+                .catch((e) => {
+                toast.show("Couldn't delete the message", e);
+                setConfirming(DeleteState.None);
             });
-        }, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { color: "destructive", children: confirming ? "Are you sure?" : "Delete message" }) }));
+        }, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { color: "destructive", children: confirming === DeleteState.Confirmed
+                ? "Are you sure? Click again to confirm."
+                : confirming === DeleteState.Deleting
+                    ? "Deleting..."
+                    : "Delete message" }) }));
 }
 function ReportButton({ message, setReportModalOpen, setReportSubject, }) {
     const { onOpenChange } = (0, dropdown_menu_1.useRootContext)();

package/dist/livestream-store/chat.js

@@ -102,14 +102,14 @@ const useCreateChatMessage = () => {
 exports.useCreateChatMessage = useCreateChatMessage;
 const useDeleteChatMessage = () => {
     const pdsAgent = (0, xrpc_1.usePDSAgent)();
-    if (!pdsAgent) {
-        throw new Error("No PDS agent found");
-    }
     const userDID = (0, streamplace_store_1.useDID)();
-    if (!userDID) {
-        throw new Error("No user DID found");
-    }
     return async (uri) => {
+        if (!pdsAgent) {
+            throw new Error("No PDS agent found");
+        }
+        if (!userDID) {
+            throw new Error("No user DID found");
+        }
         const rkey = uri.split("/").pop();
         if (!rkey) {
             throw new Error("No rkey found");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.7.29",
+  "version": "0.7.32",
   "description": "Streamplace React (Native) Components",
   "main": "dist/index.js",
   "types": "src/index.tsx",
@@ -54,5 +54,5 @@
     "start": "tsc --watch --preserveWatchOutput",
     "prepare": "tsc"
   },
-  "gitHead": "8dba54b751a4a48f125485ef8b0997428f6095cf"
+  "gitHead": "8c9f6186d1e718bcc4dfe84fe8c681680dddcf0e"
 }

package/src/components/chat/mod-view.tsx

@@ -21,6 +21,7 @@ import {
   layout,
   ResponsiveDropdownMenuContent,
   Text,
+  useToast,
   View,
 } from "../ui";
 
@@ -49,6 +50,7 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
   const setReportModalOpen = usePlayerStore((x) => x.setReportModalOpen);
   const setReportSubject = usePlayerStore((x) => x.setReportSubject);
   const setModMessage = usePlayerStore((x) => x.setModMessage);
+  const deleteChatMessage = useDeleteChatMessage();
 
   // get the channel did
   const channelId = usePlayerStore((state) => state.src);
@@ -174,7 +176,10 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
                 <Text color="primary">View user on {BSKY_FRONTEND_DOMAIN}</Text>
               </DropdownMenuItem>
               {message.author.did === agent?.did && (
-                <DeleteButton message={message} />
+                <DeleteButton
+                  message={message}
+                  deleteChatMessage={deleteChatMessage}
+                />
               )}
               {message.author.did !== agent?.did && (
                 <ReportButton
@@ -191,29 +196,51 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
   );
 });
 
+enum DeleteState {
+  None,
+  Confirmed,
+  Deleting,
+}
+
 export function DeleteButton({
   message,
+  deleteChatMessage,
 }: {
   message: ChatMessageViewHydrated;
+  deleteChatMessage: (uri: string) => Promise<any>;
 }) {
-  const deleteChatMessage = useDeleteChatMessage();
-  const [confirming, setConfirming] = useState(false);
+  const [confirming, setConfirming] = useState<DeleteState>(DeleteState.None);
   const { onOpenChange } = useRootContext();
+  const toast = useToast();
   return (
     <DropdownMenuItem
       onPress={() => {
         if (!message) return;
         if (!confirming) {
-          setConfirming(true);
+          setConfirming(DeleteState.Confirmed);
           return;
         }
-        deleteChatMessage(message.uri).then(() => {
-          onOpenChange?.(false);
-        });
+        if (confirming === DeleteState.Confirmed) {
+          setConfirming(DeleteState.Deleting);
+        }
+        deleteChatMessage(message.uri)
+          .then(() => {
+            // wait ~a second before resetting state to allow deletion to take effect
+            setTimeout(() => setConfirming(DeleteState.None), 1000);
+            onOpenChange?.(false);
+          })
+          .catch((e) => {
+            toast.show("Couldn't delete the message", e);
+            setConfirming(DeleteState.None);
+          });
       }}
     >
       <Text color="destructive">
-        {confirming ? "Are you sure?" : "Delete message"}
+        {confirming === DeleteState.Confirmed
+          ? "Are you sure? Click again to confirm."
+          : confirming === DeleteState.Deleting
+            ? "Deleting..."
+            : "Delete message"}
       </Text>
     </DropdownMenuItem>
   );

package/src/livestream-store/chat.tsx

@@ -135,14 +135,14 @@ export const useCreateChatMessage = () => {
 
 export const useDeleteChatMessage = () => {
   const pdsAgent = usePDSAgent();
-  if (!pdsAgent) {
-    throw new Error("No PDS agent found");
-  }
   const userDID = useDID();
-  if (!userDID) {
-    throw new Error("No user DID found");
-  }
   return async (uri: string) => {
+    if (!pdsAgent) {
+      throw new Error("No PDS agent found");
+    }
+    if (!userDID) {
+      throw new Error("No user DID found");
+    }
     const rkey = uri.split("/").pop();
     if (!rkey) {
       throw new Error("No rkey found");