Minor adjustment/refactoring

resolves #1
resolves #2

README.md

@@ -22,7 +22,7 @@ After performing these steps, the next time you open CCM2, you will see your col
 ### Contribute
 The project includes configuration for [VSCode development containers](https://code.visualstudio.com/docs/remote/containers) which should be the preffered environment to develop new features of the app. The container automatically sets up a whole Tauri development environment including Typescript & Rust plugins for VSCode.
 
-Also, in directory `hooks/` you find some helpful git hooks that automate/standardize some work. You can activate these hooks by executing the script `activate_hooks.sh` from within the `hooks/` directory. 
+Also, in directory `hooks/` you find some helpful git hooks that automate/standardize some work. You can activate these hooks by executing the script `activate_hooks.sh` from within the `hooks/` directory. If you are receiving errors like `fatal: cannot run .git/hooks/pre-commit: No such file or directory`, check the line-end sequence of the hook scripts, adjust them according to your system and run `activate_hooks.sh` again. 
 
 Additionally, if you want to run the GUI out of the container, you need to use a X11 tool. I will briefly explain how to run them in order to display the GUI from the container:
 
@@ -38,7 +38,7 @@ Now, you can start a GUI app in your container that will be displayed via the X-
 
 ### Local Run & Building
 * Execute  `yarn` to install all NodeJS dependencies when you initially check out the project. Make sure you are in the Tauri project directory.
-* Execute `yarn tauri dev` to run the application in development mode. Make sure you are in the Tauri project directory. If you run this for the first  time, it will quite long since it needs to fetch all Rust-based dependencies and build corresponding binaries. If you make changes to the Rust code of the project, it will also take a while (but not as long as the initial run), since it has to recompile binaries.
+* Execute `yarn tauri dev` to run the application in development mode. Make sure you are in the Tauri project directory. If you run this for the first time, this will take quite a long time, since it needs to fetch all Rust-based dependencies and build corresponding binaries. If you make changes to the Rust code of the project, it will also take a while (but not as long as the initial run), since it has to recompile binaries.
 * Execute `yarn tauri build`  to build the application. Right now, Tauri only supports building for the local architecture. Since the development container is based on Linux, this means you will build Linux packages via this command.
 
 ### Remote Building

card-collection-manager-2/package.json

@@ -1,7 +1,7 @@
 {
   "name": "card-collection-manager-2",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "scripts": {
     "dev": "next dev -p 1420",
     "build": "next build && next export -o dist",

card-collection-manager-2/src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "card-collection-manager-2"
-version = "1.0.0"
+version = "1.0.1"
 description = "A Tauri App"
 authors = ["you"]
 license = ""

card-collection-manager-2/src-tauri/config.json

@@ -1 +0,0 @@
-{"dataStorage":"/home/dev/cards","defaultGame":"Magic"}

card-collection-manager-2/src/components/modals/ImageModal.tsx

@@ -1,11 +1,9 @@
 import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { invoke } from "@tauri-apps/api/tauri";
 
 import { GrNext, GrPrevious } from "react-icons/gr";
-import { RotatingLines } from "react-loader-spinner";
 
 import ModalTemplate from "../templates/ModalTemplate";
-import Image from "next/image";
+import CardImageWithLoader from "../templates/CardImageWithLoader";
 
 /**
  * Modal to display a set of images.
@@ -25,43 +23,24 @@ const ImageModal: React.FC<{
   startIndex?: number;
 }> = (props) => {
 
-  // current image as base-64 string
-  const [imageB64, setImageB64] = useState<string>("");
   // index of current image in `props.images`
   const [imageIndex, setImageIndex] = useState<number>(0);
-  // flag to display the loading image
-  const [loaderVisible, setLoaderVisible] = useState<boolean>(true);
 
   useEffect(() => {
     if (props.visible && props.images) {
-      setLoaderVisible(true);
       setImageIndex(props.startIndex | 0);
-      loadImage(props.startIndex | 0);
     }
   }, [props.visible]);
 
-  const loadImage = async (id: number) => {
-    invoke("get_image_b64", { image: props.images[id], game: props.game }).then(
-      (result) => {
-        setImageB64(result as string);
-        setLoaderVisible(false);
-      }
-    );
-  };
-
   const loadNextImage = () => {
     if(imageIndex < props.images.length -1){
-      setLoaderVisible(true);
       setImageIndex(imageIndex + 1);
-      loadImage(imageIndex + 1);
     }
   }
 
   const loadPreviousImage = () => {
     if(imageIndex > 0){
-      setLoaderVisible(true);
       setImageIndex(imageIndex - 1);
-      loadImage(imageIndex - 1);
     }
   }
 
@@ -74,19 +53,7 @@ const ImageModal: React.FC<{
           modalStyle=" w-[80%] h-[80%]"
         >
           <div className="relative h-[90%] mx-8">
-            {loaderVisible
-            ? 
-              <div className="w-full h-[90%] flex items-center justify-center">
-                <RotatingLines
-                strokeColor="grey"
-                strokeWidth="5"
-                animationDuration="0.75"
-                width="96"
-                />
-              </div>  
-            : 
-              <Image src={imageB64} layout="fill" objectFit="contain" />
-            }
+            <CardImageWithLoader images={props.images} index={imageIndex} game={props.game} />
           
             {/* next/previous image icons */}
             {props.images.length > 1 ? (

card-collection-manager-2/src/components/templates/CardImageWithLoader.tsx

@@ -0,0 +1,75 @@
+import React, { Suspense } from "react";
+import { invoke } from "@tauri-apps/api/tauri";
+import Image from "next/image";
+
+import SpinnerLoader from "./SpinnerLoader";
+
+// Promise wrapper that acts as an interface for a component to work with React.Suspense.
+const wrapPromise = <T,>(promise: Promise<T>) => {
+  let status = 'pending'; // set initial status
+  let result: T;
+  let error: any;
+
+  // resolve promise
+  let suspender = promise.then(
+    (res) => {
+      status = 'success';
+      result = res;
+    },
+    (err) => {
+      status = 'error';
+      error = err;
+    }
+  );
+
+  return {
+    read() {
+      switch (status) {
+        case 'pending': throw suspender;
+        case 'error': throw error;
+        default: return result;
+      }
+    }
+  };
+};
+
+// Get the promise that returns the image data as base-64 string once it resolves.
+const loadImagePromise = (images: string[], index: number, game: string) => {
+    return invoke("get_image_b64", { image: images[index], game: game})
+    .then(res => res as string)
+    .catch(err => err)
+  }
+
+  // wrap image data promise inside the "Suspense interface"
+const loadImageWrapped = (images: string[], index: number, game: string) => {
+  const imagePromise = loadImagePromise(images, index, game);
+  return wrapPromise(imagePromise);
+};
+
+// Image component that can be used with React.Suspense 
+const CardImageSuspendable: React.FC<{ resource: any }> = (props) => {
+  const imageB64: string = props.resource.read();
+  return (
+    <Image src={imageB64} layout="fill" objectFit="contain" />
+  )
+};
+
+/**
+ * This component loads an image from the backend and displays it. It uses React.Suspense in order
+ * to display a loading animation until the image data is loaded.
+ * 
+ * # Props:
+ * * game       - Name of the game for which images should be displayed.
+ * * images     - List of image names. From this list, one image is loaded and displayed at a time.
+ * * index      - index that indicates which element from `props.images` should be displayed. 
+ */
+const CardImageWithLoader: React.FC<{images: string[], index: number, game: string}> = (props) => {
+
+  return (
+      <Suspense fallback={<SpinnerLoader/>}>
+        <CardImageSuspendable resource={loadImageWrapped(props.images, props.index, props.game)} />
+      </Suspense>
+  );
+};
+
+export default CardImageWithLoader;

card-collection-manager-2/src/components/templates/CreateEditModalTemplate.tsx

@@ -300,7 +300,7 @@ const CreateEditModalTemplate: React.FC<{
                 </select>
 
                 <label className="text-sm col-span-1">Set No.</label>
-                <input type="number"
+                <input type="text"
                   className="text-sm col-span-2 border-2"
                   defaultValue={""}
                   ref={setNoRef}

card-collection-manager-2/src/components/templates/IntegerInput.tsx

@@ -1,8 +1,37 @@
 import React, { forwardRef } from "react";
 
 /**
- * HTMLInput Element for numeric values with additional validation so that only positive integer
+ * Input element for numeric values with additional validation so that only positive integer
  * values can be entered.
+ * 
+ * Optional Props:
+ * ===============
+ * - min            (number)                    minimal value of field's value                      (default: 1)
+ * - step           (number)                    step/Distance between successive values             (default: 1)
+ * - defaultValue   (number)                    default value of the field                          (default: 1)
+ * - className      (string)                    component styling                                   (default: "")
+ * - required       (boolean)                   indicator, wheter this field is mandatory           (default: false)
+ * - ref            (React.MutableRefObject)    useRef hook to perist the value between rendering   (default: null)
+ * 
+ * Usage example:
+ * ==============
+ * ```
+ * import React, { useRef }from "react";
+ * 
+ * const UsageExample: React.FC<{}> = () => {
+ *   const inputRef = useRef<HTMLInputElement>(null);
+ * 
+ *   const printValue = () => {
+ *     console.log(Number.parseInt(inputRef.current!.value))
+ *   }
+ * 
+ *   return (
+ *     <div>
+ *       <IntegerInput ref={inputRef} />
+ *       <button onClick(printValue)>Click</button>
+ *     <div>
+ *   );
+ * }
  */
 
 const IntegerInput = forwardRef((props: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, ref: React.MutableRefObject<HTMLInputElement>) => {

card-collection-manager-2/src/components/templates/SpinnerLoader.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { RotatingLines } from "react-loader-spinner";
+
+/**
+ * Simple loading animation with rotating lines.
+ * see also: https://mhnpd.github.io/react-loader-spinner/docs/components/rotating-lines
+ */
+const SpinnerLoader: React.FC<{}> = () => {
+  return (
+    <div className="w-full h-[90%] flex items-center justify-center">
+      <RotatingLines
+        strokeColor="grey"
+        strokeWidth="5"
+        animationDuration="0.75"
+        width="96"
+      />
+    </div>
+  );
+};
+
+export default SpinnerLoader;

version

@@ -1 +1 @@
-1.0.0
+1.0.1