From 4c6be210a3e6cca77369c133cde9d47b79ebbb84 Mon Sep 17 00:00:00 2001
From: Titouan Rigoudy <titouan.rigoudy@gmail.com>
Date: Fri, 5 Nov 2021 19:16:09 +0100
Subject: [PATCH] Handle user not found scenario.

---
 src/modules/user/UserDetails.tsx | 44 ++++++++++++--------------------
 src/modules/user/UsersPane.tsx   | 24 ++++++++++++++---
 2 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/src/modules/user/UserDetails.tsx b/src/modules/user/UserDetails.tsx
index c55cb2a..c05a077 100644
--- a/src/modules/user/UserDetails.tsx
+++ b/src/modules/user/UserDetails.tsx
@@ -3,34 +3,24 @@ import { FC } from "react";
 import { UserState } from "modules/user/slice";
 
 interface Props {
-  user?: UserState;
+  user: UserState;
 }
 
-const UserDetails: FC<Props> = ({ user }) => {
-  if (user === undefined) {
-    return (
-      <div className="flex h-full justify-center items-center">
-        <h3>Select a user</h3>
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      Name: {user.name}
-      <br />
-      Status: {user.status}
-      <br />
-      Average speed: {user.averageSpeed}
-      <br /># Downloads: {user.numDownloads}
-      <br /># Files: {user.numFiles}
-      <br /># Folders: {user.numFolders}
-      <br /># Free slots: {user.numFreeSlots}
-      <br />
-      Country: {user.country}
-      <br />
-    </div>
-  );
-};
+const UserDetails: FC<Props> = ({ user }) => (
+  <div>
+    Name: {user.name}
+    <br />
+    Status: {user.status}
+    <br />
+    Average speed: {user.averageSpeed}
+    <br /># Downloads: {user.numDownloads}
+    <br /># Files: {user.numFiles}
+    <br /># Folders: {user.numFolders}
+    <br /># Free slots: {user.numFreeSlots}
+    <br />
+    Country: {user.country}
+    <br />
+  </div>
+);
 
 export default UserDetails;
diff --git a/src/modules/user/UsersPane.tsx b/src/modules/user/UsersPane.tsx
index e15312c..ebbf94a 100644
--- a/src/modules/user/UsersPane.tsx
+++ b/src/modules/user/UsersPane.tsx
@@ -16,13 +16,29 @@ interface UrlParams {
   userId: string;
 }
 
+interface BannerProps {
+  title: string;
+}
+
+const UserInfoBanner: FC<BannerProps> = ({ title }) => {
+  return (
+    <div className="flex h-full justify-center items-center">
+      <h3>{title}</h3>
+    </div>
+  );
+};
+
 const UserInfoPane: FC<Props> = ({ users }) => {
   const { userId } = useParams<UrlParams>();
 
-  let user;
-  if (userId !== undefined) {
-    const name = decode(userId);
-    user = users[name];
+  if (userId === undefined) {
+    return <UserInfoBanner title="Select a user" />;
+  }
+
+  const name = decode(userId);
+  const user = users[name];
+  if (user === undefined) {
+    return <UserInfoBanner title={`User ${name} not found`} />;
   }
 
   return <UserDetails user={user} />;