releasing field works but automatic textarea update is not working --refs #1170

Author: tfhuhtal

client/components/V1/Generic/TextFieldComponent.tsx

@@ -1,16 +1,15 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { TextField, Button, Box } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import ReactMarkdown from 'react-markdown'
-import { getLockHttp } from '../../../util/redux/formReducer'
+import { clearFormState, getLockHttp, updateFormField } from '../../../util/redux/formReducer'
 import { RootState } from '../../../util/store'
-import { wsJoinRoom } from '../../../util/redux/websocketReducer'
 import { releaseFieldLocally } from '../../../util/redux/currentEditorsReducer'
 import { deepCheck } from '../../Generic/Textarea'
-import { updateReportHttp, getReports } from '../../../util/redux/reportsReducer'
+import { updateReportHttp } from '../../../util/redux/reportsReducer'
 
-const TextFieldComponent = ({ id }: { id: string }) => {
+const TextFieldComponent = ({ id, type }: { id: string, type: string }) => {
   const { t } = useTranslation()
   const dispatch = useDispatch()
 
@@ -22,12 +21,6 @@ const TextFieldComponent = ({ id }: { id: string }) => {
   const dataFromRedux = useSelector(({ form }: { form: any }) => form.data[id] || '')
   const currentEditors = useSelector(({ currentEditors }: { currentEditors: any }) => currentEditors.data, deepCheck)
   const currentUser = useSelector(({ currentUser }: { currentUser: any }) => currentUser.data)
-  const form = 10
-
-  useEffect(() => {
-    dispatch(getReports('KH50_005'))
-    dispatch(wsJoinRoom('KH50_005', form))
-  }, [])
 
   useEffect(() => {
     const gotTheLock = (currentEditors && currentEditors[id] && currentEditors[id].uid === currentUser.uid)
@@ -54,34 +47,34 @@ const TextFieldComponent = ({ id }: { id: string }) => {
     }
   }
 
-  const handleStartEditing = () => {
-    askForLock()
-  }
-
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, alignItems: 'start' }}>
-      <TextField
-        disabled={!hasLock}
-        type="text"
-        defaultValue={content}
-        variant="outlined"
-        multiline
-        minRows={8}
-        fullWidth
-        label="Testattava tekstikenttä"
-        value={content}
-        onChange={e => setContent(e.target.value)}
-      />
       {hasLock ? (
-        <Button variant="contained" onClick={handleStopEditing}>
-          {t('stopEditing')}
-        </Button>
+        <>
+          <TextField
+            type="text"
+            defaultValue={content}
+            variant="outlined"
+            multiline
+            minRows={type === 'comment' ? 3 : 10}
+            fullWidth
+            label="Koulutusohjelman kommentti"
+            value={content}
+            onChange={e => setContent(e.target.value)}
+            onClick={askForLock}
+          />
+          <Button variant="outlined" onClick={handleStopEditing}>
+            {t('generic:kludgeButton')}
+          </Button>
+        </>
       ) : (
-        <Button variant="contained" onClick={handleStartEditing}>
-          {t('edit')}
-        </Button>
+        <>
+          <ReactMarkdown>{content}</ReactMarkdown>
+          <Button variant="outlined" onClick={askForLock}>
+            {t('edit')}
+          </Button>
+        </>
       )}
-      <ReactMarkdown>{content}</ReactMarkdown>
     </Box>
   )
 }

client/components/V1/ProgrammeView/ProgrammeView.tsx

@@ -74,7 +74,10 @@ const ProgrammeView = () => {
         <h3>{programme.koulutusohjelma}</h3>
       </div>
       {KeyDataPoints.map(data => (
-        <KeyDataCard key={data.title} level={level} metadata={metadata} programme={programme} {...data} />
+        <>
+          <KeyDataCard key={data.title} level={level} metadata={metadata} programme={programme} {...data} />
+          <TextFieldComponent id={data.title} type="comment" />
+        </>
       ))}
       <TextFieldComponent id="testing" />
     </Box>

server/controllers/reportsController.ts

@@ -3,7 +3,7 @@ import db from '../models/index.js'
 
 import Report from '../models/reports.js'
 import { Op } from 'sequelize'
-import { updateWebsocketState } from '../websocket.js'
+import { updateWSAndClearEditors } from '../websocket.js'
 
 import type { Request, Response } from 'express'
 
@@ -19,8 +19,6 @@ interface ValidateOperationResponse {
 const validateOperation = async (req: Request): Promise<ValidateOperationResponse> => {
   const { studyprogrammeKey, year } = req.params
 
-  console.log(req.params)
-
   // TODO: validate body data
 
   const resultObject: ValidateOperationResponse = {
@@ -100,7 +98,7 @@ const updateReport = async (req: Request, res: Response) => {
     const result = await validateOperation(req)
     if (!result.success) return res.status(result.status).json({ error: result.error })
 
-    let data = req.body
+    const data = req.body
     const { report, studyprogrammeId, year } = result
 
     const [_, updatedReport] = await Report.update(
@@ -116,12 +114,13 @@ const updateReport = async (req: Request, res: Response) => {
       }
     )
 
-    data = updatedReport[0].data
+    const updatedData = updatedReport[0].data
+    const field = Object.keys(data)[0]
 
     // @ts-ignore
-    updateWebsocketState(req.user, { room: req.params.studyprogrammeKey, data })
+    updateWSAndClearEditors({ room: req.params.studyprogrammeKey, updatedData, field })
 
-    return res.status(200).json(updatedReport)
+    return res.status(200).json(updatedData)
   } catch (error) {
     logger.error(`Database error ${error}`)
     return res.status(500).json({ error: 'Database error' })

server/util/websocketHandlers.js

@@ -189,7 +189,6 @@ const updateField = async (socket, payload, io, uuid) => {
           [Op.and]: [{ programme: room }, { year: await whereDraftYear() }, { form }],
         },
       })
-      logger.info('currentAnswer', currentAnswer)
       if (currentAnswer) {
         await db.tempAnswer.update(
           { data: { ...currentAnswer.data, ...data } },
@@ -247,16 +246,25 @@ const getLockHttp = (currentUser, payload, io) => {
   return stripTimeouts(currentEditors[room])
 }
 
-const updateWebsocketState = (currentUser, payload, io) => {
-  const { room, data } = payload
+const updateWSAndClearEditors = (io, payload) => {
+  const { room, data, field } = payload
 
-  logAndEmitToRoom(io, room, 'new_form_data', data)
+  currentEditors = {
+    ...currentEditors,
+    [room]: {
+      ...currentEditors[room],
+      [field]: undefined,
+    },
+  }
+
+  emitCurrentEditorsTo(io, room, currentEditors)
+  // logAndEmitToRoom(io, room, 'new_form_data', data)
 }
 
 export default {
   joinRoom: withLogging(joinRoom),
   leaveRoom: withLogging(leaveRoom),
   updateField: withLogging(updateField),
   getLockHttp,
-  updateWebsocketState,
+  updateWSAndClearEditors,
 }

server/websocket.js

@@ -13,6 +13,6 @@ const createWebsocketServer = server => {
 }
 
 export const getLockForHttp = (cuser, room) => websocketHandlers.getLockHttp(cuser, room, io)
-export const updateWebsocketState = (cuser, room) => websocketHandlers.updateWebsocketState(cuser, room, io)
+export const updateWSAndClearEditors = payload => websocketHandlers.updateWSAndClearEditors(io, payload)
 
 export default createWebsocketServer