#56 integrated SMCloudStore with Azure provider; cleaned Item form in frontend

client-app/src/Components/NewItemForm.tsx

@@ -1,16 +1,15 @@
 import React, { useState, ChangeEvent, FormEvent, useEffect } from 'react';
 import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
 import '../css/DonorForm.css';
 
 interface FormData {
     itemType: string;
     currentStatus: string;
-    donorEmail: string;
     donorId: number | null;
-    program: string;
     programId: number | null;
-    imageUpload: string[];
     dateDonated: string;
+    imageFiles: File[];
 }
 
 interface FormErrors {
@@ -24,14 +23,13 @@ interface Option {
 }
 
 const NewItemForm: React.FC = () => {
+    const navigate = useNavigate();
     const [formData, setFormData] = useState<FormData>({
         itemType: '',
         currentStatus: 'Received',
-        donorEmail: '',
         donorId: null,
-        program: '',
         programId: null,
-        imageUpload: [],
+        imageFiles: [],
         dateDonated: '',
     });
 
@@ -54,7 +52,7 @@ const NewItemForm: React.FC = () => {
                     `${process.env.REACT_APP_BACKEND_API_BASE_URL}donor`,
                 );
                 const emailOptions = response.data.map((donor: any) => ({
-                    value: donor.firstName,
+                    value: donor.id,
                     label: donor.email,
                     id: donor.id,
                 }));
@@ -70,7 +68,7 @@ const NewItemForm: React.FC = () => {
                     `${process.env.REACT_APP_BACKEND_API_BASE_URL}program`,
                 );
                 const programOptions = response.data.map((program: any) => ({
-                    value: program.name,
+                    value: program.id,
                     label: program.name,
                     id: program.id,
                 }));
@@ -97,25 +95,31 @@ const NewItemForm: React.FC = () => {
         const files = e.target.files;
         if (files) {
             const fileArray = Array.from(files);
-            const base64Images = await Promise.all(
-                fileArray.map(file => convertToBase64(file)),
-            );
             setFormData(prevState => ({
                 ...prevState,
-                imageUpload: [...prevState.imageUpload, ...base64Images],
+                imageFiles: [...prevState.imageFiles, ...fileArray]
+            }));
+
+            // Creating previews for display
+            const filePreviews = await Promise.all(fileArray.map(file => {
+                return new Promise<string>((resolve, reject) => {
+                    const reader = new FileReader();
+                    reader.readAsDataURL(file);
+                    reader.onload = () => resolve(reader.result as string);
+                    reader.onerror = error => reject(error);
+                });
             }));
-            setPreviews([...previews, ...base64Images]);
+
+            setPreviews(prev => [...prev, ...filePreviews]);
         }
     };
 
     const removeImage = (index: number) => {
-        const updatedImages = formData.imageUpload.filter(
-            (_, i) => i !== index,
-        );
+        const updatedFiles = formData.imageFiles.filter((_, i) => i !== index);
         const updatedPreviews = previews.filter((_, i) => i !== index);
         setFormData(prevState => ({
             ...prevState,
-            imageUpload: updatedImages,
+            imageFiles: updatedFiles
         }));
         setPreviews(updatedPreviews);
     };
@@ -136,7 +140,6 @@ const NewItemForm: React.FC = () => {
             );
             setFormData(prevState => ({
                 ...prevState,
-                donorEmail: value,
                 donorId: selectedDonor?.id || null,
             }));
         } else if (name === 'program') {
@@ -145,7 +148,6 @@ const NewItemForm: React.FC = () => {
             );
             setFormData(prevState => ({
                 ...prevState,
-                program: value,
                 programId: selectedProgram?.id || null,
             }));
         } else {
@@ -164,7 +166,6 @@ const NewItemForm: React.FC = () => {
             'itemType',
             'currentStatus',
             'donorEmail',
-            'program',
             'dateDonated',
         ];
 
@@ -190,41 +191,36 @@ const NewItemForm: React.FC = () => {
             try {
                 const formDataToSubmit = new FormData();
                 formDataToSubmit.append('itemType', formData.itemType);
-                formDataToSubmit.append(
-                    'currentStatus',
-                    formData.currentStatus,
-                );
-                formDataToSubmit.append(
-                    'donorId',
-                    formData.donorId !== null ? String(formData.donorId) : '',
-                );
-                formDataToSubmit.append(
-                    'programId',
-                    String(Number(formData.programId)),
-                );
+                formDataToSubmit.append('currentStatus', formData.currentStatus);
+                formDataToSubmit.append('donorId', formData.donorId ? formData.donorId.toString() : '');
+                formDataToSubmit.append('programId', formData.programId ? formData.programId.toString() : '');
                 formDataToSubmit.append('dateDonated', formData.dateDonated);
 
+                // Append image files directly as part of the FormData
+                formData.imageFiles.forEach(file => {
+                    formDataToSubmit.append('imageFiles', file);
+                });
+
+
                 const response = await axios.post(
                     `${process.env.REACT_APP_BACKEND_API_BASE_URL}donatedItem`,
                     formDataToSubmit,
                     {
                         headers: {
-                            'Content-Type': 'application/json',
+                            'Content-Type': 'multipart/form-data',
                         },
                     },
                 );
 
                 if (response.status === 201) {
                     setSuccessMessage('Item added successfully!');
                     handleRefresh();
+                    navigate('/donations');
                 } else {
                     setErrorMessage('Item not added');
                 }
-            } catch (error: unknown) {
-                const message =
-                    (error as any).response?.data?.message ||
-                    'Error adding item';
-                setErrorMessage(message);
+            } catch (error: any) {
+                setErrorMessage(error.response?.data?.message || 'Error adding item');
             }
         } else {
             setErrorMessage('Form has validation errors');
@@ -235,11 +231,9 @@ const NewItemForm: React.FC = () => {
         setFormData({
             itemType: '',
             currentStatus: 'Received',
-            donorEmail: '',
             donorId: null,
-            program: '',
             programId: null,
-            imageUpload: [],
+            imageFiles: [],
             dateDonated: '',
         });
         setPreviews([]);
@@ -260,7 +254,7 @@ const NewItemForm: React.FC = () => {
                 {label}
                 {required && <span className="text-red-500">&nbsp;*</span>}
             </label>
-            {name === 'imageUpload' ? (
+            {name === 'imageFiles' ? (
                 <div>
                     <input
                         type="file"
@@ -349,29 +343,29 @@ const NewItemForm: React.FC = () => {
                 {renderFormField('Current Status', 'currentStatus')}
                 {renderFormField(
                     'Donor Email',
-                    'donorEmail',
+                    'donorId',
                     'text',
                     true,
                     donorEmailOptions,
                 )}
                 {renderFormField(
                     'Program',
-                    'program',
+                    'programId',
                     'text',
-                    true,
+                    false,
                     programOptions,
                 )}
                 {renderFormField('Date Donated', 'dateDonated', 'date')}
                 {renderFormField(
                     'Images (Max 5)',
-                    'imageUpload',
+                    'imageFiles',
                     'file',
                     false,
                 )}
 
                 <div className="form-field full-width button-container">
                     <button type="submit" className="submit-button">
-                        Add Item
+                        Submit
                     </button>
                     <button
                         type="button"

server/README.md

@@ -45,6 +45,8 @@ Create a `.env` file and define the necessary environment variables:
 ```plaintext
 DATABASE_URL="postgresql://username:password@localhost:5432/dbname"
 PORT=5000
+AZURE_STORAGE_ACCOUNT_NAME="mdmaproject"
+AZURE_STORAGE_ACCESS_KEY="<enter-azure-storage-access-key>">
 ```
 
 Replace `username`, `password`, and `dbname` with your PostgreSQL username, password, and the name of the database you created.

server/package.json

@@ -14,12 +14,15 @@
   "license": "ISC",
   "dependencies": {
     "@prisma/client": "^5.19.1",
+    "@smcloudstore/azure-storage": "^0.2.0",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
+    "dotenv": "^16.4.5",
     "express": "^4.20.0",
     "joi": "^17.13.3",
     "morgan": "^1.10.0",
-    "portfinder": "^1.0.32"
+    "portfinder": "^1.0.32",
+    "smcloudstore": "^0.2.1"
   },
   "devDependencies": {
     "@types/cookie-parser": "^1.4.7",

server/prisma/migrations/20241025152549_add_image_urls_to_donated_item_status/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "DonatedItemStatus" ADD COLUMN     "imageUrls" TEXT[];

server/prisma/schema.prisma

@@ -48,6 +48,7 @@ model DonatedItemStatus {
   donatedItemId Int
   donatedItem   DonatedItem @relation(fields: [donatedItemId], references: [id], onDelete: Cascade)
   @@index([donatedItemId])
+  imageUrls     String[]
 }
 
 model Program {

server/src/configs/SMCloudStoreConfig.ts

@@ -0,0 +1,11 @@
+require('dotenv').config();
+const SMCloudStore = require('smcloudstore')
+
+// connection options for Azure Blob Storage
+const connection = {
+    storageAccount: process.env.AZURE_STORAGE_ACCOUNT_NAME,
+    storageAccessKey: process.env.AZURE_STORAGE_ACCESS_KEY
+}
+
+// Return an instance of the AzureStorageProvider class
+export const storage = SMCloudStore.Create('azure-storage', connection)

server/src/routes/donatedItemRoutes.ts

@@ -1,23 +1,28 @@
 import { Router, Request, Response } from 'express';
+import multer from 'multer';
 import prisma from '../prismaClient'; // Import Prisma client
 import { donatedItemValidator } from '../validators/donatedItemValidator'; // Import the validator
 import { validateDonor } from '../services/donorService';
 import { validateProgram } from '../services/programService';
-import { date } from 'joi';
+import { uploadToAzure } from '../services/donatedItemService';
 
 const router = Router();
+const upload = multer({ storage: multer.memoryStorage() });
 
 // POST /donatedItem - Create a new DonatedItem
-router.post('/', donatedItemValidator, async (req: Request, res: Response) => {
+router.post('/', [upload.array('imageFiles'), donatedItemValidator], async (req: Request, res: Response) => {
     try {
-
+        const imageFiles = req.files as Express.Multer.File[];
+        const donorId = parseInt(req.body.donorId);
+        const programId = parseInt(req.body.programId);
         const { dateDonated, ...rest } = req.body;
 
         try {
-            await validateDonor(req.body.donorId);
-            await validateProgram(req.body.programId);
+            await validateDonor(donorId);
+            await validateProgram(programId);
         } catch (error) {
             if (error instanceof Error) {
+                console.log('error', error)
                 return res.status(400).json({ error: error.message });
             }
         }
@@ -27,16 +32,24 @@ router.post('/', donatedItemValidator, async (req: Request, res: Response) => {
         const newItem = await prisma.donatedItem.create({
             data: {
                 ...rest, //spread the rest of the fields
+                donorId,
+                programId,
                 dateDonated: dateDonatedDateTime,
-                // dateDonated: new Date(dateDonated),
-                // dateDonated: new Date(dateDonated).setUTCHours(0,0,0,0), // Set time to 00:00:00 UTC
             },
         });
+
+        // upload images to Azure and get their filenames
+        const imageUrls = await Promise.all(imageFiles.map((file, index) => {
+            const formattedDate = new Date().toISOString();
+            return uploadToAzure(file, `item-${formattedDate}-${newItem.id}.jpg`);
+        }));
+
         const newStatus = await prisma.donatedItemStatus.create({
             data: {
                 statusType: 'Received',
                 dateModified: dateDonatedDateTime, // Use the same date as dateDonated
                 donatedItemId: newItem.id,
+                imageUrls: imageUrls
             },
         });
 

server/src/schemas/donatedItems.ts → server/src/schemas/donatedItemSchema.ts

@@ -5,8 +5,16 @@ export const donatedItemSchema = Joi.object({
     currentStatus: Joi.string()
         .valid('Received', 'Pending', 'Processed', 'Delivered')
         .required(),
-    donorId: Joi.number().integer().required(),
-    programId: Joi.number().integer().required(),
+    donorId: Joi.alternatives().try(
+        Joi.string().pattern(/^\d+$/)
+    ).required().messages({
+        'string.pattern.base': 'donorId must be a numeric string'
+    }),
+    programId: Joi.alternatives().try(
+        Joi.string().pattern(/^\d+$/)
+    ).messages({
+        'string.pattern.base': 'programId must be a numeric string'
+    }),
     dateDonated: Joi.date().required(), // Validates as a proper date
 });
 

server/src/services/donatedItemService.ts

@@ -0,0 +1,10 @@
+import multer from 'multer';
+import { storage } from "../configs/SMCloudStoreConfig";
+
+export async function uploadToAzure(file: Express.Multer.File, filename: string): Promise<string> {
+    const containerName = 'mdma-dev';
+    await storage.putObject(containerName, filename, file.buffer, {
+        'Content-Type': file.mimetype
+    });
+    return `${containerName}/${filename}`;
+}

server/src/validators/donatedItemStatusValidator.ts

@@ -1,5 +1,5 @@
 import { Request, Response, NextFunction } from 'express';
-import { donatedItemStatusSchema } from '../schemas/donatedItems';
+import { donatedItemStatusSchema } from '../schemas/donatedItemSchema';
 
 export const donatedItemStatusValidator = (
     req: Request,

server/src/validators/donatedItemValidator.ts

@@ -1,5 +1,5 @@
 import { Request, Response, NextFunction } from 'express';
-import { donatedItemSchema } from '../schemas/donatedItems';
+import { donatedItemSchema } from '../schemas/donatedItemSchema';
 
 export const donatedItemValidator = (
     req: Request,