raise page image size

Author: chiknas

components/gallery/CarouselImageView.tsx

@@ -14,22 +14,18 @@ export const CarouselImageView: React.FunctionComponent<CarouselViewProps> = ({
 }) => {
   const { serverUrl, serverKey } = useContext<GlobalContextType>(GlobalContext);
   const [image, setImage] = useState("");
-
   useEffect(() => {
-    if (views && currentIndex) {
+    if (views && currentIndex != undefined) {
       fetch(`${serverUrl}/api/files/thumbnail/${views[currentIndex].alt}`, {
         method: "GET",
         headers: {
           Authorization: serverKey,
         },
       })
         .then((res) => res.blob())
-        .then((blob) => {
-          console.log(views);
-          setImage(URL.createObjectURL(blob));
-        });
+        .then((blob) => setImage(URL.createObjectURL(blob)));
     }
-  }, [currentIndex, serverUrl, serverKey]);
+  }, [currentIndex, views, serverUrl, serverKey]);
 
   return (
     <div {...innerProps} style={{ width: "100%", height: "auto" }}>

components/gallery/SwanGallery.tsx

@@ -10,6 +10,7 @@ import { Button } from "@material-ui/core";
 export const SwanGallery: React.FunctionComponent = () => {
   const [photos, setPhotos] = useState<PhotoProps[]>([]);
   const [currentImage, setCurrentImage] = useState(0);
+  const [carouselIndex, setCarouselIndex] = useState(0);
   const [viewerIsOpen, setViewerIsOpen] = useState(false);
   const { serverUrl, serverKey } = useContext<GlobalContextType>(GlobalContext);
   const [cursor, setCursor] = useState<string | undefined>();
@@ -22,6 +23,7 @@ export const SwanGallery: React.FunctionComponent = () => {
 
   const closeLightbox = () => {
     setCurrentImage(0);
+    setCarouselIndex(0);
     setViewerIsOpen(false);
   };
 
@@ -76,16 +78,18 @@ export const SwanGallery: React.FunctionComponent = () => {
             <Carousel
               trackProps={{
                 onViewChange: (view: number) => {
-                  setCurrentImage(view);
+                  setCarouselIndex(view);
                 },
               }}
-              currentIndex={currentImage}
+              currentIndex={carouselIndex}
               components={{ View: CarouselImageView }}
-              views={photos.map((photo) => ({
-                source: "/loading.gif",
-                alt: photo.key,
-                caption: photo.alt,
-              }))}
+              views={photos
+                .slice(currentImage, currentImage + 25)
+                .map((photo) => ({
+                  source: "/loading.gif",
+                  alt: photo.key,
+                  caption: photo.alt,
+                }))}
             />
           </Modal>
         ) : null}

components/pages/PageContainer.tsx

@@ -1,14 +1,18 @@
 import Head from "next/head";
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 import styles from "styles/Home.module.css";
 import AppBar from "@material-ui/core/AppBar";
 import Toolbar from "@material-ui/core/Toolbar";
 import Typography from "@material-ui/core/Typography";
-import { InputBase } from "@material-ui/core";
+import { Button, InputBase } from "@material-ui/core";
 import { GlobalContextType, GlobalContext } from "services/GlobalContext";
 import { sha256 } from "js-sha256";
+import IconButton from "@material-ui/core/IconButton";
+import HttpsRoundedIcon from "@material-ui/icons/HttpsRounded";
 
 export const PageContainer: React.FunctionComponent = ({ children }) => {
+  const [url, setUrl] = useState("");
+  const [key, setKey] = useState("");
   const { setServerUrl, setServerKey } = useContext<GlobalContextType>(
     GlobalContext
   );
@@ -22,16 +26,24 @@ export const PageContainer: React.FunctionComponent = ({ children }) => {
             <InputBase
               autoFocus={true}
               placeholder="Server URL"
-              onChange={(event) => setServerUrl(event.target.value)}
+              onChange={(event) => setUrl(event.target.value)}
             />
           </div>
           <div className={styles.search}>
             <InputBase
               type="password"
               placeholder="Password"
-              onChange={(event) => setServerKey(sha256(event.target.value))}
+              onChange={(event) => setKey(sha256(event.target.value))}
             />
           </div>
+          <IconButton
+            onClick={() => {
+              setServerUrl(url);
+              setServerKey(key);
+            }}
+          >
+            <HttpsRoundedIcon />
+          </IconButton>
         </Toolbar>
       </AppBar>
 

hooks/useFiles.tsx

@@ -10,7 +10,7 @@ export const useFiles = (
 
   useEffect(() => {
     const cursorUrlParam = cursor ? `cursor=${cursor}&` : "";
-    const limitParam = "limit=50";
+    const limitParam = "limit=1000";
 
     if (serverUrl && serverKey) {
       fetch(`${serverUrl}/api/files?${cursorUrlParam}${limitParam}`, {

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.11.3",
+    "@material-ui/icons": "^4.11.2",
     "js-sha256": "^0.9.0",
     "next": "10.1.3",
     "react": "17.0.2",

styles/Home.module.css

@@ -131,6 +131,7 @@
   border-radius: 5px;
   border-radius: 3;
   padding-left: 5px;
+  padding-right: 5px;
   background-color: #c0d2f8;
   margin-left: 15px;
   width: auto;

yarn.lock

@@ -89,6 +89,13 @@
     react-is "^16.8.0 || ^17.0.0"
     react-transition-group "^4.4.0"
 
+"@material-ui/icons@^4.11.2":
+  version "4.11.2"
+  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5"
+  integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+
 "@material-ui/styles@^4.11.3":
   version "4.11.3"
   resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.3.tgz#1b8d97775a4a643b53478c895e3f2a464e8916f2"