refactor: Chat to use Typescript

Author: yevhenorlov

…s/Sandbox/Editor/Workspace/Chat/index.js …/Sandbox/Editor/Workspace/Chat/index.tsxpackages/app/src/app/pages/Sandbox/Editor/Workspace/Chat/index.js renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/Chat/index.tsx packages/app/src/app/pages/Sandbox/Editor/Workspace/Chat/index.js renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/Chat/index.tsx

@@ -22,7 +22,7 @@ const Messages = styled.div`
   flex: 1;
 `;
 
-export const Chat = () => {
+export const Chat: React.FC = () => {
   const [value, setValue] = useState('');
   const [height, setHeight] = useState('');
   const { state, actions } = useOvermind();
@@ -34,7 +34,7 @@ export const Chat = () => {
   }
   useEffect(scrollDown);
 
-  const handleKeyDown = e => {
+  const handleKeyDown = (e: KeyboardEvent) => {
     if (e.keyCode === ENTER && !e.shiftKey) {
       e.preventDefault();
       e.stopPropagation();
@@ -47,7 +47,7 @@ export const Chat = () => {
     }
   };
 
-  const handleChange = e => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setValue(e.target.value);
   };
 

packages/common/src/types/index.ts

@@ -193,6 +193,8 @@ export type LiveUser = {
   avatarUrl: string;
 };
 
+export type ChatUserGetter = (id: string) => string;
+
 export type RoomInfo = {
   startTime: number;
   ownerIds: string[];
@@ -211,7 +213,8 @@ export type RoomInfo = {
     // We keep a separate map of user_id -> username for the case when
     // a user disconnects. We still need to keep track of the name.
     users: {
-      [id: string]: string;
+      [id: string]: string | ChatUserGetter;
+      get: ChatUserGetter;
     };
   };
 };