From 0efc2277dda2c1270366d44e7c79bc48c403b31d Mon Sep 17 00:00:00 2001
From: Eng Zer Jun <engzerjun@gmail.com>
Date: Sat, 14 Oct 2023 13:39:23 +0800
Subject: [PATCH] refactor(frontend): simplify JSX conditional rendering

JSX conditional rendering can be simplified to use the logical AND
operator (&&) [1] instead of ternary operator (? :) if we want to render
something only when the conditon is true, and nothing otherwise.

[1]: https://react.dev/learn/conditional-rendering#logical-and-operator-

Signed-off-by: Eng Zer Jun <engzerjun@gmail.com>
---
 frontend/src/Navigation.tsx                   | 32 +++++++------------
 frontend/src/conversation/Conversation.tsx    | 10 ++----
 .../src/conversation/ConversationTile.tsx     |  4 +--
 3 files changed, 17 insertions(+), 29 deletions(-)

diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index e236b8a3..f9fea0f2 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -165,11 +165,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   */
 
   useEffect(() => {
-    if (isMobile) {
-      setNavOpen(false);
-      return;
-    }
-    setNavOpen(true);
+    setNavOpen(!isMobile);
   }, [isMobile]);
 
   return (
@@ -232,19 +228,15 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           <p className="my-auto text-eerie-black">New Chat</p>
         </NavLink>
         <div className="conversations-container max-h-[25rem] overflow-y-auto">
-          {conversations
-            ? conversations.map((conversation) => (
-                <ConversationTile
-                  key={conversation.id}
-                  conversation={conversation}
-                  selectConversation={(id) => handleConversationClick(id)}
-                  onDeleteConversation={(id) => handleDeleteConversation(id)}
-                  onSave={(conversation) =>
-                    updateConversationName(conversation)
-                  }
-                />
-              ))
-            : null}
+          {conversations?.map((conversation) => (
+            <ConversationTile
+              key={conversation.id}
+              conversation={conversation}
+              selectConversation={(id) => handleConversationClick(id)}
+              onDeleteConversation={(id) => handleDeleteConversation(id)}
+              onSave={(conversation) => updateConversationName(conversation)}
+            />
+          ))}
         </div>
 
         <div className="flex-grow border-b-2 border-gray-100"></div>
@@ -289,7 +281,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                           <p className="ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3">
                             {doc.name} {doc.version}
                           </p>
-                          {doc.location === 'local' ? (
+                          {doc.location === 'local' && (
                             <img
                               src={Exit}
                               alt="Exit"
@@ -300,7 +292,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                                 handleDeleteClick(index, doc);
                               }}
                             />
-                          ) : null}
+                          )}
                         </div>
                       );
                     }
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 87a5ebb7..503c4d56 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -39,11 +39,7 @@ export default function Conversation() {
   useEffect(() => {
     const observerCallback: IntersectionObserverCallback = (entries) => {
       entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          setHasScrolledToLast(true);
-        } else {
-          setHasScrolledToLast(false);
-        }
+        setHasScrolledToLast(entry.isIntersecting);
       });
     };
 
@@ -121,7 +117,7 @@ export default function Conversation() {
 
   return (
     <div className="flex flex-col justify-center p-4 md:flex-row">
-      {queries.length > 0 && !hasScrolledToLast ? (
+      {queries.length > 0 && !hasScrolledToLast && (
         <button
           onClick={scrollIntoView}
           aria-label="scroll to bottom"
@@ -133,7 +129,7 @@ export default function Conversation() {
             className="h4- w-4 opacity-50 md:h-5 md:w-5"
           />
         </button>
-      ) : null}
+      )}
 
       {queries.length > 0 && (
         <div className="mt-20 flex flex-col transition-all md:w-3/4">
diff --git a/frontend/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx
index 592c52b2..5799f449 100644
--- a/frontend/src/conversation/ConversationTile.tsx
+++ b/frontend/src/conversation/ConversationTile.tsx
@@ -92,7 +92,7 @@ export default function ConversationTile({
           </p>
         )}
       </div>
-      {conversationId === conversation.id ? (
+      {conversationId === conversation.id && (
         <div className="flex">
           <img
             src={isEdit ? CheckMark : Edit}
@@ -122,7 +122,7 @@ export default function ConversationTile({
             }}
           />
         </div>
-      ) : null}
+      )}
     </div>
   );
 }