<repo_name>agnakonieczna/recruitment_task<file_sep>/src/App.js
import { useState, useEffect } from 'react';
import GlobalStyle from './styles/GlobalStyles';
import { ThemeProvider } from 'styled-components';
import theme from './styles/theme';
import { Switch, Route } from 'react-router-dom';

import HomePage from './pages/HomePage/HomePage';
import HouseList from './pages/HouseList/HouseList';
import SingleHouse from './pages/SingleHouse/SingleHouse';
import HouseForm from './pages/HouseForm/HouseForm';

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('http://mobile-reality-backend.sadek.usermd.net/houses/all')
      .then((res) => {
        if (!res.ok) {
          throw new Error(res.error);
        }
        return res.json();
      })
      .then((data) => setData(data.results))
      .catch((err) => console.log(err));
  }, []);

  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <Switch>
        <Route exact path='/'>
          <HomePage />
        </Route>
        <Route path='/house-list'>
          <HouseList data={data} setData={setData} />
        </Route>
        <Route path='/single-house/:id'>
          <SingleHouse />
        </Route>
        <Route path='/house-form'>
          <HouseForm houseData={data} setData={setData} />
        </Route>
      </Switch>
    </ThemeProvider>
  );
}

export default App;
<file_sep>/src/pages/SingleHouse/SingleHouse.js
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';

const SingleHouse = () => {
  let { id } = useParams();
  const [singleHouse, setSingleHouse] = useState();

  useEffect(() => {
    fetch(`http://mobile-reality-backend.sadek.usermd.net/houses/${id}`)
      .then((res) => res.json())
      .then((data) => setSingleHouse(data.result))
      .catch((err) => console.log(err));
  }, [id]);

  return (
    singleHouse ? (
      <section>
        <h2>{singleHouse.address}</h2>
        <p>{singleHouse.description}</p>
        <p>{singleHouse.floorsNumber}</p>
      </section>
    ) : <p>Nie znaleziono domku</p>
  );
};

export default SingleHouse;
<file_sep>/src/pages/HouseList/HouseList.js
import { Link } from 'react-router-dom';

const HouseList = ({ data, setData }) => {
  
  const removeHouse = (id) => {
    setData(data.filter((house) => house._id !== id));
    fetch(`http://mobile-reality-backend.sadek.usermd.net/houses/${id}`, {
      method: 'DELETE'
    });
  };

  return (
    <section>
      <ul>
        {data &&
          data.map((house) => {
            return (
              <li key={house._id}>
                <h2>{house.address}</h2>
                <p>{house.description}</p>
                <p>{house.floorsNumber}</p>
                <Link to={`/single-house/${house._id}`}>Zobacz więcej</Link>
                <button onClick={() => removeHouse(house._id)}>X</button>
              </li>
            );
          })}
      </ul>
      <Link to='/house-form'>Dodaj nowy dom</Link>
    </section>
  );
};

export default HouseList;
