v1 of s3 screenshots working

Author: liamroh

app/src/components/marketplace/MarketplaceCard.tsx

@@ -19,15 +19,16 @@ import {
   resetAllState
 } from '../../redux/reducers/slice/appStateSlice';
 import { useDispatch, useSelector } from 'react-redux';
-
 import { MoreVert } from '@mui/icons-material';
 import { RootState } from '../../redux/store';
 import Snackbar from '@mui/material/Snackbar';
 import axios from 'axios';
-import imageSrc from '../../../../resources/marketplace_images/marketplace_image.png';
+// import imageSrc from '../../../../resources/marketplace_images/marketplace_image.png';
 import { red } from '@mui/material/colors';
 import { saveProject } from '../../helperFunctions/projectGetSaveDel';
 import { useHistory } from 'react-router-dom';
+import { Amplify, Storage } from 'aws-amplify';
+import awsconfig from '../../../../src/aws-exports';
 
 interface Project {
   forked: String;
@@ -47,9 +48,27 @@ const MarketplaceCard = ({ proj }: { proj: Project }) => {
   const dispatch = useDispatch();
   const history = useHistory();
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const [s3ImgURL, setS3ImgURL] = React.useState<null | string>(null);
   const open = Boolean(anchorEl);
   const [alertOpen, setAlertOpen] = React.useState<boolean>(false);
-  const state = useSelector((store: RootState) => store.appState);
+
+  useEffect(() => {
+    async function s3ImgFetch() {
+      Amplify.configure(awsconfig);
+      try {
+        const objId: string = proj._id.toString();
+        // the below functions are commented out as not to incur too many charges
+        // const response: string = await Storage.get(objId);
+        // const response: string = await Storage.get('test');
+        // setS3ImgURL(response);
+      } catch (error) {
+        console.error(`Error fetching image preview for ${proj._id}: `, error);
+      }
+    }
+    s3ImgFetch();
+  }, []);
+
+
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
@@ -107,8 +126,8 @@ const MarketplaceCard = ({ proj }: { proj: Project }) => {
           sx={{ borderRadius: '12px', height: 200 }}
           component="img"
           height="194"
-          image={imageSrc}
-          alt="component buttons"
+          image={s3ImgURL}
+          alt="component preview"
         />
         <CardHeader
           avatar={

app/src/components/top/NavBar.tsx

@@ -94,10 +94,10 @@ const NavBar = () => {
         .then((newProject: State) => {
           console.log('Project published successfully', newProject);
           setPublishModalOpen(false);
+          dispatch(updateProjectId(newProject._id));
+          dispatch(updateProjectName(newProject.name));
+          dispatch(updateProjectPublished(newProject.published));
           dispatch(toggleScreenshotTrigger());
-          dispatch(updateProjectId(newProject._id))
-          dispatch(updateProjectName(newProject.name))
-          dispatch(updateProjectPublished(newProject.published))
           setAlertOpen(true)
         })
         .catch((error) => {

app/src/containers/MainContainer.tsx

@@ -13,6 +13,7 @@ import awsconfig from '../../../src/aws-exports';
 const MainContainer = (props): JSX.Element => {
   const dispatch = useDispatch();
   const screenshotTrigger = useSelector((store: RootState) => store.appState.screenshotTrigger); 
+  const id: string = useSelector((store: RootState) => store.appState._id); 
   const { isDarkMode, style } = useSelector((store) => ({
     isDarkMode: store.darkMode.isDarkMode,
     style: store.styleSlice, 
@@ -26,9 +27,6 @@ const MainContainer = (props): JSX.Element => {
         try {
           const canvas: HTMLCanvasElement = await html2canvas(containerRef.current);
           const screenshotURL: string = canvas.toDataURL('image/png');
-          // const canvasImg: HTMLImageElement = new Image();
-          // canvasImg.src = canvas.toDataURL();
-          // containerRef.current.appendChild(canvasImg);
           const imgBuffer: Buffer | void  = Buffer.from(screenshotURL.replace(/^data:image\/\w+;base64,/, ''), 'base64');
           dispatch(toggleScreenshotTrigger());
           return imgBuffer;
@@ -39,7 +37,6 @@ const MainContainer = (props): JSX.Element => {
     }
     handleScreenshot().then((imgBuffer: Buffer | void) => {
       if (imgBuffer) {
-        console.log('Screenshot URL:', imgBuffer);
         uploadScreenshotS3(imgBuffer); 
       }
     });
@@ -60,7 +57,7 @@ const MainContainer = (props): JSX.Element => {
     // Call this function to check the connection
     checkStorageConnection();
     try {
-      await Storage.put('test.png', imgBuffer, {
+      await Storage.put(id, imgBuffer, {
         contentType: 'image/png',
       });
       console.log('Screenshot uploaded to S3');

app/src/containers/MarketplaceContainer.tsx

@@ -19,7 +19,6 @@ const MarketplaceContainer = () => {
         });
         setMarketplaceProjects(response.data);
         setDisplayProjects(response.data);
-    
       } catch (error) {
         console.error('Error fetching MP data:', error);
       }
@@ -30,13 +29,8 @@ const MarketplaceContainer = () => {
 
 
   const updateDisplayProjects = (searchResults) => {
-
     setDisplayProjects(searchResults);//have to pass this down as a prop so that the setting is done outside of Rendering otherwise callstack issues
-
   };
-
-  
-
 
   return (
     <div style={containerStyles}>