Update Map of Pi Repo with Changes Introduced on PCT-managed repo

backend/.env.development

@@ -20,8 +20,8 @@ CLOUDINARY_CLOUD_NAME="ADD YOUR CLOUDINARY INFO"
 CLOUDINARY_API_KEY="ADD YOUR CLOUDINARY INFO"
 CLOUDINARY_API_SECRET="ADD YOUR CLOUDINARY INFO"
 
-DIGITAL_OCEAN_KEY_ID=
-DIGITAL_OCEAN_SECRET_ACCESS_KEY=
+DIGITAL_OCEAN_BUCKET_ACCESS_KEY=
+DIGITAL_OCEAN_BUCKET_SECRET_KEY=
 DIGITAL_OCEAN_BUCKET_NAME=
 DIGITAL_OCEAN_BUCKET_ORIGIN_ENDPOINT=
 DIGITAL_OCEAN_BUCKET_CDN_ENDPOINT=

backend/src/controllers/reviewFeedbackController.ts

@@ -1,10 +1,8 @@
 import { Request, Response } from "express";
 
 import * as reviewFeedbackService from "../services/reviewFeedback.service";
-import { uploadImage } from "../services/misc/image.service";
 import { IReviewFeedback } from "../types";
 
-import { env } from "../utils/env";
 import logger from "../config/loggingConfig";
 
 export const getReviews = async (req: Request, res: Response) => {
@@ -56,9 +54,10 @@ export const addReview = async (req: Request, res: Response) => {
       return res.status(400).json({ message: "Self review is prohibited" });
     }
 
-    // image file handling
+    // image file handling (have to ts-ignore because tsc thinks the file can't have a location property, even though it can and does)
     const file = req.file;
-    const image = file ? await uploadImage(authUser.pi_uid, file, 'review-feedback') : '';
+    //@ts-ignore
+    const image = file ? file.location : '';
 
     const newReview = await reviewFeedbackService.addReviewFeedback(authUser, formData, image);
     logger.info(`Added new review by user ${authUser.pi_uid} for receiver ID ${newReview.review_receiver_id}`);

backend/src/controllers/sellerController.ts

@@ -1,6 +1,5 @@
 import { Request, Response } from "express";
 import * as sellerService from "../services/seller.service";
-import { uploadImage } from "../services/misc/image.service";
 
 import logger from "../config/loggingConfig";
 import { ISeller } from "../types";
@@ -76,11 +75,9 @@ export const registerSeller = async (req: Request, res: Response) => {
       return res.status(401).json({ message: "Unauthorized user" });
     }
 
-    // image file handling
-    const file = req.file;
-    const image = file ? await uploadImage(authUser.pi_uid, file, 'seller-registration') : '';
-
-    formData.image = image;
+    // image file handling (have to ts-ignore because tsc thinks the file can't have a location property, even though it can and does)
+    //@ts-ignore
+    const image = req.file ? req.file.location : '';
 
     const registeredSeller = await sellerService.registerOrUpdateSeller(authUser, formData, image);
     logger.info(`Registered or updated seller for user ${authUser.pi_uid}`);

backend/src/controllers/userPreferencesController.ts

@@ -1,7 +1,6 @@
 import { Request, Response } from "express";
 
 import * as userSettingsService from "../services/userSettings.service";
-import { uploadImage } from "../services/misc/image.service";
 import { IUserSettings } from "../types";
 
 import logger from "../config/loggingConfig";
@@ -56,9 +55,10 @@ export const addUserPreferences = async (req: Request, res: Response) => {
       return res.status(401).json({ message: "Unauthorized user" });
     }
 
-    // image file handling
+    // image file handling (have to ts-ignore because tsc thinks the file can't have a location property, even though it can and does)
     const file = req.file;
-    const image = file ? await uploadImage(authUser.pi_uid, file, 'user-preferences') : '';
+    //@ts-ignore
+    const image = file ? file.location : '';
 
     const userPreferences = await userSettingsService.addOrUpdateUserSettings(authUser, formData, image);
     logger.info(`Added or updated User Preferences for user with ID: ${authUser.pi_uid}`);

backend/src/helpers/imageUploader.ts

@@ -2,6 +2,8 @@ import cloudinary from "../utils/cloudinary";
 
 import logger from '../config/loggingConfig';
 
+// TODO: Is anything going to be done with this file or can it be removed?
+//       Seems to be redundant given the uploadImage method in image.service.ts
 export const uploadMultipleImages = async (files: any) => {
   try {
     const uploadedImages = [];

backend/src/services/misc/image.service.ts

@@ -1,6 +1,7 @@
 import cloudinary from '../../utils/cloudinary';
 import logger from '../../config/loggingConfig';
 
+// TODO: should be able to remove this I think, since multer is handling the uploads to DigitalOcean on its own
 export const uploadImage = async (publicId: string, file: Express.Multer.File, folder: string) => {
   try {
     const result = await cloudinary.uploader.upload(file.path, {

backend/src/utils/env.ts

@@ -9,8 +9,8 @@ export const env = {
   JWT_SECRET: process.env.JWT_SECRET || 'default_secret',
   DIGITAL_OCEAN_BUCKET_ORIGIN_ENDPOINT: process.env.DIGITAL_OCEAN_BUCKET_ORIGIN_ENDPOINT || '',
   DIGITAL_OCEAN_BUCKET_CDN_ENDPOINT: process.env.DIGITAL_OCEAN_BUCKET_CDN_ENDPOINT || '',
-  DIGITAL_OCEAN_KEY_ID: process.env.DIGITAL_OCEAN_KEY_ID || '',
-  DIGITAL_OCEAN_SECRET_ACCESS_KEY: process.env.DIGITAL_OCEAN_SECRET_ACCESS_KEY || '',
+  DIGITAL_OCEAN_BUCKET_ACCESS_KEY: process.env.DIGITAL_OCEAN_BUCKET_ACCESS_KEY || '',
+  DIGITAL_OCEAN_BUCKET_SECRET_KEY: process.env.DIGITAL_OCEAN_BUCKET_SECRET_KEY || '',
   DIGITAL_OCEAN_BUCKET_NAME: process.env.DIGITAL_OCEAN_BUCKET_NAME || '',
   LOG_LEVEL: process.env.LOG_LEVEL || '',
   PI_API_KEY: process.env.PI_API_KEY || '',

backend/src/utils/multer.ts

@@ -12,15 +12,16 @@ const s3 = new S3({
   endpoint: env.DIGITAL_OCEAN_BUCKET_ORIGIN_ENDPOINT,
   region: "us-east-1",
   credentials: {
-    accessKeyId: env.DIGITAL_OCEAN_KEY_ID,
-    secretAccessKey: env.DIGITAL_OCEAN_SECRET_ACCESS_KEY
+    accessKeyId: env.DIGITAL_OCEAN_BUCKET_ACCESS_KEY,
+    secretAccessKey: env.DIGITAL_OCEAN_BUCKET_SECRET_KEY
   }
 });
 
 const storage = multerS3({
   s3,
   bucket: env.DIGITAL_OCEAN_BUCKET_NAME,
   acl: 'public-read',
+  contentType: multerS3.AUTO_CONTENT_TYPE,
   key: function (request: any, file: any, callback: any) {
     callback(null, file.originalname);
   }

backend/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "es2016",
     "module": "commonjs",
-    "rootDir": ".",
+    "rootDir": "./src",
     "outDir": "./build",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,

frontend/.env.development

@@ -4,6 +4,7 @@
 # Your environment-specific values should be set in your .env.local file, which is not tracked in version control.
 
 NODE_ENV=development
+IMAGE_BUCKET_HOST=ADD-YOUR-IMAGE-HOST-HERE.com
 NEXT_PUBLIC_BACKEND_URL=http://localhost:8001
 NEXT_PUBLIC_IMAGE_PLACEHOLDER_URL="ADD YOUR IMAGE PLACEHOLDER URL"
 NEXT_PUBLIC_SENTRY_DSN=https://e7a6a9d1d2ac4ab65091a8cb55535688@o4507779280732160.ingest.us.sentry.io/4507779383361536

frontend/.env.staging

@@ -1,4 +1,5 @@
 NODE_ENV=production
+IMAGE_BUCKET_HOST=mapofpi-staging.sfo3.digitaloceanspaces.com
 NEXT_PUBLIC_BACKEND_URL=https://backend.mapofpi-heuwx64a8iqc29xo.staging.piappengine.com
-NEXT_PUBLIC_SENTRY_DSN=https://b729b3a46999a192129cec0202930bba@o4507937361625088.ingest.us.sentry.io/4507937365819392
+NEXT_PUBLIC_SENTRY_DSN=https://af0c1f20356a70c1ffedf8bdde40992a@o4507986464276480.ingest.us.sentry.io/4507986486362112
 NEXT_PUBLIC_PI_SDK_URL=https://staging-sdk.socialchainapp.com/pi-sdk.js

frontend/next.config.mjs

@@ -10,12 +10,8 @@ const nextConfig = {
   },
   images: {
     remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: 'example.com',
-        port: '',
-        pathname: '/**',
-      },
+      // TODO: Can the bing and cloudinary patterns be removed now that we're using DigitalOcean? Might also be able to remove the
+      //       localhost one as well
       {
         protocol: 'http',
         hostname: 'localhost',
@@ -33,7 +29,13 @@ const nextConfig = {
         hostname: 'res.cloudinary.com',
         port: '',
         pathname: '/**',
-      }
+      },
+      {
+        protocol: 'https',
+        hostname: process.env.IMAGE_BUCKET_HOST,
+        port: '',
+        pathname: '/**',
+      },
     ],
   },
   async rewrites() {

frontend/src/components/shared/Review/emojipicker.tsx

@@ -127,8 +127,8 @@ export default function EmojiPicker(props: any) {
         logger.warn('Unable to submit review; user not authenticated.');
         toast.error(t('SHARED.VALIDATION.SUBMISSION_FAILED_USER_NOT_AUTHENTICATED'));
       }
-    } catch (error) {
-      logger.error('Error saving review:', { error });
+    } catch (error: any) {
+      logger.error('Error saving review:', { error: error?.message });
     }
   };
 

frontend/src/components/shared/sidebar/sidebar.tsx

@@ -2,6 +2,7 @@ import styles from './sidebar.module.css';
 
 import { useTranslations } from 'next-intl';
 import { useTheme } from 'next-themes';
+import dynamic from 'next/dynamic';
 import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
@@ -10,7 +11,6 @@ import { useRef, useState, useContext, useEffect } from 'react';
 import { FaChevronDown } from 'react-icons/fa6';
 import { toast } from 'react-toastify';
 
-import MapCenter from '../map/MapCenter';
 import InfoModel from '@/components/shared/About/Info/Info';
 import PrivacyPolicyModel from '@/components/shared/About/privacy-policy/PrivacyPolicy';
 import TermsOfServiceModel from '@/components/shared/About/terms-of-service/TermsOfService';
@@ -51,6 +51,11 @@ function isLanguageMenuItem(item: MenuItem): item is LanguageMenuItem {
 }
 
 function Sidebar(props: any) {
+  // Dynamically import the MapCenter component
+  const MapCenter = dynamic(() => import('../map/MapCenter'), {
+    ssr: false,
+  });
+
   const t = useTranslations();
   const pathname = usePathname();
   const router = useRouter();
@@ -248,8 +253,8 @@ function Sidebar(props: any) {
         logger.info('User Settings saved successfully:', { data });
         toast.success(t('SIDE_NAVIGATION.VALIDATION.SUCCESSFUL_PREFERENCES_SUBMISSION'));
       }
-    } catch (error) {
-      logger.error('Error saving user settings:', { error });
+    } catch (error: any) {
+      logger.error('Error saving user settings:', { error: error?.message });
       toast.error(t('SIDE_NAVIGATION.VALIDATION.UNSUCCESSFUL_PREFERENCES_SUBMISSION'));
     }
   }

frontend/src/constants/types.ts

@@ -52,4 +52,4 @@ export interface IReviewFeedback {
 export type PartialUserSettings = Pick<IUserSettings, 'user_name' | 'email' | 'phone_number' | 'findme' | 'trust_meter_rating'>;
 
 // Combined interface representing a seller with selected user settings
-export interface ISellerWithSettings extends ISeller, PartialUserSettings {}
+export interface ISellerWithSettings extends ISeller, PartialUserSettings {}