From 3cc4cf2593b40f71be90fd793cb5e13933aff2b3 Mon Sep 17 00:00:00 2001
From: Tobias Berger <14962962+Toby222@users.noreply.github.com>
Date: Fri, 4 Feb 2022 11:55:18 +0000
Subject: [PATCH] Memoize

---
 src/components/Author.tsx  |  8 ++++----
 src/components/Connect.tsx |  7 ++++---
 src/components/UserBar.tsx |  7 +++++--
 src/pages/index.tsx        | 10 ++++++++--
 4 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/components/Author.tsx b/src/components/Author.tsx
index 6e5e0d9..86fd39a 100644
--- a/src/components/Author.tsx
+++ b/src/components/Author.tsx
@@ -1,14 +1,14 @@
-import { FunctionComponent } from "react";
+import React from "react";
 
 type AuthorComponentProps = {
   authorId: string;
   authorNickname: string;
 };
 
-const AuthorComponent: FunctionComponent<AuthorComponentProps> = ({
+const AuthorComponent = React.memo(function Author({
   authorId,
   authorNickname,
-}) => {
+}: AuthorComponentProps) {
   return (
     <span
       className={
@@ -19,6 +19,6 @@ const AuthorComponent: FunctionComponent<AuthorComponentProps> = ({
       {authorNickname}
     </span>
   );
-};
+});
 
 export default AuthorComponent;
diff --git a/src/components/Connect.tsx b/src/components/Connect.tsx
index cde4b6e..01290ef 100644
--- a/src/components/Connect.tsx
+++ b/src/components/Connect.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { ReadyState as WebSocketReadyState } from "react-use-websocket";
 
 export type ConnectionOptions = {
@@ -11,7 +11,7 @@ export type ConnectComponentProps = {
   webSocketReadyState: WebSocketReadyState;
 };
 
-export default function Connect({
+const Connect = React.memo(function Connect({
   tryConnect,
   webSocketReadyState,
 }: ConnectComponentProps): JSX.Element {
@@ -56,4 +56,5 @@ export default function Connect({
       </button>
     </>
   );
-}
+});
+export default Connect;
diff --git a/src/components/UserBar.tsx b/src/components/UserBar.tsx
index df1524b..7b7afcf 100644
--- a/src/components/UserBar.tsx
+++ b/src/components/UserBar.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { ConnectedUser } from "src/lib/ServerMessage";
 
 export type UserBarProps = {
@@ -6,7 +7,7 @@ export type UserBarProps = {
   getName(id: string): string;
 };
 
-export default function UserBar({
+const UserBar = React.memo(function UserBar({
   connectedUsers,
   currentlyTyping,
   getName,
@@ -31,4 +32,6 @@ export default function UserBar({
       </ol>
     </section>
   );
-}
+});
+
+export default UserBar;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 5e96812..227df40 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -213,17 +213,23 @@ export default function Index(): JSX.Element {
           <></>
         ) : (
           <>
-            Your ID: <span style={{ fontWeight: "bold" }}>{authorId}</span>
+            Your name:{" "}
+            <span title={authorId} style={{ fontWeight: "bold" }}>
+              {getName(authorId)}
+            </span>
           </>
-        )}{" "}
+        )}
+        <br />
         <Connect
           tryConnect={tryConnect}
           webSocketReadyState={webSocket.readyState}
         />
+        {/*
         <span>Ready state: </span>
         <span style={{ fontWeight: "bold" }}>
           {WebSocketReadyState[webSocket.readyState]} ({webSocket.readyState})
         </span>
+        */}
       </header>
       <div id="container">
         <section id="message-area">