Show List

React JS

import React, { useState, useEffect } from "react";
import "./styles.css";

const mockData = {
  id: "xyz",
  events: [],
  children: [
    {
      id: "abc",
      events: [],
      children: [
        {
          id: "qwe",
          events: [
            { id: "event1", city: "London", price: 12 },
            { id: "event2", city: "Paris", price: 10 },
          ],
          children: [],
        },
      ],
    },
    {
      id: "def",
      events: [],
      children: [
        {
          id: "rty",
          events: [
            { id: "event3", city: "New York", price: 15 },
            { id: "event4", city: "Tokyo", price: 20 },
          ],
          children: [],
        },
      ],
    },
    {
      id: "ghi",
      events: [
        { id: "event5", city: "Berlin", price: 8 },
        { id: "event6", city: "Madrid", price: 14 },
      ],
      children: [],
    },
    {
      id: "jkl",
      events: [{ id: "event7", city: "Rome", price: 13 }],
      children: [],
    },
  ],
};

// Функция для извлечения всех событий из иерархической структуры данных
const extractEvents = (node) => {
  let events = [...node.events];
  if (node.children) {
    node.children.forEach((child) => {
      events = [...events, ...extractEvents(child)];
    });
  }
  return events;
};

function App() {
  const [events, setEvents] = useState([]);
  const [cityFilter, setCityFilter] = useState("");
  const [sortByPrice, setSortByPrice] = useState(false);

  useEffect(() => {
    const allEvents = extractEvents(mockData);
    setEvents(allEvents);
  }, []);

  const filteredEvents = events
    .filter(
      (event) =>
        cityFilter === "" ||
        event.city.toLowerCase().includes(cityFilter.toLowerCase()),
    )
    .sort((a, b) => (sortByPrice ? a.price - b.price : 0));

  return (
    <div className="container">
      <h1>Event List</h1>
      <div className="filters">
        <input
          type="text"
          placeholder="Filter by city..."
          value={cityFilter}
          onChange={(e) => setCityFilter(e.target.value)}
        />
        <label>
          <input
            type="checkbox"
            checked={sortByPrice}
            onChange={(e) => setSortByPrice(e.target.checked)}
          />
          Sort by cheapest price
        </label>
      </div>
      {filteredEvents.length === 0 ? (
        <p>No events found matching the criteria.</p>
      ) : (
        <ul className="event-list">
          {filteredEvents.map((event) => (
            <li key={event.id} className="event-item">
              <div className="event-city">{event.city}</div>
              <div className="event-price">${event.price}</div>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default App;

CSS Show List

React TS

import React, { useState, useEffect } from "react";
import "./styles.css";

// Define types for Event and Node
interface Event {
  id: string;
  city: string;
  price: number;
}

interface Node {
  id: string;
  events: Event[];
  children: Node[];
}

// Mock data structure as provided
const mockData: Node = {
  id: "xyz",
  events: [],
  children: [
    {
      id: "abc",
      events: [],
      children: [
        {
          id: "qwe",
          events: [
            { id: "event1", city: "London", price: 12 },
            { id: "event2", city: "Paris", price: 10 },
          ],
          children: [],
        },
      ],
    },
    {
      id: "def",
      events: [],
      children: [
        {
          id: "rty",
          events: [
            { id: "event3", city: "New York", price: 15 },
            { id: "event4", city: "Tokyo", price: 20 },
          ],
          children: [],
        },
      ],
    },
    {
      id: "ghi",
      events: [
        { id: "event5", city: "Berlin", price: 8 },
        { id: "event6", city: "Madrid", price: 14 },
      ],
      children: [],
    },
    {
      id: "jkl",
      events: [{ id: "event7", city: "Rome", price: 13 }],
      children: [],
    },
  ],
};

// Recursive function to extract all events from the hierarchical data structure
const extractEvents = (node: Node): Event[] => {
  let events = [...node.events];
  if (node.children) {
    node.children.forEach((child) => {
      events = [...events, ...extractEvents(child)];
    });
  }
  return events;
};

const App: React.FC = () => {
  const [events, setEvents] = useState<Event[]>([]);
  const [cityFilter, setCityFilter] = useState<string>("");
  const [sortByPrice, setSortByPrice] = useState<boolean>(false);

  // Load all events once the component mounts
  useEffect(() => {
    const allEvents = extractEvents(mockData);
    setEvents(allEvents);
  }, []);

  // Filter and sort events based on user input
  const filteredEvents = events
    .filter(
      (event) =>
        cityFilter === "" ||
        event.city.toLowerCase().includes(cityFilter.toLowerCase()),
    )
    .sort((a, b) => (sortByPrice ? a.price - b.price : 0));

  return (
    <div className="container">
      <h1>Event List</h1>
      <div className="filters">
        {/* Input field for filtering events by city */}
        <input
          type="text"
          placeholder="Filter by city..."
          value={cityFilter}
          onChange={(e) => setCityFilter(e.target.value)}
        />
        {/* Checkbox for sorting events by cheapest price */}
        <label>
          <input
            type="checkbox"
            checked={sortByPrice}
            onChange={(e) => setSortByPrice(e.target.checked)}
          />
          Sort by cheapest price
        </label>
      </div>
      {/* Display a message if no events match the criteria, otherwise show the event list */}
      {filteredEvents.length === 0 ? (
        <p>No events found matching the criteria.</p>
      ) : (
        <ul className="event-list">
          {filteredEvents.map((event) => (
            <li key={event.id} className="event-item">
              <div className="event-city">{event.city}</div>
              <div className="event-price">${event.price}</div>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default App;

CSS Show List