diff --git a/app/javascript/components/recordings/RecordingRow.jsx b/app/javascript/components/recordings/RecordingRow.jsx index 4ea902a58d1cd7346772265c031f2d7be6db4608..4a18a8fd7eee277d3bfe6e173cc31f4471cf98db 100644 --- a/app/javascript/components/recordings/RecordingRow.jsx +++ b/app/javascript/components/recordings/RecordingRow.jsx @@ -18,7 +18,7 @@ import Modal from '../shared_components/modals/Modal'; // TODO: Amir - Refactor this. export default function RecordingRow({ - recording, visibilityMutation: useVisibilityAPI, updateMutation: useUpdateAPI, deleteMutation: useDeleteAPI, + recording, visibilityMutation: useVisibilityAPI, deleteMutation: useDeleteAPI, }) { const { t } = useTranslation(); @@ -29,7 +29,7 @@ export default function RecordingRow({ } const visibilityAPI = useVisibilityAPI(); - const [isEditing, setIsEditing] = useState(+false); + const [isEditing, setIsEditing] = useState(false); const [isUpdating, setIsUpdating] = useState(false); return ( @@ -43,12 +43,11 @@ export default function RecordingRow({ <strong> {/* TODO: Samuel - add an x button or something to the edit name form */} <UpdateRecordingForm - mutation={useUpdateAPI} recordId={recording.record_id} name={recording.name} hidden={!isEditing || isUpdating} setIsUpdating={setIsUpdating} - noLabel + setIsEditing={setIsEditing} /> { !isEditing @@ -144,6 +143,5 @@ RecordingRow.propTypes = { map: PropTypes.func, }).isRequired, visibilityMutation: PropTypes.func.isRequired, - updateMutation: PropTypes.func.isRequired, deleteMutation: PropTypes.func.isRequired, }; diff --git a/app/javascript/components/recordings/forms/UpdateRecordingForm.jsx b/app/javascript/components/recordings/forms/UpdateRecordingForm.jsx index ef4eca8b839ce59d3b00b19b7cd8a3815c5ff7bd..540b1990125e713f0e223defec46f5d124d2079d 100644 --- a/app/javascript/components/recordings/forms/UpdateRecordingForm.jsx +++ b/app/javascript/components/recordings/forms/UpdateRecordingForm.jsx @@ -1,46 +1,37 @@ import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; -import { useForm } from 'react-hook-form'; -import FormControl from '../../shared_components/forms/FormControl'; -import Form from '../../shared_components/forms/Form'; -import { UpdateRecordingsFormConfig, UpdateRecordingsFormFields } from '../../../helpers/forms/UpdateRecordingsFormHelpers'; +import useUpdateRecording from '../../../hooks/mutations/recordings/useUpdateRecording'; export default function UpdateRecordingForm({ - name, noLabel, recordId, hidden, setIsUpdating, mutation: useUpdateAPI, + name, recordId, hidden, setIsUpdating, setIsEditing, }) { - const updateAPI = useUpdateAPI(recordId); + const updateRecording = useUpdateRecording(recordId); - UpdateRecordingsFormConfig.defaultValues.name = name; - - const methods = useForm(UpdateRecordingsFormConfig); - const fields = UpdateRecordingsFormFields; - - useEffect(() => { setIsUpdating(updateAPI.isLoading); }, [updateAPI.isLoading]); + useEffect(() => { setIsUpdating(updateRecording.isLoading); }, [updateRecording.isLoading]); return ( - <Form methods={methods} onBlur={methods.handleSubmit(updateAPI.mutate)} hidden={hidden}> - <FormControl - field={fields.name} - noLabel={noLabel} - type="text" - disabled={updateAPI.isLoading} - /> - </Form> + <input + type="text" + className="form-control" + hidden={hidden} + disabled={updateRecording.isLoading} + onBlur={(e) => { setIsEditing(false); updateRecording.mutate({ recording: { name: e.target.value } }); }} + defaultValue={name} + /> ); } UpdateRecordingForm.defaultProps = { name: '', - noLabel: true, hidden: false, setIsUpdating: () => { }, + setIsEditing: () => { }, }; UpdateRecordingForm.propTypes = { name: PropTypes.string, - noLabel: PropTypes.bool, recordId: PropTypes.string.isRequired, hidden: PropTypes.bool, setIsUpdating: PropTypes.func, - mutation: PropTypes.func.isRequired, + setIsEditing: PropTypes.func, }; diff --git a/app/javascript/components/recordings/room_recordings/RoomsRecordingRow.jsx b/app/javascript/components/recordings/room_recordings/RoomsRecordingRow.jsx index fdcf754fe64ea39500f07479289c8dd2f2b9e15a..7f6d14dba19e55a12fa550becec659e26cdaf42b 100644 --- a/app/javascript/components/recordings/room_recordings/RoomsRecordingRow.jsx +++ b/app/javascript/components/recordings/room_recordings/RoomsRecordingRow.jsx @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import useUpdateRecordingVisibility from '../../../hooks/mutations/recordings/useUpdateRecordingVisibility'; -import useUpdateRecording from '../../../hooks/mutations/recordings/useUpdateRecording'; import useDeleteRecording from '../../../hooks/mutations/recordings/useDeleteRecording'; import RecordingRow from '../RecordingRow'; @@ -10,7 +9,6 @@ export default function RoomsRecordingRow({ recording }) { <RecordingRow recording={recording} visibilityMutation={useUpdateRecordingVisibility} - updateMutation={useUpdateRecording} deleteMutation={useDeleteRecording} /> ); diff --git a/app/javascript/hooks/mutations/admin/server_recordings/useRecordingsReSync.jsx b/app/javascript/hooks/mutations/admin/server_recordings/useRecordingsReSync.jsx index e63d4aa3a23de2cb204006ea12aa84632fdf13b8..58d96481e037a64754ee509b59e6735c75078427 100644 --- a/app/javascript/hooks/mutations/admin/server_recordings/useRecordingsReSync.jsx +++ b/app/javascript/hooks/mutations/admin/server_recordings/useRecordingsReSync.jsx @@ -13,7 +13,7 @@ export default function useRecordingsReSync(friendlyId) { onSuccess: () => { queryClient.invalidateQueries('getServerRecordings'); queryClient.invalidateQueries(['getRoomRecordings', { friendlyId }]); - queryClient.invalidateQueries('getRecordings'); + queryClient.invalidateQueries(['getRecordings']); toast.success(t('toast.success.room.recordings_synced')); }, onError: () => { diff --git a/app/javascript/hooks/mutations/recordings/useDeleteRecording.jsx b/app/javascript/hooks/mutations/recordings/useDeleteRecording.jsx index df8f0e5d927fe56a82c9d694675aaaddacacdc7f..370467969eafa86594468891f104ddb13125110d 100644 --- a/app/javascript/hooks/mutations/recordings/useDeleteRecording.jsx +++ b/app/javascript/hooks/mutations/recordings/useDeleteRecording.jsx @@ -11,7 +11,7 @@ export default function useDeleteRecording({ recordId, onSettled }) { () => axios.delete(`/recordings/${recordId}.json`), { onSuccess: () => { - queryClient.invalidateQueries('getRecordings'); + queryClient.invalidateQueries(['getRecordings']); queryClient.invalidateQueries('getRecordingsCount'); queryClient.invalidateQueries(['getRoomRecordings']); queryClient.invalidateQueries('getServerRecordings'); diff --git a/app/javascript/hooks/mutations/recordings/useUpdateRecording.jsx b/app/javascript/hooks/mutations/recordings/useUpdateRecording.jsx index 4eaf25719899807cc8937c2a3f10633f06b134d9..0bc4418ab0352eb2b3b9d88e5d885f18eaf40914 100644 --- a/app/javascript/hooks/mutations/recordings/useUpdateRecording.jsx +++ b/app/javascript/hooks/mutations/recordings/useUpdateRecording.jsx @@ -11,7 +11,8 @@ export default function useUpdateRecording(recordId) { (recordingData) => axios.put(`/recordings/${recordId}.json`, recordingData), { onSuccess: () => { - queryClient.invalidateQueries('getRecordings'); + queryClient.invalidateQueries(['getRecordings']); + queryClient.invalidateQueries(['getRoomRecordings']); queryClient.invalidateQueries('getServerRecordings'); toast.success(t('toast.success.recording.recording_name_updated')); }, diff --git a/app/javascript/hooks/mutations/recordings/useUpdateRecordingVisibility.jsx b/app/javascript/hooks/mutations/recordings/useUpdateRecordingVisibility.jsx index fc355e1dea4f898b897d1be1aa6549ce85f59289..e8039b37586905b845ea3e6f3b536a6e064500f6 100644 --- a/app/javascript/hooks/mutations/recordings/useUpdateRecordingVisibility.jsx +++ b/app/javascript/hooks/mutations/recordings/useUpdateRecordingVisibility.jsx @@ -11,7 +11,7 @@ export default function useUpdateRecordingVisibility() { (visibilityData) => axios.post('/recordings/update_visibility.json', visibilityData), { onSuccess: () => { - queryClient.invalidateQueries('getRecordings'); + queryClient.invalidateQueries(['getRecordings']); toast.success(t('toast.success.recording.recording_visibility_updated')); }, onError: () => {