changeds

dmwt_session10/src/components/AddFruit.js

 import React, { useState } from 'react';
 
 const AddFruit = () => {
-  const [germanName, setGermanName] = useState('');
-  const [latinName, setLatinName] = useState('');
-  const [color, setColor] = useState('');
-  const [origin, setOrigin] = useState('');
-  const [calories, setCalories] = useState('');
+    const [germanName, setGermanName] = useState('');
+    const [latinName, setLatinName] = useState('');
+    const [color, setColor] = useState('');
+    const [origin, setOrigin] = useState('');
+    const [calories, setCalories] = useState('');
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+    const handleSubmit = async (e) => {
+        e.preventDefault();
 
-    const newFruit = {
-      germanName,
-      latinName,
-      color,
-      origin,
-      calories,
-    };
+        const newFruit = {
+            germanName,
+            latinName,
+            color,
+            origin,
+            calories,
+        };
 
-    const response = await fetch('/api/add-fruit', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(newFruit),
-    });
+        const response = await fetch('/api/add-fruit', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(newFruit),
+        });
 
-    if (!response.ok) {
-      console.error('Failed to add fruit');
-      return;
-    }
+        if (!response.ok) {
+            console.error('Failed to add fruit');
+            return;
+        }
 
-    const data = await response.json();
-    console.log(JSON.stringify(data));
-  };
+        const data = await response.json();
+        console.log(JSON.stringify(data));
+    };
 
-  return (
-    <form onSubmit={handleSubmit}>
-      <div>
-        <label htmlFor="germanName">German Name</label>
-        <input
-          id="germanName"
-          type="text"
-          value={germanName}
-          onChange={(e) => setGermanName(e.target.value)}
-        />
-      </div>
-      <div>
-        <label htmlFor="latinName">Latin Name</label>
-        <input
-          id="latinName"
-          type="text"
-          value={latinName}
-          onChange={(e) => setLatinName(e.target.value)}
-        />
-      </div>
-      <div>
-        <label htmlFor="color">Color</label>
-        <input
-          id="color"
-          type="text"
-          value={color}
-          onChange={(e) => setColor(e.target.value)}
-        />
-      </div>
-      <div>
-        <label htmlFor="origin">Origin</label>
-        <input
-          id="origin"
-          type="text"
-          value={origin}
-          onChange={(e) => setOrigin(e.target.value)}
-        />
-      </div>
-      <div>
-        <label htmlFor="calories">Calories</label>
-        <input
-          id="calories"
-          type="text"
-          value={calories}
-          onChange={(e) => setCalories(e.target.value)}
-        />
-      </div>
-      <button type="submit">Submit</button>
-    </form>
-  );
+    return (
+        <form onSubmit={handleSubmit}>
+            <div>
+                <label htmlFor="germanName">Frucht</label>
+                <input
+                    id="germanName"
+                    type="text"
+                    value={germanName}
+                    onChange={(e) => setGermanName(e.target.value)}
+                />
+            </div>
+            <div>
+                <label htmlFor="latinName">Lateinischer Name</label>
+                <input
+                    id="latinName"
+                    type="text"
+                    value={latinName}
+                    onChange={(e) => setLatinName(e.target.value)}
+                />
+            </div>
+            <div>
+                <label htmlFor="color">Farbe</label>
+                <input
+                    id="color"
+                    type="text"
+                    value={color}
+                    onChange={(e) => setColor(e.target.value)}
+                />
+            </div>
+            <div>
+                <label htmlFor="origin">Herkunft</label>
+                <input
+                    id="origin"
+                    type="text"
+                    value={origin}
+                    onChange={(e) => setOrigin(e.target.value)}
+                />
+            </div>
+            <div>
+                <label htmlFor="calories">Kalorien pro 100g</label>
+                <input
+                    id="calories"
+                    type="text"
+                    value={calories}
+                    onChange={(e) => setCalories(e.target.value)}
+                />
+            </div>
+            <button type="submit">Submit</button>
+        </form>
+    );
 };
 
 export default AddFruit;

dmwt_session10/src/components/FruitList.js

@@ -4,32 +4,32 @@ import useSWR from 'swr';
 const fetcher = url => fetch(url).then(res => res.json());
 
 const FruitList = () => {
-  const { data: fruits, error } = useSWR('/api/list-fruits', fetcher, {
-    revalidateOnFocus: false,
-    revalidateOnReconnect: false,
-  });
+    const { data: fruits, error } = useSWR('/api/list-fruits', fetcher, {
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false,
+    });
 
-  if (error) {
-    return <p>Failed to fetch</p>;
-  }
+    if (error) {
+        return <p>Failed to fetch</p>;
+    }
 
-  if (!fruits) {
-    return <p>Loading fruits...</p>;
-  }
+    if (!fruits) {
+        return <p>Loading fruits...</p>;
+    }
 
-  return (
-    <ul>
-      {fruits.length > 0 ? (
-        fruits.map((fruit, index) => (
-          <li key={index}>
-            {fruit['Deutscher Name']} ({fruit['Lateinischer Name']}), {fruit.Farbe}, {fruit.Herkunft}, {fruit.Kalorien} kcal
-          </li>
-        ))
-      ) : (
-        <li>No fruits available</li>
-      )}
-    </ul>
-  );
+    return (
+        <ul>
+            {fruits.length > 0 ? (
+                fruits.map((fruit, index) => (
+                    <li key={index}>
+                        Frucht: {fruit['German Name']}, Lateinischer Name: ({fruit['Latin Name']}), Farbe: {fruit.Color}, Herkunft: {fruit.Origin}, Kalorien pro 100g: {fruit.Calories}
+                    </li>
+                ))
+            ) : (
+                <li>No fruits available</li>
+            )}
+        </ul>
+    );
 };
 
 export default FruitList;

dmwt_session10/src/pages/API/add-fruit.js

@@ -2,21 +2,21 @@ import { sql } from '@vercel/postgres';
 
 export default async function handler(request, response) {
     try {
-      const { germanName, latinName, color, origin, calories } = request.body;
+        const { germanName, latinName, color, origin, calories } = request.body;
 
-      if (!germanName || !latinName || !color || !origin || !calories) {
-        return response.status(400).json({ error: 'All fields are required' });
-      }
+        if (!germanName || !latinName || !color || !origin || !calories) {
+            return response.status(400).json({ error: 'All fields are required' });
+        }
 
-      await sql`
-        INSERT INTO obst ("Deutscher Name", "Lateinischer Name", Farbe, Herkunft, Kalorien)
-        VALUES (${germanName}, ${latinName}, ${color}, ${origin}, ${calories});
-      `;
+        await sql`
+            INSERT INTO fruits ("German Name", "Latin Name", Color, Origin, Calories)
+            VALUES (${germanName}, ${latinName}, ${color}, ${origin}, ${calories});
+        `;
 
-      const { rows: fruits } = await sql`SELECT * FROM obst;`;
-      return response.status(200).json(fruits); // Ensure you return the rows
+        const { rows: fruits } = await sql`SELECT * FROM fruits;`;
+        return response.status(200).json(fruits);
     } catch (error) {
-      console.error('Error during request processing:', error);
-      return response.status(500).json({ error: error.message });
+        console.error('Error during request processing:', error);
+        return response.status(500).json({ error: error.message });
     }
 }

dmwt_session10/src/pages/API/fruit-table.js

@@ -2,18 +2,18 @@ import { sql } from '@vercel/postgres';
 
 export default async function handler(request, response) {
     try {
-      const result = await sql`
-        CREATE TABLE IF NOT EXISTS obst (
-          "Deutscher Name" varchar(50) NOT NULL,
-          "Lateinischer Name" varchar(50) NOT NULL,
-          Farbe varchar(50) NOT NULL,
-          Herkunft varchar(200) NOT NULL,
-          Kalorien int NOT NULL
-        );
-      `;
-      return response.status(200).json({ result });
+        const result = await sql`
+            CREATE TABLE IF NOT EXISTS fruits (
+                "German Name" varchar(50) NOT NULL,
+                "Latin Name" varchar(50) NOT NULL,
+                Color varchar(50) NOT NULL,
+                Origin varchar(200) NOT NULL,
+                Calories int NOT NULL
+            );
+        `;
+        return response.status(200).json({ result });
     } catch (error) {
-      console.error('Error creating table:', error);
-      return response.status(500).json({ error: error.message });
+        console.error('Error creating table:', error);
+        return response.status(500).json({ error: error.message });
     }
 }