Merge pull request #601 from GetStream/feat/add-custom-hook-types

Add custom hook types

package.json

@@ -138,7 +138,7 @@
     "stylelint-config-recommended-scss": "^4.2.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-scss": "^3.18.0",
-    "typescript": "^4.0.3",
+    "typescript": "4.1.1-rc",
     "url-loader": "^4.1.1",
     "webpack": "4.44.2",
     "webpack-cli": "^3.3.12",

src/components/Channel/hooks/useEditMessageHandler.js

@@ -3,10 +3,7 @@ import { useContext } from 'react';
 import { ChatContext } from '../../../context';
 
 /**
- * @typedef {import('stream-chat').Message} Message
- * @typedef {ReturnType<import('stream-chat').StreamChat['updateMessage']>} UpdateMessagePromise
- * @param {((cid: string, updatedMessage: Message) => UpdateMessagePromise) | undefined} doUpdateMessageRequest
- * @returns {(updatedMessage: Message) => UpdateMessagePromise}
+ * @type {import('types').useEditMessageHandler}
  */
 const useEditMessageHandler = (doUpdateMessageRequest) => {
   const { channel, client } = useContext(ChatContext);

src/components/Channel/hooks/useMentionsHandlers.js

@@ -2,14 +2,10 @@
 import { useCallback } from 'react';
 
 /**
- * @typedef {import('stream-chat').UserResponse} UserResponse
- * @typedef {(e: React.MouseEvent, user?: UserResponse) => void} MentionsHandler
- * @param {MentionsHandler=} onMentionsHover
- * @param {MentionsHandler=} onMentionsClick
+ * @type {import('types').useMentionsHandlers}
  */
 const useMentionsHandlers = (onMentionsHover, onMentionsClick) => {
   return useCallback(
-    /** @type {(e: React.MouseEvent<HTMLSpanElement>, mentioned_users: UserResponse[]) => void} */
     (e, mentioned_users) => {
       if (!onMentionsHover && !onMentionsClick) return;
       // eslint-disable-next-line prefer-destructuring

src/components/Message/hooks/useActionHandler.js

@@ -5,7 +5,7 @@ import { ChannelContext } from '../../../context';
 export const handleActionWarning = `Action handler was called, but it is missing one of its required arguments.
       Make sure the ChannelContext was properly set and that this hook was initialized with a valid message.`;
 /**
- * @type {(message: import('stream-chat').MessageResponse | undefined) => (name: string, value: string, event: React.MouseEvent<HTMLElement>) => Promise<void>}
+ * @type {import('types').useActionHandler}
  */
 export const useActionHandler = (message) => {
   const { channel, updateMessage, removeMessage } = useContext(ChannelContext);

src/components/Message/hooks/useDeleteHandler.js

@@ -3,7 +3,7 @@ import { useContext } from 'react';
 import { ChannelContext } from '../../../context';
 
 /**
- * @type {(message: import('stream-chat').MessageResponse | undefined) =>  (event: React.MouseEvent<HTMLElement>) => Promise<void>}
+ * @type {import('types').useDeleteHandler}
  */
 export const useDeleteHandler = (message) => {
   const { updateMessage, client } = useContext(ChannelContext);

src/components/Message/hooks/useFlagHandler.js

@@ -7,12 +7,7 @@ export const missingUseFlagHandlerParameterWarning =
   'useFlagHandler was called but it is missing one or more necessary parameters.';
 
 /**
- * @typedef {{
- *   notify?: import('types').MessageComponentProps['addNotification'],
- *   getSuccessNotification?: import('types').MessageComponentProps['getMuteUserSuccessNotification'],
- *   getErrorNotification?: import('types').MessageComponentProps['getMuteUserErrorNotification'],
- * }} NotificationArg
- * @type {(message: import('stream-chat').MessageResponse | undefined, notification: NotificationArg) => (event: React.MouseEvent<HTMLElement>) => Promise<void>}
+ * @type {import('types').useFlagHandler}
  */
 export const useFlagHandler = (message, notifications = {}) => {
   const { client } = useContext(ChannelContext);

src/components/Message/hooks/useMentionsHandler.js

@@ -2,7 +2,7 @@
 import { useContext } from 'react';
 import { ChannelContext } from '../../../context';
 
-/** @type {(fn: Function | undefined, message: import('stream-chat').MessageResponse | undefined) => Handler} * */
+/** @type {(fn: Function | undefined, message: import('stream-chat').MessageResponse | undefined) => React.EventHandler<React.SyntheticEvent>} * */
 function createEventHandler(fn, message) {
   return (e) => {
     if (typeof fn !== 'function' || !message?.mentioned_users) {
@@ -13,16 +13,7 @@ function createEventHandler(fn, message) {
 }
 
 /**
- * @typedef {React.EventHandler<React.SyntheticEvent>} Handler
- * @typedef { import('stream-chat').MessageResponse | undefined } Message
- * @typedef { (event: React.MouseEvent, user: import('stream-chat').UserResponse[] ) => void } CustomMentionHandler
- * @type {(
- *   message: Message,
- *   customMentionHandler?: {
- *     onMentionsClick?: CustomMentionHandler,
- *     onMentionsHover?: CustomMentionHandler
- *   }
- * ) => { onMentionsClick: Handler, onMentionsHover: Handler }}
+ * @type {import('types').useMentionsHandler}
  */
 export const useMentionsHandler = (message, customMentionHandler) => {
   /**
@@ -50,13 +41,7 @@ export const useMentionsHandler = (message, customMentionHandler) => {
 };
 
 /**
- * @type {(
- *   message: Message,
- *   eventHandlers?: {
- *     onMentionsClick?: Handler,
- *     onMentionsHover?: Handler,
- *   },
- * ) => { onMentionsClick: Handler, onMentionsHover: Handler }}
+ * @type {import('types').useMentionsUIHandler}
  */
 export const useMentionsUIHandler = (message, eventHandlers) => {
   /**

src/components/Message/hooks/useMuteHandler.js

@@ -7,12 +7,7 @@ export const missingUseMuteHandlerParamsWarning =
   'useMuteHandler was called but it is missing one or more necessary parameter.';
 
 /**
- * @typedef {{
- *   notify?: import('types').MessageComponentProps['addNotification'],
- *   getSuccessNotification?: import('types').MessageComponentProps['getMuteUserSuccessNotification'],
- *   getErrorNotification?: import('types').MessageComponentProps['getMuteUserErrorNotification'],
- * }} NotificationArg
- * @type {(message: import('stream-chat').MessageResponse | undefined, notification: NotificationArg) => (event: React.MouseEvent<HTMLElement>) => Promise<void>}
+ * @type {import('types').useMuteHandler}
  */
 export const useMuteHandler = (message, notifications = {}) => {
   const { client, mutes } = useContext(ChannelContext);

src/components/Message/hooks/useOpenThreadHandler.js

@@ -3,10 +3,7 @@ import { useContext } from 'react';
 import { ChannelContext } from '../../../context';
 
 /**
- * @type {(
- *   message: import('stream-chat').MessageResponse | undefined,
- *   customOpenThread?: (message: import('stream-chat').MessageResponse, event: React.SyntheticEvent) => void
- * ) => (event: React.SyntheticEvent) => void}
+ * @type {import('types').useOpenThreadHandler}
  */
 export const useOpenThreadHandler = (message, customOpenThread) => {
   /**

src/components/Message/hooks/useReactionHandler.js

@@ -5,7 +5,7 @@ import { ChannelContext } from '../../../context';
 export const reactionHandlerWarning = `Reaction handler was called, but it is missing one of its required arguments.
       Make sure the ChannelContext was properly set and that this hook was initialized with a valid message.`;
 /**
- * @type {(message: import('stream-chat').MessageResponse | undefined) => (reactionType: string, event: React.MouseEvent) => Promise<void>}
+ * @type {import('types').useReactionHandler}
  */
 export const useReactionHandler = (message) => {
   const { client, channel, updateMessage } = useContext(ChannelContext);
@@ -76,12 +76,7 @@ export const useReactionHandler = (message) => {
 };
 
 /**
- * @typedef {{ onReactionListClick: () => void, showDetailedReactions: boolean, isReactionEnabled: boolean }} ReactionClickHandler
- * @type {(
- *   message: import('stream-chat').MessageResponse | undefined,
- *   reactionSelectorRef: React.RefObject<HTMLDivElement | null>,
- *   messageWrapperRef?: React.RefObject<HTMLElement | null>
- * ) => ReactionClickHandler}
+ * @type {import('types').useReactionClick}
  */
 export const useReactionClick = (
   message,

src/components/Message/hooks/useRetryHandler.js

@@ -3,9 +3,7 @@ import { useContext } from 'react';
 import { ChannelContext } from '../../../context';
 
 /**
- * @type {(
- *  customRetrySendMessage?: (message: import('stream-chat').Message) => Promise<void>
- * ) => (message: import('stream-chat').Message | undefined) => Promise<void>}
+ * @type {import('types').useRetryHandler}
  */
 export const useRetryHandler = (customRetrySendMessage) => {
   /**

src/components/Message/hooks/useUserHandler.js

@@ -1,8 +1,6 @@
 // @ts-check
 /**
- * @typedef {React.EventHandler<React.SyntheticEvent>} Handler
- * @typedef {(e: React.MouseEvent, user: import('stream-chat').User) => void} UserEventHandler
- * @type {(message: import('stream-chat').MessageResponse | undefined, eventHandlers: {onUserClickHandler?: UserEventHandler, onUserHoverHandler?: UserEventHandler}) => { onUserClick: Handler, onUserHover: Handler }}
+ * @type {import('types').useUserHandler}
  */
 export const useUserHandler = (message, eventHandlers) => {
   return {

src/components/Message/hooks/useUserRole.js

@@ -3,15 +3,7 @@ import { useContext } from 'react';
 import { ChannelContext } from '../../../context';
 
 /**
- * @typedef {{
- *   isMyMessage: boolean;
- *   isAdmin: boolean;
- *   isModerator: boolean;
- *   isOwner: boolean;
- *   canEditMessage: boolean;
- *   canDeleteMessage: boolean;
- * }} UserRoles
- * @type {(message: import('stream-chat').MessageResponse | undefined) => UserRoles} Typescript syntax
+ * @type {import('types').useUserRole}
  */
 export const useUserRole = (message) => {
   const { client, channel } = useContext(ChannelContext);

src/components/MessageInput/hooks/messageInput.js

@@ -208,9 +208,9 @@ function messageInputReducer(state, action) {
 }
 /**
  * hook for MessageInput state
- * @param {Props} props
+ * @type{import('types').useMessageInput}
  */
-export default function useMessageInputState(props) {
+export default function useMessageInput(props) {
   const {
     doImageUploadRequest,
     doFileUploadRequest,
@@ -665,6 +665,7 @@ export default function useMessageInputState(props) {
   );
 
   const onPaste = useCallback(
+    /** (e: React.ClipboardEvent) */
     (e) => {
       (async (event) => {
         // TODO: Move this handler to package with ImageDropzone