functional 1

added create meets, check meets, edit meets [edit meets not stable]
2023-12-23 07:38:29 +03:00
parent 3fa127445c
commit 4dc1d1a12b
8 changed files with 368 additions and 121 deletions
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,6 @@

 import './App.css'
-import FetchUtils from './components/fetchUtils/FetchUtils'
+import FetchUtils from './components/fetchUtils/FetchUtils.jsx'
 // import TableMeets from './components/fetchUtils/TableMeets.jsx'
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import BeingPage from "./Components/BeingPage/index.jsx";
--- a/src/Components/HomePage/index.jsx
+++ b/src/Components/HomePage/index.jsx
@@ -2,30 +2,35 @@ import Header from "../Header";
 import styles from "./style.module.scss";
 import TableMeets from '../TableMeets/TableMeets'
 import Home from "../Home/Home";
+import FetchUtils from "../fetchUtils/FetchUtils";
+import EditForm from "../edit/EditForm";
+import PostForm from "../post/PostForm";

-const events = [
-    {
-      id: 1,
-      date: '10.10.2022',
-      time: '14:00',
-      title: 'Мероприятие 1',
-      speaker: 'Спикер 1',
-      avatar: 'speaker1.jpg',
-      description: 'Описание мероприятия 1',
-      isExpanded: true,
-    },
-    {
-      id: 2,
-      date: '11.10.2022',
-      time: '15:30',
-      title: 'Мероприятие 2',
-      speaker: 'Спикер 2',
-      avatar: 'speaker2.jpg',
-      description: 'Описание мероприятия 2',
-      isExpanded: true,
-    },
-    // Добавьте другие мероприятия сюда
-  ];
+const APIURL = ''
+
+// const events = [
+//     {
+//       id: 1,
+//       date: '10.10.2022',
+//       time: '14:00',
+//       title: 'Мероприятие 1',
+//       speaker: 'Спикер 1',
+//       avatar: 'speaker1.jpg',
+//       description: 'Описание мероприятия 1',
+//       isExpanded: true,
+//     },
+//     {
+//       id: 2,
+//       date: '11.10.2022',
+//       time: '15:30',
+//       title: 'Мероприятие 2',
+//       speaker: 'Спикер 2',
+//       avatar: 'speaker2.jpg',
+//       description: 'Описание мероприятия 2',
+//       isExpanded: true,
+//     },
+//     // Добавьте другие мероприятия сюда
+//   ];
 const HomePage = () => {
    return (
    <>
@@ -62,6 +67,9 @@ const HomePage = () => {
                <div className={styles.card}></div>
            </div>
            <Home></Home>
+            {/* <FetchUtils></FetchUtils> */}
+            <PostForm />
+            <EditForm />
        </section>
        

--- a/src/Components/TableMeets/style.module.scss
+++ b/src/Components/TableMeets/style.module.scss
@@ -47,8 +47,8 @@
        justify-content: center;
        align-items: center;
    }
-    &__arrow {
+    // &__arrow {
        
-    }
+    // }
 }

--- a/src/components/Home/Home.jsx
+++ b/src/components/Home/Home.jsx
@@ -1,7 +1,8 @@
 import React from 'react';
-// import Header from '../Header';
 import './style.css'
 import styled from 'styled-components';
+import { HttpApiMethods } from '../fetchUtils/FetchUtils';
+import EditForm from '../post/PostForm';

 const Taged = styled.div({
    borderRadius: 10,
@@ -9,46 +10,38 @@ const Taged = styled.div({
    
 })

+const httpApiMethods = new HttpApiMethods()
+
+const meets = await httpApiMethods.GetMeetings()
+
 const Home = () => {
+
+    function extractDateTime(dateString) {
+        const dateTime = new Date(dateString);
+        const date = dateTime.toLocaleDateString();
+        const time = dateTime.toLocaleTimeString();
+        
+        return { date, time };
+    }
+
    return (
        <div className='wrapp'>
-            {/* <Header></Header> */}
-            <div className='event_card'>
-                <div className="event-card__photo" />
-                <div className="taggs">
-                <div className='tagged'>Психология</div>
-                <div className="feautures">Предстоящее</div>
-                </div>
-                <h4 className="event-card__title">Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»</h4>
-                <p className="event-card__date">22 декабря, с 10:00 до 22:00 по Московскому времени</p>
-            </div>
-            <div className='event_card'>
-                <div className="event-card__photo" />
-                <div className="taggs">
-                <div className='tagged'>Психология</div>
-                <div className="feautures">Предстоящее</div>
-                </div>
-                <h4 className="event-card__title">Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»</h4>
-                <p className="event-card__date">22 декабря, с 10:00 до 22:00 по Московскому времени</p>
-            </div>
-            <div className='event_card'>
-                <div className="event-card__photo" />
-                <div className="taggs">
-                <div className='tagged'>Психология</div>
-                <div className="feautures">Предстоящее</div>
-                </div>
-                <h4 className="event-card__title">Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»</h4>
-                <p className="event-card__date">22 декабря, с 10:00 до 22:00 по Московскому времени</p>
-            </div>
-            <div className='event_card'>
-                <div className="event-card__photo" />
-                <div className="taggs">
-                <div className='tagged'>Психология</div>
-                <div className="feautures">Предстоящее</div>
-                </div>
-                <h4 className="event-card__title">Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»</h4>
-                <p className="event-card__date">22 декабря, с 10:00 до 22:00 по Московскому времени</p>
-            </div>
+            {Array.isArray(meets) ? (
+                meets.map((item, index) => (
+                    <div className='event_card' key={index}>
+                        <div className="event-card__photo"><img className='img' src={httpApiMethods.APIURL_FILES + item.speackerImage} alt="{item.speackerImage}" /></div>
+                        <div className="taggs">
+                            <div className='tagged'>{item.tags}</div>
+                            <div className="feautures">{item.type}</div>
+                        </div>
+                        <h4 className="event-card__title">{item.title}</h4>
+                        <p className="event-card__date">{extractDateTime(item.time).date}, в {extractDateTime(item.time).time} по Московскому времени</p>
+                    </div>
+                ))
+            ) : (
+                <p>Неверный тип данных с сервера!</p>
+            )}
+            {/* <EditForm></EditForm> */}
        </div>
    );
 }
--- a/src/components/Home/style.css
+++ b/src/components/Home/style.css
@@ -3,12 +3,14 @@
    height: 626px;
    flex-shrink: 0;
    margin-top: 100px;
-    margin-right: 31px;
+    margin-right: 11px;
 }

 .wrapp {
    display: flex;
    justify-content: flex-start;
+    flex-wrap: wrap;
+    margin-left: 40px;
    /* max-width: 1521px; */
 }

@@ -18,6 +20,7 @@

 .event-card_date {
    color: var(--gray_text, #888);
+    text-align: left;

 /* title */
 font-family: Montserrat;
@@ -43,6 +46,13 @@ margin-bottom: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
+    text-align: left;
+}
+
+.img {
+    width: 292px;
+    height: 340px;
+    flex-shrink: 0;
 }
 .feautures {
    
--- a/src/components/edit/EditForm.jsx
+++ b/src/components/edit/EditForm.jsx
@@ -0,0 +1,104 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { HttpApiMethods } from '../fetchUtils/FetchUtils';
+
+const EditForm = () => {
+    const formRef = useRef(null);
+    const [dataIsLoad, setDataIsLoad] = useState(false);
+    const httpApiMethods = new HttpApiMethods();
+
+    const post = async (event) => {
+        event.preventDefault(); // Предотвращение действия по умолчанию
+        let formData = new FormData(formRef.current);
+        setDataIsLoad(false);
+        const updatedMeets = httpApiMethods.EditMeetings(formData)
+            .then(() => {
+                setDataIsLoad(true);
+            });
+    };
+
+    const handleData = (data) => {
+        if (Array.isArray(data) && data.length > 0) {
+            setData(data);
+        } else {
+            setData([]);
+            console.error('Неверный тип данных с сервера!');
+        }
+    };
+
+    const fetchData = async () => {
+        try {
+            const data = await httpApiMethods.GetMeetings();
+            handleData(data);
+        } catch (error) {
+            console.error(error);
+        }
+    };
+
+    const [data, setData] = useState([]);
+    const [selectedId, setSelectedId] = useState('');
+    const [selectedData, setSelectedData] = useState(null);
+
+    const handleDataClick = (id) => {
+        const selected = data.find((item) => item.id === id);
+        setSelectedData(selected);
+    };
+
+    const handleChange = (event) => {
+        setSelectedData({
+            ...selectedData,
+            [event.target.name]: event.target.value
+        });
+    };
+
+    useEffect(() => {
+        fetchData();
+    }, []);
+
+    const FillInputs = () => {
+        httpApiMethods.GetByID()
+    }
+
+    return (
+        <div>
+            <h2>Edit</h2>
+            <div>{dataIsLoad ? "Данные успешно загружены" : ""}</div>
+            
+                <ul>
+                    {Array.isArray(data) && data.length > 0 ? (
+                        data.map((item, index) => (
+                            <button onClick={() => handleDataClick(item.id)} key={index}>
+                                {item.id}
+                                <div>{item.title}</div>
+                            </button>
+                        ))
+                    ) : (
+                        <p>Неверный тип данных с сервера!</p>
+                    )}
+                </ul>
+                {/* автозаполнение инпутов */}
+                {selectedData && (
+                    <>
+                    <form ref={formRef}>
+                        <input type="text" placeholder='id' name='id' value={selectedData.id} onChange={handleChange} />
+                        <input type="text" placeholder='name' name='title' value={selectedData.title} onChange={handleChange} />
+                        <input type="text" placeholder='time' name='time' value={selectedData.time} onChange={handleChange} />
+                        <input type="text" placeholder='theme' name='theme' value={selectedData.theme} onChange={handleChange} />
+                        <input type="text" placeholder='speakerName' name='speakerName' value={selectedData.speakerName} onChange={handleChange} />
+                        <input type="file" placeholder='speackerImage' name='speackerImage'/>
+                        <input type="file" placeholder='placeImages' name='placeImages'/>
+                        <input type="text" placeholder='splecializations' name='splecializations' value={selectedData.splecializations} onChange={handleChange} />
+                        <input type="text" placeholder='speakerEmail' name='speakerEmail' value={selectedData.speakerEmail} onChange={handleChange} />
+                        <input type="text" placeholder='tags' name='tags' value={selectedData.tags} onChange={handleChange} />
+                        <input type="text" placeholder='SpeakerTelephone' name='speakerTelephone' value={selectedData.speakerTelephone} onChange={handleChange} />
+                        <input type="text" placeholder='type' name='type' value={selectedData.type} onChange={handleChange} />
+                        <input type="text" placeholder='videoUrl' name='videoUrl' value={selectedData.videoUrl} onChange={handleChange} />
+                        <button onClick={post}>Edit</button>
+                        </form>
+                    </>
+                )}
+            
+        </div>
+    );
+};
+
+export default EditForm;
--- a/src/components/fetchUtils/FetchUtils.jsx
+++ b/src/components/fetchUtils/FetchUtils.jsx
@@ -5,64 +5,150 @@ import './style.css'



+export class HttpApiMethods {
+
+
+
+  api = axios.create({
+    baseURL: "https://cyberbloom.zetcraft.ru/api",
+    headers: {
+      "Access-Control-Allow-Origin": "http://localhost:5173",
+    },
+  });
+
+  APIURL = "https://cyberbloom.zetcraft.ru/api"
+  APIURL_FILES = "https://cyberbloom.zetcraft.ru/api/cyber-boom-files/"
+
+  GetByID = async (id) => {
+    let innerUrl = this.APIURL + `/meetings?id=${id}`
+
+    const response = await axios.get(innerUrl)
+
+    return response.data;
+  }
+
+  GetMeetings = async () => {
+    let innerUrl = this.APIURL + `/meetings/list?offset=0&limit=20`;
+
+    const response = await axios.get(innerUrl);
+
+    return response.data;
+  }
+
+  // createForm = (data) => {
+  //   const [formDat, setFormDat] = useState({});
+
+  //   const handleChange = (e) => {
+  //     setFormDat({ ...formDat, [e.target.name]: e.target.value });
+  //   };
+
+  //   const handleSubmit = (e) => {
+  //     let innerUrl = this.APIURL + `/meetings`
+  //     e.preventDefault();
+  //     // Отправка объекта формы на сервер
+  //     fetch(innerUrl, {
+  //       method: 'POST',
+  //       body: JSON.stringify(formDat),
+  //       headers: {
+  //         'Content-Type': 'application/json',
+  //       },
+  //     })
+  //       .then((response) => response.json())
+  //       .then((data) => {
+  //         // Обработка ответа от сервера
+  //         console.log(data);
+  //       })
+  //       .catch((error) => {
+  //         // Обработка ошибок
+  //         console.error(error);
+  //       });
+  //   };
+  //   let fields = Object.keys(data);
+
+  //   let formData = new FormData();
+  //   fields.forEach(f => {
+
+  //     formData.append(f, data[f]);
+  //   })
+  //   handleChange(data)
+  //   handleSubmit(data)
+
+  //   return formData;
+  // }
+  AddMeetings = async (data) => {
+    let innerUrl = this.APIURL + `/meetings`;
+
+    let response = await axios.postForm(innerUrl, data);
+    return response.data;
+
+  }
+
+  EditMeetings = async (data) => {
+    api.get("/meetings").then((response) => {
+      console.log(response.data);
+      return response.data;
+    });
+    
+
+  }
+
+  DeleteMeetings = async (id) => {
+    let innerUrl = this.APIURL + `/meetings?id=${id}`
+
+    const response = await axios.get(innerUrl)
+
+    return response.data;
+  }
+}
+
+
+
+const httpApiMethods = new HttpApiMethods() // Создание экземпляра класса HttpApiMethods
+
+const meets = httpApiMethods.GetMeetings()
+
 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 \\
+  const [user, setUser] = useState([])

-    // 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>
-        </>
-      );
+  async function getData() {
+    const response = await axios.get(APIURL)
+    console.log(response.data)
+    setUser(response.data)
+  }
+
+  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(meets) ? (
+          <ul>
+            {meets.map((item) => (
+              <ol key={item.id}>
+                <li>{item.title}</li>
+                <li>{item.time}</li>
+                <li>{item.speakerName}</li>
+                <li>{item.speackerImage}</li>
+                <li>{item.splecializations}</li>
+                <li>{item.type}</li>
+                <li>{item.speakerTelephone}</li>
+                <li>{item.speakerEmail}</li>
+                <li>{item.tags}</li>
+                <li>{item.videoUrl}</li>
+              </ol>
+            ))}
+          </ul>
+        ) : (
+          <p>Bad data type from server!</p>
+        )}
+      </div>
+    </>
+  );
 }
 export default FetchUtils;
--- a/src/components/post/PostForm.jsx
+++ b/src/components/post/PostForm.jsx
@@ -0,0 +1,46 @@
+import React, { useRef, useState } from 'react';
+import { HttpApiMethods } from '../fetchUtils/FetchUtils';
+
+
+const PostForm = () => {
+    const formRef = useRef(null); // Добавление этой строки
+    const [dataIsLoad, setDataIsLoad] = useState(false)
+
+    let post = async () => {
+        const httpApiMethods = new HttpApiMethods();
+        let formData = new FormData(formRef.current); // Изменение этой строки
+        setDataIsLoad(false)
+        const updatedMeets = httpApiMethods.AddMeetings(formData)
+        .then(
+            () => {
+                setDataIsLoad(true)
+                
+            }
+        )
+        
+    }
+
+    return (
+        <div>
+            <h2>Post</h2>
+            <div>{dataIsLoad ? "ДАнные успешно загрузилисб" : ""}</div>
+            <form ref={formRef} action='https://cyberbloom.zetcraft.ru/api/meetings'>
+                <input type="text" placeholder='name' name='title'/>
+                <input type="text" placeholder='time' name='time'/>
+                <input type="text" placeholder='theme' name='theme'/>
+                <input type="text" placeholder='speakerName' name='speakerName'/>
+                <input type="file" placeholder='speackerImage' name='speackerImage'/>
+                <input type="file" placeholder='placeImages' name='placeImages'/>
+                <input type="text" placeholder='splecializations' name='splecializations'/>
+                <input type="text" placeholder='speakerEmail' name='speakerEmail'/>
+                <input type="text" placeholder='tags' name='tags'/>
+                <input type="text" placeholder='SpeakerTelephone' name='speakerTelephone'/>
+                <input type="text" placeholder='type' name='type'/>
+                <input type="text" placeholder='videoUrl' name='videoUrl'/>
+                <button onClick={post}>Create</button>
+                </form>
+        </div>
+    );
+}
+
+export default PostForm;