+import { myAuthRequired } from "@utils/app";
+import { capitalizeFirstLetter } from "@utils/helpers";
import { Component, InfernoMouseEvent, linkEvent } from "inferno";
-import { EditSite, GetSiteResponse } from "lemmy-js-client";
-import { i18n } from "../../i18next";
-import { WebSocketService } from "../../services";
-import { capitalizeFirstLetter, myAuth, wsClient } from "../../utils";
+import { EditSite, Tagline } from "lemmy-js-client";
+import { I18NextService } from "../../services";
import { HtmlTags } from "../common/html-tags";
import { Icon, Spinner } from "../common/icon";
import { MarkdownTextArea } from "../common/markdown-textarea";
interface TaglineFormProps {
- siteRes: GetSiteResponse;
+ taglines: Array<Tagline>;
+ onSaveSite(form: EditSite): void;
+ loading: boolean;
}
interface TaglineFormState {
- siteRes: GetSiteResponse;
- siteForm: EditSite;
- loading: boolean;
+ taglines: Array<string>;
editingRow?: number;
}
export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
state: TaglineFormState = {
- loading: false,
- siteRes: this.props.siteRes,
editingRow: undefined,
- siteForm: {
- taglines: this.props.siteRes.taglines?.map(x => x.content),
- auth: "TODO",
- },
+ taglines: this.props.taglines.map(x => x.content),
};
constructor(props: any, context: any) {
super(props, context);
}
get documentTitle(): string {
- return i18n.t("taglines");
- }
-
- componentWillReceiveProps() {
- this.setState({ loading: false });
+ return I18NextService.i18n.t("taglines");
}
render() {
return (
- <div className="col-12">
+ <div className="tagline-form col-12">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
/>
- <h5 className="col-12">{i18n.t("taglines")}</h5>
+ <h1 className="h4 mb-4">{I18NextService.i18n.t("taglines")}</h1>
<div className="table-responsive col-12">
<table id="taglines_table" className="table table-sm table-hover">
<thead className="pointer">
<th style="width:121px"></th>
</thead>
<tbody>
- {this.state.siteForm.taglines?.map((cv, index) => (
+ {this.state.taglines.map((cv, index) => (
<tr key={index}>
<td>
{this.state.editingRow == index && (
this.handleTaglineChange(this, index, s)
}
hideNavigationWarnings
- allLanguages={this.state.siteRes.all_languages}
- siteLanguages={this.state.siteRes.discussion_languages}
+ allLanguages={[]}
+ siteLanguages={[]}
/>
)}
{this.state.editingRow != index && <div>{cv}</div>}
<button
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
- { form: this, index: index },
+ { i: this, index: index },
this.handleEditTaglineClick
)}
- data-tippy-content={i18n.t("edit")}
- aria-label={i18n.t("edit")}
+ data-tippy-content={I18NextService.i18n.t("edit")}
+ aria-label={I18NextService.i18n.t("edit")}
>
- <Icon icon="edit" classes={`icon-inline`} />
+ <Icon icon="edit" classes="icon-inline" />
</button>
<button
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(
- { form: this, index: index },
+ { i: this, index: index },
this.handleDeleteTaglineClick
)}
- data-tippy-content={i18n.t("delete")}
- aria-label={i18n.t("delete")}
+ data-tippy-content={I18NextService.i18n.t("delete")}
+ aria-label={I18NextService.i18n.t("delete")}
>
- <Icon icon="trash" classes={`icon-inline text-danger`} />
+ <Icon icon="trash" classes="icon-inline text-danger" />
</button>
</td>
</tr>
))}
</tbody>
</table>
- <div className="form-group row">
+ <div className="mb-3 row">
<div className="col-12">
<button
- className="btn btn-sm btn-secondary mr-2"
+ className="btn btn-sm btn-secondary me-2"
onClick={linkEvent(this, this.handleAddTaglineClick)}
>
- {i18n.t("add_tagline")}
+ {I18NextService.i18n.t("add_tagline")}
</button>
</div>
</div>
- <div className="form-group row">
+ <div className="mb-3 row">
<div className="col-12">
<button
onClick={linkEvent(this, this.handleSaveClick)}
- className="btn btn-secondary mr-2"
- disabled={this.state.loading}
+ className="btn btn-secondary me-2"
+ disabled={this.props.loading}
>
- {this.state.loading ? (
+ {this.props.loading ? (
<Spinner />
) : (
- capitalizeFirstLetter(i18n.t("save"))
+ capitalizeFirstLetter(I18NextService.i18n.t("save"))
)}
</button>
</div>
}
handleTaglineChange(i: TaglineForm, index: number, val: string) {
- const taglines = i.state.siteForm.taglines;
- if (taglines) {
- taglines[index] = val;
- i.setState(i.state);
+ if (i.state.taglines) {
+ i.setState(prev => ({
+ ...prev,
+ taglines: prev.taglines.map((tl, i) => (i === index ? val : tl)),
+ }));
}
}
- handleDeleteTaglineClick(
- props: { form: TaglineForm; index: number },
- event: any
- ) {
+ handleDeleteTaglineClick(d: { i: TaglineForm; index: number }, event: any) {
event.preventDefault();
- const taglines = props.form.state.siteForm.taglines;
- if (taglines) {
- taglines.splice(props.index, 1);
- props.form.state.siteForm.taglines = undefined;
- props.form.setState(props.form.state);
- props.form.state.siteForm.taglines = taglines;
- props.form.setState({ ...props.form.state, editingRow: undefined });
- }
+ d.i.setState(prev => ({
+ ...prev,
+ taglines: prev.taglines.filter((_, i) => i !== d.index),
+ editingRow: undefined,
+ }));
}
- handleEditTaglineClick(
- props: { form: TaglineForm; index: number },
- event: any
- ) {
+ handleEditTaglineClick(d: { i: TaglineForm; index: number }, event: any) {
event.preventDefault();
- if (this.state.editingRow == props.index) {
- props.form.setState({ editingRow: undefined });
+ if (d.i.state.editingRow == d.index) {
+ d.i.setState({ editingRow: undefined });
} else {
- props.form.setState({ editingRow: props.index });
+ d.i.setState({ editingRow: d.index });
}
}
- handleSaveClick(i: TaglineForm) {
- i.setState({ loading: true });
- const auth = myAuth() ?? "TODO";
- i.setState(s => ((s.siteForm.auth = auth), s));
- WebSocketService.Instance.send(wsClient.editSite(i.state.siteForm));
- i.setState({ ...i.state, editingRow: undefined });
+ async handleSaveClick(i: TaglineForm) {
+ i.props.onSaveSite({
+ taglines: i.state.taglines,
+ auth: myAuthRequired(),
+ });
}
handleAddTaglineClick(
event: InfernoMouseEvent<HTMLButtonElement>
) {
event.preventDefault();
- if (!i.state.siteForm.taglines) {
- i.state.siteForm.taglines = [];
- }
- i.state.siteForm.taglines.push("");
+ const newTaglines = [...i.state.taglines];
+ newTaglines.push("");
+
i.setState({
- ...i.state,
- editingRow: i.state.siteForm.taglines.length - 1,
+ taglines: newTaglines,
+ editingRow: newTaglines.length - 1,
});
}
}
projects / lemmy-ui.git / blobdiff