Skip to content

Commit

Permalink
WIP convert opds update to radix
Browse files Browse the repository at this point in the history
  • Loading branch information
@arthur-lemeur
arthur-lemeur committed Nov 30, 2023
1 parent acb8ed9 commit 48f4e51
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 93 deletions.
3 changes: 3 additions & 0 deletions src/renderer/assets/icons/floppydisk-icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
172 changes: 87 additions & 85 deletions src/renderer/library/components/dialog/OpdsFeedUpdateForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<typeof mapStateToProps>
// ReturnType<typeof mapDispatchToProps>
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface IProps extends IBaseProps, ReturnType<typeof mapStateToProps> {
}

interface IState {
name: string | undefined;
url: string | undefined;
interface IProps extends IBaseProps, ReturnType<typeof mapStateToProps> {
}

class OpdsFeedUpdateForm extends React.Component<IProps, IState> {
private focusRef: React.RefObject<HTMLInputElement>;

constructor(props: IProps) {
super(props);

this.focusRef = React.createRef<HTMLInputElement>();

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 (
<Dialog
id={stylesModals.opds_form_dialog}
title={__("opds.updateForm.title")}
onSubmitButton={this.update}
submitButtonDisabled={!(name && url)}
submitButtonTitle={__("opds.updateForm.updateButton")}
shouldOkRefEnabled={false}
>
<div className={stylesGlobal.w_50}>
<div className={stylesInputs.form_group}>
<label>{__("opds.updateForm.name")}</label>
<input
onChange={(e) => 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}
/>
</div>
<div className={stylesInputs.form_group}>
<label>{__("opds.updateForm.url")}</label>
<input
onChange={(e) => 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}
/>
</div>
</div>
</Dialog>
);
}
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 <DialogWithRadix>
<DialogWithRadixTrigger asChild>
<button className={classNames(stylesButtons.button_transparency_icon, stylesBlocks.block_full_update)}>
<SVG ariaHidden={true} svg={EditIcon} />
</button>
</DialogWithRadixTrigger>
<DialogWithRadixContent>
<DialogHeader>
<DialogTitle>
{__("opds.updateForm.title")}
</DialogTitle>
<div>
<DialogCloseButton />
</div>
</DialogHeader>
<form className={stylesModals.modal_dialog_body}>
<div className={classNames(stylesInputs.form_group, stylesInputs.form_group_catalog)}>
<label htmlFor="title">{__("opds.addForm.name")}</label>
<i><SVG ariaHidden svg={penIcon} /></i>
<input
id="title"
value={title}
onChange={(e) => setTitle(e?.target?.value)}
type="text"
aria-label={__("opds.updateForm.name")}
required
/>
</div>
<div className={classNames(stylesInputs.form_group, stylesInputs.form_group_catalog)}>
<label htmlFor="url">{__("opds.updateForm.url")}</label>
<i><SVG ariaHidden svg={linkIcon} /></i>
<input
id="url"
value={url}
onChange={(e) => setUrl(e?.target?.value)}
type="text"
aria-label={__("opds.updateForm.url")}
required
/>
</div>
<DialogFooter>
<DialogClose asChild>
<button className={stylesButtons.button_secondary_blue}>{__("dialog.cancel")}</button>
</DialogClose>
<DialogClose asChild>
<button type="submit" disabled={!title || !url} className={stylesButtons.button_primary_blue} onClick={() => addAction()}>
<SVG ariaHidden svg={FloppyDiskIcon} />
{__("opds.updateForm.updateButton")}
</button>
</DialogClose>
</DialogFooter>
</form>
</DialogWithRadixContent>
</DialogWithRadix>;
};

export default connect(mapStateToProps)(withTranslator(OpdsFeedUpdateForm));
export default OpdsUpdateForm;
19 changes: 11 additions & 8 deletions src/renderer/library/components/opds/FeedList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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 {
Expand Down Expand Up @@ -89,7 +90,7 @@ class FeedList extends React.Component<IProps, IState> {
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}
>
<p title={`${item.title} --- ${item.url}`}>{item.title}</p>
Expand All @@ -101,13 +102,15 @@ class FeedList extends React.Component<IProps, IState> {
>
<SVG ariaHidden={true} svg={DeleteIcon} />
</button>
<button
{/* <button
onClick={(e) => this.updateFeed(e, item)}
className={classNames(stylesButtons.button_transparency_icon, stylesBlocks.block_full_update)}
title={__("catalog.update")}
>
<SVG ariaHidden={true} svg={EditIcon} />
</button>
</button> */}
<OpdsUpdateForm
feed={item} />
</li>
);
})}
Expand All @@ -124,10 +127,10 @@ class FeedList extends React.Component<IProps, IState> {
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 {
Expand Down

0 comments on commit 48f4e51

Please sign in to comment.