From 7e402d352ccda28f6c6ef4a8cc56a607996f29b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sedat=20=C3=96ZT=C3=9CRK?=
 <76204082+iamsedatozturk@users.noreply.github.com>
Date: Wed, 27 Aug 2025 16:19:08 +0300
Subject: [PATCH] Classlist ve NewClassroom

---
 ui/src/proxy/classroom/models.ts     |   4 +-
 ui/src/views/classroom/ClassList.tsx | 165 ++++++++++++---------------
 2 files changed, 78 insertions(+), 91 deletions(-)

diff --git a/ui/src/proxy/classroom/models.ts b/ui/src/proxy/classroom/models.ts
index faed54ec..61abfbdc 100644
--- a/ui/src/proxy/classroom/models.ts
+++ b/ui/src/proxy/classroom/models.ts
@@ -10,7 +10,7 @@ export interface User {
 }
 
 export interface ClassroomDto {
-  id: string
+  id?: string
   name: string
   description?: string
   subject?: string
@@ -19,7 +19,7 @@ export interface ClassroomDto {
   scheduledStartTime: string
   actualStartTime?: string
   endTime?: string
-  duration?: number 
+  duration?: number
   maxParticipants?: number
   isActive: boolean
   isScheduled: boolean
diff --git a/ui/src/views/classroom/ClassList.tsx b/ui/src/views/classroom/ClassList.tsx
index 88f83256..2ab6316c 100644
--- a/ui/src/views/classroom/ClassList.tsx
+++ b/ui/src/views/classroom/ClassList.tsx
@@ -27,13 +27,20 @@ const ClassList: React.FC = () => {
   const navigate = useNavigate()
   const { user } = useStoreState((state) => state.auth)
 
-  const newClassEntity = {
+  const newClassEntity: ClassroomDto = {
+    id: crypto.randomUUID(),
     name: '',
     description: '',
     subject: '',
+    teacherId: user.id,
+    teacherName: user.name,
     scheduledStartTime: '',
     duration: 60,
     maxParticipants: 30,
+    isActive: false,
+    isScheduled: true,
+    participantCount: 0,
+    canJoin: false,
     settings: {
       allowHandRaise: true,
       allowStudentChat: true,
@@ -46,10 +53,7 @@ const ClassList: React.FC = () => {
     },
   }
   const [classList, setClassList] = useState<ClassroomDto[]>([])
-
-  const [newClassroom, setNewClassroom] = useState(newClassEntity)
-  const [editingClass, setEditingClass] = useState<ClassroomDto | null>(null)
-  const [deletingClass, setDeletingClass] = useState<ClassroomDto | null>(null)
+  const [classroom, setClassroom] = useState<ClassroomDto>(newClassEntity)
 
   const [showCreateModal, setShowCreateModal] = useState(false)
   const [showEditModal, setShowEditModal] = useState(false)
@@ -75,32 +79,16 @@ const ClassList: React.FC = () => {
 
   const handleCreateClass = async (e: React.FormEvent) => {
     e.preventDefault()
-    const newClass: ClassroomDto = {
-      ...newClassroom,
-      id: crypto.randomUUID(),
-      teacherId: user.id,
-      teacherName: user.name,
-      isActive: false,
-      isScheduled: true,
-      participantCount: 0,
-      actualStartTime: '',
-      canJoin: false,
-      settings: {
-        ...newClassroom.settings,
-        defaultMicrophoneState: newClassroom.settings.defaultMicrophoneState as 'muted' | 'unmuted',
-        defaultCameraState: newClassroom.settings.defaultCameraState as 'on' | 'off',
-      },
-    }
 
     try {
-      await createClassroom(newClass)
+      await createClassroom(newClassEntity)
 
       getClassroomList()
       setShowCreateModal(false)
-      setNewClassroom(newClassEntity)
+      setClassroom(newClassEntity)
 
-      if (newClass.id) {
-        navigate(ROUTES_ENUM.protected.admin.classroom.classroom.replace(':id', newClass.id))
+      if (classroom.id) {
+        navigate(ROUTES_ENUM.protected.admin.classroom.classroom.replace(':id', classroom.id))
       }
     } catch (error) {
       console.error('Sınıf oluştururken hata oluştu:', error)
@@ -109,14 +97,14 @@ const ClassList: React.FC = () => {
 
   const handleEditClass = async (e: React.FormEvent) => {
     e.preventDefault()
-    if (!editingClass) return
+    if (!classroom) return
 
     try {
-      await updateClassroom(editingClass)
+      await updateClassroom(classroom)
 
       getClassroomList()
       setShowEditModal(false)
-      setEditingClass(null)
+      setClassroom(newClassEntity)
       resetForm()
     } catch (error) {
       console.error('Sınıf oluştururken hata oluştu:', error)
@@ -124,30 +112,30 @@ const ClassList: React.FC = () => {
   }
 
   const openEditModal = (classSession: ClassroomDto) => {
-    setEditingClass(classSession)
+    setClassroom(classSession)
     setShowEditModal(true)
   }
 
   const openDeleteModal = (classSession: ClassroomDto) => {
-    setDeletingClass(classSession)
+    setClassroom(classSession)
     setShowDeleteModal(true)
   }
 
   const handleDeleteClass = async () => {
-    if (!deletingClass) return
+    if (!classroom) return
 
     try {
-      await deleteClassroom(deletingClass.id)
+      await deleteClassroom(classroom.id!)
       getClassroomList()
       setShowDeleteModal(false)
-      setDeletingClass(null)
+      setClassroom(newClassEntity)
     } catch (error) {
       console.error('Sınıf silinirken hata oluştu:', error)
     }
   }
 
   const resetForm = () => {
-    setNewClassroom(newClassEntity)
+    setClassroom(newClassEntity)
   }
 
   const handleStartClass = (classSession: ClassroomDto) => {
@@ -422,7 +410,7 @@ const ClassList: React.FC = () => {
       </div>
 
       {/* Class Modal (Create/Edit) */}
-      {(showCreateModal || (showEditModal && editingClass)) && (
+      {(showCreateModal || (showEditModal && classroom)) && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
           <motion.div
             initial={{ opacity: 0, scale: 0.95 }}
@@ -445,8 +433,8 @@ const ClassList: React.FC = () => {
                   type="text"
                   required
                   autoFocus={showCreateModal}
-                  value={newClassroom.name}
-                  onChange={(e) => setNewClassroom({ ...newClassroom, name: e.target.value })}
+                  value={classroom.name}
+                  onChange={(e) => setClassroom({ ...classroom, name: e.target.value })}
                   className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                   placeholder="Örn: Matematik 101 - Diferansiyel Denklemler"
                 />
@@ -455,10 +443,8 @@ const ClassList: React.FC = () => {
               <div>
                 <label className="block text-sm font-medium text-gray-700 mb-2">Açıklama</label>
                 <textarea
-                  value={newClassroom.description}
-                  onChange={(e) =>
-                    setNewClassroom({ ...newClassroom, description: e.target.value })
-                  }
+                  value={classroom.description}
+                  onChange={(e) => setClassroom({ ...classroom, description: e.target.value })}
                   rows={3}
                   className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                   placeholder="Ders hakkında kısa açıklama..."
@@ -472,8 +458,8 @@ const ClassList: React.FC = () => {
                   </label>
                   <input
                     type="text"
-                    value={newClassroom.subject}
-                    onChange={(e) => setNewClassroom({ ...newClassroom, subject: e.target.value })}
+                    value={classroom.subject}
+                    onChange={(e) => setClassroom({ ...classroom, subject: e.target.value })}
                     className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                     placeholder="Örn: Matematik, Fizik, Kimya"
                   />
@@ -486,10 +472,12 @@ const ClassList: React.FC = () => {
                   <input
                     type="datetime-local"
                     required
-                    value={newClassroom.scheduledStartTime}
+                    value={
+                      classroom.scheduledStartTime ? classroom.scheduledStartTime.slice(0, 16) : ''
+                    }
                     onChange={(e) =>
-                      setNewClassroom({
-                        ...newClassroom,
+                      setClassroom({
+                        ...classroom,
                         scheduledStartTime: e.target.value,
                       })
                     }
@@ -507,10 +495,10 @@ const ClassList: React.FC = () => {
                     type="number"
                     min="15"
                     max="480"
-                    value={newClassroom.duration}
+                    value={classroom.duration}
                     onChange={(e) =>
-                      setNewClassroom({
-                        ...newClassroom,
+                      setClassroom({
+                        ...classroom,
                         duration: parseInt(e.target.value),
                       })
                     }
@@ -526,10 +514,10 @@ const ClassList: React.FC = () => {
                     type="number"
                     min="1"
                     max="100"
-                    value={newClassroom.maxParticipants}
+                    value={classroom.maxParticipants}
                     onChange={(e) =>
-                      setNewClassroom({
-                        ...newClassroom,
+                      setClassroom({
+                        ...classroom,
                         maxParticipants: parseInt(e.target.value),
                       })
                     }
@@ -548,12 +536,12 @@ const ClassList: React.FC = () => {
                     <label className="flex items-center space-x-3">
                       <input
                         type="checkbox"
-                        checked={newClassroom.settings.allowHandRaise}
+                        checked={classroom.settings?.allowHandRaise}
                         onChange={(e) =>
-                          setNewClassroom({
-                            ...newClassroom,
+                          setClassroom({
+                            ...classroom,
                             settings: {
-                              ...newClassroom.settings,
+                              ...classroom.settings!,
                               allowHandRaise: e.target.checked,
                             },
                           })
@@ -565,12 +553,12 @@ const ClassList: React.FC = () => {
                     <label className="flex items-center space-x-3">
                       <input
                         type="checkbox"
-                        checked={newClassroom.settings.allowStudentChat}
+                        checked={classroom.settings?.allowStudentChat}
                         onChange={(e) =>
-                          setNewClassroom({
-                            ...newClassroom,
+                          setClassroom({
+                            ...classroom,
                             settings: {
-                              ...newClassroom.settings,
+                              ...classroom.settings!,
                               allowStudentChat: e.target.checked,
                             },
                           })
@@ -582,12 +570,12 @@ const ClassList: React.FC = () => {
                     <label className="flex items-center space-x-3">
                       <input
                         type="checkbox"
-                        checked={newClassroom.settings.allowPrivateMessages}
+                        checked={classroom.settings?.allowPrivateMessages}
                         onChange={(e) =>
-                          setNewClassroom({
-                            ...newClassroom,
+                          setClassroom({
+                            ...classroom,
                             settings: {
-                              ...newClassroom.settings,
+                              ...classroom.settings!,
                               allowPrivateMessages: e.target.checked,
                             },
                           })
@@ -599,12 +587,12 @@ const ClassList: React.FC = () => {
                     <label className="flex items-center space-x-3">
                       <input
                         type="checkbox"
-                        checked={newClassroom.settings.allowStudentScreenShare}
+                        checked={classroom.settings?.allowStudentScreenShare}
                         onChange={(e) =>
-                          setNewClassroom({
-                            ...newClassroom,
+                          setClassroom({
+                            ...classroom,
                             settings: {
-                              ...newClassroom.settings,
+                              ...classroom.settings!,
                               allowStudentScreenShare: e.target.checked,
                             },
                           })
@@ -623,12 +611,12 @@ const ClassList: React.FC = () => {
                         Varsayılan mikrofon durumu
                       </label>
                       <select
-                        value={newClassroom.settings.defaultMicrophoneState}
+                        value={classroom.settings?.defaultMicrophoneState}
                         onChange={(e) =>
-                          setNewClassroom({
-                            ...newClassroom,
+                          setClassroom({
+                            ...classroom,
                             settings: {
-                              ...newClassroom.settings,
+                              ...classroom.settings!,
                               defaultMicrophoneState: e.target.value as 'muted' | 'unmuted',
                             },
                           })
@@ -645,12 +633,12 @@ const ClassList: React.FC = () => {
                         Varsayılan kamera durumu
                       </label>
                       <select
-                        value={newClassroom.settings.defaultCameraState}
+                        value={classroom.settings?.defaultCameraState}
                         onChange={(e) =>
-                          setNewClassroom({
-                            ...newClassroom,
+                          setClassroom({
+                            ...classroom,
                             settings: {
-                              ...newClassroom.settings,
+                              ...classroom.settings!,
                               defaultCameraState: e.target.value as 'on' | 'off',
                             },
                           })
@@ -667,12 +655,12 @@ const ClassList: React.FC = () => {
                         Varsayılan layout
                       </label>
                       <select
-                        value={newClassroom.settings.defaultLayout}
+                        value={classroom.settings?.defaultLayout}
                         onChange={(e) =>
-                          setNewClassroom({
-                            ...newClassroom,
+                          setClassroom({
+                            ...classroom,
                             settings: {
-                              ...newClassroom.settings,
+                              ...classroom.settings!,
                               defaultLayout: e.target.value,
                             },
                           })
@@ -689,12 +677,12 @@ const ClassList: React.FC = () => {
                     <label className="flex items-center space-x-3">
                       <input
                         type="checkbox"
-                        checked={newClassroom.settings.autoMuteNewParticipants}
+                        checked={classroom.settings?.autoMuteNewParticipants}
                         onChange={(e) =>
-                          setNewClassroom({
-                            ...newClassroom,
+                          setClassroom({
+                            ...classroom,
                             settings: {
-                              ...newClassroom.settings,
+                              ...classroom.settings!,
                               autoMuteNewParticipants: e.target.checked,
                             },
                           })
@@ -714,7 +702,7 @@ const ClassList: React.FC = () => {
                     if (showCreateModal) setShowCreateModal(false)
                     if (showEditModal) {
                       setShowEditModal(false)
-                      setEditingClass(null)
+                      setClassroom(newClassEntity)
                       resetForm()
                     }
                   }}
@@ -735,7 +723,7 @@ const ClassList: React.FC = () => {
       )}
 
       {/* Delete Confirmation Modal */}
-      {showDeleteModal && deletingClass && (
+      {showDeleteModal && classroom && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
           <motion.div
             initial={{ opacity: 0, scale: 0.95 }}
@@ -754,15 +742,14 @@ const ClassList: React.FC = () => {
               </div>
 
               <p className="text-gray-700 mb-6">
-                <strong>"{deletingClass.name}"</strong> adlı sınıfı silmek istediğinizden emin
-                misiniz?
+                <strong>"{classroom.name}"</strong> adlı sınıfı silmek istediğinizden emin misiniz?
               </p>
 
               <div className="flex items-center justify-end space-x-4">
                 <button
                   onClick={() => {
                     setShowDeleteModal(false)
-                    setDeletingClass(null)
+                    setClassroom(newClassEntity)
                   }}
                   className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
                 >