@streamplace/components 0.7.29 → 0.7.30

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,37 @@ 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)();
     return ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {
             if (!message)
                 return;
             if (!confirming) {
-                setConfirming(true);
+                setConfirming(DeleteState.Confirmed);
                 return;
             }
+            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);
             });
-        }, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.7.29",
+  "version": "0.7.30",
   "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": "c8a2e2822dcdc429221beb918925866e9de7b838"
 }

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

@@ -49,6 +49,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 +175,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 +195,45 @@ 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();
   return (
     <DropdownMenuItem
       onPress={() => {
         if (!message) return;
         if (!confirming) {
-          setConfirming(true);
+          setConfirming(DeleteState.Confirmed);
           return;
         }
+        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);
         });
       }}
     >
       <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>
   );