fedi/lemmy-ui
1
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-12-29 12:04:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into breakout-role-utils

Browse source
This commit is contained in:
Alec Armbruster 2023-06-16 17:33:46 -04:00 committed by GitHub
parent 976ed12d07 e0cc7ba3c3
commit 9c37cea106
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 200 additions and 226 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.github/CODEOWNERS vendored
View file

@ -1 +1 @@
* @dessalines @SleeplessOne1917 * @dessalines @SleeplessOne1917 @alectrocute

2
.github/ISSUE_TEMPLATE/BUG_REPORT.yml vendored
View file

@ -21,7 +21,7 @@ body:
- label: Is this only a single bug? Do not put multiple bugs in one issue. - label: Is this only a single bug? Do not put multiple bugs in one issue.
required: true 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. - label: Is this a server side (not related to the UI) issue? Use the [Lemmy back end](https://github.com/LemmyNet/lemmy) repo.
required: true required: false
- type: textarea - type: textarea
id: summary id: summary
attributes: attributes:

2
.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml vendored
View file

@ -19,7 +19,7 @@ body:
- label: Is this only a feature request? Do not put multiple feature requests in one issue. - label: Is this only a feature request? Do not put multiple feature requests in one issue.
required: true 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. - label: Is this a server side (not related to the UI) issue? Use the [Lemmy back end](https://github.com/LemmyNet/lemmy) repo.
required: true required: false
- type: textarea - type: textarea
id: problem id: problem
attributes: attributes:

2
Dockerfile
View file

@ -1,4 +1,4 @@
FROM node:alpine as builder FROM node:20.2-alpine as builder
RUN apk update && apk add curl yarn python3 build-base gcc wget git --no-cache RUN apk update && apk add curl yarn python3 build-base gcc wget git --no-cache
RUN curl -sf https://gobinaries.com/tj/node-prune | sh RUN curl -sf https://gobinaries.com/tj/node-prune | sh

2
dev.dockerfile
View file

@ -1,4 +1,4 @@
FROM node:alpine as builder FROM node:20.2-alpine as builder
RUN apk update && apk add curl yarn python3 build-base gcc wget git --no-cache RUN apk update && apk add curl yarn python3 build-base gcc wget git --no-cache
WORKDIR /usr/src/app WORKDIR /usr/src/app

2
package.json
View file

@ -54,7 +54,7 @@
"inferno-server": "^8.1.1", "inferno-server": "^8.1.1",
"isomorphic-cookie": "^1.2.4", "isomorphic-cookie": "^1.2.4",
"jwt-decode": "^3.1.2", "jwt-decode": "^3.1.2",
"lemmy-js-client": "0.17.2-rc.24", "lemmy-js-client": "0.18.0-rc.1",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"markdown-it": "^13.0.1", "markdown-it": "^13.0.1",
"markdown-it-container": "^3.0.0", "markdown-it-container": "^3.0.0",

24
src/assets/css/main.css
View file

@ -80,30 +80,6 @@
overflow-x: auto; overflow-x: auto;
} }
.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);
}
.vote-bar { .vote-bar {
margin-top: -6.5px; margin-top: -6.5px;
} }

6
src/shared/components/common/html-tags.tsx
View file

@ -2,7 +2,8 @@ import { htmlToText } from "html-to-text";
import { Component } from "inferno"; import { Component } from "inferno";
import { Helmet } from "inferno-helmet"; import { Helmet } from "inferno-helmet";
import { httpExternalPath } from "../../env"; import { httpExternalPath } from "../../env";
import { getLanguages, md } from "../../utils"; import { i18n } from "../../i18next";
import { md } from "../../utils";
interface HtmlTagsProps { interface HtmlTagsProps {
title: string; title: string;
@ -17,11 +18,10 @@ export class HtmlTags extends Component<HtmlTagsProps, any> {
const url = httpExternalPath(this.props.path); const url = httpExternalPath(this.props.path);
const desc = this.props.description; const desc = this.props.description;
const image = this.props.image; const image = this.props.image;
const lang = getLanguages()[0];
return ( return (
<Helmet title={this.props.title}> <Helmet title={this.props.title}>
<html lang={lang == "browser" ? "en" : lang} /> <html lang={i18n.resolvedLanguage} />
{["title", "og:title", "twitter:title"].map(t => ( {["title", "og:title", "twitter:title"].map(t => (
<meta key={t} property={t} content={this.props.title} /> <meta key={t} property={t} content={this.props.title} />

98
src/shared/components/common/markdown-textarea.tsx
View file

@ -183,53 +183,6 @@ export class MarkdownTextArea extends Component<
</div> </div>
<div className="row"> <div className="row">
<div className="col-sm-12 d-flex flex-wrap"> <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("bold", this.handleInsertBold)}
{this.getFormatButton("italic", this.handleInsertItalic)} {this.getFormatButton("italic", this.handleInsertItalic)}
{this.getFormatButton("link", this.handleInsertLink)} {this.getFormatButton("link", this.handleInsertLink)}
@ -282,6 +235,57 @@ export class MarkdownTextArea extends Component<
<Icon icon="help-circle" classes="icon-inline" /> <Icon icon="help-circle" classes="icon-inline" />
</a> </a>
</div> </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> </div>
</form> </form>
); );

6
src/shared/components/common/moment-time.tsx
View file

@ -1,7 +1,7 @@
import { Component } from "inferno"; import { Component } from "inferno";
import moment from "moment"; import moment from "moment";
import { i18n } from "../../i18next"; import { i18n } from "../../i18next";
import { capitalizeFirstLetter, getLanguages } from "../../utils"; import { capitalizeFirstLetter } from "../../utils";
import { Icon } from "./icon"; import { Icon } from "./icon";
interface MomentTimeProps { interface MomentTimeProps {
@ -15,9 +15,7 @@ export class MomentTime extends Component<MomentTimeProps, any> {
constructor(props: any, context: any) { constructor(props: any, context: any) {
super(props, context); super(props, context);
const lang = getLanguages(); moment.locale([...i18n.languages]);
moment.locale(lang);
} }
createdAndModifiedTimes() { createdAndModifiedTimes() {

7
src/shared/components/community/community.tsx
View file

@ -359,7 +359,6 @@ export class Community extends Component<
community_view={res.community_view} community_view={res.community_view}
moderators={res.moderators} moderators={res.moderators}
admins={site_res.admins} admins={site_res.admins}
online={res.online}
enableNsfw={enableNsfw(site_res)} enableNsfw={enableNsfw(site_res)}
editable editable
allLanguages={site_res.all_languages} allLanguages={site_res.all_languages}
@ -646,6 +645,12 @@ export class Community extends Component<
const blockCommunityRes = await HttpService.client.blockCommunity(form); const blockCommunityRes = await HttpService.client.blockCommunity(form);
if (blockCommunityRes.state == "success") { if (blockCommunityRes.state == "success") {
updateCommunityBlock(blockCommunityRes.data); updateCommunityBlock(blockCommunityRes.data);
this.setState(s => {
if (s.communityRes.state == "success") {
s.communityRes.data.community_view.blocked =
blockCommunityRes.data.blocked;
}
});
} }
} }

66
src/shared/components/community/sidebar.tsx
View file

@ -1,4 +1,5 @@
import { Component, InfernoNode, linkEvent } from "inferno"; import { Component, InfernoNode, linkEvent } from "inferno";
import { T } from "inferno-i18next-dess";
import { Link } from "inferno-router"; import { Link } from "inferno-router";
import { import {
AddModToCommunity, AddModToCommunity,
@ -38,7 +39,6 @@ interface SidebarProps {
allLanguages: Language[]; allLanguages: Language[];
siteLanguages: number[]; siteLanguages: number[];
communityLanguages?: number[]; communityLanguages?: number[];
online: number;
enableNsfw?: boolean; enableNsfw?: boolean;
showIcon?: boolean; showIcon?: boolean;
editable?: boolean; editable?: boolean;
@ -63,7 +63,6 @@ interface SidebarState {
removeCommunityLoading: boolean; removeCommunityLoading: boolean;
leaveModTeamLoading: boolean; leaveModTeamLoading: boolean;
followCommunityLoading: boolean; followCommunityLoading: boolean;
blockCommunityLoading: boolean;
purgeCommunityLoading: boolean; purgeCommunityLoading: boolean;
} }
@ -77,7 +76,6 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
removeCommunityLoading: false, removeCommunityLoading: false,
leaveModTeamLoading: false, leaveModTeamLoading: false,
followCommunityLoading: false, followCommunityLoading: false,
blockCommunityLoading: false,
purgeCommunityLoading: false, purgeCommunityLoading: false,
}; };
@ -104,7 +102,6 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
removeCommunityLoading: false, removeCommunityLoading: false,
leaveModTeamLoading: false, leaveModTeamLoading: false,
followCommunityLoading: false, followCommunityLoading: false,
blockCommunityLoading: false,
purgeCommunityLoading: false, purgeCommunityLoading: false,
}); });
} }
@ -144,10 +141,15 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
{myUSerInfo && this.blockCommunity()} {myUSerInfo && this.blockCommunity()}
{!myUSerInfo && ( {!myUSerInfo && (
<div className="alert alert-info" role="alert"> <div className="alert alert-info" role="alert">
{i18n.t("community_not_logged_in_alert", { <T
community: name, i18nKey="community_not_logged_in_alert"
instance: hostname(actor_id), interpolation={{
})} community: name,
instance: hostname(actor_id),
}}
>
#<code className="user-select-all">#</code>#
</T>
</div> </div>
)} )}
</div> </div>
@ -234,12 +236,6 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
const counts = community_view.counts; const counts = community_view.counts;
return ( return (
<ul className="my-1 list-inline"> <ul className="my-1 list-inline">
<li className="list-inline-item badge badge-secondary">
{i18n.t("number_online", {
count: this.props.online,
formattedCount: numToSI(this.props.online),
})}
</li>
<li <li
className="list-inline-item badge badge-secondary pointer" className="list-inline-item badge badge-secondary pointer"
data-tippy-content={i18n.t("active_users_in_the_last_day", { data-tippy-content={i18n.t("active_users_in_the_last_day", {
@ -370,35 +366,18 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
} }
blockCommunity() { blockCommunity() {
const community_view = this.props.community_view; const { subscribed, blocked } = this.props.community_view;
const blocked = this.props.community_view.blocked;
return ( return (
<div className="mb-2"> <div className="mb-2">
{community_view.subscribed == "NotSubscribed" && {subscribed == "NotSubscribed" && (
(blocked ? ( <button
<button className="btn btn-danger btn-block"
className="btn btn-danger btn-block" onClick={linkEvent(this, this.handleBlockCommunity)}
onClick={linkEvent(this, this.handleBlockCommunity)} >
> {i18n.t(blocked ? "unblock_community" : "block_community")}
{this.state.blockCommunityLoading ? ( </button>
<Spinner /> )}
) : (
i18n.t("unblock_community")
)}
</button>
) : (
<button
className="btn btn-danger btn-block"
onClick={linkEvent(this, this.handleBlockCommunity)}
>
{this.state.blockCommunityLoading ? (
<Spinner />
) : (
i18n.t("block_community")
)}
</button>
))}
</div> </div>
); );
} }
@ -662,10 +641,11 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
} }
handleBlockCommunity(i: Sidebar) { handleBlockCommunity(i: Sidebar) {
i.setState({ blockCommunityLoading: true }); const { community, blocked } = i.props.community_view;
i.props.onBlockCommunity({ i.props.onBlockCommunity({
community_id: 0, community_id: community.id,
block: !i.props.community_view.blocked, block: !blocked,
auth: myAuthRequired(), auth: myAuthRequired(),
}); });
} }

26
src/shared/components/home/admin-settings.tsx
View file

@ -39,6 +39,8 @@ interface AdminSettingsState {
instancesRes: RequestState<GetFederatedInstancesResponse>; instancesRes: RequestState<GetFederatedInstancesResponse>;
bannedRes: RequestState<BannedPersonsResponse>; bannedRes: RequestState<BannedPersonsResponse>;
leaveAdminTeamRes: RequestState<GetSiteResponse>; leaveAdminTeamRes: RequestState<GetSiteResponse>;
emojiLoading: boolean;
loading: boolean;
themeList: string[]; themeList: string[];
isIsomorphic: boolean; isIsomorphic: boolean;
} }
@ -52,6 +54,8 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
bannedRes: { state: "empty" }, bannedRes: { state: "empty" },
instancesRes: { state: "empty" }, instancesRes: { state: "empty" },
leaveAdminTeamRes: { state: "empty" }, leaveAdminTeamRes: { state: "empty" },
emojiLoading: false,
loading: false,
themeList: [], themeList: [],
isIsomorphic: false, isIsomorphic: false,
}; };
@ -81,6 +85,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
bannedRes: { state: "loading" }, bannedRes: { state: "loading" },
instancesRes: { state: "loading" }, instancesRes: { state: "loading" },
themeList: [], themeList: [],
loading: true,
}); });
const auth = myAuthRequired(); const auth = myAuthRequired();
@ -95,6 +100,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
bannedRes, bannedRes,
instancesRes, instancesRes,
themeList, themeList,
loading: false,
}); });
} }
@ -156,6 +162,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
onSaveSite={this.handleEditSite} onSaveSite={this.handleEditSite}
siteRes={this.state.siteRes} siteRes={this.state.siteRes}
themeList={this.state.themeList} themeList={this.state.themeList}
loading={this.state.loading}
/> />
</div> </div>
<div className="col-12 col-md-6"> <div className="col-12 col-md-6">
@ -174,6 +181,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
this.state.siteRes.site_view.local_site_rate_limit this.state.siteRes.site_view.local_site_rate_limit
} }
onSaveSite={this.handleEditSite} onSaveSite={this.handleEditSite}
loading={this.state.loading}
/> />
), ),
}, },
@ -185,6 +193,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
<TaglineForm <TaglineForm
taglines={this.state.siteRes.taglines} taglines={this.state.siteRes.taglines}
onSaveSite={this.handleEditSite} onSaveSite={this.handleEditSite}
loading={this.state.loading}
/> />
</div> </div>
), ),
@ -198,6 +207,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
onCreate={this.handleCreateEmoji} onCreate={this.handleCreateEmoji}
onDelete={this.handleDeleteEmoji} onDelete={this.handleDeleteEmoji}
onEdit={this.handleEditEmoji} onEdit={this.handleEditEmoji}
loading={this.state.emojiLoading}
/> />
</div> </div>
), ),
@ -266,6 +276,8 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
} }
async handleEditSite(form: EditSite) { async handleEditSite(form: EditSite) {
this.setState({ loading: true });
const editRes = await HttpService.client.editSite(form); const editRes = await HttpService.client.editSite(form);
if (editRes.state === "success") { if (editRes.state === "success") {
@ -278,6 +290,8 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
toast(i18n.t("site_saved")); toast(i18n.t("site_saved"));
} }
this.setState({ loading: false });
return editRes; return editRes;
} }
@ -300,23 +314,35 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
} }
async handleEditEmoji(form: EditCustomEmoji) { async handleEditEmoji(form: EditCustomEmoji) {
this.setState({ emojiLoading: true });
const res = await HttpService.client.editCustomEmoji(form); const res = await HttpService.client.editCustomEmoji(form);
if (res.state === "success") { if (res.state === "success") {
updateEmojiDataModel(res.data.custom_emoji); updateEmojiDataModel(res.data.custom_emoji);
} }
this.setState({ emojiLoading: false });
} }
async handleDeleteEmoji(form: DeleteCustomEmoji) { async handleDeleteEmoji(form: DeleteCustomEmoji) {
this.setState({ emojiLoading: true });
const res = await HttpService.client.deleteCustomEmoji(form); const res = await HttpService.client.deleteCustomEmoji(form);
if (res.state === "success") { if (res.state === "success") {
removeFromEmojiDataModel(res.data.id); removeFromEmojiDataModel(res.data.id);
} }
this.setState({ emojiLoading: false });
} }
async handleCreateEmoji(form: CreateCustomEmoji) { async handleCreateEmoji(form: CreateCustomEmoji) {
this.setState({ emojiLoading: true });
const res = await HttpService.client.createCustomEmoji(form); const res = await HttpService.client.createCustomEmoji(form);
if (res.state === "success") { if (res.state === "success") {
updateEmojiDataModel(res.data.custom_emoji); updateEmojiDataModel(res.data.custom_emoji);
} }
this.setState({ emojiLoading: false });
} }
} }

7
src/shared/components/home/emojis-form.tsx
View file

@ -23,12 +23,12 @@ interface EmojiFormProps {
onEdit(form: EditCustomEmoji): void; onEdit(form: EditCustomEmoji): void;
onCreate(form: CreateCustomEmoji): void; onCreate(form: CreateCustomEmoji): void;
onDelete(form: DeleteCustomEmoji): void; onDelete(form: DeleteCustomEmoji): void;
loading: boolean;
} }
interface EmojiFormState { interface EmojiFormState {
siteRes: GetSiteResponse; siteRes: GetSiteResponse;
customEmojis: CustomEmojiViewForm[]; customEmojis: CustomEmojiViewForm[];
loading: boolean;
page: number; page: number;
} }
@ -47,7 +47,6 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
private isoData = setIsoData(this.context); private isoData = setIsoData(this.context);
private itemsPerPage = 15; private itemsPerPage = 15;
private emptyState: EmojiFormState = { private emptyState: EmojiFormState = {
loading: false,
siteRes: this.isoData.site_res, siteRes: this.isoData.site_res,
customEmojis: this.isoData.site_res.custom_emojis.map((x, index) => ({ customEmojis: this.isoData.site_res.custom_emojis.map((x, index) => ({
id: x.custom_emoji.id, id: x.custom_emoji.id,
@ -223,7 +222,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
data-tippy-content={i18n.t("save")} data-tippy-content={i18n.t("save")}
aria-label={i18n.t("save")} aria-label={i18n.t("save")}
disabled={ disabled={
this.state.loading || this.props.loading ||
!this.canEdit(cv) || !this.canEdit(cv) ||
!cv.changed !cv.changed
} }
@ -243,7 +242,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
)} )}
data-tippy-content={i18n.t("delete")} data-tippy-content={i18n.t("delete")}
aria-label={i18n.t("delete")} aria-label={i18n.t("delete")}
disabled={this.state.loading} disabled={this.props.loading}
title={i18n.t("delete")} title={i18n.t("delete")}
> >
<Icon <Icon

4
src/shared/components/home/home.tsx
View file

@ -361,7 +361,6 @@ export class Home extends Component<any, HomeState> {
siteRes: { siteRes: {
site_view: { counts, site }, site_view: { counts, site },
admins, admins,
online,
}, },
showSubscribedMobile, showSubscribedMobile,
showTrendingMobile, showTrendingMobile,
@ -393,7 +392,6 @@ export class Home extends Component<any, HomeState> {
site={site} site={site}
admins={admins} admins={admins}
counts={counts} counts={counts}
online={online}
showLocal={showLocal(this.isoData)} showLocal={showLocal(this.isoData)}
/> />
)} )}
@ -417,7 +415,6 @@ export class Home extends Component<any, HomeState> {
siteRes: { siteRes: {
site_view: { counts, site }, site_view: { counts, site },
admins, admins,
online,
}, },
} = this.state; } = this.state;
@ -443,7 +440,6 @@ export class Home extends Component<any, HomeState> {
site={site} site={site}
admins={admins} admins={admins}
counts={counts} counts={counts}
online={online}
showLocal={showLocal(this.isoData)} showLocal={showLocal(this.isoData)}
/> />
{this.hasFollows && ( {this.hasFollows && (

8
src/shared/components/home/rate-limit-form.tsx
View file

@ -24,6 +24,7 @@ interface RateLimitsProps {
interface RateLimitFormProps { interface RateLimitFormProps {
rateLimits: LocalSiteRateLimit; rateLimits: LocalSiteRateLimit;
onSaveSite(form: EditSite): void; onSaveSite(form: EditSite): void;
loading: boolean;
} }
interface RateLimitFormState { interface RateLimitFormState {
@ -41,7 +42,6 @@ interface RateLimitFormState {
register?: number; register?: number;
register_per_second?: number; register_per_second?: number;
}; };
loading: boolean;
} }
function RateLimits({ function RateLimits({
@ -117,7 +117,6 @@ function submitRateLimitForm(i: RateLimitsForm, event: any) {
} }
); );
i.setState({ loading: true });
i.props.onSaveSite(form); i.props.onSaveSite(form);
} }
@ -126,7 +125,6 @@ export default class RateLimitsForm extends Component<
RateLimitFormState RateLimitFormState
> { > {
state: RateLimitFormState = { state: RateLimitFormState = {
loading: false,
form: this.props.rateLimits, form: this.props.rateLimits,
}; };
constructor(props: RateLimitFormProps, context: any) { constructor(props: RateLimitFormProps, context: any) {
@ -164,9 +162,9 @@ export default class RateLimitsForm extends Component<
<button <button
type="submit" type="submit"
className="btn btn-secondary mr-2" className="btn btn-secondary mr-2"
disabled={this.state.loading} disabled={this.props.loading}
> >
{this.state.loading ? ( {this.props.loading ? (
<Spinner /> <Spinner />
) : ( ) : (
capitalizeFirstLetter(i18n.t("save")) capitalizeFirstLetter(i18n.t("save"))

1
src/shared/components/home/setup.tsx
View file

@ -73,6 +73,7 @@ export class Setup extends Component<any, State> {
onSaveSite={this.handleCreateSite} onSaveSite={this.handleCreateSite}
siteRes={this.state.siteRes} siteRes={this.state.siteRes}
themeList={this.state.themeList} themeList={this.state.themeList}
loading={false}
/> />
)} )}
</div> </div>

39
src/shared/components/home/site-form.tsx
View file

@ -12,7 +12,11 @@ import {
ListingType, ListingType,
} from "lemmy-js-client"; } from "lemmy-js-client";
import { i18n } from "../../i18next"; import { i18n } from "../../i18next";
import { capitalizeFirstLetter, myAuthRequired } from "../../utils"; import {
capitalizeFirstLetter,
myAuthRequired,
validInstanceTLD,
} from "../../utils";
import { Icon, Spinner } from "../common/icon"; import { Icon, Spinner } from "../common/icon";
import { ImageUploadForm } from "../common/image-upload-form"; import { ImageUploadForm } from "../common/image-upload-form";
import { LanguageSelect } from "../common/language-select"; import { LanguageSelect } from "../common/language-select";
@ -27,11 +31,11 @@ interface SiteFormProps {
themeList?: string[]; themeList?: string[];
onSaveSite(form: EditSite): void; onSaveSite(form: EditSite): void;
siteRes: GetSiteResponse; siteRes: GetSiteResponse;
loading: boolean;
} }
interface SiteFormState { interface SiteFormState {
siteForm: EditSite; siteForm: EditSite;
loading: boolean;
instance_select: { instance_select: {
allowed_instances: string; allowed_instances: string;
blocked_instances: string; blocked_instances: string;
@ -44,7 +48,6 @@ type InstanceKey = "allowed_instances" | "blocked_instances";
export class SiteForm extends Component<SiteFormProps, SiteFormState> { export class SiteForm extends Component<SiteFormProps, SiteFormState> {
state: SiteFormState = { state: SiteFormState = {
siteForm: this.initSiteForm(), siteForm: this.initSiteForm(),
loading: false,
instance_select: { instance_select: {
allowed_instances: "", allowed_instances: "",
blocked_instances: "", blocked_instances: "",
@ -78,7 +81,6 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
slur_filter_regex: ls.slur_filter_regex, slur_filter_regex: ls.slur_filter_regex,
actor_name_max_length: ls.actor_name_max_length, actor_name_max_length: ls.actor_name_max_length,
federation_enabled: ls.federation_enabled, federation_enabled: ls.federation_enabled,
federation_debug: ls.federation_debug,
federation_worker_count: ls.federation_worker_count, federation_worker_count: ls.federation_worker_count,
captcha_enabled: ls.captcha_enabled, captcha_enabled: ls.captcha_enabled,
captcha_difficulty: ls.captcha_difficulty, captcha_difficulty: ls.captcha_difficulty,
@ -107,23 +109,21 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
this.handleDiscussionLanguageChange = this.handleDiscussionLanguageChange =
this.handleDiscussionLanguageChange.bind(this); this.handleDiscussionLanguageChange.bind(this);
this.handleAddInstance = this.handleAddInstance.bind(this); this.handleAddInstance = this.handleAddInstance.bind(this);
this.handleRemoveInstance = this.handleRemoveInstance.bind(this);
this.handleInstanceEnterPress = this.handleInstanceEnterPress.bind(this); this.handleInstanceEnterPress = this.handleInstanceEnterPress.bind(this);
this.handleInstanceTextChange = this.handleInstanceTextChange.bind(this); this.handleInstanceTextChange = this.handleInstanceTextChange.bind(this);
} }
// Necessary to stop the loading
componentWillReceiveProps() {
this.setState({ loading: false });
}
render() { render() {
const siteSetup = this.props.siteRes.site_view.local_site.site_setup; const siteSetup = this.props.siteRes.site_view.local_site.site_setup;
return ( return (
<form onSubmit={linkEvent(this, this.handleSaveSiteSubmit)}> <form onSubmit={linkEvent(this, this.handleSaveSiteSubmit)}>
<NavigationPrompt <NavigationPrompt
when={ when={
!this.state.loading && !this.props.loading &&
!siteSetup && !siteSetup &&
!!( !!(
this.state.siteForm.name || this.state.siteForm.name ||
@ -136,8 +136,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
/> />
<h5>{`${ <h5>{`${
siteSetup siteSetup
? capitalizeFirstLetter(i18n.t("save")) ? capitalizeFirstLetter(i18n.t("edit"))
: capitalizeFirstLetter(i18n.t("name")) : capitalizeFirstLetter(i18n.t("setup"))
} ${i18n.t("your_site")}`}</h5> } ${i18n.t("your_site")}`}</h5>
<div className="form-group row"> <div className="form-group row">
<label className="col-12 col-form-label" htmlFor="create-site-name"> <label className="col-12 col-form-label" htmlFor="create-site-name">
@ -157,7 +157,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
</div> </div>
</div> </div>
<div className="form-group"> <div className="form-group">
<label>{i18n.t("icon")}</label> <label className="mr-2">{i18n.t("icon")}</label>
<ImageUploadForm <ImageUploadForm
uploadTitle={i18n.t("upload_icon")} uploadTitle={i18n.t("upload_icon")}
imageSrc={this.state.siteForm.icon} imageSrc={this.state.siteForm.icon}
@ -167,7 +167,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
/> />
</div> </div>
<div className="form-group"> <div className="form-group">
<label>{i18n.t("banner")}</label> <label className="mr-2">{i18n.t("banner")}</label>
<ImageUploadForm <ImageUploadForm
uploadTitle={i18n.t("upload_banner")} uploadTitle={i18n.t("upload_banner")}
imageSrc={this.state.siteForm.banner} imageSrc={this.state.siteForm.banner}
@ -609,9 +609,9 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
<button <button
type="submit" type="submit"
className="btn btn-secondary mr-2" className="btn btn-secondary mr-2"
disabled={this.state.loading} disabled={this.props.loading}
> >
{this.state.loading ? ( {this.props.loading ? (
<Spinner /> <Spinner />
) : siteSetup ? ( ) : siteSetup ? (
capitalizeFirstLetter(i18n.t("save")) capitalizeFirstLetter(i18n.t("save"))
@ -717,7 +717,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
event.preventDefault(); event.preventDefault();
const auth = myAuthRequired(); const auth = myAuthRequired();
i.setState(s => ((s.siteForm.auth = auth), s)); i.setState(s => ((s.siteForm.auth = auth), s));
i.setState({ loading: true, submitted: true }); i.setState({ submitted: true });
const stateSiteForm = i.state.siteForm; const stateSiteForm = i.state.siteForm;
@ -780,6 +780,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
handleAddInstance(key: InstanceKey) { handleAddInstance(key: InstanceKey) {
const instance = this.state.instance_select[key].trim(); const instance = this.state.instance_select[key].trim();
if (!validInstanceTLD(instance)) {
return;
}
if (!this.state.siteForm[key]?.includes(instance)) { if (!this.state.siteForm[key]?.includes(instance)) {
this.setState(s => ({ this.setState(s => ({
...s, ...s,

8
src/shared/components/home/site-sidebar.tsx
View file

@ -12,7 +12,6 @@ interface SiteSidebarProps {
showLocal: boolean; showLocal: boolean;
counts?: SiteAggregates; counts?: SiteAggregates;
admins?: PersonView[]; admins?: PersonView[];
online?: number;
} }
interface SiteSidebarState { interface SiteSidebarState {
@ -99,15 +98,8 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
badges(siteAggregates: SiteAggregates) { badges(siteAggregates: SiteAggregates) {
const counts = siteAggregates; const counts = siteAggregates;
const online = this.props.online ?? 1;
return ( return (
<ul className="my-2 list-inline"> <ul className="my-2 list-inline">
<li className="list-inline-item badge badge-secondary">
{i18n.t("number_online", {
count: online,
formattedCount: numToSI(online),
})}
</li>
<li <li
className="list-inline-item badge badge-secondary pointer" className="list-inline-item badge badge-secondary pointer"
data-tippy-content={i18n.t("active_users_in_the_last_day", { data-tippy-content={i18n.t("active_users_in_the_last_day", {

12
src/shared/components/home/tagline-form.tsx
View file

@ -9,17 +9,16 @@ import { MarkdownTextArea } from "../common/markdown-textarea";
interface TaglineFormProps { interface TaglineFormProps {
taglines: Array<Tagline>; taglines: Array<Tagline>;
onSaveSite(form: EditSite): void; onSaveSite(form: EditSite): void;
loading: boolean;
} }
interface TaglineFormState { interface TaglineFormState {
taglines: Array<string>; taglines: Array<string>;
loading: boolean;
editingRow?: number; editingRow?: number;
} }
export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> { export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
state: TaglineFormState = { state: TaglineFormState = {
loading: false,
editingRow: undefined, editingRow: undefined,
taglines: this.props.taglines.map(x => x.content), taglines: this.props.taglines.map(x => x.content),
}; };
@ -30,10 +29,6 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
return i18n.t("taglines"); return i18n.t("taglines");
} }
componentWillReceiveProps() {
this.setState({ loading: false });
}
render() { render() {
return ( return (
<div className="col-12"> <div className="col-12">
@ -110,9 +105,9 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
<button <button
onClick={linkEvent(this, this.handleSaveClick)} onClick={linkEvent(this, this.handleSaveClick)}
className="btn btn-secondary mr-2" className="btn btn-secondary mr-2"
disabled={this.state.loading} disabled={this.props.loading}
> >
{this.state.loading ? ( {this.props.loading ? (
<Spinner /> <Spinner />
) : ( ) : (
capitalizeFirstLetter(i18n.t("save")) capitalizeFirstLetter(i18n.t("save"))
@ -153,7 +148,6 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
} }
async handleSaveClick(i: TaglineForm) { async handleSaveClick(i: TaglineForm) {
i.setState({ loading: true });
i.props.onSaveSite({ i.props.onSaveSite({
taglines: i.state.taglines, taglines: i.state.taglines,
auth: myAuthRequired(), auth: myAuthRequired(),

7
src/shared/components/person/settings.tsx
View file

@ -25,7 +25,6 @@ import {
fetchCommunities, fetchCommunities,
fetchThemeList, fetchThemeList,
fetchUsers, fetchUsers,
getLanguages,
myAuth, myAuth,
myAuthRequired, myAuthRequired,
personToChoice, personToChoice,
@ -1058,12 +1057,12 @@ export class Settings extends Component<any, SettingsState> {
} }
handleInterfaceLangChange(i: Settings, event: any) { handleInterfaceLangChange(i: Settings, event: any) {
const newLang = event.target.value ?? "browser";
i18n.changeLanguage(newLang === "browser" ? navigator.languages : newLang);
i.setState( i.setState(
s => ((s.saveUserSettingsForm.interface_language = event.target.value), s) s => ((s.saveUserSettingsForm.interface_language = event.target.value), s)
); );
i18n.changeLanguage(
getLanguages(i.state.saveUserSettingsForm.interface_language).at(0)
);
} }
handleDiscussionLanguageChange(val: number[]) { handleDiscussionLanguageChange(val: number[]) {

4
src/shared/components/post/create-post.tsx
View file

@ -224,6 +224,10 @@ export class CreatePost extends Component<
if (res.state === "success") { if (res.state === "success") {
const postId = res.data.post_view.post.id; const postId = res.data.post_view.post.id;
this.props.history.replace(`/post/${postId}`); this.props.history.replace(`/post/${postId}`);
} else {
this.setState({
loading: false,
});
} }
} }

18
src/shared/components/post/post.tsx
View file

@ -552,7 +552,6 @@ export class Post extends Component<any, PostState> {
community_view={res.data.community_view} community_view={res.data.community_view}
moderators={res.data.moderators} moderators={res.data.moderators}
admins={this.state.siteRes.admins} admins={this.state.siteRes.admins}
online={res.data.online}
enableNsfw={enableNsfw(this.state.siteRes)} enableNsfw={enableNsfw(this.state.siteRes)}
showIcon showIcon
allLanguages={this.state.siteRes.all_languages} allLanguages={this.state.siteRes.all_languages}
@ -729,19 +728,14 @@ export class Post extends Component<any, PostState> {
async handleBlockCommunity(form: BlockCommunity) { async handleBlockCommunity(form: BlockCommunity) {
const blockCommunityRes = await HttpService.client.blockCommunity(form); const blockCommunityRes = await HttpService.client.blockCommunity(form);
// TODO Probably isn't necessary
this.setState(s => {
if (
s.postRes.state == "success" &&
blockCommunityRes.state == "success"
) {
s.postRes.data.community_view = blockCommunityRes.data.community_view;
}
return s;
});
if (blockCommunityRes.state == "success") { if (blockCommunityRes.state == "success") {
updateCommunityBlock(blockCommunityRes.data); updateCommunityBlock(blockCommunityRes.data);
this.setState(s => {
if (s.postRes.state == "success") {
s.postRes.data.community_view.blocked =
blockCommunityRes.data.blocked;
}
});
} }
} }

26
src/shared/i18next.ts
View file

@ -1,4 +1,5 @@
import i18next, { i18nTyped, Resource } from "i18next"; import i18next, { i18nTyped, Resource } from "i18next";
import { UserService } from "./services";
import { ar } from "./translations/ar"; import { ar } from "./translations/ar";
import { bg } from "./translations/bg"; import { bg } from "./translations/bg";
import { ca } from "./translations/ca"; import { ca } from "./translations/ca";
@ -30,7 +31,7 @@ import { sv } from "./translations/sv";
import { vi } from "./translations/vi"; import { vi } from "./translations/vi";
import { zh } from "./translations/zh"; import { zh } from "./translations/zh";
import { zh_Hant } from "./translations/zh_Hant"; import { zh_Hant } from "./translations/zh_Hant";
import { getLanguages } from "./utils"; import { isBrowser } from "./utils";
export const languages = [ export const languages = [
{ resource: ar, code: "ar", name: "العربية" }, { resource: ar, code: "ar", name: "العربية" },
@ -73,12 +74,31 @@ function format(value: any, format: any): any {
return format === "uppercase" ? value.toUpperCase() : value; 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, debug: false,
compatibilityJSON: "v3", compatibilityJSON: "v3",
supportedLngs: languages.map(l => l.code),
nonExplicitSupportedLngs: true,
// load: 'languageOnly', // load: 'languageOnly',
// initImmediate: false, // initImmediate: false,
lng: getLanguages()[0],
fallbackLng: "en", fallbackLng: "en",
resources, resources,
interpolation: { format }, interpolation: { format },

39
src/shared/utils.ts
View file

@ -40,7 +40,7 @@ import moment from "moment";
import tippy from "tippy.js"; import tippy from "tippy.js";
import Toastify from "toastify-js"; import Toastify from "toastify-js";
import { getHttpBase } from "./env"; import { getHttpBase } from "./env";
import { i18n, languages } from "./i18next"; import { i18n } from "./i18next";
import { CommentNodeI, DataType, IsoData, VoteType } from "./interfaces"; import { CommentNodeI, DataType, IsoData, VoteType } from "./interfaces";
import { HttpService, UserService } from "./services"; import { HttpService, UserService } from "./services";
import { isBrowser } from "./utils/browser/is-browser"; import { isBrowser } from "./utils/browser/is-browser";
@ -230,6 +230,7 @@ export function futureDaysToUnixTime(days?: number): number | undefined {
const imageRegex = /(http)?s?:?(\/\/[^"']*\.(?:jpg|jpeg|gif|png|svg|webp))/; const imageRegex = /(http)?s?:?(\/\/[^"']*\.(?:jpg|jpeg|gif|png|svg|webp))/;
const videoRegex = /(http)?s?:?(\/\/[^"']*\.(?:mp4|webm))/; const videoRegex = /(http)?s?:?(\/\/[^"']*\.(?:mp4|webm))/;
const tldRegex = /([a-z0-9]+\.)*[a-z0-9]+\.[a-z]+/;
export function isImage(url: string) { export function isImage(url: string) {
return imageRegex.test(url); return imageRegex.test(url);
@ -243,6 +244,10 @@ export function validURL(str: string) {
return !!new URL(str); return !!new URL(str);
} }
export function validInstanceTLD(str: string) {
return tldRegex.test(str);
}
export function communityRSSUrl(actorId: string, sort: string): string { export function communityRSSUrl(actorId: string, sort: string): string {
const url = new URL(actorId); const url = new URL(actorId);
return `${url.origin}/feeds${url.pathname}.xml?sort=${sort}`; return `${url.origin}/feeds${url.pathname}.xml?sort=${sort}`;
@ -313,31 +318,6 @@ export function debounce<T extends any[], R>(
} as (...e: T) => R; } 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[]> { export async function fetchThemeList(): Promise<string[]> {
return fetch("/css/themelist").then(res => res.json()); return fetch("/css/themelist").then(res => res.json());
} }
@ -653,7 +633,7 @@ function setupMarkdown() {
defs: emojiDefs, defs: emojiDefs,
}) })
.disable("image"); .disable("image");
var defaultRenderer = md.renderer.rules.image; const defaultRenderer = md.renderer.rules.image;
md.renderer.rules.image = function ( md.renderer.rules.image = function (
tokens: Token[], tokens: Token[],
idx: number, idx: number,
@ -672,6 +652,9 @@ function setupMarkdown() {
const alt_text = item.content; const alt_text = item.content;
return `<img class="icon icon-emoji" src="${src}" title="${title}" alt="${alt_text}"/>`; 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( export function getEmojiMart(
@ -1183,7 +1166,7 @@ export function personSelectName({
export function initializeSite(site?: GetSiteResponse) { export function initializeSite(site?: GetSiteResponse) {
UserService.Instance.myUserInfo = site?.my_user; UserService.Instance.myUserInfo = site?.my_user;
i18n.changeLanguage(getLanguages()[0]); i18n.changeLanguage();
if (site) { if (site) {
setupEmojiDataModel(site.custom_emojis ?? []); setupEmojiDataModel(site.custom_emojis ?? []);
} }

8
yarn.lock
View file

@ -5615,10 +5615,10 @@ leac@^0.6.0:
resolved "https://registry.yarnpkg.com/leac/-/leac-0.6.0.tgz#dcf136e382e666bd2475f44a1096061b70dc0912" resolved "https://registry.yarnpkg.com/leac/-/leac-0.6.0.tgz#dcf136e382e666bd2475f44a1096061b70dc0912"
integrity sha512-y+SqErxb8h7nE/fiEX07jsbuhrpO9lL8eca7/Y1nuWV2moNlXhyd59iDGcRf6moVyDMbmTNzL40SUyrFU/yDpg== integrity sha512-y+SqErxb8h7nE/fiEX07jsbuhrpO9lL8eca7/Y1nuWV2moNlXhyd59iDGcRf6moVyDMbmTNzL40SUyrFU/yDpg==
lemmy-js-client@0.17.2-rc.24: lemmy-js-client@0.18.0-rc.1:
version "0.17.2-rc.24" version "0.18.0-rc.1"
resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.17.2-rc.24.tgz#3b09233a6d89286e559be2e840d81c0c549562ad" resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.18.0-rc.1.tgz#fd0c88810572d90413696011ebaed19e3b8162d8"
integrity sha512-aSHz7UTcwnwnNd9poY8tEXP7RA9ieZm9MAfSljcbCNU5ds9CASXYNodmraUVJiqCmT4HWnj7IeVmBC9r7nTHnw== integrity sha512-lQe443Nr5UCSoY+IxmT7mBe0IRF6EAZ/4PJSRoPSL+U8A+egMMBPbuxnisHzLsC+eDOWRUIgOqZlwlaRnbmuig==
dependencies: dependencies:
cross-fetch "^3.1.5" cross-fetch "^3.1.5"
form-data "^4.0.0" form-data "^4.0.0"