added and tested update profile functions for both consumer, provider, and Service

Author: ShawnWang21

components/CustomerAccountDetails.tsx

@@ -1,23 +1,14 @@
 import { useEffect, useState } from 'react';
 import { databases} from '../lib/appwrite.config';
 import * as sdk from 'node-appwrite';
-
-// const CustomerAccountDetails = () => {
-//     return (
-//       <div>
-//         <h2 className="text-2xl font-bold mb-4">Account Details</h2>
-//         <p>This is a placeholder for the customer account details section.</p>
-//       </div>
-//     );
-//   };
-  
-
-
-
+import ChangePasswordForm from './UpdatePassword';
+import UpdateProfileForm from './UpdateProfileForm';
 
 const CustomerAccountDetails: React.FC = () => {
-const [profile, setProfile] = useState<any>(null);
-const [message, setMessage] = useState('');
+  const [profile, setProfile] = useState<any>(null);
+  const [message, setMessage] = useState('');
+  const [expandedSection, setExpandedSection] = useState<string | null>(null);
+  const [activeSetting, setActiveSetting] = useState<string | null>(null);
 
 useEffect(() => {
   const fetchProfile = async () => {
@@ -34,9 +25,7 @@ useEffect(() => {
       const response = await databases.listDocuments(
           process.env.DATABASE_ID!,
           process.env.CONSUMER_COLLECTION_ID!, 
-        [ 
-          sdk.Query.equal('userId', session.userId)
-        ]
+        [ sdk.Query.equal('userId', session.userId)]
       );
 
         if (response.documents.length > 0) {
@@ -53,31 +42,76 @@ useEffect(() => {
     fetchProfile();
   }, []);
 
+  const toggleSection = (section: string) => {
+    setExpandedSection(expandedSection === section ? null : section);
+    setActiveSetting(null);
+  };
+
+  const handleSettingClick = (setting: string) => {
+    setActiveSetting(setting);
+  };
+
   return (
-    <div>
-      <h2 className="text-2xl font-bold mb-4">Account Details</h2>
-      {message && <p>{message}</p>}
-      {profile ? (
-        <div>
-       <div>
-          <h2>{profile.name}</h2>
-          <p>Email: {profile.email}</p>
-          <p>Phone: {profile.phone}</p>
-          <p>Address: {profile.address}</p>
-          <p>City: {profile.city}</p>
-          <p>State: {profile.state}</p>
-          <p>Zipcode: {profile.zipcode}</p>
-          <p>Create On: {profile.createon}</p>
-          <p>User Type: {profile.userType}</p>
-          <p>Profile Image: <img src={profile.profileImg} alt="Profile" /></p>
-          <p>Bookings: {profile.bookings.join(', ')}</p>
-          <p>User ID: {profile.userId}</p>
-          {/* Add other profile fields as needed */}
+<div className="bg-gray-100 rounded-lg p-6">
+      <div className="flex justify-between items-start mb-4 border-b border-gray-300 pb-4">
+        <div className="flex items-center">
+          <div className="w-40 h-40 flex items-center justify-center rounded-full">
+            <img className="w-32 h-32 rounded-full" src={profile?.profileImg} alt={profile?.name} />
+          </div>
+          <div className="mx-6">
+            <h2 className="font-bold text-lg">{profile?.name}</h2>
+            <p>{profile?.city}, {profile?.state}</p>
+            <p>Stars (Rating): {profile?.rating}</p>
+            <p>Joined On: {profile?.createdAt?.substring(0, 10)}</p>
+            <p>User Type: {profile?.userType}</p>
+          </div>
+        </div>
+        <div className="w-5/12 items-center justify-center mt-10">
+          <h3 className=""><span className="label mt-1">Phone:</span>{profile?.phone}</h3>
+          <h3 className=""><span className="label">e-mail:</span>{profile?.email}</h3>
+          <h3 className=""><span className="label">Address:</span>{profile?.address}</h3>
         </div>
+      </div>
+      <div className="flex">
+        <div className="w-full p-4">
+          <h3 className="my-4 cursor-pointer" onClick={() => toggleSection('accountSettings')}>
+            Account Settings
+          </h3>
+          {expandedSection === 'accountSettings' && (
+            <div className="p-4 bg-white rounded shadow">
+              <p className="cursor-pointer my-2 font-bold" onClick={() => handleSettingClick('changePassword')}>Change Password</p>
+              {activeSetting === 'changePassword' && profile && (
+                <div className="mt-4">
+                  <ChangePasswordForm userId={profile.userId} />
+                </div>
+              )}
+              <p className="cursor-pointer my-2 font-bold" onClick={() => handleSettingClick('updateAccountInfo')}>Update Account Info</p>
+              {activeSetting === 'updateAccountInfo' && profile && (
+                <div className="mt-4">
+                  <UpdateProfileForm profile={profile} />
+                </div>
+              )}
+              {console.log(profile.$id)}
+            </div>
+          )}
+          <h3 className="my-4 cursor-pointer" onClick={() => toggleSection('currentBookings')}>
+            Current Bookings
+          </h3>
+          {expandedSection === 'currentBookings' && (
+            <div className="p-4 bg-white rounded shadow">
+              <p>Current bookings content...</p>
+            </div>
+          )}
+          <h3 className="my-4 cursor-pointer" onClick={() => toggleSection('myReviews')}>
+            My Reviews
+          </h3>
+          {expandedSection === 'myReviews' && (
+            <div className="p-4 bg-white rounded shadow">
+              <p>My reviews content...</p>
+            </div>
+          )}
         </div>
-      ) : (
-        <p>Loading profile...</p>
-      )}
+      </div>
     </div>
   );
 };

components/CustomerRegisterForm.tsx

@@ -11,6 +11,7 @@ import { users, databases } from '../lib/appwrite.config';
 
 const CustomerRegisterForm: React.FC = () => {
   const router = useRouter();
+  const created = useState(new Date().toISOString());
   const [formData, setFormData] = useState({
     email: '',
     password: '',
@@ -36,6 +37,7 @@ const CustomerRegisterForm: React.FC = () => {
     try {
       const newUser = await users.create('unique()', formData.email, formData.phone, formData.password, formData.name);
       //await users.updatePhone(newUser.$id, formData.phone);
+      await users.updateLabels(newUser.$id, ["Consumer"]);
 
       await databases.createDocument(
         process.env.DATABASE_ID!,
@@ -51,7 +53,8 @@ const CustomerRegisterForm: React.FC = () => {
           state: formData.state,
           zipcode: formData.zipcode,
           profileImg: formData.profileImg,
-          userType:"Consumer"
+          userType:"Consumer",
+          createon:created
         }
       );
 

components/CustomerSearchServices.tsx

@@ -216,7 +216,7 @@ const CustomerSearchServices: React.FC = () => {
             providerID=''
             category={service.category}
             city={service.city}
-            providerIcon={'../public/assets/InteriorDesignXL.jpg'}
+            providerIcon={'https://cdn-icons-png.flaticon.com/512/3135/3135715.png'}
             rating={5}
             onClick={() => setSelectedService(service)} // Set the selected service on click
             onProviderClick={() => setSelectedProvider(service)} // Set the selected provider on click

components/ServiceCard.tsx

@@ -51,10 +51,10 @@ const ServiceCard: React.FC<ServiceCardProps> = ({ title, summary, description,
       <div className="mb-1 flex-grow" onClick={onClick}>
         <p className="text-gray-700 line-clamp-3">{summary}</p>
       </div>
-      <div className="flex justify-between items-center mt-1"onClick={onClick}>
+      <div className="flex justify-between items-center mt-1">
         <span className="text-gray-500 text-sm">{city}</span>
-        <div className="flex items-center">
-          <p className="text-gray-600 italic text-sm cursor-pointer" onClick={onProviderClick}>By: {providerName}</p>
+        <div className="flex items-center" onClick={onProviderClick}>
+          <p className="text-gray-600 italic text-sm cursor-pointer">By: {providerName}</p>
           <img src={providerIcon} alt={providerName} className="w-8 h-8 rounded-full mr-2" />
         </div>
       </div>

components/UpdateProfileForm.tsx

@@ -9,20 +9,33 @@ const UpdateProfileForm: React.FC<{ profile: any }> = ({ profile }) => {
   const [city, setCity] = useState(profile.city);
   const [state, setState] = useState(profile.state);
   const [zipcode, setZipcode] = useState(profile.zipcode);
+  const [profileImg, setProfileImg] = useState(profile.profileImg);
   const [message, setMessage] = useState('');
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     try {
-      await users.updatePhone(profile.userId, phone);
-      await users.updateEmail(profile.userId, email);
-      await users.updateName(profile.userId, name);
-
+      if (phone !== profile.phone) {
+        await users.updatePhone(profile.userId, phone);
+      }
+      if (email !== profile.email) {
+        await users.updateEmail(profile.userId, email);
+      }
+      if (name !== profile.name) {
+        await users.updateName(profile.userId, name);
+      }
+      var collectionID = "";
+      if(profile.userType==="Consumer"){
+        collectionID = process.env.CONSUMER_COLLECTION_ID!
+      }
+      else if(profile.userType==="Provider"){
+        collectionID = process.env.SERVICEPROVIDER_COLLECTION_ID!
+      }
       await databases.updateDocument(
         process.env.DATABASE_ID!,
-        process.env.SERVICEPROVIDER_COLLECTION_ID!,
+        collectionID,
         profile.$id,
-        { name, email, phone, address, city, state, zipcode }
+        { name, email, phone, address, city, state, zipcode, profileImg }
       );
       setMessage('Profile updated successfully');
     } catch (error) {
@@ -124,6 +137,19 @@ const UpdateProfileForm: React.FC<{ profile: any }> = ({ profile }) => {
           className="border border-gray-300 rounded p-1 mt-1"
         />
       </div>
+      <div className="flex flex-col">
+        <label htmlFor="profileImg" className="font-semibold">
+          Profile Image:
+        </label>
+        <input
+          type="text"
+          id="profileImg"
+          value={profileImg}
+          onChange={(e) => setProfileImg(e.target.value)}
+          required
+          className="border border-gray-300 rounded p-1 mt-1"
+        />
+      </div>
       <button type="submit" className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
         Update Info
       </button>

components/UpdateServiceForm.tsx

@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import { databases } from '../lib/appwrite.config';
+
+const UpdateServiceForm: React.FC<{ service: any }> = ({ service }) => {
+  const [title, setTitle] = useState(service.title);
+  const [description, setDescription] = useState(service.description);
+  const [price, setPrice] = useState(service.price);
+  const [summary, setSummary] = useState(service.summary);
+  const [category, setCategory] = useState(service.category);
+  const [address, setAddress] = useState(service.address);
+  const [zipcode, setZipcode] = useState(service.zipcode);
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      await databases.updateDocument(
+        process.env.DATABASE_ID!,
+        process.env.SERVICE_COLLECTION_ID!,
+        service.$id,
+        { title, description, price, summary, category, address, zipcode }
+      );
+      setMessage('Service updated successfully');
+    } catch (error) {
+      console.error('Error updating service:', error);
+      setMessage('Error updating service');
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="flex flex-col">
+        <label htmlFor="title" className="font-semibold">
+          Title:
+        </label>
+        <input
+          type="text"
+          id="title"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          required
+          className="border border-gray-300 rounded p-1 mt-1"
+        />
+      </div>
+      <div className="flex flex-col">
+        <label htmlFor="summary" className="font-semibold">
+          Summary:
+        </label>
+        <textarea
+          id="summary"
+          value={summary}
+          onChange={(e) => setSummary(e.target.value)}
+          required
+          className="border border-gray-300 rounded p-1 mt-1 h-12"
+        />
+      </div>
+      <div className="flex flex-col">
+        <label htmlFor="description" className="font-semibold">
+          Description:
+        </label>
+        <textarea
+          id="description"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          required
+          className="border border-gray-300 rounded p-1 mt-1"
+        />
+      </div>
+      <div className="flex flex-col">
+        <label htmlFor="price" className="font-semibold">
+          Price:
+        </label>
+        <input
+          type="number"
+          id="price"
+          value={price}
+          onChange={(e) => setPrice(e.target.value)}
+          required
+          className="border border-gray-300 rounded p-1 mt-1"
+        />
+      </div>
+
+      <div className="flex flex-col">
+        <label htmlFor="category" className="font-semibold">
+          Category:
+        </label>
+        <input
+          type="text"
+          id="category"
+          value={category}
+          onChange={(e) => setCategory(e.target.value)}
+          required
+          className="border border-gray-300 rounded p-1 mt-1"
+        />
+      </div>
+      <div className="flex flex-col">
+        <label htmlFor="address" className="font-semibold">
+          Address:
+        </label>
+        <input
+          type="text"
+          id="address"
+          value={address}
+          onChange={(e) => setAddress(e.target.value)}
+          required
+          className="border border-gray-300 rounded p-1 mt-1"
+        />
+      </div>
+      <div className="flex flex-col">
+        <label htmlFor="zipcode" className="font-semibold">
+          Zipcode:
+        </label>
+        <input
+          type="text"
+          id="zipcode"
+          value={zipcode}
+          onChange={(e) => setZipcode(e.target.value)}
+          required
+          className="border border-gray-300 rounded p-1 mt-1"
+        />
+      </div>
+      <button type="submit" className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
+        Update Service
+      </button>
+      {message && <p className="mt-2">{message}</p>}
+    </form>
+  );
+};
+
+export default UpdateServiceForm;