Feature/frontend images (#79)

* Added frontend images

* Fixed random not working when roles disabled

Author: garyorsargos

ui/src/components/custom/matrixLoader.tsx

@@ -3,7 +3,13 @@ import axios from "axios";
 import { useMultiMatrix } from "./multiMatrixProvider";
 
 const MatrixLoader: React.FC = () => {
-  const { setMultiMatrix, setConfig, setItemIdMap, setRawItems } = useMultiMatrix();
+  const { 
+    setMultiMatrix, 
+    setConfig, 
+    setItemIdMap, 
+    setRawItems,
+    setItemImages 
+  } = useMultiMatrix();
 
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
@@ -61,6 +67,15 @@ const MatrixLoader: React.FC = () => {
             // Save raw items into provider (we'll let the UI decide which ones to display)
             setRawItems(matrixData.items);
 
+            // Load images data into the provider context if available
+            if (matrixData.images && Array.isArray(matrixData.images)) {
+              console.log("Loading images into context:", matrixData.images.length);
+              setItemImages(matrixData.images);
+            } else {
+              console.log("No images found in matrix data");
+              setItemImages([]);
+            }
+
             // Set the config, including hosts, participants, and the current user's email.
             setConfig({
               r2Multi: matrixData.r2Multi,
@@ -81,8 +96,12 @@ const MatrixLoader: React.FC = () => {
 
             // For backwards compatibility (when roleBased is false), apply filtering based on randomAssignment.
             let processedItems = matrixData.items;
-            if (!matrixData.roleBased) {
-              processedItems = matrixData.items;
+            if (!matrixData.roleBased && matrixData.randomAssignment) {
+              // When role restrictions are disabled but random assignment is enabled,
+              // only show items where the current user is in targetUsers
+              processedItems = matrixData.items.filter((item: any) => 
+                Array.isArray(item.targetUsers) && item.targetUsers.includes(currentUserEmail)
+              );
             }
 
             // Build a matrix map and id map from the processed items
@@ -114,7 +133,7 @@ const MatrixLoader: React.FC = () => {
       .catch((error) => {
         console.error("Error fetching user info:", error);
       });
-  }, [setMultiMatrix, setConfig, setItemIdMap, setRawItems]);
+  }, [setMultiMatrix, setConfig, setItemIdMap, setRawItems, setItemImages]);
 
   return null;
 };

ui/src/components/custom/multiMatrixProvider.tsx

@@ -2,6 +2,13 @@ import React, { createContext, useContext, useState, ReactNode } from "react";
 
 export type MultiMatrix = Map<string, Map<string, number>>;
 
+// Add interface for image data
+export interface MatrixImage {
+  itemId: number;
+  imageId: number;
+  imageUrl: string;
+}
+
 export type ConfigType = {
   r2Multi: number;
   randomAssignment: boolean;
@@ -32,6 +39,13 @@ export type MultiMatrixContextType = {
   // New rawItems state to store the full items list from the API:
   rawItems: any[];
   setRawItems: React.Dispatch<React.SetStateAction<any[]>>;
+  // New state for storing image data:
+  itemImages: MatrixImage[];
+  setItemImages: React.Dispatch<React.SetStateAction<MatrixImage[]>>;
+  // Helper function to check if an item has images
+  hasItemImages: (itemId: number) => boolean;
+  // Helper function to get images for a specific item
+  getItemImages: (itemId: number) => MatrixImage[];
 };
 
 const initialMultiMatrix: MultiMatrix = new Map([
@@ -103,6 +117,17 @@ export const MultiMatrixProvider: React.FC<{ children: ReactNode }> = ({ childre
   const [itemIdMap, setItemIdMap] = useState<Map<string, number>>(new Map());
   const [updates, setUpdates] = useState<any[]>([]);
   const [rawItems, setRawItems] = useState<any[]>([]);
+  const [itemImages, setItemImages] = useState<MatrixImage[]>([]);
+
+  // Helper function to check if an item has associated images
+  const hasItemImages = (itemId: number): boolean => {
+    return itemImages.some(img => Number(img.itemId) === Number(itemId));
+  };
+
+  // Helper function to get all images for a specific item
+  const getItemImages = (itemId: number): MatrixImage[] => {
+    return itemImages.filter(img => Number(img.itemId) === Number(itemId));
+  };
 
   const contextValue: MultiMatrixContextType = {
     multiMatrix,
@@ -115,6 +140,10 @@ export const MultiMatrixProvider: React.FC<{ children: ReactNode }> = ({ childre
     setUpdates,
     rawItems,
     setRawItems,
+    itemImages,
+    setItemImages,
+    hasItemImages,
+    getItemImages,
   };
 
   return (