diff --git a/dmwt_session10/src/components/AddFruit.js b/dmwt_session10/src/components/AddFruit.js
index 4294ab23b6ddf2a877338d162f3fcdcb72c9e3aa..9b94cd8a519989df8db375a70b2d34ee2a8aa30f 100644
--- a/dmwt_session10/src/components/AddFruit.js
+++ b/dmwt_session10/src/components/AddFruit.js
@@ -1,90 +1,90 @@
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;
diff --git a/dmwt_session10/src/components/FruitList.js b/dmwt_session10/src/components/FruitList.js
index 903f372e40610b37d28709ec9484df932f26cc9a..d9a4f22535a7f9abfbdbfd05042fd3226b28d899 100644
--- a/dmwt_session10/src/components/FruitList.js
+++ b/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;
diff --git a/dmwt_session10/src/pages/API/add-fruit.js b/dmwt_session10/src/pages/API/add-fruit.js
index 92c3483ca7af141cc8fde6a8b7e510d4b7680037..2fd78ff388484c58e9ba2d79e08cd7a10afa6629 100644
--- a/dmwt_session10/src/pages/API/add-fruit.js
+++ b/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 });
}
}
diff --git a/dmwt_session10/src/pages/API/fruit-table.js b/dmwt_session10/src/pages/API/fruit-table.js
index b676f4f81946f8d2f953ab05a6fad56f13dd4cf3..3ac6c9c1e99f1df2028cc7c7407d8e725660cd2c 100644
--- a/dmwt_session10/src/pages/API/fruit-table.js
+++ b/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 });
}
}