Add option bar for summary and full page

Summary part is working as usual. The full page is only rendering the raw HTML content now, will modify it in next step.

frontend/src/App.js

@@ -11,6 +11,7 @@ import React, { useState,
 function App() {
   const [searchQuery, setSearchQuery] = useState('');
   const [submittedQuery, setSubmittedQuery] = useState('');
+  const [contentType, setContentType] = useState('summary'); // 'summary' or 'full'
 
   const handleMapClick = (lat, lng) => {
     console.log(`Map clicked at latitude: ${lat}, longitude: ${lng}`);
@@ -32,10 +33,22 @@ function App() {
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
           />
+          <select 
+            value={contentType}
+            onChange={(e) => setContentType(e.target.value)}
+            style={{ margin: '0 10px' }}
+          >
+            <option value="summary">Summary</option>
+            <option value="full">Full Content</option>
+          </select>
           <button type="submit">Search</button>
         </form>
       </div>
-      <Map onMapClick={handleMapClick} searchQuery={submittedQuery} />
+      <Map 
+        onMapClick={handleMapClick} 
+        searchQuery={submittedQuery}
+        contentType={contentType}
+      />
     </div>
   );
 }

frontend/src/components/Map.js

@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useRef
-    // useCallback
+import React, { useState, useEffect, useRef,
+    useCallback
  } from 'react';
 import { MapContainer, TileLayer, 
         useMapEvents,
@@ -38,7 +38,7 @@ const ResizeHandler = ({ trigger }) => {
     }, [trigger, map]);
     return null;
 };
-const Map = ( { onMapClick, searchQuery } ) => {
+const Map = ( { onMapClick, searchQuery, contentType } ) => {
     const [markerPosition, setMarkerPosition] = useState([0,0]);
     const [wikiContent, setWikiContent] = useState(null);
     const [panelSize, setPanelSize] = useState('half');
@@ -83,25 +83,36 @@ const Map = ( { onMapClick, searchQuery } ) => {
     }, []);
 
 
-    const fetchWiki = async (pageName) => {
+    const fetchWiki = useCallback(async (pageName) => {
         try{
-            const res = await fetch(`${BACKEND_URL}/wiki/${pageName}`);
+            const endpoint = contentType === 'summary' 
+                ? `${BACKEND_URL}/wiki/${pageName}`
+                : `${BACKEND_URL}/wiki/search/${pageName}`;
+
+            const res = await fetch(endpoint);
             const data = await res.json();
-            setWikiContent(data);
-            if (data && data.latitude && data.longitude){
-                setMarkerPosition([data.latitude, data.longitude]);
+
+            if (contentType === 'summary') {
+                setWikiContent(data);
+                if (data && data.latitude && data.longitude) {
+                  setMarkerPosition([data.latitude, data.longitude]);
+                }
+              } else {
+                setWikiContent({
+                  title: data.title,
+                  content: data.content
+                });
+              }
+            } catch (error) {
+              console.error("Error fetching Wikipedia content:", error);
             }
-        }
-        catch (error) {
-            console.error("Error fetching Wikipedia content:", error);
-        }
-      };
+          }, [contentType]);
     // const markerPosition = [21.2514, 81.6296];
     useEffect(() => {
         if (searchQuery) {
             fetchWiki(searchQuery);
         }
-    }, [searchQuery]);
+    }, [searchQuery, fetchWiki]);
 
     const togglePanel = () => {
         setPanelSize(prev => {

main.py

@@ -41,4 +41,24 @@ async def get_wiki_page(page_name: str):
             "longitude": coords.longitude if coords else None
         },
         status_code=200
-    )
+    )
+
+@app.get("/wiki/search/{full_page}")
+def search_wiki(full_page: str):
+    response = requests.get(f"https://en.wikipedia.org/wiki/{full_page}", timeout=10)
+    try:
+        if response.status_code != 200:
+            return JSONResponse(
+                content={"error": "Page not found"},
+                status_code=404
+            )
+    
+        return JSONResponse(
+            content={"title": full_page, "content": str(response.text)},
+            status_code=200
+        )
+    except Exception as e:
+        return JSONResponse(
+            content={"error": str(e), 'response': str(response)},
+            status_code=500
+        )