rrr

tables

src/components/TableMeets.jsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+let Table = styled.div({
+  width: 1520,
+  border: '1px solid black'
+});
+
+let List = styled.div({
+  display: 'flex',
+  // justifyContent: 'center'
+});
+
+let Date = styled.span({
+  marginRight: 100
+});
+let Time = styled.span({
+  marginRight: 100
+});
+let Name = styled.span({
+    marginRight: 100
+  });
+
+const TableMeets = ({ events }) => {
+  const [isOpenMap, setIsOpenMap] = useState({});
+
+  const toggleDropdown = (eventId) => {
+    setIsOpenMap((prevIsOpenMap) => ({
+      ...prevIsOpenMap,
+      [eventId]: !prevIsOpenMap[eventId]
+    }));
+  };
+
+  return (
+    <Table>
+      <ul>
+        {events.map((event) => (
+          <li key={event.id}>
+            <div>
+              <Date>{event.date}</Date>
+              <Time>{event.time}</Time>
+              <Name>{event.title}</Name>
+              <span>
+                <button onClick={() => toggleDropdown(event.id)}>Показать список мероприятий</button>
+              </span>
+              {isOpenMap[event.id] && (
+                <div>
+                  <span>{event.speaker}</span>
+                  <img src={event.avatar} alt={event.speaker} />
+                  <p>{event.description}</p>
+                </div>
+              )}
+            </div>
+          </li>
+        ))}
+      </ul>
+    </Table>
+  );
+};
+
+export default TableMeets;

src/components/fetchUtils/FetchUtils.jsx

@@ -0,0 +1,68 @@
+/* eslint-disable no-unused-vars */
+import axios from "axios"
+import { useState } from "react"
+import './style.css'
+
+
+
+const FetchUtils = () => {
+    // default value of data is object or array/nums/string
+    // const [rata, setRata] = useState([])
+    const [user, setUser] = useState([])
+    // single axios feetching
+
+    // useEffect(
+    //     () => {
+    //         async function getData() {
+    //             const response = await axios.get('http://localhost:5000/weatherforecast')
+    //             console.log(response.data)
+    //             setRata(response.data)
+    //         }
+    //         getData()
+    //     }, []
+    // )
+    // useEffect(
+    //     () => {
+            async function getData() {
+                const response = await axios.get('https://jsonplaceholder.typicode.com/users')
+                console.log(response.data)
+                setUser(response.data)
+            }
+    //         getData()
+    //     }, []
+    // )
+    // Loop of axios fetching \\
+
+    // async function getData() {
+    //     const response = await axios.get('http://localhost:5000/weatherforecast')
+    //     console.log(response.data)
+    //     setRata(response.data)
+    // }
+    // getData()
+    const removeList = () => {
+        setUser([])
+    }
+    return (
+        <>
+          <button onClick={getData}>Click to Get Data</button>
+          <button onClick={removeList}>Click to Remove Data Listing</button>
+          {/* Mapping of data */}
+          <div>
+            {Array.isArray(user) ? (
+              <ul>
+                {user.map((item) => (
+                  <ol key={item.id}>
+                    <li>{item.name}</li>
+                    <li>{item.username}</li>
+                    <li>{item.email}</li>
+                  </ol>
+                ))}
+              </ul>
+            ) : (
+              <p>Bad data type from server!</p>
+            )}
+          </div>
+        </>
+      );
+}
+export default FetchUtils;

src/components/fetchUtils/style.css

@@ -0,0 +1,18 @@
+ul {
+    display: flex;
+    /* justify-content: center; */
+    flex-direction: column;
+    list-style: none;
+}
+
+ol {
+    display: flex;
+    /* justify-content: center; */
+    /* align-items: center; */
+    /* text-align: left; */
+    list-style: none;
+}
+
+li {
+    margin-right: 30px;
+}