From 70adf67e0a4c6eb1188dba4a697b8f5e281069fc Mon Sep 17 00:00:00 2001
From: NikoHakala <Niko_hakala_94@hotmail.com>
Date: Wed, 9 Oct 2019 20:52:38 +0300
Subject: [PATCH] ModalList Test

---
 src/Components/Home.js      |  3 +-
 src/Components/ModalList.js | 57 +++++++++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 src/Components/ModalList.js

diff --git a/src/Components/Home.js b/src/Components/Home.js
index a8e6b0f..40c904f 100644
--- a/src/Components/Home.js
+++ b/src/Components/Home.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import ModalGrid from './ModalGrid';
+import ModalList from './ModalList';
 
 const Home = () => {
     return (
         <div>
             <div className="wrapper">
                 <h1 style={{padding:10}}>Welcome to TinyForest</h1>
-                <ModalGrid/>
+                <ModalList/>
             </div>
         </div>
     );
diff --git a/src/Components/ModalList.js b/src/Components/ModalList.js
new file mode 100644
index 0000000..b8f03ec
--- /dev/null
+++ b/src/Components/ModalList.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import Modal from '@material-ui/core/Modal';
+import Typography from '@material-ui/core/Typography';
+
+import '../App.css';
+
+const ModalList = () => {
+
+    const [open, setOpen] = React.useState(false);
+
+    const imageList = [
+        { url: "../Photos/kolvaus1.jpeg", desc: "Kolvaus kuva" },
+        { url: "../Photos/rpiMoist.jpeg", desc: "rpi Vesianturi" },
+        { url: "../Photos/rpiPek.jpeg", desc: "Pekan testit" },
+        { url: "../Photos/rpiTemp.jpeg", desc: "rpi Lämpöanturi" },
+        { url: "../Photos/konstaRpi.jpeg", desc: "Konstan testit" },
+        { url: "../Photos/kokous1.jpeg", desc: "Kokous kuva" }
+    ]
+    const handleOpen = (e) => {
+        e.preventDefault();
+        imageList.filter((item, index) => parseInt(e.target.id ) !== index)
+        setOpen(true);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    return (
+        <div>
+            <div className="modal-wrapper">
+                {imageList.map((item, index) =>
+                <div key={index}>
+                    <button type="button" onClick={handleOpen}>
+                        <img id="imageIndex" alt="Broken" src={item.url} width="250"></img>
+                    </button>
+                    
+                    <Modal 
+                        open={open}
+                        onClose={handleClose}
+                    >
+                        <div className="Modaldiv">
+                            <img alt="Broken" src={item.url} width="800"></img>
+                            <Typography variant="body1">{item.desc}</Typography>
+                            {console.log(index)}
+                        </div>
+
+                    </Modal>
+                </div>)
+                }
+                
+            </div>
+        </div>
+    );
+};
+
+export default ModalList;
\ No newline at end of file