refactord NavbarActions

Author: i30101

frontend/components/listings/detail/ListingDetail.tsx

@@ -56,10 +56,8 @@ export const ListingDetail = ({ listing, initialIsFavorited }: Props) => {
     toggleFavoriteMutation.mutate(!isFavorited);
   };
 
-  const subletCoords =
-    listingType === "sublet" ? listing.additional_data : null;
-  const hasLocation =
-    subletCoords?.latitude != null && subletCoords?.longitude != null;
+  const subletCoords = listingType === "sublet" ? listing.additional_data : null;
+  const hasLocation = subletCoords?.latitude != null && subletCoords?.longitude != null;
 
   return (
     <div className="mx-auto flex w-full max-w-[96rem] flex-col p-8 px-4 sm:px-12">
@@ -94,13 +92,11 @@ export const ListingDetail = ({ listing, initialIsFavorited }: Props) => {
               <div>
                 <h2 className="text-lg font-semibold">{"Where you'll be living"}</h2>
                 <p className="text-sm text-gray-500">
-                  Approximate location shown. The exact location will be shared once you connect with the owner.
+                  Approximate location shown. The exact location will be shared once you connect
+                  with the owner.
                 </p>
-                </div>
-              <SubletMap
-                latitude={subletCoords.latitude!}
-                longitude={subletCoords.longitude!}
-              />
+              </div>
+              <SubletMap latitude={subletCoords.latitude!} longitude={subletCoords.longitude!} />
             </div>
           )}
           <ListingActions

frontend/components/listings/detail/SubletMap.tsx

@@ -8,9 +8,8 @@ interface Props {
 }
 
 const LazyMap = dynamic(
-  () =>
-    import("@/components/listings/detail/SubletMapContent").then((m) => m.SubletMapContent),
-  { ssr: false },
+  () => import("@/components/listings/detail/SubletMapContent").then((m) => m.SubletMapContent),
+  { ssr: false }
 );
 
 export const SubletMap = ({ latitude, longitude }: Props) => {

frontend/components/navbar/Navbar.tsx

@@ -46,15 +46,12 @@ export const Navbar = () => {
               </div>
             )}
 
-            {createNewConfig && (
-              <NavbarActions
-                createNewText={createNewConfig.text}
-                createNewHref={createNewConfig.href}
-                mobileShowHamburger={showListingsTabs}
-                isMobileMenuOpen={isMobileMenuOpen}
-                onToggleMobileMenu={toggleMobileMenu}
-              />
-            )}
+            <NavbarActions
+              createNewConfig={createNewConfig}
+              mobileShowHamburger={showListingsTabs}
+              isMobileMenuOpen={isMobileMenuOpen}
+              onToggleMobileMenu={toggleMobileMenu}
+            />
           </div>
         </div>
       </div>

frontend/components/navbar/NavbarActions.tsx

@@ -6,16 +6,14 @@ import { Button } from "@/components/ui/button";
 import { UserProfileDropdown } from "./UserProfileDropdown";
 
 interface Props {
-  createNewText: string;
-  createNewHref: string;
+  createNewConfig: { text: string; href: string } | undefined;
   mobileShowHamburger: boolean;
   isMobileMenuOpen: boolean;
   onToggleMobileMenu: () => void;
 }
 
 export const NavbarActions = ({
-  createNewText,
-  createNewHref,
+  createNewConfig,
   mobileShowHamburger,
   isMobileMenuOpen,
   onToggleMobileMenu,
@@ -61,33 +59,33 @@ export const NavbarActions = ({
 
   return (
     <div className="flex items-center gap-2 sm:gap-3">
-      {/* desktop only new listing button */}
-      {
-        <Button
-          variant="outline"
-          className="border-primary text-primary hover:bg-primary hover:text-primary-foreground hidden gap-2 md:flex"
-          asChild
-        >
-          <Link href={createNewHref} aria-label={createNewText}>
-            <Plus className="h-4 w-4" />
-            <span>{createNewText}</span>
-          </Link>
-        </Button>
-      }
+      {createNewConfig && (
+        <>
+          {/* desktop only new listing button */}
+          <Button
+            variant="outline"
+            className="border-primary text-primary hover:bg-primary hover:text-primary-foreground hidden gap-2 md:flex"
+            asChild
+          >
+            <Link href={createNewConfig.href} aria-label={createNewConfig.text}>
+              <Plus className="h-4 w-4" />
+              <span>{createNewConfig.text}</span>
+            </Link>
+          </Button>
 
-      {/* mobile only new listing button (icon only) */}
-      {
-        <Button
-          variant="outline"
-          size="icon"
-          className="border-primary text-primary hover:bg-primary hover:text-primary-foreground md:hidden"
-          asChild
-        >
-          <Link href={createNewHref} aria-label={createNewText}>
-            <Plus className="h-4 w-4" />
-          </Link>
-        </Button>
-      }
+          {/* mobile only new listing button (icon only) */}
+          <Button
+            variant="outline"
+            size="icon"
+            className="border-primary text-primary hover:bg-primary hover:text-primary-foreground md:hidden"
+            asChild
+          >
+            <Link href={createNewConfig.href} aria-label={createNewConfig.text}>
+              <Plus className="h-4 w-4" />
+            </Link>
+          </Button>
+        </>
+      )}
 
       {/* notification bell */}
       <Button

frontend/lib/constants.ts

@@ -11,7 +11,6 @@ export const BASE_URL =
 
 export const API_BASE_URL =
   process.env.NODE_ENV === "production" ? "REPLACE WITH PROD API URL" : "http://backend:8000"; // can't be localhost because server fetch happens in container
-  
 
 export const PLATFORM_URL = process.env.PLATFORM_URL;
 export const CLIENT_ID = process.env.CLIENT_ID;