From 8f39b15ab4116c6593c0170901772931e417f5f3 Mon Sep 17 00:00:00 2001
From: "Vsevo;od" <96574851+vsevolod22@users.noreply.github.com>
Date: Sat, 23 Dec 2023 12:29:37 +0300
Subject: [PATCH] idImg

---
 src/Components/Card/index.jsx             | 30 +++++++----
 src/Components/MeetPage/index.jsx         | 62 ++++++++++++++++++-----
 src/Components/MeetPage/style.module.scss |  8 ++-
 src/components/Home/Home.jsx              | 33 ++++++------
 4 files changed, 92 insertions(+), 41 deletions(-)

diff --git a/src/Components/Card/index.jsx b/src/Components/Card/index.jsx
index eb46431..8511f62 100644
--- a/src/Components/Card/index.jsx
+++ b/src/Components/Card/index.jsx
@@ -1,22 +1,32 @@
 import './style.module.scss';
 
 
+import { HttpApiMethods } from '../fetchUtils/FetchUtils';
 
-
-const Card = () => {
+const httpApiMethods = new HttpApiMethods()
+function extractDateTime(dateString) {
+    const dateTime = new Date(dateString);
+    const date = dateTime.toLocaleDateString();
+    const time = dateTime.toLocaleTimeString();
+    
+    return { date, time };
+}
 
 
 
+const Card = (item) => {
+
+    console.log(item);
     return (
         <>
-            <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 className='event_card' >
+                <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>
         </>
     )
diff --git a/src/Components/MeetPage/index.jsx b/src/Components/MeetPage/index.jsx
index 8d9ee36..a3ba221 100644
--- a/src/Components/MeetPage/index.jsx
+++ b/src/Components/MeetPage/index.jsx
@@ -3,13 +3,37 @@ import styles from './style.module.scss';
 import clock from '../../img/MeetPage/Clock.png';
 import globe from '../../img/MeetPage/Globe.png';
 import avatar from '../../img/MeetPage/avatar.png';
+import { HttpApiMethods } from '../fetchUtils/FetchUtils';
+import {useState} from 'react'
 import { style } from "@mui/system";
 import Card from "../Card";
 import Grid from '@mui/material/Grid';
 import Box from '@mui/material/Box';
 
-const MeetPage = () => {
 
+const httpApiMethods = new HttpApiMethods()
+const meets = await httpApiMethods.GetMeetings()
+
+const MeetPage = () => {
+   
+    const filterMeet = meets.filter( (item, index) => index <= 3 )
+    console.log(filterMeet)
+    const id = 5
+    console.log(httpApiMethods.APIURL_FILES + meets[id].speackerImage)
+    const meetPng = (id) => {
+        console.log(httpApiMethods.APIURL_FILES + meets[id].speackerImage)
+        return httpApiMethods.APIURL_FILES + meets[id].speackerImage 
+        
+    }
+    console.log(meetPng(id))
+    function extractDateTime(dateString) {
+        const dateTime = new Date(dateString);
+        const date = dateTime.toLocaleDateString();
+        const time = dateTime.toLocaleTimeString();
+        
+        return { date, time };
+    }
+    
     return (
         <>
             <Header></Header>
@@ -21,7 +45,7 @@ const MeetPage = () => {
                     <div className={styles.meets__mainInfo_status}><img className={styles.meets__mainInfo_status_img} src={clock} alt="clock"></img> <span>Онлайн</span> </div>
                     <div className={styles.meets__mainInfo_time}><img className={styles.meets__mainInfo_status_img} src={globe} alt="globe"></img> <span>22 декабря, с 10:00 до 22:00 по Московскому времени</span> </div>
                 </div>
-                <div className={styles.meets__img}></div>
+                <div className={styles.meets__img}><img src={meetPng(id)}></img></div>
                
             </section>
             <div className={styles.meets__otziv_container}>
@@ -50,18 +74,28 @@ const MeetPage = () => {
             <div className={styles.someMeetings__title}>Еще мероприятия</div>
             <Box sx={{ flexGrow: 1 }}>
                 <Grid container spacing={1}>
-                <Grid item xs={6}  md={4} lg={3} >
-                    <Card></Card>
-                </Grid>
-                <Grid item xs={6}  md={4} lg={3} >
-                    <Card></Card>
-                </Grid>
-                <Grid item xs={6} md={4} lg={3} >
-                    <Card></Card>
-                </Grid>
-                <Grid item xs={6}  md={4} lg={3} >
-                    <Card></Card>
-                </Grid>
+                    {Array.isArray(meets) ? (
+                        filterMeet.map((item, index) => (
+                        
+                            
+                            <Grid item sm={6} xl={3} md={6} lg={4} key={index}>
+                               <div className='event_card' >
+                                    <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>
+                            </Grid>
+                        
+                        
+                        
+                        ))
+                    ) : (
+                        <p>Неверный тип данных с сервера!</p>
+                )}
                 
                 </Grid>
             </Box>
diff --git a/src/Components/MeetPage/style.module.scss b/src/Components/MeetPage/style.module.scss
index bc1a9bf..63377ff 100644
--- a/src/Components/MeetPage/style.module.scss
+++ b/src/Components/MeetPage/style.module.scss
@@ -6,7 +6,13 @@
     &__img {
         width: 44%;
         height: 300px;
-        background-color: #D9D9D9;
+        
+        
+        img {
+            
+            height: 100%;
+            
+        }
     }
     &__mainInfo {
         &_container {
diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
index 3cd193d..0397b86 100644
--- a/src/components/Home/Home.jsx
+++ b/src/components/Home/Home.jsx
@@ -7,7 +7,14 @@ import EditForm from '../post/PostForm';
 import Grid from '@mui/material/Grid';
 import Card from '../Card';
 import Box from '@mui/material/Box';
-  
+
+function extractDateTime(dateString) {
+    const dateTime = new Date(dateString);
+    const date = dateTime.toLocaleDateString();
+    const time = dateTime.toLocaleTimeString();
+    
+    return { date, time };
+}
 
 const httpApiMethods = new HttpApiMethods()
 
@@ -16,13 +23,7 @@ const meets = await httpApiMethods.GetMeetings()
 
 const Home = () => {
     const [count, setCount] = useState(7)
-    function extractDateTime(dateString) {
-        const dateTime = new Date(dateString);
-        const date = dateTime.toLocaleDateString();
-        const time = dateTime.toLocaleTimeString();
-        
-        return { date, time };
-    }
+   
     const filterMeet = meets.filter( (item, index) => index <= count )
     const allMeets = () => {
         setCount(meets.length)
@@ -38,15 +39,15 @@ const Home = () => {
                     
                         
                         <Grid item sm={6} xl={3} md={6} lg={4} key={index}>
-                        <div className='event_card' >
-                            <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 className='event_card' >
+                                <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>
-                            <h4 className="event-card__title">{item.title}</h4>
-                            <p className="event-card__date">{extractDateTime(item.time).date}, в {extractDateTime(item.time).time} по Московскому времени</p>
-                        </div>
                         </Grid>