fix: edit study groups keep the same types and doesn't show deactivat…

…ed study groups at the list

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 }) {
     </Card>
   )
 }
-
-
-

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,68 +124,161 @@ 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'))
     }
   }
 
   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 (
+        <div key={key} className="mb-4">
+          <label htmlFor={key} className="mb-2 block">
+            {t(key)}
+          </label>
+          <select
+            id={key}
+            name={key}
+            value={formData[key].toString()}
+            onChange={(e) =>
+              handleChange({ target: { name: key, value: e.target.value === 'true' } })
+            }
+            className="w-full rounded border p-2"
+          >
+            <option value="true">{t('true')}</option>
+            <option value="false">{t('false')}</option>
+          </select>
+        </div>
+      )
+    }
 
-    if (key === 'image_url') {
+    if (key === 'index') {
       return (
         <div key={key} className="mb-4">
           <label htmlFor={key} className="mb-2 block">
             {t(key)}
           </label>
           <input
-            type="text"
+            type="number"
             id={key}
             name={key}
-            value={formData[key] || ''}
+            value={formData[key] || 0}
             onChange={handleChange}
-            className="mb-2 w-full rounded border p-2"
-            readOnly
+            className="w-full rounded border p-2"
           />
+        </div>
+      )
+    }
+
+    if (key === 'scheduled_at') {
+      return (
+        <div key={key} className="mb-4">
+          <label htmlFor={key} className="mb-2 block">
+            {t(key)}
+          </label>
+          <input
+            type="datetime-local"
+            id={key}
+            name={key}
+            value={convertTimestampToDateTimeLocal(formData[key])}
+            onChange={handleChange}
+            className="w-full rounded border p-2"
+          />
+        </div>
+      )
+    }
+
+    if (key === 'metadata') {
+      return (
+        <div key={key} className="mb-4">
+          <label className="mb-2 block">{t(key)}</label>
+          {Object.keys(value).map((lang) => (
+            <div key={lang} className="mb-2">
+              <h4>{lang}</h4>
+              <input
+                type="text"
+                name={`metadata.${lang}.title`}
+                value={formData.metadata[lang]?.title || ''}
+                onChange={handleChange}
+                placeholder="Title"
+                className="mb-1 w-full rounded border p-2"
+              />
+              <textarea
+                name={`metadata.${lang}.description`}
+                value={formData.metadata[lang]?.description || ''}
+                onChange={handleChange}
+                placeholder="Description"
+                className="w-full rounded border p-2"
+              />
+            </div>
+          ))}
+        </div>
+      )
+    }
+
+    if (key === 'image_url') {
+      return (
+        <div key={key} className="mb-4">
+          <label htmlFor={key} className="mb-2 block">
+            {t(key)}
+          </label>
           <input
             type="file"
-            id="image_upload"
-            accept="image/*"
+            id={key}
+            name={key}
             onChange={handleImageUpload}
-            className="hidden"
+            className="w-full rounded border p-2"
           />
-          <label
-            htmlFor="image_upload"
-            className="text-white cursor-pointer rounded bg-blue-500 px-4 py-2 hover:bg-blue-600"
-          >
-            {t('editImage')}
-          </label>
+          {formData[key] && (
+            <img src={formData[key]} alt="Group image" className="mt-2 h-32 w-auto" />
+          )}
         </div>
       )
     }
 
+    // For other fields
     return (
       <div key={key} className="mb-4">
         <label htmlFor={key} className="mb-2 block">
           {t(key)}
         </label>
         <input
-          type={inputType}
+          type="text"
           id={key}
           name={key}
           value={formData[key] || ''}
@@ -165,6 +309,8 @@ function EditStudyGroup({ user }) {
             <option value="">{t('selectGroup')}</option>
             {groups.map((group) => (
               <option key={group.id} value={group.id}>
+                {group.index !== undefined ? `[${group.index}] ` : ''}
+                {!group.active && `${t('[deactivated]')} - `}
                 {group.title}
               </option>
             ))}