idImg

src/Components/Card/index.jsx

@@ -1,22 +1,32 @@
 import './style.module.scss';
 
 
+import { HttpApiMethods } from '../fetchUtils/FetchUtils';
 
-
+const httpApiMethods = new HttpApiMethods()
-const Card = () => {
+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' >
-                <div className="event-card__photo" />
+                <div className="event-card__photo"><img className='img' src={httpApiMethods.APIURL_FILES + item.speackerImage} alt="{item.speackerImage}" /></div>
-                <div className="taggs">
+                    <div className="taggs">
-                <div className='tagged'>Психология</div>
+                        <div className='tagged'>{item.tags}</div>
-                <div className="feautures">Предстоящее</div>
+                        <div className="feautures">{item.type}</div>
-                </div>
+                    </div>
-                <h4 className="event-card__title">Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»</h4>
+                <h4 className="event-card__title">{item.title}</h4>
-                <p className="event-card__date">22 декабря, с 10:00 до 22:00 по Московскому времени</p>
+                <p className="event-card__date">{extractDateTime(item.time).date}, в {extractDateTime(item.time).time} по Московскому времени</p>
             </div>
         </>
     )

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} >
+                    {Array.isArray(meets) ? (
-                    <Card></Card>
+                        filterMeet.map((item, index) => (
-                </Grid>
+                        
-                <Grid item xs={6}  md={4} lg={3} >
+                            
-                    <Card></Card>
+                            <Grid item sm={6} xl={3} md={6} lg={4} key={index}>
-                </Grid>
+                               <div className='event_card' >
-                <Grid item xs={6} md={4} lg={3} >
+                                    <div className="event-card__photo"><img className='img' src={httpApiMethods.APIURL_FILES + item.speackerImage} alt="{item.speackerImage}" /></div>
-                    <Card></Card>
+                                        <div className="taggs">
-                </Grid>
+                                            <div className='tagged'>{item.tags}</div>
-                <Grid item xs={6}  md={4} lg={3} >
+                                            <div className="feautures">{item.type}</div>
-                    <Card></Card>
+                                        </div>
-                </Grid>
+                                    <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>

src/Components/MeetPage/style.module.scss

@@ -6,7 +6,13 @@
     &__img {
         width: 44%;
         height: 300px;
-        background-color: #D9D9D9;
+        
+        
+        img {
+            
+            height: 100%;
+            
+        }
     }
     &__mainInfo {
         &_container {

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' >
-                            <div className="event-card__photo"><img className='img' src={httpApiMethods.APIURL_FILES + item.speackerImage} alt="{item.speackerImage}" /></div>
+                                <div className="event-card__photo"><img className='img' src={httpApiMethods.APIURL_FILES + item.speackerImage} alt="{item.speackerImage}" /></div>
-                            <div className="taggs">
+                                    <div className="taggs">
-                                <div className='tagged'>{item.tags}</div>
+                                        <div className='tagged'>{item.tags}</div>
-                                <div className="feautures">{item.type}</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>