Enhancement: export interfaces (#192)

* Adding classNames * Props Refactoring
chatengine-io · Jun 30, 2022 · 4a4177f · 4a4177f
1 parent 66415d0
commit 4a4177f
Show file tree

Hide file tree

Showing 33 changed files with 165 additions and 102 deletions.
diff --git a/src/components/MultiChatWindow/ChatFeed/ChatHeader/index.tsx b/src/components/MultiChatWindow/ChatFeed/ChatHeader/index.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
 
-import { Props } from './props';
+import { ChatHeaderProps } from './props';
 import { styles } from './styles';
 
 import { Row, Col, setConfiguration } from 'react-grid-system';
 
 setConfiguration({ maxScreenClass: 'xl', gutterWidth: 0 });
 
-export const ChatHeader: React.FC<Props> = (props: Props) => {
+export const ChatHeader: React.FC<ChatHeaderProps> = (
+  props: ChatHeaderProps
+) => {
   const { id = '', title = '', description = '' } = props;
 
   if (props.renderChatHeader) {

diff --git a/src/components/MultiChatWindow/ChatFeed/ChatHeader/props.tsx b/src/components/MultiChatWindow/ChatFeed/ChatHeader/props.tsx
@@ -1,11 +1,13 @@
 import { ReactNode } from 'react';
 import { ChatHeaderStyles } from './styles';
 
-export interface Props extends ChatHeaderStyles {
+export interface ChatHeaderProps extends ChatHeaderStyles {
   // Data
   id?: string | number;
   title?: string | ReactNode;
   description?: string;
   // Render Function
-  renderChatHeader?: (props: Props) => JSX.Element | Element | React.FC<Props>;
+  renderChatHeader?: (
+    props: ChatHeaderProps
+  ) => JSX.Element | Element | React.FC<ChatHeaderProps>;
 }
diff --git a/src/components/MultiChatWindow/ChatFeed/MessageForm/index.tsx b/src/components/MultiChatWindow/ChatFeed/MessageForm/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 
-import { Props } from './props';
+import { MessageFormProps } from './props';
 import { styles } from './styles';
 
 import { AttachmentInput } from './AttachmentInput';
@@ -11,7 +11,9 @@ import { Image } from '../../../Components/Image';
 import { isImage } from '../../../util/file';
 import { MessageObject, AttachmentObject } from '../../../../interfaces';
 
-export const MessageForm: React.FC<Props> = (props: Props) => {
+export const MessageForm: React.FC<MessageFormProps> = (
+  props: MessageFormProps
+) => {
   const { label = '' } = props;
 
   const [iter, setIter] = useState(0); // Forces attachments update

diff --git a/src/components/MultiChatWindow/ChatFeed/MessageForm/props.tsx b/src/components/MultiChatWindow/ChatFeed/MessageForm/props.tsx
@@ -2,7 +2,7 @@ import { MessageFormStyles } from './styles';
 
 import { MessageObject } from '../../../../interfaces';
 
-export interface Props extends MessageFormStyles {
+export interface MessageFormProps extends MessageFormStyles {
   // Data
   value?: string;
   label?: string;
@@ -11,5 +11,7 @@ export interface Props extends MessageFormStyles {
   onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
   onSubmit?: (message: MessageObject) => void;
   // Render Functions
-  renderMessageForm?: (props: Props) => JSX.Element | Element | React.FC<Props>;
+  renderMessageForm?: (
+    props: MessageFormProps
+  ) => JSX.Element | Element | React.FC<MessageFormProps>;
 }
diff --git a/src/components/MultiChatWindow/ChatFeed/MessageList/Message/DateTime/index.tsx b/src/components/MultiChatWindow/ChatFeed/MessageList/Message/DateTime/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 
-import { Props } from './props';
+import { DateTimeProps } from './props';
 import { styles } from './styles';
 
 import { formatDateTime, getDateTime } from '../../../../../util/dateTime';
 
-export const DateTime: React.FC<Props> = (props: Props) => {
+export const DateTime: React.FC<DateTimeProps> = (props: DateTimeProps) => {
   const { offset = 0 } = props;
 
   return (

diff --git a/src/components/MultiChatWindow/ChatFeed/MessageList/Message/DateTime/props.tsx b/src/components/MultiChatWindow/ChatFeed/MessageList/Message/DateTime/props.tsx
@@ -1,6 +1,6 @@
 import { DateTimeStyles } from './styles';
 
-export interface Props extends DateTimeStyles {
+export interface DateTimeProps extends DateTimeStyles {
   created: string;
   offset?: number;
 }
diff --git a/src/components/MultiChatWindow/ChatFeed/MessageList/Message/index.tsx b/src/components/MultiChatWindow/ChatFeed/MessageList/Message/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { Props } from './props';
+import { MessageProps } from './props';
 import { myStyles, theirStyles } from './styles';
 
 import { Dot } from '../../../../Components/Dot';
@@ -14,7 +14,7 @@ import { Image } from '../../../../Components/Image';
 import { isImage, getFileName } from '../../../../util/file';
 import { formatTime, getDateTime } from '../../../../util/dateTime';
 
-export const Message: React.FC<Props> = (props: Props) => {
+export const Message: React.FC<MessageProps> = (props: MessageProps) => {
   const {
     lastMessage = null,
     message,

diff --git a/src/components/MultiChatWindow/ChatFeed/MessageList/Message/props.tsx b/src/components/MultiChatWindow/ChatFeed/MessageList/Message/props.tsx
@@ -2,7 +2,7 @@ import { MessageObject, ChatObject } from '../../../../../interfaces';
 
 import { MessageStyle } from './styles';
 
-export interface Props extends MessageStyle {
+export interface MessageProps extends MessageStyle {
   // Data
   lastMessage?: MessageObject | null;
   message: MessageObject;
@@ -14,5 +14,7 @@ export interface Props extends MessageStyle {
   isMyMessage?: boolean;
   showDateTime?: boolean;
   // Render Functions
-  renderMessage?: (props: Props) => JSX.Element | Element | React.FC<Props>;
+  renderMessage?: (
+    props: MessageProps
+  ) => JSX.Element | Element | React.FC<MessageProps>;
 }
diff --git a/src/components/MultiChatWindow/ChatFeed/MessageList/index.tsx b/src/components/MultiChatWindow/ChatFeed/MessageList/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Props } from './props';
+import { MessageListProps } from './props';
 import { styles } from './styles';
 
 import { Message } from './Message';
@@ -10,7 +10,9 @@ import { Spinner } from '../../../Components/Spinner';
 
 import _ from 'lodash';
 
-export const MessageList: React.FC<Props> = (props: Props) => {
+export const MessageList: React.FC<MessageListProps> = (
+  props: MessageListProps
+) => {
   const { messages = [] } = props;
 
   const messagesObject = _.mapKeys(messages, 'created');

diff --git a/src/components/MultiChatWindow/ChatFeed/MessageList/props.tsx b/src/components/MultiChatWindow/ChatFeed/MessageList/props.tsx
@@ -2,8 +2,8 @@ import { ChatObject, MessageObject } from '../../../../interfaces';
 
 import { MessageListStyles } from './styles';
 
-import { Props as MessageBubbleProps } from './Message/props';
-export interface Props extends MessageListStyles {
+import { MessageProps } from './Message/props';
+export interface MessageListProps extends MessageListStyles {
   // Data
   messages: MessageObject[];
   chat?: ChatObject;
@@ -17,8 +17,10 @@ export interface Props extends MessageListStyles {
   onBottomMessageShow?: () => void;
   onBottomMessageHide?: () => void;
   // Render Functions
-  renderMessageList?: (props: Props) => JSX.Element | Element | React.FC<Props>;
+  renderMessageList?: (
+    props: MessageListProps
+  ) => JSX.Element | Element | React.FC<MessageListProps>;
   renderMessage?: (
-    props: MessageBubbleProps
-  ) => JSX.Element | Element | React.FC<MessageBubbleProps>;
+    props: MessageProps
+  ) => JSX.Element | Element | React.FC<MessageProps>;
 }
diff --git a/src/components/MultiChatWindow/ChatFeed/WelcomeGif/index.tsx b/src/components/MultiChatWindow/ChatFeed/WelcomeGif/index.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
-import { Props } from './props';
+import { WelcomeGifProps } from './props';
 import { styles } from './styles';
 
-export const WelcomeGif: React.FC<Props> = (props: Props) => {
+export const WelcomeGif: React.FC<WelcomeGifProps> = (
+  props: WelcomeGifProps
+) => {
   if (props.renderWelcomeGif) {
     return <>{props.renderWelcomeGif(props)}</>;
   }

diff --git a/src/components/MultiChatWindow/ChatFeed/WelcomeGif/props.tsx b/src/components/MultiChatWindow/ChatFeed/WelcomeGif/props.tsx
@@ -1,5 +1,7 @@
 import { WelcomeGifStyles } from './styles';
 
-export interface Props extends WelcomeGifStyles {
-  renderWelcomeGif?: (props: Props) => JSX.Element | Element | React.FC<Props>;
+export interface WelcomeGifProps extends WelcomeGifStyles {
+  renderWelcomeGif?: (
+    props: WelcomeGifProps
+  ) => JSX.Element | Element | React.FC<WelcomeGifProps>;
 }
diff --git a/src/components/MultiChatWindow/ChatFeed/index.tsx b/src/components/MultiChatWindow/ChatFeed/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Props } from './props';
+import { ChatFeedProps } from './props';
 import { styles } from './styles';
 
 import { ChatHeader } from './ChatHeader';
@@ -31,7 +31,7 @@ const getDescription = (
   }
 };
 
-export const ChatFeed: React.FC<Props> = (props: Props) => {
+export const ChatFeed: React.FC<ChatFeedProps> = (props: ChatFeedProps) => {
   const { chat } = props;
 
   const otherPerson =
@@ -53,7 +53,7 @@ export const ChatFeed: React.FC<Props> = (props: Props) => {
   }
 
   return (
-    <div className="ch-chat-feed" style={{ ...styles.style, ...props.style }}>
+    <div className="ce-chat-feed" style={{ ...styles.style, ...props.style }}>
       <ChatHeader
         title={title}
         description={

diff --git a/src/components/MultiChatWindow/ChatFeed/props.tsx b/src/components/MultiChatWindow/ChatFeed/props.tsx
@@ -2,13 +2,13 @@ import { ChatObject, MessageObject } from '../../../interfaces';
 
 import { ChatFeedStyles } from './styles';
 
-import { Props as ChatHeaderProps } from './ChatHeader/props';
-import { Props as MessageListProps } from './MessageList/props';
-import { Props as MessageBubbleProps } from './MessageList/Message/props';
-import { Props as WelcomeGifProps } from './WelcomeGif/props';
-import { Props as MessageFormProps } from './MessageForm/props';
+import { ChatHeaderProps } from './ChatHeader/props';
+import { MessageListProps } from './MessageList/props';
+import { MessageProps } from './MessageList/Message/props';
+import { WelcomeGifProps } from './WelcomeGif/props';
+import { MessageFormProps } from './MessageForm/props';
 
-export interface Props extends ChatFeedStyles {
+export interface ChatFeedProps extends ChatFeedStyles {
   // Data
   messages: MessageObject[];
   username?: string;
@@ -24,16 +24,18 @@ export interface Props extends ChatFeedStyles {
   onBottomMessageHide?: () => void;
   onMessageFormSubmit?: (message: MessageObject) => void;
   // Render Functions
-  renderChatFeed?: (props: Props) => JSX.Element | Element | React.FC<Props>;
+  renderChatFeed?: (
+    props: ChatFeedProps
+  ) => JSX.Element | Element | React.FC<ChatFeedProps>;
   renderChatHeader?: (
     props: ChatHeaderProps
   ) => JSX.Element | Element | React.FC<ChatHeaderProps>;
   renderMessageList?: (
     props: MessageListProps
   ) => JSX.Element | Element | React.FC<MessageListProps>;
   renderMessage?: (
-    props: MessageBubbleProps
-  ) => JSX.Element | Element | React.FC<MessageBubbleProps>;
+    props: MessageProps
+  ) => JSX.Element | Element | React.FC<MessageProps>;
   renderWelcomeGif?: (
     props: WelcomeGifProps
   ) => JSX.Element | Element | React.FC<WelcomeGifProps>;

diff --git a/src/components/MultiChatWindow/ChatList/ChatCard/index.tsx b/src/components/MultiChatWindow/ChatList/ChatCard/index.tsx
@@ -4,10 +4,10 @@ import { Avatar } from '../../../Components/Avatar';
 
 import { stringToColor } from '../../../util/colorMapping';
 
-import { Props } from './props';
+import { ChatCardProps } from './props';
 import { styles } from './styles';
 
-export const ChatCard: React.FC<Props> = (props: Props) => {
+export const ChatCard: React.FC<ChatCardProps> = (props: ChatCardProps) => {
   const { title = '', description = '', timeStamp = '' } = props;
 
   const [hovered, setHovered] = useState<boolean>(false);
@@ -50,6 +50,7 @@ export const ChatCard: React.FC<Props> = (props: Props) => {
       <Avatar
         username={props.avatarUsername}
         avatarUrl={props.avatarUrl}
+        className="ce-chat-card-avatar"
         style={{
           ...styles.avatarStyle,
           ...{
@@ -92,6 +93,7 @@ export const ChatCard: React.FC<Props> = (props: Props) => {
         }}
       >
         <div
+          className="ce-chat-card-subtitle-html"
           dangerouslySetInnerHTML={{
             __html: props.isLoading ? '.' : description,
           }}

diff --git a/src/components/MultiChatWindow/ChatList/ChatCard/props.tsx b/src/components/MultiChatWindow/ChatList/ChatCard/props.tsx
@@ -1,7 +1,9 @@
 import { HTMLAttributes } from 'react';
 
 import { ChatCardStyle } from './styles';
-export interface Props extends HTMLAttributes<HTMLDivElement>, ChatCardStyle {
+export interface ChatCardProps
+  extends HTMLAttributes<HTMLDivElement>,
+    ChatCardStyle {
   // Data
   title?: string;
   description?: string;
@@ -15,5 +17,7 @@ export interface Props extends HTMLAttributes<HTMLDivElement>, ChatCardStyle {
   // Hooks
   onClick?: () => void;
   // Render Functions
-  renderChatCard?: (props: Props) => JSX.Element | Element | React.FC<Props>;
+  renderChatCard?: (
+    props: ChatCardProps
+  ) => JSX.Element | Element | React.FC<ChatCardProps>;
 }
diff --git a/src/components/MultiChatWindow/ChatList/ChatForm/index.tsx b/src/components/MultiChatWindow/ChatList/ChatForm/index.tsx
@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 
-import { Props } from './props';
+import { ChatFormProps } from './props';
 import { styles } from './styles';
 
 import { Button } from '../../../Components/Button';
 import { Input } from '../../../Components/Input';
 
-export const ChatForm: React.FC<Props> = (props: Props) => {
+export const ChatForm: React.FC<ChatFormProps> = (props: ChatFormProps) => {
   const [selected, setSelected] = useState<boolean>(false);
   const [value, setValue] = useState<string>('');
 

diff --git a/src/components/MultiChatWindow/ChatList/ChatForm/props.tsx b/src/components/MultiChatWindow/ChatList/ChatForm/props.tsx
@@ -2,9 +2,13 @@ import { HTMLAttributes } from 'react';
 
 import { ChatFormStyles } from './styles';
 
-export interface Props extends HTMLAttributes<HTMLFormElement>, ChatFormStyles {
+export interface ChatFormProps
+  extends HTMLAttributes<HTMLFormElement>,
+    ChatFormStyles {
   // Hooks
   onFormSubmit?: (value: string) => void;
   // Render Functions
-  renderChatForm?: (props: Props) => JSX.Element | Element | React.FC<Props>;
+  renderChatForm?: (
+    props: ChatFormProps
+  ) => JSX.Element | Element | React.FC<ChatFormProps>;
 }
diff --git a/src/components/MultiChatWindow/ChatList/index.tsx b/src/components/MultiChatWindow/ChatList/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Props } from './props';
+import { ChatListProps } from './props';
 import { styles } from './styles';
 
 import { ChatForm } from './ChatForm';
@@ -36,7 +36,7 @@ const getDescription = (chat: ChatObject): string => {
   return chat.last_message.text;
 };
 
-export const ChatList: React.FC<Props> = (props: Props) => {
+export const ChatList: React.FC<ChatListProps> = (props: ChatListProps) => {
   const { activeChatId = -1 } = props;
 
   const renderChats = (chats: Array<ChatObject>) => {

diff --git a/src/components/MultiChatWindow/ChatList/props.tsx b/src/components/MultiChatWindow/ChatList/props.tsx
@@ -4,10 +4,12 @@ import { ChatListStyles } from './styles';
 
 import { ChatObject } from '../../../interfaces';
 
-import { Props as ChatFormProps } from './ChatForm/props';
-import { Props as ChatCardProps } from './ChatCard/props';
+import { ChatFormProps } from './ChatForm/props';
+import { ChatCardProps } from './ChatCard/props';
 
-export interface Props extends HTMLAttributes<HTMLDivElement>, ChatListStyles {
+export interface ChatListProps
+  extends HTMLAttributes<HTMLDivElement>,
+    ChatListStyles {
   // Data
   chats: ChatObject[];
   activeChatId?: number;
@@ -21,7 +23,9 @@ export interface Props extends HTMLAttributes<HTMLDivElement>, ChatListStyles {
   onChatFormSubmit?: (title: string) => void;
   onChatLoaderShow?: () => void;
   // Render Functions
-  renderChatList?: (props: Props) => JSX.Element | Element | React.FC<Props>;
+  renderChatList?: (
+    props: ChatListProps
+  ) => JSX.Element | Element | React.FC<ChatListProps>;
   renderChatForm?: (
     props: ChatFormProps
   ) => JSX.Element | Element | React.FC<ChatFormProps>;