diff --git a/src/components/Channel/channelState.ts b/src/components/Channel/channelState.ts index f6ce2c885b..1ced66fab5 100644 --- a/src/components/Channel/channelState.ts +++ b/src/components/Channel/channelState.ts @@ -23,7 +23,7 @@ export type ChannelStateReducerAction = type: 'copyStateFromChannelOnEvent'; } | { - channel: Channel; + channel: Channel; highlightedMessageId: string; type: 'jumpToMessageFinished'; } diff --git a/src/components/ChannelList/ChannelList.tsx b/src/components/ChannelList/ChannelList.tsx index 1e101d6bc4..7691aadd73 100644 --- a/src/components/ChannelList/ChannelList.tsx +++ b/src/components/ChannelList/ChannelList.tsx @@ -12,7 +12,10 @@ import type { import { useConnectionRecoveredListener } from './hooks/useConnectionRecoveredListener'; import { useMobileNavigation } from './hooks/useMobileNavigation'; import { usePaginatedChannels } from './hooks/usePaginatedChannels'; -import { useChannelListShape, usePrepareShapeHandlers } from './hooks/useChannelListShape'; +import { + useChannelListShape, + usePrepareShapeHandlers, +} from './hooks/useChannelListShape'; import { useStateStore } from '../../store'; import { ChannelListMessenger } from './ChannelListMessenger'; import { Avatar as DefaultAvatar } from '../Avatar'; @@ -21,7 +24,11 @@ import { ChannelSearch as DefaultChannelSearch } from '../ChannelSearch/ChannelS import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator'; import { LoadingChannels } from '../Loading/LoadingChannels'; import { LoadMorePaginator } from '../LoadMore/LoadMorePaginator'; -import { ChannelListContextProvider, useChatContext, useComponentContext } from '../../context'; +import { + ChannelListContextProvider, + useChatContext, + useComponentContext, +} from '../../context'; import { NullComponent } from '../UtilityComponents'; import { MAX_QUERY_CHANNELS_LIMIT, moveChannelUpwards } from './utils'; import type { CustomQueryChannelsFn } from './hooks/usePaginatedChannels'; diff --git a/src/components/ChannelPreview/ChannelPreviewMessenger.tsx b/src/components/ChannelPreview/ChannelPreviewMessenger.tsx index 66375be960..13730a4753 100644 --- a/src/components/ChannelPreview/ChannelPreviewMessenger.tsx +++ b/src/components/ChannelPreview/ChannelPreviewMessenger.tsx @@ -4,9 +4,7 @@ import clsx from 'clsx'; import { ChannelPreviewActionButtons as DefaultChannelPreviewActionButtons } from './ChannelPreviewActionButtons'; import { Avatar as DefaultAvatar } from '../Avatar'; import { useComponentContext } from '../../context'; - import type { ChannelPreviewUIComponentProps } from './ChannelPreview'; -import type { DefaultStreamChatGenerics } from '../../types/types'; const UnMemoizedChannelPreviewMessenger = (props: ChannelPreviewUIComponentProps) => { const { diff --git a/src/components/MessageList/renderMessages.tsx b/src/components/MessageList/renderMessages.tsx index 41a1627a3b..f60cdcc900 100644 --- a/src/components/MessageList/renderMessages.tsx +++ b/src/components/MessageList/renderMessages.tsx @@ -1,17 +1,15 @@ -import type { ReactNode } from 'react'; import React, { Fragment } from 'react'; - +import type { ReactNode } from 'react'; import type { UserResponse } from 'stream-chat'; -import type { GroupStyle } from './utils'; import { getIsFirstUnreadMessage, isDateSeparatorMessage } from './utils'; import { Message } from '../Message'; import { DateSeparator as DefaultDateSeparator } from '../DateSeparator'; import { EventComponent as DefaultMessageSystem } from '../EventComponent'; import { UnreadMessagesSeparator as DefaultUnreadMessagesSeparator } from './UnreadMessagesSeparator'; -import type { ComponentContextValue, CustomClasses } from '../../context'; import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes'; - +import type { ComponentContextValue, CustomClasses } from '../../context'; +import type { GroupStyle } from './utils'; import type { ChannelUnreadUiState } from '../../types'; import type { StreamMessage } from '../../context/ChannelStateContext'; import type { MessageProps } from '../Message'; diff --git a/src/context/ChannelStateContext.tsx b/src/context/ChannelStateContext.tsx index f169af44b7..1f51b22dc2 100644 --- a/src/context/ChannelStateContext.tsx +++ b/src/context/ChannelStateContext.tsx @@ -2,8 +2,10 @@ import type { PropsWithChildren } from 'react'; import React, { useContext } from 'react'; import type { + APIErrorResponse, Channel, ChannelConfigWithInfo, + ErrorFromResponse, MessageResponse, Mute, ChannelState as StreamChannelState, @@ -27,7 +29,13 @@ export type ChannelNotifications = Array<{ export type StreamMessage = ( | ReturnType | MessageResponse -) & { customType?: string; errorStatusCode?: number; editing?: boolean; date?: Date }; +) & { + customType?: string; + errorStatusCode?: number; + error?: ErrorFromResponse; + editing?: boolean; + date?: Date; +}; export type ChannelState = { suppressAutoscroll: boolean; diff --git a/src/context/ChatContext.tsx b/src/context/ChatContext.tsx index 2c112028b0..728727c4a0 100644 --- a/src/context/ChatContext.tsx +++ b/src/context/ChatContext.tsx @@ -40,7 +40,7 @@ export type ChatContextValue = { mutes: Array; openMobileNav: () => void; /** Instance of SearchController class that allows to control all the search operations. */ - searchController: SearchController; + searchController: SearchController; /** * Sets active channel to be rendered within Channel component. * @param newChannel diff --git a/src/context/ComponentContext.tsx b/src/context/ComponentContext.tsx index daf1d67e35..3c65faa832 100644 --- a/src/context/ComponentContext.tsx +++ b/src/context/ComponentContext.tsx @@ -51,8 +51,7 @@ import type { UnreadMessagesNotificationProps, UnreadMessagesSeparatorProps, } from '../components'; - -import { +import type { SearchProps, SearchResultsPresearchProps, SearchSourceResultListProps, diff --git a/src/experimental/Search/Search.tsx b/src/experimental/Search/Search.tsx index 49c766f496..633f964966 100644 --- a/src/experimental/Search/Search.tsx +++ b/src/experimental/Search/Search.tsx @@ -1,5 +1,6 @@ import clsx from 'clsx'; import React from 'react'; +import type { SearchControllerState } from 'stream-chat'; import { SearchBar as DefaultSearchBar } from './SearchBar/SearchBar'; import { SearchResults as DefaultSearchResults } from './SearchResults/SearchResults'; @@ -7,9 +8,6 @@ import { SearchContextProvider } from './SearchContext'; import { useChatContext, useComponentContext } from '../../context'; import { useStateStore } from '../../store'; -import type { SearchControllerState } from 'stream-chat'; -import type { DefaultStreamChatGenerics } from '../../types'; - type SearchControllerStateSelectorReturnValue = { isActive: boolean; }; @@ -28,9 +26,7 @@ export type SearchProps = { placeholder?: string; }; -export const Search = < - StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, ->({ +export const Search = ({ directMessagingChannelType = 'messaging', disabled, exitSearchOnInputBlur, @@ -39,7 +35,7 @@ export const Search = < const { SearchBar = DefaultSearchBar, SearchResults = DefaultSearchResults } = useComponentContext(); - const { searchController } = useChatContext(); + const { searchController } = useChatContext(); const { isActive } = useStateStore< SearchControllerState, @@ -47,7 +43,7 @@ export const Search = < >(searchController.state, searchControllerStateSelector); return ( - + = { +export type SearchContextValue = { /** The type of channel to create on user result select, defaults to `messaging` */ directMessagingChannelType: string; /** Instance of the search controller that handles the data management */ - searchController: SearchController; + searchController: SearchController; /** Sets the input element into disabled state */ disabled?: boolean; /** Clear search state / results on every click outside the search input, defaults to true */ @@ -22,22 +20,18 @@ export const SearchContext = createContext(undef /** * Context provider for components rendered within the `Search` component */ -export const SearchContextProvider = < - StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, ->({ +export const SearchContextProvider = ({ children, value, }: PropsWithChildren<{ - value: SearchContextValue; + value: SearchContextValue; }>) => ( {children} ); -export const useSearchContext = < - StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, ->() => { +export const useSearchContext = () => { const contextValue = useContext(SearchContext); - return contextValue as unknown as SearchContextValue; + return contextValue as unknown as SearchContextValue; }; diff --git a/src/experimental/Search/SearchResults/SearchResultItem.tsx b/src/experimental/Search/SearchResults/SearchResultItem.tsx index 1211d9701a..826c728b4e 100644 --- a/src/experimental/Search/SearchResults/SearchResultItem.tsx +++ b/src/experimental/Search/SearchResults/SearchResultItem.tsx @@ -1,29 +1,21 @@ +import React, { useCallback, useMemo } from 'react'; import uniqBy from 'lodash.uniqby'; -import React, { ComponentType, useCallback, useMemo } from 'react'; +import type { ComponentType } from 'react'; +import type { Channel, MessageResponse, User } from 'stream-chat'; import { useSearchContext } from '../SearchContext'; import { Avatar } from '../../../components/Avatar'; import { ChannelPreview } from '../../../components/ChannelPreview'; import { useChannelListContext, useChatContext } from '../../../context'; - import { DEFAULT_JUMP_TO_PAGE_SIZE } from '../../../constants/limits'; -import type { Channel, MessageResponse, User } from 'stream-chat'; -import type { DefaultStreamChatGenerics } from '../../../types'; - -export type ChannelSearchResultItemProps< - StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, -> = { - item: Channel; +export type ChannelSearchResultItemProps = { + item: Channel; }; -export const ChannelSearchResultItem = < - StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, ->({ - item, -}: ChannelSearchResultItemProps) => { - const { setActiveChannel } = useChatContext(); - const { setChannels } = useChannelListContext(); +export const ChannelSearchResultItem = ({ item }: ChannelSearchResultItemProps) => { + const { setActiveChannel } = useChatContext(); + const { setChannels } = useChannelListContext(); const onSelect = useCallback(() => { setActiveChannel(item); @@ -39,24 +31,20 @@ export const ChannelSearchResultItem = < ); }; -export type ChannelByMessageSearchResultItemProps< - StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, -> = { - item: MessageResponse; +export type ChannelByMessageSearchResultItemProps = { + item: MessageResponse; }; -export const MessageSearchResultItem = < - StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, ->({ +export const MessageSearchResultItem = ({ item, -}: ChannelByMessageSearchResultItemProps) => { +}: ChannelByMessageSearchResultItemProps) => { const { channel: activeChannel, client, searchController, setActiveChannel, - } = useChatContext(); - const { setChannels } = useChannelListContext(); + } = useChatContext(); + const { setChannels } = useChannelListContext(); const channel = useMemo(() => { const { channel: channelData } = item; @@ -97,20 +85,14 @@ export const MessageSearchResultItem = < ); }; -export type UserSearchResultItemProps< - StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, -> = { - item: User; +export type UserSearchResultItemProps = { + item: User; }; -export const UserSearchResultItem = < - StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, ->({ - item, -}: UserSearchResultItemProps) => { - const { client, setActiveChannel } = useChatContext(); - const { setChannels } = useChannelListContext(); - const { directMessagingChannelType } = useSearchContext(); +export const UserSearchResultItem = ({ item }: UserSearchResultItemProps) => { + const { client, setActiveChannel } = useChatContext(); + const { setChannels } = useChannelListContext(); + const { directMessagingChannelType } = useSearchContext(); const onClick = useCallback(() => { const newChannel = client.channel(directMessagingChannelType, { diff --git a/src/experimental/Search/SearchResults/SearchResults.tsx b/src/experimental/Search/SearchResults/SearchResults.tsx index 0fa110322c..fbb00fe503 100644 --- a/src/experimental/Search/SearchResults/SearchResults.tsx +++ b/src/experimental/Search/SearchResults/SearchResults.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import type { SearchControllerState } from 'stream-chat'; import { SearchSourceResults as DefaultSourceSearchResults } from './SearchSourceResults'; import { SearchResultsHeader as DefaultSearchResultsHeader } from './SearchResultsHeader'; @@ -7,25 +8,20 @@ import { useSearchContext } from '../SearchContext'; import { useComponentContext, useTranslationContext } from '../../../context'; import { useStateStore } from '../../../store'; -import type { SearchControllerState } from 'stream-chat'; -import type { DefaultStreamChatGenerics } from '../../../types'; - const searchControllerStateSelector = (nextValue: SearchControllerState) => ({ activeSources: nextValue.sources.filter((s) => s.isActive), isActive: nextValue.isActive, searchQuery: nextValue.searchQuery, }); -export const SearchResults = < - StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, ->() => { +export const SearchResults = () => { const { t } = useTranslationContext('ResultsContainer'); const { SearchResultsHeader = DefaultSearchResultsHeader, SearchResultsPresearch = DefaultSearchResultsPresearch, SearchSourceResults = DefaultSourceSearchResults, - } = useComponentContext(); - const { searchController } = useSearchContext(); + } = useComponentContext(); + const { searchController } = useSearchContext(); const { activeSources, isActive, searchQuery } = useStateStore( searchController.state, searchControllerStateSelector, diff --git a/src/experimental/Search/SearchResults/SearchResultsHeader.tsx b/src/experimental/Search/SearchResults/SearchResultsHeader.tsx index eb4bf193be..e8ec51c993 100644 --- a/src/experimental/Search/SearchResults/SearchResultsHeader.tsx +++ b/src/experimental/Search/SearchResults/SearchResultsHeader.tsx @@ -1,13 +1,11 @@ import clsx from 'clsx'; import React from 'react'; +import type { SearchSource, SearchSourceState } from 'stream-chat'; import { useSearchContext } from '../SearchContext'; import { useTranslationContext } from '../../../context'; import { useStateStore } from '../../../store'; -import type { SearchSource, SearchSourceState } from 'stream-chat'; -import type { DefaultStreamChatGenerics } from '../../../types'; - const searchSourceStateSelector = (nextValue: SearchSourceState) => ({ isActive: nextValue.isActive, }); @@ -16,13 +14,9 @@ type SearchSourceFilterButtonProps = { source: SearchSource; }; -const SearchSourceFilterButton = < - StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, ->({ - source, -}: SearchSourceFilterButtonProps) => { +const SearchSourceFilterButton = ({ source }: SearchSourceFilterButtonProps) => { const { t } = useTranslationContext(); - const { searchController } = useSearchContext(); + const { searchController } = useSearchContext(); const { isActive } = useStateStore(source.state, searchSourceStateSelector); const label = `search-results-header-filter-source-button-label--${source.type}`; return ( @@ -47,10 +41,8 @@ const SearchSourceFilterButton = < ); }; -export const SearchResultsHeader = < - StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, ->() => { - const { searchController } = useSearchContext(); +export const SearchResultsHeader = () => { + const { searchController } = useSearchContext(); return (
({ items: nextValue.items, @@ -20,15 +20,13 @@ export type SearchSourceResultListProps = { SearchResultItems?: SearchResultItemComponents; }; -export const SearchSourceResultList = < - StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, ->({ +export const SearchSourceResultList = ({ loadMoreDebounceMs = 100, loadMoreThresholdPx = 80, SearchResultItems = DefaultSearchResultItems, }: SearchSourceResultListProps) => { const { SearchSourceResultListFooter = DefaultSearchSourceResultListFooter } = - useComponentContext(); + useComponentContext(); const { searchSource } = useSearchSourceResultsContext(); const { items } = useStateStore(searchSource.state, searchSourceStateSelector); diff --git a/src/experimental/Search/SearchResults/SearchSourceResultListFooter.tsx b/src/experimental/Search/SearchResults/SearchSourceResultListFooter.tsx index 1ca3c421d9..48a85ae302 100644 --- a/src/experimental/Search/SearchResults/SearchSourceResultListFooter.tsx +++ b/src/experimental/Search/SearchResults/SearchSourceResultListFooter.tsx @@ -1,25 +1,21 @@ import React from 'react'; +import type { SearchSourceState } from 'stream-chat'; import { SearchSourceResultsLoadingIndicator as DefaultSearchSourceResultsLoadingIndicator } from './SearchSourceResultsLoadingIndicator'; import { useSearchSourceResultsContext } from '../SearchSourceResultsContext'; import { useComponentContext, useTranslationContext } from '../../../context'; import { useStateStore } from '../../../store'; -import type { SearchSourceState } from 'stream-chat'; -import type { DefaultStreamChatGenerics } from '../../../types'; - const searchSourceStateSelector = (value: SearchSourceState) => ({ hasNext: value.hasNext, isLoading: value.isLoading, }); -export const SearchSourceResultListFooter = < - StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, ->() => { +export const SearchSourceResultListFooter = () => { const { t } = useTranslationContext(); const { SearchSourceResultsLoadingIndicator = DefaultSearchSourceResultsLoadingIndicator, - } = useComponentContext(); + } = useComponentContext(); const { searchSource } = useSearchSourceResultsContext(); const { hasNext, isLoading } = useStateStore( searchSource.state, diff --git a/src/experimental/Search/SearchResults/SearchSourceResults.tsx b/src/experimental/Search/SearchResults/SearchSourceResults.tsx index 2ac8c40f8d..b9b8bae7ee 100644 --- a/src/experimental/Search/SearchResults/SearchSourceResults.tsx +++ b/src/experimental/Search/SearchResults/SearchSourceResults.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import type { SearchSource, SearchSourceState } from 'stream-chat'; import { SearchSourceResultList as DefaultSearchSourceResultList } from './SearchSourceResultList'; import { SearchSourceResultsEmpty as DefaultSearchSourceResultsEmpty } from './SearchSourceResultsEmpty'; @@ -7,9 +8,6 @@ import { SearchSourceResultsContextProvider } from '../SearchSourceResultsContex import { useComponentContext } from '../../../context'; import { useStateStore } from '../../../store'; -import type { SearchSource, SearchSourceState } from 'stream-chat'; -import type { DefaultStreamChatGenerics } from '../../../types'; - const searchSourceStateSelector = (nextValue: SearchSourceState) => ({ isLoading: nextValue.isLoading, items: nextValue.items, @@ -17,16 +15,12 @@ const searchSourceStateSelector = (nextValue: SearchSourceState) => ({ export type SearchSourceResultsProps = { searchSource: SearchSource }; -export const SearchSourceResults = < - StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, ->({ - searchSource, -}: SearchSourceResultsProps) => { +export const SearchSourceResults = ({ searchSource }: SearchSourceResultsProps) => { const { SearchSourceResultList = DefaultSearchSourceResultList, SearchSourceResultsEmpty = DefaultSearchSourceResultsEmpty, SearchSourceResultsHeader = DefaultSearchSourceResultsHeader, - } = useComponentContext(); + } = useComponentContext(); const { isLoading, items } = useStateStore( searchSource.state, searchSourceStateSelector, diff --git a/src/experimental/Search/SearchSourceResultsContext.tsx b/src/experimental/Search/SearchSourceResultsContext.tsx index 49ece9431c..df8f375480 100644 --- a/src/experimental/Search/SearchSourceResultsContext.tsx +++ b/src/experimental/Search/SearchSourceResultsContext.tsx @@ -1,4 +1,5 @@ -import React, { createContext, PropsWithChildren, useContext } from 'react'; +import type { PropsWithChildren } from 'react'; +import React, { createContext, useContext } from 'react'; import type { SearchSource } from 'stream-chat'; export type SearchSourceResultsContextValue = { diff --git a/src/experimental/Search/hooks/useSearchFocusedMessage.ts b/src/experimental/Search/hooks/useSearchFocusedMessage.ts index e7389aaf4d..9558d615fb 100644 --- a/src/experimental/Search/hooks/useSearchFocusedMessage.ts +++ b/src/experimental/Search/hooks/useSearchFocusedMessage.ts @@ -1,18 +1,13 @@ -import type { DefaultStreamChatGenerics } from '../../../types'; import type { InternalSearchControllerState } from 'stream-chat'; import { useChatContext } from '../../../context'; import { useStateStore } from '../../../store'; -const searchControllerStateSelector = < - StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, ->( - nextValue: InternalSearchControllerState, -) => ({ focusedMessage: nextValue.focusedMessage }); +const searchControllerStateSelector = (nextValue: InternalSearchControllerState) => ({ + focusedMessage: nextValue.focusedMessage, +}); -export const useSearchFocusedMessage = < - StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, ->() => { - const { searchController } = useChatContext('Channel'); +export const useSearchFocusedMessage = () => { + const { searchController } = useChatContext('Channel'); const { focusedMessage } = useStateStore( searchController._internalState, searchControllerStateSelector, diff --git a/src/experimental/Search/hooks/useSearchQueriesInProgress.ts b/src/experimental/Search/hooks/useSearchQueriesInProgress.ts index ed501bdc7f..6f6612c38a 100644 --- a/src/experimental/Search/hooks/useSearchQueriesInProgress.ts +++ b/src/experimental/Search/hooks/useSearchQueriesInProgress.ts @@ -1,25 +1,17 @@ import { useEffect, useState } from 'react'; +import type { SearchController, SearchControllerState, SearchSource } from 'stream-chat'; import { useStateStore } from '../../../store'; -import type { SearchController, SearchControllerState, SearchSource } from 'stream-chat'; -import type { DefaultStreamChatGenerics } from '../../../types'; - const searchControllerStateSelector = (value: SearchControllerState) => ({ sources: value.sources, }); -export type UseSearchQueriesInProgressParams< - StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, -> = { - searchController: SearchController; +export type UseSearchQueriesInProgressParams = { + searchController: SearchController; }; -export const useSearchQueriesInProgress = < - StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, ->( - searchController: SearchController, -) => { +export const useSearchQueriesInProgress = (searchController: SearchController) => { const [queriesInProgress, setQueriesInProgress] = useState([]); const { sources } = useStateStore( searchController.state,