From db31493b8d4eb3708a2a7b83d1d97d23b80758bc Mon Sep 17 00:00:00 2001
From: Endri Islami <islamitp@protonmail.com>
Date: Wed, 27 Nov 2024 17:23:12 -0500
Subject: [PATCH] Configuration of Firebase Storage Bucket

Using Firbase storageBucket to save the upload images to the server
---
 .idea/workspace.xml          |   3 +-
 src/app/portfolio/page.tsx   | 105 ++++++++++++++++++++++++-----------
 src/app/userprofile/page.tsx |  94 +++++++++++++++++--------------
 src/firebase-config.ts       |  20 ++++---
 4 files changed, 137 insertions(+), 85 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 1a99c9ef..346ba31e 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -55,7 +55,7 @@
     "RunOnceActivity.OpenProjectViewOnStart": "true",
     "RunOnceActivity.ShowReadmeOnStart": "true",
     "RunOnceActivity.git.unshallow": "true",
-    "git-widget-placeholder": "Islami",
+    "git-widget-placeholder": "#97 on Islami",
     "kotlin-language-version-configured": "true",
     "nodejs_package_manager_path": "npm",
     "settings.editor.selected.configurable": "configurable.group.tools",
@@ -87,6 +87,7 @@
       <workItem from="1731780148041" duration="27000" />
       <workItem from="1731780179125" duration="66000" />
       <workItem from="1731994797579" duration="4000" />
+      <workItem from="1732315065523" duration="32000" />
     </task>
     <task id="LOCAL-00001" summary="Moving google verification to public directory">
       <option name="closed" value="true" />
diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
index be7ee5f8..86fb4429 100644
--- a/src/app/portfolio/page.tsx
+++ b/src/app/portfolio/page.tsx
@@ -1,16 +1,21 @@
 'use client';
 
-import React, { useRef, useState } from 'react';
-import { useRouter } from 'next/navigation';
 import './portfolio.css';
+import { useRouter } from 'next/navigation';
+import React, { useRef, useState } from 'react';
 import Navbar from '../components/navigationbar';
+import { storage } from '../../firebase-config'; // Import Firebase storage
+import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
 import SocialMediaInput from '../components/socialmediainput'; // Default import (no curly braces)
 
+
 export default function Portfolio() {
   const [businessName, setBusinessName] = useState('');
   const [bio, setBio] = useState('');
   const [profilePicture, setProfilePicture] = useState<File | null>(null);
+  const [profilePictureUrl, setProfilePictureUrl] = useState<string | null>(null);
   const [photos, setPhotos] = useState<File[]>([]);
+  const [photoUrls, setPhotoUrls] = useState<string[]>([]);
   const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0);
   const [services, setServices] = useState([{ name: '', price: '', time: '' }]);
   const [showBusinessHours, setShowBusinessHours] = useState(false);
@@ -25,20 +30,33 @@ export default function Portfolio() {
   const profileInputRef = useRef<HTMLInputElement>(null);
   const router = useRouter();
 
-  const handleProfilePictureUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+
+  //----------------------------- Photo Upload Section ----------------------------------------------------------
+
+  // Handle profile picture upload
+  const handleProfilePictureUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files) {
-      setProfilePicture(e.target.files[0]);
+      const file = e.target.files[0];
+      setProfilePicture(file);
+
+      // Upload to Firebase
+      const url = await uploadToFirebase(file, 'profile_pictures');
+      setProfilePictureUrl(url);
     }
   };
-
   const triggerProfileUpload = () => {
     profileInputRef.current?.click();
   };
 
-  const handlePhotoUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+  // Handle carousel photos upload
+  const handlePhotoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files) {
-      const newPhotos = Array.from(e.target.files);
-      setPhotos(newPhotos);
+      const files = Array.from(e.target.files);
+      setPhotos(files);
+
+      // Upload each photo to Firebase
+      const urls = await Promise.all(files.map((file) => uploadToFirebase(file, 'carousel_photos')));
+      setPhotoUrls(urls);
       setCurrentPhotoIndex(0);
     }
   };
@@ -51,6 +69,16 @@ export default function Portfolio() {
     setCurrentPhotoIndex((prevIndex) => (prevIndex - 1 + photos.length) % photos.length);
   };
 
+
+   // Function to upload file to Firebase Storage
+   const uploadToFirebase = async (file: File, path: string): Promise<string> => {
+    const storageRef = ref(storage, `${path}/${file.name}`);
+    await uploadBytes(storageRef, file);
+    return getDownloadURL(storageRef);
+  };
+
+
+  // Service Functions
   const handleServiceChange = (index: number, field: string, value: string) => {
     const updatedServices = [...services];
     updatedServices[index] = { ...updatedServices[index], [field]: value };
@@ -66,36 +94,35 @@ export default function Portfolio() {
     setServices(updatedServices);
   };
 
+
+  // ------------------------------------------------------ Social Links ------------------------------------------------------
   const handleSocialLinkChange = (index: number, field: string, value: string) => {
     const updatedLinks = [...socialLinks];
     updatedLinks[index] = { ...updatedLinks[index], [field]: value };
     setSocialLinks(updatedLinks);
   };
+  // ------------------------------------------------------------------------------------------------------------
 
+  // Handle form submission
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    const formData = new FormData();
-    formData.append('business_name', businessName);
-    formData.append('bio', bio);
-    if (profilePicture) formData.append('profile_picture', profilePicture);
-    photos.forEach((photo, index) => {
-      formData.append(`photos[${index}]`, photo);
-    });
-    services.forEach((service, index) => {
-      formData.append(`services[${index}][name]`, service.name);
-      formData.append(`services[${index}][price]`, service.price);
-      formData.append(`services[${index}][time]`, service.time);
-    });
-    socialLinks.forEach((link, index) => {
-      formData.append(`socialLinks[${index}][platform]`, link.platform);
-      formData.append(`socialLinks[${index}][url]`, link.url);
-    });
+
+    const formData = {
+      business_name: businessName,
+      bio,
+      profile_picture: profilePictureUrl,
+      photos: photoUrls,
+      services,
+      social_links: socialLinks
+    };
 
     try {
       const response = await fetch('http://localhost:8000/api/artist-portfolio/', {
         method: 'POST',
-        body: formData,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(formData)
       });
+
       if (response.ok) {
         alert('Portfolio saved successfully!');
         router.push('/appointments');
@@ -109,6 +136,9 @@ export default function Portfolio() {
     }
   };
 
+
+  // ------------------------------------------------------ Business Hour ------------------------------------------------------
+
   const toggleBusinessHours = () => {
     setShowBusinessHours(!showBusinessHours);
   };
@@ -132,9 +162,15 @@ export default function Portfolio() {
     setShowBusinessHours(false);
   };
 
+
+
+
+  // ------------------------------------------------------ HMTL SECTION ------------------------------------------------------
   return (
     <div className="container">
       <Navbar />
+
+      {/* Business Name */}
       <div className="business-name">
         <input
           type="text"
@@ -157,10 +193,10 @@ export default function Portfolio() {
               style={{ display: 'none' }}
             />
             <div className="relative w-full h-full">
-              {profilePicture ? (
+              {profilePictureUrl  ? (
                 <img
                   className="w-full h-full rounded-full object-cover"
-                  src={URL.createObjectURL(profilePicture)}
+                  src={profilePictureUrl}
                   alt="Profile"
                 />
               ) : (
@@ -176,12 +212,13 @@ export default function Portfolio() {
             </div>
           </div>
 
+          {/* Carousel Photo Upload */}
           <div id="default-carousel" className="relative w-full" data-carousel="slide">
             <div className="relative h-[500px] w-[900px] overflow-hidden rounded-lg group">
-              {photos.length > 0 ? (
+              {photoUrls.length > 0 ? (
                 <div className="duration-700 ease-in-out">
                   <img
-                    src={URL.createObjectURL(photos[currentPhotoIndex])}
+                    src={photoUrls[currentPhotoIndex]}
                     className="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
                     alt={`Carousel ${currentPhotoIndex}`}
                   />
@@ -209,6 +246,9 @@ export default function Portfolio() {
               </label>
             </div>
 
+            {/* Carousel Controls */}
+            
+            {/* Carousel Previous Photo */}
             <button
               type="button"
               onClick={handlePrevPhoto}
@@ -227,6 +267,7 @@ export default function Portfolio() {
               </span>
             </button>
 
+            {/* Carousel Next Photo */}
             <button
               type="button"
               onClick={handleNextPhoto}
@@ -246,13 +287,13 @@ export default function Portfolio() {
             </button>
           </div>
 
-          {/* About Section */}
+          {/* Information Section */}
           <div className="description-wrapper">
-            <h2>About</h2>
+            <h2>More Information</h2>
             <textarea
               value={bio}
               onChange={(e) => setBio(e.target.value)}
-              placeholder="Write a short description"
+              placeholder="List information about booking Here. For instance the address or any heads that a customer might need for parking."
             />
           </div>
 
diff --git a/src/app/userprofile/page.tsx b/src/app/userprofile/page.tsx
index 69965e7e..ad8ef52c 100644
--- a/src/app/userprofile/page.tsx
+++ b/src/app/userprofile/page.tsx
@@ -1,11 +1,10 @@
-
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
 'use client';
 
 import { useRouter } from 'next/navigation';
 import { useState, useRef, useEffect } from 'react';
 import { auth } from '../firebase';
+import { storage } from '../../firebase-config'; // Import Firebase storage
+import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
 import React from 'react';
 
 export default function UserProfile() {
@@ -14,49 +13,27 @@ export default function UserProfile() {
   const [city, set_city] = useState('');
   const [phone_number, set_phone_number] = useState('');
   const [prof_pic, set_profpic] = useState<File | null>(null);
-  const [prof_pic_preview, set_profpic_preview] = useState<string | null>(null);
+  const [prof_pic_url, set_profpic_url] = useState<string | null>(null); // Store Firebase URL
 
   const profileInputRef = useRef<HTMLInputElement>(null);
   const router = useRouter();
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    const formData = new FormData();
-    formData.append('fullname', fullname);
-    formData.append('email', email);
-    formData.append('city', city);
-    formData.append('phone_number', phone_number);
-    if (prof_pic) {
-      formData.append('profile_picture', prof_pic);
-    }
-
-    try {
-      const response = await fetch('http://localhost:8000/api/user-profile/', {
-        method: 'POST',
-        body: formData,
-      });
-      if (response.ok) {
-        alert('Profile saved successfully!');
-      } else {
-        const errorData = await response.json();
-        alert(`Error: ${errorData.detail}`);
-      }
-    } catch (error) {
-      console.error('Error saving profile:', error);
-      alert('An unexpected error occurred. Please try again.');
-    }
+  // Upload to Firebase Storage
+  const uploadToFirebase = async (file: File, path: string): Promise<string> => {
+    const storageRef = ref(storage, `${path}/${file.name}`);
+    await uploadBytes(storageRef, file);
+    return getDownloadURL(storageRef);
   };
 
-  const handleLogout = () => {
-    alert('Logging out...');
-    router.push('/login');
-  };
-
-  const handleProfilePictureUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+  // Handle profile picture upload
+  const handleProfilePictureUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files[0]) {
       const file = e.target.files[0];
       set_profpic(file);
-      set_profpic_preview(URL.createObjectURL(file));
+
+      // Upload to Firebase and set URL
+      const url = await uploadToFirebase(file, 'profile_pictures');
+      set_profpic_url(url);
     }
   };
 
@@ -67,14 +44,45 @@ export default function UserProfile() {
   useEffect(() => {
     const unsubscribe = auth.onAuthStateChanged((user) => {
       if (user) {
-        set_email(user.email || ''); 
-        set_fullname(user.displayName || ''); 
+        set_email(user.email || '');
+        set_fullname(user.displayName || '');
       }
     });
-  
+
     return () => unsubscribe();
   }, []);
 
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    // Data to be sent to backend
+    const payload = {
+      fullname,
+      email,
+      city,
+      phone_number,
+      profile_picture: prof_pic_url // Use the Firebase URL
+    };
+
+    try {
+      const response = await fetch('http://localhost:8000/api/user-profile/', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+
+      if (response.ok) {
+        alert('Profile saved successfully!');
+      } else {
+        const errorData = await response.json();
+        alert(`Error: ${errorData.detail}`);
+      }
+    } catch (error) {
+      console.error('Error saving profile:', error);
+      alert('An unexpected error occurred. Please try again.');
+    }
+  };
+
   return (
     <div className="min-h-screen flex flex-col items-center justify-center bg-gray p-6">
       <div className="container max-w-4xl p-12 bg-white border-4 border-[#f4d9a0] shadow-lg rounded-lg text-center">
@@ -91,10 +99,10 @@ export default function UserProfile() {
               style={{ display: 'none' }}
             />
             <div className="relative w-24 h-24 cursor-pointer">
-              {prof_pic_preview ? (
+              {prof_pic_url ? (
                 <img
                   className="w-full h-full rounded-full object-cover"
-                  src={prof_pic_preview}
+                  src={prof_pic_url}
                   alt="Profile"
                 />
               ) : (
@@ -167,4 +175,4 @@ export default function UserProfile() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/firebase-config.ts b/src/firebase-config.ts
index e4801cf5..89e77cb8 100644
--- a/src/firebase-config.ts
+++ b/src/firebase-config.ts
@@ -1,7 +1,8 @@
 // Import necessary functions from Firebase SDKs
-import { initializeApp } from "firebase/app";
+import { initializeApp, getApps, getApp } from "firebase/app";
 import { getAuth } from "firebase/auth";
-import { getAnalytics } from "firebase/analytics";
+// import { getAnalytics } from "firebase/analytics";
+import { getStorage } from "firebase/storage"; // Import Firebase Storage
 
 // Your web app's Firebase configuration
 const firebaseConfig = {
@@ -9,15 +10,16 @@ const firebaseConfig = {
   authDomain: "style-438016.firebaseapp.com",
   databaseURL: "https://style-438016-default-rtdb.firebaseio.com",
   projectId: "style-438016",
-  storageBucket: "style-438016.firebasestorage.app",
+  storageBucket: "style-438016.firebasestorage.app", // Make sure this doesn't get changed it's used to track the "pay as you go' model for google. Don't use the outdated appspot.com
   messagingSenderId: "237035198252",
   appId: "1:237035198252:web:edd415a2b70ba447557e89",
-  measurementId: "G-J687QSJY9C"
+  // measurementId: "G-J687QSJY9C"
 };
 
-// Initialize Firebase
-const app = initializeApp(firebaseConfig);
-const auth = getAuth(app); // Added Firebase Authentication
-const analytics = getAnalytics(app);
 
-export { app, auth };
+// Initialize Firebase only if no app has been initialized
+const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
+const auth = getAuth(app);
+const storage = getStorage(app);
+
+export { app, auth, storage };