Skip to content

Commit

Permalink
Fixed Merge Issues
Browse files Browse the repository at this point in the history 
## Commit Message
Slight merge issue encountered when reverting a pull request and merging the main branch into my branch.

This commit resolves the merge conflict.
  • Loading branch information
@IslamiTP
IslamiTP committed Nov 27, 2024
1 parent 32f90bd commit 17aec07
Show file tree
Hide file tree
Showing 3 changed files with 135 additions and 83 deletions.
107 changes: 75 additions & 32 deletions src/app/portfolio/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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);
}
};
Expand All @@ -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 };
Expand All @@ -66,36 +94,37 @@ 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 Submit
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, // Profile picture URL from Firebase
photos: photoUrls, // Carousel photos URLs from Firebase
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');
Expand All @@ -109,6 +138,9 @@ export default function Portfolio() {
}
};


// ------------------------------------------------------ Business Hour ------------------------------------------------------

const toggleBusinessHours = () => {
setShowBusinessHours(!showBusinessHours);
};
Expand All @@ -132,9 +164,15 @@ export default function Portfolio() {
setShowBusinessHours(false);
};




// ------------------------------------------------------ HTML SECTION ------------------------------------------------------
return (
<div className="container">
<Navbar />

{/* Business Name */}
<div className="business-name">
<input
type="text"
Expand All @@ -157,10 +195,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"
/>
) : (
Expand All @@ -176,12 +214,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}`}
/>
Expand Down Expand Up @@ -209,6 +248,9 @@ export default function Portfolio() {
</label>
</div>

{/* Carousel Controls */}

{/* Carousel Previous Photo */}
<button
type="button"
onClick={handlePrevPhoto}
Expand All @@ -227,6 +269,7 @@ export default function Portfolio() {
</span>
</button>

{/* Carousel Next Photo */}
<button
type="button"
onClick={handleNextPhoto}
Expand All @@ -246,13 +289,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>

Expand Down
94 changes: 51 additions & 43 deletions src/app/userprofile/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -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() {
Expand All @@ -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);
}
};

Expand All @@ -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
};

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">
Expand All @@ -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"
/>
) : (
Expand Down Expand Up @@ -167,4 +175,4 @@ export default function UserProfile() {
</div>
</div>
);
}
}
Loading

0 comments on commit 17aec07

Please sign in to comment.