From b02e398f021794abc18eb2c521cfb4a6004bb2a5 Mon Sep 17 00:00:00 2001 From: Pierre Leroux Date: Thu, 23 Nov 2023 10:08:52 +0100 Subject: [PATCH] clean --- .../dialog/publicationInfos/LcpInfo.tsx | 10 +- .../PublicationInfoDescription.tsx | 17 +- .../formatPublicationLanguage.tsx | 4 +- .../publicationInfos/formatPublisherDate.tsx | 2 +- .../publicationInfoContent.tsx | 82 ++--- .../dialog/publicationInfos/tag/AddTag.tsx | 25 +- .../components/dialog/ApiappAddForm.tsx | 335 +++++++++--------- .../components/dialog/DialogManager.tsx | 4 + .../components/dialog/OpdsFeedAddForm.tsx | 211 ++++++----- .../publicationInfos/catalogControls.tsx | 10 +- .../publicationInfos/catalogLcpControls.tsx | 11 +- .../opdsControls/OpdsControls.tsx | 11 +- .../library/components/opds/OpdsAddForm.tsx | 70 +++- 13 files changed, 415 insertions(+), 377 deletions(-) diff --git a/src/renderer/common/components/dialog/publicationInfos/LcpInfo.tsx b/src/renderer/common/components/dialog/publicationInfos/LcpInfo.tsx index e2c56b4a5..dd8550c27 100644 --- a/src/renderer/common/components/dialog/publicationInfos/LcpInfo.tsx +++ b/src/renderer/common/components/dialog/publicationInfos/LcpInfo.tsx @@ -102,7 +102,7 @@ class LcpInfo extends React.Component { return ( <> -
+

LCP

@@ -134,24 +134,24 @@ class LcpInfo extends React.Component { } {lcpRightsStartDateStr && <> - {__("publication.lcpStart")}: {lcpRightsStartDateStr} + {__("publication.lcpStart")}: {lcpRightsStartDateStr}
} {lcpRightsEndDateStr && <> - {__("publication.lcpEnd")}: {lcpRightsEndDateStr} + {__("publication.lcpEnd")}: {lcpRightsEndDateStr}

} {lcpRightsCopy ? <> {__("publication.lcpRightsCopy")}: - {lcpRightsCopies} / {lcpRightsCopy}
+ {lcpRightsCopies} / {lcpRightsCopy}
: undefined} {lcpRightsPrint ? <> {__("publication.lcpRightsPrint")}: - 0 / {lcpRightsPrint}
+ 0 / {lcpRightsPrint}
: undefined}
diff --git a/src/renderer/common/components/dialog/publicationInfos/PublicationInfoDescription.tsx b/src/renderer/common/components/dialog/publicationInfos/PublicationInfoDescription.tsx index 447a39b5b..9e5323afa 100644 --- a/src/renderer/common/components/dialog/publicationInfos/PublicationInfoDescription.tsx +++ b/src/renderer/common/components/dialog/publicationInfos/PublicationInfoDescription.tsx @@ -12,12 +12,9 @@ import * as React from "react"; import { I18nTyped, Translator } from "readium-desktop/common/services/translator"; import { TPublication } from "readium-desktop/common/type/publication.type"; import * as stylesBookDetailsDialog from "readium-desktop/renderer/assets/styles/bookDetailsDialog.css"; -// import * as stylesBlocks from "readium-desktop/renderer/assets/styles/components/blocks.css"; -// import * as stylesButtons from "readium-desktop/renderer/assets/styles/components/buttons.css"; -// import * as stylesGlobal from "readium-desktop/renderer/assets/styles/global.css"; -import SVG from "../../SVG"; -import * as ChevronDown from "readium-desktop/renderer/assets/icons/chevron-down.svg"; -import * as ChevronUp from "readium-desktop/renderer/assets/icons/chevron-up.svg"; +import * as stylesBlocks from "readium-desktop/renderer/assets/styles/components/blocks.css"; +import * as stylesButtons from "readium-desktop/renderer/assets/styles/components/buttons.css"; +import * as stylesGlobal from "readium-desktop/renderer/assets/styles/global.css"; // Logger const debug = debug_("readium-desktop:renderer:publicationInfoDescription"); @@ -71,14 +68,15 @@ export default class PublicationInfoDescription extends React.Component; return ( <> -
+

{__("catalog.description")}

-
+
{ this.state.needSeeMore && - diff --git a/src/renderer/library/components/dialog/ApiappAddForm.tsx b/src/renderer/library/components/dialog/ApiappAddForm.tsx index 791b880e7..86c06f2ef 100644 --- a/src/renderer/library/components/dialog/ApiappAddForm.tsx +++ b/src/renderer/library/components/dialog/ApiappAddForm.tsx @@ -6,61 +6,104 @@ // ==LICENSE-END== import * as React from "react"; +import { connect } from "react-redux"; +import { DialogTypeName } from "readium-desktop/common/models/dialog"; +import * as dialogActions from "readium-desktop/common/redux/actions/dialog"; import * as stylesButtons from "readium-desktop/renderer/assets/styles/components/buttons.css"; import * as stylesInputs from "readium-desktop/renderer/assets/styles/components/inputs.css"; import * as stylesModals from "readium-desktop/renderer/assets/styles/components/modals.css"; +import Dialog from "readium-desktop/renderer/common/components/dialog/Dialog"; +import { + TranslatorProps, withTranslator, +} from "readium-desktop/renderer/common/components/hoc/translator"; +import { apiAction } from "readium-desktop/renderer/library/apiAction"; +import { ILibraryRootState } from "readium-desktop/common/redux/states/renderer/libraryRootState"; +import { TDispatch } from "readium-desktop/typings/redux"; +// import * as SearchIcon from "readium-desktop/renderer/assets/icons/baseline-search-24px-grey.svg"; import * as magnifyingGlass from "readium-desktop/renderer/assets/icons/magnifying_glass.svg"; import SVG from "readium-desktop/renderer/common/components/SVG"; import { IApiappSearchResultView } from "readium-desktop/common/api/interface/apiappApi.interface"; -import { DialogCloseButton, DialogHeader, DialogTitle, DialogFooter, DialogClose, DialogWithRadix, DialogWithRadixTrigger, DialogWithRadixContent } from "readium-desktop/renderer/common/components/dialog/DialogWithRadix"; -import { useTranslator } from "readium-desktop/renderer/common/hooks/useTranslator"; -import { useApi } from "readium-desktop/renderer/common/hooks/useApi"; -import { nanoid } from "nanoid"; -import * as AddIcon from "readium-desktop/renderer/assets/icons/add-alone.svg"; -import * as InfoIcon from "readium-desktop/renderer/assets/icons/outline-info-24px.svg"; -import * as ChevronDown from "readium-desktop/renderer/assets/icons/chevron-down.svg"; -import * as ChevronUp from "readium-desktop/renderer/assets/icons/chevron-up.svg"; -import * as FollowLinkIcon from "readium-desktop/renderer/assets/icons/followLink-icon.svg"; -import classNames from "classnames"; - -const context = React.createContext<{ - selectSearchResult: IApiappSearchResultView; - setSelectSearchResult: React.Dispatch>; - submitAction: () => void; -}>(undefined); - -const Item = ({v}: {v: IApiappSearchResultView}) => { - - const {selectSearchResult, setSelectSearchResult, submitAction } = React.useContext(context); - return
  • + +// eslint-disable-next-line @typescript-eslint/no-empty-interface +interface IBaseProps extends TranslatorProps { +} +// IProps may typically extend: +// RouteComponentProps +// ReturnType +// ReturnType +// eslint-disable-next-line @typescript-eslint/no-empty-interface +interface IProps extends IBaseProps, ReturnType, ReturnType { +} + +interface IState { + name: string | undefined; + url: string | undefined; + searchResultView: IApiappSearchResultView[]; + selectSearchResult: IApiappSearchResultView | undefined; + query: string; +} + +class ApiappAddForm extends React.Component { + // private focusRef: React.RefObject; + private inputRef: React.RefObject; + + constructor(props: IProps) { + super(props); + + // this.focusRef = React.createRef(); + this.inputRef = React.createRef(); + + this.state = { + name: undefined, + url: undefined, + searchResultView: [], + selectSearchResult: undefined, + query: "", + }; + } + + public componentDidMount() { + if (this.inputRef?.current) { + this.inputRef.current.focus(); + } + } + + public render(): React.ReactElement<{}> { + if (!this.props.open) { + return (<>); + } + + const { __ } = this.props; + const listItems = this.state.searchResultView.map((v, idx) => +
  • setSelectSearchResult(v)} - onDoubleClick={() => { - // e.preventDefault(); - setSelectSearchResult(v); + onClick={() => this.setState({ selectSearchResult: v })} + onDoubleClick={(e) => { + this.setState({ selectSearchResult: v }); setTimeout(() => { - submitAction(); + this.addDoubleClick(e); }, 0); }} onKeyDown={(e) => { if (e.key === "Enter") { - // e.preventDefault(); - // e.stopPropagation(); - setSelectSearchResult(v); + this.setState({ selectSearchResult: v }); setTimeout(() => { - submitAction(); + this.addDoubleClick(e); }, 0); + + // e.preventDefault(); + e.stopPropagation(); } }} > @@ -70,143 +113,109 @@ const Item = ({v}: {v: IApiappSearchResultView}) => {
    {v.address}     -
    • ; -}; + ); -const ApiappAddForm = () => { - const [__] = useTranslator(); - const searchInputRef = React.useRef(); - const [infoOpen, setInfoOpen] = React.useState(false); - - const ItemListWithStyle = () => -
    - { - searchResultView?.length ?
      - {searchResultView.map((v) => )} -
    - : searchInputRef?.current?.value ? __("apiapp.noLibraryFound", { name: searchInputRef?.current.value }) : <> - } -
    ; - - const [resultApiAppSearchAction, apiAppSearchAction] = useApi(undefined, "apiapp/search"); - const searchResultView = resultApiAppSearchAction?.data?.result || []; + return ( + +
    +
    + { + if (e.key === "Enter") { + this.search(undefined); + // e.preventDefault(); + e.stopPropagation(); + } + }} + /> + +
    +
    + { + listItems.length + ?
      + {listItems} +
    + : + this.state.query ? __("apiapp.noLibraryFound", { name: this.state.query }) : <> + } +
    +
    +     + ); + } - const openInfo = (e: any) => { + private addDoubleClick = (e: React.UIEvent) => { e.preventDefault(); - setInfoOpen(!infoOpen); + this.add(); + this.props.closeDialog(); }; - return ( -
    -
    -
    - - { - if (e.key === "Enter") { - const v = searchInputRef.current?.value; - if (!v) return ; - apiAppSearchAction(v); - // e.preventDefault(); - // e.stopPropagation(); - } - }} - /> -
    - -
    - -
    - - { infoOpen ? -
    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Phasellus elit libero, pharetra vitae cursus sed, tincidunt et elit. - Morbi laoreet iaculis nibh, non condimentum nulla euismod sed. -

    - - Vivamus quis pharetra eros. - - -
    - : <>} -
    -
    - ); -}; + private add = () => { + if (!this.state.selectSearchResult?.name || !this.state.selectSearchResult?.id || !this.state.selectSearchResult?.url) { + return; + } + const title = this.state.selectSearchResult.name; + const url = `apiapp://${this.state.selectSearchResult.id}:apiapp:${this.state.selectSearchResult.url}`; + apiAction("opds/addFeed", { title, url }).catch((err) => { + console.error("Error to fetch api opds/addFeed", err); + }); + }; -export const ApiappAddFormDialog = () => { - const [__] = useTranslator(); - const [, apiAddFeedAction] = useApi(undefined, "opds/addFeed"); - const [selectSearchResult, setSelectSearchResult] = React.useState(undefined); + private search: React.MouseEventHandler = (e) => { + e?.preventDefault(); // undefined on enter keydown input search + + const value = this.inputRef?.current?.value; + this.setState({ query: "" }); + + if (value && typeof value === "string") { + apiAction("apiapp/search", value) + .then((searchResultView) => { + this.setState({ searchResultView }); + this.setState({ query: value }); + }) + .catch((error) => console.error("Error to fetch api apiapp/search", error)); - const addFeedAction = React.useCallback(() => { - if (!selectSearchResult?.name || !selectSearchResult?.id || !selectSearchResult?.url) { - return; } - const title = selectSearchResult.name; - const url = `apiapp://${selectSearchResult.id}:apiapp:${selectSearchResult.url}`; - apiAddFeedAction({title, url}); - }, [selectSearchResult, apiAddFeedAction]); - - const submitButtonRef = React.useRef(); - const contextValue = {selectSearchResult, setSelectSearchResult, submitAction: () => submitButtonRef.current.click()}; - - return - - - - - - - {__("opds.addFormApiapp.title")} - -
    - -
    -     - - - - - - - - - - - -     -     ; + }; +} + +const mapDispatchToProps = (dispatch: TDispatch, _props: IBaseProps) => { + return { + closeDialog: () => { + dispatch( + dialogActions.closeRequest.build(), + ); + }, + }; }; -export default ApiappAddFormDialog; +const mapStateToProps = (state: ILibraryRootState, _props: IBaseProps) => ({ + open: state.dialog.type === DialogTypeName.ApiappAddForm, +}); + +export default connect(mapStateToProps, mapDispatchToProps)(withTranslator(ApiappAddForm)); diff --git a/src/renderer/library/components/dialog/DialogManager.tsx b/src/renderer/library/components/dialog/DialogManager.tsx index 6805473c8..670023217 100644 --- a/src/renderer/library/components/dialog/DialogManager.tsx +++ b/src/renderer/library/components/dialog/DialogManager.tsx @@ -9,11 +9,13 @@ import * as React from "react"; import { connect } from "react-redux"; import PublicationInfo from "readium-desktop/renderer/library/components/dialog/publicationInfos/PublicationInfo"; import { ILibraryRootState } from "readium-desktop/common/redux/states/renderer/libraryRootState"; +import ApiappAddForm from "./ApiappAddForm"; import DeleteOpdsFeedConfirm from "./DeleteOpdsFeedConfirm"; import DeletePublicationConfirm from "./DeletePublicationConfirm"; import FileImport from "./FileImport"; import LcpAuthentication from "./LcpAuthentication"; +import OpdsFeedAddForm from "./OpdsFeedAddForm"; import OpdsFeedUpdateForm from "./OpdsFeedUpdateForm"; import RenewLsdConfirm from "./RenewLsdConfirm"; import ReturnLsdConfirm from "./ReturnLsdConfirm"; @@ -44,6 +46,8 @@ class DialogManager extends React.Component { return ( <> + + diff --git a/src/renderer/library/components/dialog/OpdsFeedAddForm.tsx b/src/renderer/library/components/dialog/OpdsFeedAddForm.tsx index 9ada47cad..f86670d74 100644 --- a/src/renderer/library/components/dialog/OpdsFeedAddForm.tsx +++ b/src/renderer/library/components/dialog/OpdsFeedAddForm.tsx @@ -6,122 +6,117 @@ // ==LICENSE-END== import * as React from "react"; -import { DialogClose, DialogCloseButton, DialogFooter, DialogHeader, DialogTitle, DialogWithRadix, DialogWithRadixContent, DialogWithRadixTrigger } from "readium-desktop/renderer/common/components/dialog/DialogWithRadix"; -import * as stylesButtons from "readium-desktop/renderer/assets/styles/components/buttons.css"; -import SVG from "readium-desktop/renderer/common/components/SVG"; -import * as AddIcon from "readium-desktop/renderer/assets/icons/add-alone.svg"; -import { useApi } from "readium-desktop/renderer/common/hooks/useApi"; -import { useTranslator } from "readium-desktop/renderer/common/hooks/useTranslator"; +import { connect } from "react-redux"; +import { DialogTypeName } from "readium-desktop/common/models/dialog"; +import * as stylesGlobal from "readium-desktop/renderer/assets/styles/global.css"; import * as stylesInputs from "readium-desktop/renderer/assets/styles/components/inputs.css"; import * as stylesModals from "readium-desktop/renderer/assets/styles/components/modals.css"; -import "readium-desktop/renderer/assets/styles/components/catalog.scss"; -import classNames from "classnames"; -import * as InfoIcon from "readium-desktop/renderer/assets/icons/outline-info-24px.svg"; -import * as ChevronDown from "readium-desktop/renderer/assets/icons/chevron-down.svg"; -import * as ChevronUp from "readium-desktop/renderer/assets/icons/chevron-up.svg"; -import * as FollowLinkIcon from "readium-desktop/renderer/assets/icons/followLink-icon.svg"; -import * as penIcon from "readium-desktop/renderer/assets/icons/pen-icon.svg"; -import * as linkIcon from "readium-desktop/renderer/assets/icons/link-icon.svg"; +import Dialog from "readium-desktop/renderer/common/components/dialog/Dialog"; +import { + TranslatorProps, withTranslator, +} from "readium-desktop/renderer/common/components/hoc/translator"; +import { apiAction } from "readium-desktop/renderer/library/apiAction"; +import { ILibraryRootState } from "readium-desktop/common/redux/states/renderer/libraryRootState"; -export const ApiappAddFormDialog = () => { - const [__] = useTranslator(); - const [, apiAddFeedAction] = useApi(undefined, "opds/addFeed"); +// eslint-disable-next-line @typescript-eslint/no-empty-interface +interface IBaseProps extends TranslatorProps { +} +// IProps may typically extend: +// RouteComponentProps +// ReturnType +// ReturnType +// eslint-disable-next-line @typescript-eslint/no-empty-interface +interface IProps extends IBaseProps, ReturnType { +} - const [title, setTitle] = React.useState(""); - const [url, setUrl] = React.useState(""); - const [infoOpen, setInfoOpen] = React.useState(false); - const addAction = () => { - if (!title || !url) { - return; +interface IState { + name: string | undefined; + url: string | undefined; +} + +class OpdsFeedAddForm extends React.Component { + private focusRef: React.RefObject; + + constructor(props: IProps) { + super(props); + + this.focusRef = React.createRef(); + + this.state = { + name: undefined, + url: undefined, + }; + + } + + public componentDidMount() { + if (this.focusRef?.current) { + this.focusRef.current.focus(); } - apiAddFeedAction({ title, url }); - }; + } - const openInfo = (e: any) => { - e.preventDefault(); - setInfoOpen(!infoOpen); - }; + public render(): React.ReactElement<{}> { + if (!this.props.open) { + return (<>); + } - return - - - - - - - {__("opds.addMenu")} - -
    - -
    -     -
    -
    - - - setTitle(e?.target?.value)} - type="text" - aria-label={__("opds.addForm.name")} - // placeholder={__("opds.addForm.namePlaceholder")} - required - /> -
    -
    - - {/* */} - - setUrl(e?.target?.value)} - type="text" - aria-label={__("opds.addForm.url")} - // placeholder={__("opds.addForm.urlPlaceholder")} - required - /> -
    -
    - - { infoOpen ? -
    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Phasellus elit libero, pharetra vitae cursus sed, tincidunt et elit. - Morbi laoreet iaculis nibh, non condimentum nulla euismod sed. -

    - - Vivamus quis pharetra eros. - - +
    +
    + + this.setState({ + name: e.target.value, + })} + type="text" + aria-label={__("opds.addForm.name")} + placeholder={__("opds.addForm.namePlaceholder")} + defaultValue={name} + ref={this.focusRef} + /> +
    +
    + + this.setState({ + url: e.target.value, + })} + type="text" + aria-label={__("opds.addForm.url")} + placeholder={__("opds.addForm.urlPlaceholder")} + defaultValue={url} + />
    - : <>}
    - - - - - - - - - - - ; -}; + + ); + } + + public add = () => { + const title = this.state.name; + const url = this.state.url; + if (!title || !url) { + return; + } + apiAction("opds/addFeed", { title, url }).catch((err) => { + console.error("Error to fetch api opds/addFeed", err); + }); + }; + +} +const mapStateToProps = (state: ILibraryRootState, _props: IBaseProps) => ({ + open: state.dialog.type === DialogTypeName.OpdsFeedAddForm, +}); -export default ApiappAddFormDialog; +export default connect(mapStateToProps)(withTranslator(OpdsFeedAddForm)); diff --git a/src/renderer/library/components/dialog/publicationInfos/catalogControls.tsx b/src/renderer/library/components/dialog/publicationInfos/catalogControls.tsx index 7676873a6..52b1270d8 100644 --- a/src/renderer/library/components/dialog/publicationInfos/catalogControls.tsx +++ b/src/renderer/library/components/dialog/publicationInfos/catalogControls.tsx @@ -11,9 +11,8 @@ import { DialogTypeName } from "readium-desktop/common/models/dialog"; import { readerActions } from "readium-desktop/common/redux/actions"; import * as dialogActions from "readium-desktop/common/redux/actions/dialog"; import { PublicationView } from "readium-desktop/common/views/publication"; -import * as SaveAsIcon from "readium-desktop/renderer/assets/icons/SaveAs-icon.svg"; -import * as TrashIcon from "readium-desktop/renderer/assets/icons/trash-icon.svg"; -import * as ReadBook from "readium-desktop/renderer/assets/icons/readBook-icon.svg"; +import * as DeleteIcon from "readium-desktop/renderer/assets/icons/baseline-close-24px.svg"; +import * as ExportIcon from "readium-desktop/renderer/assets/icons/download.svg"; import * as stylesButtons from "readium-desktop/renderer/assets/styles/components/buttons.css"; import { TranslatorProps, withTranslator, @@ -55,16 +54,15 @@ export class CatalogControls extends React.Component { return ( <> diff --git a/src/renderer/library/components/dialog/publicationInfos/catalogLcpControls.tsx b/src/renderer/library/components/dialog/publicationInfos/catalogLcpControls.tsx index c481ec176..a034a0885 100644 --- a/src/renderer/library/components/dialog/publicationInfos/catalogLcpControls.tsx +++ b/src/renderer/library/components/dialog/publicationInfos/catalogLcpControls.tsx @@ -12,6 +12,8 @@ import { readerActions } from "readium-desktop/common/redux/actions"; import * as dialogActions from "readium-desktop/common/redux/actions/dialog"; import { PublicationView } from "readium-desktop/common/views/publication"; import * as ArrowIcon from "readium-desktop/renderer/assets/icons/arrow-right.svg"; +import * as DeleteIcon from "readium-desktop/renderer/assets/icons/baseline-close-24px.svg"; +import * as ExportIcon from "readium-desktop/renderer/assets/icons/download.svg"; import * as LoopIcon from "readium-desktop/renderer/assets/icons/loop.svg"; import * as stylesButtons from "readium-desktop/renderer/assets/styles/components/buttons.css"; import { @@ -24,10 +26,6 @@ import { apiAction } from "readium-desktop/renderer/library/apiAction"; import { StatusEnum } from "@r2-lcp-js/parser/epub/lsd"; -import * as ReadBook from "readium-desktop/renderer/assets/icons/readBook-icon.svg"; -import * as SaveAsIcon from "readium-desktop/renderer/assets/icons/SaveAs-icon.svg"; -import * as TrashIcon from "readium-desktop/renderer/assets/icons/trash-icon.svg"; - // eslint-disable-next-line @typescript-eslint/no-empty-interface interface IBaseProps extends TranslatorProps { publicationView: PublicationView; @@ -85,7 +83,6 @@ class CatalogLcpControls extends React.Component { onClick={this.handleRead} className={stylesButtons.button_primary} > - {__("catalog.readBook")} : <> @@ -115,12 +112,12 @@ class CatalogLcpControls extends React.Component { onClick={ this.deletePublication } className={stylesButtons.button_transparency} > - + {__("catalog.deleteBook")} diff --git a/src/renderer/library/components/dialog/publicationInfos/opdsControls/OpdsControls.tsx b/src/renderer/library/components/dialog/publicationInfos/opdsControls/OpdsControls.tsx index 318a0df88..e89beb272 100644 --- a/src/renderer/library/components/dialog/publicationInfos/opdsControls/OpdsControls.tsx +++ b/src/renderer/library/components/dialog/publicationInfos/opdsControls/OpdsControls.tsx @@ -57,7 +57,7 @@ export class OpdsControls extends React.Component { __, } = this.props; - const boxStyle = {fontSize: "16px",border: "1px solid silver", borderRadius: "8px", padding: "0.4em", paddingTop: "0.2em", marginBottom: "0.5em", marginTop: "0.4em"}; + const boxStyle = {border: "1px solid silver", borderRadius: "8px", padding: "0.4em", paddingTop: "0.2em", marginBottom: "0.5em", marginTop: "0.4em"}; const m = findMimeTypeWithExtension(ADOBE_ADEPT_XML); const orderLinks = (links: IOpdsLinkView[]) => { @@ -118,7 +118,7 @@ export class OpdsControls extends React.Component { ln, opdsPublicationView, )} - className={stylesButtons.button_transparency} + className={stylesButtons.button_primary} disabled={sampleButtonIsDisabled()} > @@ -152,6 +152,7 @@ export class OpdsControls extends React.Component { {__("opds.menu.goBuyBook")} +
    , ) @@ -163,7 +164,7 @@ export class OpdsControls extends React.Component { (ln, idx) =>
    + + + ); + } +} + +const mapDispatchToProps = (dispatch: TDispatch, _props: IBaseProps) => { + return { + openOpdsFeedAddForm: () => { + dispatch(dialogActions.openRequest.build(DialogTypeName.OpdsFeedAddForm, {})); + }, + openApiappAddForm: () => { + dispatch(dialogActions.openRequest.build(DialogTypeName.ApiappAddForm, {})); + }, + }; }; -export default OpdsAddForm; +export default connect(undefined, mapDispatchToProps)(withTranslator(OpdsAddForm));