mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
a1d4dea845
we need to hit the bottom for the convo to update currently add smooth scrolling on click on quoted message
70 lines
1.7 KiB
TypeScript
70 lines
1.7 KiB
TypeScript
import React, { useState } from 'react';
|
|
import classNames from 'classnames';
|
|
|
|
import { getIncrement, getTimerBucket } from '../../util/timer';
|
|
import { useInterval } from '../../hooks/useInterval';
|
|
|
|
type Props = {
|
|
withImageNoCaption: boolean;
|
|
expirationLength: number;
|
|
expirationTimestamp: number;
|
|
direction: 'incoming' | 'outgoing';
|
|
};
|
|
|
|
export const ExpireTimer = (props: Props) => {
|
|
const {
|
|
direction,
|
|
expirationLength,
|
|
expirationTimestamp,
|
|
withImageNoCaption,
|
|
} = props;
|
|
|
|
const initialTimeLeft = Math.max(
|
|
Math.round((expirationTimestamp - Date.now()) / 1000),
|
|
0
|
|
);
|
|
const [timeLeft, setTimeLeft] = useState(initialTimeLeft);
|
|
|
|
const update = () => {
|
|
const newTimeLeft = Math.max(
|
|
Math.round((expirationTimestamp - Date.now()) / 1000),
|
|
0
|
|
);
|
|
if (newTimeLeft !== timeLeft) {
|
|
setTimeLeft(newTimeLeft);
|
|
}
|
|
};
|
|
|
|
const increment = getIncrement(expirationLength);
|
|
const updateFrequency = Math.max(increment, 500);
|
|
|
|
useInterval(update, updateFrequency);
|
|
|
|
if (timeLeft <= 60) {
|
|
return (
|
|
<span
|
|
className={classNames(
|
|
'module-expire-timer-margin',
|
|
'module-message__metadata__date',
|
|
`module-message__metadata__date--${direction}`
|
|
)}
|
|
>
|
|
{timeLeft}
|
|
</span>
|
|
);
|
|
}
|
|
const bucket = getTimerBucket(expirationTimestamp, expirationLength);
|
|
|
|
return (
|
|
<div
|
|
className={classNames(
|
|
'module-expire-timer',
|
|
'module-expire-timer-margin',
|
|
`module-expire-timer--${bucket}`,
|
|
`module-expire-timer--${direction}`,
|
|
withImageNoCaption ? 'module-expire-timer--with-image-no-caption' : null
|
|
)}
|
|
/>
|
|
);
|
|
};
|