55 lines
1.2 KiB
JavaScript
55 lines
1.2 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
export const ExpiryTimer = ({ expiry }) => {
|
|
const [secs, setSecs] = useState('--:--');
|
|
|
|
// If room has an expiry time, we'll calculate how many seconds until expiry
|
|
useEffect(() => {
|
|
if (!expiry) {
|
|
return false;
|
|
}
|
|
const i = setInterval(() => {
|
|
const timeLeft = Math.round(expiry - Date.now() / 1000);
|
|
if (timeLeft < 0) {
|
|
return setSecs(null);
|
|
}
|
|
setSecs(`${Math.floor(timeLeft / 60)}:${`0${timeLeft % 60}`.slice(-2)}`);
|
|
}, 1000);
|
|
|
|
return () => clearInterval(i);
|
|
}, [expiry]);
|
|
|
|
if (!secs) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="countdown">
|
|
{secs}
|
|
<style jsx>{`
|
|
.countdown {
|
|
position: fixed;
|
|
top: 0px;
|
|
right: 0px;
|
|
width: 48px;
|
|
text-align: center;
|
|
padding: 4px 0;
|
|
font-size: 0.875rem;
|
|
font-weight: var(--weight-medium);
|
|
border-radius: 0 0 0 var(--radius-sm);
|
|
background: var(--secondary-dark);
|
|
color: white;
|
|
z-index: 999;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
ExpiryTimer.propTypes = {
|
|
expiry: PropTypes.number,
|
|
};
|
|
|
|
export default ExpiryTimer;
|