Add image gallery

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "build": "webpack --config webpack/build.config.js",
-    "serve": "webpack serve --env API_HOST=https://d1tapi.dabulgaria.bg --config webpack/serve.config.js"
+    "serve": "webpack serve --env API_HOST=https://api.tibroish.bg --config webpack/serve.config.js"
   },
   "author": "",
   "dependencies": {
@@ -31,6 +31,7 @@
     "normalize.css": "^8.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-image": "^4.0.3",
     "react-reveal": "^1.2.2",
     "react-router-dom": "^5.2.0",
     "react-use-keypress": "^1.2.0",

src/components/process_protocols/ProtocolPhotos.js

@@ -2,8 +2,10 @@ import React, { useState, useEffect } from 'react';
 
 import styled from 'styled-components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import { faChevronLeft, faChevronRight, faTh } from '@fortawesome/free-solid-svg-icons';
 import useKeypress from 'react-use-keypress';
+import { SpinnerCircularFixed } from 'spinners-react';
+import { Img } from 'react-image';
 
 const PhotoSection = styled.div`
     width: 50vw;
@@ -42,6 +44,56 @@ const PageNavButton = styled.button`
     }
 `;
 
+const PhotoGallery = styled.div`
+    width: 50vw;
+    height: 100vh;
+    overflow-y: auto;
+    background-color: black;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    //img {
+    //    width: calc(100% / 3);
+    //    margin-top: 20px;
+    //}
+`;
+
+const GalleryButton = styled.button`
+    color: white;
+    position: absolute;
+    top: 10px;
+    left: 5px;
+    cursor: pointer;
+    background: none;
+    border: none;
+    font-size: 36px;
+    border-radius: 10px;
+
+    &:hover {
+        background-color: #333;
+    }
+`;
+
+const GalleryPhotoButton = styled.button`
+    width: calc(100% / 3);
+    cursor: pointer;
+    background: none;
+    border: none;
+    //margin: 5px;
+    padding: 5px;
+
+    img {
+        width: 100%;
+    }
+
+    &:hover {
+        img {
+            box-shadow: 0px 0px 20px yellow;
+        }
+    }
+`;
+
 export default props => {
     const [page, setPage] = useState(0);
 
@@ -75,10 +127,66 @@ export default props => {
     };
 
     return(
+        page === null?
+            <PhotoGallery>
+                {props.protocol.pictures.map((picture, i) => 
+                    <GalleryPhotoButton>
+                        <Img
+                            src={picture.url}
+                            onClick={()=>setPage(i)}
+                            loader={
+                                <SpinnerCircularFixed 
+                                    speed={400}
+                                    color={'#ddd'}
+                                    secondaryColor={'#aaa'}
+                                    thickness={70}
+                                />
+                            }
+                        />
+                    </GalleryPhotoButton>
+                )}
+            </PhotoGallery> :
+            <PhotoSection>
+                <GalleryButton onClick={() => setPage(null)}>
+                    <FontAwesomeIcon icon={faTh}/>
+                </GalleryButton>
+                {pageNav()}
+                {props.protocol.pictures.map((picture, i) => 
+                    <Img 
+                        style={page === i? {} : {display: 'none'}}
+                        src={picture.url}
+                        loader={
+                            <SpinnerCircularFixed 
+                                speed={400}
+                                color={'#ddd'}
+                                secondaryColor={'#aaa'}
+                                thickness={70}
+                            />
+                        }
+                    />
+                )}
+                {pageNav()}
+            </PhotoSection>
+    );
+
+    /*return(
         <PhotoSection>
             {pageNav()}
-            <img src={props.protocol.pictures[page].url}/>
+            {props.protocol.pictures.map((picture, i) => 
+                <Img 
+                    style={page === i? {} : {display: 'none'}}
+                    src={picture.url}
+                    loader={
+                        <SpinnerCircularFixed 
+                            speed={400}
+                            color={'#ddd'}
+                            secondaryColor={'#aaa'}
+                            thickness={70}
+                        />
+                    }
+                />
+            )}
             {pageNav()}
         </PhotoSection>
-    );
+    );*/
 };