Merge pull request #598 from Juneezee/simplify-jsx-conditional-rendering

refactor(frontend): simplify JSX conditional rendering
This commit is contained in:
Alex 2023-10-14 14:48:29 -05:00 committed by GitHub
commit 845ef42338
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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-sm 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>
);
}

View File

@ -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">

View File

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