From bdc41140527c8a1b004810601dcc3ad19d9fddcc Mon Sep 17 00:00:00 2001 From: Kavin Venkatachalam <50441969+kavinvenkatachalam@users.noreply.github.com> Date: Wed, 4 Jan 2023 17:53:40 +0530 Subject: [PATCH] Fixes unsaved popup showing on tooljetDB (#5184) --- .../QueryEditors/TooljetDatabase/CreateRow.jsx | 5 ++++- .../QueryEditors/TooljetDatabase/DeleteRows.jsx | 7 +++++-- .../QueryManager/QueryEditors/TooljetDatabase/ListRows.jsx | 7 +++++-- .../QueryEditors/TooljetDatabase/ToolJetDbOperations.jsx | 6 +++++- .../QueryEditors/TooljetDatabase/UpdateRows.jsx | 5 ++++- 5 files changed, 23 insertions(+), 7 deletions(-) diff --git a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/CreateRow.jsx b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/CreateRow.jsx index 8e16e6372a..4742edaf0d 100644 --- a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/CreateRow.jsx +++ b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/CreateRow.jsx @@ -5,11 +5,14 @@ import { TooljetDatabaseContext } from '@/TooljetDatabase/index'; import { toast } from 'react-hot-toast'; import Select from '@/_ui/Select'; import { uniqueId } from 'lodash'; +import { useMounted } from '@/_hooks/use-mount'; export const CreateRow = ({ currentState, optionchanged, options, darkMode }) => { const { organizationId, selectedTable, columns, setColumns } = useContext(TooljetDatabaseContext); const [columnOptions, setColumnOptions] = useState(options['create_row'] || {}); + const mounted = useMounted(); + useEffect(() => { fetchTableInformation(selectedTable); @@ -19,7 +22,7 @@ export const CreateRow = ({ currentState, optionchanged, options, darkMode }) => }, []); useEffect(() => { - optionchanged('create_row', columnOptions); + mounted && optionchanged('create_row', columnOptions); }, [columnOptions, optionchanged]); function handleColumnOptionChange(columnOptions) { diff --git a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DeleteRows.jsx b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DeleteRows.jsx index 3c908ee8ff..5212a613d2 100644 --- a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DeleteRows.jsx +++ b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DeleteRows.jsx @@ -6,18 +6,21 @@ import { uniqueId } from 'lodash'; import { CodeHinter } from '@/Editor/CodeBuilder/CodeHinter'; import Select from '@/_ui/Select'; import { operators } from '@/TooljetDatabase/constants'; +import { useMounted } from '@/_hooks/use-mount'; export const DeleteRows = ({ currentState, optionchanged, options, darkMode }) => { const { organizationId, selectedTable, columns, setColumns } = useContext(TooljetDatabaseContext); const [deleteRowsOptions, setDeleteRowsOptions] = useState(options['delete_rows'] || {}); + const mounted = useMounted(); + useEffect(() => { fetchTableInformation(selectedTable); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { - optionchanged('delete_rows', deleteRowsOptions); + mounted && optionchanged('delete_rows', deleteRowsOptions); // eslint-disable-next-line react-hooks/exhaustive-deps }, [deleteRowsOptions]); @@ -56,7 +59,7 @@ export const DeleteRows = ({ currentState, optionchanged, options, darkMode }) = } const updateLimitOptions = (limit) => { - setDeleteRowsOptions({ ...deleteRowsOptions, ...{ limit } }); + if (deleteRowsOptions?.limit ?? 1 !== limit) setDeleteRowsOptions({ ...deleteRowsOptions, ...{ limit } }); }; async function fetchTableInformation(table) { diff --git a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/ListRows.jsx b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/ListRows.jsx index 01c30c3aa3..b706f47a01 100644 --- a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/ListRows.jsx +++ b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/ListRows.jsx @@ -6,11 +6,14 @@ import { toast } from 'react-hot-toast'; import { uniqueId } from 'lodash'; import Select from '@/_ui/Select'; import { operators } from '@/TooljetDatabase/constants'; +import { useMounted } from '@/_hooks/use-mount'; export const ListRows = ({ currentState, optionchanged, options, darkMode }) => { const { organizationId, selectedTable, columns, setColumns } = useContext(TooljetDatabaseContext); const [listRowsOptions, setListRowsOptions] = useState(() => options['list_rows'] || {}); + const mounted = useMounted(); + useEffect(() => { fetchTableInformation(selectedTable); @@ -20,7 +23,7 @@ export const ListRows = ({ currentState, optionchanged, options, darkMode }) => }, []); useEffect(() => { - optionchanged('list_rows', listRowsOptions); + mounted && optionchanged('list_rows', listRowsOptions); }, [listRowsOptions, optionchanged]); function handleWhereFiltersChange(filters) { @@ -246,7 +249,7 @@ export const ListRows = ({ currentState, optionchanged, options, darkMode }) => }; const updateLimitOptions = (limit) => { - setListRowsOptions({ ...listRowsOptions, ...{ limit } }); + if (listRowsOptions?.limit ?? '' !== limit) setListRowsOptions({ ...listRowsOptions, ...{ limit } }); }; return ( diff --git a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/ToolJetDbOperations.jsx b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/ToolJetDbOperations.jsx index 594eab5440..381269b179 100644 --- a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/ToolJetDbOperations.jsx +++ b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/ToolJetDbOperations.jsx @@ -8,6 +8,7 @@ import { DeleteRows } from './DeleteRows'; import { toast } from 'react-hot-toast'; import Select from '@/_ui/Select'; import { queryManagerSelectComponentStyle } from '@/_ui/Select/styles'; +import { useMounted } from '@/_hooks/use-mount'; const ToolJetDbOperations = ({ currentState, optionchanged, options, darkMode }) => { const computeSelectStyles = (darkMode, width) => { @@ -19,13 +20,16 @@ const ToolJetDbOperations = ({ currentState, optionchanged, options, darkMode }) const [columns, setColumns] = useState([]); const [tables, setTables] = useState([]); const [selectedTable, setSelectedTable] = useState(options['table_name']); + + const mounted = useMounted(); + useEffect(() => { fetchTables(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { - optionchanged('operation', operation); + mounted && optionchanged('operation', operation); // eslint-disable-next-line react-hooks/exhaustive-deps }, [operation]); diff --git a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/UpdateRows.jsx b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/UpdateRows.jsx index c405e53f7d..91d0460cff 100644 --- a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/UpdateRows.jsx +++ b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/UpdateRows.jsx @@ -6,6 +6,7 @@ import Select from '@/_ui/Select'; import { toast } from 'react-hot-toast'; import { operators } from '@/TooljetDatabase/constants'; import { uniqueId } from 'lodash'; +import { useMounted } from '@/_hooks/use-mount'; export const UpdateRows = ({ currentState, optionchanged, options, darkMode }) => { const { organizationId, selectedTable, columns, setColumns } = useContext(TooljetDatabaseContext); @@ -13,6 +14,8 @@ export const UpdateRows = ({ currentState, optionchanged, options, darkMode }) = options['update_rows'] || { columns: {}, where_filters: {} } ); + const mounted = useMounted(); + useEffect(() => { fetchTableInformation(selectedTable); @@ -22,7 +25,7 @@ export const UpdateRows = ({ currentState, optionchanged, options, darkMode }) = }, []); useEffect(() => { - optionchanged('update_rows', updateRowsOptions); + mounted && optionchanged('update_rows', updateRowsOptions); }, [optionchanged, updateRowsOptions]); function handleColumnOptionChange(columnOptions) {