From 2d59b62a32dc07f85297250aaf4c089f6c19deed Mon Sep 17 00:00:00 2001 From: Yan Luiz Date: Tue, 10 Sep 2024 21:08:43 -0300 Subject: [PATCH] fix: edit study groups keep the same types and doesn't show deactivated study groups at the list --- components/Card/StudyGroup/index.js | 5 +- pages/admin/editGroup.js | 202 ++++++++++++++++++++++++---- 2 files changed, 176 insertions(+), 31 deletions(-) diff --git a/components/Card/StudyGroup/index.js b/components/Card/StudyGroup/index.js index 705c5283..fa98eb1b 100644 --- a/components/Card/StudyGroup/index.js +++ b/components/Card/StudyGroup/index.js @@ -7,6 +7,8 @@ import { useTranslation } from 'react-i18next' import RenderField from '../../RenderField' export function StudyGroupCard({ studyGroup }) { + if (!studyGroup.active) return null + const [showMore, setShowMore] = useState(false) const { t } = useTranslation() @@ -88,6 +90,3 @@ export function StudyGroupCard({ studyGroup }) { ) } - - - \ No newline at end of file diff --git a/pages/admin/editGroup.js b/pages/admin/editGroup.js index ab822ffa..e7f9aefd 100644 --- a/pages/admin/editGroup.js +++ b/pages/admin/editGroup.js @@ -7,6 +7,21 @@ import { useTranslation } from 'react-i18next' import Head from 'next/head' import { ref, uploadBytes, getDownloadURL } from 'firebase/storage' +// Add this helper function at the top of your component +const convertTimestampToDateTimeLocal = (timestamp) => { + if (!timestamp) return '' + const date = + timestamp instanceof Timestamp ? timestamp.toDate() : new Date(timestamp.seconds * 1000) + + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + + return `${year}-${month}-${day}T${hours}:${minutes}` +} + function EditStudyGroup({ user }) { const [groups, setGroups] = useState([]) const [selectedGroup, setSelectedGroup] = useState(null) @@ -22,7 +37,16 @@ function EditStudyGroup({ user }) { const fetchGroups = async () => { const querySnapshot = await getDocs(collection(db, 'study_groups')) const groupsData = querySnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() })) - setGroups(groupsData) + + // Sort groups: active groups by index, then inactive groups + const sortedGroups = groupsData.sort((a, b) => { + if (a.active && !b.active) return -1 + if (!a.active && b.active) return 1 + if (a.active === b.active) return (a.index || 0) - (b.index || 0) + return 0 + }) + + setGroups(sortedGroups) } const handleGroupSelect = (e) => { @@ -42,12 +66,39 @@ function EditStudyGroup({ user }) { } } + // Modify handleChange to correctly handle the scheduled_at field const handleChange = (e) => { const { name, value } = e.target - setFormData((prevData) => ({ - ...prevData, - [name]: value, - })) + setFormData((prevData) => { + let newData = { ...prevData } + + if (name === 'scheduled_at') { + newData[name] = value ? Timestamp.fromDate(new Date(value)) : null + } else if (name.startsWith('metadata.')) { + const [, lang, field] = name.split('.') + newData.metadata = { + ...newData.metadata, + [lang]: { + ...newData.metadata[lang], + [field]: value, + }, + } + // Also update the main field if it's title or description + if (field === 'title' || field === 'description') { + newData[field] = value + } + } else { + newData[name] = value + // Also update the metadata if it's title or description + if (name === 'title' || name === 'description') { + Object.keys(newData.metadata).forEach((lang) => { + newData.metadata[lang][name] = value + }) + } + } + + return newData + }) } const handleImageUpload = async (e) => { @@ -73,15 +124,38 @@ function EditStudyGroup({ user }) { e.preventDefault() try { - const updatedData = { ...formData } - if (updatedData.scheduled_at) { + // Start with the original data of the selected group + const updatedData = { ...selectedGroup } + + // Iterate over the fields in formData + Object.keys(formData).forEach((key) => { + // If the value in formData is different from the original value, update it + if (JSON.stringify(formData[key]) !== JSON.stringify(selectedGroup[key])) { + updatedData[key] = formData[key] + } + }) + + // Handle scheduled_at as Timestamp + if (updatedData.scheduled_at && !(updatedData.scheduled_at instanceof Timestamp)) { updatedData.scheduled_at = Timestamp.fromDate(new Date(updatedData.scheduled_at)) } + // Ensure that title and description are updated in metadata + if (updatedData.metadata) { + Object.keys(updatedData.metadata).forEach((lang) => { + updatedData.metadata[lang].title = updatedData.title + updatedData.metadata[lang].description = updatedData.description + }) + } + + // Remove fields that should not be updated + delete updatedData.id + delete updatedData.analytics + await updateDoc(doc(db, 'study_groups', selectedGroup.id), updatedData) console.log('Study group updated successfully') alert(t('studyGroupUpdatedSuccessfully')) - router.push(`/study-groups/${updatedData.slug || updatedData.id}`) + router.push(`/study-groups/${updatedData.slug || selectedGroup.id}`) } catch (error) { console.error('Error updating study group: ', error) alert(t('errorUpdatingStudyGroup')) @@ -89,52 +163,122 @@ function EditStudyGroup({ user }) { } const renderFormField = (key, value) => { - if (key === 'id') return null // Não renderizar o campo 'id' - if (key === 'analytics') return null // Não renderizar o campo 'id' + if (key === 'id' || key === 'analytics') return null - let inputType = 'text' - if (typeof value === 'number') inputType = 'number' - if (value instanceof Date) inputType = 'datetime-local' + if (key === 'active') { + return ( +
+ + +
+ ) + } - if (key === 'image_url') { + if (key === 'index') { return (
+
+ ) + } + + if (key === 'scheduled_at') { + return ( +
+ + +
+ ) + } + + if (key === 'metadata') { + return ( +
+ + {Object.keys(value).map((lang) => ( +
+

{lang}

+ +