Found a bug? Please fill out the sections below. 👍
Thanks for taking the time to fill out this bug report!
For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy)
+ - type: checkboxes
+ attributes:
+ label: Requirements
+ description: Before you create a bug report please do the following.
+ options:
+ - label: Is this a bug report? For questions or discussions use https://lemmy.ml/c/lemmy_support
+ required: true
+ - label: Did you check to see if this issue already exists?
+ required: true
+ - label: Is this only a single bug? Do not put multiple bugs in one issue.
+ required: true
+ - label: Is this a server side (not related to the UI) issue? Use the [Lemmy back end](https://github.com/LemmyNet/lemmy) repo.
+ required: false
- type: textarea
id: summary
attributes:
label: Steps to Reproduce
description: |
Describe the steps to reproduce the bug.
- The better your description is _(go 'here', click 'there'...)_ the fastest you'll get an _(accurate)_ resolution.
+ The better your description is _(go 'here', click 'there'...)_ the fastest you'll get an _(accurate)_ resolution.
value: |
1.
2.
placeholder: ex. 0.17.4-rc.4
validations:
required: true
+ - type: input
+ id: lemmy-instance
+ attributes:
+ label: Lemmy Instance URL
+ description: Which Lemmy instance do you use? The address
+ placeholder: lemmy.ml, lemmy.world, etc
value: |
Have a suggestion about Lemmy's UI?
For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy)
+ - type: checkboxes
+ attributes:
+ label: Requirements
+ description: Before you create a bug report please do the following.
+ options:
+ - label: Is this a feature request? For questions or discussions use https://lemmy.ml/c/lemmy_support
+ required: true
+ - label: Did you check to see if this issue already exists?
+ required: true
+ - label: Is this only a feature request? Do not put multiple feature requests in one issue.
+ required: true
+ - label: Is this a server side (not related to the UI) issue? Use the [Lemmy back end](https://github.com/LemmyNet/lemmy) repo.
+ required: false
- type: textarea
id: problem
attributes:
label: Question
description: What's the question you have about Lemmy's UI?
validations:
- required: true
\ No newline at end of file
+ required: true
label: Question
description: What's the question you have about hexbear?
validations:
- required: true
\ No newline at end of file
+ required: true
-FROM node:alpine as builder\r
+FROM node:20.2-alpine as builder\r
RUN apk update && apk add curl yarn python3 build-base gcc wget git --no-cache\r
RUN curl -sf https://gobinaries.com/tj/node-prune | sh\r
\r
-FROM node:alpine as builder\r
+FROM node:20.2-alpine as builder\r
RUN apk update && apk add curl yarn python3 build-base gcc wget git --no-cache\r
\r
WORKDIR /usr/src/app\r
font-size: 1.2rem;
}
-.md-div table {
- border-collapse: collapse;
- width: 100%;
- margin-bottom: 1rem;
- border: 1px solid var(--dark);
-}
-
-.md-div table th,
-.md-div table td {
- padding: 0.3rem;
- vertical-align: top;
- border-top: 1px solid var(--dark);
- border: 1px solid var(--dark);
-}
-
-.md-div table thead th {
- vertical-align: bottom;
- border-bottom: 2px solid var(--dark);
-}
-
-.md-div table tbody + tbody {
- border-top: 2px solid var(--dark);
+.md-div pre {
+ white-space: pre;
+ overflow-x: auto;
}
.vote-bar {
overflow-y: auto;
}
+.comments {
+ list-style: none;
+ padding: 0;
+}
+
.thumbnail {
object-fit: cover;
min-height: 60px;
site = try_site.data;
initializeSite(site);
- if (path != "/setup" && !site.site_view.local_site.site_setup) {
+ if (path !== "/setup" && !site.site_view.local_site.site_setup) {
return res.redirect("/setup");
}
<!-- Required meta tags -->
<meta name="Description" content="Lemmy">
<meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
<link
id="favicon"
rel="shortcut icon"
isBrowser,
myAuth,
numToSI,
+ poll,
showAvatars,
toast,
+ updateUnreadCountsInterval,
} from "../../utils";
import { Icon } from "../common/icon";
import { PictrsImage } from "../common/pictrs-image";
if (isBrowser()) {
// On the first load, check the unreads
this.requestNotificationPermission();
- await this.fetchUnreads();
+ this.fetchUnreads();
this.requestNotificationPermission();
document.addEventListener("mouseup", this.handleOutsideMenuClick);
return amAdmin() || moderatesS;
}
- async fetchUnreads() {
- const auth = myAuth();
- if (auth) {
- this.setState({ unreadInboxCountRes: { state: "loading" } });
- this.setState({
- unreadInboxCountRes: await HttpService.client.getUnreadCount({
- auth,
- }),
- });
-
- if (this.moderatesSomething) {
- this.setState({ unreadReportCountRes: { state: "loading" } });
- this.setState({
- unreadReportCountRes: await HttpService.client.getReportCount({
- auth,
- }),
- });
- }
-
- if (amAdmin()) {
- this.setState({ unreadApplicationCountRes: { state: "loading" } });
- this.setState({
- unreadApplicationCountRes:
- await HttpService.client.getUnreadRegistrationApplicationCount({
+ fetchUnreads() {
+ poll(async () => {
+ if (window.document.visibilityState !== "hidden") {
+ const auth = myAuth();
+ if (auth) {
+ this.setState({
+ unreadInboxCountRes: await HttpService.client.getUnreadCount({
auth,
}),
- });
+ });
+
+ if (this.moderatesSomething) {
+ this.setState({
+ unreadReportCountRes: await HttpService.client.getReportCount({
+ auth,
+ }),
+ });
+ }
+
+ if (amAdmin()) {
+ this.setState({
+ unreadApplicationCountRes:
+ await HttpService.client.getUnreadRegistrationApplicationCount({
+ auth,
+ }),
+ });
+ }
+ }
}
- }
+ }, updateUnreadCountsInterval);
}
get unreadInboxCount(): number {
this.props.moderators
);
- const borderColor = this.props.node.depth
- ? colorList[(this.props.node.depth - 1) % colorList.length]
- : colorList[0];
const moreRepliesBorderColor = this.props.node.depth
? colorList[this.props.node.depth % colorList.length]
: colorList[0];
node.comment_view.counts.child_count > 0;
return (
- <div
- className={`comment ${
- this.props.node.depth && !this.props.noIndent ? "ml-1" : ""
- }`}
- >
+ <li className="comment" role="comment">
<div
id={`comment-${cv.comment.id}`}
className={classNames(`details comment-node py-2`, {
"border-top border-light": !this.props.noBorder,
mark: this.isCommentNew || this.commentView.comment.distinguished,
})}
- style={
- !this.props.noIndent && this.props.node.depth
- ? `border-left: 2px ${borderColor} solid !important`
- : ""
- }
>
<div
className={classNames({
- "ml-2": !this.props.noIndent && this.props.node.depth,
+ "ml-2": !this.props.noIndent,
})}
>
<div className="d-flex flex-wrap align-items-center text-muted small">
</div>
{showMoreChildren && (
<div
- className={`details ml-1 comment-node py-2 ${
- !this.props.noBorder ? "border-top border-light" : ""
- }`}
+ className={classNames("details ml-1 comment-node py-2", {
+ "border-top border-light": !this.props.noBorder,
+ })}
style={`border-left: 2px ${moreRepliesBorderColor} solid !important`}
>
<button
allLanguages={this.props.allLanguages}
siteLanguages={this.props.siteLanguages}
hideImages={this.props.hideImages}
+ isChild={!this.props.noIndent}
+ depth={this.props.node.depth + 1}
finished={this.props.finished}
onCommentReplyRead={this.props.onCommentReplyRead}
onPersonMentionRead={this.props.onPersonMentionRead}
/>
)}
{/* A collapsed clearfix */}
- {this.state.collapsed && <div className="row col-12"></div>}
- </div>
+ {this.state.collapsed && <div className="row col-12" />}
+ </li>
);
}
linkBtn(small = false) {
const cv = this.commentView;
+
const classnames = classNames("btn btn-link btn-animate text-muted", {
"btn-sm": small,
});
+import classNames from "classnames";
import { Component } from "inferno";
import {
AddAdmin,
TransferCommunity,
} from "lemmy-js-client";
import { CommentNodeI, CommentViewType } from "../../interfaces";
+import { colorList } from "../../utils";
import { CommentNode } from "./comment-node";
interface CommentNodesProps {
allLanguages: Language[];
siteLanguages: number[];
hideImages?: boolean;
+ isChild?: boolean;
+ depth?: number;
finished: Map<CommentId, boolean | undefined>;
onSaveComment(form: SaveComment): void;
onCommentReplyRead(form: MarkCommentReplyAsRead): void;
render() {
const maxComments = this.props.maxCommentsShown ?? this.props.nodes.length;
+ const borderColor = this.props.depth
+ ? colorList[this.props.depth % colorList.length]
+ : colorList[0];
+
return (
- <div className="comments">
- {this.props.nodes.slice(0, maxComments).map(node => (
- <CommentNode
- key={node.comment_view.comment.id}
- node={node}
- noBorder={this.props.noBorder}
- noIndent={this.props.noIndent}
- viewOnly={this.props.viewOnly}
- locked={this.props.locked}
- moderators={this.props.moderators}
- admins={this.props.admins}
- markable={this.props.markable}
- showContext={this.props.showContext}
- showCommunity={this.props.showCommunity}
- enableDownvotes={this.props.enableDownvotes}
- viewType={this.props.viewType}
- allLanguages={this.props.allLanguages}
- siteLanguages={this.props.siteLanguages}
- hideImages={this.props.hideImages}
- onCommentReplyRead={this.props.onCommentReplyRead}
- onPersonMentionRead={this.props.onPersonMentionRead}
- finished={this.props.finished}
- onCreateComment={this.props.onCreateComment}
- onEditComment={this.props.onEditComment}
- onCommentVote={this.props.onCommentVote}
- onBlockPerson={this.props.onBlockPerson}
- onSaveComment={this.props.onSaveComment}
- onDeleteComment={this.props.onDeleteComment}
- onRemoveComment={this.props.onRemoveComment}
- onDistinguishComment={this.props.onDistinguishComment}
- onAddModToCommunity={this.props.onAddModToCommunity}
- onAddAdmin={this.props.onAddAdmin}
- onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
- onBanPerson={this.props.onBanPerson}
- onTransferCommunity={this.props.onTransferCommunity}
- onFetchChildren={this.props.onFetchChildren}
- onCommentReport={this.props.onCommentReport}
- onPurgePerson={this.props.onPurgePerson}
- onPurgeComment={this.props.onPurgeComment}
- />
- ))}
- </div>
+ this.props.nodes.length > 0 && (
+ <ul
+ className={classNames("comments", {
+ "ms-1": !!this.props.isChild,
+ "border-top border-light": !this.props.noBorder,
+ })}
+ style={`border-left: 2px solid ${borderColor} !important;`}
+ >
+ {this.props.nodes.slice(0, maxComments).map(node => (
+ <CommentNode
+ key={node.comment_view.comment.id}
+ node={node}
+ noBorder={this.props.noBorder}
+ noIndent={this.props.noIndent}
+ viewOnly={this.props.viewOnly}
+ locked={this.props.locked}
+ moderators={this.props.moderators}
+ admins={this.props.admins}
+ markable={this.props.markable}
+ showContext={this.props.showContext}
+ showCommunity={this.props.showCommunity}
+ enableDownvotes={this.props.enableDownvotes}
+ viewType={this.props.viewType}
+ allLanguages={this.props.allLanguages}
+ siteLanguages={this.props.siteLanguages}
+ hideImages={this.props.hideImages}
+ onCommentReplyRead={this.props.onCommentReplyRead}
+ onPersonMentionRead={this.props.onPersonMentionRead}
+ finished={this.props.finished}
+ onCreateComment={this.props.onCreateComment}
+ onEditComment={this.props.onEditComment}
+ onCommentVote={this.props.onCommentVote}
+ onBlockPerson={this.props.onBlockPerson}
+ onSaveComment={this.props.onSaveComment}
+ onDeleteComment={this.props.onDeleteComment}
+ onRemoveComment={this.props.onRemoveComment}
+ onDistinguishComment={this.props.onDistinguishComment}
+ onAddModToCommunity={this.props.onAddModToCommunity}
+ onAddAdmin={this.props.onAddAdmin}
+ onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
+ onBanPerson={this.props.onBanPerson}
+ onTransferCommunity={this.props.onTransferCommunity}
+ onFetchChildren={this.props.onFetchChildren}
+ onCommentReport={this.props.onCommentReport}
+ onPurgePerson={this.props.onPurgePerson}
+ onPurgeComment={this.props.onPurgeComment}
+ />
+ ))}
+ </ul>
+ )
);
}
}
import { Component } from "inferno";
import { Helmet } from "inferno-helmet";
import { httpExternalPath } from "../../env";
-import { getLanguages, md } from "../../utils";
+import { i18n } from "../../i18next";
+import { md } from "../../utils";
interface HtmlTagsProps {
title: string;
const url = httpExternalPath(this.props.path);
const desc = this.props.description;
const image = this.props.image;
- const lang = getLanguages()[0];
return (
<Helmet title={this.props.title}>
- <html lang={lang == "browser" ? "en" : lang} />
+ <html lang={i18n.resolvedLanguage} />
{["title", "og:title", "twitter:title"].map(t => (
<meta key={t} property={t} content={this.props.title} />
</div>
<div className="row">
<div className="col-sm-12 d-flex flex-wrap">
- {this.props.buttonTitle && (
- <button
- type="submit"
- className="btn btn-sm btn-secondary mr-2"
- disabled={this.isDisabled}
- >
- {this.state.loading ? (
- <Spinner />
- ) : (
- <span>{this.props.buttonTitle}</span>
- )}
- </button>
- )}
- {this.props.replyType && (
- <button
- type="button"
- className="btn btn-sm btn-secondary mr-2"
- onClick={linkEvent(this, this.handleReplyCancel)}
- >
- {i18n.t("cancel")}
- </button>
- )}
- {this.state.content && (
- <button
- className={`btn btn-sm btn-secondary mr-2 ${
- this.state.previewMode && "active"
- }`}
- onClick={linkEvent(this, this.handlePreviewToggle)}
- >
- {this.state.previewMode ? i18n.t("edit") : i18n.t("preview")}
- </button>
- )}
- {/* A flex expander */}
- <div className="flex-grow-1"></div>
-
- {this.props.showLanguage && (
- <LanguageSelect
- iconVersion
- allLanguages={this.props.allLanguages}
- selectedLanguageIds={
- languageId ? Array.of(languageId) : undefined
- }
- siteLanguages={this.props.siteLanguages}
- onChange={this.handleLanguageChange}
- disabled={this.isDisabled}
- />
- )}
{this.getFormatButton("bold", this.handleInsertBold)}
{this.getFormatButton("italic", this.handleInsertItalic)}
{this.getFormatButton("link", this.handleInsertLink)}
<Icon icon="help-circle" classes="icon-inline" />
</a>
</div>
+
+ <div className="col-sm-12 d-flex align-items-center flex-wrap">
+ {this.props.showLanguage && (
+ <LanguageSelect
+ iconVersion
+ allLanguages={this.props.allLanguages}
+ selectedLanguageIds={
+ languageId ? Array.of(languageId) : undefined
+ }
+ siteLanguages={this.props.siteLanguages}
+ onChange={this.handleLanguageChange}
+ disabled={this.isDisabled}
+ />
+ )}
+
+ {/* A flex expander */}
+ <div className="flex-grow-1"></div>
+
+ {this.props.buttonTitle && (
+ <button
+ type="submit"
+ className="btn btn-sm btn-secondary mr-2"
+ disabled={this.isDisabled}
+ >
+ {this.state.loading ? (
+ <Spinner />
+ ) : (
+ <span>{this.props.buttonTitle}</span>
+ )}
+ </button>
+ )}
+ {this.props.replyType && (
+ <button
+ type="button"
+ className="btn btn-sm btn-secondary mr-2"
+ onClick={linkEvent(this, this.handleReplyCancel)}
+ >
+ {i18n.t("cancel")}
+ </button>
+ )}
+ {this.state.content && (
+ <button
+ className={`btn btn-sm btn-secondary mr-2 ${
+ this.state.previewMode && "active"
+ }`}
+ onClick={linkEvent(this, this.handlePreviewToggle)}
+ >
+ {this.state.previewMode ? i18n.t("edit") : i18n.t("preview")}
+ </button>
+ )}
+ </div>
</div>
</form>
);
import { Component } from "inferno";
import moment from "moment";
import { i18n } from "../../i18next";
-import { capitalizeFirstLetter, getLanguages } from "../../utils";
+import { capitalizeFirstLetter } from "../../utils";
import { Icon } from "./icon";
interface MomentTimeProps {
constructor(props: any, context: any) {
super(props, context);
- const lang = getLanguages();
-
- moment.locale(lang);
+ moment.locale([...i18n.languages]);
}
createdAndModifiedTimes() {
onCancel?(): any;
onUpsertCommunity(form: CreateCommunity | EditCommunity): void;
enableNsfw?: boolean;
+ loading?: boolean;
}
interface CommunityFormState {
posting_restricted_to_mods?: boolean;
discussion_languages?: number[];
};
- loading: boolean;
submitted: boolean;
}
state: CommunityFormState = {
form: {},
- loading: false,
submitted: false,
};
posting_restricted_to_mods: cv.community.posting_restricted_to_mods,
discussion_languages: this.props.communityLanguages,
},
- loading: false,
};
}
}
<form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
<NavigationPrompt
when={
- !this.state.loading &&
+ !this.props.loading &&
!!(
this.state.form.name ||
this.state.form.title ||
<button
type="submit"
className="btn btn-secondary mr-2"
- disabled={this.state.loading}
+ disabled={this.props.loading}
>
- {this.state.loading ? (
+ {this.props.loading ? (
<Spinner />
) : this.props.community_view ? (
capitalizeFirstLetter(i18n.t("save"))
handleCreateCommunitySubmit(i: CommunityForm, event: any) {
event.preventDefault();
- i.setState({ loading: true, submitted: true });
+ i.setState({ submitted: true });
const cForm = i.state.form;
const auth = myAuthRequired();
interface CreateCommunityState {
siteRes: GetSiteResponse;
+ loading: boolean;
}
export class CreateCommunity extends Component<any, CreateCommunityState> {
private isoData = setIsoData(this.context);
state: CreateCommunityState = {
siteRes: this.isoData.site_res,
+ loading: false,
};
constructor(props: any, context: any) {
super(props, context);
allLanguages={this.state.siteRes.all_languages}
siteLanguages={this.state.siteRes.discussion_languages}
communityLanguages={this.state.siteRes.discussion_languages}
+ loading={this.state.loading}
/>
</div>
</div>
}
async handleCommunityCreate(form: CreateCommunityI) {
+ this.setState({ loading: true });
+
const res = await HttpService.client.createCommunity(form);
+
if (res.state === "success") {
const name = res.data.community_view.community.name;
this.props.history.replace(`/c/${name}`);
+ } else {
+ this.setState({ loading: false });
}
}
}
import { Component, InfernoNode, linkEvent } from "inferno";
+import { T } from "inferno-i18next-dess";
import { Link } from "inferno-router";
import {
AddModToCommunity,
{myUSerInfo && this.blockCommunity()}
{!myUSerInfo && (
<div className="alert alert-info" role="alert">
- {i18n.t("community_not_logged_in_alert", {
- community: name,
- instance: hostname(actor_id),
- })}
+ <T
+ i18nKey="community_not_logged_in_alert"
+ interpolation={{
+ community: name,
+ instance: hostname(actor_id),
+ }}
+ >
+ #<code className="user-select-all">#</code>#
+ </T>
</div>
)}
</div>
instancesRes: RequestState<GetFederatedInstancesResponse>;
bannedRes: RequestState<BannedPersonsResponse>;
leaveAdminTeamRes: RequestState<GetSiteResponse>;
+ emojiLoading: boolean;
+ loading: boolean;
themeList: string[];
isIsomorphic: boolean;
}
bannedRes: { state: "empty" },
instancesRes: { state: "empty" },
leaveAdminTeamRes: { state: "empty" },
+ emojiLoading: false,
+ loading: false,
themeList: [],
isIsomorphic: false,
};
bannedRes: { state: "loading" },
instancesRes: { state: "loading" },
themeList: [],
+ loading: true,
});
const auth = myAuthRequired();
bannedRes,
instancesRes,
themeList,
+ loading: false,
});
}
onSaveSite={this.handleEditSite}
siteRes={this.state.siteRes}
themeList={this.state.themeList}
+ loading={this.state.loading}
/>
</div>
<div className="col-12 col-md-6">
this.state.siteRes.site_view.local_site_rate_limit
}
onSaveSite={this.handleEditSite}
+ loading={this.state.loading}
/>
),
},
<TaglineForm
taglines={this.state.siteRes.taglines}
onSaveSite={this.handleEditSite}
+ loading={this.state.loading}
/>
</div>
),
onCreate={this.handleCreateEmoji}
onDelete={this.handleDeleteEmoji}
onEdit={this.handleEditEmoji}
+ loading={this.state.emojiLoading}
/>
</div>
),
}
async handleEditSite(form: EditSite) {
+ this.setState({ loading: true });
+
const editRes = await HttpService.client.editSite(form);
if (editRes.state === "success") {
toast(i18n.t("site_saved"));
}
+ this.setState({ loading: false });
+
return editRes;
}
}
async handleEditEmoji(form: EditCustomEmoji) {
+ this.setState({ emojiLoading: true });
+
const res = await HttpService.client.editCustomEmoji(form);
if (res.state === "success") {
updateEmojiDataModel(res.data.custom_emoji);
}
+
+ this.setState({ emojiLoading: false });
}
async handleDeleteEmoji(form: DeleteCustomEmoji) {
+ this.setState({ emojiLoading: true });
+
const res = await HttpService.client.deleteCustomEmoji(form);
if (res.state === "success") {
removeFromEmojiDataModel(res.data.id);
}
+
+ this.setState({ emojiLoading: false });
}
async handleCreateEmoji(form: CreateCustomEmoji) {
+ this.setState({ emojiLoading: true });
+
const res = await HttpService.client.createCustomEmoji(form);
if (res.state === "success") {
updateEmojiDataModel(res.data.custom_emoji);
}
+
+ this.setState({ emojiLoading: false });
}
}
onEdit(form: EditCustomEmoji): void;
onCreate(form: CreateCustomEmoji): void;
onDelete(form: DeleteCustomEmoji): void;
+ loading: boolean;
}
interface EmojiFormState {
siteRes: GetSiteResponse;
customEmojis: CustomEmojiViewForm[];
- loading: boolean;
page: number;
}
private isoData = setIsoData(this.context);
private itemsPerPage = 15;
private emptyState: EmojiFormState = {
- loading: false,
siteRes: this.isoData.site_res,
customEmojis: this.isoData.site_res.custom_emojis.map((x, index) => ({
id: x.custom_emoji.id,
data-tippy-content={i18n.t("save")}
aria-label={i18n.t("save")}
disabled={
- this.state.loading ||
+ this.props.loading ||
!this.canEdit(cv) ||
!cv.changed
}
)}
data-tippy-content={i18n.t("delete")}
aria-label={i18n.t("delete")}
- disabled={this.state.loading}
+ disabled={this.props.loading}
title={i18n.t("delete")}
>
<Icon
}
async componentDidMount() {
- if (!this.state.isIsomorphic) {
+ if (!this.state.isIsomorphic || !this.isoData.routeData.length) {
await Promise.all([this.fetchTrendingCommunities(), this.fetchData()]);
}
+
setupTippy();
}
}
trendingCommunities(isMobile = false) {
- switch (this.state.trendingCommunitiesRes.state) {
+ switch (this.state.trendingCommunitiesRes?.state) {
case "loading":
return (
<h5>
const siteRes = this.state.siteRes;
if (dataType === DataType.Post) {
- switch (this.state.postsRes.state) {
+ switch (this.state.postsRes?.state) {
case "loading":
return (
<h5>
UserService.Instance.myUserInfo = site.data.my_user;
}
- i.props.history.replace("/");
+ i.props.history.action === "PUSH"
+ ? i.props.history.back()
+ : i.props.history.replace("/");
break;
}
}
handleLoginUsernameChange(i: Login, event: any) {
- i.state.form.username_or_email = event.target.value;
+ i.state.form.username_or_email = event.target.value.trim();
i.setState(i.state);
}
interface RateLimitFormProps {
rateLimits: LocalSiteRateLimit;
onSaveSite(form: EditSite): void;
+ loading: boolean;
}
interface RateLimitFormState {
register?: number;
register_per_second?: number;
};
- loading: boolean;
}
function RateLimits({
}
);
- i.setState({ loading: true });
i.props.onSaveSite(form);
}
RateLimitFormState
> {
state: RateLimitFormState = {
- loading: false,
form: this.props.rateLimits,
};
constructor(props: RateLimitFormProps, context: any) {
<button
type="submit"
className="btn btn-secondary mr-2"
- disabled={this.state.loading}
+ disabled={this.props.loading}
>
- {this.state.loading ? (
+ {this.props.loading ? (
<Spinner />
) : (
capitalizeFirstLetter(i18n.t("save"))
onSaveSite={this.handleCreateSite}
siteRes={this.state.siteRes}
themeList={this.state.themeList}
+ loading={false}
/>
)}
</div>
}
handleRegisterUsernameChange(i: Setup, event: any) {
- i.state.form.username = event.target.value;
+ i.state.form.username = event.target.value.trim();
i.setState(i.state);
}
}
handleRegisterUsernameChange(i: Signup, event: any) {
- i.state.form.username = event.target.value;
+ i.state.form.username = event.target.value.trim();
i.setState(i.state);
}
ListingType,
} from "lemmy-js-client";
import { i18n } from "../../i18next";
-import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
+import {
+ capitalizeFirstLetter,
+ myAuthRequired,
+ validInstanceTLD,
+} from "../../utils";
import { Icon, Spinner } from "../common/icon";
import { ImageUploadForm } from "../common/image-upload-form";
import { LanguageSelect } from "../common/language-select";
themeList?: string[];
onSaveSite(form: EditSite): void;
siteRes: GetSiteResponse;
+ loading: boolean;
}
interface SiteFormState {
siteForm: EditSite;
- loading: boolean;
instance_select: {
allowed_instances: string;
blocked_instances: string;
export class SiteForm extends Component<SiteFormProps, SiteFormState> {
state: SiteFormState = {
siteForm: this.initSiteForm(),
- loading: false,
instance_select: {
allowed_instances: "",
blocked_instances: "",
this.handleDiscussionLanguageChange =
this.handleDiscussionLanguageChange.bind(this);
+
this.handleAddInstance = this.handleAddInstance.bind(this);
+ this.handleRemoveInstance = this.handleRemoveInstance.bind(this);
+
this.handleInstanceEnterPress = this.handleInstanceEnterPress.bind(this);
this.handleInstanceTextChange = this.handleInstanceTextChange.bind(this);
}
- // Necessary to stop the loading
- componentWillReceiveProps() {
- this.setState({ loading: false });
- }
-
render() {
const siteSetup = this.props.siteRes.site_view.local_site.site_setup;
return (
<form onSubmit={linkEvent(this, this.handleSaveSiteSubmit)}>
<NavigationPrompt
when={
- !this.state.loading &&
+ !this.props.loading &&
!siteSetup &&
!!(
this.state.siteForm.name ||
/>
<h5>{`${
siteSetup
- ? capitalizeFirstLetter(i18n.t("save"))
- : capitalizeFirstLetter(i18n.t("name"))
+ ? capitalizeFirstLetter(i18n.t("edit"))
+ : capitalizeFirstLetter(i18n.t("setup"))
} ${i18n.t("your_site")}`}</h5>
<div className="form-group row">
<label className="col-12 col-form-label" htmlFor="create-site-name">
</div>
</div>
<div className="form-group">
- <label>{i18n.t("icon")}</label>
+ <label className="mr-2">{i18n.t("icon")}</label>
<ImageUploadForm
uploadTitle={i18n.t("upload_icon")}
imageSrc={this.state.siteForm.icon}
/>
</div>
<div className="form-group">
- <label>{i18n.t("banner")}</label>
+ <label className="mr-2">{i18n.t("banner")}</label>
<ImageUploadForm
uploadTitle={i18n.t("upload_banner")}
imageSrc={this.state.siteForm.banner}
<button
type="submit"
className="btn btn-secondary mr-2"
- disabled={this.state.loading}
+ disabled={this.props.loading}
>
- {this.state.loading ? (
+ {this.props.loading ? (
<Spinner />
) : siteSetup ? (
capitalizeFirstLetter(i18n.t("save"))
event.preventDefault();
const auth = myAuthRequired();
i.setState(s => ((s.siteForm.auth = auth), s));
- i.setState({ loading: true, submitted: true });
+ i.setState({ submitted: true });
const stateSiteForm = i.state.siteForm;
handleAddInstance(key: InstanceKey) {
const instance = this.state.instance_select[key].trim();
+
+ if (!validInstanceTLD(instance)) {
+ return;
+ }
+
if (!this.state.siteForm[key]?.includes(instance)) {
this.setState(s => ({
...s,
interface TaglineFormProps {
taglines: Array<Tagline>;
onSaveSite(form: EditSite): void;
+ loading: boolean;
}
interface TaglineFormState {
taglines: Array<string>;
- loading: boolean;
editingRow?: number;
}
export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
state: TaglineFormState = {
- loading: false,
editingRow: undefined,
taglines: this.props.taglines.map(x => x.content),
};
return i18n.t("taglines");
}
- componentWillReceiveProps() {
- this.setState({ loading: false });
- }
-
render() {
return (
<div className="col-12">
<button
onClick={linkEvent(this, this.handleSaveClick)}
className="btn btn-secondary mr-2"
- disabled={this.state.loading}
+ disabled={this.props.loading}
>
- {this.state.loading ? (
+ {this.props.loading ? (
<Spinner />
) : (
capitalizeFirstLetter(i18n.t("save"))
}
async handleSaveClick(i: TaglineForm) {
- i.setState({ loading: true });
i.props.onSaveSite({
taglines: i.state.taglines,
auth: myAuthRequired(),
fetchCommunities,
fetchThemeList,
fetchUsers,
- getLanguages,
myAuth,
myAuthRequired,
personToChoice,
}
handleInterfaceLangChange(i: Settings, event: any) {
+ const newLang = event.target.value ?? "browser";
+ i18n.changeLanguage(newLang === "browser" ? navigator.languages : newLang);
+
i.setState(
s => ((s.saveUserSettingsForm.interface_language = event.target.value), s)
);
- i18n.changeLanguage(
- getLanguages(i.state.saveUserSettingsForm.interface_language).at(0)
- );
}
handleDiscussionLanguageChange(val: number[]) {
if (res.state === "success") {
const postId = res.data.post_view.post.id;
this.props.history.replace(`/post/${postId}`);
+ } else {
+ this.setState({
+ loading: false,
+ });
}
}
isImage,
myAuth,
myAuthRequired,
- pictrsDeleteToast,
relTags,
setupTippy,
toast,
suggestedPostsRes: RequestState<SearchResponse>;
metadataRes: RequestState<GetSiteMetadataResponse>;
imageLoading: boolean;
+ imageDeleteUrl: string;
communitySearchLoading: boolean;
communitySearchOptions: Choice[];
previewMode: boolean;
form: {},
loading: false,
imageLoading: false,
+ imageDeleteUrl: "",
communitySearchLoading: false,
previewMode: false,
communitySearchOptions: [],
{url && isImage(url) && (
<img src={url} className="img-fluid" alt="" />
)}
+ {this.state.imageDeleteUrl && (
+ <button
+ className="btn btn-danger btn-sm mt-2"
+ onClick={linkEvent(this, this.handleImageDelete)}
+ aria-label={i18n.t("delete")}
+ data-tippy-content={i18n.t("delete")}
+ >
+ <Icon icon="x" classes="icon-inline mr-1" />
+ {capitalizeFirstLetter(i18n.t("delete"))}
+ </button>
+ )}
{this.props.crossPosts && this.props.crossPosts.length > 0 && (
<>
<div className="my-1 text-muted small font-weight-bold">
}
handlePostUrlChange(i: PostForm, event: any) {
- i.setState(s => ((s.form.url = event.target.value), s));
+ const url = event.target.value;
+
+ i.setState({
+ form: {
+ url,
+ },
+ imageDeleteUrl: "",
+ });
+
i.fetchPageTitle();
}
if (res.state === "success") {
if (res.data.msg === "ok") {
i.state.form.url = res.data.url;
- pictrsDeleteToast(file.name, res.data.delete_url as string);
- i.setState({ imageLoading: false });
+ i.setState({
+ imageLoading: false,
+ imageDeleteUrl: res.data.delete_url as string,
+ });
} else {
toast(JSON.stringify(res), "danger");
}
} else if (res.state === "failed") {
console.error(res.msg);
toast(res.msg, "danger");
+ i.setState({ imageLoading: false });
}
});
}
+ handleImageDelete(i: PostForm) {
+ const { imageDeleteUrl } = i.state;
+
+ fetch(imageDeleteUrl);
+
+ i.setState({
+ imageDeleteUrl: "",
+ imageLoading: false,
+ form: {
+ url: "",
+ },
+ });
+ }
+
handleCommunitySearch = debounce(async (text: string) => {
const { selectedCommunityChoice } = this.props;
this.setState({ communitySearchLoading: true });
search: "",
}}
title={i18n.t("cross_post")}
+ data-tippy-content={i18n.t("cross_post")}
+ aria-label={i18n.t("cross_post")}
>
<Icon icon="copy" inline />
</Link>
}
showMobilePreview() {
- const body = this.postView.post.body;
+ const { body, id } = this.postView.post;
+
return !this.showBody && body ? (
- <div className="md-div mb-1 preview-lines">{body}</div>
+ <Link className="text-body" to={`/post/${id}`}>
+ <div className="md-div mb-1 preview-lines">{body}</div>
+ </Link>
) : (
<></>
);
return (
<div>
{this.posts.length > 0 ? (
- this.posts.map(post_view => (
+ this.posts.map((post_view, idx) => (
<>
<PostListing
post_view={post_view}
onAddAdmin={this.props.onAddAdmin}
onTransferCommunity={this.props.onTransferCommunity}
/>
- <hr className="my-3" />
+ {idx + 1 !== this.posts.length && (
+ <hr className="my-3 border border-primary" />
+ )}
</>
))
) : (
import i18next, { i18nTyped, Resource } from "i18next";
+import { UserService } from "./services";
import { ar } from "./translations/ar";
import { bg } from "./translations/bg";
import { ca } from "./translations/ca";
import { vi } from "./translations/vi";
import { zh } from "./translations/zh";
import { zh_Hant } from "./translations/zh_Hant";
-import { getLanguages } from "./utils";
+import { isBrowser } from "./utils";
export const languages = [
{ resource: ar, code: "ar", name: "العربية" },
return format === "uppercase" ? value.toUpperCase() : value;
}
-i18next.init({
+class LanguageDetector {
+ static readonly type = "languageDetector";
+
+ detect() {
+ const langs: string[] = [];
+
+ const myLang =
+ UserService.Instance.myUserInfo?.local_user_view.local_user
+ .interface_language ?? "browser";
+
+ if (myLang !== "browser") langs.push(myLang);
+
+ if (isBrowser()) langs.push(...navigator.languages);
+
+ return langs;
+ }
+}
+
+i18next.use(LanguageDetector).init({
debug: false,
compatibilityJSON: "v3",
+ supportedLngs: languages.map(l => l.code),
+ nonExplicitSupportedLngs: true,
// load: 'languageOnly',
// initImmediate: false,
- lng: getLanguages()[0],
fallbackLng: "en",
resources,
interpolation: { format },
import tippy from "tippy.js";
import Toastify from "toastify-js";
import { getHttpBase } from "./env";
-import { i18n, languages } from "./i18next";
+import { i18n } from "./i18next";
import { CommentNodeI, DataType, IsoData, VoteType } from "./interfaces";
import { HttpService, UserService } from "./services";
export const markdownFieldCharacterLimit = 50000;
export const maxUploadImages = 20;
export const concurrentImageUpload = 4;
+export const updateUnreadCountsInterval = 30000;
export const relTags = "noopener nofollow";
const imageRegex = /(http)?s?:?(\/\/[^"']*\.(?:jpg|jpeg|gif|png|svg|webp))/;
const videoRegex = /(http)?s?:?(\/\/[^"']*\.(?:mp4|webm))/;
+const tldRegex = /([a-z0-9]+\.)*[a-z0-9]+\.[a-z]+/;
export function isImage(url: string) {
return imageRegex.test(url);
return !!new URL(str);
}
+export function validInstanceTLD(str: string) {
+ return tldRegex.test(str);
+}
+
export function communityRSSUrl(actorId: string, sort: string): string {
const url = new URL(actorId);
return `${url.origin}/feeds${url.pathname}.xml?sort=${sort}`;
} as (...e: T) => R;
}
-export function getLanguages(
- override?: string,
- myUserInfo = UserService.Instance.myUserInfo
-): string[] {
- const myLang = myUserInfo?.local_user_view.local_user.interface_language;
- const lang = override || myLang || "browser";
-
- if (lang == "browser" && isBrowser()) {
- return getBrowserLanguages();
- } else {
- return [lang];
- }
-}
-
-function getBrowserLanguages(): string[] {
- // Intersect lemmy's langs, with the browser langs
- const langs = languages ? languages.map(l => l.code) : ["en"];
-
- // NOTE, mobile browsers seem to be missing this list, so append en
- const allowedLangs = navigator.languages
- .concat("en")
- .filter(v => langs.includes(v));
- return allowedLangs;
-}
-
export async function fetchThemeList(): Promise<string[]> {
return fetch("/css/themelist").then(res => res.json());
}
defs: emojiDefs,
})
.disable("image");
- var defaultRenderer = md.renderer.rules.image;
+ const defaultRenderer = md.renderer.rules.image;
md.renderer.rules.image = function (
tokens: Token[],
idx: number,
const alt_text = item.content;
return `<img class="icon icon-emoji" src="${src}" title="${title}" alt="${alt_text}"/>`;
};
+ md.renderer.rules.table_open = function () {
+ return '<table class="table">';
+ };
}
export function getEmojiMart(
];
function hsl(num: number) {
- return `hsla(${num}, 35%, 50%, 1)`;
+ return `hsla(${num}, 35%, 50%, 0.5)`;
}
export function hostname(url: string): string {
export function initializeSite(site?: GetSiteResponse) {
UserService.Instance.myUserInfo = site?.my_user;
- i18n.changeLanguage(getLanguages()[0]);
+ i18n.changeLanguage();
if (site) {
setupEmojiDataModel(site.custom_emojis ?? []);
}
return myVote == -1 ? 0 : -1;
}
}
+
+function sleep(millis: number): Promise<void> {
+ return new Promise(resolve => setTimeout(resolve, millis));
+}
+
+/**
+ * Polls / repeatedly runs a promise, every X milliseconds
+ */
+export async function poll(promiseFn: any, millis: number) {
+ if (window.document.visibilityState !== "hidden") {
+ await promiseFn();
+ }
+ await sleep(millis);
+ return poll(promiseFn, millis);
+}
projects / lemmy-ui.git / commitdiff