Fixes unsaved popup showing on tooljetDB (#5184)

This commit is contained in:
Kavin Venkatachalam 2023-01-04 17:53:40 +05:30 committed by GitHub
parent fb9e080a2f
commit bdc4114052
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 23 additions and 7 deletions

View file

@ -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) {

View file

@ -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) {

View file

@ -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 (

View file

@ -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]);

View file

@ -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) {