Skip to content

feat: use countdown timer from channel in client JS #3381

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

Merged
khushal87 merged 5 commits into from
Feb 4, 2026
Merged

feat: use countdown timer from channel in client JS #3381

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0157924
feat: use countdown timer from channel in client JS
khushal87 Feb 3, 2026
dcb067e
fix: update snapshots
khushal87 Feb 3, 2026
77a8cba
fix: output buttons
khushal87 Feb 4, 2026
f325c0c
fix: add translations
khushal87 Feb 4, 2026
9916384
chore: resolve conflicts
khushal87 Feb 4, 2026
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
3 changes: 3 additions & 0 deletions package/src/components/AutoCompleteInput/AutoCompleteInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
} from '../../contexts/translationContext/TranslationContext';

import { useStateStore } from '../../hooks/useStateStore';
import { useCooldownRemaining } from '../MessageInput/hooks/useCooldownRemaining';

type AutoCompleteInputPropsWithContext = TextInputProps &
Pick<ChannelContextValue, 'channel'> &
Expand Down Expand Up @@ -205,13 +206,15 @@ export const AutoCompleteInput = (props: AutoCompleteInputProps) => {
const { setInputBoxRef } = useMessageInputContext();
const { t } = useTranslationContext();
const { channel } = useChannelContext();
const cooldownRemainingSeconds = useCooldownRemaining();

return (
<MemoizedAutoCompleteInput
{...{
channel,
setInputBoxRef,
t,
cooldownRemainingSeconds,
}}
{...props}
/>
Expand Down
18 changes: 0 additions & 18 deletions package/src/components/MessageInput/MessageInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import { type MessageComposerState, type TextComposerState, type UserResponse }

import { LinkPreviewList } from './components/LinkPreviewList';
import { OutputButtons } from './components/OutputButtons';
import { useCountdown } from './hooks/useCountdown';

import { useHasLinkPreviews } from './hooks/useLinkPreviews';

Expand Down Expand Up @@ -164,8 +163,6 @@ type MessageInputPropsWithContext = Pick<
| 'AudioRecordingLockIndicator'
| 'AudioRecordingPreview'
| 'AutoCompleteSuggestionList'
| 'cooldownEndsAt'
| 'CooldownTimer'
| 'closeAttachmentPicker'
| 'compressImageQuality'
| 'Input'
Expand Down Expand Up @@ -237,7 +234,6 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
AutoCompleteSuggestionList,
closeAttachmentPicker,
closePollCreationDialog,
cooldownEndsAt,
CreatePollContent,
disableAttachmentPicker,
editing,
Expand Down Expand Up @@ -296,8 +292,6 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
},
} = useTheme();

const { seconds: cooldownRemainingSeconds } = useCountdown(cooldownEndsAt);

// Close the attachment picker state when the component unmounts
useEffect(
() => () => {
Expand Down Expand Up @@ -499,7 +493,6 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
) : null}

<AutoCompleteInput
cooldownRemainingSeconds={cooldownRemainingSeconds}
TextInputComponent={TextInputComponent}
{...additionalTextInputProps}
/>
Expand Down Expand Up @@ -596,7 +589,6 @@ const areEqual = (
audioRecordingEnabled: prevAsyncMessagesEnabled,
channel: prevChannel,
closePollCreationDialog: prevClosePollCreationDialog,
cooldownEndsAt: prevCooldownEndsAt,
editing: prevEditing,
hasAttachments: prevHasAttachments,
isKeyboardVisible: prevIsKeyboardVisible,
Expand All @@ -618,7 +610,6 @@ const areEqual = (
audioRecordingEnabled: nextAsyncMessagesEnabled,
channel: nextChannel,
closePollCreationDialog: nextClosePollCreationDialog,
cooldownEndsAt: nextCooldownEndsAt,
editing: nextEditing,
isKeyboardVisible: nextIsKeyboardVisible,
isOnline: nextIsOnline,
Expand Down Expand Up @@ -700,11 +691,6 @@ const areEqual = (
return false;
}

const cooldownEndsAtEqual = prevCooldownEndsAt === nextCooldownEndsAt;
if (!cooldownEndsAtEqual) {
return false;
}

const threadListEqual = prevThreadList === nextThreadList;
if (!threadListEqual) {
return false;
Expand Down Expand Up @@ -785,8 +771,6 @@ export const MessageInput = (props: MessageInputProps) => {
closeAttachmentPicker,
closePollCreationDialog,
compressImageQuality,
cooldownEndsAt,
CooldownTimer,
CreatePollContent,
CreatePollIcon,
FileSelectorIcon,
Expand Down Expand Up @@ -865,8 +849,6 @@ export const MessageInput = (props: MessageInputProps) => {
closeAttachmentPicker,
closePollCreationDialog,
compressImageQuality,
cooldownEndsAt,
CooldownTimer,
CreatePollContent,
CreatePollIcon,
disableAttachmentPicker,
Expand Down
38 changes: 24 additions & 14 deletions package/src/components/MessageInput/components/OutputButtons/CooldownTimer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
import React, { useCallback } from 'react';
import React, { useCallback, useMemo } from 'react';
import { StyleSheet, Text } from 'react-native';

import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
import { primitives } from '../../../../theme';
import { IconButton } from '../../../ui/IconButton';

export type CooldownTimerProps = {
seconds: number;
};
import { useCooldownRemaining } from '../../hooks/useCooldownRemaining';

/**
* Renders an amount of seconds left for a cooldown to finish.
*
* See `useCountdown` for an example of how to set a countdown
* to use as the source of `seconds`.
**/
export const CooldownTimer = (props: CooldownTimerProps) => {
const { seconds } = props;
export const CooldownTimer = () => {
const seconds = useCooldownRemaining();
Copy link
Contributor

@isekovanic isekovanic Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we display seconds on both the CooldownTimer as well as the AutoCompleteInput ? Is this by design ?

Asking because otherwise we can simply check if the cooldown is happening in the input otherwise, rather than rerendering every time there's a tick.

Copy link
Member Author

@khushal87 khushal87 Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, it is by design

const styles = useStyles();
const {
theme: {
messageInput: {
Expand All @@ -30,7 +26,7 @@ export const CooldownTimer = (props: CooldownTimerProps) => {
{seconds}
</Text>
);
}, [seconds, text]);
}, [seconds, text, styles]);

return (
<IconButton
Expand All @@ -44,6 +40,20 @@ export const CooldownTimer = (props: CooldownTimerProps) => {
);
};

const styles = StyleSheet.create({
text: { color: '#B8BEC4', fontSize: 16, fontWeight: '600' },
});
const useStyles = () => {
const {
theme: { semantics },
} = useTheme();
return useMemo(
() =>
StyleSheet.create({
text: {
color: semantics.textDisabled,
fontSize: primitives.typographyFontSizeMd,
fontWeight: primitives.typographyFontWeightSemiBold,
lineHeight: primitives.typographyLineHeightNormal,
},
}),
[semantics.textDisabled],
);
};
Loading