fix prompt creation in course view (again)

Author: Veikkosuhonen

src/client/components/Courses/Course/index.tsx

@@ -1,25 +1,9 @@
 import { Edit, OpenInNew } from '@mui/icons-material'
-import {
-  Alert,
-  Box,
-  Button,
-  Checkbox,
-  Container,
-  FormControlLabel,
-  Input,
-  Modal,
-  Paper,
-  Skeleton,
-  Stack,
-  Tab,
-  TextField,
-  Tooltip,
-  Typography,
-} from '@mui/material'
+import { Alert, Box, Button, Checkbox, Container, FormControlLabel, Input, Modal, Paper, Skeleton, Stack, Tab, Tooltip, Typography } from '@mui/material'
 import { enqueueSnackbar } from 'notistack'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Form, Link, Route, Routes, useParams } from 'react-router-dom'
+import { Link, Route, Routes, useParams } from 'react-router-dom'
 
 import { PUBLIC_URL } from '../../../../config'
 import useCourse from '../../../hooks/useCourse'
@@ -38,9 +22,7 @@ import { RouterTabs } from '../../common/RouterTabs'
 import Discussion from './Discussions'
 import { ApiErrorView } from '../../common/ApiErrorView'
 import apiClient from '../../../util/apiClient'
-import { t } from 'i18next'
-import UserTable from '../../Admin/Usage/UserTable'
-import UserSearch, { ActionUserSearch } from '../../Admin/UserSearch'
+import { ActionUserSearch } from '../../Admin/UserSearch'
 
 const Course = () => {
   const [showTeachers, setShowTeachers] = useState(false)
@@ -53,22 +35,22 @@ const Course = () => {
   const { language } = i18n
 
   const { user, isLoading: userLoading } = useCurrentUser()
-  const { data: course, isSuccess: isCourseSuccess, error, refetch: refetchCourse } = useCourse(id)
-  console.log(course)
+  const { data: chatInstance, isSuccess: isCourseSuccess, error, refetch: refetchCourse } = useCourse(id)
+  console.log(chatInstance)
   if (error) {
     return <ApiErrorView error={error} />
   }
   useEffect(() => {
     if (isCourseSuccess) {
-      setResponsibilities(course?.responsibilities)
+      setResponsibilities(chatInstance?.responsibilities)
     }
   }, [isCourseSuccess])
 
   if (userLoading || !user || !isCourseSuccess) return null
 
-  const studentLink = `${window.location.origin}${PUBLIC_URL}/${course.courseId}`
+  const studentLink = `${window.location.origin}${PUBLIC_URL}/${chatInstance.courseId}`
 
-  const amongResponsibles = course.responsibilities ? course.responsibilities.some((r) => r.user.id === user.id) : false
+  const amongResponsibles = chatInstance.responsibilities ? chatInstance.responsibilities.some((r) => r.user.id === user.id) : false
 
   if (!user.isAdmin && !amongResponsibles) {
     return (
@@ -83,13 +65,14 @@ const Course = () => {
     enqueueSnackbar(t('linkCopied'), { variant: 'info' })
   }
 
-  const courseEnabled = course.usageLimit > 0
+  const courseEnabled = chatInstance.usageLimit > 0
 
-  const isCourseActive = courseEnabled && Date.parse(course.activityPeriod.endDate) > Date.now() && Date.parse(course.activityPeriod.startDate) <= Date.now()
+  const isCourseActive =
+    courseEnabled && Date.parse(chatInstance.activityPeriod.endDate) > Date.now() && Date.parse(chatInstance.activityPeriod.startDate) <= Date.now()
 
-  const willBeEnabled = courseEnabled && Date.parse(course.activityPeriod.startDate) > Date.now()
+  const willBeEnabled = courseEnabled && Date.parse(chatInstance.activityPeriod.startDate) > Date.now()
 
-  const wasEnabled = courseEnabled && Date.parse(course.activityPeriod.endDate) < Date.now()
+  const wasEnabled = courseEnabled && Date.parse(chatInstance.activityPeriod.endDate) < Date.now()
 
   const getInfoSeverity = () => {
     if (!courseEnabled) return 'warning'
@@ -100,8 +83,8 @@ const Course = () => {
   const getInfoMessage = () => {
     if (!courseEnabled) return t('course:curreNotOpen')
     if (isCourseActive) return t('course:curreOpen')
-    if (willBeEnabled) return `${t('course:curreWillBeOpen')} ${course.activityPeriod.startDate}`
-    if (wasEnabled) return `${t('course:curreWasOpen')} ${course.activityPeriod.endDate}`
+    if (willBeEnabled) return `${t('course:curreWillBeOpen')} ${chatInstance.activityPeriod.startDate}`
+    if (wasEnabled) return `${t('course:curreWasOpen')} ${chatInstance.activityPeriod.endDate}`
     return ''
   }
 
@@ -124,15 +107,15 @@ const Course = () => {
   }
   const handleAddResponsible = async (user: User) => {
     const username = user.username
-    const result = await apiClient.post(`/courses/${course.id}/responsibilities/assign`, { username: username })
+    const result = await apiClient.post(`/courses/${chatInstance.id}/responsibilities/assign`, { username: username })
     if (result.status === 200) {
       const responsibility = result.data
       setResponsibilities([...responsibilities, responsibility])
       refetchCourse()
     }
   }
   const handleRemoveResponsibility = async (responsibility) => {
-    const result = await apiClient.post(`/courses/${course.id}/responsibilities/remove`, { username: responsibility.user?.username })
+    const result = await apiClient.post(`/courses/${chatInstance.id}/responsibilities/remove`, { username: responsibility.user?.username })
     if (result.status === 200) {
       const filteredResponsibilities = responsibilities.filter((r) => r.id !== responsibility.id)
       setResponsibilities(filteredResponsibilities)
@@ -155,33 +138,33 @@ const Course = () => {
         >
           <div style={{ display: 'flex', flexWrap: 'wrap' }}>
             <div style={{ ...full, boxSizing: 'border-box', height: '50px' }}>
-              <Typography variant="h5">{course.name[language]}</Typography>
+              <Typography variant="h5">{chatInstance.name[language]}</Typography>
             </div>
 
             <div style={{ ...left, boxSizing: 'border-box', height: '50px' }}>
-              <Typography>{course.courseUnits.map((cu) => cu.code).join(', ')}</Typography>
+              <Typography>{chatInstance.courseUnits.map((cu) => cu.code).join(', ')}</Typography>
             </div>
             <div style={{ ...right, boxSizing: 'border-box', height: '50px' }}>
-              <Typography style={{ fontStyle: 'italic' }}>{getCurTypeLabel(course.courseUnitRealisationTypeUrn ?? '', language)}</Typography>
+              <Typography style={{ fontStyle: 'italic' }}>{getCurTypeLabel(chatInstance.courseUnitRealisationTypeUrn ?? '', language)}</Typography>
             </div>
 
             <div style={{ ...left, boxSizing: 'border-box' }}>
               <Typography>
-                {t('active')} {formatDate(course.activityPeriod)}
+                {t('active')} {formatDate(chatInstance.activityPeriod)}
               </Typography>
             </div>
 
             <div style={{ ...right, boxSizing: 'border-box' }}>
-              <Link to={`https://studies.helsinki.fi/kurssit/toteutus/${course.courseId}`} target="_blank">
+              <Link to={`https://studies.helsinki.fi/kurssit/toteutus/${chatInstance.courseId}`} target="_blank">
                 {t('course:coursePage')} <OpenInNew fontSize="small" />
               </Link>
             </div>
 
             {courseEnabled && (
               <div style={{ ...left, boxSizing: 'border-box' }}>
                 <Typography>
-                  {t('admin:model')}: {course.model} <span style={{ marginRight: 20 }} />
-                  {t('admin:usageLimit')}: {course.usageLimit}
+                  {t('admin:model')}: {chatInstance.model} <span style={{ marginRight: 20 }} />
+                  {t('admin:usageLimit')}: {chatInstance.usageLimit}
                 </Typography>
               </div>
             )}
@@ -267,8 +250,7 @@ const Course = () => {
             height: '80vh',
             background: 'white',
             padding: '2rem',
-            overflowY: 'scroll'
-
+            overflowY: 'scroll',
           }}
         >
           <ActionUserSearch
@@ -282,7 +264,7 @@ const Course = () => {
       </Modal>
 
       <Modal open={activityPeriodFormOpen} onClose={() => setActivityPeriodFormOpen(false)}>
-        <EditCourseForm course={course} setOpen={setActivityPeriodFormOpen} user={user} />
+        <EditCourseForm course={chatInstance} setOpen={setActivityPeriodFormOpen} user={user} />
       </Modal>
 
       <Box my={2}>
@@ -297,15 +279,15 @@ const Course = () => {
       <Routes>
         <Route path="/" element={<Stats courseId={id} />} />
         <Route path={`/discussions/*`} element={<Discussion />} />
-        <Route path="/prompts" element={<Prompts courseId={id} />} />
+        <Route path="/prompts" element={<Prompts courseId={id} chatInstanceId={chatInstance.id} />} />
         <Route path="/rag" element={<Rag />} />
       </Routes>
     </Container>
   )
 }
 
 const AssignedResponsibilityManagement = ({ responsibility, handleRemove }) => {
-  const { t, i18n } = useTranslation()
+  const { t } = useTranslation()
   if (!responsibility.createdByUserId) {
     return <Stack direction={'row'} sx={{ marginLeft: 'auto', alignItems: 'center', height: '1rem' }}></Stack>
   }
@@ -317,7 +299,7 @@ const AssignedResponsibilityManagement = ({ responsibility, handleRemove }) => {
   )
 }
 
-const Prompts = ({ courseId }: { courseId: string }) => {
+const Prompts = ({ courseId, chatInstanceId }: { courseId: string; chatInstanceId: string }) => {
   const { t } = useTranslation()
   const [name, setName] = useState('')
   const [system, setSystem] = useState('')
@@ -343,7 +325,7 @@ const Prompts = ({ courseId }: { courseId: string }) => {
   const handleSave = async () => {
     try {
       await createMutation.mutateAsync({
-        chatInstanceId: courseId,
+        chatInstanceId,
         type: 'CHAT_INSTANCE',
         name,
         systemMessage: system,