feat: use URL to load site information when editing

Author: ananyaa06

src/admin/AdminBody.tsx

@@ -19,9 +19,9 @@ export default function AdminBody(props: AdminBodyProps) {
     case 'list-sites':
       return <ListSites />;
     case 'create-site':
-      return <CreateEditSite />;
+      return <CreateEditSite mode='create' />;
     case 'new-edit-site':
-      return <CreateEditSite />;
+      return <CreateEditSite mode='edit' />;
     default:
       return <h1>Error</h1>;
   }

src/admin/CreateEditSite.tsx

@@ -33,7 +33,11 @@ interface BoundaryPoint {
   lng: string;
 }
 
-export default function CreateEditSite() {
+interface CreateEditSiteProps {
+  mode: 'create' | 'edit';
+}
+
+export default function CreateEditSite({ mode }: CreateEditSiteProps) {
   const [name, setName] = useState('');
   const [longitude, setLongitude] = useState('');
   const [latitude, setLatitude] = useState('');
@@ -130,6 +134,41 @@ export default function CreateEditSite() {
     return true;
   } 
 
+  useEffect(() => {
+    if (mode === 'edit') {
+      const urlParams = new URLSearchParams(window.location.search);
+      const siteParam = urlParams.get('site');
+      if (siteParam) {
+        try {
+          const siteData = JSON.parse(decodeURIComponent(siteParam));
+          setName(siteData.name);
+          setLatitude(siteData.latitude.toString());
+          setLongitude(siteData.longitude.toString());
+          setStatus(siteData.status);
+          setAddress(siteData.address);
+          setCells(siteData.cell_id.map((cellId: string) => ({
+            id: Date.now().toString() + cellId,
+            cellId: cellId
+          })));
+          if (siteData.color) {
+            setColorEnabled(true);
+            setColorValue(siteData.color);
+          }
+          if (siteData.boundary) {
+            setBoundaryEnabled(true);
+            setBoundaryPoints(siteData.boundary.map((point: [number, number]) => ({
+              id: Date.now().toString() + point.join(','),
+              lat: point[0].toString(),
+              lng: point[1].toString()
+            })));
+          }
+        } catch (error) {
+          console.error('Failed to parse site data from URL:', error);
+        }
+      }
+    }
+  }, [mode]);
+
   return (
     <Container maxWidth="md" sx={{ mt: 4, mb: 4 }}>
       <Paper elevation={3} sx={{ p: 3 }}>

src/admin/ListSites.tsx

@@ -46,7 +46,11 @@ export default function ListSites() {
   const [sites, setSites] = useState<Site[]>([]);
   const handleEdit = (siteName: string) => {
     console.log(`Edit site with ID: ${siteName}`);
-    window.open('/admin/new-edit-site', '_self');
+    const site = sites.find(s => s.name === siteName);
+    if (site) {
+      const siteData = encodeURIComponent(JSON.stringify(site));
+      window.open(`/admin/new-edit-site?site=${siteData}`, '_self');
+    }
   };
 
   const handleDelete = (siteName: string) => {