Add iteration through screenshot array in frontend/src/component/Event.js

backend/server.js

@@ -11,7 +11,7 @@ const mongoUri = process.env.MONGO_URI || 'mongodb://127.0.0.1:27017/default?rep
 const minioURI = new URL(process.env.MINIO_URI || 'http://kspace-mugshot:2mSI6HdbJ8@127.0.0.1:9000/kspace-mugshot');
 const minioBucket = minioURI.pathname.substring(1);
 console.info("Using bucket:", minioBucket);
-const historyNumber = parseInt(process.env.HISTORY_AMOUNT) || 1000;
+const historyNumber = parseInt(process.env.HISTORY_AMOUNT) || 10;
 
 // Stream set-up variables
 let changeStream;
@@ -39,7 +39,7 @@ async function run() {
   app.get('/events', async function (request, response) {
     let minioClient = new minio.Client({
       endPoint: minioURI.hostname,
-      port: parseInt(minioURI.port) || (minioURI.protocol == 'https' ? 443 : 80),
+      port: parseInt(minioURI.port) || (minioURI.protocol == 'https:' ? 443 : 80),
       useSSL: minioURI.protocol == 'https:',
       accessKey: minioURI.username,
       secretKey: minioURI.password

docker-compose.yml

@@ -12,7 +12,7 @@ x-common: &common
   MINIO_ACCESS_KEY: kspace-mugshot
   MINIO_SECRET_KEY: 2mSI6HdbJ8
   MINIO_DEFAULT_BUCKETS: kspace-mugshot:download
-  MINIO_URI: 'https://kspace-mugshot:2mSI6HdbJ8@127.0.0.1:9000/kspace-mugshot'
+  MINIO_URI: 'http://kspace-mugshot:2mSI6HdbJ8@127.0.0.1:9000/kspace-mugshot'
 
 services:
 

frontend/src/components/event/Event.js

@@ -3,9 +3,19 @@ import "./Event.css";
 
 function Event(props) {
 
+    let imgArray = [];
+
+    if (props.data.hasOwnProperty('screenshots')) {
+        props.data.screenshots.forEach(element => {
+            imgArray = [(<img src={element.url} className="eventPic"></img>), ...imgArray]
+        });
+    }
+
     return (
         <div className="eventDiv">
-            {props.screenshots ? <img className="eventPic" src={props.screenshots[0].url}></img> : JSON.stringify(props)}
+            {JSON.stringify(props.data)}
+            <br></br>
+            {[...imgArray]}
         </div>
     );
 }