diff --git a/src/pages/courses/CourseConfirmation.jsx b/src/pages/courses/CourseConfirmation.jsx index 71fde5f8..badde162 100644 --- a/src/pages/courses/CourseConfirmation.jsx +++ b/src/pages/courses/CourseConfirmation.jsx @@ -104,12 +104,12 @@ export default function CourseConfirmation() { navigate(`/courses/${course?.id}`)} /> navigate('/courses')} /> { } const data = await response.json(); console.log('response: ', data); + console.log('Owner: ', data.owner); setIsRegistered(data.video_link); setCourseData(data); } catch (error) { @@ -300,7 +301,7 @@ const CourseDetail = () => { {/* Check if the user is registered for the course to show the Register Button */} - {!courseData.video_link && ( + {!courseData.owner && ( Register for this course diff --git a/src/pages/courses/CourseEdit.jsx b/src/pages/courses/CourseEdit.jsx index 8a70e5db..07e4287b 100644 --- a/src/pages/courses/CourseEdit.jsx +++ b/src/pages/courses/CourseEdit.jsx @@ -20,7 +20,7 @@ export default function CourseUpload() { title: '', price: '', description: '', - formLink: '', + form_link: '', courseType: '', language: '', // Add this field }); @@ -31,8 +31,35 @@ export default function CourseUpload() { // Update handleChange function to handle video visibility const handleChange = (e) => { + console.log('Current form state:', formState); const { name, value } = e.target; - const updatedFormState = { ...formState, [name]: value }; + let updatedValue = value; + + if (name === 'price') { + // Remove dollar sign if present for validation + if (value.startsWith('$')) { + updatedValue = value.slice(1); + } + + // Allow only numbers and one decimal point + if (updatedValue === '' || updatedValue === '.') { + updatedValue = updatedValue === '.' ? '$0.' : '$'; + } + + // Check if input is a valid price format + if (/^\d*\.?\d{0,2}$/.test(updatedValue)) { + updatedValue = `$${updatedValue}`; + } else { + updatedValue = parseFloat(updatedValue).toFixed(2); + if (isNaN(updatedValue)) { + updatedValue = ''; + } else { + updatedValue = `$${updatedValue}`; + } + } + } + console.log('Updated value:', updatedValue); + const updatedFormState = { ...formState, [name]: updatedValue }; // Clear video file if changing from Online to other course types if (name === 'courseType' && value !== 'Online') { @@ -40,13 +67,29 @@ export default function CourseUpload() { } console.log('Updated form state:', updatedFormState); - setFormState(updatedFormState); - setError(''); + + // Debug validation for each field + Object.entries(updatedFormState).forEach(([key, value]) => { + let isValid = false; + if (key === 'videoFile') { + isValid = + updatedFormState.courseType !== 'Online' || + value instanceof File || + (typeof value === 'string' && value.trim() !== ''); + } else { + isValid = + value instanceof File || + (typeof value === 'string' && value.trim() !== ''); + } + console.log( + `Field ${key}: ${isValid ? 'Valid' : 'Invalid'} - Value:`, + value + ); + }); const isComplete = Object.entries(updatedFormState).every( ([key, value]) => { if (key === 'videoFile') { - // Only validate video for Online courses return ( updatedFormState.courseType !== 'Online' || value instanceof File || @@ -60,17 +103,25 @@ export default function CourseUpload() { } ); + setFormState(updatedFormState); + setError(''); setIsFormComplete(isComplete); + console.log('Form complete:', isComplete); }; const handleSubmit = async (e) => { e.preventDefault(); setIsSubmitting(true); try { - console.log('Submitting form...', formState); const formData = new FormData(); + Object.entries(formState).forEach(([key, value]) => { - formData.append(key, value); + if (key === 'price') { + // Remove dollar sign and convert to number + formData.append(key, value.replace('$', '')); + } else { + formData.append(key, value); + } }); const BACKEND_URL = @@ -119,15 +170,24 @@ export default function CourseUpload() { throw new Error('Course not found'); } const data = await response.json(); - console.log('response: ', data); - setFormState({ - title: data.title, - price: data.price.toString(), - description: data.description, - formLink: data.form_link, - courseType: data.course_type, - language: data.language, // Add this field - }); + console.log('Raw response:', data); + + const courseData = data; + delete courseData.owner; + courseData.price = `$${courseData.price}`; + + console.log('Processed course data:', courseData); + + const newState = { + title: courseData.title, + price: courseData.price, + description: courseData.description, + form_link: courseData.form_link, + courseType: courseData.course_type, + language: courseData.language, + }; + + setFormState(newState); } catch (error) { console.error('Error fetching data:', error); } finally { @@ -193,10 +253,13 @@ export default function CourseUpload() { {formState.courseType === 'Online' && ( @@ -219,7 +282,7 @@ export default function CourseUpload() { onClick={handleSubmit} isLoading={isSubmitting} > - {isSubmitting ? 'Uploading' : 'Submit'} + {isSubmitting ? 'Uploading' : 'Save Changes'} navigate('/courses')} diff --git a/src/pages/courses/CourseUpload.jsx b/src/pages/courses/CourseUpload.jsx index 3fc9362f..ea07b9af 100644 --- a/src/pages/courses/CourseUpload.jsx +++ b/src/pages/courses/CourseUpload.jsx @@ -63,10 +63,18 @@ export default function CourseUpload() { try { console.log('Submitting form...', formState); const formData = new FormData(); + Object.entries(formState).forEach(([key, value]) => { formData.append(key, value); }); + // Clean up the price field + if (formData.has('price')) { + const price = formData.get('price'); + formData.delete('price'); + formData.append('price', price.replace('$', '')); + } + const BACKEND_URL = process.env.REACT_APP_BACKEND_URL || 'http://localhost:8000'; const token = localStorage.getItem('authToken'); @@ -150,10 +158,36 @@ export default function CourseUpload() { { + let value = e.target.value; + // Remove dollar sign if present + if (value.startsWith('$')) { + value = value.slice(1); + } + + // Allow only numbers and one decimal point + if (value === '' || value === '.') { + setFormState((prev) => ({ + ...prev, + price: value === '.' ? '$0.' : '', + })); + return; + } + + // Check if input is a valid price format + if (/^\d*\.?\d{0,2}$/.test(value)) { + setFormState((prev) => ({ + ...prev, + price: `$${value}`, + })); + } + }} required + style={{ + position: 'relative', + }} /> {formState.courseType === 'Online' && (