From 0c7e24652d52d81390a58db53c61e010103f6e91 Mon Sep 17 00:00:00 2001
From: Ahmad Farhat <ahmad.af.farhat@gmail.com>
Date: Tue, 24 Jan 2023 18:17:37 -0500
Subject: [PATCH] Fix recording rename (#4645)
---
.../components/recordings/RecordingRow.jsx | 8 ++--
.../recordings/forms/UpdateRecordingForm.jsx | 37 +++++++------------
.../room_recordings/RoomsRecordingRow.jsx | 2 -
.../server_recordings/useRecordingsReSync.jsx | 2 +-
.../recordings/useDeleteRecording.jsx | 2 +-
.../recordings/useUpdateRecording.jsx | 3 +-
.../useUpdateRecordingVisibility.jsx | 2 +-
7 files changed, 22 insertions(+), 34 deletions(-)
diff --git a/app/javascript/components/recordings/RecordingRow.jsx b/app/javascript/components/recordings/RecordingRow.jsx
index 4ea902a5..4a18a8fd 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 ef4eca8b..540b1990 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 fdcf754f..7f6d14db 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 e63d4aa3..58d96481 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 df8f0e5d..37046796 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 4eaf2571..0bc4418a 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 fc355e1d..e8039b37 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: () => {
--
GitLab