Merge pull request #28 from 2308-Bread/feat/api_integration

Feat/api integration

src/apiCalls.tsx

@@ -0,0 +1,12 @@
+import { ApiResponse } from './apiTypes';
+
+export const fetchBreadsForCountry = (countryName: string): Promise<ApiResponse> => {
+    return fetch(`https://rails-bread-face5cd9a02c.herokuapp.com/api/v1/countries/${countryName}`)
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return response.json();
+      })
+      .catch(error => console.error("There was a problem with the fetch operation:", error));
+  };

src/apiTypes.tsx

@@ -0,0 +1,34 @@
+// Define a structure for the attributes of bread and country
+export interface BreadAttributes {
+    name: string;
+    description: string;
+    recipe: string;
+}
+
+export interface CountryAttributes {
+    name: string;
+    description: string;
+}
+
+  // Define the main data structure for both bread and country
+export interface BreadData {
+    id: string;
+    type: string;
+    attributes: BreadAttributes;
+}
+
+export interface CountryData {
+    id: string;
+    type: string;
+    attributes: CountryAttributes;
+  }
+
+  // Define the top-level structure of the API response
+export interface ApiResponse {
+    country: {
+      data: CountryData;
+    };
+    breads: {
+      data: BreadData[];
+    };
+}

src/components/App/App.tsx

@@ -3,7 +3,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Navbar from '../Navbar/Navbar';
 import Main from '../Main/Main';
 import BreadList from '../BreadList/BreadList';
-import BreadDetail from '../BreadDetail/BreadDetail';
+// import BreadDetail from '../BreadDetail/BreadDetail';
 import './App.css';
 import 'leaflet/dist/leaflet.css';
 
@@ -15,7 +15,7 @@ function App() {
         <Routes>
           <Route path="/" element={<Main />} />
           <Route path="/breads" element={<BreadList />} />
-          <Route path="/breads/:id" element={<BreadDetail />} />
+          <Route path="/breads/:id" element={<BreadList />} />
         </Routes>
       </div>
     </BrowserRouter>

src/components/BreadList/BreadList.tsx

@@ -1,11 +1,41 @@
-import React from 'react';
+// BreadList.tsx
+import React, { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { fetchBreadsForCountry } from '../../apiCalls';
 import './BreadList.css'; 
+import { BreadData, CountryData, ApiResponse } from '../../apiTypes';
 
 const BreadList = () => {
+  const navigate = useNavigate();
+  const { id: countryName } = useParams();
+  const [breads, setBreads] = useState<BreadData[]>([]);
+  const [country, setCountry] = useState<CountryData | null>(null);
+
+  useEffect(() => {
+    if (countryName) {
+      fetchBreadsForCountry(countryName)
+        .then((data: ApiResponse) => {
+          setCountry(data.country.data);
+          setBreads(data.breads.data);
+        })
+        .catch(error => {
+          console.error("Fetching error:", error);
+          navigate('/');
+        });
+    }
+  }, [countryName, navigate]);
+
+  if (!country) return <div>Loading...</div>;
 
   return (
     <div className="breadList">
-
+      <h2>Breads from {country.attributes.name}</h2>
+      <p>{country.attributes.description}</p>
+      <ul>
+        {breads.map(bread => (
+          <li key={bread.id}>{bread.attributes.name}</li>
+        ))}
+      </ul>
     </div>
   );
 };

src/components/Main/Main.tsx

@@ -3,6 +3,7 @@ import './Main.css';
 import MapComponent from '../Map/Map';
 
 const Main = () => {
+
   return (
     <div className="main">
       <div className="map-container">
@@ -12,4 +13,4 @@ const Main = () => {
   );
 };
 
-export default Main;
+export default Main;

src/components/Map/Map.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { MapContainer, TileLayer, useMap } from 'react-leaflet';
 import L from 'leaflet';
 import countriesGeoJson from '../../data/countries.json';
+import { useNavigate } from 'react-router-dom';
 import './Map.css';
 
 const MapComponent = () => {
@@ -19,6 +20,7 @@ const MapComponent = () => {
 
 const GeoJSONLayer = () => {
   const map = useMap();
+  const navigate = useNavigate();
 
   useEffect(() => {
     const geoJsonLayer = L.geoJSON(countriesGeoJson as any, {
@@ -30,46 +32,18 @@ const GeoJSONLayer = () => {
         fillOpacity: 0.5
       }),
       onEachFeature: (feature, layer) => {
-
-        layer.on({
-          mouseover: (e) => {
-            var layer = e.target;
-            layer.setStyle({
-              fillColor: "rgba(62, 109, 78, 0.5)",
-              weight: 3,
-              opacity: 1,
-              color: '#3e6d4e',
-              dashArray: '3',
-              fillOpacity: 0.7
-            });
-          },
-          mouseout: (e) => {
-            var layer = e.target;
-            geoJsonLayer.resetStyle(layer);
-          }
+        layer.on('click', () => {
+          const countryName = feature.properties.name;
+          navigate(`/breads/${countryName}`);
         });
-
-        if (feature.properties && feature.properties.name) {
-          if (layer instanceof L.Polygon || layer instanceof L.Polyline) {
-            const center = layer.getBounds().getCenter();
-            const marker = L.marker(center, {
-              icon: new L.DivIcon({
-                className: 'country-label',
-                html: `<div>${feature.properties.name}</div>`,
-                iconSize: L.point(100, 40),
-                iconAnchor: [40, 20]
-              })
-            });
-            marker.addTo(map)
-          }
-        }
       },
-    })
+    });
+
 
-    geoJsonLayer.addTo(map)
-  }, [map])
+    geoJsonLayer.addTo(map);
+  }, [map, navigate]);
 
   return null;
 }
 
-export default MapComponent
+export default MapComponent;

src/data/countries.json

@@ -3,7 +3,7 @@
     "features": [
       {
         "type": "Feature",
-        "id": "BRA",
+        "id": "Brazil",
         "properties": {
           "name": "Brazil"
         },
@@ -18,7 +18,7 @@
       },
       {
         "type": "Feature",
-        "id": "FRA",
+        "id": "France",
         "properties": {
           "name": "France"
         },
@@ -40,7 +40,7 @@
       },
       {
         "type": "Feature",
-        "id": "JPN",
+        "id": "Japan",
         "properties": {
           "name": "Japan"
         },
@@ -51,7 +51,7 @@
       },
       {
         "type": "Feature",
-        "id": "SCT",
+        "id": "Scotland",
         "properties": {
           "name": "Scotland"
         },
@@ -95,7 +95,7 @@
       },
       {
         "type": "Feature",
-        "id": "IND",
+        "id": "India",
         "properties": {
           "name": "India"
         },
@@ -107,7 +107,7 @@
       },
       {
         "type": "Feature",
-        "id": "ITA",
+        "id": "Italy",
         "properties": {
           "name": "Italy"
         },