refactor(livechat): do not use FunctionalComponent to declare components

Author: tassoevan

packages/livechat/src/components/Screen/ScreenProvider.tsx

@@ -1,4 +1,4 @@
-import type { FunctionalComponent } from 'preact';
+import type { ComponentChildren } from 'preact';
 import { createContext } from 'preact';
 import { useContext, useEffect, useState } from 'preact/hooks';
 import { parse } from 'query-string';
@@ -68,7 +68,11 @@ export const ScreenContext = createContext<ScreenContextValue>({
 	onOpenWindow: () => undefined,
 } as ScreenContextValue);
 
-export const ScreenProvider: FunctionalComponent = ({ children }) => {
+type ScreenProviderProps = {
+	children: ComponentChildren;
+};
+
+export const ScreenProvider = ({ children }: ScreenProviderProps) => {
 	const store = useContext(StoreContext);
 	const { token, dispatch, config, sound, minimized = true, undocked, expanded = false, alerts, modal, iframe, customFieldsQueue } = store;
 	const { department, name, email } = iframe.guest || {};

packages/livechat/src/components/Tooltip/Tooltip.stories.tsx

@@ -4,7 +4,6 @@ import type { ComponentProps } from 'preact';
 import Tooltip from './Tooltip';
 import TooltipContainer from './TooltipContainer';
 import TooltipTrigger from './TooltipTrigger';
-import { withTooltip } from './withTooltip';
 import { Button } from '../Button';
 
 const placements = [null, 'left', 'top', 'right', 'bottom', 'top-left', 'top-right', 'bottom-left', 'bottom-right'] as const;
@@ -51,12 +50,3 @@ ConnectedToAnotherComponent.args = {
 	content: 'A simple tool tip',
 };
 ConnectedToAnotherComponent.decorators = [(storyFn) => <TooltipContainer>{storyFn()}</TooltipContainer>];
-
-const MyButton = withTooltip(Button);
-
-export const WithTooltip: StoryFn<{ tooltip?: string }> = ({ tooltip }) => <MyButton tooltip={tooltip}>A simple button</MyButton>;
-WithTooltip.storyName = 'withTooltip()';
-WithTooltip.args = {
-	tooltip: 'A simple tool tip',
-};
-WithTooltip.decorators = [(storyFn) => <TooltipContainer>{storyFn()}</TooltipContainer>];

packages/livechat/src/components/Tooltip/index.ts

@@ -1,4 +1,3 @@
 export { default, default as Tooltip } from './Tooltip';
 export { default as TooltipContainer } from './TooltipContainer';
 export { default as TooltipTrigger } from './TooltipTrigger';
-export { withTooltip } from './withTooltip';

packages/livechat/src/components/Tooltip/withTooltip.tsx

@@ -1,5 +1,5 @@
 import type { TFunction } from 'i18next';
-import type { FunctionalComponent } from 'preact';
+import type { Ref } from 'preact';
 import { useContext } from 'preact/hooks';
 import { withTranslation } from 'react-i18next';
 
@@ -9,7 +9,14 @@ import { canRenderMessage } from '../../helpers/canRenderMessage';
 import { formatAgent } from '../../helpers/formatAgent';
 import { StoreContext } from '../../store';
 
-export const ChatConnector: FunctionalComponent<{ path: string; default: boolean; t: TFunction }> = ({ ref, t }) => {
+type ChatConnectorProps = {
+	path: string;
+	default: boolean;
+	t: TFunction;
+	ref?: Ref<any>;
+};
+
+export const ChatConnector = ({ ref, t }: ChatConnectorProps) => {
 	const { theme } = useContext(ScreenContext);
 	const {
 		config: {

packages/livechat/src/routes/Chat/connector.tsx

@@ -1,13 +1,18 @@
 import type { TFunction } from 'i18next';
-import type { FunctionalComponent } from 'preact';
 import { useContext } from 'preact/hooks';
 import { route } from 'preact-router';
 import { withTranslation } from 'react-i18next';
 
 import ChatFinished from './component';
 import { StoreContext } from '../../store';
 
-const ChatFinishedContainer: FunctionalComponent<{ path: string; t: TFunction }> = ({ ref, t }) => {
+type ChatFinishedContainerProps = {
+	ref?: any;
+	t: TFunction;
+	path: string;
+};
+
+const ChatFinishedContainer = ({ ref, t }: ChatFinishedContainerProps) => {
 	const {
 		config: {
 			messages: { conversationFinishedMessage: greeting, conversationFinishedText: message },

packages/livechat/src/routes/ChatFinished/container.tsx

@@ -1,13 +1,18 @@
 import type { TFunction } from 'i18next';
-import type { FunctionalComponent } from 'preact';
+import type { Ref } from 'preact';
 import { useContext } from 'preact/hooks';
 import { route } from 'preact-router';
 import { withTranslation } from 'react-i18next';
 
 import GDPRAgreement from './component';
 import { StoreContext } from '../../store';
 
-const GDPRContainer: FunctionalComponent<{ t: TFunction }> = ({ ref, t }) => {
+type GDPRContainerProps = {
+	t: TFunction;
+	ref?: Ref<any>;
+};
+
+const GDPRContainer = ({ ref, t }: GDPRContainerProps) => {
 	const { config: { messages: { dataProcessingConsentText: consentText = '' } = {} } = {}, dispatch } = useContext(StoreContext);
 
 	const handleAgree = async () => {

packages/livechat/src/routes/GDPRAgreement/container.tsx

@@ -1,4 +1,3 @@
-import type { FunctionalComponent } from 'preact';
 import { useContext, useRef } from 'preact/hooks';
 import type { JSXInternal } from 'preact/src/jsx';
 import type { FieldValues, SubmitHandler } from 'react-hook-form';
@@ -22,7 +21,11 @@ import { parentCall } from '../../lib/parentCall';
 import { createToken } from '../../lib/random';
 import { StoreContext } from '../../store';
 
-const LeaveMessage: FunctionalComponent<{ path: string }> = () => {
+type LeaveMessageProps = {
+	path: string;
+};
+
+const LeaveMessage = (_: LeaveMessageProps) => {
 	const {
 		config: {
 			departments = [],

packages/livechat/src/routes/LeaveMessage/index.tsx

@@ -1,4 +1,3 @@
-import type { FunctionalComponent } from 'preact';
 import { useContext, useEffect, useMemo, useRef } from 'preact/hooks';
 import type { JSXInternal } from 'preact/src/jsx';
 import { route } from 'preact-router';
@@ -26,7 +25,11 @@ type FormPayloadCustomField = { [key: string]: string };
 
 export type RegisterFormValues = { name: string; email: string; department?: string; [key: string]: any };
 
-export const Register: FunctionalComponent<{ path: string }> = () => {
+type RegisterProps = {
+	path: string;
+};
+
+export const Register = (_: RegisterProps) => {
 	const { t } = useTranslation();
 
 	const topRef = useRef<HTMLDivElement>(null);

packages/livechat/src/routes/Register/index.tsx

@@ -1,4 +1,4 @@
-import type { FunctionalComponent } from 'preact';
+import type { Ref } from 'preact';
 import { useContext, useEffect } from 'preact/hooks';
 import { route } from 'preact-router';
 
@@ -9,7 +9,12 @@ import { formatAgent } from '../../helpers/formatAgent';
 import { parentCall } from '../../lib/parentCall';
 import { StoreContext } from '../../store';
 
-export const TriggerMessageContainer: FunctionalComponent<{ path: string }> = ({ ref }) => {
+type TriggerMessageContainerProps = {
+	path: string;
+	ref?: Ref<any>;
+};
+
+export const TriggerMessageContainer = ({ ref }: TriggerMessageContainerProps) => {
 	const { messages, agent, unread } = useContext(StoreContext);
 	const { theme, onRestore } = useContext(ScreenContext);