Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove days from countdown timeAgo #12141

Merged
merged 6 commits into from
May 23, 2023
Merged

Remove days from countdown timeAgo #12141

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0411ff6
remove days from countdown
Jibz-Mysten May 22, 2023
d9cdd24
add flag to show maxLabelInHours
Jibz-Mysten May 22, 2023
953a0d9
rename props
Jibz-Mysten May 22, 2023
787060c
nit
Jibz-Mysten May 22, 2023
76f9d3a
nit
Jibz-Mysten May 22, 2023
15b17aa
nit
Jibz-Mysten May 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 29 additions & 10 deletions apps/core/src/hooks/useTimeAgo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,23 @@ const ONE_DAY = ONE_HOUR * 24;
/**
* Formats a timestamp using `timeAgo`, and automatically updates it when the value is small.
*/
export function useTimeAgo(
timeFrom?: number | null,
shortedTimeLabel?: boolean,
shouldEnd?: boolean,
endLabel?: string
) {

type TimeAgoOptions = {
timeFrom: number | null;
shortedTimeLabel: boolean;
shouldEnd?: boolean;
endLabel?: string;
maxTimeLabelInHours?: boolean;
};

export function useTimeAgo(options: TimeAgoOptions) {
const {
timeFrom,
shortedTimeLabel,
shouldEnd,
endLabel,
maxTimeLabelInHours,
} = options;
const [now, setNow] = useState(() => Date.now());

// end interval when the difference between now and timeFrom is less than or equal to 0
Expand All @@ -54,8 +65,15 @@ export function useTimeAgo(
continueInterval;

const formattedTime = useMemo(
() => timeAgo(timeFrom, now, shortedTimeLabel, endLabel),
[now, timeFrom, shortedTimeLabel, endLabel]
() =>
timeAgo(
timeFrom,
now,
shortedTimeLabel,
endLabel,
maxTimeLabelInHours
),
[timeFrom, now, shortedTimeLabel, endLabel, maxTimeLabelInHours]
);

useEffect(() => {
Expand All @@ -72,7 +90,8 @@ export const timeAgo = (
epochMilliSecs: number | null | undefined,
timeNow?: number | null,
shortenTimeLabel?: boolean,
endLabel = `< 1 sec`
endLabel = `< 1 sec`,
maxTimeLabelInHours = false
Jibz-Mysten marked this conversation as resolved.
Show resolved Hide resolved
): string => {
if (!epochMilliSecs) return '';

Expand All @@ -82,7 +101,7 @@ export const timeAgo = (
let timeUnit: [string, number][];
let timeCol = Math.abs(timeNow - epochMilliSecs);

if (timeCol >= ONE_DAY) {
if (timeCol >= ONE_DAY && !maxTimeLabelInHours) {
timeUnit = [
[TIME_LABEL.day[dateKeyType], ONE_DAY],
[TIME_LABEL.hour[dateKeyType], ONE_HOUR],
Expand Down
5 changes: 4 additions & 1 deletion apps/explorer/src/components/tx-time/TxTimeType.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,10 @@ type Prop = {
};

export function TxTimeType({ timestamp }: Prop) {
const timeAgo = useTimeAgo(timestamp, true);
const timeAgo = useTimeAgo({
timeFrom: timestamp || null,
shortedTimeLabel: true,
});

return (
<section>
Expand Down
6 changes: 5 additions & 1 deletion apps/explorer/src/pages/epochs/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,11 @@ export function useEpochProgress(suffix: string = 'left') {
start !== undefined && duration !== undefined
? start + duration
: undefined;
const time = useTimeAgo(end, true, true);
const time = useTimeAgo({
timeFrom: end || null,
shortedTimeLabel: true,
shouldEnd: true,
});

if (!start || !end) {
return {};
Expand Down
8 changes: 7 additions & 1 deletion apps/wallet/src/ui/app/shared/countdown-timer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,13 @@ export function CountDownTimer({
endLabel = 'now',
...styles
}: CountDownTimerProps) {
const timeAgo = useTimeAgo(timestamp, false, true, endLabel);
const timeAgo = useTimeAgo({
timeFrom: timestamp || null,
shortedTimeLabel: false,
shouldEnd: true,
endLabel: endLabel,
maxTimeLabelInHours: true,
});

return (
<div className={timeStyle(styles)}>
Expand Down