diff --git a/frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx b/frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx index da6ce0d50..f25510354 100644 --- a/frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx +++ b/frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import { connect } from 'react-redux'; import { editSavedSearch as edit, save, remove } from 'Duck/search'; import { Button, Modal, Form, Icon, Checkbox, Input } from 'UI'; @@ -8,128 +8,119 @@ import cn from 'classnames'; import { toast } from 'react-toastify'; interface Props { - filter: any; - loading: boolean; - edit: (filter: any) => void; - save: (searchId) => Promise; - show: boolean; - closeHandler: () => void; - savedSearch: any; - remove: (filterId: number) => Promise; - userId: number; + filter: any; + loading: boolean; + edit: (filter: any) => void; + save: (searchId: any, rename: boolean) => Promise; + show: boolean; + closeHandler: () => void; + savedSearch: any; + remove: (filterId: number) => Promise; + userId: number; + rename: boolean; } function SaveSearchModal(props: Props) { - const { savedSearch, filter, loading, show, closeHandler } = props; - const [name, setName] = useState(savedSearch ? savedSearch.name : ''); + const { savedSearch, loading, show, closeHandler, rename = false } = props; - const onNameChange = ({ target: { value } }) => { - props.edit({ name: value }); - // setName(value); - }; + const onNameChange = ({ target: { value } }: any) => { + props.edit({ name: value }); + }; - const onSave = () => { - const { filter, closeHandler } = props; - // if (name.trim() === '') return; - props.save(savedSearch.exists() ? savedSearch.searchId : null) - .then(() => { - // this.props.fetchFunnelsList(); - toast.success(`${savedSearch.exists() ? 'Updated' : 'Saved'} Successfully`); - closeHandler(); - }) - .catch(e => { - toast.error('Something went wrong, please try again'); - }); - } + const onSave = () => { + const { closeHandler } = props; - const onDelete = async () => { - if (await confirm({ - header: 'Confirm', - confirmButton: 'Yes, delete', - confirmation: `Are you sure you want to permanently delete this Saved search?`, - })) { - props.remove(savedSearch.searchId).then(() => { - closeHandler(); - }); - } - } + props + .save(savedSearch.exists() ? savedSearch.searchId : null, rename) + .then(() => { + toast.success(`${savedSearch.exists() ? 'Updated' : 'Saved'} Successfully`); + closeHandler(); + }) + .catch((e) => { + toast.error('Something went wrong, please try again'); + }); + }; - const onChangeOption = ({ target: { checked, name }}: any) => props.edit({ [ name ]: checked }) + const onDelete = async () => { + if ( + await confirm({ + header: 'Confirm', + confirmButton: 'Yes, delete', + confirmation: `Are you sure you want to permanently delete this Saved search?`, + }) + ) { + props.remove(savedSearch.searchId).then(() => { + closeHandler(); + }); + } + }; + const onChangeOption = ({ target: { checked, name } }: any) => props.edit({ [name]: checked }); - return ( - - -
{ 'Save Search' }
- -
+ return ( + + +
{'Save Search'}
+ +
- -
- - - - + + + + + + - -
- -
props.edit({ 'isPublic' : !savedSearch.isPublic }) } - > - - Team Visible -
-
-
- - { savedSearch.exists() &&
Changes in filters will be updated.
} -
- -
- - -
- { savedSearch && } -
-
- ); + +
+ +
props.edit({ isPublic: !savedSearch.isPublic })} + > + + Team Visible +
+
+
+ + {/* {savedSearch.exists() &&
Changes in filters will be updated.
} */} + + +
+ + +
+ {savedSearch && ( + + )} +
+
+ ); } -export default connect(state => ({ - userId: state.getIn([ 'user', 'account', 'id' ]), - savedSearch: state.getIn([ 'search', 'savedSearch' ]), - filter: state.getIn(['search', 'instance']), - loading: state.getIn([ 'search', 'saveRequest', 'loading' ]) || - state.getIn([ 'search', 'updateRequest', 'loading' ]), -}), { edit, save, remove })(SaveSearchModal); +export default connect( + (state: any) => ({ + userId: state.getIn(['user', 'account', 'id']), + savedSearch: state.getIn(['search', 'savedSearch']), + filter: state.getIn(['search', 'instance']), + loading: state.getIn(['search', 'saveRequest', 'loading']) || state.getIn(['search', 'updateRequest', 'loading']), + }), + { edit, save, remove } +)(SaveSearchModal); diff --git a/frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx b/frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx index a90193dc8..ac67f4158 100644 --- a/frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx +++ b/frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx @@ -1,15 +1,14 @@ -import React, { MouseEvent, useState } from 'react' +import React, { MouseEvent, useState } from 'react'; import cn from 'classnames'; import { Icon, Input } from 'UI'; import { List } from 'immutable'; import { confirm, Popup } from 'UI'; -import { applySavedSearch, remove, editSavedSearch } from 'Duck/search' +import { applySavedSearch, remove, editSavedSearch } from 'Duck/search'; import { connect } from 'react-redux'; import { useModal } from 'App/components/Modal'; -import { SavedSearch } from 'Types/ts/search' -import SaveSearchModal from 'Shared/SaveSearchModal' -import stl from './savedSearchModal.module.css' - +import { SavedSearch } from 'Types/ts/search'; +import SaveSearchModal from 'Shared/SaveSearchModal'; +import stl from './savedSearchModal.module.css'; interface ITooltipIcon { title: string; @@ -18,15 +17,12 @@ interface ITooltipIcon { } function TooltipIcon(props: ITooltipIcon) { return ( -
props.onClick(e)} > - +
props.onClick(e)}> +
- ) + ); } interface Props { @@ -37,51 +33,55 @@ interface Props { } function SavedSearchModal(props: Props) { const { hideModal } = useModal(); - const [showModal, setshowModal] = useState(false) - const [filterQuery, setFilterQuery] = useState('') + const [showModal, setshowModal] = useState(false); + const [filterQuery, setFilterQuery] = useState(''); const onClick = (item: SavedSearch, e) => { e.stopPropagation(); props.applySavedSearch(item); hideModal(); - } + }; const onDelete = async (item: SavedSearch, e: MouseEvent) => { e.stopPropagation(); const confirmation = await confirm({ header: 'Confirm', confirmButton: 'Yes, delete', - confirmation: 'Are you sure you want to permanently delete this search?' - }) + confirmation: 'Are you sure you want to permanently delete this search?', + }); if (confirmation) { - props.remove(item.searchId) + props.remove(item.searchId); } - } + }; const onEdit = (item: SavedSearch, e: MouseEvent) => { e.stopPropagation(); props.editSavedSearch(item); setTimeout(() => setshowModal(true), 0); - } + }; - const shownItems = props.list.filter(item => item.name.includes(filterQuery)) + const shownItems = props.list.filter((item) => item.name.includes(filterQuery)); return (
-

Saved Search {props.list.size}

+

+ Saved Search {props.list.size} +

{props.list.size > 1 && (
setFilterQuery(value)} + onChange={({ target: { value } }: any) => setFilterQuery(value)} placeholder="Filter by name" />
)} - {shownItems.map(item => ( -
onClick(item, e)}> + {shownItems.map((item) => ( +
onClick(item, e)} + >
{item.name}
@@ -102,9 +102,9 @@ function SavedSearchModal(props: Props) {
))} - { showModal && ( setshowModal(false)} /> )} + {showModal && setshowModal(false)} rename={true} />}
- ) + ); } -export default connect(state => ({ list: state.getIn([ 'search', 'list' ]) }), { applySavedSearch, remove, editSavedSearch })(SavedSearchModal) +export default connect((state: any) => ({ list: state.getIn(['search', 'list']) }), { applySavedSearch, remove, editSavedSearch })(SavedSearchModal); diff --git a/frontend/app/components/ui/Input/Input.tsx b/frontend/app/components/ui/Input/Input.tsx index a2ad36f1b..1897ece13 100644 --- a/frontend/app/components/ui/Input/Input.tsx +++ b/frontend/app/components/ui/Input/Input.tsx @@ -4,27 +4,38 @@ import { Icon } from 'UI'; interface Props { wrapperClassName?: string; - className: string; + className?: string; icon?: string; leadingButton?: React.ReactNode; type?: string; rows?: number; - [x:string]: any; + [x: string]: any; } function Input(props: Props) { - const { className, leadingButton = "", wrapperClassName = "", icon = "", type="text", rows=4, ...rest } = props; + const { className = '', leadingButton = '', wrapperClassName = '', icon = '', type = 'text', rows = 4, ...rest } = props; return ( -
+
{icon && } - { type === 'textarea' ? ( -