From 6459096b58664b533c03bb27a4d127ea57042fd8 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 17 Jun 2022 14:39:53 -0500
Subject: [PATCH] ChatWindow: convert to TSX

---
 app/soapbox/components/hover_ref_wrapper.tsx  |   2 +-
 .../features/chats/components/chat_window.js  | Bin 3624 -> 0 bytes
 .../features/chats/components/chat_window.tsx | 113 ++++++++++++++++++
 3 files changed, 114 insertions(+), 1 deletion(-)
 delete mode 100644 app/soapbox/features/chats/components/chat_window.js
 create mode 100644 app/soapbox/features/chats/components/chat_window.tsx

diff --git a/app/soapbox/components/hover_ref_wrapper.tsx b/app/soapbox/components/hover_ref_wrapper.tsx
index bf4e253f21..2090543cca 100644
--- a/app/soapbox/components/hover_ref_wrapper.tsx
+++ b/app/soapbox/components/hover_ref_wrapper.tsx
@@ -15,7 +15,7 @@ const showProfileHoverCard = debounce((dispatch, ref, accountId) => {
 
 interface IHoverRefWrapper {
   accountId: string,
-  inline: boolean,
+  inline?: boolean,
   className?: string,
 }
 
diff --git a/app/soapbox/features/chats/components/chat_window.js b/app/soapbox/features/chats/components/chat_window.js
deleted file mode 100644
index e525e3432396ba4ab71f77a932bb200615058d24..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3624
zcmbtXZExE)5dNNDaRq`(USqipFraXvENQlG9=2gfGW5eRB#K1aTqRPaD94%L|GqoE
zNR*Ro1LhBcL_YU^_mJjQEtQ5}m8@?bYu3P0$qJ$xzo(iOqLTw|F;^_hwcA(pK5Q+j
zs@2(j$@cXa+?4z6De2u)JIJ<*T}reim>Ag!<q<Q@J!o*C11|n#xn2le!Y*`j%5f<K
z=28em?x7Sb+HDB?iHpzs7};v3riH8!=(Ext0OX}?*yTFYNBE)TYE`-~?@1%G`d)5l
zm^3a$Gs_VhWcFf{=}bAVJ+_asnPp~w@a_k>Vd{!4KdG#)**^%b33#j6^7g?(2OSH{
z!-rODDPFeA5p#QQK!achm$DU@h(0^dc--<(pvpe8@0q3yJrQbHiPexQNJj@NrZ4iK
zM&3fJd5P)BbMjy$QShcNv&WBL#1jivsL`2b=#;M;IrBkoUGRx1$t~81AQ*O|fxP}X
ztFKA$Mp9=tkU~6x^bAbZ4GLW~ais?DqKqe~1^dG3d7{HOa|9hwBP<Ho^-8@EZJ;#+
zOwh(c#J@+h*hEJVam^}vvEqMNYXFMrRte)A;ICryK|vf<ESgY*(vJk^<_X_WwlDEJ
zc3#n5qUDd*@niyXXhp%6T(H8+4ym5Q@NT7@f!zt(!3RE_Pt`b)CkM34wuXFAf7X^7
z&M{v!n(;H4pB$VI6Mm4FS<?VH{fUc0J^<TlCW;1LAd`+fq40PPL_wD7QkN+TBGdVL
zKG0yYY(<{%=8Ao3IdX%Iov0)P$$R3QCooFjq6mSFR$Q!}03VF=*VJJD0nLkTh!Sme
z&y;nHEY5@AeTa!-xm3=3YKNYm6Cn#`g@+o3`}b0ow7>JIW7v+=_NGHI+h{O~dc-;t
zg=M`<B10M!n}(pXT`R;aSVO*C^CqF9G>I=n+!Lx-f*nqlZC{Z`gS{KWxBt`NK-&Li
zQ6lvTnisJ$QHH^oP#UI9MPr<93!Vc@kl%64l1)~&49DHf#}LOt)U8HBrzlt%q{nFF
zwEJDjD%@tJ&4k%l%DioiED?^MxM7vl1<Lpm;#Xsh6E~lM(%xEP6gkc0Ykwkr%ZuOY
z0=qV@726nQoD98z)G5ot<NzJ$5lPVP)|{nB!5%!;_-0#S1U9uN?|Z$k(iD2Z*RO~7
z6gMJSGZ9UUl<Th{CqX<4DT67@P-mdloel!iM}R|TY4#}KIy_?1pl@w7CcD)0KBpks
z(pAf<cIOt#5{y_qj@(-0Dcm9zU#*G$<Ky>V!&eZa7w`t&As@ei<F{e<T7g%r!kow>
zy>@+1tzD#(pLDzYoECh8Hy9+;U$Tm&QKhEGuq@ejD)1&2ojDl5sXzD4>6><e=^e~G
z?sSIw?8i7Jdx;4R?_XnFE*3@FxmTMbUPP0f*N=XftC^N*cQ-pf979n~Bls?Wqky|#
zIi<b!9W?wemUi#n2mT{`Mh3jS)7hSz<Jdf>J)g|(uFeDldQ7K>UC>$RA|6POC7SQR
zlzR?$hn;!b)!RGR1tIL0i1gjwuCee;1qA{KYXWER77zEJ=5ug0*!4BVXzl$j>;S7?
zb6v6sq_`}3{yFW;aPHHtVauUPVVQ`p&pT}L3#>`(avx67WaP%o`r*?~($9x&&W2Ic
zhzxGCjmpzb*>gLN&duKvHKVI+<DT23*{rZjz=W7a_Qax@d^uc$c@pi=_Qv0#^`HCP
zn=_kbbc@cDQ9P%3y3pM;sFJ<0(PRwNVa8&Fk>Z+eiuNoSRm?AjDep&?TD~9J(T6{$
Hb_ah0XS9b7

diff --git a/app/soapbox/features/chats/components/chat_window.tsx b/app/soapbox/features/chats/components/chat_window.tsx
new file mode 100644
index 0000000000..aecdca1801
--- /dev/null
+++ b/app/soapbox/features/chats/components/chat_window.tsx
@@ -0,0 +1,113 @@
+import React, { useEffect, useRef } from 'react';
+import { Link } from 'react-router-dom';
+
+import {
+  closeChat,
+  toggleChat,
+} from 'soapbox/actions/chats';
+import Avatar from 'soapbox/components/avatar';
+import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
+import IconButton from 'soapbox/components/icon_button';
+import { Counter } from 'soapbox/components/ui';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { makeGetChat } from 'soapbox/selectors';
+import { getAcct } from 'soapbox/utils/accounts';
+import { displayFqn as getDisplayFqn } from 'soapbox/utils/state';
+
+import ChatBox from './chat_box';
+
+import type { Account as AccountEntity } from 'soapbox/types/entities';
+
+type WindowState = 'open' | 'minimized';
+
+const getChat = makeGetChat();
+
+interface IChatWindow {
+  /** Position of the chat window on the screen, where 0 is rightmost. */
+  idx: number,
+  /** ID of the chat entity. */
+  chatId: string,
+  /** Whether the window is open or minimized. */
+  windowState: WindowState,
+}
+
+/** Floating desktop chat window. */
+const ChatWindow: React.FC<IChatWindow> = ({ idx, chatId, windowState }) => {
+  const dispatch = useAppDispatch();
+
+  const displayFqn = useAppSelector(getDisplayFqn);
+
+  const chat = useAppSelector(state => {
+    const chat = state.chats.items.get(chatId);
+    return chat ? getChat(state, chat.toJS() as any) : undefined;
+  });
+
+  const inputElem = useRef<HTMLTextAreaElement | null>(null);
+
+  const handleChatClose = (chatId: string) => {
+    return () => {
+      dispatch(closeChat(chatId));
+    };
+  };
+
+  const handleChatToggle = (chatId: string) => {
+    return () => {
+      dispatch(toggleChat(chatId));
+    };
+  };
+
+  const handleInputRef = (el: HTMLTextAreaElement) => {
+    inputElem.current = el;
+    focusInput();
+  };
+
+  const focusInput = () => {
+    inputElem.current?.focus();
+  };
+
+  useEffect(() => {
+    focusInput();
+  }, [windowState === 'open']);
+
+  if (!chat) return null;
+  const account = chat.account as unknown as AccountEntity;
+
+  const right = (285 * (idx + 1)) + 20;
+  const unreadCount = chat.unread;
+
+  const unreadIcon = (
+    <div className='mr-2 flex-none'>
+      <Counter count={unreadCount} />
+    </div>
+  );
+
+  const avatar = (
+    <HoverRefWrapper accountId={account.id}>
+      <Link to={`/@${account.acct}`}>
+        <Avatar account={account} size={18} />
+      </Link>
+    </HoverRefWrapper>
+  );
+
+  return (
+    <div className={`pane pane--${windowState}`} style={{ right: `${right}px` }}>
+      <div className='pane__header'>
+        {unreadCount > 0 ? unreadIcon : avatar }
+        <button className='pane__title' onClick={handleChatToggle(chat.id)}>
+          @{getAcct(account, displayFqn)}
+        </button>
+        <div className='pane__close'>
+          <IconButton src={require('@tabler/icons/icons/x.svg')} title='Close chat' onClick={handleChatClose(chat.id)} />
+        </div>
+      </div>
+      <div className='pane__content'>
+        <ChatBox
+          chatId={chat.id}
+          onSetInputRef={handleInputRef}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ChatWindow;