diff --git a/src/renderer/assets/icons/floppydisk-icon.svg b/src/renderer/assets/icons/floppydisk-icon.svg new file mode 100644 index 000000000..4dbf39ca0 --- /dev/null +++ b/src/renderer/assets/icons/floppydisk-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/renderer/library/components/dialog/OpdsFeedUpdateForm.tsx b/src/renderer/library/components/dialog/OpdsFeedUpdateForm.tsx index 6de0959c9..d2841ebd3 100644 --- a/src/renderer/library/components/dialog/OpdsFeedUpdateForm.tsx +++ b/src/renderer/library/components/dialog/OpdsFeedUpdateForm.tsx @@ -6,121 +6,123 @@ // ==LICENSE-END== import * as React from "react"; -import { connect } from "react-redux"; import { DialogType, 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 Dialog from "readium-desktop/renderer/common/components/dialog/Dialog"; +import * as stylesButtons from "readium-desktop/renderer/assets/styles/components/buttons.css"; +import * as stylesBlocks from "readium-desktop/renderer/assets/styles/components/blocks.css"; + import { - TranslatorProps, withTranslator, + TranslatorProps, } 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 { useTranslator } from "readium-desktop/renderer/common/hooks/useTranslator"; +import { useApi } from "readium-desktop/renderer/common/hooks/useApi"; +import { DialogCloseButton, DialogFooter, DialogHeader, DialogWithRadix, DialogWithRadixContent, DialogWithRadixTrigger } from "readium-desktop/renderer/common/components/dialog/DialogWithRadix"; +import { DialogClose, DialogTitle } from "@radix-ui/react-dialog"; +import classNames from "classnames"; +import SVG from "readium-desktop/renderer/common/components/SVG"; +import * as FloppyDiskIcon from "readium-desktop/renderer/assets/icons/floppydisk-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 * as EditIcon from "readium-desktop/renderer/assets/icons/edit.svg"; + // 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 { -} -interface IState { - name: string | undefined; - url: string | undefined; +interface IProps extends IBaseProps, ReturnType { } -class OpdsFeedUpdateForm extends React.Component { - private focusRef: React.RefObject; - - constructor(props: IProps) { - super(props); - - this.focusRef = React.createRef(); - this.state = { - name: props.feed?.title, - url: props.feed?.url, - }; - } +const mapStateToProps = (state: ILibraryRootState, _props: IBaseProps) => ({ + feed: (state.dialog.data as DialogType[DialogTypeName.DeleteOpdsFeedConfirm]).feed, +}); - public componentDidMount() { - if (this.focusRef?.current) { - this.focusRef.current.focus(); - } - } - public render(): React.ReactElement<{}> { - if (!this.props.open) { - return (<>); - } - const { __ } = this.props; - const { name, url } = this.state; - return ( - -
-
- - this.setState({ - name: e.target.value, - // url: this.state.url || this.props.feed.url, - })} - type="text" - aria-label={__("opds.updateForm.name")} - defaultValue={this.props.feed.title} - ref={this.focusRef} - /> -
-
- - this.setState({ - // name: this.state.name || this.props.feed.title, - url: e.target.value, - })} - type="text" - aria-label={__("opds.updateForm.url")} - defaultValue={this.props.feed.url} - /> -
-
- - ); - } +const OpdsUpdateForm = (props: IProps) => { + const { feed } = props; + const [__] = useTranslator(); + const [, apiAddFeedAction] = useApi(undefined, "opds/addFeed"); - private update = () => { - const title = this.state.name; - const url = this.state.url; + const [title, setTitle] = React.useState(feed?.title,); + const [url, setUrl] = React.useState(feed?.url); + const addAction = () => { if (!title || !url) { return; } - apiAction("opds/deleteFeed", this.props.feed.identifier).then(() => { - apiAction("opds/addFeed", { title, url }).catch((err) => { - console.error("Error to fetch api opds/addFeed", err); - }); + apiAction("opds/deleteFeed", props.feed.identifier).then(() => { + apiAddFeedAction({ title, url }); }).catch((err) => { console.error("Error to fetch api opds/deleteFeed", err); }); - }; -} + }; -const mapStateToProps = (state: ILibraryRootState, _props: IBaseProps) => ({ - open: state.dialog.type === DialogTypeName.OpdsFeedUpdateForm, - feed: (state.dialog.data as DialogType[DialogTypeName.DeleteOpdsFeedConfirm]).feed, -}); + return + + + + + + + {__("opds.updateForm.title")} + +
+ +
+ +
+
+ + + setTitle(e?.target?.value)} + type="text" + aria-label={__("opds.updateForm.name")} + required + /> +
+
+ + + setUrl(e?.target?.value)} + type="text" + aria-label={__("opds.updateForm.url")} + required + /> +
+ + + + + + + + +
+ + ; +}; -export default connect(mapStateToProps)(withTranslator(OpdsFeedUpdateForm)); +export default OpdsUpdateForm; \ No newline at end of file diff --git a/src/renderer/library/components/opds/FeedList.tsx b/src/renderer/library/components/opds/FeedList.tsx index a152e3a6f..1a8c063cf 100644 --- a/src/renderer/library/components/opds/FeedList.tsx +++ b/src/renderer/library/components/opds/FeedList.tsx @@ -13,7 +13,7 @@ import { DialogTypeName } from "readium-desktop/common/models/dialog"; import * as dialogActions from "readium-desktop/common/redux/actions/dialog"; import { IOpdsFeedView } from "readium-desktop/common/views/opds"; import * as DeleteIcon from "readium-desktop/renderer/assets/icons/baseline-close-24px.svg"; -import * as EditIcon from "readium-desktop/renderer/assets/icons/edit.svg"; +// import * as EditIcon from "readium-desktop/renderer/assets/icons/edit.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"; @@ -29,6 +29,7 @@ import { TMouseEventOnButton } from "readium-desktop/typings/react"; import { TDispatch } from "readium-desktop/typings/redux"; import { Unsubscribe } from "redux"; import { DisplayType, IRouterLocationState } from "../../routing"; +import OpdsUpdateForm from "../dialog/OpdsFeedUpdateForm"; // eslint-disable-next-line @typescript-eslint/no-empty-interface interface IBaseProps extends TranslatorProps { @@ -89,7 +90,7 @@ class FeedList extends React.Component { item.url, ), }} - state = {{displayType: (this.props.location.state && (this.props.location.state as IRouterLocationState).displayType) ? (this.props.location.state as IRouterLocationState).displayType : DisplayType.Grid}} + state={{ displayType: (this.props.location.state && (this.props.location.state as IRouterLocationState).displayType) ? (this.props.location.state as IRouterLocationState).displayType : DisplayType.Grid }} className={stylesBlocks.block_full} >

{item.title}

@@ -101,13 +102,15 @@ class FeedList extends React.Component { > - + */} + ); })} @@ -124,10 +127,10 @@ class FeedList extends React.Component { this.props.openDeleteDialog(feed); } - private updateFeed(event: TMouseEventOnButton, feed: IOpdsFeedView) { - event.preventDefault(); - this.props.openUpdateDialog(feed); - } + // private updateFeed(event: TMouseEventOnButton, feed: IOpdsFeedView) { + // event.preventDefault(); + // this.props.openUpdateDialog(feed); + // } private async loadFeeds() { try {