-
Notifications
You must be signed in to change notification settings - Fork 4.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(frontend): Wait for events before rendering messages (#4994)
Co-authored-by: mamoodi <[email protected]>
- Loading branch information
Showing
4 changed files
with
204 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import { act, renderHook } from "@testing-library/react"; | ||
| import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; | ||
| import { useRate } from "#/utils/use-rate"; | ||
|
|
||
| describe("useRate", () => { | ||
| beforeEach(() => { | ||
| vi.useFakeTimers(); | ||
| }); | ||
|
|
||
| afterEach(() => { | ||
| vi.useRealTimers(); | ||
| }); | ||
|
|
||
| it("should initialize", () => { | ||
| const { result } = renderHook(() => useRate()); | ||
|
|
||
| expect(result.current.items).toHaveLength(0); | ||
| expect(result.current.rate).toBeNull(); | ||
| expect(result.current.lastUpdated).toBeNull(); | ||
| expect(result.current.isUnderThreshold).toBe(true); | ||
| }); | ||
|
|
||
| it("should handle the case of a single element", () => { | ||
| const { result } = renderHook(() => useRate()); | ||
|
|
||
| act(() => { | ||
| result.current.record(123); | ||
| }); | ||
|
|
||
| expect(result.current.items).toHaveLength(1); | ||
| expect(result.current.lastUpdated).not.toBeNull(); | ||
| }); | ||
|
|
||
| it("should return the difference between the last two elements", () => { | ||
| const { result } = renderHook(() => useRate()); | ||
|
|
||
| vi.setSystemTime(500); | ||
| act(() => { | ||
| result.current.record(4); | ||
| }); | ||
|
|
||
| vi.advanceTimersByTime(500); | ||
| act(() => { | ||
| result.current.record(9); | ||
| }); | ||
|
|
||
| expect(result.current.items).toHaveLength(2); | ||
| expect(result.current.rate).toBe(5); | ||
| expect(result.current.lastUpdated).toBe(1000); | ||
| }); | ||
|
|
||
| it("should update isUnderThreshold after [threshold]ms of no activity", () => { | ||
| const { result } = renderHook(() => useRate({ threshold: 500 })); | ||
|
|
||
| expect(result.current.isUnderThreshold).toBe(true); | ||
|
|
||
| act(() => { | ||
| // not sure if fake timers is buggy with intervals, | ||
| // but I need to call it twice to register | ||
| vi.advanceTimersToNextTimer(); | ||
| vi.advanceTimersToNextTimer(); | ||
| }); | ||
|
|
||
| expect(result.current.isUnderThreshold).toBe(false); | ||
| }); | ||
|
|
||
| it("should return an isUnderThreshold boolean", () => { | ||
| const { result } = renderHook(() => useRate({ threshold: 500 })); | ||
|
|
||
| vi.setSystemTime(500); | ||
| act(() => { | ||
| result.current.record(400); | ||
| }); | ||
| act(() => { | ||
| result.current.record(1000); | ||
| }); | ||
|
|
||
| expect(result.current.isUnderThreshold).toBe(false); | ||
|
|
||
| act(() => { | ||
| result.current.record(1500); | ||
| }); | ||
|
|
||
| expect(result.current.isUnderThreshold).toBe(true); | ||
|
|
||
| act(() => { | ||
| vi.advanceTimersToNextTimer(); | ||
| vi.advanceTimersToNextTimer(); | ||
| }); | ||
|
|
||
| expect(result.current.isUnderThreshold).toBe(false); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import React from "react"; | ||
|
|
||
| interface UseRateProps { | ||
| threshold: number; | ||
| } | ||
|
|
||
| const DEFAULT_CONFIG: UseRateProps = { threshold: 1000 }; | ||
|
|
||
| export const useRate = (config = DEFAULT_CONFIG) => { | ||
| const [items, setItems] = React.useState<number[]>([]); | ||
| const [rate, setRate] = React.useState<number | null>(null); | ||
| const [lastUpdated, setLastUpdated] = React.useState<number | null>(null); | ||
| const [isUnderThreshold, setIsUnderThreshold] = React.useState(true); | ||
|
|
||
| /** | ||
| * Record an entry in order to calculate the rate | ||
| * @param entry Entry to record | ||
| * | ||
| * @example | ||
| * record(new Date().getTime()); | ||
| */ | ||
| const record = (entry: number) => { | ||
| setItems((prev) => [...prev, entry]); | ||
| setLastUpdated(new Date().getTime()); | ||
| }; | ||
|
|
||
| /** | ||
| * Update the rate based on the last two entries (if available) | ||
| */ | ||
| const updateRate = () => { | ||
| if (items.length > 1) { | ||
| const newRate = items[items.length - 1] - items[items.length - 2]; | ||
| setRate(newRate); | ||
|
|
||
| if (newRate <= config.threshold) setIsUnderThreshold(true); | ||
| else setIsUnderThreshold(false); | ||
| } | ||
| }; | ||
|
|
||
| React.useEffect(() => { | ||
| updateRate(); | ||
| }, [items]); | ||
|
|
||
| React.useEffect(() => { | ||
| // Set up an interval to check if the time since the last update exceeds the threshold | ||
| // If it does, set isUnderThreshold to false, otherwise set it to true | ||
| // This ensures that the component can react to periods of inactivity | ||
| const intervalId = setInterval(() => { | ||
| if (lastUpdated !== null) { | ||
| const timeSinceLastUpdate = new Date().getTime() - lastUpdated; | ||
| setIsUnderThreshold(timeSinceLastUpdate <= config.threshold); | ||
| } else { | ||
| setIsUnderThreshold(false); | ||
| } | ||
| }, config.threshold); | ||
|
|
||
| return () => clearInterval(intervalId); | ||
| }, [lastUpdated, config.threshold]); | ||
|
|
||
| return { | ||
| items, | ||
| rate, | ||
| lastUpdated, | ||
| isUnderThreshold, | ||
| record, | ||
| }; | ||
| }; |