Merge pull request #873 from itdagene-ntnu/fix-galleri-refreshing

Fix galleri refreshing bug where
itdagene-ntnu · Feb 21, 2023 · e748e76 · e748e76
2 parents 48e3ed2 + ac4273d
commit e748e76
Show file tree

Hide file tree

Showing 3 changed files with 295 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -45,6 +45,7 @@
     "relay-hooks": "3.7.0",
     "relay-runtime": "^10.1.2",
     "seedrandom": "^3.0.5",
+    "sharp": "^0.31.3",
     "styled-components": "^5.3.6",
     "video-react": "^0.15.0"
   },

diff --git a/pages/galleri/index.tsx b/pages/galleri/index.tsx
@@ -3,6 +3,13 @@ import styled from 'styled-components';
 import { useCallback, useEffect, useState } from 'react';
 import Image from 'next/image';
 import { itdageneBlue } from '../../utils/colors';
+import {
+  withDataAndLayout,
+  WithDataAndLayoutProps,
+  WithDataDataProps,
+} from '../../lib/withData';
+import { omItdagene_QueryResponse } from '../../__generated__/omItdagene_Query.graphql';
+import { graphql } from 'react-relay';
 
 const images = [
   'DSC_1043.jpg',
@@ -55,6 +62,8 @@ const SingleImg = styled(Image)`
 
   width: 100%;
   height: 100%;
+  width: auto;
+
   object-fit: cover;
 
   &:hover {
@@ -68,6 +77,7 @@ const SingleImg = styled(Image)`
 const FullScreenImageDiv = styled('div')`
   width: 850px;
   cursor: pointer;
+  width: auto;
 
   width: cals(100%-40px);
   height: cals(100%-40px);
@@ -96,7 +106,10 @@ const Title = styled('h1')`
   margin-bottom: 1rem;
 `;
 
-export default function Test() {
+const Galleri = ({
+  error,
+  props,
+}: WithDataAndLayoutProps<omItdagene_QueryResponse>): JSX.Element => {
   const [slideNumber, setSlideNumber] = useState(0);
   const [openModal, setOpenModal] = useState(false);
 
@@ -178,49 +191,73 @@ export default function Test() {
       document.removeEventListener('keydown', changeImageOnKey);
     };
   });
-
   return (
     <>
-      <Layout noLoading responsive>
-        {openModal && (
-          <SliderWrap>
-            <StyledButton
-              name="close-circl d-outline"
-              top="40px"
-              onClick={handleCloseModal}
+      {openModal && (
+        <SliderWrap>
+          <StyledButton
+            name="close-circl d-outline"
+            top="40px"
+            onClick={handleCloseModal}
+          />
+          <StyledButton
+            name="arrow-back-outline"
+            left="40px"
+            onClick={prevSlide}
+          />
+          <StyledButton name="arrow-forward-outline" onClick={nextSlide} />
+          <FullScreenImageDiv onClick={handleCloseModal}>
+            <FullScreenImage
+              src={`https://cdn.itdagene.no/${images[slideNumber]}`}
+              alt={images[slideNumber]}
+              width={850}
+              height={330}
             />
-            <StyledButton
-              name="arrow-back-outline"
-              left="40px"
-              onClick={prevSlide}
+          </FullScreenImageDiv>
+        </SliderWrap>
+      )}
+
+      <Title>Galleri</Title>
+      <GalleryWrap>
+        {images.map((slide, index) => (
+          <Single key={slide} onClick={() => handleOpenModal(index)}>
+            <SingleImg
+              src={`https://cdn.itdagene.no/${slide}`}
+              alt={slide}
+              width={450}
+              height={230}
+              quality={100}
             />
-            <StyledButton name="arrow-forward-outline" onClick={nextSlide} />
-            <FullScreenImageDiv onClick={handleCloseModal}>
-              <FullScreenImage
-                src={`https://cdn.itdagene.no/${images[slideNumber]}`}
-                alt={images[slideNumber]}
-                width={850}
-                height={330}
-              />
-            </FullScreenImageDiv>
-          </SliderWrap>
-        )}
-
-        <Title>Galleri</Title>
-        <GalleryWrap>
-          {images.map((slide, index) => (
-            <Single key={slide} onClick={() => handleOpenModal(index)}>
-              <SingleImg
-                src={`https://cdn.itdagene.no/${slide}`}
-                alt={slide}
-                width={450}
-                height={230}
-                quality={100}
-              />
-            </Single>
-          ))}
-        </GalleryWrap>
-      </Layout>
+          </Single>
+        ))}
+      </GalleryWrap>
     </>
   );
-}
+};
+
+export default withDataAndLayout(Galleri, {
+  query: graphql`
+    query galleri_Query {
+      currentMetaData {
+        year
+        id
+        boardMembers {
+          ...BoardMember_user
+          id
+          role
+          fullName
+        }
+      }
+
+      omItdagene: page(slug: "om-itdagene") {
+        ...PageView_page
+        ...metadata_metadata
+      }
+    }
+  `,
+  variables: {},
+  layout: ({ props, error }: WithDataDataProps<omItdagene_QueryResponse>) => ({
+    responsive: true,
+    metadata: props ? props.omItdagene : undefined,
+  }),
+});