React – Ingatlan feladatsor

A feladat leírása, megoldása elérhető a GitHub oldalamon is.
A feladat sima javascript megoldása, fetch api használatával.

Feladat: egy ingatlankereskedés meglévő ingatlanjainak listázása, új ingatlan mentése, api-val. Van még a feladatban routing és formázás is.

A backend-et elég kitömöríteni, majd npm i, és a node index.js paranccsal indítható. A frontendhez írjuk be a szokásosnpm create vite@latest parancsot! A routing-hoz ne felejtsd el telepíteni a szükséges modult: npm install react-router-dom

main.jsx

Az app.jsx, app.css fájlokat töröltem az egyszerűség kedvéért. A boostrap-et itt, a main.jsx-ben importáltam.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import "./assets/bootstrap.min.css";
import "./assets/openpage.css";
import Main from "./components/Main";

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Main/>
  </StrictMode>,
)

import { StrictMode } from 'react'

import { createRoot } from 'react-dom/client'

import "./assets/bootstrap.min.css";

import "./assets/openpage.css";

import Main from "./components/Main";

createRoot(document.getElementById('root')).render(

<Main/>

</StrictMode>,

)

Kezdőlap – components/Main.jsx

Ebben a feladatban nincs külön navigációs menü, hanem ugyanarra az oldalra töltjük be a „főoldal” hivatkozásait. Tehát a Main.jsx-ben lesz a routing megoldva. Az „oldalak” tartalmát a Tartalom nevű komponensbe töltjük be.

import { BrowserRouter, Route, Routes, Link, Outlet } from "react-router-dom";
import Kinalat from "./Kinalat2";
import UjHirdetes from "./UjHirdetes";
import Admin from "./Admin";
import AdminPatch from "./AdminPatch";

export default function Main() {
    return (
        <BrowserRouter>
            <Routes>
                {/* Fő útvonal, ami a Layout komponenst rendereli */}
                <Route path="/" element={<Layout />}>
                    {/* Index route, ami alapértelmezettként a Container div-et jeleníti meg */}
                    <Route index element={<Fooldal />} />
                    <Route path="/offers" element={<Kinalat />} />
                    <Route path="/newad" element={<UjHirdetes />} />
                    <Route path="/admin" element={<Admin />} />
                    <Route path="/adminpatch" element={<AdminPatch />} />
                </Route>
            </Routes>
        </BrowserRouter>
    );
}

// Layout komponens, ami a közös elemeket (pl. a menüt) tartalmazza
function Layout() {
    return (
        <div>
            
            {/* Az aktuális komponens (Kinalat vagy UjHirdetes) ide kerül */}
            <Outlet />
        </div>
    );
}

// Komponens a Container div tartalmához
function Fooldal() {
    return (
        <div className="container">
                <div className="start w-100">
                    <h1 className="text-center pt-2 pt-lg-4">Á.L.B. Ingatlanügynöség</h1>
                    <div className="row">
                        <div className="col-12 col-sm-6 text-center">
                            <Link className="btn btn-primary" to="/offers">Nézze meg kínálatunkat!</Link>
                        </div>
                        <div className="col-12 col-sm-6 text-center">
                            <Link className="btn btn-primary" to="/newad">Hirdessen nálunk!</Link>
                            <Link className="btn btn-primary" to="/admin">Adminisztráció</Link>
                            <Link className="btn btn-primary" to="/adminpatch">Adminisztráció II.</Link>
                        </div>
                    </div>
                </div>
            </div>
    );
}

import { BrowserRouter, Route, Routes, Link, Outlet } from "react-router-dom";

import Kinalat from "./Kinalat2";

import UjHirdetes from "./UjHirdetes";

import Admin from "./Admin";

import AdminPatch from "./AdminPatch";

export default function Main() {

return (

{/* Fő útvonal, ami a Layout komponenst rendereli */}

{/* Index route, ami alapértelmezettként a Container div-et jeleníti meg */}

</Route>

</Routes>

</BrowserRouter>

);

}

// Layout komponens, ami a közös elemeket (pl. a menüt) tartalmazza

function Layout() {

return (

<div>

{/* Az aktuális komponens (Kinalat vagy UjHirdetes) ide kerül */}

</div>

);

}

// Komponens a Container div tartalmához

function Fooldal() {

return (

<h1 className="text-center pt-2 pt-lg-4">Á.L.B. Ingatlanügynöség</h1>

<Link className="btn btn-primary" to="/offers">Nézze meg kínálatunkat!</Link>

</div>

<Link className="btn btn-primary" to="/newad">Hirdessen nálunk!</Link>

<Link className="btn btn-primary" to="/admin">Adminisztráció</Link>

<Link className="btn btn-primary" to="/adminpatch">Adminisztráció II.</Link>

</div>

);

}

Ingatlanok adatainak lekérdezése – compponents/Kinalat.jsx

A feladatban megadott http://localhost:5000/api/ingatlan végpontról lekérjük az ingatlanok adatait. Az adataok megjelenítéséhez táblázatot használunk, amelyet bootstrap segítségével formázunk meg. Fetch segítségével lekérjük az api-tól az adatokat.

import { useEffect, useState } from "react";

export default function Kinalat() {
  const [kinalat, setKinalat] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch("http://localhost:5000/api/ingatlan");
        const data = await res.json();
        setKinalat(data);
      } catch (error) {
        console.error("Hiba történt:", error);
      }
    };

    fetchData();
  }, []);

  return (
    <>
      <h1 className="text-center text-body">Ajánlataink</h1>
      <div
        className="container"
        style={{
          boxShadow: "0px 2px 5px rgba(0, 0, 0, 0.3)",
        }}
      >
        <table class="table table-responsive">
          <thead class="table-success">
            <tr>
              <th className="align-middle text-center">Kategória</th>
              <th className="align-middle text-center">Leírás</th>
              <th className="align-middle text-center">Hírdetés dátuma</th>
              <th className="align-middle text-center">Tehermentes</th>
              <th className="align-middle text-center">Ár</th>
              <th className="align-middle text-center">Fénykép</th>
            </tr>
          </thead>
          <tbody>
            {kinalat.map((ingatlan) => (
              <tr  key={ingatlan.id}>
                <td className="align-middle text-center">
                  {ingatlan.kategoriaNev}
                </td>
                <td className="align-middle text-center">{ingatlan.leiras}</td>
                <td className="align-middle text-center">
                  {ingatlan.hirdetesDatuma}
                </td>
                <td className="align-middle text-center">
  {Number(ingatlan.tehermentes) === 0 ? (
    <span style={{ color: "red" }}>Nem</span>
  ) : (
    <span style={{ color: "green" }}>Igen</span>
  )}
</td>
                <td className="align-middle text-center">{ingatlan.ar}</td>
                <td className="align-middle text-center">
                  <img
                    style={{ maxHeight: "250px" }}
                    src={ingatlan.kepUrl}
                    ALT="Nincs kép"
                    title={ingatlan.kepUrl}
                    onError={(e) => {
                        e.target.src = "alap.png";;
                    }}
                  />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

import { useEffect, useState } from "react";

export default function Kinalat() {

const [kinalat, setKinalat] = useState([]);

useEffect(() => {

const fetchData = async () => {

try {

const res = await fetch("http://localhost:5000/api/ingatlan");

const data = await res.json();

setKinalat(data);

} catch (error) {

console.error("Hiba történt:", error);

}

};

fetchData();

}, []);

return (

<h1 className="text-center text-body">Ajánlataink</h1>

<div

className="container"

style={{

boxShadow: "0px 2px 5px rgba(0, 0, 0, 0.3)",

}}

<tr>

<th className="align-middle text-center">Kategória</th>

<th className="align-middle text-center">Leírás</th>

<th className="align-middle text-center">Hírdetés dátuma</th>

<th className="align-middle text-center">Tehermentes</th>

<th className="align-middle text-center">Fénykép</th>

</tr>

</thead>

<tbody>

{kinalat.map((ingatlan) => (

{ingatlan.kategoriaNev}

</td>

<td className="align-middle text-center">{ingatlan.leiras}</td>

{ingatlan.hirdetesDatuma}

</td>

{Number(ingatlan.tehermentes) === 0 ? (

) : (

)}

</td>

<td className="align-middle text-center">{ingatlan.ar}</td>

<img

style={{ maxHeight: "250px" }}

src={ingatlan.kepUrl}

ALT="Nincs kép"

title={ingatlan.kepUrl}

onError={(e) => {

e.target.src = "alap.png";;

}}

</td>

</tr>

))}

</tbody>

</table>

</div>

</>

);

}

Új ingatlan felvétele – UjHirdetes.jsx

A select-hez fel kell használni a http://localhost:5000/api/kategoriak végpontot, és megjeleníteni az adatbázisban található kategóriákat.
Az adatok felvételéhez kaptunk egy sablon űrlapot, ezt használjuk. Az űrlap adatainak felvételéhez a http://localhost:5000/api/ujingatlan végpontot használjuk, POST metódussal!

import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";

export default function UjHirdetes() {
  const [kategoriak, setKategoriak] = useState([]);
  const [error, setError] = useState(null);
  const navigate = useNavigate();
  const [formData, setFormData] = useState({
    kategoriaId: 0,
    leiras: "",
    hirdetesDatuma: getCurrentDate(),
    tehermentes: false,
    ar: 0,
    kepUrl: "",
  });

  useEffect(() => {
    const fetchKategoriak = async () => {
      try {
        setError(null);
        const res = await fetch("http://localhost:5000/api/kategoriak");
        if (!res.ok) {
          throw new Error(`Hálózati hiba: ${res.status} ${res.statusText}`);
        }
        const data = await res.json();
        setKategoriak(data);
        console.log(data);
      } catch (err) {
        setError(err);
      }
    };

    fetchKategoriak();
  }, []);

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;

    // szám típusoknál alakítsuk számmá
    const nextValue =
      type === "checkbox"
        ? checked
        : name === "ar" || name === "kategoriaId"
        ? Number(value)
        : value;

    setFormData((prevState) => ({
      ...prevState,
      [name]: nextValue,
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    //Validáció: ne lehessen üres adatokat beküldeni
    if (
      formData.kategoriaId === 0 ||
      formData.leiras.trim() === "" ||
      formData.ar <= 0
    ) {
      alert("Kérjük, töltse ki az összes kötelező mezőt!");
      return;
    }

    try {
      setError(null);

      const res = await fetch("http://localhost:5000/api/ujingatlan", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          kategoria: formData.kategoriaId,
          leiras: formData.leiras,
          hirdetesDatuma: formData.hirdetesDatuma,
          tehermentes: formData.tehermentes,
          ar: formData.ar,
          kepUrl: formData.kepUrl,
        }),
      });

      if (!res.ok) {
        // ha a backend hibát ad, próbáljuk kiolvasni a hibaüzenetet
        let details = "";
        try {
          const errData = await res.json();
          details =
            typeof errData === "string"
              ? errData
              : JSON.stringify(errData, null, 2);
        } catch {
          // ha nem json, hagyjuk üresen
        }
        throw new Error(
          `Küldési hiba: ${res.status} ${res.statusText}${
            details ? ` | ${details}` : ""
          }`
        );
      }

      // Ha van válasz JSON, és szükséges, itt fel tudod dolgozni:
      // const result = await res.json();

      console.log("Sikeresen elküldve");
      alert("Sikeresen elküldve!");
      navigate("/"); // Navigálás a főoldalra

      // űrlap alaphelyzetbe
      setFormData({
        kategoriaId: 0,
        leiras: "",
        hirdetesDatuma: getCurrentDate(),
        tehermentes: false,
        ar: 0,
        kepUrl: "",
      });
    } catch (err) {
      setError(err);
    }
  };

  // Függvény az aktuális dátum lekéréséhez YYYY-MM-DD formátumban
  function getCurrentDate() {
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, "0");
    const day = String(today.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  }

  return (
    <>
      <div className="container">
        <h1 className="text-center text-body">Új hirdetés</h1>
        <form onSubmit={handleSubmit}>
          <div className="row">
            <div className="offset-lg-3 offset-md-2 col-lg-6 col-md-8 col-12">
              <div className="mb-3">
                <label htmlFor="category" className="form-label">
                  Ingatlan kategóriája
                </label>
                <select
                  className="form-select"
                  name="kategoriaId"
                  value={formData.kategoriaId}
                  onChange={handleChange}
                >
                  <option value={0}>Kérem válasszon</option>
                  {kategoriak.length > 0 &&
                    kategoriak.map((kat) => (
                      <option key={kat.id} value={kat.id}>
                        {kat.nev}
                      </option>
                    ))}
                </select>
              </div>

              <div className="mb-3">
                <label htmlFor="date" className="form-label">
                  Hirdetés dátuma
                </label>
                <input
                  type="date"
                  className="form-control"
                  name="hirdetesDatuma"
                  value={formData.hirdetesDatuma}
                  onChange={handleChange}
                />
              </div>

              <div className="mb-3">
                <label htmlFor="description" className="form-label">
                  Ingatlan leírása
                </label>
                <textarea
                  className="form-control"
                  name="leiras"
                  rows="3"
                  value={formData.leiras}
                  onChange={handleChange}
                ></textarea>
              </div>

              <div className="form-check mb-3">
                <input
                  className="form-check-input"
                  type="checkbox"
                  name="tehermentes"
                  checked={formData.tehermentes}
                  onChange={handleChange}
                />
                <label className="form-check-label" htmlFor="creditFree">
                  Tehermentes ingatlan
                </label>
              </div>

              <div className="mb-3">
                <label htmlFor="price" className="form-label">
                  Ingatlan ára
                </label>
                <input
                  type="number"
                  className="form-control"
                  name="ar"
                  value={formData.ar}
                  onChange={handleChange}
                />
              </div>

              <div className="mb-3">
                <label htmlFor="pictureUrl" className="form-label">
                  Fénykép az ingatlanról
                </label>
                <input
                  type="url"
                  className="form-control"
                  name="kepUrl"
                  value={formData.kepUrl}
                  onChange={handleChange}
                />
              </div>

              <div className="mb-3 text-center">
                <button type="submit" className="btn btn-primary px-5">
                  Küldés
                </button>
              </div>

              {error && (
                <div
                  className="alert alert-danger alert-dismissible"
                  role="alert"
                >
                  <strong>Hiba:</strong> {error.message}
                  <button
                    type="button"
                    className="btn-close"
                    data-bs-dismiss="alert"
                    aria-label="Close"
                  ></button>
                </div>
              )}
            </div>
          </div>
        </form>
      </div>
    </>
  );
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

import { useState, useEffect } from "react";

import { useNavigate } from "react-router-dom";

export default function UjHirdetes() {

const [kategoriak, setKategoriak] = useState([]);

const [error, setError] = useState(null);

const navigate = useNavigate();

const [formData, setFormData] = useState({

kategoriaId: 0,

leiras: "",

hirdetesDatuma: getCurrentDate(),

tehermentes: false,

ar: 0,

kepUrl: "",

});

useEffect(() => {

const fetchKategoriak = async () => {

try {

setError(null);

const res = await fetch("http://localhost:5000/api/kategoriak");

if (!res.ok) {

throw new Error(`Hálózati hiba: ${res.status} ${res.statusText}`);

}

const data = await res.json();

setKategoriak(data);

console.log(data);

} catch (err) {

setError(err);

}

};

fetchKategoriak();

}, []);

const handleChange = (e) => {

const { name, value, type, checked } = e.target;

// szám típusoknál alakítsuk számmá

const nextValue =

type === "checkbox"

? checked

: name === "ar" || name === "kategoriaId"

? Number(value)

: value;

setFormData((prevState) => ({

...prevState,

[name]: nextValue,

}));

};

const handleSubmit = async (e) => {

e.preventDefault();

//Validáció: ne lehessen üres adatokat beküldeni

if (

formData.kategoriaId === 0 ||

formData.leiras.trim() === "" ||

formData.ar <= 0

) {

alert("Kérjük, töltse ki az összes kötelező mezőt!");

return;

}

try {

setError(null);

const res = await fetch("http://localhost:5000/api/ujingatlan", {

method: "POST",

headers: { "Content-Type": "application/json" },

body: JSON.stringify({

kategoria: formData.kategoriaId,

leiras: formData.leiras,

hirdetesDatuma: formData.hirdetesDatuma,

tehermentes: formData.tehermentes,

ar: formData.ar,

kepUrl: formData.kepUrl,

}),

});

if (!res.ok) {

// ha a backend hibát ad, próbáljuk kiolvasni a hibaüzenetet

let details = "";

try {

const errData = await res.json();

details =

typeof errData === "string"

? errData

: JSON.stringify(errData, null, 2);

} catch {

// ha nem json, hagyjuk üresen

}

throw new Error(

`Küldési hiba: ${res.status} ${res.statusText}${

details ? ` | ${details}` : ""

);

}

// Ha van válasz JSON, és szükséges, itt fel tudod dolgozni:

// const result = await res.json();

console.log("Sikeresen elküldve");

alert("Sikeresen elküldve!");

navigate("/"); // Navigálás a főoldalra

// űrlap alaphelyzetbe

setFormData({

kategoriaId: 0,

leiras: "",

hirdetesDatuma: getCurrentDate(),

tehermentes: false,

ar: 0,

kepUrl: "",

});

} catch (err) {

setError(err);

}

};

// Függvény az aktuális dátum lekéréséhez YYYY-MM-DD formátumban

function getCurrentDate() {

const today = new Date();

const year = today.getFullYear();

const month = String(today.getMonth() + 1).padStart(2, "0");

const day = String(today.getDate()).padStart(2, "0");

return `${year}-${month}-${day}`;

}

return (

<h1 className="text-center text-body">Új hirdetés</h1>

Ingatlan kategóriája

</label>

<select

className="form-select"

name="kategoriaId"

value={formData.kategoriaId}

onChange={handleChange}

<option value={0}>Kérem válasszon</option>

{kategoriak.length > 0 &&

kategoriak.map((kat) => (

{kat.nev}

</option>

))}

</select>

</div>

Hirdetés dátuma

</label>

<input

type="date"

className="form-control"

name="hirdetesDatuma"

value={formData.hirdetesDatuma}

onChange={handleChange}

</div>

Ingatlan leírása

</label>

<textarea

className="form-control"

name="leiras"

rows="3"

value={formData.leiras}

onChange={handleChange}

></textarea>

</div>

<input

className="form-check-input"

type="checkbox"

name="tehermentes"

checked={formData.tehermentes}

onChange={handleChange}

Tehermentes ingatlan

</label>

</div>

Ingatlan ára

</label>

<input

type="number"

className="form-control"

name="ar"

value={formData.ar}

onChange={handleChange}

</div>

Fénykép az ingatlanról

</label>

<input

type="url"

className="form-control"

name="kepUrl"

value={formData.kepUrl}

onChange={handleChange}

</div>

Küldés

</button>

</div>

{error && (

<div

className="alert alert-danger alert-dismissible"

role="alert"

<strong>Hiba:</strong> {error.message}

<button

type="button"

className="btn-close"

data-bs-dismiss="alert"

aria-label="Close"

></button>

</div>

)}

</div>

</form>

</div>

</>

);

}

Fapados admin felület. Bővítsük ki a weboldalt törlés, szerkesztés lehetőséggel is! Természetesen ezt célszerű védeni, de most erre a részre nem térek ki, csak a crud műveletekre!

A törléshez felhasználtam a Kínalat.jsx táblázatát, csak kiegészítettem egy törlés+szekresztés gombbal minden ingatlant. Az ingatlanokat az id-jük segítségével azonosítjuk be.
Hasonlóképpen az UjIngatlan-jsx-ből is felhasználhatjuk az űrlapot a szerkesztéshez.

import { useEffect, useState } from "react";

export default function Admin() {
  const [kinalat, setKinalat] = useState([]);
  const [kategoriak, setKategoriak] = useState([]);
  const [szerkesztes, setSzerkesztes] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const ingatlanValasz = await fetch("http://localhost:5000/api/ingatlan");
        const ingatlanAdatok = await ingatlanValasz.json();
        setKinalat(ingatlanAdatok);

        const kategoriakValasz = await fetch("http://localhost:5000/api/kategoriak");
        const kategoriakAdat = await kategoriakValasz.json();
        setKategoriak(kategoriakAdat);
      } catch (error) {
        console.error("Hiba történt:", error);
      }
    };

    fetchData();
  }, []);

  const torolIngatlan = async (id) => {
    if (!window.confirm("Biztosan törölni szeretnéd ezt az ingatlant?")) return;

    try {
      await fetch(`http://localhost:5000/api/ingatlan/${id}`, { method: "DELETE" });
      setKinalat(kinalat.filter((ingatlan) => ingatlan.id !== id));
    } catch (error) {
      console.error("Hiba történt a törlésnél:", error);
    }
  };

  const szerkesztIngatlan = (ingatlan) => {
    setSzerkesztes(ingatlan);
  };

  const handleSzerkesztesSubmit = async (event) => {
    event.preventDefault();

    try {
      await fetch(`http://localhost:5000/api/ingatlan/${szerkesztes.id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(szerkesztes),
      });

      setKinalat(kinalat.map((i) => (i.id === szerkesztes.id ? szerkesztes : i)));
      setSzerkesztes(null);
    } catch (error) {
      console.error("Hiba történt a frissítésnél:", error);
    }
  };

  return (
    <>
      <h1 className="text-center text-body">Ajánlataink</h1>
      <div
        className="container"
        style={{ boxShadow: "0px 2px 5px rgba(0, 0, 0, 0.3)" }}
      >
        <table className="table table-responsive">
          <thead className="table-success">
            <tr>
              <th className="align-middle text-center">Kategória</th>
              <th className="align-middle text-center">Leírás</th>
              <th className="align-middle text-center">Hirdetés dátuma</th>
              <th className="align-middle text-center">Tehermentes</th>
              <th className="align-middle text-center">Ár</th>
              <th className="align-middle text-center">Fénykép</th>
              <th className="align-middle text-center">Műveletek</th>
            </tr>
          </thead>
          <tbody>
            {kinalat.map((ingatlan) => (
              <tr key={ingatlan.id}>
                <td className="align-middle text-center">
                  {ingatlan.kategoriaNev}
                </td>
                <td className="align-middle text-center">{ingatlan.leiras}</td>
                <td className="align-middle text-center">
                  {ingatlan.hirdetesDatuma}
                </td>
                <td className="align-middle text-center">
  {Number(ingatlan.tehermentes) === 0 ? (
    <span style={{ color: "red" }}>Nem</span>
  ) : (
    <span style={{ color: "green" }}>Igen</span>
  )}
</td>
                <td className="align-middle text-center">{ingatlan.ar}</td>
                <td className="align-middle text-center">
                  <img
                    style={{ maxHeight: "250px" }}
                    src={ingatlan.kepUrl}
                    alt="Nincs kép"
                    title={ingatlan.kepUrl}
                    onError={(e) => { e.target.src = "alap.png"; }}
                  />
                </td>
                <td className="align-middle text-center">
                  <button
                    className="btn btn-danger mx-2"
                    onClick={() => torolIngatlan(ingatlan.id)}
                  >
                    Törlés
                  </button>
                  <button
                    className="btn btn-warning"
                    onClick={() => szerkesztIngatlan(ingatlan)}
                  >
                    Szerkesztés
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {szerkesztes && (
        <div className="container mt-4">
          <h2>Ingatlan szerkesztése</h2>
          <form onSubmit={handleSzerkesztesSubmit}>
            <label>Kategória:</label>
            <select
              className="form-control"
              value={szerkesztes.kategoria}
              onChange={(e) => setSzerkesztes({ ...szerkesztes, kategoria: e.target.value })}
            >
              {kategoriak.map((kat) => (
                <option key={kat.id} value={kat.id}>
                  {kat.nev}
                </option>
              ))}
            </select>

            <label>Leírás:</label>
            <input
              type="text"
              className="form-control"
              value={szerkesztes.leiras}
              onChange={(e) => setSzerkesztes({ ...szerkesztes, leiras: e.target.value })}
            />

            <label>Hirdetés dátuma:</label>
            <input
              type="date"
              className="form-control"
              value={szerkesztes.hirdetesDatuma}
              onChange={(e) => setSzerkesztes({ ...szerkesztes, hirdetesDatuma: e.target.value })}
            />

            <label>Tehermentes:</label>
            <select
              className="form-control"
              value={szerkesztes.tehermentes}
              onChange={(e) => setSzerkesztes({ ...szerkesztes, tehermentes: e.target.value })}
            >
              <option value="1">Igen</option>
              <option value="0">Nem</option>
            </select>

            <label>Ár:</label>
            <input
              type="number"
              className="form-control"
              value={szerkesztes.ar}
              onChange={(e) => setSzerkesztes({ ...szerkesztes, ar: e.target.value })}
            />

            <label>Kép URL:</label>
            <input
              type="text"
              className="form-control"
              value={szerkesztes.kepUrl}
              onChange={(e) => setSzerkesztes({ ...szerkesztes, kepUrl: e.target.value })}
            />

            <button type="submit" className="btn btn-primary mt-3">Mentés</button>
            <button
              type="button"
              className="btn btn-secondary mt-3 mx-2"
              onClick={() => setSzerkesztes(null)}
            >
              Mégse
            </button>
          </form>
        </div>
      )}
    </>
  );
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

import { useEffect, useState } from "react";

export default function Admin() {

const [kinalat, setKinalat] = useState([]);

const [kategoriak, setKategoriak] = useState([]);

const [szerkesztes, setSzerkesztes] = useState(null);

useEffect(() => {

const fetchData = async () => {

try {

const ingatlanValasz = await fetch("http://localhost:5000/api/ingatlan");

const ingatlanAdatok = await ingatlanValasz.json();

setKinalat(ingatlanAdatok);

const kategoriakValasz = await fetch("http://localhost:5000/api/kategoriak");

const kategoriakAdat = await kategoriakValasz.json();

setKategoriak(kategoriakAdat);

} catch (error) {

console.error("Hiba történt:", error);

}

};

fetchData();

}, []);

const torolIngatlan = async (id) => {

if (!window.confirm("Biztosan törölni szeretnéd ezt az ingatlant?")) return;

try {

await fetch(`http://localhost:5000/api/ingatlan/${id}`, { method: "DELETE" });

setKinalat(kinalat.filter((ingatlan) => ingatlan.id !== id));

} catch (error) {

console.error("Hiba történt a törlésnél:", error);

}

};

const szerkesztIngatlan = (ingatlan) => {

setSzerkesztes(ingatlan);

};

const handleSzerkesztesSubmit = async (event) => {

event.preventDefault();

try {

await fetch(`http://localhost:5000/api/ingatlan/${szerkesztes.id}`, {

method: "PUT",

headers: { "Content-Type": "application/json" },

body: JSON.stringify(szerkesztes),

});

setKinalat(kinalat.map((i) => (i.id === szerkesztes.id ? szerkesztes : i)));

setSzerkesztes(null);

} catch (error) {

console.error("Hiba történt a frissítésnél:", error);

}

};

return (

<h1 className="text-center text-body">Ajánlataink</h1>

<div

className="container"

style={{ boxShadow: "0px 2px 5px rgba(0, 0, 0, 0.3)" }}

<tr>

<th className="align-middle text-center">Kategória</th>

<th className="align-middle text-center">Leírás</th>

<th className="align-middle text-center">Hirdetés dátuma</th>

<th className="align-middle text-center">Tehermentes</th>

<th className="align-middle text-center">Fénykép</th>

<th className="align-middle text-center">Műveletek</th>

</tr>

</thead>

<tbody>

{kinalat.map((ingatlan) => (

{ingatlan.kategoriaNev}

</td>

<td className="align-middle text-center">{ingatlan.leiras}</td>

{ingatlan.hirdetesDatuma}

</td>

{Number(ingatlan.tehermentes) === 0 ? (

) : (

)}

</td>

<td className="align-middle text-center">{ingatlan.ar}</td>

<img

style={{ maxHeight: "250px" }}

src={ingatlan.kepUrl}

alt="Nincs kép"

title={ingatlan.kepUrl}

onError={(e) => { e.target.src = "alap.png"; }}

</td>

<button

className="btn btn-danger mx-2"

onClick={() => torolIngatlan(ingatlan.id)}

Törlés

</button>

<button

className="btn btn-warning"

onClick={() => szerkesztIngatlan(ingatlan)}

Szerkesztés

</button>

</td>

</tr>

))}

</tbody>

</table>

</div>

{szerkesztes && (

<h2>Ingatlan szerkesztése</h2>

<label>Kategória:</label>

<select

className="form-control"

value={szerkesztes.kategoria}

onChange={(e) => setSzerkesztes({ ...szerkesztes, kategoria: e.target.value })}

{kategoriak.map((kat) => (

{kat.nev}

</option>

))}

</select>

<label>Leírás:</label>

<input

type="text"

className="form-control"

value={szerkesztes.leiras}

onChange={(e) => setSzerkesztes({ ...szerkesztes, leiras: e.target.value })}

<label>Hirdetés dátuma:</label>

<input

type="date"

className="form-control"

value={szerkesztes.hirdetesDatuma}

onChange={(e) => setSzerkesztes({ ...szerkesztes, hirdetesDatuma: e.target.value })}

<label>Tehermentes:</label>

<select

className="form-control"

value={szerkesztes.tehermentes}

onChange={(e) => setSzerkesztes({ ...szerkesztes, tehermentes: e.target.value })}

</select>

<input

type="number"

className="form-control"

value={szerkesztes.ar}

onChange={(e) => setSzerkesztes({ ...szerkesztes, ar: e.target.value })}

<input

type="text"

className="form-control"

value={szerkesztes.kepUrl}

onChange={(e) => setSzerkesztes({ ...szerkesztes, kepUrl: e.target.value })}

<button type="submit" className="btn btn-primary mt-3">Mentés</button>

<button

type="button"

className="btn btn-secondary mt-3 mx-2"

onClick={() => setSzerkesztes(null)}

Mégse

</button>

</form>

</div>

)}

</>

);

}

Admin II.

Adminisztrációhoz használhatjuk a backend patch végpontját is. A put és a patch között az a különbség, hogy a patch tényleg csak a módosított adaokat menti az adatbázisba, így gyorsabb, kevesebb erőforrást használ.

import { useEffect, useState } from "react";

export default function AdminPatch() {
  const [kinalat, setKinalat] = useState([]);
  const [kategoriak, setKategoriak] = useState([]);
  const [szerkesztes, setSzerkesztes] = useState(null);
  const [eredeti, setEredeti] = useState(null); // az eredeti értékek

  useEffect(() => {
    const fetchData = async () => {
      try {
        const resIngatlan = await fetch("http://localhost:5000/api/ingatlan");
        const dataIngatlan = await resIngatlan.json();
        setKinalat(dataIngatlan);

        const resKategoriak = await fetch("http://localhost:5000/api/kategoriak");
        const dataKategoriak = await resKategoriak.json();
        setKategoriak(dataKategoriak);
      } catch (error) {
        console.error("Hiba történt:", error);
      }
    };

    fetchData();
  }, []);

  const torolIngatlan = async (id) => {
    if (!window.confirm("Biztosan törölni szeretnéd ezt az ingatlant?")) return;

    try {
      await fetch(`http://localhost:5000/api/ingatlan/${id}`, { method: "DELETE" });
      setKinalat(kinalat.filter((ingatlan) => ingatlan.id !== id));
    } catch (error) {
      console.error("Hiba történt a törlésnél:", error);
    }
  };

  const szerkesztIngatlan = (ingatlan) => {
    // mély másolat, hogy legyen egy stabil "eredeti" snapshotunk
    const deepCopy = JSON.parse(JSON.stringify(ingatlan));
    setSzerkesztes(deepCopy);
    setEredeti(deepCopy);
  };

  // egységesítsük a típusokat a pontos összehasonlításhoz
  const normalizeValue = (key, value) => {
    switch (key) {
      case "kategoria":
      case "ar":
      case "tehermentes":
        return value === "" || value === null || value === undefined
          ? value
          : Number(value);
      case "hirdetesDatuma":
        // dátum string marad (YYYY-MM-DD)
        return value;
      case "leiras":
      case "kepUrl":
      default:
        return value;
    }
  };

  // csak a megváltozott kulcsok kerüljenek a PATCH payloadba
  const buildPatchPayload = (orig, edited) => {
    const modSzab = ["kategoria", "leiras", "hirdetesDatuma", "tehermentes", "ar", "kepUrl"];
    const patch = {};
    modSzab.forEach((key) => {
      const o = normalizeValue(key, orig[key]);
      const e = normalizeValue(key, edited[key]);
      if (e !== o) {
        patch[key] = e;
      }
    });
    return patch;
  };

  const handleSzerkesztesSubmit = async (event) => {
    event.preventDefault();
    if (!szerkesztes || !eredeti) return;

    const patchData = buildPatchPayload(eredeti, szerkesztes);

    if (Object.keys(patchData).length === 0) {
      alert("Nincs változás, nincs mit menteni.");
      return;
    }

    try {
      const response = await fetch(`http://localhost:5000/api/ingatlan/${szerkesztes.id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(patchData),
      });

      if (!response.ok) {
        throw new Error("Hiba a frissítésnél: " + response.status);
      }

      // helyi állapot frissítése – csak a változott mezők
      setKinalat((prev) =>
        prev.map((i) => {
          if (i.id !== szerkesztes.id) return i;

          const updated = { ...i, ...patchData };

          // ha kategoria ID változott, frissítsük a kategoriaNev-et is
          if (patchData.kategoria !== undefined) {
            const ujKat = kategoriak.find((kat) => kat.id === Number(patchData.kategoria));
            if (ujKat) {
              updated.kategoriaNev = ujKat.nev;
            }
          }

          return updated;
        })
      );

      setSzerkesztes(null);
      setEredeti(null);
    } catch (error) {
      console.error("Hiba történt a frissítésnél:", error);
      alert("Váratlan hiba történt a frissítésnél.");
    }
  };

  return (
    <>
      <h1 className="text-center text-body">Ajánlataink</h1>
      <div className="container" style={{ boxShadow: "0px 2px 5px rgba(0, 0, 0, 0.3)" }}>
        <table className="table table-responsive">
          <thead className="table-success">
            <tr>
              <th className="align-middle text-center">Kategória</th>
              <th className="align-middle text-center">Leírás</th>
              <th className="align-middle text-center">Hirdetés dátuma</th>
              <th className="align-middle text-center">Tehermentes</th>
              <th className="align-middle text-center">Ár</th>
              <th className="align-middle text-center">Fénykép</th>
              <th className="align-middle text-center">Műveletek</th>
            </tr>
          </thead>
          <tbody>
            {kinalat.map((ingatlan) => (
              <tr key={ingatlan.id}>
                <td className="align-middle text-center">{ingatlan.kategoriaNev}</td>
                <td className="align-middle text-center">{ingatlan.leiras}</td>
                <td className="align-middle text-center">{ingatlan.hirdetesDatuma}</td>
                <td className="align-middle text-center">
                  {Number(ingatlan.tehermentes) === 0 ? (
                    <span style={{ color: "red" }}>Nem</span>
                  ) : (
                    <span style={{ color: "green" }}>Igen</span>
                  )}
                </td>
                <td className="align-middle text-center">{ingatlan.ar}</td>
                <td className="align-middle text-center">
                  <img
                    style={{ maxHeight: "250px" }}
                    src={ingatlan.kepUrl}
                    alt="Nincs kép"
                    title={ingatlan.kepUrl}
                    onError={(e) => {
                      e.target.src = "alap.png";
                    }}
                  />
                </td>
                <td className="align-middle text-center">
                  <button
                    className="btn btn-danger mx-2"
                    onClick={() => torolIngatlan(ingatlan.id)}
                  >
                    Törlés
                  </button>
                  <button className="btn btn-warning" onClick={() => szerkesztIngatlan(ingatlan)}>
                    Szerkesztés
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {szerkesztes && (
        <div className="container mt-4">
          <h2>Ingatlan szerkesztése</h2>
          <form onSubmit={handleSzerkesztesSubmit}>
            <label>Kategória:</label>
            <select
              className="form-control"
              value={szerkesztes.kategoria}
              onChange={(e) =>
                setSzerkesztes({ ...szerkesztes, kategoria: Number(e.target.value) })
              }
            >
              {kategoriak.map((kat) => (
                <option key={kat.id} value={kat.id}>
                  {kat.nev}
                </option>
              ))}
            </select>

            <label>Leírás:</label>
            <input
              type="text"
              className="form-control"
              value={szerkesztes.leiras}
              onChange={(e) => setSzerkesztes({ ...szerkesztes, leiras: e.target.value })}
            />

            <label>Hirdetés dátuma:</label>
            <input
              type="date"
              className="form-control"
              value={szerkesztes.hirdetesDatuma}
              onChange={(e) =>
                setSzerkesztes({ ...szerkesztes, hirdetesDatuma: e.target.value })
              }
            />

            <label>Tehermentes:</label>
            <select
              className="form-control"
              value={szerkesztes.tehermentes}
              onChange={(e) =>
                setSzerkesztes({ ...szerkesztes, tehermentes: Number(e.target.value) })
              }
            >
              <option value={1}>Igen</option>
              <option value={0}>Nem</option>
            </select>

            <label>Ár:</label>
            <input
              type="number"
              className="form-control"
              value={szerkesztes.ar}
              onChange={(e) => setSzerkesztes({ ...szerkesztes, ar: Number(e.target.value) })}
            />

            <label>Kép URL:</label>
            <input
              type="text"
              className="form-control"
              value={szerkesztes.kepUrl}
              onChange={(e) => setSzerkesztes({ ...szerkesztes, kepUrl: e.target.value })}
            />

            <button type="submit" className="btn btn-primary mt-3">
              Mentés (PATCH)
            </button>
            <button
              type="button"
              className="btn btn-secondary mt-3 mx-2"
              onClick={() => {
                setSzerkesztes(null);
                setEredeti(null);
              }}
            >
              Mégse
            </button>
          </form>
        </div>
      )}
    </>
  );
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

import { useEffect, useState } from "react";

export default function AdminPatch() {

const [kinalat, setKinalat] = useState([]);

const [kategoriak, setKategoriak] = useState([]);

const [szerkesztes, setSzerkesztes] = useState(null);

const [eredeti, setEredeti] = useState(null); // az eredeti értékek

useEffect(() => {

const fetchData = async () => {

try {

const resIngatlan = await fetch("http://localhost:5000/api/ingatlan");

const dataIngatlan = await resIngatlan.json();

setKinalat(dataIngatlan);

const resKategoriak = await fetch("http://localhost:5000/api/kategoriak");

const dataKategoriak = await resKategoriak.json();

setKategoriak(dataKategoriak);

} catch (error) {

console.error("Hiba történt:", error);

}

};

fetchData();

}, []);

const torolIngatlan = async (id) => {

if (!window.confirm("Biztosan törölni szeretnéd ezt az ingatlant?")) return;

try {

await fetch(`http://localhost:5000/api/ingatlan/${id}`, { method: "DELETE" });

setKinalat(kinalat.filter((ingatlan) => ingatlan.id !== id));

} catch (error) {

console.error("Hiba történt a törlésnél:", error);

}

};

const szerkesztIngatlan = (ingatlan) => {

// mély másolat, hogy legyen egy stabil "eredeti" snapshotunk

const deepCopy = JSON.parse(JSON.stringify(ingatlan));

setSzerkesztes(deepCopy);

setEredeti(deepCopy);

};

// egységesítsük a típusokat a pontos összehasonlításhoz

const normalizeValue = (key, value) => {

switch (key) {

case "kategoria":

case "ar":

case "tehermentes":

return value === "" || value === null || value === undefined

? value

: Number(value);

case "hirdetesDatuma":

// dátum string marad (YYYY-MM-DD)

return value;

case "leiras":

case "kepUrl":

default:

return value;

}

};

// csak a megváltozott kulcsok kerüljenek a PATCH payloadba

const buildPatchPayload = (orig, edited) => {

const modSzab = ["kategoria", "leiras", "hirdetesDatuma", "tehermentes", "ar", "kepUrl"];

const patch = {};

modSzab.forEach((key) => {

const o = normalizeValue(key, orig[key]);

const e = normalizeValue(key, edited[key]);

if (e !== o) {

patch[key] = e;

}

});

return patch;

};

const handleSzerkesztesSubmit = async (event) => {

event.preventDefault();

if (!szerkesztes || !eredeti) return;

const patchData = buildPatchPayload(eredeti, szerkesztes);

if (Object.keys(patchData).length === 0) {

alert("Nincs változás, nincs mit menteni.");

return;

}

try {

const response = await fetch(`http://localhost:5000/api/ingatlan/${szerkesztes.id}`, {

method: "PATCH",

headers: { "Content-Type": "application/json" },

body: JSON.stringify(patchData),

});

if (!response.ok) {

throw new Error("Hiba a frissítésnél: " + response.status);

}

// helyi állapot frissítése – csak a változott mezők

setKinalat((prev) =>

prev.map((i) => {

if (i.id !== szerkesztes.id) return i;

const updated = { ...i, ...patchData };

// ha kategoria ID változott, frissítsük a kategoriaNev-et is

if (patchData.kategoria !== undefined) {

const ujKat = kategoriak.find((kat) => kat.id === Number(patchData.kategoria));

if (ujKat) {

updated.kategoriaNev = ujKat.nev;

}

return updated;

})

);

setSzerkesztes(null);

setEredeti(null);

} catch (error) {

console.error("Hiba történt a frissítésnél:", error);

alert("Váratlan hiba történt a frissítésnél.");

}

};

return (

<h1 className="text-center text-body">Ajánlataink</h1>

<tr>

<th className="align-middle text-center">Kategória</th>

<th className="align-middle text-center">Leírás</th>

<th className="align-middle text-center">Hirdetés dátuma</th>

<th className="align-middle text-center">Tehermentes</th>

<th className="align-middle text-center">Fénykép</th>

<th className="align-middle text-center">Műveletek</th>

</tr>

</thead>

<tbody>

{kinalat.map((ingatlan) => (

<td className="align-middle text-center">{ingatlan.kategoriaNev}</td>

<td className="align-middle text-center">{ingatlan.leiras}</td>

<td className="align-middle text-center">{ingatlan.hirdetesDatuma}</td>

{Number(ingatlan.tehermentes) === 0 ? (

) : (

)}

</td>

<td className="align-middle text-center">{ingatlan.ar}</td>

<img

style={{ maxHeight: "250px" }}

src={ingatlan.kepUrl}

alt="Nincs kép"

title={ingatlan.kepUrl}

onError={(e) => {

e.target.src = "alap.png";

}}

</td>

<button

className="btn btn-danger mx-2"

onClick={() => torolIngatlan(ingatlan.id)}

Törlés

</button>

<button className="btn btn-warning" onClick={() => szerkesztIngatlan(ingatlan)}>

Szerkesztés

</button>

</td>

</tr>

))}

</tbody>

</table>

</div>

{szerkesztes && (

<h2>Ingatlan szerkesztése</h2>

<label>Kategória:</label>

<select

className="form-control"

value={szerkesztes.kategoria}

onChange={(e) =>

setSzerkesztes({ ...szerkesztes, kategoria: Number(e.target.value) })

}

{kategoriak.map((kat) => (

{kat.nev}

</option>

))}

</select>

<label>Leírás:</label>

<input

type="text"

className="form-control"

value={szerkesztes.leiras}

onChange={(e) => setSzerkesztes({ ...szerkesztes, leiras: e.target.value })}

<label>Hirdetés dátuma:</label>

<input

type="date"

className="form-control"

value={szerkesztes.hirdetesDatuma}

onChange={(e) =>

setSzerkesztes({ ...szerkesztes, hirdetesDatuma: e.target.value })

}

<label>Tehermentes:</label>

<select

className="form-control"

value={szerkesztes.tehermentes}

onChange={(e) =>

setSzerkesztes({ ...szerkesztes, tehermentes: Number(e.target.value) })

}

</select>

<input

type="number"

className="form-control"

value={szerkesztes.ar}

onChange={(e) => setSzerkesztes({ ...szerkesztes, ar: Number(e.target.value) })}

<input

type="text"

className="form-control"

value={szerkesztes.kepUrl}

onChange={(e) => setSzerkesztes({ ...szerkesztes, kepUrl: e.target.value })}

Mentés (PATCH)

</button>

<button

type="button"

className="btn btn-secondary mt-3 mx-2"

onClick={() => {

setSzerkesztes(null);

setEredeti(null);

}}

Mégse

</button>

</form>

</div>

)}

</>

);

}

React – Ingatlan feladatsor

Kategóriák

Friss bejegyzések

Playwright teszt

Python Lista, szótár és halmaz értelmezés (list comprehension, dict/set comprehension)