Change map placement and description and address comments

Author: Anthony Li

backend/market/models.py

@@ -1,10 +1,12 @@
 import hashlib
 import math
+import hmac
 
 from django.contrib.auth.models import AbstractUser
 from django.core.exceptions import ValidationError
 from django.core.validators import MinValueValidator
 from django.db import models
+from django.conf import settings
 from phonenumber_field.modelfields import PhoneNumberField
 
 
@@ -146,7 +148,11 @@ def _calculate_approximate_location(self, latitude, longitude):
 
         lat_str = f"{float(latitude):.9f}"
         lon_str = f"{float(longitude):.9f}"
-        seed = hashlib.md5(f"{lat_str}{lon_str}".encode()).hexdigest()
+        seed = hmac.new(
+            settings.SECRET_KEY.encode(),
+            f"{lat_str}{lon_str}".encode(),
+            hashlib.sha256,
+        ).hexdigest()
 
         offset_factor = int(seed[:8], 16) / 0xFFFFFFFF
 

backend/market/serializers.py

@@ -104,17 +104,26 @@ class SubletDataSerializer(ModelSerializer):
 
     class Meta:
         model = Sublet
-        fields = ["street_address", "beds", "baths", "start_date", "end_date",
-            "latitude", "longitude"]
+        fields = [
+            "street_address",
+            "beds",
+            "baths",
+            "start_date",
+            "end_date",
+            "latitude",
+            "longitude",
+        ]
 
     def get_latitude(self, obj):
-        if obj.approximate_location is not None:
-            return float(obj.approximate_location[0])
+        approx_lat, _ = obj.approximate_location
+        if approx_lat is not None:
+            return float(approx_lat)
         return None
 
     def get_longitude(self, obj):
-        if obj.approximate_location is not None:
-            return float(obj.approximate_location[1])
+        _, approx_lon = obj.approximate_location
+        if approx_lon is not None:
+            return float(approx_lon)
         return None
 
 # Unified serializer for all listing types (Items and Sublets); used for CRUD operations

docker-compose.yml

@@ -68,10 +68,7 @@ services:
       - penn-marketplace-frontend-pnpm-store:/app/.pnpm-store
     environment:
       - NODE_ENV=development
-      # Browser on your machine → API on published port
       - NEXT_PUBLIC_API_URL=http://localhost:8000
-      # Next server inside this container → Django service name
-      - API_BASE_URL=http://backend:8000
 
 volumes:
   penn-marketplace-postgres-data:

frontend/components/listings/detail/ListingDetail.tsx

@@ -89,21 +89,26 @@ export const ListingDetail = ({ listing, initialIsFavorited }: Props) => {
             {...listing.additional_data}
           />
           <UserCard user={listing.seller} label={listingOwnerLabel} />
-          <ListingActions
-            listingId={listing.id}
-            listingPrice={listing.price}
-            priceLabel={priceLabel}
-            listingOwnerLabel={listingOwnerLabel}
-          />
           {hasLocation && (
             <div className="space-y-3">
-              <h2 className="text-lg font-semibold">{"Where you'll be living"}</h2>
+              <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.
+                </p>
+                </div>
               <SubletMap
                 latitude={subletCoords.latitude!}
                 longitude={subletCoords.longitude!}
               />
             </div>
           )}
+          <ListingActions
+            listingId={listing.id}
+            listingPrice={listing.price}
+            priceLabel={priceLabel}
+            listingOwnerLabel={listingOwnerLabel}
+          />
         </div>
       </div>
     </div>

frontend/components/listings/detail/SubletMap.tsx

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

frontend/lib/constants.ts

@@ -9,15 +9,9 @@ import {
 export const BASE_URL =
   process.env.NODE_ENV === "production" ? "REPLACE WITH PROD BASE URL" : "http://localhost:3000";
 
-/**
- * Server-side fetches (RSC, Route Handlers, middleware).
- * - Local `pnpm dev`: default http://localhost:8000 (backend on host port).
- * - Docker frontend service: set API_BASE_URL=http://backend:8000 in compose.
- */
 export const API_BASE_URL =
-  process.env.NODE_ENV === "production"
-    ? process.env.NEXT_PUBLIC_API_URL ?? "REPLACE WITH PROD API URL"
-    : (process.env.API_BASE_URL ?? "http://localhost:8000");
+  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;

frontend/lib/types.ts

@@ -44,8 +44,8 @@ export type SubletAdditionalData = {
   baths: number;
   start_date: string;
   end_date: string;
-  latitude?: number;
-  longitude?: number;
+  latitude: number;
+  longitude: number;
 };
 
 // ------------------------------------------------------------