openreplay/frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx
2022-01-26 00:24:08 +05:30

78 lines
No EOL
2.1 KiB
TypeScript

import React from 'react';
import { connect } from 'react-redux';
import { edit, save } from 'Duck/search';
import { Button, Modal, Form, Icon, Checkbox } from 'UI';
import stl from './SaveSearchModal.css';
interface Props {
filter: any;
loading: boolean;
edit: (filter: any) => void;
save: (filter: any) => Promise<void>;
show: boolean;
closeHandler: () => void;
}
function SaveSearchModal(props: Props) {
const { filter, loading, show, closeHandler } = props;
const onNameChange = ({ target: { value } }) => {
props.edit({ name: value });
};
const onSave = () => {
const { filter, closeHandler } = props;
if (filter.name.trim() === '') return;
props.save(filter).then(function() {
// this.props.fetchFunnelsList();
closeHandler();
});
}
console.log('filter', filter);
return (
<Modal size="tiny" open={ show }>
<Modal.Header className={ stl.modalHeader }>
<div>{ 'Save Search' }</div>
<Icon
role="button"
tabIndex="-1"
color="gray-dark"
size="18"
name="close"
onClick={ closeHandler }
/>
</Modal.Header>
<Modal.Content>
<Form onSubmit={onSave}>
<Form.Field>
<label>{'Title:'}</label>
<input
autoFocus={ true }
// className={ stl.name }
name="name"
value={ filter.name }
onChange={ onNameChange }
placeholder="Title"
/>
</Form.Field>
</Form>
</Modal.Content>
<Modal.Actions className="">
<Button
primary
onClick={ onSave }
loading={ loading }
>
{ filter.exists() ? 'Modify' : 'Save' }
</Button>
<Button className={ stl.cancelButton } marginRight onClick={ closeHandler }>{ 'Cancel' }</Button>
</Modal.Actions>
</Modal>
);
}
export default connect(state => ({
filter: state.getIn(['search', 'instance']),
loading: state.getIn([ 'filters', 'saveRequest', 'loading' ]) ||
state.getIn([ 'filters', 'updateRequest', 'loading' ]),
}), { edit, save })(SaveSearchModal);