Pin Message Modal: Use checkbox for parameter (#5965)

Co-authored-by: Arno van Liere <46238387+arnovanliere@users.noreply.github.com>

src/components/common/PinMessageModal.tsx

@@ -1,5 +1,4 @@
-import type { FC } from '../../lib/teact/teact';
-import React, { memo, useCallback } from '../../lib/teact/teact';
+import React, { memo, useState } from '../../lib/teact/teact';
 import { getActions, withGlobal } from '../../global';
 
 import {
@@ -13,9 +12,11 @@ import { selectChat, selectIsChatWithSelf, selectUser } from '../../global/selec
 import { isUserId } from '../../util/entities/ids';
 import renderText from './helpers/renderText';
 
+import useLastCallback from '../../hooks/useLastCallback';
 import useOldLang from '../../hooks/useOldLang';
 
 import Button from '../ui/Button';
+import Checkbox from '../ui/Checkbox';
 import Modal from '../ui/Modal';
 
 export type OwnProps = {
@@ -35,7 +36,7 @@ type StateProps = {
   contactName?: string;
 };
 
-const PinMessageModal: FC<OwnProps & StateProps> = ({
+const PinMessageModal = ({
   isOpen,
   chatId,
   messageId,
@@ -45,22 +46,21 @@ const PinMessageModal: FC<OwnProps & StateProps> = ({
   canPinForAll,
   contactName,
   onClose,
-}) => {
+}: OwnProps & StateProps) => {
   const { pinMessage } = getActions();
 
-  const handlePinMessageForAll = useCallback(() => {
-    pinMessage({
-      chatId, messageId, isUnpin: false,
-    });
-    onClose();
-  }, [chatId, messageId, onClose]);
+  const [shouldPinForAll, setShouldPinForAll] = useState(true);
 
-  const handlePinMessage = useCallback(() => {
+  const handlePinMessage = useLastCallback(() => {
     pinMessage({
-      chatId, messageId, isUnpin: false, isOneSide: true, isSilent: true,
+      chatId,
+      messageId,
+      isUnpin: false,
+      isOneSide: !shouldPinForAll,
+      isSilent: !shouldPinForAll,
     });
     onClose();
-  }, [chatId, messageId, onClose]);
+  });
 
   const lang = useOldLang();
 
@@ -84,17 +84,19 @@ const PinMessageModal: FC<OwnProps & StateProps> = ({
       title={lang('PinMessageAlertTitle')}
     >
       <p>{renderMessage()}</p>
-      <div className="dialog-buttons-column">
+      {canPinForAll && (
+        <Checkbox
+          className="dialog-checkbox"
+          label={contactName ? renderText(lang('Conversation.PinMessagesFor', contactName))
+            : lang('Conversation.PinMessageAlert.PinAndNotifyMembers')}
+          checked={shouldPinForAll}
+          onCheck={setShouldPinForAll}
+        />
+      )}
+      <div className="dialog-buttons">
         <Button className="confirm-dialog-button" isText onClick={handlePinMessage}>
           {lang('DialogPin')}
         </Button>
-        {canPinForAll && (
-          <Button className="confirm-dialog-button" isText onClick={handlePinMessageForAll}>
-            {contactName
-              ? renderText(lang('Conversation.PinMessagesFor', contactName))
-              : lang('Conversation.PinMessageAlert.PinAndNotifyMembers')}
-          </Button>
-        )}
         <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
       </div>
     </Modal>