refactor: rename expirationLength

to expirationDurationMs

ts/components/conversation/ExpireTimer.tsx

@@ -16,13 +16,13 @@ const ExpireTimerBucket = styled.div`
 `;
 
 type Props = {
-  expirationLength: number; // should be in milliseconds
+  expirationDurationMs: number;
   expirationTimestamp: number | null;
   style: CSSProperties;
 };
 
 export const ExpireTimer = (props: Props) => {
-  const { expirationLength, expirationTimestamp, style } = props;
+  const { expirationDurationMs, expirationTimestamp, style } = props;
 
   const initialTimeLeft = Math.max(Math.round(((expirationTimestamp || 0) - Date.now()) / 1000), 0);
   const [timeLeft, setTimeLeft] = useState(initialTimeLeft);
@@ -39,13 +39,13 @@ export const ExpireTimer = (props: Props) => {
   const updateFrequency = 500;
   useInterval(update, updateFrequency);
 
-  if (!(expirationLength && expirationTimestamp)) {
+  if (!(expirationDurationMs && expirationTimestamp)) {
     return null;
   }
 
   const expireTimerColor = 'var(--primary-text-color)';
 
-  const bucket = getTimerBucketIcon(expirationTimestamp, expirationLength);
+  const bucket = getTimerBucketIcon(expirationTimestamp, expirationDurationMs);
 
   return (
     <ExpireTimerBucket style={style}>

ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx

@@ -22,7 +22,7 @@ function useIsExpired(
   const {
     convoId,
     messageId,
-    expirationLength,
+    expirationDurationMs,
     expirationTimestamp,
     isExpired: isExpiredProps,
   } = props;
@@ -34,7 +34,7 @@ function useIsExpired(
   const checkExpired = useCallback(async () => {
     const now = Date.now();
 
-    if (!messageId || !expirationTimestamp || !expirationLength) {
+    if (!messageId || !expirationTimestamp || !expirationDurationMs) {
       return;
     }
 
@@ -53,11 +53,11 @@ function useIsExpired(
         convo?.updateLastMessage();
       }
     }
-  }, [messageId, expirationTimestamp, expirationLength, isExpired, convoId, dispatch]);
+  }, [messageId, expirationTimestamp, expirationDurationMs, isExpired, convoId, dispatch]);
 
   let checkFrequency: number | null = null;
-  if (expirationLength) {
+  if (expirationDurationMs) {
-    const increment = getIncrement(expirationLength || EXPIRATION_CHECK_MINIMUM);
+    const increment = getIncrement(expirationDurationMs || EXPIRATION_CHECK_MINIMUM);
     checkFrequency = Math.max(EXPIRATION_CHECK_MINIMUM, increment);
   }
 
@@ -95,7 +95,7 @@ export const ExpirableReadableMessage = (props: ExpirableReadableMessageProps) =
     messageId: selected?.messageId,
     direction: selected?.direction,
     expirationTimestamp: selected?.expirationTimestamp,
-    expirationLength: selected?.expirationLength,
+    expirationDurationMs: selected?.expirationDurationMs,
     isExpired: selected?.isExpired,
   });
 
@@ -108,7 +108,7 @@ export const ExpirableReadableMessage = (props: ExpirableReadableMessageProps) =
     direction,
     receivedAt,
     isUnread,
-    expirationLength,
+    expirationDurationMs,
     expirationTimestamp,
   } = selected;
 
@@ -126,9 +126,9 @@ export const ExpirableReadableMessage = (props: ExpirableReadableMessageProps) =
       key={`readable-message-${messageId}`}
       dataTestId={dataTestId}
     >
-      {expirationLength && expirationTimestamp ? (
+      {expirationDurationMs && expirationTimestamp ? (
         <ExpireTimer
-          expirationLength={expirationLength}
+          expirationDurationMs={expirationDurationMs}
           expirationTimestamp={expirationTimestamp}
           style={{
             display: !isCentered && isIncoming ? 'none' : 'block',
@@ -138,9 +138,9 @@ export const ExpirableReadableMessage = (props: ExpirableReadableMessageProps) =
         />
       ) : null}
       {props.children}
-      {expirationLength && expirationTimestamp ? (
+      {expirationDurationMs && expirationTimestamp ? (
         <ExpireTimer
-          expirationLength={expirationLength}
+          expirationDurationMs={expirationDurationMs}
           expirationTimestamp={expirationTimestamp}
           style={{
             display: !isCentered && !isIncoming ? 'none' : 'block',

ts/models/message.ts

@@ -295,15 +295,15 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
 
   public getPropsForExpiringMessage(): PropsForExpiringMessage {
     const expirationType = this.getExpirationType();
-    const expirationLength = this.getExpireTimer()
+    const expirationDurationMs = this.getExpireTimer()
       ? this.getExpireTimer() * DURATION.SECONDS
       : null;
 
     const expireTimerStart = this.getExpirationStartTimestamp() || null;
 
     const expirationTimestamp =
-      expirationType && expireTimerStart && expirationLength
+      expirationType && expireTimerStart && expirationDurationMs
-        ? expireTimerStart + expirationLength
+        ? expireTimerStart + expirationDurationMs
         : null;
 
     const direction =
@@ -315,7 +315,7 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
       convoId: this.get('conversationId'),
       messageId: this.get('id'),
       direction,
-      expirationLength,
+      expirationDurationMs,
       expirationTimestamp,
       isExpired: this.isExpired(),
     };
@@ -518,11 +518,11 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
   public getPropsForMessage(): PropsForMessageWithoutConvoProps {
     const sender = this.getSource();
     const expirationType = this.getExpirationType();
-    const expirationLength = this.getExpireTimer() * DURATION.SECONDS;
+    const expirationDurationMs = this.getExpireTimer() * DURATION.SECONDS;
     const expireTimerStart = this.getExpirationStartTimestamp();
     const expirationTimestamp =
-      expirationType && expireTimerStart && expirationLength
+      expirationType && expireTimerStart && expirationDurationMs
-        ? expireTimerStart + expirationLength
+        ? expireTimerStart + expirationDurationMs
         : null;
 
     const attachments = this.get('attachments') || [];
@@ -557,8 +557,8 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
     if (expirationType) {
       props.expirationType = expirationType;
     }
-    if (expirationLength) {
+    if (expirationDurationMs) {
-      props.expirationLength = expirationLength;
+      props.expirationDurationMs = expirationDurationMs;
     }
     if (expirationTimestamp) {
       props.expirationTimestamp = expirationTimestamp;

ts/state/ducks/conversations.ts

@@ -81,7 +81,7 @@ export type PropsForExpiringMessage = {
   receivedAt?: number;
   isUnread?: boolean;
   expirationTimestamp?: number | null;
-  expirationLength?: number | null;
+  expirationDurationMs?: number | null;
   isExpired?: boolean;
 };
 
@@ -202,7 +202,7 @@ export type PropsForMessageWithoutConvoProps = {
   isDeleted?: boolean;
   isUnread?: boolean;
   expirationType?: DisappearingMessageType;
-  expirationLength?: number;
+  expirationDurationMs?: number;
   expirationTimestamp?: number | null;
   isExpired?: boolean;
   isTrustedForAttachmentDownload?: boolean;

ts/state/selectors/conversations.ts

@@ -886,7 +886,7 @@ export const getMessageExpirationProps = createSelector(getMessagePropsByMessage
       'receivedAt',
       'isUnread',
       'expirationTimestamp',
-      'expirationLength',
+      'expirationDurationMs',
       'isExpired',
     ]),
     messageId: props.propsForMessage.id,
@@ -961,7 +961,7 @@ export const getGenericReadableMessageSelectorProps = createSelector(
       'convoId',
       'direction',
       'conversationType',
-      'expirationLength',
+      'expirationDurationMs',
       'expirationTimestamp',
       'isExpired',
       'isUnread',

ts/util/timer.ts

@@ -13,9 +13,9 @@ export function getIncrement(length: number): number {
   return Math.ceil(length / 12);
 }
 
-export function getTimerBucketIcon(expiration: number, length: number): SessionIconType {
+export function getTimerBucketIcon(expirationMs: number, length: number): SessionIconType {
   const now = Date.now();
-  const delta = expiration - now;
+  const delta = expirationMs - now;
 
   if (delta < 0) {
     return 'timer60';