Fix recording rename (#4645)

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,
 };

app/javascript/components/recordings/forms/UpdateRecordingForm.jsx

 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}
+    <input
       type="text"
-        disabled={updateAPI.isLoading}
+      className="form-control"
+      hidden={hidden}
+      disabled={updateRecording.isLoading}
+      onBlur={(e) => { setIsEditing(false); updateRecording.mutate({ recording: { name: e.target.value } }); }}
+      defaultValue={name}
     />
-    </Form>
   );
 }
 
 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,
 };

app/javascript/components/recordings/room_recordings/RoomsRecordingRow.jsx

 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}
     />
   );

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: () => {

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');

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'));
       },

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: () => {