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>
This commit is contained in:
Eng Zer Jun
2023-10-14 13:39:23 +08:00
parent e5e5a42736
commit 0efc2277dd
3 changed files with 17 additions and 29 deletions

View File

@@ -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>
);
}