[Perf] Calendar Modal: Small optimizations

src/components/common/CalendarModal.tsx

@@ -130,6 +130,10 @@ const CalendarModal: FC<OwnProps> = ({
     buildCalendarGrid(currentYear, currentMonth)
   ), [currentMonth, currentYear]);
 
+  const submitLabel = useMemo(() => {
+    return submitButtonLabel || formatSubmitLabel(lang, selectedDate);
+  }, [lang, selectedDate, submitButtonLabel]);
+
   function handlePrevMonth() {
     setCurrentMonthAndYear((d) => {
       const dateCopy = new Date(d);
@@ -312,7 +316,7 @@ const CalendarModal: FC<OwnProps> = ({
 
       <div className="footer">
         <Button onClick={handleSubmit}>
-          {submitButtonLabel || formatSubmitLabel(lang, selectedDate)}
+          {submitLabel}
         </Button>
         {secondButtonLabel && (
           <Button onClick={onSecondButtonClick} isText>

src/components/middle/message/ContextMenuContainer.tsx

@@ -29,6 +29,7 @@ import ReportMessageModal from '../../common/ReportMessageModal';
 import PinMessageModal from '../../common/PinMessageModal';
 import MessageContextMenu from './MessageContextMenu';
 import CalendarModal from '../../common/CalendarModal';
+import buildClassName from '../../../util/buildClassName';
 
 const START_SIZE = 2 * REM;
 
@@ -322,7 +323,7 @@ const ContextMenuContainer: FC<OwnProps & StateProps> = ({
   scheduledMaxDate.setFullYear(scheduledMaxDate.getFullYear() + 1);
 
   return (
-    <div className={['ContextMenuContainer', transitionClassNames].join(' ')}>
+    <div className={buildClassName('ContextMenuContainer', transitionClassNames)}>
       <MessageContextMenu
         availableReactions={availableReactions}
         message={message}
@@ -388,15 +389,17 @@ const ContextMenuContainer: FC<OwnProps & StateProps> = ({
         chatId={message.chatId}
         onClose={closePinModal}
       />
-      <CalendarModal
+      {canReschedule && (
-        isOpen={isCalendarOpen}
+        <CalendarModal
-        withTimePicker
+          isOpen={isCalendarOpen}
-        selectedAt={message.date * 1000}
+          withTimePicker
-        maxAt={getDayStartAt(scheduledMaxDate)}
+          selectedAt={message.date * 1000}
-        isFutureMode
+          maxAt={getDayStartAt(scheduledMaxDate)}
-        onClose={handleCloseCalendar}
+          isFutureMode
-        onSubmit={handleRescheduleMessage}
+          onClose={handleCloseCalendar}
-      />
+          onSubmit={handleRescheduleMessage}
+        />
+      )}
     </div>
   );
 };

src/components/right/management/ManageInvite.tsx

@@ -16,9 +16,9 @@ import { getServerTime } from '../../../util/serverTime';
 import Checkbox from '../../ui/Checkbox';
 import InputText from '../../ui/InputText';
 import RadioGroup from '../../ui/RadioGroup';
-import CalendarModalAsync from '../../common/CalendarModal.async';
 import Button from '../../ui/Button';
 import FloatingActionButton from '../../ui/FloatingActionButton';
+import CalendarModal from '../../common/CalendarModal';
 
 const DEFAULT_USAGE_LIMITS = [1, 10, 100];
 const DEFAULT_EXPIRE_DATE = {
@@ -243,7 +243,7 @@ const ManageInvite: FC<OwnProps & StateProps> = ({
           <i className="icon-check" />
         </FloatingActionButton>
       </div>
-      <CalendarModalAsync
+      <CalendarModal
         isOpen={isCalendarOpened}
         isFutureMode
         withTimePicker