mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-23 04:41:14 +00:00
Merge branch 'main' into issue-template-checkboxes
This commit is contained in:
commit
f3f634e8e0
66 changed files with 9321 additions and 8293 deletions
|
@ -18,6 +18,7 @@
|
||||||
"@typescript-eslint/ban-ts-comment": 0,
|
"@typescript-eslint/ban-ts-comment": 0,
|
||||||
"@typescript-eslint/no-explicit-any": 0,
|
"@typescript-eslint/no-explicit-any": 0,
|
||||||
"@typescript-eslint/explicit-module-boundary-types": 0,
|
"@typescript-eslint/explicit-module-boundary-types": 0,
|
||||||
|
"@typescript-eslint/no-empty-function": 0,
|
||||||
"arrow-body-style": 0,
|
"arrow-body-style": 0,
|
||||||
"curly": 0,
|
"curly": 0,
|
||||||
"eol-last": 0,
|
"eol-last": 0,
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
pipeline:
|
pipeline:
|
||||||
fetch_git_submodules:
|
fetch_git_submodules:
|
||||||
image: node:14-alpine
|
image: node:alpine
|
||||||
commands:
|
commands:
|
||||||
- apk add git
|
- apk add git
|
||||||
- git submodule init
|
- git submodule init
|
||||||
|
@ -8,93 +8,27 @@ pipeline:
|
||||||
# - git fetch --tags
|
# - git fetch --tags
|
||||||
|
|
||||||
yarn:
|
yarn:
|
||||||
image: node:14-alpine
|
image: node:alpine
|
||||||
commands:
|
commands:
|
||||||
- yarn
|
- yarn
|
||||||
|
|
||||||
yarn_lint:
|
yarn_lint:
|
||||||
image: node:14-alpine
|
image: node:alpine
|
||||||
commands:
|
commands:
|
||||||
- yarn lint
|
- yarn lint
|
||||||
|
|
||||||
yarn_build_dev:
|
yarn_build_dev:
|
||||||
image: node:14-alpine
|
image: node:alpine
|
||||||
commands:
|
commands:
|
||||||
- yarn build:dev
|
- yarn build:dev
|
||||||
|
|
||||||
nightly_build:
|
publish_release_docker:
|
||||||
image: plugins/docker
|
image: woodpeckerci/plugin-docker-buildx
|
||||||
|
secrets: [docker_username, docker_password]
|
||||||
settings:
|
settings:
|
||||||
dockerfile: Dockerfile
|
|
||||||
repo: dessalines/lemmy-ui
|
repo: dessalines/lemmy-ui
|
||||||
username:
|
|
||||||
from_secret: docker_username
|
|
||||||
password:
|
|
||||||
from_secret: docker_password
|
|
||||||
tags:
|
|
||||||
- dev
|
|
||||||
when:
|
|
||||||
event:
|
|
||||||
- cron
|
|
||||||
|
|
||||||
publish_release_docker_image_amd:
|
|
||||||
image: plugins/docker
|
|
||||||
settings:
|
|
||||||
dockerfile: Dockerfile
|
dockerfile: Dockerfile
|
||||||
repo: dessalines/lemmy-ui
|
platforms: linux/amd64
|
||||||
auto_tag: true
|
auto_tag: true
|
||||||
auto_tag_suffix: linux-amd64
|
|
||||||
username:
|
|
||||||
from_secret: docker_username
|
|
||||||
password:
|
|
||||||
from_secret: docker_password
|
|
||||||
when:
|
|
||||||
event: tag
|
|
||||||
platform: linux/arm64
|
|
||||||
|
|
||||||
publish_release_docker_image_arm:
|
|
||||||
image: plugins/docker
|
|
||||||
settings:
|
|
||||||
dockerfile: Dockerfile
|
|
||||||
repo: dessalines/lemmy-ui
|
|
||||||
auto_tag: true
|
|
||||||
auto_tag_suffix: linux-arm64
|
|
||||||
username:
|
|
||||||
from_secret: docker_username
|
|
||||||
password:
|
|
||||||
from_secret: docker_password
|
|
||||||
when:
|
|
||||||
event: tag
|
|
||||||
platform: linux/amd64
|
|
||||||
|
|
||||||
publish_release_docker_manifest:
|
|
||||||
image: plugins/manifest
|
|
||||||
settings:
|
|
||||||
username:
|
|
||||||
from_secret: docker_username
|
|
||||||
password:
|
|
||||||
from_secret: docker_password
|
|
||||||
target: "dessalines/lemmy-ui:${CI_COMMIT_TAG}"
|
|
||||||
template: "dessalines/lemmy-ui:${CI_COMMIT_TAG}-OS-ARCH"
|
|
||||||
platforms:
|
|
||||||
- linux/amd64
|
|
||||||
- linux/arm64
|
|
||||||
ignore_missing: true
|
|
||||||
when:
|
|
||||||
event: tag
|
|
||||||
|
|
||||||
publish_latest_release_docker_manifest:
|
|
||||||
image: plugins/manifest
|
|
||||||
settings:
|
|
||||||
username:
|
|
||||||
from_secret: docker_username
|
|
||||||
password:
|
|
||||||
from_secret: docker_password
|
|
||||||
target: "dessalines/lemmy-ui:latest"
|
|
||||||
template: "dessalines/lemmy-ui:${CI_COMMIT_TAG}-OS-ARCH"
|
|
||||||
platforms:
|
|
||||||
- linux/amd64
|
|
||||||
- linux/arm64
|
|
||||||
ignore_missing: true
|
|
||||||
when:
|
when:
|
||||||
event: tag
|
event: tag
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
# lemmy-ui
|
# Lemmy-UI
|
||||||
|
|
||||||
The official web app for [Lemmy](https://github.com/LemmyNet/lemmy), written in inferno.
|
The official web app for [Lemmy](https://github.com/LemmyNet/lemmy), written in inferno.
|
||||||
|
|
||||||
|
@ -13,7 +13,6 @@ The following environment variables can be used to configure lemmy-ui:
|
||||||
| `LEMMY_UI_HOST` | `string` | `0.0.0.0:1234` | The IP / port that the lemmy-ui isomorphic node server is hosted at. |
|
| `LEMMY_UI_HOST` | `string` | `0.0.0.0:1234` | The IP / port that the lemmy-ui isomorphic node server is hosted at. |
|
||||||
| `LEMMY_UI_LEMMY_INTERNAL_HOST` | `string` | `0.0.0.0:8536` | The internal IP / port that lemmy is hosted at. Often `lemmy:8536` if using docker. |
|
| `LEMMY_UI_LEMMY_INTERNAL_HOST` | `string` | `0.0.0.0:8536` | The internal IP / port that lemmy is hosted at. Often `lemmy:8536` if using docker. |
|
||||||
| `LEMMY_UI_LEMMY_EXTERNAL_HOST` | `string` | `0.0.0.0:8536` | The external IP / port that lemmy is hosted at. Often `DOMAIN.TLD`. |
|
| `LEMMY_UI_LEMMY_EXTERNAL_HOST` | `string` | `0.0.0.0:8536` | The external IP / port that lemmy is hosted at. Often `DOMAIN.TLD`. |
|
||||||
| `LEMMY_UI_LEMMY_WS_HOST` | `string` | `0.0.0.0:8536` | An alternate location for lemmy's websocket address. Not usually necessary. |
|
|
||||||
| `LEMMY_UI_HTTPS` | `bool` | `false` | Whether to use https. |
|
| `LEMMY_UI_HTTPS` | `bool` | `false` | Whether to use https. |
|
||||||
| `LEMMY_UI_EXTRA_THEMES_FOLDER` | `string` | `./extra_themes` | A location for additional lemmy css themes. |
|
| `LEMMY_UI_EXTRA_THEMES_FOLDER` | `string` | `./extra_themes` | A location for additional lemmy css themes. |
|
||||||
| `LEMMY_UI_DEBUG` | `bool` | `false` | Loads the [Eruda](https://github.com/liriliri/eruda) debugging utility. |
|
| `LEMMY_UI_DEBUG` | `bool` | `false` | Loads the [Eruda](https://github.com/liriliri/eruda) debugging utility. |
|
||||||
|
|
|
@ -4,6 +4,7 @@ set -e
|
||||||
new_tag="$1"
|
new_tag="$1"
|
||||||
|
|
||||||
# Old deploy
|
# Old deploy
|
||||||
|
# sudo docker build . --tag dessalines/lemmy-ui:$new_tag --platform=linux/amd64 --push
|
||||||
# sudo docker build . --tag dessalines/lemmy-ui:$new_tag --platform=linux/amd64
|
# sudo docker build . --tag dessalines/lemmy-ui:$new_tag --platform=linux/amd64
|
||||||
# sudo docker push dessalines/lemmy-ui:$new_tag
|
# sudo docker push dessalines/lemmy-ui:$new_tag
|
||||||
|
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
Subproject commit ddf0d3a4dcfba5eddbcdb702db2470b52abb3815
|
Subproject commit f45ddff206adb52ab0ac7555bf14978edac5d2f2
|
22
package.json
22
package.json
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "lemmy-ui",
|
"name": "lemmy-ui",
|
||||||
"version": "0.17.1",
|
"version": "0.18.0-beta.6",
|
||||||
"description": "An isomorphic UI for lemmy",
|
"description": "An isomorphic UI for lemmy",
|
||||||
"repository": "https://github.com/LemmyNet/lemmy-ui",
|
"repository": "https://github.com/LemmyNet/lemmy-ui",
|
||||||
"license": "AGPL-3.0",
|
"license": "AGPL-3.0",
|
||||||
|
@ -17,16 +17,9 @@
|
||||||
"start": "yarn build:dev --watch"
|
"start": "yarn build:dev --watch"
|
||||||
},
|
},
|
||||||
"lint-staged": {
|
"lint-staged": {
|
||||||
"*.{ts,tsx,js}": [
|
"*.{ts,tsx,js}": ["prettier --write", "eslint --fix"],
|
||||||
"prettier --write",
|
"*.{css, scss}": ["prettier --write"],
|
||||||
"eslint --fix"
|
"package.json": ["sortpack"]
|
||||||
],
|
|
||||||
"*.{css, scss}": [
|
|
||||||
"prettier --write"
|
|
||||||
],
|
|
||||||
"package.json": [
|
|
||||||
"sortpack"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/plugin-proposal-decorators": "^7.21.0",
|
"@babel/plugin-proposal-decorators": "^7.21.0",
|
||||||
|
@ -49,6 +42,7 @@
|
||||||
"emoji-mart": "^5.4.0",
|
"emoji-mart": "^5.4.0",
|
||||||
"emoji-short-name": "^2.0.0",
|
"emoji-short-name": "^2.0.0",
|
||||||
"express": "~4.18.2",
|
"express": "~4.18.2",
|
||||||
|
"history": "^5.3.0",
|
||||||
"html-to-text": "^9.0.5",
|
"html-to-text": "^9.0.5",
|
||||||
"i18next": "^22.4.15",
|
"i18next": "^22.4.15",
|
||||||
"inferno": "^8.1.1",
|
"inferno": "^8.1.1",
|
||||||
|
@ -60,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.17",
|
"lemmy-js-client": "0.17.2-rc.24",
|
||||||
"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",
|
||||||
|
@ -73,7 +67,6 @@
|
||||||
"moment": "^2.29.4",
|
"moment": "^2.29.4",
|
||||||
"register-service-worker": "^1.7.2",
|
"register-service-worker": "^1.7.2",
|
||||||
"run-node-webpack-plugin": "^1.3.0",
|
"run-node-webpack-plugin": "^1.3.0",
|
||||||
"rxjs": "^7.8.1",
|
|
||||||
"sanitize-html": "^2.10.0",
|
"sanitize-html": "^2.10.0",
|
||||||
"sass": "^1.62.1",
|
"sass": "^1.62.1",
|
||||||
"sass-loader": "^13.2.2",
|
"sass-loader": "^13.2.2",
|
||||||
|
@ -85,8 +78,7 @@
|
||||||
"tributejs": "^5.1.3",
|
"tributejs": "^5.1.3",
|
||||||
"webpack": "5.82.1",
|
"webpack": "5.82.1",
|
||||||
"webpack-cli": "^5.1.1",
|
"webpack-cli": "^5.1.1",
|
||||||
"webpack-node-externals": "^3.0.0",
|
"webpack-node-externals": "^3.0.0"
|
||||||
"websocket-ts": "^1.1.1"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.21.8",
|
"@babel/core": "^7.21.8",
|
||||||
|
|
|
@ -1,18 +1,19 @@
|
||||||
import { hydrate } from "inferno-hydrate";
|
import { hydrate } from "inferno-hydrate";
|
||||||
import { BrowserRouter } from "inferno-router";
|
import { Router } from "inferno-router";
|
||||||
import { App } from "../shared/components/app/app";
|
import { App } from "../shared/components/app/app";
|
||||||
import { initializeSite } from "../shared/utils";
|
import { initializeSite } from "../shared/utils";
|
||||||
|
|
||||||
import "bootstrap/js/dist/collapse";
|
import "bootstrap/js/dist/collapse";
|
||||||
import "bootstrap/js/dist/dropdown";
|
import "bootstrap/js/dist/dropdown";
|
||||||
|
import { HistoryService } from "../shared/services/HistoryService";
|
||||||
|
|
||||||
const site = window.isoData.site_res;
|
const site = window.isoData.site_res;
|
||||||
initializeSite(site);
|
initializeSite(site);
|
||||||
|
|
||||||
const wrapper = (
|
const wrapper = (
|
||||||
<BrowserRouter>
|
<Router history={HistoryService.history}>
|
||||||
<App />
|
<App />
|
||||||
</BrowserRouter>
|
</Router>
|
||||||
);
|
);
|
||||||
|
|
||||||
const root = document.getElementById("root");
|
const root = document.getElementById("root");
|
||||||
|
|
|
@ -6,19 +6,20 @@ import { Helmet } from "inferno-helmet";
|
||||||
import { matchPath, StaticRouter } from "inferno-router";
|
import { matchPath, StaticRouter } from "inferno-router";
|
||||||
import { renderToString } from "inferno-server";
|
import { renderToString } from "inferno-server";
|
||||||
import IsomorphicCookie from "isomorphic-cookie";
|
import IsomorphicCookie from "isomorphic-cookie";
|
||||||
import { GetSite, GetSiteResponse, LemmyHttp, Site } from "lemmy-js-client";
|
import { GetSite, GetSiteResponse, LemmyHttp } from "lemmy-js-client";
|
||||||
import path from "path";
|
import path from "path";
|
||||||
import process from "process";
|
import process from "process";
|
||||||
import serialize from "serialize-javascript";
|
import serialize from "serialize-javascript";
|
||||||
import sharp from "sharp";
|
import sharp from "sharp";
|
||||||
import { App } from "../shared/components/app/app";
|
import { App } from "../shared/components/app/app";
|
||||||
import { getHttpBase, getHttpBaseInternal } from "../shared/env";
|
import { getHttpBaseExternal, getHttpBaseInternal } from "../shared/env";
|
||||||
import {
|
import {
|
||||||
ILemmyConfig,
|
ILemmyConfig,
|
||||||
InitialFetchRequest,
|
InitialFetchRequest,
|
||||||
IsoDataOptionalSite,
|
IsoDataOptionalSite,
|
||||||
} from "../shared/interfaces";
|
} from "../shared/interfaces";
|
||||||
import { routes } from "../shared/routes";
|
import { routes } from "../shared/routes";
|
||||||
|
import { RequestState, wrapClient } from "../shared/services/HttpService";
|
||||||
import {
|
import {
|
||||||
ErrorPageData,
|
ErrorPageData,
|
||||||
favIconPngUrl,
|
favIconPngUrl,
|
||||||
|
@ -64,7 +65,13 @@ Disallow: /search/
|
||||||
|
|
||||||
server.get("/service-worker.js", async (_req, res) => {
|
server.get("/service-worker.js", async (_req, res) => {
|
||||||
res.setHeader("Content-Type", "application/javascript");
|
res.setHeader("Content-Type", "application/javascript");
|
||||||
res.sendFile(path.resolve("./dist/service-worker.js"));
|
res.sendFile(
|
||||||
|
path.resolve(
|
||||||
|
`./dist/service-worker${
|
||||||
|
process.env.NODE_ENV === "development" ? "-development" : ""
|
||||||
|
}.js`
|
||||||
|
)
|
||||||
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
server.get("/robots.txt", async (_req, res) => {
|
server.get("/robots.txt", async (_req, res) => {
|
||||||
|
@ -121,7 +128,7 @@ server.get("/*", async (req, res) => {
|
||||||
const getSiteForm: GetSite = { auth };
|
const getSiteForm: GetSite = { auth };
|
||||||
|
|
||||||
const headers = setForwardedHeaders(req.headers);
|
const headers = setForwardedHeaders(req.headers);
|
||||||
const client = new LemmyHttp(getHttpBaseInternal(), headers);
|
const client = wrapClient(new LemmyHttp(getHttpBaseInternal(), headers));
|
||||||
|
|
||||||
const { path, url, query } = req;
|
const { path, url, query } = req;
|
||||||
|
|
||||||
|
@ -129,11 +136,10 @@ server.get("/*", async (req, res) => {
|
||||||
// This bypasses errors, so that the client can hit the error on its own,
|
// This bypasses errors, so that the client can hit the error on its own,
|
||||||
// in order to remove the jwt on the browser. Necessary for wrong jwts
|
// in order to remove the jwt on the browser. Necessary for wrong jwts
|
||||||
let site: GetSiteResponse | undefined = undefined;
|
let site: GetSiteResponse | undefined = undefined;
|
||||||
let routeData: any[] = [];
|
const routeData: RequestState<any>[] = [];
|
||||||
let errorPageData: ErrorPageData | undefined;
|
let errorPageData: ErrorPageData | undefined = undefined;
|
||||||
try {
|
let try_site = await client.getSite(getSiteForm);
|
||||||
let try_site: any = await client.getSite(getSiteForm);
|
if (try_site.state === "failed" && try_site.msg == "not_logged_in") {
|
||||||
if (try_site.error == "not_logged_in") {
|
|
||||||
console.error(
|
console.error(
|
||||||
"Incorrect JWT token, skipping auth so frontend can remove jwt cookie"
|
"Incorrect JWT token, skipping auth so frontend can remove jwt cookie"
|
||||||
);
|
);
|
||||||
|
@ -143,13 +149,17 @@ server.get("/*", async (req, res) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!auth && isAuthPath(path)) {
|
if (!auth && isAuthPath(path)) {
|
||||||
res.redirect("/login");
|
return res.redirect("/login");
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
site = try_site;
|
if (try_site.state === "success") {
|
||||||
|
site = try_site.data;
|
||||||
initializeSite(site);
|
initializeSite(site);
|
||||||
|
|
||||||
|
if (path != "/setup" && !site.site_view.local_site.site_setup) {
|
||||||
|
return res.redirect("/setup");
|
||||||
|
}
|
||||||
|
|
||||||
if (site) {
|
if (site) {
|
||||||
const initialFetchReq: InitialFetchRequest = {
|
const initialFetchReq: InitialFetchRequest = {
|
||||||
client,
|
client,
|
||||||
|
@ -160,23 +170,25 @@ server.get("/*", async (req, res) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
if (activeRoute?.fetchInitialData) {
|
if (activeRoute?.fetchInitialData) {
|
||||||
routeData = await Promise.all([
|
routeData.push(
|
||||||
|
...(await Promise.all([
|
||||||
...activeRoute.fetchInitialData(initialFetchReq),
|
...activeRoute.fetchInitialData(initialFetchReq),
|
||||||
]);
|
]))
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} else if (try_site.state === "failed") {
|
||||||
errorPageData = getErrorPageData(error, site);
|
errorPageData = getErrorPageData(new Error(try_site.msg), site);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Redirect to the 404 if there's an API error
|
// Redirect to the 404 if there's an API error
|
||||||
if (routeData[0] && routeData[0].error) {
|
if (routeData[0] && routeData[0].state === "failed") {
|
||||||
const error = routeData[0].error;
|
const error = routeData[0].msg;
|
||||||
console.error(error);
|
console.error(error);
|
||||||
if (error === "instance_is_private") {
|
if (error === "instance_is_private") {
|
||||||
return res.redirect(`/signup`);
|
return res.redirect(`/signup`);
|
||||||
} else {
|
} else {
|
||||||
errorPageData = getErrorPageData(error, site);
|
errorPageData = getErrorPageData(new Error(error), site);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -234,7 +246,7 @@ process.on("SIGINT", () => {
|
||||||
process.exit(0);
|
process.exit(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
const iconSizes = [72, 96, 128, 144, 152, 192, 384, 512];
|
const iconSizes = [72, 96, 144, 192, 512];
|
||||||
const defaultLogoPathDirectory = path.join(
|
const defaultLogoPathDirectory = path.join(
|
||||||
process.cwd(),
|
process.cwd(),
|
||||||
"dist",
|
"dist",
|
||||||
|
@ -242,12 +254,15 @@ const defaultLogoPathDirectory = path.join(
|
||||||
"icons"
|
"icons"
|
||||||
);
|
);
|
||||||
|
|
||||||
export async function generateManifestBase64(site: Site) {
|
export async function generateManifestBase64({
|
||||||
const url = (
|
my_user,
|
||||||
process.env.NODE_ENV === "development"
|
site_view: {
|
||||||
? "http://localhost:1236/"
|
site,
|
||||||
: getHttpBase()
|
local_site: { community_creation_admin_only },
|
||||||
).replace(/\/$/g, "");
|
},
|
||||||
|
}: GetSiteResponse) {
|
||||||
|
const url = getHttpBaseExternal();
|
||||||
|
|
||||||
const icon = site.icon ? await fetchIconPng(site.icon) : null;
|
const icon = site.icon ? await fetchIconPng(site.icon) : null;
|
||||||
|
|
||||||
const manifest = {
|
const manifest = {
|
||||||
|
@ -281,15 +296,58 @@ export async function generateManifestBase64(site: Site) {
|
||||||
};
|
};
|
||||||
})
|
})
|
||||||
),
|
),
|
||||||
|
shortcuts: [
|
||||||
|
{
|
||||||
|
name: "Search",
|
||||||
|
short_name: "Search",
|
||||||
|
description: "Perform a search.",
|
||||||
|
url: "/search",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Communities",
|
||||||
|
url: "/communities",
|
||||||
|
short_name: "Communities",
|
||||||
|
description: "Browse communities",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
.concat(
|
||||||
|
my_user
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
name: "Create Post",
|
||||||
|
url: "/create_post",
|
||||||
|
short_name: "Create Post",
|
||||||
|
description: "Create a post.",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: []
|
||||||
|
)
|
||||||
|
.concat(
|
||||||
|
my_user?.local_user_view.person.admin || !community_creation_admin_only
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
name: "Create Community",
|
||||||
|
url: "/create_community",
|
||||||
|
short_name: "Create Community",
|
||||||
|
description: "Create a community",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: []
|
||||||
|
),
|
||||||
|
related_applications: [
|
||||||
|
{
|
||||||
|
platform: "f-droid",
|
||||||
|
url: "https://f-droid.org/packages/com.jerboa/",
|
||||||
|
id: "com.jerboa",
|
||||||
|
},
|
||||||
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
return Buffer.from(JSON.stringify(manifest)).toString("base64");
|
return Buffer.from(JSON.stringify(manifest)).toString("base64");
|
||||||
}
|
}
|
||||||
|
|
||||||
async function fetchIconPng(iconUrl: string) {
|
async function fetchIconPng(iconUrl: string) {
|
||||||
return await fetch(
|
return await fetch(iconUrl)
|
||||||
iconUrl.replace(/https?:\/\/[^\/]+/g, getHttpBaseInternal())
|
|
||||||
)
|
|
||||||
.then(res => res.blob())
|
.then(res => res.blob())
|
||||||
.then(blob => blob.arrayBuffer());
|
.then(blob => blob.arrayBuffer());
|
||||||
}
|
}
|
||||||
|
@ -376,9 +434,9 @@ async function createSsrHtml(root: string, isoData: IsoDataOptionalSite) {
|
||||||
site &&
|
site &&
|
||||||
`<link
|
`<link
|
||||||
rel="manifest"
|
rel="manifest"
|
||||||
href={${`data:application/manifest+json;base64,${await generateManifestBase64(
|
href=${`data:application/manifest+json;base64,${await generateManifestBase64(
|
||||||
site.site_view.site
|
site
|
||||||
)}`}}
|
)}`}
|
||||||
/>`
|
/>`
|
||||||
}
|
}
|
||||||
<link rel="apple-touch-icon" href=${appleTouchIcon} />
|
<link rel="apple-touch-icon" href=${appleTouchIcon} />
|
||||||
|
|
|
@ -1,35 +1,23 @@
|
||||||
import { Component, createRef, linkEvent } from "inferno";
|
import { Component, createRef, linkEvent } from "inferno";
|
||||||
import { NavLink } from "inferno-router";
|
import { NavLink } from "inferno-router";
|
||||||
import {
|
import {
|
||||||
CommentResponse,
|
|
||||||
GetReportCount,
|
|
||||||
GetReportCountResponse,
|
GetReportCountResponse,
|
||||||
GetSiteResponse,
|
GetSiteResponse,
|
||||||
GetUnreadCount,
|
|
||||||
GetUnreadCountResponse,
|
GetUnreadCountResponse,
|
||||||
GetUnreadRegistrationApplicationCount,
|
|
||||||
GetUnreadRegistrationApplicationCountResponse,
|
GetUnreadRegistrationApplicationCountResponse,
|
||||||
PrivateMessageResponse,
|
|
||||||
UserOperation,
|
|
||||||
wsJsonToRes,
|
|
||||||
wsUserOp,
|
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { Subscription } from "rxjs";
|
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { UserService, WebSocketService } from "../../services";
|
import { UserService } from "../../services";
|
||||||
|
import { HttpService, RequestState } from "../../services/HttpService";
|
||||||
import {
|
import {
|
||||||
amAdmin,
|
amAdmin,
|
||||||
canCreateCommunity,
|
canCreateCommunity,
|
||||||
donateLemmyUrl,
|
donateLemmyUrl,
|
||||||
isBrowser,
|
isBrowser,
|
||||||
myAuth,
|
myAuth,
|
||||||
notifyComment,
|
|
||||||
notifyPrivateMessage,
|
|
||||||
numToSI,
|
numToSI,
|
||||||
showAvatars,
|
showAvatars,
|
||||||
toast,
|
toast,
|
||||||
wsClient,
|
|
||||||
wsSubscribe,
|
|
||||||
} from "../../utils";
|
} from "../../utils";
|
||||||
import { Icon } from "../common/icon";
|
import { Icon } from "../common/icon";
|
||||||
import { PictrsImage } from "../common/pictrs-image";
|
import { PictrsImage } from "../common/pictrs-image";
|
||||||
|
@ -39,14 +27,16 @@ interface NavbarProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
interface NavbarState {
|
interface NavbarState {
|
||||||
unreadInboxCount: number;
|
unreadInboxCountRes: RequestState<GetUnreadCountResponse>;
|
||||||
unreadReportCount: number;
|
unreadReportCountRes: RequestState<GetReportCountResponse>;
|
||||||
unreadApplicationCount: number;
|
unreadApplicationCountRes: RequestState<GetUnreadRegistrationApplicationCountResponse>;
|
||||||
onSiteBanner?(url: string): any;
|
onSiteBanner?(url: string): any;
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleCollapseClick(i: Navbar) {
|
function handleCollapseClick(i: Navbar) {
|
||||||
|
if (i.collapseButtonRef.current?.ariaExpanded === "true") {
|
||||||
i.collapseButtonRef.current?.click();
|
i.collapseButtonRef.current?.click();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleLogOut(i: Navbar) {
|
function handleLogOut(i: Navbar) {
|
||||||
|
@ -55,77 +45,42 @@ function handleLogOut(i: Navbar) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Navbar extends Component<NavbarProps, NavbarState> {
|
export class Navbar extends Component<NavbarProps, NavbarState> {
|
||||||
private wsSub: Subscription;
|
|
||||||
private userSub: Subscription;
|
|
||||||
private unreadInboxCountSub: Subscription;
|
|
||||||
private unreadReportCountSub: Subscription;
|
|
||||||
private unreadApplicationCountSub: Subscription;
|
|
||||||
state: NavbarState = {
|
state: NavbarState = {
|
||||||
unreadInboxCount: 0,
|
unreadInboxCountRes: { state: "empty" },
|
||||||
unreadReportCount: 0,
|
unreadReportCountRes: { state: "empty" },
|
||||||
unreadApplicationCount: 0,
|
unreadApplicationCountRes: { state: "empty" },
|
||||||
};
|
};
|
||||||
subscription: any;
|
|
||||||
collapseButtonRef = createRef<HTMLButtonElement>();
|
collapseButtonRef = createRef<HTMLButtonElement>();
|
||||||
mobileMenuRef = createRef<HTMLDivElement>();
|
mobileMenuRef = createRef<HTMLDivElement>();
|
||||||
|
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
|
|
||||||
this.parseMessage = this.parseMessage.bind(this);
|
|
||||||
this.subscription = wsSubscribe(this.parseMessage);
|
|
||||||
this.handleOutsideMenuClick = this.handleOutsideMenuClick.bind(this);
|
this.handleOutsideMenuClick = this.handleOutsideMenuClick.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
async componentDidMount() {
|
||||||
// Subscribe to jwt changes
|
// Subscribe to jwt changes
|
||||||
if (isBrowser()) {
|
if (isBrowser()) {
|
||||||
// On the first load, check the unreads
|
// On the first load, check the unreads
|
||||||
const auth = myAuth(false);
|
|
||||||
if (auth && UserService.Instance.myUserInfo) {
|
|
||||||
this.requestNotificationPermission();
|
this.requestNotificationPermission();
|
||||||
WebSocketService.Instance.send(
|
await this.fetchUnreads();
|
||||||
wsClient.userJoin({
|
|
||||||
auth,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
this.fetchUnreads();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.requestNotificationPermission();
|
this.requestNotificationPermission();
|
||||||
|
|
||||||
// Subscribe to unread count changes
|
document.addEventListener("mouseup", this.handleOutsideMenuClick);
|
||||||
this.unreadInboxCountSub =
|
|
||||||
UserService.Instance.unreadInboxCountSub.subscribe(res => {
|
|
||||||
this.setState({ unreadInboxCount: res });
|
|
||||||
});
|
|
||||||
// Subscribe to unread report count changes
|
|
||||||
this.unreadReportCountSub =
|
|
||||||
UserService.Instance.unreadReportCountSub.subscribe(res => {
|
|
||||||
this.setState({ unreadReportCount: res });
|
|
||||||
});
|
|
||||||
// Subscribe to unread application count
|
|
||||||
this.unreadApplicationCountSub =
|
|
||||||
UserService.Instance.unreadApplicationCountSub.subscribe(res => {
|
|
||||||
this.setState({ unreadApplicationCount: res });
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener("click", this.handleOutsideMenuClick);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
this.wsSub.unsubscribe();
|
document.removeEventListener("mouseup", this.handleOutsideMenuClick);
|
||||||
this.userSub.unsubscribe();
|
}
|
||||||
this.unreadInboxCountSub.unsubscribe();
|
|
||||||
this.unreadReportCountSub.unsubscribe();
|
render() {
|
||||||
this.unreadApplicationCountSub.unsubscribe();
|
return this.navbar();
|
||||||
document.removeEventListener("click", this.handleOutsideMenuClick);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO class active corresponding to current page
|
// TODO class active corresponding to current page
|
||||||
render() {
|
navbar() {
|
||||||
const siteView = this.props.siteRes?.site_view;
|
const siteView = this.props.siteRes?.site_view;
|
||||||
const person = UserService.Instance.myUserInfo?.local_user_view.person;
|
const person = UserService.Instance.myUserInfo?.local_user_view.person;
|
||||||
return (
|
return (
|
||||||
|
@ -148,15 +103,15 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
||||||
to="/inbox"
|
to="/inbox"
|
||||||
className="p-1 nav-link border-0"
|
className="p-1 nav-link border-0"
|
||||||
title={i18n.t("unread_messages", {
|
title={i18n.t("unread_messages", {
|
||||||
count: Number(this.state.unreadInboxCount),
|
count: Number(this.state.unreadApplicationCountRes.state),
|
||||||
formattedCount: numToSI(this.state.unreadInboxCount),
|
formattedCount: numToSI(this.unreadInboxCount),
|
||||||
})}
|
})}
|
||||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||||
>
|
>
|
||||||
<Icon icon="bell" />
|
<Icon icon="bell" />
|
||||||
{this.state.unreadInboxCount > 0 && (
|
{this.unreadInboxCount > 0 && (
|
||||||
<span className="mx-1 badge badge-light">
|
<span className="mx-1 badge badge-light">
|
||||||
{numToSI(this.state.unreadInboxCount)}
|
{numToSI(this.unreadInboxCount)}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
@ -167,15 +122,15 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
||||||
to="/reports"
|
to="/reports"
|
||||||
className="p-1 nav-link border-0"
|
className="p-1 nav-link border-0"
|
||||||
title={i18n.t("unread_reports", {
|
title={i18n.t("unread_reports", {
|
||||||
count: Number(this.state.unreadReportCount),
|
count: Number(this.unreadReportCount),
|
||||||
formattedCount: numToSI(this.state.unreadReportCount),
|
formattedCount: numToSI(this.unreadReportCount),
|
||||||
})}
|
})}
|
||||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||||
>
|
>
|
||||||
<Icon icon="shield" />
|
<Icon icon="shield" />
|
||||||
{this.state.unreadReportCount > 0 && (
|
{this.unreadReportCount > 0 && (
|
||||||
<span className="mx-1 badge badge-light">
|
<span className="mx-1 badge badge-light">
|
||||||
{numToSI(this.state.unreadReportCount)}
|
{numToSI(this.unreadReportCount)}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
@ -187,15 +142,15 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
||||||
to="/registration_applications"
|
to="/registration_applications"
|
||||||
className="p-1 nav-link border-0"
|
className="p-1 nav-link border-0"
|
||||||
title={i18n.t("unread_registration_applications", {
|
title={i18n.t("unread_registration_applications", {
|
||||||
count: Number(this.state.unreadApplicationCount),
|
count: Number(this.unreadApplicationCount),
|
||||||
formattedCount: numToSI(this.state.unreadApplicationCount),
|
formattedCount: numToSI(this.unreadApplicationCount),
|
||||||
})}
|
})}
|
||||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||||
>
|
>
|
||||||
<Icon icon="clipboard" />
|
<Icon icon="clipboard" />
|
||||||
{this.state.unreadApplicationCount > 0 && (
|
{this.unreadApplicationCount > 0 && (
|
||||||
<span className="mx-1 badge badge-light">
|
<span className="mx-1 badge badge-light">
|
||||||
{numToSI(this.state.unreadApplicationCount)}
|
{numToSI(this.unreadApplicationCount)}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
@ -272,9 +227,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul className="navbar-nav">
|
<ul className="navbar-nav">
|
||||||
{!this.context.router.history.location.pathname.match(
|
|
||||||
/^\/search/
|
|
||||||
) && (
|
|
||||||
<li className="nav-item">
|
<li className="nav-item">
|
||||||
<NavLink
|
<NavLink
|
||||||
to="/search"
|
to="/search"
|
||||||
|
@ -285,7 +237,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
||||||
<Icon icon="search" />
|
<Icon icon="search" />
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</li>
|
</li>
|
||||||
)}
|
|
||||||
{amAdmin() && (
|
{amAdmin() && (
|
||||||
<li className="nav-item">
|
<li className="nav-item">
|
||||||
<NavLink
|
<NavLink
|
||||||
|
@ -305,15 +256,15 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
||||||
className="nav-link"
|
className="nav-link"
|
||||||
to="/inbox"
|
to="/inbox"
|
||||||
title={i18n.t("unread_messages", {
|
title={i18n.t("unread_messages", {
|
||||||
count: Number(this.state.unreadInboxCount),
|
count: Number(this.unreadInboxCount),
|
||||||
formattedCount: numToSI(this.state.unreadInboxCount),
|
formattedCount: numToSI(this.unreadInboxCount),
|
||||||
})}
|
})}
|
||||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||||
>
|
>
|
||||||
<Icon icon="bell" />
|
<Icon icon="bell" />
|
||||||
{this.state.unreadInboxCount > 0 && (
|
{this.unreadInboxCount > 0 && (
|
||||||
<span className="ml-1 badge badge-light">
|
<span className="mx-1 badge badge-light">
|
||||||
{numToSI(this.state.unreadInboxCount)}
|
{numToSI(this.unreadInboxCount)}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
@ -324,15 +275,15 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
||||||
className="nav-link"
|
className="nav-link"
|
||||||
to="/reports"
|
to="/reports"
|
||||||
title={i18n.t("unread_reports", {
|
title={i18n.t("unread_reports", {
|
||||||
count: Number(this.state.unreadReportCount),
|
count: Number(this.unreadReportCount),
|
||||||
formattedCount: numToSI(this.state.unreadReportCount),
|
formattedCount: numToSI(this.unreadReportCount),
|
||||||
})}
|
})}
|
||||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||||
>
|
>
|
||||||
<Icon icon="shield" />
|
<Icon icon="shield" />
|
||||||
{this.state.unreadReportCount > 0 && (
|
{this.unreadReportCount > 0 && (
|
||||||
<span className="ml-1 badge badge-light">
|
<span className="mx-1 badge badge-light">
|
||||||
{numToSI(this.state.unreadReportCount)}
|
{numToSI(this.unreadReportCount)}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
@ -344,17 +295,15 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
||||||
to="/registration_applications"
|
to="/registration_applications"
|
||||||
className="nav-link"
|
className="nav-link"
|
||||||
title={i18n.t("unread_registration_applications", {
|
title={i18n.t("unread_registration_applications", {
|
||||||
count: Number(this.state.unreadApplicationCount),
|
count: Number(this.unreadApplicationCount),
|
||||||
formattedCount: numToSI(
|
formattedCount: numToSI(this.unreadApplicationCount),
|
||||||
this.state.unreadApplicationCount
|
|
||||||
),
|
|
||||||
})}
|
})}
|
||||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||||
>
|
>
|
||||||
<Icon icon="clipboard" />
|
<Icon icon="clipboard" />
|
||||||
{this.state.unreadApplicationCount > 0 && (
|
{this.unreadApplicationCount > 0 && (
|
||||||
<span className="mx-1 badge badge-light">
|
<span className="mx-1 badge badge-light">
|
||||||
{numToSI(this.state.unreadApplicationCount)}
|
{numToSI(this.unreadApplicationCount)}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
@ -457,124 +406,72 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
||||||
return amAdmin() || moderatesS;
|
return amAdmin() || moderatesS;
|
||||||
}
|
}
|
||||||
|
|
||||||
parseMessage(msg: any) {
|
async fetchUnreads() {
|
||||||
const op = wsUserOp(msg);
|
|
||||||
console.log(msg);
|
|
||||||
if (msg.error) {
|
|
||||||
if (msg.error == "not_logged_in") {
|
|
||||||
UserService.Instance.logout();
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
} else if (msg.reconnect) {
|
|
||||||
console.log(i18n.t("websocket_reconnected"));
|
|
||||||
const auth = myAuth(false);
|
|
||||||
if (UserService.Instance.myUserInfo && auth) {
|
|
||||||
WebSocketService.Instance.send(
|
|
||||||
wsClient.userJoin({
|
|
||||||
auth,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
this.fetchUnreads();
|
|
||||||
}
|
|
||||||
} else if (op == UserOperation.GetUnreadCount) {
|
|
||||||
const data = wsJsonToRes<GetUnreadCountResponse>(msg);
|
|
||||||
this.setState({
|
|
||||||
unreadInboxCount: data.replies + data.mentions + data.private_messages,
|
|
||||||
});
|
|
||||||
this.sendUnreadCount();
|
|
||||||
} else if (op == UserOperation.GetReportCount) {
|
|
||||||
const data = wsJsonToRes<GetReportCountResponse>(msg);
|
|
||||||
this.setState({
|
|
||||||
unreadReportCount:
|
|
||||||
data.post_reports +
|
|
||||||
data.comment_reports +
|
|
||||||
(data.private_message_reports ?? 0),
|
|
||||||
});
|
|
||||||
this.sendReportUnread();
|
|
||||||
} else if (op == UserOperation.GetUnreadRegistrationApplicationCount) {
|
|
||||||
const data =
|
|
||||||
wsJsonToRes<GetUnreadRegistrationApplicationCountResponse>(msg);
|
|
||||||
this.setState({ unreadApplicationCount: data.registration_applications });
|
|
||||||
this.sendApplicationUnread();
|
|
||||||
} else if (op == UserOperation.CreateComment) {
|
|
||||||
const data = wsJsonToRes<CommentResponse>(msg);
|
|
||||||
const mui = UserService.Instance.myUserInfo;
|
|
||||||
if (
|
|
||||||
mui &&
|
|
||||||
data.recipient_ids.includes(mui.local_user_view.local_user.id)
|
|
||||||
) {
|
|
||||||
this.setState({
|
|
||||||
unreadInboxCount: this.state.unreadInboxCount + 1,
|
|
||||||
});
|
|
||||||
this.sendUnreadCount();
|
|
||||||
notifyComment(data.comment_view, this.context.router);
|
|
||||||
}
|
|
||||||
} else if (op == UserOperation.CreatePrivateMessage) {
|
|
||||||
const data = wsJsonToRes<PrivateMessageResponse>(msg);
|
|
||||||
|
|
||||||
if (
|
|
||||||
data.private_message_view.recipient.id ==
|
|
||||||
UserService.Instance.myUserInfo?.local_user_view.person.id
|
|
||||||
) {
|
|
||||||
this.setState({
|
|
||||||
unreadInboxCount: this.state.unreadInboxCount + 1,
|
|
||||||
});
|
|
||||||
this.sendUnreadCount();
|
|
||||||
notifyPrivateMessage(data.private_message_view, this.context.router);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchUnreads() {
|
|
||||||
console.log("Fetching inbox unreads...");
|
|
||||||
|
|
||||||
const auth = myAuth();
|
const auth = myAuth();
|
||||||
if (auth) {
|
if (auth) {
|
||||||
const unreadForm: GetUnreadCount = {
|
this.setState({ unreadInboxCountRes: { state: "loading" } });
|
||||||
|
this.setState({
|
||||||
|
unreadInboxCountRes: await HttpService.client.getUnreadCount({
|
||||||
auth,
|
auth,
|
||||||
};
|
}),
|
||||||
WebSocketService.Instance.send(wsClient.getUnreadCount(unreadForm));
|
});
|
||||||
|
|
||||||
console.log("Fetching reports...");
|
if (this.moderatesSomething) {
|
||||||
|
this.setState({ unreadReportCountRes: { state: "loading" } });
|
||||||
const reportCountForm: GetReportCount = {
|
this.setState({
|
||||||
|
unreadReportCountRes: await HttpService.client.getReportCount({
|
||||||
auth,
|
auth,
|
||||||
};
|
}),
|
||||||
WebSocketService.Instance.send(wsClient.getReportCount(reportCountForm));
|
});
|
||||||
|
}
|
||||||
|
|
||||||
if (amAdmin()) {
|
if (amAdmin()) {
|
||||||
console.log("Fetching applications...");
|
this.setState({ unreadApplicationCountRes: { state: "loading" } });
|
||||||
|
this.setState({
|
||||||
const applicationCountForm: GetUnreadRegistrationApplicationCount = {
|
unreadApplicationCountRes:
|
||||||
|
await HttpService.client.getUnreadRegistrationApplicationCount({
|
||||||
auth,
|
auth,
|
||||||
};
|
}),
|
||||||
WebSocketService.Instance.send(
|
});
|
||||||
wsClient.getUnreadRegistrationApplicationCount(applicationCountForm)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get unreadInboxCount(): number {
|
||||||
|
if (this.state.unreadInboxCountRes.state == "success") {
|
||||||
|
const data = this.state.unreadInboxCountRes.data;
|
||||||
|
return data.replies + data.mentions + data.private_messages;
|
||||||
|
} else {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get unreadReportCount(): number {
|
||||||
|
if (this.state.unreadReportCountRes.state == "success") {
|
||||||
|
const data = this.state.unreadReportCountRes.data;
|
||||||
|
return (
|
||||||
|
data.post_reports +
|
||||||
|
data.comment_reports +
|
||||||
|
(data.private_message_reports ?? 0)
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get unreadApplicationCount(): number {
|
||||||
|
if (this.state.unreadApplicationCountRes.state == "success") {
|
||||||
|
const data = this.state.unreadApplicationCountRes.data;
|
||||||
|
return data.registration_applications;
|
||||||
|
} else {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
get currentLocation() {
|
get currentLocation() {
|
||||||
return this.context.router.history.location.pathname;
|
return this.context.router.history.location.pathname;
|
||||||
}
|
}
|
||||||
|
|
||||||
sendUnreadCount() {
|
|
||||||
UserService.Instance.unreadInboxCountSub.next(this.state.unreadInboxCount);
|
|
||||||
}
|
|
||||||
|
|
||||||
sendReportUnread() {
|
|
||||||
UserService.Instance.unreadReportCountSub.next(
|
|
||||||
this.state.unreadReportCount
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
sendApplicationUnread() {
|
|
||||||
UserService.Instance.unreadApplicationCountSub.next(
|
|
||||||
this.state.unreadApplicationCount
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
requestNotificationPermission() {
|
requestNotificationPermission() {
|
||||||
if (UserService.Instance.myUserInfo) {
|
if (UserService.Instance.myUserInfo) {
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
|
|
@ -1,25 +1,11 @@
|
||||||
import { Component } from "inferno";
|
import { Component } from "inferno";
|
||||||
import { T } from "inferno-i18next-dess";
|
import { T } from "inferno-i18next-dess";
|
||||||
import { Link } from "inferno-router";
|
import { Link } from "inferno-router";
|
||||||
import {
|
import { CreateComment, EditComment, Language } from "lemmy-js-client";
|
||||||
CommentResponse,
|
|
||||||
CreateComment,
|
|
||||||
EditComment,
|
|
||||||
Language,
|
|
||||||
UserOperation,
|
|
||||||
wsJsonToRes,
|
|
||||||
wsUserOp,
|
|
||||||
} from "lemmy-js-client";
|
|
||||||
import { Subscription } from "rxjs";
|
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { CommentNodeI } from "../../interfaces";
|
import { CommentNodeI } from "../../interfaces";
|
||||||
import { UserService, WebSocketService } from "../../services";
|
import { UserService } from "../../services";
|
||||||
import {
|
import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
|
||||||
capitalizeFirstLetter,
|
|
||||||
myAuth,
|
|
||||||
wsClient,
|
|
||||||
wsSubscribe,
|
|
||||||
} from "../../utils";
|
|
||||||
import { Icon } from "../common/icon";
|
import { Icon } from "../common/icon";
|
||||||
import { MarkdownTextArea } from "../common/markdown-textarea";
|
import { MarkdownTextArea } from "../common/markdown-textarea";
|
||||||
|
|
||||||
|
@ -28,44 +14,21 @@ interface CommentFormProps {
|
||||||
* Can either be the parent, or the editable comment. The right side is a postId.
|
* Can either be the parent, or the editable comment. The right side is a postId.
|
||||||
*/
|
*/
|
||||||
node: CommentNodeI | number;
|
node: CommentNodeI | number;
|
||||||
|
finished?: boolean;
|
||||||
edit?: boolean;
|
edit?: boolean;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
focus?: boolean;
|
focus?: boolean;
|
||||||
onReplyCancel?(): any;
|
onReplyCancel?(): void;
|
||||||
allLanguages: Language[];
|
allLanguages: Language[];
|
||||||
siteLanguages: number[];
|
siteLanguages: number[];
|
||||||
|
onUpsertComment(form: EditComment | CreateComment): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface CommentFormState {
|
export class CommentForm extends Component<CommentFormProps, any> {
|
||||||
buttonTitle: string;
|
|
||||||
finished: boolean;
|
|
||||||
formId?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export class CommentForm extends Component<CommentFormProps, CommentFormState> {
|
|
||||||
private subscription?: Subscription;
|
|
||||||
state: CommentFormState = {
|
|
||||||
buttonTitle:
|
|
||||||
typeof this.props.node === "number"
|
|
||||||
? capitalizeFirstLetter(i18n.t("post"))
|
|
||||||
: this.props.edit
|
|
||||||
? capitalizeFirstLetter(i18n.t("save"))
|
|
||||||
: capitalizeFirstLetter(i18n.t("reply")),
|
|
||||||
finished: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
|
|
||||||
this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
|
this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
|
||||||
this.handleReplyCancel = this.handleReplyCancel.bind(this);
|
|
||||||
|
|
||||||
this.parseMessage = this.parseMessage.bind(this);
|
|
||||||
this.subscription = wsSubscribe(this.parseMessage);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
this.subscription?.unsubscribe();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@ -82,13 +45,13 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
|
||||||
<MarkdownTextArea
|
<MarkdownTextArea
|
||||||
initialContent={initialContent}
|
initialContent={initialContent}
|
||||||
showLanguage
|
showLanguage
|
||||||
buttonTitle={this.state.buttonTitle}
|
buttonTitle={this.buttonTitle}
|
||||||
finished={this.state.finished}
|
finished={this.props.finished}
|
||||||
replyType={typeof this.props.node !== "number"}
|
replyType={typeof this.props.node !== "number"}
|
||||||
focus={this.props.focus}
|
focus={this.props.focus}
|
||||||
disabled={this.props.disabled}
|
disabled={this.props.disabled}
|
||||||
onSubmit={this.handleCommentSubmit}
|
onSubmit={this.handleCommentSubmit}
|
||||||
onReplyCancel={this.handleReplyCancel}
|
onReplyCancel={this.props.onReplyCancel}
|
||||||
placeholder={i18n.t("comment_here")}
|
placeholder={i18n.t("comment_here")}
|
||||||
allLanguages={this.props.allLanguages}
|
allLanguages={this.props.allLanguages}
|
||||||
siteLanguages={this.props.siteLanguages}
|
siteLanguages={this.props.siteLanguages}
|
||||||
|
@ -108,77 +71,46 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleCommentSubmit(msg: {
|
get buttonTitle(): string {
|
||||||
val: string;
|
return typeof this.props.node === "number"
|
||||||
formId: string;
|
? capitalizeFirstLetter(i18n.t("post"))
|
||||||
languageId?: number;
|
: this.props.edit
|
||||||
}) {
|
? capitalizeFirstLetter(i18n.t("save"))
|
||||||
const content = msg.val;
|
: capitalizeFirstLetter(i18n.t("reply"));
|
||||||
const language_id = msg.languageId;
|
}
|
||||||
const node = this.props.node;
|
|
||||||
|
|
||||||
this.setState({ formId: msg.formId });
|
handleCommentSubmit(content: string, form_id: string, language_id?: number) {
|
||||||
|
const { node, onUpsertComment, edit } = this.props;
|
||||||
const auth = myAuth();
|
|
||||||
if (auth) {
|
|
||||||
if (typeof node === "number") {
|
if (typeof node === "number") {
|
||||||
const postId = node;
|
const post_id = node;
|
||||||
const form: CreateComment = {
|
onUpsertComment({
|
||||||
content,
|
content,
|
||||||
form_id: this.state.formId,
|
post_id,
|
||||||
post_id: postId,
|
|
||||||
language_id,
|
language_id,
|
||||||
auth,
|
form_id,
|
||||||
};
|
auth: myAuthRequired(),
|
||||||
WebSocketService.Instance.send(wsClient.createComment(form));
|
});
|
||||||
} else {
|
} else {
|
||||||
if (this.props.edit) {
|
if (edit) {
|
||||||
const form: EditComment = {
|
const comment_id = node.comment_view.comment.id;
|
||||||
|
onUpsertComment({
|
||||||
content,
|
content,
|
||||||
form_id: this.state.formId,
|
comment_id,
|
||||||
comment_id: node.comment_view.comment.id,
|
form_id,
|
||||||
language_id,
|
language_id,
|
||||||
auth,
|
auth: myAuthRequired(),
|
||||||
};
|
});
|
||||||
WebSocketService.Instance.send(wsClient.editComment(form));
|
|
||||||
} else {
|
} else {
|
||||||
const form: CreateComment = {
|
const post_id = node.comment_view.post.id;
|
||||||
|
const parent_id = node.comment_view.comment.id;
|
||||||
|
this.props.onUpsertComment({
|
||||||
content,
|
content,
|
||||||
form_id: this.state.formId,
|
parent_id,
|
||||||
post_id: node.comment_view.post.id,
|
post_id,
|
||||||
parent_id: node.comment_view.comment.id,
|
form_id,
|
||||||
language_id,
|
language_id,
|
||||||
auth,
|
auth: myAuthRequired(),
|
||||||
};
|
});
|
||||||
WebSocketService.Instance.send(wsClient.createComment(form));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleReplyCancel() {
|
|
||||||
this.props.onReplyCancel?.();
|
|
||||||
}
|
|
||||||
|
|
||||||
parseMessage(msg: any) {
|
|
||||||
const op = wsUserOp(msg);
|
|
||||||
console.log(msg);
|
|
||||||
|
|
||||||
// Only do the showing and hiding if logged in
|
|
||||||
if (UserService.Instance.myUserInfo) {
|
|
||||||
if (
|
|
||||||
op == UserOperation.CreateComment ||
|
|
||||||
op == UserOperation.EditComment
|
|
||||||
) {
|
|
||||||
const data = wsJsonToRes<CommentResponse>(msg);
|
|
||||||
|
|
||||||
// This only finishes this form, if the randomly generated form_id matches the one received
|
|
||||||
if (this.state.formId && this.state.formId == data.form_id) {
|
|
||||||
this.setState({ finished: true });
|
|
||||||
|
|
||||||
// Necessary because it broke tribute for some reason
|
|
||||||
this.setState({ finished: false });
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because it is too large
Load diff
|
@ -1,5 +1,29 @@
|
||||||
import { Component } from "inferno";
|
import { Component } from "inferno";
|
||||||
import { CommunityModeratorView, Language, PersonView } from "lemmy-js-client";
|
import {
|
||||||
|
AddAdmin,
|
||||||
|
AddModToCommunity,
|
||||||
|
BanFromCommunity,
|
||||||
|
BanPerson,
|
||||||
|
BlockPerson,
|
||||||
|
CommentId,
|
||||||
|
CommunityModeratorView,
|
||||||
|
CreateComment,
|
||||||
|
CreateCommentLike,
|
||||||
|
CreateCommentReport,
|
||||||
|
DeleteComment,
|
||||||
|
DistinguishComment,
|
||||||
|
EditComment,
|
||||||
|
GetComments,
|
||||||
|
Language,
|
||||||
|
MarkCommentReplyAsRead,
|
||||||
|
MarkPersonMentionAsRead,
|
||||||
|
PersonView,
|
||||||
|
PurgeComment,
|
||||||
|
PurgePerson,
|
||||||
|
RemoveComment,
|
||||||
|
SaveComment,
|
||||||
|
TransferCommunity,
|
||||||
|
} from "lemmy-js-client";
|
||||||
import { CommentNodeI, CommentViewType } from "../../interfaces";
|
import { CommentNodeI, CommentViewType } from "../../interfaces";
|
||||||
import { CommentNode } from "./comment-node";
|
import { CommentNode } from "./comment-node";
|
||||||
|
|
||||||
|
@ -20,6 +44,26 @@ interface CommentNodesProps {
|
||||||
allLanguages: Language[];
|
allLanguages: Language[];
|
||||||
siteLanguages: number[];
|
siteLanguages: number[];
|
||||||
hideImages?: boolean;
|
hideImages?: boolean;
|
||||||
|
finished: Map<CommentId, boolean | undefined>;
|
||||||
|
onSaveComment(form: SaveComment): void;
|
||||||
|
onCommentReplyRead(form: MarkCommentReplyAsRead): void;
|
||||||
|
onPersonMentionRead(form: MarkPersonMentionAsRead): void;
|
||||||
|
onCreateComment(form: EditComment | CreateComment): void;
|
||||||
|
onEditComment(form: EditComment | CreateComment): void;
|
||||||
|
onCommentVote(form: CreateCommentLike): void;
|
||||||
|
onBlockPerson(form: BlockPerson): void;
|
||||||
|
onDeleteComment(form: DeleteComment): void;
|
||||||
|
onRemoveComment(form: RemoveComment): void;
|
||||||
|
onDistinguishComment(form: DistinguishComment): void;
|
||||||
|
onAddModToCommunity(form: AddModToCommunity): void;
|
||||||
|
onAddAdmin(form: AddAdmin): void;
|
||||||
|
onBanPersonFromCommunity(form: BanFromCommunity): void;
|
||||||
|
onBanPerson(form: BanPerson): void;
|
||||||
|
onTransferCommunity(form: TransferCommunity): void;
|
||||||
|
onFetchChildren?(form: GetComments): void;
|
||||||
|
onCommentReport(form: CreateCommentReport): void;
|
||||||
|
onPurgePerson(form: PurgePerson): void;
|
||||||
|
onPurgeComment(form: PurgeComment): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class CommentNodes extends Component<CommentNodesProps, any> {
|
export class CommentNodes extends Component<CommentNodesProps, any> {
|
||||||
|
@ -50,6 +94,26 @@ export class CommentNodes extends Component<CommentNodesProps, any> {
|
||||||
allLanguages={this.props.allLanguages}
|
allLanguages={this.props.allLanguages}
|
||||||
siteLanguages={this.props.siteLanguages}
|
siteLanguages={this.props.siteLanguages}
|
||||||
hideImages={this.props.hideImages}
|
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>
|
</div>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component, InfernoNode, linkEvent } from "inferno";
|
||||||
import { T } from "inferno-i18next-dess";
|
import { T } from "inferno-i18next-dess";
|
||||||
import {
|
import {
|
||||||
CommentReportView,
|
CommentReportView,
|
||||||
|
@ -7,21 +7,39 @@ import {
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { CommentNodeI, CommentViewType } from "../../interfaces";
|
import { CommentNodeI, CommentViewType } from "../../interfaces";
|
||||||
import { WebSocketService } from "../../services";
|
import { myAuthRequired } from "../../utils";
|
||||||
import { myAuth, wsClient } from "../../utils";
|
import { Icon, Spinner } from "../common/icon";
|
||||||
import { Icon } from "../common/icon";
|
|
||||||
import { PersonListing } from "../person/person-listing";
|
import { PersonListing } from "../person/person-listing";
|
||||||
import { CommentNode } from "./comment-node";
|
import { CommentNode } from "./comment-node";
|
||||||
|
|
||||||
interface CommentReportProps {
|
interface CommentReportProps {
|
||||||
report: CommentReportView;
|
report: CommentReportView;
|
||||||
|
onResolveReport(form: ResolveCommentReport): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class CommentReport extends Component<CommentReportProps, any> {
|
interface CommentReportState {
|
||||||
|
loading: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class CommentReport extends Component<
|
||||||
|
CommentReportProps,
|
||||||
|
CommentReportState
|
||||||
|
> {
|
||||||
|
state: CommentReportState = {
|
||||||
|
loading: false,
|
||||||
|
};
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
componentWillReceiveProps(
|
||||||
|
nextProps: Readonly<{ children?: InfernoNode } & CommentReportProps>
|
||||||
|
): void {
|
||||||
|
if (this.props != nextProps) {
|
||||||
|
this.setState({ loading: false });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const r = this.props.report;
|
const r = this.props.report;
|
||||||
const comment = r.comment;
|
const comment = r.comment;
|
||||||
|
@ -62,6 +80,26 @@ export class CommentReport extends Component<CommentReportProps, any> {
|
||||||
allLanguages={[]}
|
allLanguages={[]}
|
||||||
siteLanguages={[]}
|
siteLanguages={[]}
|
||||||
hideImages
|
hideImages
|
||||||
|
// All of these are unused, since its viewonly
|
||||||
|
finished={new Map()}
|
||||||
|
onSaveComment={() => {}}
|
||||||
|
onBlockPerson={() => {}}
|
||||||
|
onDeleteComment={() => {}}
|
||||||
|
onRemoveComment={() => {}}
|
||||||
|
onCommentVote={() => {}}
|
||||||
|
onCommentReport={() => {}}
|
||||||
|
onDistinguishComment={() => {}}
|
||||||
|
onAddModToCommunity={() => {}}
|
||||||
|
onAddAdmin={() => {}}
|
||||||
|
onTransferCommunity={() => {}}
|
||||||
|
onPurgeComment={() => {}}
|
||||||
|
onPurgePerson={() => {}}
|
||||||
|
onCommentReplyRead={() => {}}
|
||||||
|
onPersonMentionRead={() => {}}
|
||||||
|
onBanPersonFromCommunity={() => {}}
|
||||||
|
onBanPerson={() => {}}
|
||||||
|
onCreateComment={() => Promise.resolve({ state: "empty" })}
|
||||||
|
onEditComment={() => Promise.resolve({ state: "empty" })}
|
||||||
/>
|
/>
|
||||||
<div>
|
<div>
|
||||||
{i18n.t("reporter")}: <PersonListing person={r.creator} />
|
{i18n.t("reporter")}: <PersonListing person={r.creator} />
|
||||||
|
@ -90,26 +128,27 @@ export class CommentReport extends Component<CommentReportProps, any> {
|
||||||
data-tippy-content={tippyContent}
|
data-tippy-content={tippyContent}
|
||||||
aria-label={tippyContent}
|
aria-label={tippyContent}
|
||||||
>
|
>
|
||||||
|
{this.state.loading ? (
|
||||||
|
<Spinner />
|
||||||
|
) : (
|
||||||
<Icon
|
<Icon
|
||||||
icon="check"
|
icon="check"
|
||||||
classes={`icon-inline ${
|
classes={`icon-inline ${
|
||||||
r.comment_report.resolved ? "text-success" : "text-danger"
|
r.comment_report.resolved ? "text-success" : "text-danger"
|
||||||
}`}
|
}`}
|
||||||
/>
|
/>
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleResolveReport(i: CommentReport) {
|
handleResolveReport(i: CommentReport) {
|
||||||
const auth = myAuth();
|
i.setState({ loading: true });
|
||||||
if (auth) {
|
i.props.onResolveReport({
|
||||||
const form: ResolveCommentReport = {
|
|
||||||
report_id: i.props.report.comment_report.id,
|
report_id: i.props.report.comment_report.id,
|
||||||
resolved: !i.props.report.comment_report.resolved,
|
resolved: !i.props.report.comment_report.resolved,
|
||||||
auth,
|
auth: myAuthRequired(),
|
||||||
};
|
});
|
||||||
WebSocketService.Instance.send(wsClient.resolveCommentReport(form));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component, linkEvent } from "inferno";
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { UserService } from "../../services";
|
import { HttpService, UserService } from "../../services";
|
||||||
import { randomStr, toast, uploadImage } from "../../utils";
|
import { randomStr, toast } from "../../utils";
|
||||||
import { Icon } from "./icon";
|
import { Icon } from "./icon";
|
||||||
|
|
||||||
interface ImageUploadFormProps {
|
interface ImageUploadFormProps {
|
||||||
|
@ -73,26 +73,25 @@ export class ImageUploadForm extends Component<
|
||||||
|
|
||||||
handleImageUpload(i: ImageUploadForm, event: any) {
|
handleImageUpload(i: ImageUploadForm, event: any) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
const file = event.target.files[0];
|
const image = event.target.files[0] as File;
|
||||||
|
|
||||||
i.setState({ loading: true });
|
i.setState({ loading: true });
|
||||||
|
|
||||||
uploadImage(file)
|
HttpService.client.uploadImage({ image }).then(res => {
|
||||||
.then(res => {
|
|
||||||
console.log("pictrs upload:");
|
console.log("pictrs upload:");
|
||||||
console.log(res);
|
console.log(res);
|
||||||
if (res.msg === "ok") {
|
if (res.state === "success") {
|
||||||
i.setState({ loading: false });
|
if (res.data.msg === "ok") {
|
||||||
i.props.onUpload(res.url as string);
|
i.props.onUpload(res.data.url as string);
|
||||||
} else {
|
} else {
|
||||||
i.setState({ loading: false });
|
|
||||||
toast(JSON.stringify(res), "danger");
|
toast(JSON.stringify(res), "danger");
|
||||||
}
|
}
|
||||||
})
|
} else if (res.state === "failed") {
|
||||||
.catch(error => {
|
console.error(res.msg);
|
||||||
|
toast(res.msg, "danger");
|
||||||
|
}
|
||||||
|
|
||||||
i.setState({ loading: false });
|
i.setState({ loading: false });
|
||||||
console.error(error);
|
|
||||||
toast(error, "danger");
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -8,7 +8,7 @@ interface ListingTypeSelectProps {
|
||||||
type_: ListingType;
|
type_: ListingType;
|
||||||
showLocal: boolean;
|
showLocal: boolean;
|
||||||
showSubscribed: boolean;
|
showSubscribed: boolean;
|
||||||
onChange?(val: ListingType): any;
|
onChange(val: ListingType): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ListingTypeSelectState {
|
interface ListingTypeSelectState {
|
||||||
|
@ -29,11 +29,11 @@ export class ListingTypeSelect extends Component<
|
||||||
super(props, context);
|
super(props, context);
|
||||||
}
|
}
|
||||||
|
|
||||||
static getDerivedStateFromProps(props: any): ListingTypeSelectProps {
|
static getDerivedStateFromProps(
|
||||||
|
props: ListingTypeSelectProps
|
||||||
|
): ListingTypeSelectState {
|
||||||
return {
|
return {
|
||||||
type_: props.type_,
|
type_: props.type_,
|
||||||
showLocal: props.showLocal,
|
|
||||||
showSubscribed: props.showSubscribed,
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -97,6 +97,6 @@ export class ListingTypeSelect extends Component<
|
||||||
}
|
}
|
||||||
|
|
||||||
handleTypeChange(i: ListingTypeSelect, event: any) {
|
handleTypeChange(i: ListingTypeSelect, event: any) {
|
||||||
i.props.onChange?.(event.target.value);
|
i.props.onChange(event.target.value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,7 +3,7 @@ import { NoOptionI18nKeys } from "i18next";
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component, linkEvent } from "inferno";
|
||||||
import { Language } from "lemmy-js-client";
|
import { Language } from "lemmy-js-client";
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { UserService } from "../../services";
|
import { HttpService, UserService } from "../../services";
|
||||||
import {
|
import {
|
||||||
concurrentImageUpload,
|
concurrentImageUpload,
|
||||||
customEmojisLookup,
|
customEmojisLookup,
|
||||||
|
@ -19,7 +19,6 @@ import {
|
||||||
setupTippy,
|
setupTippy,
|
||||||
setupTribute,
|
setupTribute,
|
||||||
toast,
|
toast,
|
||||||
uploadImage,
|
|
||||||
} from "../../utils";
|
} from "../../utils";
|
||||||
import { EmojiPicker } from "./emoji-picker";
|
import { EmojiPicker } from "./emoji-picker";
|
||||||
import { Icon, Spinner } from "./icon";
|
import { Icon, Spinner } from "./icon";
|
||||||
|
@ -39,9 +38,9 @@ interface MarkdownTextAreaProps {
|
||||||
finished?: boolean;
|
finished?: boolean;
|
||||||
showLanguage?: boolean;
|
showLanguage?: boolean;
|
||||||
hideNavigationWarnings?: boolean;
|
hideNavigationWarnings?: boolean;
|
||||||
onContentChange?(val: string): any;
|
onContentChange?(val: string): void;
|
||||||
onReplyCancel?(): any;
|
onReplyCancel?(): void;
|
||||||
onSubmit?(msg: { val?: string; formId: string; languageId?: number }): any;
|
onSubmit?(content: string, formId: string, languageId?: number): void;
|
||||||
allLanguages: Language[]; // TODO should probably be nullable
|
allLanguages: Language[]; // TODO should probably be nullable
|
||||||
siteLanguages: number[]; // TODO same
|
siteLanguages: number[]; // TODO same
|
||||||
}
|
}
|
||||||
|
@ -55,8 +54,9 @@ interface MarkdownTextAreaState {
|
||||||
content?: string;
|
content?: string;
|
||||||
languageId?: number;
|
languageId?: number;
|
||||||
previewMode: boolean;
|
previewMode: boolean;
|
||||||
loading: boolean;
|
|
||||||
imageUploadStatus?: ImageUploadStatus;
|
imageUploadStatus?: ImageUploadStatus;
|
||||||
|
loading: boolean;
|
||||||
|
submitted: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class MarkdownTextArea extends Component<
|
export class MarkdownTextArea extends Component<
|
||||||
|
@ -72,6 +72,7 @@ export class MarkdownTextArea extends Component<
|
||||||
languageId: this.props.initialLanguageId,
|
languageId: this.props.initialLanguageId,
|
||||||
previewMode: false,
|
previewMode: false,
|
||||||
loading: false,
|
loading: false,
|
||||||
|
submitted: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
|
@ -105,17 +106,14 @@ export class MarkdownTextArea extends Component<
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate() {
|
|
||||||
if (!this.props.hideNavigationWarnings && this.state.content) {
|
|
||||||
window.onbeforeunload = () => true;
|
|
||||||
} else {
|
|
||||||
window.onbeforeunload = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps: MarkdownTextAreaProps) {
|
componentWillReceiveProps(nextProps: MarkdownTextAreaProps) {
|
||||||
if (nextProps.finished) {
|
if (nextProps.finished) {
|
||||||
this.setState({ previewMode: false, loading: false, content: undefined });
|
this.setState({
|
||||||
|
previewMode: false,
|
||||||
|
imageUploadStatus: undefined,
|
||||||
|
loading: false,
|
||||||
|
content: undefined,
|
||||||
|
});
|
||||||
if (this.props.replyType) {
|
if (this.props.replyType) {
|
||||||
this.props.onReplyCancel?.();
|
this.props.onReplyCancel?.();
|
||||||
}
|
}
|
||||||
|
@ -127,16 +125,23 @@ export class MarkdownTextArea extends Component<
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
window.onbeforeunload = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const languageId = this.state.languageId;
|
const languageId = this.state.languageId;
|
||||||
|
|
||||||
|
// TODO add these prompts back in at some point
|
||||||
|
// <Prompt
|
||||||
|
// when={!this.props.hideNavigationWarnings && this.state.content}
|
||||||
|
// message={i18n.t("block_leaving")}
|
||||||
|
// />
|
||||||
return (
|
return (
|
||||||
<form id={this.formId} onSubmit={linkEvent(this, this.handleSubmit)}>
|
<form id={this.formId} onSubmit={linkEvent(this, this.handleSubmit)}>
|
||||||
<NavigationPrompt when={!!this.state.content} />
|
<NavigationPrompt
|
||||||
|
when={
|
||||||
|
!this.props.hideNavigationWarnings &&
|
||||||
|
!!this.state.content &&
|
||||||
|
!this.state.submitted
|
||||||
|
}
|
||||||
|
/>
|
||||||
<div className="form-group row">
|
<div className="form-group row">
|
||||||
<div className={`col-sm-12`}>
|
<div className={`col-sm-12`}>
|
||||||
<textarea
|
<textarea
|
||||||
|
@ -390,29 +395,29 @@ export class MarkdownTextArea extends Component<
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async uploadSingleImage(i: MarkdownTextArea, file: File) {
|
async uploadSingleImage(i: MarkdownTextArea, image: File) {
|
||||||
try {
|
const res = await HttpService.client.uploadImage({ image });
|
||||||
const res = await uploadImage(file);
|
|
||||||
console.log("pictrs upload:");
|
console.log("pictrs upload:");
|
||||||
console.log(res);
|
console.log(res);
|
||||||
if (res.msg === "ok") {
|
if (res.state === "success") {
|
||||||
const imageMarkdown = `![](${res.url})`;
|
if (res.data.msg === "ok") {
|
||||||
|
const imageMarkdown = `![](${res.data.url})`;
|
||||||
i.setState(({ content }) => ({
|
i.setState(({ content }) => ({
|
||||||
content: content ? `${content}\n${imageMarkdown}` : imageMarkdown,
|
content: content ? `${content}\n${imageMarkdown}` : imageMarkdown,
|
||||||
}));
|
}));
|
||||||
i.contentChange();
|
i.contentChange();
|
||||||
const textarea: any = document.getElementById(i.id);
|
const textarea: any = document.getElementById(i.id);
|
||||||
autosize.update(textarea);
|
autosize.update(textarea);
|
||||||
pictrsDeleteToast(file.name, res.delete_url as string);
|
pictrsDeleteToast(image.name, res.data.delete_url as string);
|
||||||
} else {
|
} else {
|
||||||
throw JSON.stringify(res);
|
throw JSON.stringify(res.data);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} else if (res.state === "failed") {
|
||||||
i.setState({ imageUploadStatus: undefined });
|
i.setState({ imageUploadStatus: undefined });
|
||||||
console.error(error);
|
console.error(res.msg);
|
||||||
toast(error, "danger");
|
toast(res.msg, "danger");
|
||||||
|
|
||||||
throw error;
|
throw res.msg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -486,13 +491,10 @@ export class MarkdownTextArea extends Component<
|
||||||
|
|
||||||
handleSubmit(i: MarkdownTextArea, event: any) {
|
handleSubmit(i: MarkdownTextArea, event: any) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
i.setState({ loading: true });
|
if (i.state.content) {
|
||||||
const msg = {
|
i.setState({ loading: true, submitted: true });
|
||||||
val: i.state.content,
|
i.props.onSubmit?.(i.state.content, i.formId, i.state.languageId);
|
||||||
formId: i.formId,
|
}
|
||||||
languageId: i.state.languageId,
|
|
||||||
};
|
|
||||||
i.props.onSubmit?.(msg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleReplyCancel(i: MarkdownTextArea) {
|
handleReplyCancel(i: MarkdownTextArea) {
|
||||||
|
|
|
@ -1,23 +1,26 @@
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component, InfernoNode, linkEvent } from "inferno";
|
||||||
import { T } from "inferno-i18next-dess";
|
import { T } from "inferno-i18next-dess";
|
||||||
import {
|
import {
|
||||||
ApproveRegistrationApplication,
|
ApproveRegistrationApplication,
|
||||||
RegistrationApplicationView,
|
RegistrationApplicationView,
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { WebSocketService } from "../../services";
|
import { mdToHtml, myAuthRequired } from "../../utils";
|
||||||
import { mdToHtml, myAuth, wsClient } from "../../utils";
|
|
||||||
import { PersonListing } from "../person/person-listing";
|
import { PersonListing } from "../person/person-listing";
|
||||||
|
import { Spinner } from "./icon";
|
||||||
import { MarkdownTextArea } from "./markdown-textarea";
|
import { MarkdownTextArea } from "./markdown-textarea";
|
||||||
import { MomentTime } from "./moment-time";
|
import { MomentTime } from "./moment-time";
|
||||||
|
|
||||||
interface RegistrationApplicationProps {
|
interface RegistrationApplicationProps {
|
||||||
application: RegistrationApplicationView;
|
application: RegistrationApplicationView;
|
||||||
|
onApproveApplication(form: ApproveRegistrationApplication): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface RegistrationApplicationState {
|
interface RegistrationApplicationState {
|
||||||
denyReason?: string;
|
denyReason?: string;
|
||||||
denyExpanded: boolean;
|
denyExpanded: boolean;
|
||||||
|
approveLoading: boolean;
|
||||||
|
denyLoading: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class RegistrationApplication extends Component<
|
export class RegistrationApplication extends Component<
|
||||||
|
@ -27,12 +30,27 @@ export class RegistrationApplication extends Component<
|
||||||
state: RegistrationApplicationState = {
|
state: RegistrationApplicationState = {
|
||||||
denyReason: this.props.application.registration_application.deny_reason,
|
denyReason: this.props.application.registration_application.deny_reason,
|
||||||
denyExpanded: false,
|
denyExpanded: false,
|
||||||
|
approveLoading: false,
|
||||||
|
denyLoading: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
this.handleDenyReasonChange = this.handleDenyReasonChange.bind(this);
|
this.handleDenyReasonChange = this.handleDenyReasonChange.bind(this);
|
||||||
}
|
}
|
||||||
|
componentWillReceiveProps(
|
||||||
|
nextProps: Readonly<
|
||||||
|
{ children?: InfernoNode } & RegistrationApplicationProps
|
||||||
|
>
|
||||||
|
): void {
|
||||||
|
if (this.props != nextProps) {
|
||||||
|
this.setState({
|
||||||
|
denyExpanded: false,
|
||||||
|
approveLoading: false,
|
||||||
|
denyLoading: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const a = this.props.application;
|
const a = this.props.application;
|
||||||
|
@ -99,7 +117,7 @@ export class RegistrationApplication extends Component<
|
||||||
onClick={linkEvent(this, this.handleApprove)}
|
onClick={linkEvent(this, this.handleApprove)}
|
||||||
aria-label={i18n.t("approve")}
|
aria-label={i18n.t("approve")}
|
||||||
>
|
>
|
||||||
{i18n.t("approve")}
|
{this.state.approveLoading ? <Spinner /> : i18n.t("approve")}
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
{(!ra.admin_id || (ra.admin_id && accepted)) && (
|
{(!ra.admin_id || (ra.admin_id && accepted)) && (
|
||||||
|
@ -108,7 +126,7 @@ export class RegistrationApplication extends Component<
|
||||||
onClick={linkEvent(this, this.handleDeny)}
|
onClick={linkEvent(this, this.handleDeny)}
|
||||||
aria-label={i18n.t("deny")}
|
aria-label={i18n.t("deny")}
|
||||||
>
|
>
|
||||||
{i18n.t("deny")}
|
{this.state.denyLoading ? <Spinner /> : i18n.t("deny")}
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -116,35 +134,23 @@ export class RegistrationApplication extends Component<
|
||||||
}
|
}
|
||||||
|
|
||||||
handleApprove(i: RegistrationApplication) {
|
handleApprove(i: RegistrationApplication) {
|
||||||
const auth = myAuth();
|
i.setState({ denyExpanded: false, approveLoading: true });
|
||||||
if (auth) {
|
i.props.onApproveApplication({
|
||||||
i.setState({ denyExpanded: false });
|
|
||||||
const form: ApproveRegistrationApplication = {
|
|
||||||
id: i.props.application.registration_application.id,
|
id: i.props.application.registration_application.id,
|
||||||
approve: true,
|
approve: true,
|
||||||
auth,
|
auth: myAuthRequired(),
|
||||||
};
|
});
|
||||||
WebSocketService.Instance.send(
|
|
||||||
wsClient.approveRegistrationApplication(form)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleDeny(i: RegistrationApplication) {
|
handleDeny(i: RegistrationApplication) {
|
||||||
if (i.state.denyExpanded) {
|
if (i.state.denyExpanded) {
|
||||||
i.setState({ denyExpanded: false });
|
i.setState({ denyExpanded: false, denyLoading: true });
|
||||||
const auth = myAuth();
|
i.props.onApproveApplication({
|
||||||
if (auth) {
|
|
||||||
const form: ApproveRegistrationApplication = {
|
|
||||||
id: i.props.application.registration_application.id,
|
id: i.props.application.registration_application.id,
|
||||||
approve: false,
|
approve: false,
|
||||||
deny_reason: i.state.denyReason,
|
deny_reason: i.state.denyReason,
|
||||||
auth,
|
auth: myAuthRequired(),
|
||||||
};
|
});
|
||||||
WebSocketService.Instance.send(
|
|
||||||
wsClient.approveRegistrationApplication(form)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
i.setState({ denyExpanded: true });
|
i.setState({ denyExpanded: true });
|
||||||
}
|
}
|
||||||
|
|
|
@ -38,12 +38,38 @@ function handleSearch(i: SearchableSelect, e: ChangeEvent<HTMLInputElement>) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function focusSearch(i: SearchableSelect) {
|
||||||
|
if (i.toggleButtonRef.current?.ariaExpanded !== "true") {
|
||||||
|
i.searchInputRef.current?.focus();
|
||||||
|
|
||||||
|
if (i.props.onSearch) {
|
||||||
|
i.props.onSearch("");
|
||||||
|
}
|
||||||
|
|
||||||
|
i.setState({
|
||||||
|
searchText: "",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleChange({ option, i }: { option: Choice; i: SearchableSelect }) {
|
||||||
|
const { onChange, value } = i.props;
|
||||||
|
|
||||||
|
if (option.value !== value?.toString()) {
|
||||||
|
if (onChange) {
|
||||||
|
onChange(option);
|
||||||
|
}
|
||||||
|
|
||||||
|
i.setState({ searchText: "" });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export class SearchableSelect extends Component<
|
export class SearchableSelect extends Component<
|
||||||
SearchableSelectProps,
|
SearchableSelectProps,
|
||||||
SearchableSelectState
|
SearchableSelectState
|
||||||
> {
|
> {
|
||||||
private searchInputRef: RefObject<HTMLInputElement> = createRef();
|
searchInputRef: RefObject<HTMLInputElement> = createRef();
|
||||||
private toggleButtonRef: RefObject<HTMLButtonElement> = createRef();
|
toggleButtonRef: RefObject<HTMLButtonElement> = createRef();
|
||||||
private loadingEllipsesInterval?: NodeJS.Timer = undefined;
|
private loadingEllipsesInterval?: NodeJS.Timer = undefined;
|
||||||
|
|
||||||
state: SearchableSelectState = {
|
state: SearchableSelectState = {
|
||||||
|
@ -55,9 +81,6 @@ export class SearchableSelect extends Component<
|
||||||
constructor(props: SearchableSelectProps, context: any) {
|
constructor(props: SearchableSelectProps, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
|
|
||||||
this.handleChange = this.handleChange.bind(this);
|
|
||||||
this.focusSearch = this.focusSearch.bind(this);
|
|
||||||
|
|
||||||
if (props.value) {
|
if (props.value) {
|
||||||
let selectedIndex = props.options.findIndex(
|
let selectedIndex = props.options.findIndex(
|
||||||
({ value }) => value === props.value?.toString()
|
({ value }) => value === props.value?.toString()
|
||||||
|
@ -86,7 +109,8 @@ export class SearchableSelect extends Component<
|
||||||
className="custom-select text-start"
|
className="custom-select text-start"
|
||||||
aria-haspopup="listbox"
|
aria-haspopup="listbox"
|
||||||
data-bs-toggle="dropdown"
|
data-bs-toggle="dropdown"
|
||||||
onClick={this.focusSearch}
|
onClick={linkEvent(this, focusSearch)}
|
||||||
|
ref={this.toggleButtonRef}
|
||||||
>
|
>
|
||||||
{loading
|
{loading
|
||||||
? `${i18n.t("loading")}${loadingEllipses}`
|
? `${i18n.t("loading")}${loadingEllipses}`
|
||||||
|
@ -127,7 +151,7 @@ export class SearchableSelect extends Component<
|
||||||
aria-disabled={option.disabled}
|
aria-disabled={option.disabled}
|
||||||
disabled={option.disabled}
|
disabled={option.disabled}
|
||||||
aria-selected={selectedIndex === index}
|
aria-selected={selectedIndex === index}
|
||||||
onClick={() => this.handleChange(option)}
|
onClick={linkEvent({ i: this, option }, handleChange)}
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
{option.label}
|
{option.label}
|
||||||
|
@ -138,20 +162,6 @@ export class SearchableSelect extends Component<
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
focusSearch() {
|
|
||||||
if (this.toggleButtonRef.current?.ariaExpanded !== "true") {
|
|
||||||
this.searchInputRef.current?.focus();
|
|
||||||
|
|
||||||
if (this.props.onSearch) {
|
|
||||||
this.props.onSearch("");
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
searchText: "",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static getDerivedStateFromProps({
|
static getDerivedStateFromProps({
|
||||||
value,
|
value,
|
||||||
options,
|
options,
|
||||||
|
@ -189,16 +199,4 @@ export class SearchableSelect extends Component<
|
||||||
clearInterval(this.loadingEllipsesInterval);
|
clearInterval(this.loadingEllipsesInterval);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleChange(option: Choice) {
|
|
||||||
const { onChange, value } = this.props;
|
|
||||||
|
|
||||||
if (option.value !== value?.toString()) {
|
|
||||||
if (onChange) {
|
|
||||||
onChange(option);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({ searchText: "" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { Icon } from "./icon";
|
||||||
|
|
||||||
interface SortSelectProps {
|
interface SortSelectProps {
|
||||||
sort: SortType;
|
sort: SortType;
|
||||||
onChange?(val: SortType): any;
|
onChange(val: SortType): void;
|
||||||
hideHot?: boolean;
|
hideHot?: boolean;
|
||||||
hideMostComments?: boolean;
|
hideMostComments?: boolean;
|
||||||
}
|
}
|
||||||
|
@ -25,7 +25,7 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
}
|
}
|
||||||
|
|
||||||
static getDerivedStateFromProps(props: any): SortSelectState {
|
static getDerivedStateFromProps(props: SortSelectProps): SortSelectState {
|
||||||
return {
|
return {
|
||||||
sort: props.sort,
|
sort: props.sort,
|
||||||
};
|
};
|
||||||
|
@ -85,6 +85,6 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleSortChange(i: SortSelect, event: any) {
|
handleSortChange(i: SortSelect, event: any) {
|
||||||
i.props.onChange?.(event.target.value);
|
i.props.onChange(event.target.value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,32 +1,26 @@
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component, linkEvent } from "inferno";
|
||||||
import {
|
import {
|
||||||
CommunityResponse,
|
CommunityResponse,
|
||||||
FollowCommunity,
|
|
||||||
GetSiteResponse,
|
GetSiteResponse,
|
||||||
ListCommunities,
|
ListCommunities,
|
||||||
ListCommunitiesResponse,
|
ListCommunitiesResponse,
|
||||||
ListingType,
|
ListingType,
|
||||||
UserOperation,
|
|
||||||
wsJsonToRes,
|
|
||||||
wsUserOp,
|
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { Subscription } from "rxjs";
|
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { InitialFetchRequest } from "../../interfaces";
|
import { InitialFetchRequest } from "../../interfaces";
|
||||||
import { WebSocketService } from "../../services";
|
import { FirstLoadService } from "../../services/FirstLoadService";
|
||||||
|
import { HttpService, RequestState } from "../../services/HttpService";
|
||||||
import {
|
import {
|
||||||
QueryParams,
|
QueryParams,
|
||||||
|
editCommunity,
|
||||||
getPageFromString,
|
getPageFromString,
|
||||||
getQueryParams,
|
getQueryParams,
|
||||||
getQueryString,
|
getQueryString,
|
||||||
isBrowser,
|
|
||||||
myAuth,
|
myAuth,
|
||||||
|
myAuthRequired,
|
||||||
numToSI,
|
numToSI,
|
||||||
setIsoData,
|
setIsoData,
|
||||||
showLocal,
|
showLocal,
|
||||||
toast,
|
|
||||||
wsClient,
|
|
||||||
wsSubscribe,
|
|
||||||
} from "../../utils";
|
} from "../../utils";
|
||||||
import { HtmlTags } from "../common/html-tags";
|
import { HtmlTags } from "../common/html-tags";
|
||||||
import { Spinner } from "../common/icon";
|
import { Spinner } from "../common/icon";
|
||||||
|
@ -37,10 +31,10 @@ import { CommunityLink } from "./community-link";
|
||||||
const communityLimit = 50;
|
const communityLimit = 50;
|
||||||
|
|
||||||
interface CommunitiesState {
|
interface CommunitiesState {
|
||||||
listCommunitiesResponse?: ListCommunitiesResponse;
|
listCommunitiesResponse: RequestState<ListCommunitiesResponse>;
|
||||||
loading: boolean;
|
|
||||||
siteRes: GetSiteResponse;
|
siteRes: GetSiteResponse;
|
||||||
searchText: string;
|
searchText: string;
|
||||||
|
isIsomorphic: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface CommunitiesProps {
|
interface CommunitiesProps {
|
||||||
|
@ -48,51 +42,17 @@ interface CommunitiesProps {
|
||||||
page: number;
|
page: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getCommunitiesQueryParams() {
|
|
||||||
return getQueryParams<CommunitiesProps>({
|
|
||||||
listingType: getListingTypeFromQuery,
|
|
||||||
page: getPageFromString,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function getListingTypeFromQuery(listingType?: string): ListingType {
|
function getListingTypeFromQuery(listingType?: string): ListingType {
|
||||||
return listingType ? (listingType as ListingType) : "Local";
|
return listingType ? (listingType as ListingType) : "Local";
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleSubscribe(community_id: number, follow: boolean) {
|
|
||||||
const auth = myAuth();
|
|
||||||
if (auth) {
|
|
||||||
const form: FollowCommunity = {
|
|
||||||
community_id,
|
|
||||||
follow,
|
|
||||||
auth,
|
|
||||||
};
|
|
||||||
|
|
||||||
WebSocketService.Instance.send(wsClient.followCommunity(form));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function refetch() {
|
|
||||||
const { listingType, page } = getCommunitiesQueryParams();
|
|
||||||
|
|
||||||
const listCommunitiesForm: ListCommunities = {
|
|
||||||
type_: listingType,
|
|
||||||
sort: "TopMonth",
|
|
||||||
limit: communityLimit,
|
|
||||||
page,
|
|
||||||
auth: myAuth(false),
|
|
||||||
};
|
|
||||||
|
|
||||||
WebSocketService.Instance.send(wsClient.listCommunities(listCommunitiesForm));
|
|
||||||
}
|
|
||||||
|
|
||||||
export class Communities extends Component<any, CommunitiesState> {
|
export class Communities extends Component<any, CommunitiesState> {
|
||||||
private subscription?: Subscription;
|
|
||||||
private isoData = setIsoData(this.context);
|
private isoData = setIsoData(this.context);
|
||||||
state: CommunitiesState = {
|
state: CommunitiesState = {
|
||||||
loading: true,
|
listCommunitiesResponse: { state: "empty" },
|
||||||
siteRes: this.isoData.site_res,
|
siteRes: this.isoData.site_res,
|
||||||
searchText: "",
|
searchText: "",
|
||||||
|
isIsomorphic: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
|
@ -100,25 +60,19 @@ export class Communities extends Component<any, CommunitiesState> {
|
||||||
this.handlePageChange = this.handlePageChange.bind(this);
|
this.handlePageChange = this.handlePageChange.bind(this);
|
||||||
this.handleListingTypeChange = this.handleListingTypeChange.bind(this);
|
this.handleListingTypeChange = this.handleListingTypeChange.bind(this);
|
||||||
|
|
||||||
this.parseMessage = this.parseMessage.bind(this);
|
|
||||||
this.subscription = wsSubscribe(this.parseMessage);
|
|
||||||
|
|
||||||
// Only fetch the data if coming from another route
|
// Only fetch the data if coming from another route
|
||||||
if (this.isoData.path === this.context.router.route.match.url) {
|
if (FirstLoadService.isFirstLoad) {
|
||||||
const listRes = this.isoData.routeData[0] as ListCommunitiesResponse;
|
|
||||||
this.state = {
|
this.state = {
|
||||||
...this.state,
|
...this.state,
|
||||||
listCommunitiesResponse: listRes,
|
listCommunitiesResponse: this.isoData.routeData[0],
|
||||||
loading: false,
|
isIsomorphic: true,
|
||||||
};
|
};
|
||||||
} else {
|
|
||||||
refetch();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
async componentDidMount() {
|
||||||
if (isBrowser()) {
|
if (!this.state.isIsomorphic) {
|
||||||
this.subscription?.unsubscribe();
|
await this.refetch();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -128,20 +82,17 @@ export class Communities extends Component<any, CommunitiesState> {
|
||||||
}`;
|
}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
renderListings() {
|
||||||
const { listingType, page } = getCommunitiesQueryParams();
|
switch (this.state.listCommunitiesResponse.state) {
|
||||||
|
case "loading":
|
||||||
return (
|
return (
|
||||||
<div className="container-lg">
|
|
||||||
<HtmlTags
|
|
||||||
title={this.documentTitle}
|
|
||||||
path={this.context.router.route.match.url}
|
|
||||||
/>
|
|
||||||
{this.state.loading ? (
|
|
||||||
<h5>
|
<h5>
|
||||||
<Spinner large />
|
<Spinner large />
|
||||||
</h5>
|
</h5>
|
||||||
) : (
|
);
|
||||||
|
case "success": {
|
||||||
|
const { listingType, page } = this.getCommunitiesQueryParams();
|
||||||
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
|
@ -182,7 +133,8 @@ export class Communities extends Component<any, CommunitiesState> {
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{this.state.listCommunitiesResponse?.communities.map(cv => (
|
{this.state.listCommunitiesResponse.data.communities.map(
|
||||||
|
cv => (
|
||||||
<tr key={cv.community.id}>
|
<tr key={cv.community.id}>
|
||||||
<td>
|
<td>
|
||||||
<CommunityLink community={cv.community} />
|
<CommunityLink community={cv.community} />
|
||||||
|
@ -204,8 +156,12 @@ export class Communities extends Component<any, CommunitiesState> {
|
||||||
<button
|
<button
|
||||||
className="btn btn-link d-inline-block"
|
className="btn btn-link d-inline-block"
|
||||||
onClick={linkEvent(
|
onClick={linkEvent(
|
||||||
cv.community.id,
|
{
|
||||||
this.handleUnsubscribe
|
i: this,
|
||||||
|
communityId: cv.community.id,
|
||||||
|
follow: false,
|
||||||
|
},
|
||||||
|
this.handleFollow
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{i18n.t("unsubscribe")}
|
{i18n.t("unsubscribe")}
|
||||||
|
@ -215,8 +171,12 @@ export class Communities extends Component<any, CommunitiesState> {
|
||||||
<button
|
<button
|
||||||
className="btn btn-link d-inline-block"
|
className="btn btn-link d-inline-block"
|
||||||
onClick={linkEvent(
|
onClick={linkEvent(
|
||||||
cv.community.id,
|
{
|
||||||
this.handleSubscribe
|
i: this,
|
||||||
|
communityId: cv.community.id,
|
||||||
|
follow: true,
|
||||||
|
},
|
||||||
|
this.handleFollow
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{i18n.t("subscribe")}
|
{i18n.t("subscribe")}
|
||||||
|
@ -229,13 +189,26 @@ export class Communities extends Component<any, CommunitiesState> {
|
||||||
)}
|
)}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
)
|
||||||
|
)}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<Paginator page={page} onChange={this.handlePageChange} />
|
<Paginator page={page} onChange={this.handlePageChange} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="container-lg">
|
||||||
|
<HtmlTags
|
||||||
|
title={this.documentTitle}
|
||||||
|
path={this.context.router.route.match.url}
|
||||||
|
/>
|
||||||
|
{this.renderListings()}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -266,9 +239,9 @@ export class Communities extends Component<any, CommunitiesState> {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
updateUrl({ listingType, page }: Partial<CommunitiesProps>) {
|
async updateUrl({ listingType, page }: Partial<CommunitiesProps>) {
|
||||||
const { listingType: urlListingType, page: urlPage } =
|
const { listingType: urlListingType, page: urlPage } =
|
||||||
getCommunitiesQueryParams();
|
this.getCommunitiesQueryParams();
|
||||||
|
|
||||||
const queryParams: QueryParams<CommunitiesProps> = {
|
const queryParams: QueryParams<CommunitiesProps> = {
|
||||||
listingType: listingType ?? urlListingType,
|
listingType: listingType ?? urlListingType,
|
||||||
|
@ -277,7 +250,7 @@ export class Communities extends Component<any, CommunitiesState> {
|
||||||
|
|
||||||
this.props.history.push(`/communities${getQueryString(queryParams)}`);
|
this.props.history.push(`/communities${getQueryString(queryParams)}`);
|
||||||
|
|
||||||
refetch();
|
await this.refetch();
|
||||||
}
|
}
|
||||||
|
|
||||||
handlePageChange(page: number) {
|
handlePageChange(page: number) {
|
||||||
|
@ -291,19 +264,12 @@ export class Communities extends Component<any, CommunitiesState> {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
handleUnsubscribe(communityId: number) {
|
|
||||||
toggleSubscribe(communityId, false);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleSubscribe(communityId: number) {
|
|
||||||
toggleSubscribe(communityId, true);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleSearchChange(i: Communities, event: any) {
|
handleSearchChange(i: Communities, event: any) {
|
||||||
i.setState({ searchText: event.target.value });
|
i.setState({ searchText: event.target.value });
|
||||||
}
|
}
|
||||||
|
|
||||||
handleSearchSubmit(i: Communities) {
|
handleSearchSubmit(i: Communities, event: any) {
|
||||||
|
event.preventDefault();
|
||||||
const searchParamEncoded = encodeURIComponent(i.state.searchText);
|
const searchParamEncoded = encodeURIComponent(i.state.searchText);
|
||||||
i.context.router.history.push(`/search?q=${searchParamEncoded}`);
|
i.context.router.history.push(`/search?q=${searchParamEncoded}`);
|
||||||
}
|
}
|
||||||
|
@ -312,7 +278,9 @@ export class Communities extends Component<any, CommunitiesState> {
|
||||||
query: { listingType, page },
|
query: { listingType, page },
|
||||||
client,
|
client,
|
||||||
auth,
|
auth,
|
||||||
}: InitialFetchRequest<QueryParams<CommunitiesProps>>): Promise<any>[] {
|
}: InitialFetchRequest<QueryParams<CommunitiesProps>>): Promise<
|
||||||
|
RequestState<any>
|
||||||
|
>[] {
|
||||||
const listCommunitiesForm: ListCommunities = {
|
const listCommunitiesForm: ListCommunities = {
|
||||||
type_: getListingTypeFromQuery(listingType),
|
type_: getListingTypeFromQuery(listingType),
|
||||||
sort: "TopMonth",
|
sort: "TopMonth",
|
||||||
|
@ -324,33 +292,56 @@ export class Communities extends Component<any, CommunitiesState> {
|
||||||
return [client.listCommunities(listCommunitiesForm)];
|
return [client.listCommunities(listCommunitiesForm)];
|
||||||
}
|
}
|
||||||
|
|
||||||
parseMessage(msg: any) {
|
getCommunitiesQueryParams() {
|
||||||
const op = wsUserOp(msg);
|
return getQueryParams<CommunitiesProps>({
|
||||||
console.log(msg);
|
listingType: getListingTypeFromQuery,
|
||||||
if (msg.error) {
|
page: getPageFromString,
|
||||||
toast(i18n.t(msg.error), "danger");
|
});
|
||||||
} else if (op === UserOperation.ListCommunities) {
|
}
|
||||||
const data = wsJsonToRes<ListCommunitiesResponse>(msg);
|
|
||||||
this.setState({ listCommunitiesResponse: data, loading: false });
|
|
||||||
window.scrollTo(0, 0);
|
|
||||||
} else if (op === UserOperation.FollowCommunity) {
|
|
||||||
const {
|
|
||||||
community_view: {
|
|
||||||
community,
|
|
||||||
subscribed,
|
|
||||||
counts: { subscribers },
|
|
||||||
},
|
|
||||||
} = wsJsonToRes<CommunityResponse>(msg);
|
|
||||||
const res = this.state.listCommunitiesResponse;
|
|
||||||
const found = res?.communities.find(
|
|
||||||
({ community: { id } }) => id == community.id
|
|
||||||
);
|
|
||||||
|
|
||||||
if (found) {
|
async handleFollow(data: {
|
||||||
found.subscribed = subscribed;
|
i: Communities;
|
||||||
found.counts.subscribers = subscribers;
|
communityId: number;
|
||||||
this.setState(this.state);
|
follow: boolean;
|
||||||
|
}) {
|
||||||
|
const res = await HttpService.client.followCommunity({
|
||||||
|
community_id: data.communityId,
|
||||||
|
follow: data.follow,
|
||||||
|
auth: myAuthRequired(),
|
||||||
|
});
|
||||||
|
data.i.findAndUpdateCommunity(res);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async refetch() {
|
||||||
|
this.setState({ listCommunitiesResponse: { state: "loading" } });
|
||||||
|
|
||||||
|
const { listingType, page } = this.getCommunitiesQueryParams();
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
listCommunitiesResponse: await HttpService.client.listCommunities({
|
||||||
|
type_: listingType,
|
||||||
|
sort: "TopMonth",
|
||||||
|
limit: communityLimit,
|
||||||
|
page,
|
||||||
|
auth: myAuth(),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
window.scrollTo(0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
findAndUpdateCommunity(res: RequestState<CommunityResponse>) {
|
||||||
|
this.setState(s => {
|
||||||
|
if (
|
||||||
|
s.listCommunitiesResponse.state == "success" &&
|
||||||
|
res.state == "success"
|
||||||
|
) {
|
||||||
|
s.listCommunitiesResponse.data.communities = editCommunity(
|
||||||
|
res.data.community_view,
|
||||||
|
s.listCommunitiesResponse.data.communities
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return s;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,24 +1,12 @@
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component, linkEvent } from "inferno";
|
||||||
import {
|
import {
|
||||||
CommunityResponse,
|
|
||||||
CommunityView,
|
CommunityView,
|
||||||
CreateCommunity,
|
CreateCommunity,
|
||||||
EditCommunity,
|
EditCommunity,
|
||||||
Language,
|
Language,
|
||||||
UserOperation,
|
|
||||||
wsJsonToRes,
|
|
||||||
wsUserOp,
|
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { Subscription } from "rxjs";
|
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { UserService, WebSocketService } from "../../services";
|
import { capitalizeFirstLetter, myAuthRequired, randomStr } from "../../utils";
|
||||||
import {
|
|
||||||
capitalizeFirstLetter,
|
|
||||||
myAuth,
|
|
||||||
randomStr,
|
|
||||||
wsClient,
|
|
||||||
wsSubscribe,
|
|
||||||
} 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";
|
||||||
|
@ -31,9 +19,9 @@ interface CommunityFormProps {
|
||||||
siteLanguages: number[];
|
siteLanguages: number[];
|
||||||
communityLanguages?: number[];
|
communityLanguages?: number[];
|
||||||
onCancel?(): any;
|
onCancel?(): any;
|
||||||
onCreate?(community: CommunityView): any;
|
onUpsertCommunity(form: CreateCommunity | EditCommunity): void;
|
||||||
onEdit?(community: CommunityView): any;
|
|
||||||
enableNsfw?: boolean;
|
enableNsfw?: boolean;
|
||||||
|
loading?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface CommunityFormState {
|
interface CommunityFormState {
|
||||||
|
@ -47,7 +35,7 @@ interface CommunityFormState {
|
||||||
posting_restricted_to_mods?: boolean;
|
posting_restricted_to_mods?: boolean;
|
||||||
discussion_languages?: number[];
|
discussion_languages?: number[];
|
||||||
};
|
};
|
||||||
loading: boolean;
|
submitted: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class CommunityForm extends Component<
|
export class CommunityForm extends Component<
|
||||||
|
@ -55,11 +43,10 @@ export class CommunityForm extends Component<
|
||||||
CommunityFormState
|
CommunityFormState
|
||||||
> {
|
> {
|
||||||
private id = `community-form-${randomStr()}`;
|
private id = `community-form-${randomStr()}`;
|
||||||
private subscription?: Subscription;
|
|
||||||
|
|
||||||
state: CommunityFormState = {
|
state: CommunityFormState = {
|
||||||
form: {},
|
form: {},
|
||||||
loading: false,
|
submitted: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
|
@ -77,12 +64,11 @@ export class CommunityForm extends Component<
|
||||||
this.handleDiscussionLanguageChange =
|
this.handleDiscussionLanguageChange =
|
||||||
this.handleDiscussionLanguageChange.bind(this);
|
this.handleDiscussionLanguageChange.bind(this);
|
||||||
|
|
||||||
this.parseMessage = this.parseMessage.bind(this);
|
|
||||||
this.subscription = wsSubscribe(this.parseMessage);
|
|
||||||
const cv = this.props.community_view;
|
const cv = this.props.community_view;
|
||||||
|
|
||||||
if (cv) {
|
if (cv) {
|
||||||
this.state = {
|
this.state = {
|
||||||
|
...this.state,
|
||||||
form: {
|
form: {
|
||||||
name: cv.community.name,
|
name: cv.community.name,
|
||||||
title: cv.community.title,
|
title: cv.community.title,
|
||||||
|
@ -93,43 +79,24 @@ export class CommunityForm extends Component<
|
||||||
posting_restricted_to_mods: cv.community.posting_restricted_to_mods,
|
posting_restricted_to_mods: cv.community.posting_restricted_to_mods,
|
||||||
discussion_languages: this.props.communityLanguages,
|
discussion_languages: this.props.communityLanguages,
|
||||||
},
|
},
|
||||||
loading: false,
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate() {
|
|
||||||
if (
|
|
||||||
!this.state.loading &&
|
|
||||||
(this.state.form.name ||
|
|
||||||
this.state.form.title ||
|
|
||||||
this.state.form.description)
|
|
||||||
) {
|
|
||||||
window.onbeforeunload = () => true;
|
|
||||||
} else {
|
|
||||||
window.onbeforeunload = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
this.subscription?.unsubscribe();
|
|
||||||
window.onbeforeunload = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<>
|
<form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
|
||||||
<NavigationPrompt
|
<NavigationPrompt
|
||||||
when={
|
when={
|
||||||
!this.state.loading &&
|
!this.props.loading &&
|
||||||
!!(
|
!!(
|
||||||
this.state.form.name ||
|
this.state.form.name ||
|
||||||
this.state.form.title ||
|
this.state.form.title ||
|
||||||
this.state.form.description
|
this.state.form.description
|
||||||
)
|
) &&
|
||||||
|
!this.state.submitted
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
|
|
||||||
{!this.props.community_view && (
|
{!this.props.community_view && (
|
||||||
<div className="form-group row">
|
<div className="form-group row">
|
||||||
<label
|
<label
|
||||||
|
@ -217,6 +184,7 @@ export class CommunityForm extends Component<
|
||||||
initialContent={this.state.form.description}
|
initialContent={this.state.form.description}
|
||||||
placeholder={i18n.t("description")}
|
placeholder={i18n.t("description")}
|
||||||
onContentChange={this.handleCommunityDescriptionChange}
|
onContentChange={this.handleCommunityDescriptionChange}
|
||||||
|
hideNavigationWarnings
|
||||||
allLanguages={[]}
|
allLanguages={[]}
|
||||||
siteLanguages={[]}
|
siteLanguages={[]}
|
||||||
/>
|
/>
|
||||||
|
@ -273,9 +241,9 @@ export class CommunityForm 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 />
|
||||||
) : this.props.community_view ? (
|
) : this.props.community_view ? (
|
||||||
capitalizeFirstLetter(i18n.t("save"))
|
capitalizeFirstLetter(i18n.t("save"))
|
||||||
|
@ -295,21 +263,19 @@ export class CommunityForm extends Component<
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleCreateCommunitySubmit(i: CommunityForm, event: any) {
|
handleCreateCommunitySubmit(i: CommunityForm, event: any) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
i.setState({ loading: true });
|
i.setState({ submitted: true });
|
||||||
const cForm = i.state.form;
|
const cForm = i.state.form;
|
||||||
const auth = myAuth();
|
const auth = myAuthRequired();
|
||||||
|
|
||||||
const cv = i.props.community_view;
|
const cv = i.props.community_view;
|
||||||
|
|
||||||
if (auth) {
|
|
||||||
if (cv) {
|
if (cv) {
|
||||||
const form: EditCommunity = {
|
i.props.onUpsertCommunity({
|
||||||
community_id: cv.community.id,
|
community_id: cv.community.id,
|
||||||
title: cForm.title,
|
title: cForm.title,
|
||||||
description: cForm.description,
|
description: cForm.description,
|
||||||
|
@ -319,12 +285,10 @@ export class CommunityForm extends Component<
|
||||||
posting_restricted_to_mods: cForm.posting_restricted_to_mods,
|
posting_restricted_to_mods: cForm.posting_restricted_to_mods,
|
||||||
discussion_languages: cForm.discussion_languages,
|
discussion_languages: cForm.discussion_languages,
|
||||||
auth,
|
auth,
|
||||||
};
|
});
|
||||||
|
|
||||||
WebSocketService.Instance.send(wsClient.editCommunity(form));
|
|
||||||
} else {
|
} else {
|
||||||
if (cForm.title && cForm.name) {
|
if (cForm.title && cForm.name) {
|
||||||
const form: CreateCommunity = {
|
i.props.onUpsertCommunity({
|
||||||
name: cForm.name,
|
name: cForm.name,
|
||||||
title: cForm.title,
|
title: cForm.title,
|
||||||
description: cForm.description,
|
description: cForm.description,
|
||||||
|
@ -334,22 +298,17 @@ export class CommunityForm extends Component<
|
||||||
posting_restricted_to_mods: cForm.posting_restricted_to_mods,
|
posting_restricted_to_mods: cForm.posting_restricted_to_mods,
|
||||||
discussion_languages: cForm.discussion_languages,
|
discussion_languages: cForm.discussion_languages,
|
||||||
auth,
|
auth,
|
||||||
};
|
});
|
||||||
WebSocketService.Instance.send(wsClient.createCommunity(form));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
i.setState(i.state);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleCommunityNameChange(i: CommunityForm, event: any) {
|
handleCommunityNameChange(i: CommunityForm, event: any) {
|
||||||
i.state.form.name = event.target.value;
|
i.setState(s => ((s.form.name = event.target.value), s));
|
||||||
i.setState(i.state);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleCommunityTitleChange(i: CommunityForm, event: any) {
|
handleCommunityTitleChange(i: CommunityForm, event: any) {
|
||||||
i.state.form.title = event.target.value;
|
i.setState(s => ((s.form.title = event.target.value), s));
|
||||||
i.setState(i.state);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleCommunityDescriptionChange(val: string) {
|
handleCommunityDescriptionChange(val: string) {
|
||||||
|
@ -357,13 +316,13 @@ export class CommunityForm extends Component<
|
||||||
}
|
}
|
||||||
|
|
||||||
handleCommunityNsfwChange(i: CommunityForm, event: any) {
|
handleCommunityNsfwChange(i: CommunityForm, event: any) {
|
||||||
i.state.form.nsfw = event.target.checked;
|
i.setState(s => ((s.form.nsfw = event.target.checked), s));
|
||||||
i.setState(i.state);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleCommunityPostingRestrictedToMods(i: CommunityForm, event: any) {
|
handleCommunityPostingRestrictedToMods(i: CommunityForm, event: any) {
|
||||||
i.state.form.posting_restricted_to_mods = event.target.checked;
|
i.setState(
|
||||||
i.setState(i.state);
|
s => ((s.form.posting_restricted_to_mods = event.target.checked), s)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleCancel(i: CommunityForm) {
|
handleCancel(i: CommunityForm) {
|
||||||
|
@ -389,56 +348,4 @@ export class CommunityForm extends Component<
|
||||||
handleDiscussionLanguageChange(val: number[]) {
|
handleDiscussionLanguageChange(val: number[]) {
|
||||||
this.setState(s => ((s.form.discussion_languages = val), s));
|
this.setState(s => ((s.form.discussion_languages = val), s));
|
||||||
}
|
}
|
||||||
|
|
||||||
parseMessage(msg: any) {
|
|
||||||
const op = wsUserOp(msg);
|
|
||||||
console.log(msg);
|
|
||||||
if (msg.error) {
|
|
||||||
// Errors handled by top level pages
|
|
||||||
// toast(i18n.t(msg.error), "danger");
|
|
||||||
this.setState({ loading: false });
|
|
||||||
return;
|
|
||||||
} else if (op == UserOperation.CreateCommunity) {
|
|
||||||
const data = wsJsonToRes<CommunityResponse>(msg);
|
|
||||||
this.props.onCreate?.(data.community_view);
|
|
||||||
|
|
||||||
// Update myUserInfo
|
|
||||||
const community = data.community_view.community;
|
|
||||||
|
|
||||||
const mui = UserService.Instance.myUserInfo;
|
|
||||||
if (mui) {
|
|
||||||
const person = mui.local_user_view.person;
|
|
||||||
mui.follows.push({
|
|
||||||
community,
|
|
||||||
follower: person,
|
|
||||||
});
|
|
||||||
mui.moderates.push({
|
|
||||||
community,
|
|
||||||
moderator: person,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else if (op == UserOperation.EditCommunity) {
|
|
||||||
const data = wsJsonToRes<CommunityResponse>(msg);
|
|
||||||
this.setState({ loading: false });
|
|
||||||
this.props.onEdit?.(data.community_view);
|
|
||||||
const community = data.community_view.community;
|
|
||||||
|
|
||||||
const mui = UserService.Instance.myUserInfo;
|
|
||||||
if (mui) {
|
|
||||||
const followFound = mui.follows.findIndex(
|
|
||||||
f => f.community.id == community.id
|
|
||||||
);
|
|
||||||
if (followFound) {
|
|
||||||
mui.follows[followFound].community = community;
|
|
||||||
}
|
|
||||||
|
|
||||||
const moderatesFound = mui.moderates.findIndex(
|
|
||||||
f => f.community.id == community.id
|
|
||||||
);
|
|
||||||
if (moderatesFound) {
|
|
||||||
mui.moderates[moderatesFound].community = community;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because it is too large
Load diff
|
@ -1,16 +1,12 @@
|
||||||
import { Component } from "inferno";
|
import { Component } from "inferno";
|
||||||
import { CommunityView, GetSiteResponse } from "lemmy-js-client";
|
|
||||||
import { Subscription } from "rxjs";
|
|
||||||
import { i18n } from "../../i18next";
|
|
||||||
import {
|
import {
|
||||||
enableNsfw,
|
CreateCommunity as CreateCommunityI,
|
||||||
isBrowser,
|
GetSiteResponse,
|
||||||
setIsoData,
|
} from "lemmy-js-client";
|
||||||
toast,
|
import { i18n } from "../../i18next";
|
||||||
wsSubscribe,
|
import { HttpService } from "../../services/HttpService";
|
||||||
} from "../../utils";
|
import { enableNsfw, setIsoData } from "../../utils";
|
||||||
import { HtmlTags } from "../common/html-tags";
|
import { HtmlTags } from "../common/html-tags";
|
||||||
import { Spinner } from "../common/icon";
|
|
||||||
import { CommunityForm } from "./community-form";
|
import { CommunityForm } from "./community-form";
|
||||||
|
|
||||||
interface CreateCommunityState {
|
interface CreateCommunityState {
|
||||||
|
@ -20,7 +16,6 @@ interface CreateCommunityState {
|
||||||
|
|
||||||
export class CreateCommunity extends Component<any, CreateCommunityState> {
|
export class CreateCommunity extends Component<any, CreateCommunityState> {
|
||||||
private isoData = setIsoData(this.context);
|
private isoData = setIsoData(this.context);
|
||||||
private subscription?: Subscription;
|
|
||||||
state: CreateCommunityState = {
|
state: CreateCommunityState = {
|
||||||
siteRes: this.isoData.site_res,
|
siteRes: this.isoData.site_res,
|
||||||
loading: false,
|
loading: false,
|
||||||
|
@ -28,15 +23,6 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
this.handleCommunityCreate = this.handleCommunityCreate.bind(this);
|
this.handleCommunityCreate = this.handleCommunityCreate.bind(this);
|
||||||
|
|
||||||
this.parseMessage = this.parseMessage.bind(this);
|
|
||||||
this.subscription = wsSubscribe(this.parseMessage);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
if (isBrowser()) {
|
|
||||||
this.subscription?.unsubscribe();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
get documentTitle(): string {
|
get documentTitle(): string {
|
||||||
|
@ -52,35 +38,33 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
|
||||||
title={this.documentTitle}
|
title={this.documentTitle}
|
||||||
path={this.context.router.route.match.url}
|
path={this.context.router.route.match.url}
|
||||||
/>
|
/>
|
||||||
{this.state.loading ? (
|
|
||||||
<h5>
|
|
||||||
<Spinner large />
|
|
||||||
</h5>
|
|
||||||
) : (
|
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
|
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
|
||||||
<h5>{i18n.t("create_community")}</h5>
|
<h5>{i18n.t("create_community")}</h5>
|
||||||
<CommunityForm
|
<CommunityForm
|
||||||
onCreate={this.handleCommunityCreate}
|
onUpsertCommunity={this.handleCommunityCreate}
|
||||||
enableNsfw={enableNsfw(this.state.siteRes)}
|
enableNsfw={enableNsfw(this.state.siteRes)}
|
||||||
allLanguages={this.state.siteRes.all_languages}
|
allLanguages={this.state.siteRes.all_languages}
|
||||||
siteLanguages={this.state.siteRes.discussion_languages}
|
siteLanguages={this.state.siteRes.discussion_languages}
|
||||||
communityLanguages={this.state.siteRes.discussion_languages}
|
communityLanguages={this.state.siteRes.discussion_languages}
|
||||||
|
loading={this.state.loading}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleCommunityCreate(cv: CommunityView) {
|
async handleCommunityCreate(form: CreateCommunityI) {
|
||||||
this.props.history.push(`/c/${cv.community.name}`);
|
this.setState({ loading: true });
|
||||||
}
|
|
||||||
|
|
||||||
parseMessage(msg: any) {
|
const res = await HttpService.client.createCommunity(form);
|
||||||
if (msg.error) {
|
|
||||||
toast(i18n.t(msg.error), "danger");
|
if (res.state === "success") {
|
||||||
|
const name = res.data.community_view.community.name;
|
||||||
|
this.props.history.replace(`/c/${name}`);
|
||||||
|
} else {
|
||||||
|
this.setState({ loading: false });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component, InfernoNode, linkEvent } from "inferno";
|
||||||
import { Link } from "inferno-router";
|
import { Link } from "inferno-router";
|
||||||
import {
|
import {
|
||||||
AddModToCommunity,
|
AddModToCommunity,
|
||||||
|
@ -6,6 +6,7 @@ import {
|
||||||
CommunityModeratorView,
|
CommunityModeratorView,
|
||||||
CommunityView,
|
CommunityView,
|
||||||
DeleteCommunity,
|
DeleteCommunity,
|
||||||
|
EditCommunity,
|
||||||
FollowCommunity,
|
FollowCommunity,
|
||||||
Language,
|
Language,
|
||||||
PersonView,
|
PersonView,
|
||||||
|
@ -13,7 +14,7 @@ import {
|
||||||
RemoveCommunity,
|
RemoveCommunity,
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { UserService, WebSocketService } from "../../services";
|
import { UserService } from "../../services";
|
||||||
import {
|
import {
|
||||||
amAdmin,
|
amAdmin,
|
||||||
amMod,
|
amMod,
|
||||||
|
@ -21,9 +22,8 @@ import {
|
||||||
getUnixTime,
|
getUnixTime,
|
||||||
hostname,
|
hostname,
|
||||||
mdToHtml,
|
mdToHtml,
|
||||||
myAuth,
|
myAuthRequired,
|
||||||
numToSI,
|
numToSI,
|
||||||
wsClient,
|
|
||||||
} from "../../utils";
|
} from "../../utils";
|
||||||
import { BannerIconHeader } from "../common/banner-icon-header";
|
import { BannerIconHeader } from "../common/banner-icon-header";
|
||||||
import { Icon, PurgeWarning, Spinner } from "../common/icon";
|
import { Icon, PurgeWarning, Spinner } from "../common/icon";
|
||||||
|
@ -42,6 +42,13 @@ interface SidebarProps {
|
||||||
enableNsfw?: boolean;
|
enableNsfw?: boolean;
|
||||||
showIcon?: boolean;
|
showIcon?: boolean;
|
||||||
editable?: boolean;
|
editable?: boolean;
|
||||||
|
onDeleteCommunity(form: DeleteCommunity): void;
|
||||||
|
onRemoveCommunity(form: RemoveCommunity): void;
|
||||||
|
onLeaveModTeam(form: AddModToCommunity): void;
|
||||||
|
onFollowCommunity(form: FollowCommunity): void;
|
||||||
|
onBlockCommunity(form: BlockCommunity): void;
|
||||||
|
onPurgeCommunity(form: PurgeCommunity): void;
|
||||||
|
onEditCommunity(form: EditCommunity): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface SidebarState {
|
interface SidebarState {
|
||||||
|
@ -51,8 +58,13 @@ interface SidebarState {
|
||||||
showRemoveDialog: boolean;
|
showRemoveDialog: boolean;
|
||||||
showPurgeDialog: boolean;
|
showPurgeDialog: boolean;
|
||||||
purgeReason?: string;
|
purgeReason?: string;
|
||||||
purgeLoading: boolean;
|
|
||||||
showConfirmLeaveModTeam: boolean;
|
showConfirmLeaveModTeam: boolean;
|
||||||
|
deleteCommunityLoading: boolean;
|
||||||
|
removeCommunityLoading: boolean;
|
||||||
|
leaveModTeamLoading: boolean;
|
||||||
|
followCommunityLoading: boolean;
|
||||||
|
blockCommunityLoading: boolean;
|
||||||
|
purgeCommunityLoading: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Sidebar extends Component<SidebarProps, SidebarState> {
|
export class Sidebar extends Component<SidebarProps, SidebarState> {
|
||||||
|
@ -60,16 +72,44 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
||||||
showEdit: false,
|
showEdit: false,
|
||||||
showRemoveDialog: false,
|
showRemoveDialog: false,
|
||||||
showPurgeDialog: false,
|
showPurgeDialog: false,
|
||||||
purgeLoading: false,
|
|
||||||
showConfirmLeaveModTeam: false,
|
showConfirmLeaveModTeam: false,
|
||||||
|
deleteCommunityLoading: false,
|
||||||
|
removeCommunityLoading: false,
|
||||||
|
leaveModTeamLoading: false,
|
||||||
|
followCommunityLoading: false,
|
||||||
|
blockCommunityLoading: false,
|
||||||
|
purgeCommunityLoading: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
this.handleEditCommunity = this.handleEditCommunity.bind(this);
|
|
||||||
this.handleEditCancel = this.handleEditCancel.bind(this);
|
this.handleEditCancel = this.handleEditCancel.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
componentWillReceiveProps(
|
||||||
|
nextProps: Readonly<{ children?: InfernoNode } & SidebarProps>
|
||||||
|
): void {
|
||||||
|
if (this.props.moderators != nextProps.moderators) {
|
||||||
|
this.setState({
|
||||||
|
showConfirmLeaveModTeam: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.props.community_view != nextProps.community_view) {
|
||||||
|
this.setState({
|
||||||
|
showEdit: false,
|
||||||
|
showPurgeDialog: false,
|
||||||
|
showRemoveDialog: false,
|
||||||
|
deleteCommunityLoading: false,
|
||||||
|
removeCommunityLoading: false,
|
||||||
|
leaveModTeamLoading: false,
|
||||||
|
followCommunityLoading: false,
|
||||||
|
blockCommunityLoading: false,
|
||||||
|
purgeCommunityLoading: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
@ -81,7 +121,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
||||||
allLanguages={this.props.allLanguages}
|
allLanguages={this.props.allLanguages}
|
||||||
siteLanguages={this.props.siteLanguages}
|
siteLanguages={this.props.siteLanguages}
|
||||||
communityLanguages={this.props.communityLanguages}
|
communityLanguages={this.props.communityLanguages}
|
||||||
onEdit={this.handleEditCommunity}
|
onUpsertCommunity={this.props.onEditCommunity}
|
||||||
onCancel={this.handleEditCancel}
|
onCancel={this.handleEditCancel}
|
||||||
enableNsfw={this.props.enableNsfw}
|
enableNsfw={this.props.enableNsfw}
|
||||||
/>
|
/>
|
||||||
|
@ -138,18 +178,28 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
||||||
{subscribed === "Subscribed" && (
|
{subscribed === "Subscribed" && (
|
||||||
<button
|
<button
|
||||||
className="btn btn-secondary btn-sm mr-2"
|
className="btn btn-secondary btn-sm mr-2"
|
||||||
onClick={linkEvent(this, this.handleUnsubscribe)}
|
onClick={linkEvent(this, this.handleUnfollowCommunity)}
|
||||||
>
|
>
|
||||||
|
{this.state.followCommunityLoading ? (
|
||||||
|
<Spinner />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
<Icon icon="check" classes="icon-inline text-success mr-1" />
|
<Icon icon="check" classes="icon-inline text-success mr-1" />
|
||||||
{i18n.t("joined")}
|
{i18n.t("joined")}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
{subscribed === "Pending" && (
|
{subscribed === "Pending" && (
|
||||||
<button
|
<button
|
||||||
className="btn btn-warning mr-2"
|
className="btn btn-warning mr-2"
|
||||||
onClick={linkEvent(this, this.handleUnsubscribe)}
|
onClick={linkEvent(this, this.handleUnfollowCommunity)}
|
||||||
>
|
>
|
||||||
{i18n.t("subscribe_pending")}
|
{this.state.followCommunityLoading ? (
|
||||||
|
<Spinner />
|
||||||
|
) : (
|
||||||
|
i18n.t("subscribe_pending")
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
{community.removed && (
|
{community.removed && (
|
||||||
|
@ -306,9 +356,13 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
||||||
{community_view.subscribed == "NotSubscribed" && (
|
{community_view.subscribed == "NotSubscribed" && (
|
||||||
<button
|
<button
|
||||||
className="btn btn-secondary btn-block"
|
className="btn btn-secondary btn-block"
|
||||||
onClick={linkEvent(this, this.handleSubscribe)}
|
onClick={linkEvent(this, this.handleFollowCommunity)}
|
||||||
>
|
>
|
||||||
{i18n.t("subscribe")}
|
{this.state.followCommunityLoading ? (
|
||||||
|
<Spinner />
|
||||||
|
) : (
|
||||||
|
i18n.t("subscribe")
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -325,16 +379,24 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
||||||
(blocked ? (
|
(blocked ? (
|
||||||
<button
|
<button
|
||||||
className="btn btn-danger btn-block"
|
className="btn btn-danger btn-block"
|
||||||
onClick={linkEvent(this, this.handleUnblock)}
|
onClick={linkEvent(this, this.handleBlockCommunity)}
|
||||||
>
|
>
|
||||||
{i18n.t("unblock_community")}
|
{this.state.blockCommunityLoading ? (
|
||||||
|
<Spinner />
|
||||||
|
) : (
|
||||||
|
i18n.t("unblock_community")
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
) : (
|
) : (
|
||||||
<button
|
<button
|
||||||
className="btn btn-danger btn-block"
|
className="btn btn-danger btn-block"
|
||||||
onClick={linkEvent(this, this.handleBlock)}
|
onClick={linkEvent(this, this.handleBlockCommunity)}
|
||||||
>
|
>
|
||||||
{i18n.t("block_community")}
|
{this.state.blockCommunityLoading ? (
|
||||||
|
<Spinner />
|
||||||
|
) : (
|
||||||
|
i18n.t("block_community")
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
@ -388,7 +450,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item-action">
|
||||||
<button
|
<button
|
||||||
className="btn btn-link text-muted d-inline-block"
|
className="btn btn-link text-muted d-inline-block"
|
||||||
onClick={linkEvent(this, this.handleLeaveModTeamClick)}
|
onClick={linkEvent(this, this.handleLeaveModTeam)}
|
||||||
>
|
>
|
||||||
{i18n.t("yes")}
|
{i18n.t("yes")}
|
||||||
</button>
|
</button>
|
||||||
|
@ -410,7 +472,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item-action">
|
||||||
<button
|
<button
|
||||||
className="btn btn-link text-muted d-inline-block"
|
className="btn btn-link text-muted d-inline-block"
|
||||||
onClick={linkEvent(this, this.handleDeleteClick)}
|
onClick={linkEvent(this, this.handleDeleteCommunity)}
|
||||||
data-tippy-content={
|
data-tippy-content={
|
||||||
!community_view.community.deleted
|
!community_view.community.deleted
|
||||||
? i18n.t("delete")
|
? i18n.t("delete")
|
||||||
|
@ -422,12 +484,16 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
||||||
: i18n.t("restore")
|
: i18n.t("restore")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
{this.state.deleteCommunityLoading ? (
|
||||||
|
<Spinner />
|
||||||
|
) : (
|
||||||
<Icon
|
<Icon
|
||||||
icon="trash"
|
icon="trash"
|
||||||
classes={`icon-inline ${
|
classes={`icon-inline ${
|
||||||
community_view.community.deleted && "text-danger"
|
community_view.community.deleted && "text-danger"
|
||||||
}`}
|
}`}
|
||||||
/>
|
/>
|
||||||
|
)}{" "}
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
|
@ -445,9 +511,13 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
||||||
) : (
|
) : (
|
||||||
<button
|
<button
|
||||||
className="btn btn-link text-muted d-inline-block"
|
className="btn btn-link text-muted d-inline-block"
|
||||||
onClick={linkEvent(this, this.handleModRemoveSubmit)}
|
onClick={linkEvent(this, this.handleRemoveCommunity)}
|
||||||
>
|
>
|
||||||
{i18n.t("restore")}
|
{this.state.removeCommunityLoading ? (
|
||||||
|
<Spinner />
|
||||||
|
) : (
|
||||||
|
i18n.t("restore")
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
<button
|
<button
|
||||||
|
@ -461,7 +531,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
||||||
)}
|
)}
|
||||||
</ul>
|
</ul>
|
||||||
{this.state.showRemoveDialog && (
|
{this.state.showRemoveDialog && (
|
||||||
<form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
|
<form onSubmit={linkEvent(this, this.handleRemoveCommunity)}>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label className="col-form-label" htmlFor="remove-reason">
|
<label className="col-form-label" htmlFor="remove-reason">
|
||||||
{i18n.t("reason")}
|
{i18n.t("reason")}
|
||||||
|
@ -482,13 +552,17 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
||||||
{/* </div> */}
|
{/* </div> */}
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<button type="submit" className="btn btn-secondary">
|
<button type="submit" className="btn btn-secondary">
|
||||||
{i18n.t("remove_community")}
|
{this.state.removeCommunityLoading ? (
|
||||||
|
<Spinner />
|
||||||
|
) : (
|
||||||
|
i18n.t("remove_community")
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
)}
|
)}
|
||||||
{this.state.showPurgeDialog && (
|
{this.state.showPurgeDialog && (
|
||||||
<form onSubmit={linkEvent(this, this.handlePurgeSubmit)}>
|
<form onSubmit={linkEvent(this, this.handlePurgeCommunity)}>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<PurgeWarning />
|
<PurgeWarning />
|
||||||
</div>
|
</div>
|
||||||
|
@ -506,7 +580,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
{this.state.purgeLoading ? (
|
{this.state.purgeCommunityLoading ? (
|
||||||
<Spinner />
|
<Spinner />
|
||||||
) : (
|
) : (
|
||||||
<button
|
<button
|
||||||
|
@ -528,93 +602,18 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
||||||
i.setState({ showEdit: true });
|
i.setState({ showEdit: true });
|
||||||
}
|
}
|
||||||
|
|
||||||
handleEditCommunity() {
|
|
||||||
this.setState({ showEdit: false });
|
|
||||||
}
|
|
||||||
|
|
||||||
handleEditCancel() {
|
handleEditCancel() {
|
||||||
this.setState({ showEdit: false });
|
this.setState({ showEdit: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
handleDeleteClick(i: Sidebar, event: any) {
|
|
||||||
event.preventDefault();
|
|
||||||
const auth = myAuth();
|
|
||||||
if (auth) {
|
|
||||||
const deleteForm: DeleteCommunity = {
|
|
||||||
community_id: i.props.community_view.community.id,
|
|
||||||
deleted: !i.props.community_view.community.deleted,
|
|
||||||
auth,
|
|
||||||
};
|
|
||||||
WebSocketService.Instance.send(wsClient.deleteCommunity(deleteForm));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleShowConfirmLeaveModTeamClick(i: Sidebar) {
|
handleShowConfirmLeaveModTeamClick(i: Sidebar) {
|
||||||
i.setState({ showConfirmLeaveModTeam: true });
|
i.setState({ showConfirmLeaveModTeam: true });
|
||||||
}
|
}
|
||||||
|
|
||||||
handleLeaveModTeamClick(i: Sidebar) {
|
|
||||||
const mui = UserService.Instance.myUserInfo;
|
|
||||||
const auth = myAuth();
|
|
||||||
if (auth && mui) {
|
|
||||||
const form: AddModToCommunity = {
|
|
||||||
person_id: mui.local_user_view.person.id,
|
|
||||||
community_id: i.props.community_view.community.id,
|
|
||||||
added: false,
|
|
||||||
auth,
|
|
||||||
};
|
|
||||||
WebSocketService.Instance.send(wsClient.addModToCommunity(form));
|
|
||||||
i.setState({ showConfirmLeaveModTeam: false });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleCancelLeaveModTeamClick(i: Sidebar) {
|
handleCancelLeaveModTeamClick(i: Sidebar) {
|
||||||
i.setState({ showConfirmLeaveModTeam: false });
|
i.setState({ showConfirmLeaveModTeam: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
handleUnsubscribe(i: Sidebar, event: any) {
|
|
||||||
event.preventDefault();
|
|
||||||
const community_id = i.props.community_view.community.id;
|
|
||||||
const auth = myAuth();
|
|
||||||
if (auth) {
|
|
||||||
const form: FollowCommunity = {
|
|
||||||
community_id,
|
|
||||||
follow: false,
|
|
||||||
auth,
|
|
||||||
};
|
|
||||||
WebSocketService.Instance.send(wsClient.followCommunity(form));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update myUserInfo
|
|
||||||
const mui = UserService.Instance.myUserInfo;
|
|
||||||
if (mui) {
|
|
||||||
mui.follows = mui.follows.filter(i => i.community.id != community_id);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleSubscribe(i: Sidebar, event: any) {
|
|
||||||
event.preventDefault();
|
|
||||||
const community_id = i.props.community_view.community.id;
|
|
||||||
const auth = myAuth();
|
|
||||||
if (auth) {
|
|
||||||
const form: FollowCommunity = {
|
|
||||||
community_id,
|
|
||||||
follow: true,
|
|
||||||
auth,
|
|
||||||
};
|
|
||||||
WebSocketService.Instance.send(wsClient.followCommunity(form));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update myUserInfo
|
|
||||||
const mui = UserService.Instance.myUserInfo;
|
|
||||||
if (mui) {
|
|
||||||
mui.follows.push({
|
|
||||||
community: i.props.community_view.community,
|
|
||||||
follower: mui.local_user_view.person,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
get canPost(): boolean {
|
get canPost(): boolean {
|
||||||
return (
|
return (
|
||||||
!this.props.community_view.community.posting_restricted_to_mods ||
|
!this.props.community_view.community.posting_restricted_to_mods ||
|
||||||
|
@ -635,23 +634,6 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
||||||
i.setState({ removeExpires: event.target.value });
|
i.setState({ removeExpires: event.target.value });
|
||||||
}
|
}
|
||||||
|
|
||||||
handleModRemoveSubmit(i: Sidebar, event: any) {
|
|
||||||
event.preventDefault();
|
|
||||||
const auth = myAuth();
|
|
||||||
if (auth) {
|
|
||||||
const removeForm: RemoveCommunity = {
|
|
||||||
community_id: i.props.community_view.community.id,
|
|
||||||
removed: !i.props.community_view.community.removed,
|
|
||||||
reason: i.state.removeReason,
|
|
||||||
expires: getUnixTime(i.state.removeExpires),
|
|
||||||
auth,
|
|
||||||
};
|
|
||||||
WebSocketService.Instance.send(wsClient.removeCommunity(removeForm));
|
|
||||||
|
|
||||||
i.setState({ showRemoveDialog: false });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handlePurgeCommunityShow(i: Sidebar) {
|
handlePurgeCommunityShow(i: Sidebar) {
|
||||||
i.setState({ showPurgeDialog: true, showRemoveDialog: false });
|
i.setState({ showPurgeDialog: true, showRemoveDialog: false });
|
||||||
}
|
}
|
||||||
|
@ -660,48 +642,75 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
||||||
i.setState({ purgeReason: event.target.value });
|
i.setState({ purgeReason: event.target.value });
|
||||||
}
|
}
|
||||||
|
|
||||||
handlePurgeSubmit(i: Sidebar, event: any) {
|
// TODO Do we need two of these?
|
||||||
event.preventDefault();
|
handleUnfollowCommunity(i: Sidebar) {
|
||||||
|
i.setState({ followCommunityLoading: true });
|
||||||
|
i.props.onFollowCommunity({
|
||||||
|
community_id: i.props.community_view.community.id,
|
||||||
|
follow: false,
|
||||||
|
auth: myAuthRequired(),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
const auth = myAuth();
|
handleFollowCommunity(i: Sidebar) {
|
||||||
if (auth) {
|
i.setState({ followCommunityLoading: true });
|
||||||
const form: PurgeCommunity = {
|
i.props.onFollowCommunity({
|
||||||
|
community_id: i.props.community_view.community.id,
|
||||||
|
follow: true,
|
||||||
|
auth: myAuthRequired(),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
handleBlockCommunity(i: Sidebar) {
|
||||||
|
i.setState({ blockCommunityLoading: true });
|
||||||
|
i.props.onBlockCommunity({
|
||||||
|
community_id: 0,
|
||||||
|
block: !i.props.community_view.blocked,
|
||||||
|
auth: myAuthRequired(),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
handleLeaveModTeam(i: Sidebar) {
|
||||||
|
const myId = UserService.Instance.myUserInfo?.local_user_view.person.id;
|
||||||
|
if (myId) {
|
||||||
|
i.setState({ leaveModTeamLoading: true });
|
||||||
|
i.props.onLeaveModTeam({
|
||||||
|
community_id: i.props.community_view.community.id,
|
||||||
|
person_id: 92,
|
||||||
|
added: false,
|
||||||
|
auth: myAuthRequired(),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleDeleteCommunity(i: Sidebar) {
|
||||||
|
i.setState({ deleteCommunityLoading: true });
|
||||||
|
i.props.onDeleteCommunity({
|
||||||
|
community_id: i.props.community_view.community.id,
|
||||||
|
deleted: !i.props.community_view.community.deleted,
|
||||||
|
auth: myAuthRequired(),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
handleRemoveCommunity(i: Sidebar, event: any) {
|
||||||
|
event.preventDefault();
|
||||||
|
i.setState({ removeCommunityLoading: true });
|
||||||
|
i.props.onRemoveCommunity({
|
||||||
|
community_id: i.props.community_view.community.id,
|
||||||
|
removed: !i.props.community_view.community.removed,
|
||||||
|
reason: i.state.removeReason,
|
||||||
|
expires: getUnixTime(i.state.removeExpires), // TODO fix this
|
||||||
|
auth: myAuthRequired(),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
handlePurgeCommunity(i: Sidebar, event: any) {
|
||||||
|
event.preventDefault();
|
||||||
|
i.setState({ purgeCommunityLoading: true });
|
||||||
|
i.props.onPurgeCommunity({
|
||||||
community_id: i.props.community_view.community.id,
|
community_id: i.props.community_view.community.id,
|
||||||
reason: i.state.purgeReason,
|
reason: i.state.purgeReason,
|
||||||
auth,
|
auth: myAuthRequired(),
|
||||||
};
|
});
|
||||||
WebSocketService.Instance.send(wsClient.purgeCommunity(form));
|
|
||||||
i.setState({ purgeLoading: true });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleBlock(i: Sidebar, event: any) {
|
|
||||||
event.preventDefault();
|
|
||||||
const auth = myAuth();
|
|
||||||
if (auth) {
|
|
||||||
const blockCommunityForm: BlockCommunity = {
|
|
||||||
community_id: i.props.community_view.community.id,
|
|
||||||
block: true,
|
|
||||||
auth,
|
|
||||||
};
|
|
||||||
WebSocketService.Instance.send(
|
|
||||||
wsClient.blockCommunity(blockCommunityForm)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleUnblock(i: Sidebar, event: any) {
|
|
||||||
event.preventDefault();
|
|
||||||
const auth = myAuth();
|
|
||||||
if (auth) {
|
|
||||||
const blockCommunityForm: BlockCommunity = {
|
|
||||||
community_id: i.props.community_view.community.id,
|
|
||||||
block: false,
|
|
||||||
auth,
|
|
||||||
};
|
|
||||||
WebSocketService.Instance.send(
|
|
||||||
wsClient.blockCommunity(blockCommunityForm)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,30 +1,27 @@
|
||||||
import autosize from "autosize";
|
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component, linkEvent } from "inferno";
|
||||||
import {
|
import {
|
||||||
BannedPersonsResponse,
|
BannedPersonsResponse,
|
||||||
GetBannedPersons,
|
CreateCustomEmoji,
|
||||||
|
DeleteCustomEmoji,
|
||||||
|
EditCustomEmoji,
|
||||||
|
EditSite,
|
||||||
GetFederatedInstancesResponse,
|
GetFederatedInstancesResponse,
|
||||||
GetSiteResponse,
|
GetSiteResponse,
|
||||||
PersonView,
|
PersonView,
|
||||||
SiteResponse,
|
|
||||||
UserOperation,
|
|
||||||
wsJsonToRes,
|
|
||||||
wsUserOp,
|
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { Subscription } from "rxjs";
|
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { InitialFetchRequest } from "../../interfaces";
|
import { InitialFetchRequest } from "../../interfaces";
|
||||||
import { WebSocketService } from "../../services";
|
import { FirstLoadService } from "../../services/FirstLoadService";
|
||||||
|
import { HttpService, RequestState } from "../../services/HttpService";
|
||||||
import {
|
import {
|
||||||
capitalizeFirstLetter,
|
capitalizeFirstLetter,
|
||||||
isBrowser,
|
fetchThemeList,
|
||||||
myAuth,
|
myAuthRequired,
|
||||||
randomStr,
|
removeFromEmojiDataModel,
|
||||||
setIsoData,
|
setIsoData,
|
||||||
showLocal,
|
showLocal,
|
||||||
toast,
|
toast,
|
||||||
wsClient,
|
updateEmojiDataModel,
|
||||||
wsSubscribe,
|
|
||||||
} from "../../utils";
|
} from "../../utils";
|
||||||
import { HtmlTags } from "../common/html-tags";
|
import { HtmlTags } from "../common/html-tags";
|
||||||
import { Spinner } from "../common/icon";
|
import { Spinner } from "../common/icon";
|
||||||
|
@ -37,76 +34,92 @@ import { TaglineForm } from "./tagline-form";
|
||||||
|
|
||||||
interface AdminSettingsState {
|
interface AdminSettingsState {
|
||||||
siteRes: GetSiteResponse;
|
siteRes: GetSiteResponse;
|
||||||
instancesRes?: GetFederatedInstancesResponse;
|
|
||||||
banned: PersonView[];
|
banned: PersonView[];
|
||||||
loading: boolean;
|
currentTab: string;
|
||||||
leaveAdminTeamLoading: boolean;
|
instancesRes: RequestState<GetFederatedInstancesResponse>;
|
||||||
|
bannedRes: RequestState<BannedPersonsResponse>;
|
||||||
|
leaveAdminTeamRes: RequestState<GetSiteResponse>;
|
||||||
|
themeList: string[];
|
||||||
|
isIsomorphic: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class AdminSettings extends Component<any, AdminSettingsState> {
|
export class AdminSettings extends Component<any, AdminSettingsState> {
|
||||||
private siteConfigTextAreaId = `site-config-${randomStr()}`;
|
|
||||||
private isoData = setIsoData(this.context);
|
private isoData = setIsoData(this.context);
|
||||||
private subscription?: Subscription;
|
|
||||||
state: AdminSettingsState = {
|
state: AdminSettingsState = {
|
||||||
siteRes: this.isoData.site_res,
|
siteRes: this.isoData.site_res,
|
||||||
banned: [],
|
banned: [],
|
||||||
loading: true,
|
currentTab: "site",
|
||||||
leaveAdminTeamLoading: false,
|
bannedRes: { state: "empty" },
|
||||||
|
instancesRes: { state: "empty" },
|
||||||
|
leaveAdminTeamRes: { state: "empty" },
|
||||||
|
themeList: [],
|
||||||
|
isIsomorphic: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
|
|
||||||
this.parseMessage = this.parseMessage.bind(this);
|
this.handleEditSite = this.handleEditSite.bind(this);
|
||||||
this.subscription = wsSubscribe(this.parseMessage);
|
this.handleEditEmoji = this.handleEditEmoji.bind(this);
|
||||||
|
this.handleDeleteEmoji = this.handleDeleteEmoji.bind(this);
|
||||||
|
this.handleCreateEmoji = this.handleCreateEmoji.bind(this);
|
||||||
|
|
||||||
// Only fetch the data if coming from another route
|
// Only fetch the data if coming from another route
|
||||||
if (this.isoData.path == this.context.router.route.match.url) {
|
if (FirstLoadService.isFirstLoad) {
|
||||||
|
const [bannedRes, instancesRes] = this.isoData.routeData;
|
||||||
this.state = {
|
this.state = {
|
||||||
...this.state,
|
...this.state,
|
||||||
banned: (this.isoData.routeData[0] as BannedPersonsResponse).banned,
|
bannedRes,
|
||||||
instancesRes: this.isoData
|
instancesRes,
|
||||||
.routeData[1] as GetFederatedInstancesResponse,
|
isIsomorphic: true,
|
||||||
loading: false,
|
|
||||||
};
|
};
|
||||||
} else {
|
|
||||||
const cAuth = myAuth();
|
|
||||||
if (cAuth) {
|
|
||||||
WebSocketService.Instance.send(
|
|
||||||
wsClient.getBannedPersons({
|
|
||||||
auth: cAuth,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
WebSocketService.Instance.send(
|
|
||||||
wsClient.getFederatedInstances({ auth: cAuth })
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
|
async fetchData() {
|
||||||
const promises: Promise<any>[] = [];
|
this.setState({
|
||||||
|
bannedRes: { state: "loading" },
|
||||||
|
instancesRes: { state: "loading" },
|
||||||
|
themeList: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
const auth = myAuthRequired();
|
||||||
|
|
||||||
|
const [bannedRes, instancesRes, themeList] = await Promise.all([
|
||||||
|
HttpService.client.getBannedPersons({ auth }),
|
||||||
|
HttpService.client.getFederatedInstances({ auth }),
|
||||||
|
fetchThemeList(),
|
||||||
|
]);
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
bannedRes,
|
||||||
|
instancesRes,
|
||||||
|
themeList,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
static fetchInitialData({
|
||||||
|
auth,
|
||||||
|
client,
|
||||||
|
}: InitialFetchRequest): Promise<any>[] {
|
||||||
|
const promises: Promise<RequestState<any>>[] = [];
|
||||||
|
|
||||||
const auth = req.auth;
|
|
||||||
if (auth) {
|
if (auth) {
|
||||||
const bannedPersonsForm: GetBannedPersons = { auth };
|
promises.push(client.getBannedPersons({ auth }));
|
||||||
promises.push(req.client.getBannedPersons(bannedPersonsForm));
|
promises.push(client.getFederatedInstances({ auth }));
|
||||||
promises.push(req.client.getFederatedInstances({ auth }));
|
} else {
|
||||||
|
promises.push(
|
||||||
|
Promise.resolve({ state: "empty" }),
|
||||||
|
Promise.resolve({ state: "empty" })
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return promises;
|
return promises;
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
async componentDidMount() {
|
||||||
if (isBrowser()) {
|
if (!this.state.isIsomorphic) {
|
||||||
var textarea: any = document.getElementById(this.siteConfigTextAreaId);
|
await this.fetchData();
|
||||||
autosize(textarea);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
if (isBrowser()) {
|
|
||||||
this.subscription?.unsubscribe();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -117,17 +130,17 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const federationData =
|
||||||
|
this.state.instancesRes.state === "success"
|
||||||
|
? this.state.instancesRes.data.federated_instances
|
||||||
|
: undefined;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container-lg">
|
<div className="container-lg">
|
||||||
<HtmlTags
|
<HtmlTags
|
||||||
title={this.documentTitle}
|
title={this.documentTitle}
|
||||||
path={this.context.router.route.match.url}
|
path={this.context.router.route.match.url}
|
||||||
/>
|
/>
|
||||||
{this.state.loading ? (
|
|
||||||
<h5>
|
|
||||||
<Spinner large />
|
|
||||||
</h5>
|
|
||||||
) : (
|
|
||||||
<Tabs
|
<Tabs
|
||||||
tabs={[
|
tabs={[
|
||||||
{
|
{
|
||||||
|
@ -137,9 +150,12 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-12 col-md-6">
|
<div className="col-12 col-md-6">
|
||||||
<SiteForm
|
<SiteForm
|
||||||
siteRes={this.state.siteRes}
|
|
||||||
instancesRes={this.state.instancesRes}
|
|
||||||
showLocal={showLocal(this.isoData)}
|
showLocal={showLocal(this.isoData)}
|
||||||
|
allowedInstances={federationData?.allowed}
|
||||||
|
blockedInstances={federationData?.blocked}
|
||||||
|
onSaveSite={this.handleEditSite}
|
||||||
|
siteRes={this.state.siteRes}
|
||||||
|
themeList={this.state.themeList}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 col-md-6">
|
<div className="col-12 col-md-6">
|
||||||
|
@ -154,13 +170,10 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
||||||
label: "Rate Limiting",
|
label: "Rate Limiting",
|
||||||
getNode: () => (
|
getNode: () => (
|
||||||
<RateLimitForm
|
<RateLimitForm
|
||||||
localSiteRateLimit={
|
rateLimits={
|
||||||
this.state.siteRes.site_view.local_site_rate_limit
|
this.state.siteRes.site_view.local_site_rate_limit
|
||||||
}
|
}
|
||||||
applicationQuestion={
|
onSaveSite={this.handleEditSite}
|
||||||
this.state.siteRes.site_view.local_site
|
|
||||||
.application_question
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
|
@ -169,7 +182,10 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
||||||
label: i18n.t("taglines"),
|
label: i18n.t("taglines"),
|
||||||
getNode: () => (
|
getNode: () => (
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<TaglineForm siteRes={this.state.siteRes} />
|
<TaglineForm
|
||||||
|
taglines={this.state.siteRes.taglines}
|
||||||
|
onSaveSite={this.handleEditSite}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
|
@ -178,13 +194,16 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
||||||
label: i18n.t("emojis"),
|
label: i18n.t("emojis"),
|
||||||
getNode: () => (
|
getNode: () => (
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<EmojiForm />
|
<EmojiForm
|
||||||
|
onCreate={this.handleCreateEmoji}
|
||||||
|
onDelete={this.handleDeleteEmoji}
|
||||||
|
onEdit={this.handleEditEmoji}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -211,7 +230,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
||||||
onClick={linkEvent(this, this.handleLeaveAdminTeam)}
|
onClick={linkEvent(this, this.handleLeaveAdminTeam)}
|
||||||
className="btn btn-danger mb-2"
|
className="btn btn-danger mb-2"
|
||||||
>
|
>
|
||||||
{this.state.leaveAdminTeamLoading ? (
|
{this.state.leaveAdminTeamRes.state == "loading" ? (
|
||||||
<Spinner />
|
<Spinner />
|
||||||
) : (
|
) : (
|
||||||
i18n.t("leave_admin_team")
|
i18n.t("leave_admin_team")
|
||||||
|
@ -221,11 +240,20 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
bannedUsers() {
|
bannedUsers() {
|
||||||
|
switch (this.state.bannedRes.state) {
|
||||||
|
case "loading":
|
||||||
|
return (
|
||||||
|
<h5>
|
||||||
|
<Spinner large />
|
||||||
|
</h5>
|
||||||
|
);
|
||||||
|
case "success": {
|
||||||
|
const bans = this.state.bannedRes.data.banned;
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h5>{i18n.t("banned_users")}</h5>
|
<h5>{i18n.t("banned_users")}</h5>
|
||||||
<ul className="list-unstyled">
|
<ul className="list-unstyled">
|
||||||
{this.state.banned.map(banned => (
|
{bans.map(banned => (
|
||||||
<li key={banned.person.id} className="list-inline-item">
|
<li key={banned.person.id} className="list-inline-item">
|
||||||
<PersonListing person={banned.person} />
|
<PersonListing person={banned.person} />
|
||||||
</li>
|
</li>
|
||||||
|
@ -234,39 +262,61 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleLeaveAdminTeam(i: AdminSettings) {
|
|
||||||
const auth = myAuth();
|
|
||||||
if (auth) {
|
|
||||||
i.setState({ leaveAdminTeamLoading: true });
|
|
||||||
WebSocketService.Instance.send(wsClient.leaveAdmin({ auth }));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
parseMessage(msg: any) {
|
async handleEditSite(form: EditSite) {
|
||||||
const op = wsUserOp(msg);
|
const editRes = await HttpService.client.editSite(form);
|
||||||
console.log(msg);
|
|
||||||
if (msg.error) {
|
if (editRes.state === "success") {
|
||||||
toast(i18n.t(msg.error), "danger");
|
this.setState(s => {
|
||||||
this.context.router.history.push("/");
|
s.siteRes.site_view = editRes.data.site_view;
|
||||||
this.setState({ loading: false });
|
// TODO: Where to get taglines from?
|
||||||
return;
|
s.siteRes.taglines = editRes.data.taglines;
|
||||||
} else if (op == UserOperation.EditSite) {
|
return s;
|
||||||
const data = wsJsonToRes<SiteResponse>(msg);
|
});
|
||||||
this.setState(s => ((s.siteRes.site_view = data.site_view), s));
|
|
||||||
toast(i18n.t("site_saved"));
|
toast(i18n.t("site_saved"));
|
||||||
} else if (op == UserOperation.GetBannedPersons) {
|
}
|
||||||
const data = wsJsonToRes<BannedPersonsResponse>(msg);
|
|
||||||
this.setState({ banned: data.banned, loading: false });
|
return editRes;
|
||||||
} else if (op == UserOperation.LeaveAdmin) {
|
}
|
||||||
const data = wsJsonToRes<GetSiteResponse>(msg);
|
|
||||||
this.setState(s => ((s.siteRes.site_view = data.site_view), s));
|
handleSwitchTab(i: { ctx: AdminSettings; tab: string }) {
|
||||||
this.setState({ leaveAdminTeamLoading: false });
|
i.ctx.setState({ currentTab: i.tab });
|
||||||
|
}
|
||||||
|
|
||||||
|
async handleLeaveAdminTeam(i: AdminSettings) {
|
||||||
|
i.setState({ leaveAdminTeamRes: { state: "loading" } });
|
||||||
|
this.setState({
|
||||||
|
leaveAdminTeamRes: await HttpService.client.leaveAdmin({
|
||||||
|
auth: myAuthRequired(),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (this.state.leaveAdminTeamRes.state === "success") {
|
||||||
toast(i18n.t("left_admin_team"));
|
toast(i18n.t("left_admin_team"));
|
||||||
this.context.router.history.push("/");
|
this.context.router.history.replace("/");
|
||||||
} else if (op == UserOperation.GetFederatedInstances) {
|
}
|
||||||
const data = wsJsonToRes<GetFederatedInstancesResponse>(msg);
|
}
|
||||||
this.setState({ instancesRes: data });
|
|
||||||
|
async handleEditEmoji(form: EditCustomEmoji) {
|
||||||
|
const res = await HttpService.client.editCustomEmoji(form);
|
||||||
|
if (res.state === "success") {
|
||||||
|
updateEmojiDataModel(res.data.custom_emoji);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async handleDeleteEmoji(form: DeleteCustomEmoji) {
|
||||||
|
const res = await HttpService.client.deleteCustomEmoji(form);
|
||||||
|
if (res.state === "success") {
|
||||||
|
removeFromEmojiDataModel(res.data.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async handleCreateEmoji(form: CreateCustomEmoji) {
|
||||||
|
const res = await HttpService.client.createCustomEmoji(form);
|
||||||
|
if (res.state === "success") {
|
||||||
|
updateEmojiDataModel(res.data.custom_emoji);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,36 +1,30 @@
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component, linkEvent } from "inferno";
|
||||||
import {
|
import {
|
||||||
CreateCustomEmoji,
|
CreateCustomEmoji,
|
||||||
CustomEmojiResponse,
|
|
||||||
DeleteCustomEmoji,
|
DeleteCustomEmoji,
|
||||||
DeleteCustomEmojiResponse,
|
|
||||||
EditCustomEmoji,
|
EditCustomEmoji,
|
||||||
GetSiteResponse,
|
GetSiteResponse,
|
||||||
UserOperation,
|
|
||||||
wsJsonToRes,
|
|
||||||
wsUserOp,
|
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { Subscription } from "rxjs";
|
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { WebSocketService } from "../../services";
|
import { HttpService } from "../../services/HttpService";
|
||||||
import {
|
import {
|
||||||
customEmojisLookup,
|
customEmojisLookup,
|
||||||
isBrowser,
|
myAuthRequired,
|
||||||
myAuth,
|
|
||||||
pictrsDeleteToast,
|
pictrsDeleteToast,
|
||||||
removeFromEmojiDataModel,
|
|
||||||
setIsoData,
|
setIsoData,
|
||||||
toast,
|
toast,
|
||||||
updateEmojiDataModel,
|
|
||||||
uploadImage,
|
|
||||||
wsClient,
|
|
||||||
wsSubscribe,
|
|
||||||
} from "../../utils";
|
} from "../../utils";
|
||||||
import { EmojiMart } from "../common/emoji-mart";
|
import { EmojiMart } from "../common/emoji-mart";
|
||||||
import { HtmlTags } from "../common/html-tags";
|
import { HtmlTags } from "../common/html-tags";
|
||||||
import { Icon } from "../common/icon";
|
import { Icon } from "../common/icon";
|
||||||
import { Paginator } from "../common/paginator";
|
import { Paginator } from "../common/paginator";
|
||||||
|
|
||||||
|
interface EmojiFormProps {
|
||||||
|
onEdit(form: EditCustomEmoji): void;
|
||||||
|
onCreate(form: CreateCustomEmoji): void;
|
||||||
|
onDelete(form: DeleteCustomEmoji): void;
|
||||||
|
}
|
||||||
|
|
||||||
interface EmojiFormState {
|
interface EmojiFormState {
|
||||||
siteRes: GetSiteResponse;
|
siteRes: GetSiteResponse;
|
||||||
customEmojis: CustomEmojiViewForm[];
|
customEmojis: CustomEmojiViewForm[];
|
||||||
|
@ -49,9 +43,8 @@ interface CustomEmojiViewForm {
|
||||||
page: number;
|
page: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class EmojiForm extends Component<any, EmojiFormState> {
|
export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
|
||||||
private isoData = setIsoData(this.context);
|
private isoData = setIsoData(this.context);
|
||||||
private subscription: Subscription | undefined;
|
|
||||||
private itemsPerPage = 15;
|
private itemsPerPage = 15;
|
||||||
private emptyState: EmojiFormState = {
|
private emptyState: EmojiFormState = {
|
||||||
loading: false,
|
loading: false,
|
||||||
|
@ -75,20 +68,12 @@ export class EmojiForm extends Component<any, EmojiFormState> {
|
||||||
this.state = this.emptyState;
|
this.state = this.emptyState;
|
||||||
|
|
||||||
this.handlePageChange = this.handlePageChange.bind(this);
|
this.handlePageChange = this.handlePageChange.bind(this);
|
||||||
this.parseMessage = this.parseMessage.bind(this);
|
|
||||||
this.handleEmojiClick = this.handleEmojiClick.bind(this);
|
this.handleEmojiClick = this.handleEmojiClick.bind(this);
|
||||||
this.subscription = wsSubscribe(this.parseMessage);
|
|
||||||
}
|
}
|
||||||
get documentTitle(): string {
|
get documentTitle(): string {
|
||||||
return i18n.t("custom_emojis");
|
return i18n.t("custom_emojis");
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
if (isBrowser()) {
|
|
||||||
this.subscription?.unsubscribe();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
|
@ -232,7 +217,7 @@ export class EmojiForm extends Component<any, EmojiFormState> {
|
||||||
"btn btn-link btn-animate"
|
"btn btn-link btn-animate"
|
||||||
}
|
}
|
||||||
onClick={linkEvent(
|
onClick={linkEvent(
|
||||||
{ form: this, cv: cv },
|
{ i: this, cv: cv },
|
||||||
this.handleEditEmojiClick
|
this.handleEditEmojiClick
|
||||||
)}
|
)}
|
||||||
data-tippy-content={i18n.t("save")}
|
data-tippy-content={i18n.t("save")}
|
||||||
|
@ -253,7 +238,7 @@ export class EmojiForm extends Component<any, EmojiFormState> {
|
||||||
<button
|
<button
|
||||||
className="btn btn-link btn-animate text-muted"
|
className="btn btn-link btn-animate text-muted"
|
||||||
onClick={linkEvent(
|
onClick={linkEvent(
|
||||||
{ form: this, index: index, cv: cv },
|
{ i: this, index: index, cv: cv },
|
||||||
this.handleDeleteEmojiClick
|
this.handleDeleteEmojiClick
|
||||||
)}
|
)}
|
||||||
data-tippy-content={i18n.t("delete")}
|
data-tippy-content={i18n.t("delete")}
|
||||||
|
@ -401,51 +386,47 @@ export class EmojiForm extends Component<any, EmojiFormState> {
|
||||||
props.form.setState({ customEmojis: custom_emojis });
|
props.form.setState({ customEmojis: custom_emojis });
|
||||||
}
|
}
|
||||||
|
|
||||||
handleDeleteEmojiClick(props: {
|
handleDeleteEmojiClick(d: {
|
||||||
form: EmojiForm;
|
i: EmojiForm;
|
||||||
index: number;
|
index: number;
|
||||||
cv: CustomEmojiViewForm;
|
cv: CustomEmojiViewForm;
|
||||||
}) {
|
}) {
|
||||||
const pagedIndex =
|
const pagedIndex = (d.i.state.page - 1) * d.i.itemsPerPage + d.index;
|
||||||
(props.form.state.page - 1) * props.form.itemsPerPage + props.index;
|
if (d.cv.id != 0) {
|
||||||
if (props.cv.id != 0) {
|
d.i.props.onDelete({
|
||||||
const deleteForm: DeleteCustomEmoji = {
|
id: d.cv.id,
|
||||||
id: props.cv.id,
|
auth: myAuthRequired(),
|
||||||
auth: myAuth() ?? "",
|
});
|
||||||
};
|
|
||||||
WebSocketService.Instance.send(wsClient.deleteCustomEmoji(deleteForm));
|
|
||||||
} else {
|
} else {
|
||||||
const custom_emojis = [...props.form.state.customEmojis];
|
const custom_emojis = [...d.i.state.customEmojis];
|
||||||
custom_emojis.splice(Number(pagedIndex), 1);
|
custom_emojis.splice(Number(pagedIndex), 1);
|
||||||
props.form.setState({ customEmojis: custom_emojis });
|
d.i.setState({ customEmojis: custom_emojis });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleEditEmojiClick(props: { form: EmojiForm; cv: CustomEmojiViewForm }) {
|
handleEditEmojiClick(d: { i: EmojiForm; cv: CustomEmojiViewForm }) {
|
||||||
const keywords = props.cv.keywords
|
const keywords = d.cv.keywords
|
||||||
.split(" ")
|
.split(" ")
|
||||||
.filter(x => x.length > 0) as string[];
|
.filter(x => x.length > 0) as string[];
|
||||||
const uniqueKeywords = Array.from(new Set(keywords));
|
const uniqueKeywords = Array.from(new Set(keywords));
|
||||||
if (props.cv.id != 0) {
|
if (d.cv.id != 0) {
|
||||||
const editForm: EditCustomEmoji = {
|
d.i.props.onEdit({
|
||||||
id: props.cv.id,
|
id: d.cv.id,
|
||||||
category: props.cv.category,
|
category: d.cv.category,
|
||||||
image_url: props.cv.image_url,
|
image_url: d.cv.image_url,
|
||||||
alt_text: props.cv.alt_text,
|
alt_text: d.cv.alt_text,
|
||||||
keywords: uniqueKeywords,
|
keywords: uniqueKeywords,
|
||||||
auth: myAuth() ?? "",
|
auth: myAuthRequired(),
|
||||||
};
|
});
|
||||||
WebSocketService.Instance.send(wsClient.editCustomEmoji(editForm));
|
|
||||||
} else {
|
} else {
|
||||||
const createForm: CreateCustomEmoji = {
|
d.i.props.onCreate({
|
||||||
category: props.cv.category,
|
category: d.cv.category,
|
||||||
shortcode: props.cv.shortcode,
|
shortcode: d.cv.shortcode,
|
||||||
image_url: props.cv.image_url,
|
image_url: d.cv.image_url,
|
||||||
alt_text: props.cv.alt_text,
|
alt_text: d.cv.alt_text,
|
||||||
keywords: uniqueKeywords,
|
keywords: uniqueKeywords,
|
||||||
auth: myAuth() ?? "",
|
auth: myAuthRequired(),
|
||||||
};
|
});
|
||||||
WebSocketService.Instance.send(wsClient.createCustomEmoji(createForm));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -477,25 +458,25 @@ export class EmojiForm extends Component<any, EmojiFormState> {
|
||||||
file = event;
|
file = event;
|
||||||
}
|
}
|
||||||
|
|
||||||
uploadImage(file)
|
HttpService.client.uploadImage({ image: file }).then(res => {
|
||||||
.then(res => {
|
|
||||||
console.log("pictrs upload:");
|
console.log("pictrs upload:");
|
||||||
console.log(res);
|
console.log(res);
|
||||||
if (res.msg === "ok") {
|
if (res.state === "success") {
|
||||||
pictrsDeleteToast(file.name, res.delete_url as string);
|
if (res.data.msg === "ok") {
|
||||||
|
pictrsDeleteToast(file.name, res.data.delete_url as string);
|
||||||
} else {
|
} else {
|
||||||
toast(JSON.stringify(res), "danger");
|
toast(JSON.stringify(res), "danger");
|
||||||
const hash = res.files?.at(0)?.file;
|
const hash = res.data.files?.at(0)?.file;
|
||||||
const url = `${res.url}/${hash}`;
|
const url = `${res.data.url}/${hash}`;
|
||||||
props.form.handleEmojiImageUrlChange(
|
props.form.handleEmojiImageUrlChange(
|
||||||
{ form: props.form, index: props.index, overrideValue: url },
|
{ form: props.form, index: props.index, overrideValue: url },
|
||||||
event
|
event
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
})
|
} else if (res.state === "failed") {
|
||||||
.catch(error => {
|
console.error(res.msg);
|
||||||
console.error(error);
|
toast(res.msg, "danger");
|
||||||
toast(error, "danger");
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -506,51 +487,4 @@ export class EmojiForm extends Component<any, EmojiFormState> {
|
||||||
dynamicWidth: true,
|
dynamicWidth: true,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
parseMessage(msg: any) {
|
|
||||||
const op = wsUserOp(msg);
|
|
||||||
console.log(msg);
|
|
||||||
if (msg.error) {
|
|
||||||
toast(i18n.t(msg.error), "danger");
|
|
||||||
this.context.router.history.push("/");
|
|
||||||
this.setState({ loading: false });
|
|
||||||
return;
|
|
||||||
} else if (op == UserOperation.CreateCustomEmoji) {
|
|
||||||
const data = wsJsonToRes<CustomEmojiResponse>(msg);
|
|
||||||
const custom_emoji_view = data.custom_emoji;
|
|
||||||
updateEmojiDataModel(custom_emoji_view);
|
|
||||||
const currentEmojis = this.state.customEmojis;
|
|
||||||
const newEmojiIndex = currentEmojis.findIndex(
|
|
||||||
x => x.shortcode == custom_emoji_view.custom_emoji.shortcode
|
|
||||||
);
|
|
||||||
currentEmojis[newEmojiIndex].id = custom_emoji_view.custom_emoji.id;
|
|
||||||
currentEmojis[newEmojiIndex].changed = false;
|
|
||||||
this.setState({ customEmojis: currentEmojis });
|
|
||||||
toast(i18n.t("saved_emoji"));
|
|
||||||
this.setState({ loading: false });
|
|
||||||
} else if (op == UserOperation.EditCustomEmoji) {
|
|
||||||
const data = wsJsonToRes<CustomEmojiResponse>(msg);
|
|
||||||
const custom_emoji_view = data.custom_emoji;
|
|
||||||
updateEmojiDataModel(data.custom_emoji);
|
|
||||||
const currentEmojis = this.state.customEmojis;
|
|
||||||
const newEmojiIndex = currentEmojis.findIndex(
|
|
||||||
x => x.shortcode == custom_emoji_view.custom_emoji.shortcode
|
|
||||||
);
|
|
||||||
currentEmojis[newEmojiIndex].changed = false;
|
|
||||||
this.setState({ customEmojis: currentEmojis });
|
|
||||||
toast(i18n.t("saved_emoji"));
|
|
||||||
this.setState({ loading: false });
|
|
||||||
} else if (op == UserOperation.DeleteCustomEmoji) {
|
|
||||||
const data = wsJsonToRes<DeleteCustomEmojiResponse>(msg);
|
|
||||||
if (data.success) {
|
|
||||||
removeFromEmojiDataModel(data.id);
|
|
||||||
const custom_emojis = [
|
|
||||||
...this.state.customEmojis.filter(x => x.id != data.id),
|
|
||||||
];
|
|
||||||
this.setState({ customEmojis: custom_emojis });
|
|
||||||
toast(i18n.t("deleted_emoji"));
|
|
||||||
}
|
|
||||||
this.setState({ loading: false });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because it is too large
Load diff
|
@ -3,106 +3,113 @@ import {
|
||||||
GetFederatedInstancesResponse,
|
GetFederatedInstancesResponse,
|
||||||
GetSiteResponse,
|
GetSiteResponse,
|
||||||
Instance,
|
Instance,
|
||||||
UserOperation,
|
|
||||||
wsJsonToRes,
|
|
||||||
wsUserOp,
|
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { Subscription } from "rxjs";
|
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { InitialFetchRequest } from "../../interfaces";
|
import { InitialFetchRequest } from "../../interfaces";
|
||||||
import { WebSocketService } from "../../services";
|
import { FirstLoadService } from "../../services/FirstLoadService";
|
||||||
import {
|
import { HttpService, RequestState } from "../../services/HttpService";
|
||||||
isBrowser,
|
import { relTags, setIsoData } from "../../utils";
|
||||||
relTags,
|
|
||||||
setIsoData,
|
|
||||||
toast,
|
|
||||||
wsClient,
|
|
||||||
wsSubscribe,
|
|
||||||
} from "../../utils";
|
|
||||||
import { HtmlTags } from "../common/html-tags";
|
import { HtmlTags } from "../common/html-tags";
|
||||||
|
import { Spinner } from "../common/icon";
|
||||||
|
|
||||||
interface InstancesState {
|
interface InstancesState {
|
||||||
|
instancesRes: RequestState<GetFederatedInstancesResponse>;
|
||||||
siteRes: GetSiteResponse;
|
siteRes: GetSiteResponse;
|
||||||
instancesRes?: GetFederatedInstancesResponse;
|
isIsomorphic: boolean;
|
||||||
loading: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Instances extends Component<any, InstancesState> {
|
export class Instances extends Component<any, InstancesState> {
|
||||||
private isoData = setIsoData(this.context);
|
private isoData = setIsoData(this.context);
|
||||||
state: InstancesState = {
|
state: InstancesState = {
|
||||||
|
instancesRes: { state: "empty" },
|
||||||
siteRes: this.isoData.site_res,
|
siteRes: this.isoData.site_res,
|
||||||
loading: true,
|
isIsomorphic: false,
|
||||||
};
|
};
|
||||||
private subscription?: Subscription;
|
|
||||||
|
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
|
|
||||||
this.parseMessage = this.parseMessage.bind(this);
|
|
||||||
this.subscription = wsSubscribe(this.parseMessage);
|
|
||||||
|
|
||||||
// Only fetch the data if coming from another route
|
// Only fetch the data if coming from another route
|
||||||
if (this.isoData.path == this.context.router.route.match.url) {
|
if (FirstLoadService.isFirstLoad) {
|
||||||
this.state = {
|
this.state = {
|
||||||
...this.state,
|
...this.state,
|
||||||
instancesRes: this.isoData
|
instancesRes: this.isoData.routeData[0],
|
||||||
.routeData[0] as GetFederatedInstancesResponse,
|
isIsomorphic: true,
|
||||||
loading: false,
|
|
||||||
};
|
};
|
||||||
} else {
|
|
||||||
WebSocketService.Instance.send(wsClient.getFederatedInstances({}));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
|
async componentDidMount() {
|
||||||
const promises: Promise<any>[] = [];
|
if (!this.state.isIsomorphic) {
|
||||||
|
await this.fetchInstances();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
promises.push(req.client.getFederatedInstances({}));
|
async fetchInstances() {
|
||||||
|
this.setState({
|
||||||
|
instancesRes: { state: "loading" },
|
||||||
|
});
|
||||||
|
|
||||||
return promises;
|
this.setState({
|
||||||
|
instancesRes: await HttpService.client.getFederatedInstances({}),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
static fetchInitialData(
|
||||||
|
req: InitialFetchRequest
|
||||||
|
): Promise<RequestState<any>>[] {
|
||||||
|
return [req.client.getFederatedInstances({})];
|
||||||
}
|
}
|
||||||
|
|
||||||
get documentTitle(): string {
|
get documentTitle(): string {
|
||||||
return `${i18n.t("instances")} - ${this.state.siteRes.site_view.site.name}`;
|
return `${i18n.t("instances")} - ${this.state.siteRes.site_view.site.name}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
renderInstances() {
|
||||||
if (isBrowser()) {
|
switch (this.state.instancesRes.state) {
|
||||||
this.subscription?.unsubscribe();
|
case "loading":
|
||||||
|
return (
|
||||||
|
<h5>
|
||||||
|
<Spinner large />
|
||||||
|
</h5>
|
||||||
|
);
|
||||||
|
case "success": {
|
||||||
|
const instances = this.state.instancesRes.data.federated_instances;
|
||||||
|
return instances ? (
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-md-6">
|
||||||
|
<h5>{i18n.t("linked_instances")}</h5>
|
||||||
|
{this.itemList(instances.linked)}
|
||||||
|
</div>
|
||||||
|
{instances.allowed && instances.allowed.length > 0 && (
|
||||||
|
<div className="col-md-6">
|
||||||
|
<h5>{i18n.t("allowed_instances")}</h5>
|
||||||
|
{this.itemList(instances.allowed)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{instances.blocked && instances.blocked.length > 0 && (
|
||||||
|
<div className="col-md-6">
|
||||||
|
<h5>{i18n.t("blocked_instances")}</h5>
|
||||||
|
{this.itemList(instances.blocked)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const federated_instances = this.state.instancesRes?.federated_instances;
|
return (
|
||||||
return federated_instances ? (
|
|
||||||
<div className="container-lg">
|
<div className="container-lg">
|
||||||
<HtmlTags
|
<HtmlTags
|
||||||
title={this.documentTitle}
|
title={this.documentTitle}
|
||||||
path={this.context.router.route.match.url}
|
path={this.context.router.route.match.url}
|
||||||
/>
|
/>
|
||||||
<div className="row">
|
{this.renderInstances()}
|
||||||
<div className="col-md-6">
|
|
||||||
<h5>{i18n.t("linked_instances")}</h5>
|
|
||||||
{this.itemList(federated_instances.linked)}
|
|
||||||
</div>
|
</div>
|
||||||
{federated_instances.allowed &&
|
|
||||||
federated_instances.allowed.length > 0 && (
|
|
||||||
<div className="col-md-6">
|
|
||||||
<h5>{i18n.t("allowed_instances")}</h5>
|
|
||||||
{this.itemList(federated_instances.allowed)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{federated_instances.blocked &&
|
|
||||||
federated_instances.blocked.length > 0 && (
|
|
||||||
<div className="col-md-6">
|
|
||||||
<h5>{i18n.t("blocked_instances")}</h5>
|
|
||||||
{this.itemList(federated_instances.blocked)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -136,17 +143,4 @@ export class Instances extends Component<any, InstancesState> {
|
||||||
<div>{i18n.t("none_found")}</div>
|
<div>{i18n.t("none_found")}</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
parseMessage(msg: any) {
|
|
||||||
const op = wsUserOp(msg);
|
|
||||||
console.log(msg);
|
|
||||||
if (msg.error) {
|
|
||||||
toast(i18n.t(msg.error), "danger");
|
|
||||||
this.context.router.history.push("/");
|
|
||||||
this.setState({ loading: false });
|
|
||||||
return;
|
|
||||||
} else if (op == UserOperation.GetFederatedInstances) {
|
|
||||||
const data = wsJsonToRes<GetFederatedInstancesResponse>(msg);
|
|
||||||
this.setState({ loading: false, instancesRes: data });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,58 +1,35 @@
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component, linkEvent } from "inferno";
|
||||||
import {
|
import { GetSiteResponse, LoginResponse } from "lemmy-js-client";
|
||||||
GetSiteResponse,
|
|
||||||
Login as LoginI,
|
|
||||||
LoginResponse,
|
|
||||||
PasswordReset,
|
|
||||||
UserOperation,
|
|
||||||
wsJsonToRes,
|
|
||||||
wsUserOp,
|
|
||||||
} from "lemmy-js-client";
|
|
||||||
import { Subscription } from "rxjs";
|
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { UserService, WebSocketService } from "../../services";
|
import { UserService } from "../../services";
|
||||||
import {
|
import { HttpService, RequestState } from "../../services/HttpService";
|
||||||
isBrowser,
|
import { isBrowser, myAuth, setIsoData, toast, validEmail } from "../../utils";
|
||||||
setIsoData,
|
|
||||||
toast,
|
|
||||||
validEmail,
|
|
||||||
wsClient,
|
|
||||||
wsSubscribe,
|
|
||||||
} from "../../utils";
|
|
||||||
import { HtmlTags } from "../common/html-tags";
|
import { HtmlTags } from "../common/html-tags";
|
||||||
import { Spinner } from "../common/icon";
|
import { Spinner } from "../common/icon";
|
||||||
|
|
||||||
interface State {
|
interface State {
|
||||||
|
loginRes: RequestState<LoginResponse>;
|
||||||
form: {
|
form: {
|
||||||
username_or_email?: string;
|
username_or_email?: string;
|
||||||
password?: string;
|
password?: string;
|
||||||
totp_2fa_token?: string;
|
totp_2fa_token?: string;
|
||||||
};
|
};
|
||||||
loginLoading: boolean;
|
|
||||||
showTotp: boolean;
|
showTotp: boolean;
|
||||||
siteRes: GetSiteResponse;
|
siteRes: GetSiteResponse;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Login extends Component<any, State> {
|
export class Login extends Component<any, State> {
|
||||||
private isoData = setIsoData(this.context);
|
private isoData = setIsoData(this.context);
|
||||||
private subscription?: Subscription;
|
|
||||||
|
|
||||||
state: State = {
|
state: State = {
|
||||||
|
loginRes: { state: "empty" },
|
||||||
form: {},
|
form: {},
|
||||||
loginLoading: false,
|
|
||||||
showTotp: false,
|
showTotp: false,
|
||||||
siteRes: this.isoData.site_res,
|
siteRes: this.isoData.site_res,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
|
|
||||||
this.parseMessage = this.parseMessage.bind(this);
|
|
||||||
this.subscription = wsSubscribe(this.parseMessage);
|
|
||||||
|
|
||||||
if (isBrowser()) {
|
|
||||||
WebSocketService.Instance.send(wsClient.getCaptcha({}));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
@ -62,12 +39,6 @@ export class Login extends Component<any, State> {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
if (isBrowser()) {
|
|
||||||
this.subscription?.unsubscribe();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
get documentTitle(): string {
|
get documentTitle(): string {
|
||||||
return `${i18n.t("login")} - ${this.state.siteRes.site_view.site.name}`;
|
return `${i18n.t("login")} - ${this.state.siteRes.site_view.site.name}`;
|
||||||
}
|
}
|
||||||
|
@ -169,7 +140,11 @@ export class Login extends Component<any, State> {
|
||||||
<div className="form-group row">
|
<div className="form-group row">
|
||||||
<div className="col-sm-10">
|
<div className="col-sm-10">
|
||||||
<button type="submit" className="btn btn-secondary">
|
<button type="submit" className="btn btn-secondary">
|
||||||
{this.state.loginLoading ? <Spinner /> : i18n.t("login")}
|
{this.state.loginRes.state == "loading" ? (
|
||||||
|
<Spinner />
|
||||||
|
) : (
|
||||||
|
i18n.t("login")
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -178,20 +153,44 @@ export class Login extends Component<any, State> {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleLoginSubmit(i: Login, event: any) {
|
async handleLoginSubmit(i: Login, event: any) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
i.setState({ loginLoading: true });
|
const { password, totp_2fa_token, username_or_email } = i.state.form;
|
||||||
const lForm = i.state.form;
|
|
||||||
const username_or_email = lForm.username_or_email;
|
|
||||||
const password = lForm.password;
|
|
||||||
const totp_2fa_token = lForm.totp_2fa_token;
|
|
||||||
if (username_or_email && password) {
|
if (username_or_email && password) {
|
||||||
const form: LoginI = {
|
i.setState({ loginRes: { state: "loading" } });
|
||||||
|
|
||||||
|
const loginRes = await HttpService.client.login({
|
||||||
username_or_email,
|
username_or_email,
|
||||||
password,
|
password,
|
||||||
totp_2fa_token,
|
totp_2fa_token,
|
||||||
};
|
});
|
||||||
WebSocketService.Instance.send(wsClient.login(form));
|
switch (loginRes.state) {
|
||||||
|
case "failed": {
|
||||||
|
if (loginRes.msg === "missing_totp_token") {
|
||||||
|
i.setState({ showTotp: true });
|
||||||
|
toast(i18n.t("enter_two_factor_code"), "info");
|
||||||
|
}
|
||||||
|
|
||||||
|
i.setState({ loginRes: { state: "empty" } });
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
case "success": {
|
||||||
|
UserService.Instance.login(loginRes.data);
|
||||||
|
const site = await HttpService.client.getSite({
|
||||||
|
auth: myAuth(),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (site.state === "success") {
|
||||||
|
UserService.Instance.myUserInfo = site.data.my_user;
|
||||||
|
}
|
||||||
|
|
||||||
|
i.props.history.replace("/");
|
||||||
|
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -210,40 +209,13 @@ export class Login extends Component<any, State> {
|
||||||
i.setState(i.state);
|
i.setState(i.state);
|
||||||
}
|
}
|
||||||
|
|
||||||
handlePasswordReset(i: Login, event: any) {
|
async handlePasswordReset(i: Login, event: any) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
const email = i.state.form.username_or_email;
|
const email = i.state.form.username_or_email;
|
||||||
if (email) {
|
if (email) {
|
||||||
const resetForm: PasswordReset = { email };
|
const res = await HttpService.client.passwordReset({ email });
|
||||||
WebSocketService.Instance.send(wsClient.passwordReset(resetForm));
|
if (res.state == "success") {
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
parseMessage(msg: any) {
|
|
||||||
const op = wsUserOp(msg);
|
|
||||||
console.log(msg);
|
|
||||||
if (msg.error) {
|
|
||||||
// If the error comes back that the token is missing, show the TOTP field
|
|
||||||
if (msg.error == "missing_totp_token") {
|
|
||||||
this.setState({ showTotp: true, loginLoading: false });
|
|
||||||
toast(i18n.t("enter_two_factor_code"));
|
|
||||||
return;
|
|
||||||
} else {
|
|
||||||
toast(i18n.t(msg.error), "danger");
|
|
||||||
this.setState({ form: {}, loginLoading: false });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (op == UserOperation.Login) {
|
|
||||||
const data = wsJsonToRes<LoginResponse>(msg);
|
|
||||||
UserService.Instance.login(data);
|
|
||||||
this.props.history.push("/");
|
|
||||||
location.reload();
|
|
||||||
} else if (op == UserOperation.PasswordReset) {
|
|
||||||
toast(i18n.t("reset_password_mail_sent"));
|
toast(i18n.t("reset_password_mail_sent"));
|
||||||
} else if (op == UserOperation.GetSite) {
|
|
||||||
const data = wsJsonToRes<GetSiteResponse>(msg);
|
|
||||||
this.setState({ siteRes: data });
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,8 +1,7 @@
|
||||||
import { Component, FormEventHandler, linkEvent } from "inferno";
|
import { Component, FormEventHandler, linkEvent } from "inferno";
|
||||||
import { EditSite, LocalSiteRateLimit } from "lemmy-js-client";
|
import { EditSite, LocalSiteRateLimit } from "lemmy-js-client";
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { WebSocketService } from "../../services";
|
import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
|
||||||
import { capitalizeFirstLetter, myAuth, wsClient } from "../../utils";
|
|
||||||
import { Spinner } from "../common/icon";
|
import { Spinner } from "../common/icon";
|
||||||
import Tabs from "../common/tabs";
|
import Tabs from "../common/tabs";
|
||||||
|
|
||||||
|
@ -23,8 +22,8 @@ interface RateLimitsProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
interface RateLimitFormProps {
|
interface RateLimitFormProps {
|
||||||
localSiteRateLimit: LocalSiteRateLimit;
|
rateLimits: LocalSiteRateLimit;
|
||||||
applicationQuestion?: string;
|
onSaveSite(form: EditSite): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface RateLimitFormState {
|
interface RateLimitFormState {
|
||||||
|
@ -107,18 +106,19 @@ function handlePerSecondChange(
|
||||||
|
|
||||||
function submitRateLimitForm(i: RateLimitsForm, event: any) {
|
function submitRateLimitForm(i: RateLimitsForm, event: any) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
const auth = myAuth() ?? "TODO";
|
const auth = myAuthRequired();
|
||||||
const form: EditSite = Object.entries(i.state.form).reduce(
|
const form: EditSite = Object.entries(i.state.form).reduce(
|
||||||
(acc, [key, val]) => {
|
(acc, [key, val]) => {
|
||||||
acc[`rate_limit_${key}`] = val;
|
acc[`rate_limit_${key}`] = val;
|
||||||
return acc;
|
return acc;
|
||||||
},
|
},
|
||||||
{ auth, application_question: i.props.applicationQuestion }
|
{
|
||||||
|
auth,
|
||||||
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
i.setState({ loading: true });
|
i.setState({ loading: true });
|
||||||
|
i.props.onSaveSite(form);
|
||||||
WebSocketService.Instance.send(wsClient.editSite(form));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class RateLimitsForm extends Component<
|
export default class RateLimitsForm extends Component<
|
||||||
|
@ -127,43 +127,10 @@ export default class RateLimitsForm extends Component<
|
||||||
> {
|
> {
|
||||||
state: RateLimitFormState = {
|
state: RateLimitFormState = {
|
||||||
loading: false,
|
loading: false,
|
||||||
form: {},
|
form: this.props.rateLimits,
|
||||||
};
|
};
|
||||||
constructor(props: RateLimitFormProps, context) {
|
constructor(props: RateLimitFormProps, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
|
|
||||||
const {
|
|
||||||
comment,
|
|
||||||
comment_per_second,
|
|
||||||
image,
|
|
||||||
image_per_second,
|
|
||||||
message,
|
|
||||||
message_per_second,
|
|
||||||
post,
|
|
||||||
post_per_second,
|
|
||||||
register,
|
|
||||||
register_per_second,
|
|
||||||
search,
|
|
||||||
search_per_second,
|
|
||||||
} = props.localSiteRateLimit;
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
...this.state,
|
|
||||||
form: {
|
|
||||||
comment,
|
|
||||||
comment_per_second,
|
|
||||||
image,
|
|
||||||
image_per_second,
|
|
||||||
message,
|
|
||||||
message_per_second,
|
|
||||||
post,
|
|
||||||
post_per_second,
|
|
||||||
register,
|
|
||||||
register_per_second,
|
|
||||||
search,
|
|
||||||
search_per_second,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@ -210,15 +177,4 @@ export default class RateLimitsForm extends Component<
|
||||||
</form>
|
</form>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate({ localSiteRateLimit }: RateLimitFormProps) {
|
|
||||||
if (
|
|
||||||
this.state.loading &&
|
|
||||||
Object.entries(localSiteRateLimit).some(
|
|
||||||
([key, val]) => this.state.form[key] !== val
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
this.setState({ loading: false });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,18 +1,15 @@
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component, linkEvent } from "inferno";
|
||||||
import { Helmet } from "inferno-helmet";
|
import { Helmet } from "inferno-helmet";
|
||||||
import {
|
import {
|
||||||
|
CreateSite,
|
||||||
GetSiteResponse,
|
GetSiteResponse,
|
||||||
LoginResponse,
|
LoginResponse,
|
||||||
Register,
|
Register,
|
||||||
UserOperation,
|
|
||||||
wsJsonToRes,
|
|
||||||
wsUserOp,
|
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { Subscription } from "rxjs";
|
|
||||||
import { delay, retryWhen, take } from "rxjs/operators";
|
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { UserService, WebSocketService } from "../../services";
|
import { UserService } from "../../services";
|
||||||
import { setIsoData, toast, wsClient } from "../../utils";
|
import { HttpService, RequestState } from "../../services/HttpService";
|
||||||
|
import { fetchThemeList, setIsoData } from "../../utils";
|
||||||
import { Spinner } from "../common/icon";
|
import { Spinner } from "../common/icon";
|
||||||
import { SiteForm } from "./site-form";
|
import { SiteForm } from "./site-form";
|
||||||
|
|
||||||
|
@ -29,37 +26,32 @@ interface State {
|
||||||
answer?: string;
|
answer?: string;
|
||||||
};
|
};
|
||||||
doneRegisteringUser: boolean;
|
doneRegisteringUser: boolean;
|
||||||
userLoading: boolean;
|
registerRes: RequestState<LoginResponse>;
|
||||||
|
themeList: string[];
|
||||||
siteRes: GetSiteResponse;
|
siteRes: GetSiteResponse;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Setup extends Component<any, State> {
|
export class Setup extends Component<any, State> {
|
||||||
private subscription: Subscription;
|
|
||||||
private isoData = setIsoData(this.context);
|
private isoData = setIsoData(this.context);
|
||||||
|
|
||||||
state: State = {
|
state: State = {
|
||||||
|
registerRes: { state: "empty" },
|
||||||
|
themeList: [],
|
||||||
form: {
|
form: {
|
||||||
show_nsfw: true,
|
show_nsfw: true,
|
||||||
},
|
},
|
||||||
doneRegisteringUser: !!UserService.Instance.myUserInfo,
|
doneRegisteringUser: !!UserService.Instance.myUserInfo,
|
||||||
userLoading: false,
|
|
||||||
siteRes: this.isoData.site_res,
|
siteRes: this.isoData.site_res,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
|
|
||||||
this.subscription = WebSocketService.Instance.subject
|
this.handleCreateSite = this.handleCreateSite.bind(this);
|
||||||
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
|
|
||||||
.subscribe(
|
|
||||||
msg => this.parseMessage(msg),
|
|
||||||
err => console.error(err),
|
|
||||||
() => console.log("complete")
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
async componentDidMount() {
|
||||||
this.subscription.unsubscribe();
|
this.setState({ themeList: await fetchThemeList() });
|
||||||
}
|
}
|
||||||
|
|
||||||
get documentTitle(): string {
|
get documentTitle(): string {
|
||||||
|
@ -76,7 +68,12 @@ export class Setup extends Component<any, State> {
|
||||||
{!this.state.doneRegisteringUser ? (
|
{!this.state.doneRegisteringUser ? (
|
||||||
this.registerUser()
|
this.registerUser()
|
||||||
) : (
|
) : (
|
||||||
<SiteForm siteRes={this.state.siteRes} showLocal />
|
<SiteForm
|
||||||
|
showLocal
|
||||||
|
onSaveSite={this.handleCreateSite}
|
||||||
|
siteRes={this.state.siteRes}
|
||||||
|
themeList={this.state.themeList}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -161,7 +158,11 @@ export class Setup extends Component<any, State> {
|
||||||
<div className="form-group row">
|
<div className="form-group row">
|
||||||
<div className="col-sm-10">
|
<div className="col-sm-10">
|
||||||
<button type="submit" className="btn btn-secondary">
|
<button type="submit" className="btn btn-secondary">
|
||||||
{this.state.userLoading ? <Spinner /> : i18n.t("sign_up")}
|
{this.state.registerRes.state == "loading" ? (
|
||||||
|
<Spinner />
|
||||||
|
) : (
|
||||||
|
i18n.t("sign_up")
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -169,24 +170,53 @@ export class Setup extends Component<any, State> {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleRegisterSubmit(i: Setup, event: any) {
|
async handleRegisterSubmit(i: Setup, event: any) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
i.setState({ userLoading: true });
|
i.setState({ registerRes: { state: "loading" } });
|
||||||
event.preventDefault();
|
const {
|
||||||
const cForm = i.state.form;
|
username,
|
||||||
if (cForm.username && cForm.password && cForm.password_verify) {
|
password_verify,
|
||||||
|
password,
|
||||||
|
email,
|
||||||
|
show_nsfw,
|
||||||
|
captcha_uuid,
|
||||||
|
captcha_answer,
|
||||||
|
honeypot,
|
||||||
|
answer,
|
||||||
|
} = i.state.form;
|
||||||
|
|
||||||
|
if (username && password && password_verify) {
|
||||||
const form: Register = {
|
const form: Register = {
|
||||||
username: cForm.username,
|
username,
|
||||||
password: cForm.password,
|
password,
|
||||||
password_verify: cForm.password_verify,
|
password_verify,
|
||||||
email: cForm.email,
|
email,
|
||||||
show_nsfw: cForm.show_nsfw,
|
show_nsfw,
|
||||||
captcha_uuid: cForm.captcha_uuid,
|
captcha_uuid,
|
||||||
captcha_answer: cForm.captcha_answer,
|
captcha_answer,
|
||||||
honeypot: cForm.honeypot,
|
honeypot,
|
||||||
answer: cForm.answer,
|
answer,
|
||||||
};
|
};
|
||||||
WebSocketService.Instance.send(wsClient.register(form));
|
i.setState({
|
||||||
|
registerRes: await HttpService.client.register(form),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (i.state.registerRes.state == "success") {
|
||||||
|
const data = i.state.registerRes.data;
|
||||||
|
|
||||||
|
UserService.Instance.login(data);
|
||||||
|
if (UserService.Instance.jwtInfo) {
|
||||||
|
i.setState({ doneRegisteringUser: true });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async handleCreateSite(form: CreateSite) {
|
||||||
|
const createRes = await HttpService.client.createSite(form);
|
||||||
|
if (createRes.state === "success") {
|
||||||
|
this.props.history.replace("/");
|
||||||
|
location.reload();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -209,22 +239,4 @@ export class Setup extends Component<any, State> {
|
||||||
i.state.form.password_verify = event.target.value;
|
i.state.form.password_verify = event.target.value;
|
||||||
i.setState(i.state);
|
i.setState(i.state);
|
||||||
}
|
}
|
||||||
|
|
||||||
parseMessage(msg: any) {
|
|
||||||
const op = wsUserOp(msg);
|
|
||||||
if (msg.error) {
|
|
||||||
toast(i18n.t(msg.error), "danger");
|
|
||||||
this.setState({ userLoading: false });
|
|
||||||
return;
|
|
||||||
} else if (op == UserOperation.Register) {
|
|
||||||
const data = wsJsonToRes<LoginResponse>(msg);
|
|
||||||
this.setState({ userLoading: false });
|
|
||||||
UserService.Instance.login(data);
|
|
||||||
if (UserService.Instance.jwtInfo) {
|
|
||||||
this.setState({ doneRegisteringUser: true });
|
|
||||||
}
|
|
||||||
} else if (op == UserOperation.CreateSite) {
|
|
||||||
window.location.href = "/";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,24 +7,19 @@ import {
|
||||||
GetCaptchaResponse,
|
GetCaptchaResponse,
|
||||||
GetSiteResponse,
|
GetSiteResponse,
|
||||||
LoginResponse,
|
LoginResponse,
|
||||||
Register,
|
|
||||||
SiteView,
|
SiteView,
|
||||||
UserOperation,
|
|
||||||
wsJsonToRes,
|
|
||||||
wsUserOp,
|
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { Subscription } from "rxjs";
|
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { UserService, WebSocketService } from "../../services";
|
import { UserService } from "../../services";
|
||||||
|
import { HttpService, RequestState } from "../../services/HttpService";
|
||||||
import {
|
import {
|
||||||
isBrowser,
|
isBrowser,
|
||||||
joinLemmyUrl,
|
joinLemmyUrl,
|
||||||
mdToHtml,
|
mdToHtml,
|
||||||
|
myAuth,
|
||||||
setIsoData,
|
setIsoData,
|
||||||
toast,
|
toast,
|
||||||
validEmail,
|
validEmail,
|
||||||
wsClient,
|
|
||||||
wsSubscribe,
|
|
||||||
} from "../../utils";
|
} from "../../utils";
|
||||||
import { HtmlTags } from "../common/html-tags";
|
import { HtmlTags } from "../common/html-tags";
|
||||||
import { Icon, Spinner } from "../common/icon";
|
import { Icon, Spinner } from "../common/icon";
|
||||||
|
@ -58,6 +53,8 @@ const passwordStrengthOptions: Options<string> = [
|
||||||
];
|
];
|
||||||
|
|
||||||
interface State {
|
interface State {
|
||||||
|
registerRes: RequestState<LoginResponse>;
|
||||||
|
captchaRes: RequestState<GetCaptchaResponse>;
|
||||||
form: {
|
form: {
|
||||||
username?: string;
|
username?: string;
|
||||||
email?: string;
|
email?: string;
|
||||||
|
@ -69,22 +66,20 @@ interface State {
|
||||||
honeypot?: string;
|
honeypot?: string;
|
||||||
answer?: string;
|
answer?: string;
|
||||||
};
|
};
|
||||||
registerLoading: boolean;
|
|
||||||
captcha?: GetCaptchaResponse;
|
|
||||||
captchaPlaying: boolean;
|
captchaPlaying: boolean;
|
||||||
siteRes: GetSiteResponse;
|
siteRes: GetSiteResponse;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Signup extends Component<any, State> {
|
export class Signup extends Component<any, State> {
|
||||||
private isoData = setIsoData(this.context);
|
private isoData = setIsoData(this.context);
|
||||||
private subscription?: Subscription;
|
|
||||||
private audio?: HTMLAudioElement;
|
private audio?: HTMLAudioElement;
|
||||||
|
|
||||||
state: State = {
|
state: State = {
|
||||||
|
registerRes: { state: "empty" },
|
||||||
|
captchaRes: { state: "empty" },
|
||||||
form: {
|
form: {
|
||||||
show_nsfw: false,
|
show_nsfw: false,
|
||||||
},
|
},
|
||||||
registerLoading: false,
|
|
||||||
captchaPlaying: false,
|
captchaPlaying: false,
|
||||||
siteRes: this.isoData.site_res,
|
siteRes: this.isoData.site_res,
|
||||||
};
|
};
|
||||||
|
@ -93,19 +88,26 @@ export class Signup extends Component<any, State> {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
|
|
||||||
this.handleAnswerChange = this.handleAnswerChange.bind(this);
|
this.handleAnswerChange = this.handleAnswerChange.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
this.parseMessage = this.parseMessage.bind(this);
|
async componentDidMount() {
|
||||||
this.subscription = wsSubscribe(this.parseMessage);
|
if (this.state.siteRes.site_view.local_site.captcha_enabled) {
|
||||||
|
await this.fetchCaptcha();
|
||||||
if (isBrowser()) {
|
|
||||||
WebSocketService.Instance.send(wsClient.getCaptcha({}));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
async fetchCaptcha() {
|
||||||
if (isBrowser()) {
|
this.setState({ captchaRes: { state: "loading" } });
|
||||||
this.subscription?.unsubscribe();
|
this.setState({
|
||||||
|
captchaRes: await HttpService.client.getCaptcha({}),
|
||||||
|
});
|
||||||
|
|
||||||
|
this.setState(s => {
|
||||||
|
if (s.captchaRes.state == "success") {
|
||||||
|
s.form.captcha_uuid = s.captchaRes.data.ok?.uuid;
|
||||||
}
|
}
|
||||||
|
return s;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
get documentTitle(): string {
|
get documentTitle(): string {
|
||||||
|
@ -285,6 +287,7 @@ export class Signup extends Component<any, State> {
|
||||||
</label>
|
</label>
|
||||||
<div className="col-sm-10">
|
<div className="col-sm-10">
|
||||||
<MarkdownTextArea
|
<MarkdownTextArea
|
||||||
|
initialContent=""
|
||||||
onContentChange={this.handleAnswerChange}
|
onContentChange={this.handleAnswerChange}
|
||||||
hideNavigationWarnings
|
hideNavigationWarnings
|
||||||
allLanguages={[]}
|
allLanguages={[]}
|
||||||
|
@ -294,36 +297,7 @@ export class Signup extends Component<any, State> {
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
{this.renderCaptcha()}
|
||||||
{this.state.captcha && (
|
|
||||||
<div className="form-group row">
|
|
||||||
<label className="col-sm-2" htmlFor="register-captcha">
|
|
||||||
<span className="mr-2">{i18n.t("enter_code")}</span>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-secondary"
|
|
||||||
onClick={linkEvent(this, this.handleRegenCaptcha)}
|
|
||||||
aria-label={i18n.t("captcha")}
|
|
||||||
>
|
|
||||||
<Icon icon="refresh-cw" classes="icon-refresh-cw" />
|
|
||||||
</button>
|
|
||||||
</label>
|
|
||||||
{this.showCaptcha()}
|
|
||||||
<div className="col-sm-6">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="form-control"
|
|
||||||
id="register-captcha"
|
|
||||||
value={this.state.form.captcha_answer}
|
|
||||||
onInput={linkEvent(
|
|
||||||
this,
|
|
||||||
this.handleRegisterCaptchaAnswerChange
|
|
||||||
)}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{siteView.local_site.enable_nsfw && (
|
{siteView.local_site.enable_nsfw && (
|
||||||
<div className="form-group row">
|
<div className="form-group row">
|
||||||
<div className="col-sm-10">
|
<div className="col-sm-10">
|
||||||
|
@ -358,7 +332,7 @@ export class Signup extends Component<any, State> {
|
||||||
<div className="form-group row">
|
<div className="form-group row">
|
||||||
<div className="col-sm-10">
|
<div className="col-sm-10">
|
||||||
<button type="submit" className="btn btn-secondary">
|
<button type="submit" className="btn btn-secondary">
|
||||||
{this.state.registerLoading ? (
|
{this.state.registerRes.state == "loading" ? (
|
||||||
<Spinner />
|
<Spinner />
|
||||||
) : (
|
) : (
|
||||||
this.titleName(siteView)
|
this.titleName(siteView)
|
||||||
|
@ -370,8 +344,47 @@ export class Signup extends Component<any, State> {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
showCaptcha() {
|
renderCaptcha() {
|
||||||
const captchaRes = this.state.captcha?.ok;
|
switch (this.state.captchaRes.state) {
|
||||||
|
case "loading":
|
||||||
|
return <Spinner />;
|
||||||
|
case "success": {
|
||||||
|
const res = this.state.captchaRes.data;
|
||||||
|
return (
|
||||||
|
<div className="form-group row">
|
||||||
|
<label className="col-sm-2" htmlFor="register-captcha">
|
||||||
|
<span className="mr-2">{i18n.t("enter_code")}</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-secondary"
|
||||||
|
onClick={linkEvent(this, this.handleRegenCaptcha)}
|
||||||
|
aria-label={i18n.t("captcha")}
|
||||||
|
>
|
||||||
|
<Icon icon="refresh-cw" classes="icon-refresh-cw" />
|
||||||
|
</button>
|
||||||
|
</label>
|
||||||
|
{this.showCaptcha(res)}
|
||||||
|
<div className="col-sm-6">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
id="register-captcha"
|
||||||
|
value={this.state.form.captcha_answer}
|
||||||
|
onInput={linkEvent(
|
||||||
|
this,
|
||||||
|
this.handleRegisterCaptchaAnswerChange
|
||||||
|
)}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
showCaptcha(res: GetCaptchaResponse) {
|
||||||
|
const captchaRes = res?.ok;
|
||||||
return captchaRes ? (
|
return captchaRes ? (
|
||||||
<div className="col-sm-4">
|
<div className="col-sm-4">
|
||||||
<>
|
<>
|
||||||
|
@ -419,23 +432,66 @@ export class Signup extends Component<any, State> {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleRegisterSubmit(i: Signup, event: any) {
|
async handleRegisterSubmit(i: Signup, event: any) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
i.setState({ registerLoading: true });
|
const {
|
||||||
const cForm = i.state.form;
|
show_nsfw,
|
||||||
if (cForm.username && cForm.password && cForm.password_verify) {
|
answer,
|
||||||
const form: Register = {
|
captcha_answer,
|
||||||
username: cForm.username,
|
captcha_uuid,
|
||||||
password: cForm.password,
|
email,
|
||||||
password_verify: cForm.password_verify,
|
honeypot,
|
||||||
email: cForm.email,
|
password,
|
||||||
show_nsfw: cForm.show_nsfw,
|
password_verify,
|
||||||
captcha_uuid: cForm.captcha_uuid,
|
username,
|
||||||
captcha_answer: cForm.captcha_answer,
|
} = i.state.form;
|
||||||
honeypot: cForm.honeypot,
|
if (username && password && password_verify) {
|
||||||
answer: cForm.answer,
|
i.setState({ registerRes: { state: "loading" } });
|
||||||
};
|
|
||||||
WebSocketService.Instance.send(wsClient.register(form));
|
const registerRes = await HttpService.client.register({
|
||||||
|
username,
|
||||||
|
password,
|
||||||
|
password_verify,
|
||||||
|
email,
|
||||||
|
show_nsfw,
|
||||||
|
captcha_uuid,
|
||||||
|
captcha_answer,
|
||||||
|
honeypot,
|
||||||
|
answer,
|
||||||
|
});
|
||||||
|
switch (registerRes.state) {
|
||||||
|
case "failed": {
|
||||||
|
toast(registerRes.msg, "danger");
|
||||||
|
i.setState({ registerRes: { state: "empty" } });
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
case "success": {
|
||||||
|
const data = registerRes.data;
|
||||||
|
|
||||||
|
// Only log them in if a jwt was set
|
||||||
|
if (data.jwt) {
|
||||||
|
UserService.Instance.login(data);
|
||||||
|
|
||||||
|
const site = await HttpService.client.getSite({ auth: myAuth() });
|
||||||
|
|
||||||
|
if (site.state === "success") {
|
||||||
|
UserService.Instance.myUserInfo = site.data.my_user;
|
||||||
|
}
|
||||||
|
|
||||||
|
i.props.history.replace("/communities");
|
||||||
|
} else {
|
||||||
|
if (data.verify_email_sent) {
|
||||||
|
toast(i18n.t("verify_email_sent"));
|
||||||
|
}
|
||||||
|
if (data.registration_created) {
|
||||||
|
toast(i18n.t("registration_application_sent"));
|
||||||
|
}
|
||||||
|
i.props.history.push("/");
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -481,17 +537,18 @@ export class Signup extends Component<any, State> {
|
||||||
i.setState(i.state);
|
i.setState(i.state);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleRegenCaptcha(i: Signup) {
|
async handleRegenCaptcha(i: Signup) {
|
||||||
i.audio = undefined;
|
i.audio = undefined;
|
||||||
i.setState({ captchaPlaying: false });
|
i.setState({ captchaPlaying: false });
|
||||||
WebSocketService.Instance.send(wsClient.getCaptcha({}));
|
await i.fetchCaptcha();
|
||||||
}
|
}
|
||||||
|
|
||||||
handleCaptchaPlay(i: Signup) {
|
handleCaptchaPlay(i: Signup) {
|
||||||
// This was a bad bug, it should only build the new audio on a new file.
|
// This was a bad bug, it should only build the new audio on a new file.
|
||||||
// Replays would stop prematurely if this was rebuilt every time.
|
// Replays would stop prematurely if this was rebuilt every time.
|
||||||
const captchaRes = i.state.captcha?.ok;
|
|
||||||
if (captchaRes) {
|
if (i.state.captchaRes.state == "success" && i.state.captchaRes.data.ok) {
|
||||||
|
const captchaRes = i.state.captchaRes.data.ok;
|
||||||
if (!i.audio) {
|
if (!i.audio) {
|
||||||
const base64 = `data:audio/wav;base64,${captchaRes.wav}`;
|
const base64 = `data:audio/wav;base64,${captchaRes.wav}`;
|
||||||
i.audio = new Audio(base64);
|
i.audio = new Audio(base64);
|
||||||
|
@ -512,45 +569,4 @@ export class Signup extends Component<any, State> {
|
||||||
captchaPngSrc(captcha: CaptchaResponse) {
|
captchaPngSrc(captcha: CaptchaResponse) {
|
||||||
return `data:image/png;base64,${captcha.png}`;
|
return `data:image/png;base64,${captcha.png}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
parseMessage(msg: any) {
|
|
||||||
const op = wsUserOp(msg);
|
|
||||||
console.log(msg);
|
|
||||||
if (msg.error) {
|
|
||||||
toast(i18n.t(msg.error), "danger");
|
|
||||||
this.setState(s => ((s.form.captcha_answer = undefined), s));
|
|
||||||
// Refetch another captcha
|
|
||||||
// WebSocketService.Instance.send(wsClient.getCaptcha());
|
|
||||||
return;
|
|
||||||
} else {
|
|
||||||
if (op == UserOperation.Register) {
|
|
||||||
const data = wsJsonToRes<LoginResponse>(msg);
|
|
||||||
// Only log them in if a jwt was set
|
|
||||||
if (data.jwt) {
|
|
||||||
UserService.Instance.login(data);
|
|
||||||
this.props.history.push("/communities");
|
|
||||||
location.reload();
|
|
||||||
} else {
|
|
||||||
if (data.verify_email_sent) {
|
|
||||||
toast(i18n.t("verify_email_sent"));
|
|
||||||
}
|
|
||||||
if (data.registration_created) {
|
|
||||||
toast(i18n.t("registration_application_sent"));
|
|
||||||
}
|
|
||||||
this.props.history.push("/");
|
|
||||||
}
|
|
||||||
} else if (op == UserOperation.GetCaptcha) {
|
|
||||||
const data = wsJsonToRes<GetCaptchaResponse>(msg);
|
|
||||||
if (data.ok) {
|
|
||||||
this.setState({ captcha: data });
|
|
||||||
this.setState(s => ((s.form.captcha_uuid = data.ok?.uuid), s));
|
|
||||||
}
|
|
||||||
} else if (op == UserOperation.PasswordReset) {
|
|
||||||
toast(i18n.t("reset_password_mail_sent"));
|
|
||||||
} else if (op == UserOperation.GetSite) {
|
|
||||||
const data = wsJsonToRes<GetSiteResponse>(msg);
|
|
||||||
this.setState({ siteRes: data });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,18 +7,12 @@ import {
|
||||||
import {
|
import {
|
||||||
CreateSite,
|
CreateSite,
|
||||||
EditSite,
|
EditSite,
|
||||||
GetFederatedInstancesResponse,
|
|
||||||
GetSiteResponse,
|
GetSiteResponse,
|
||||||
|
Instance,
|
||||||
ListingType,
|
ListingType,
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { WebSocketService } from "../../services";
|
import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
|
||||||
import {
|
|
||||||
capitalizeFirstLetter,
|
|
||||||
fetchThemeList,
|
|
||||||
myAuth,
|
|
||||||
wsClient,
|
|
||||||
} 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,60 +21,41 @@ import { MarkdownTextArea } from "../common/markdown-textarea";
|
||||||
import NavigationPrompt from "../common/navigation-prompt";
|
import NavigationPrompt from "../common/navigation-prompt";
|
||||||
|
|
||||||
interface SiteFormProps {
|
interface SiteFormProps {
|
||||||
siteRes: GetSiteResponse;
|
blockedInstances?: Instance[];
|
||||||
instancesRes?: GetFederatedInstancesResponse;
|
allowedInstances?: Instance[];
|
||||||
showLocal?: boolean;
|
showLocal?: boolean;
|
||||||
|
themeList?: string[];
|
||||||
|
onSaveSite(form: EditSite): void;
|
||||||
|
siteRes: GetSiteResponse;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface SiteFormState {
|
interface SiteFormState {
|
||||||
siteForm: EditSite;
|
siteForm: EditSite;
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
themeList?: string[];
|
|
||||||
instance_select: {
|
instance_select: {
|
||||||
allowed_instances: string;
|
allowed_instances: string;
|
||||||
blocked_instances: string;
|
blocked_instances: string;
|
||||||
};
|
};
|
||||||
|
submitted: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
type InstanceKey = "allowed_instances" | "blocked_instances";
|
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: {
|
siteForm: this.initSiteForm(),
|
||||||
auth: "TODO",
|
|
||||||
},
|
|
||||||
loading: false,
|
loading: false,
|
||||||
instance_select: {
|
instance_select: {
|
||||||
allowed_instances: "",
|
allowed_instances: "",
|
||||||
blocked_instances: "",
|
blocked_instances: "",
|
||||||
},
|
},
|
||||||
|
submitted: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props: any, context: any) {
|
initSiteForm(): EditSite {
|
||||||
super(props, context);
|
|
||||||
|
|
||||||
this.handleSiteSidebarChange = this.handleSiteSidebarChange.bind(this);
|
|
||||||
this.handleSiteLegalInfoChange = this.handleSiteLegalInfoChange.bind(this);
|
|
||||||
this.handleSiteApplicationQuestionChange =
|
|
||||||
this.handleSiteApplicationQuestionChange.bind(this);
|
|
||||||
|
|
||||||
this.handleIconUpload = this.handleIconUpload.bind(this);
|
|
||||||
this.handleIconRemove = this.handleIconRemove.bind(this);
|
|
||||||
|
|
||||||
this.handleBannerUpload = this.handleBannerUpload.bind(this);
|
|
||||||
this.handleBannerRemove = this.handleBannerRemove.bind(this);
|
|
||||||
|
|
||||||
this.handleDefaultPostListingTypeChange =
|
|
||||||
this.handleDefaultPostListingTypeChange.bind(this);
|
|
||||||
|
|
||||||
this.handleDiscussionLanguageChange =
|
|
||||||
this.handleDiscussionLanguageChange.bind(this);
|
|
||||||
|
|
||||||
const site = this.props.siteRes.site_view.site;
|
const site = this.props.siteRes.site_view.site;
|
||||||
const ls = this.props.siteRes.site_view.local_site;
|
const ls = this.props.siteRes.site_view.local_site;
|
||||||
this.state = {
|
return {
|
||||||
...this.state,
|
|
||||||
siteForm: {
|
|
||||||
name: site.name,
|
name: site.name,
|
||||||
sidebar: site.sidebar,
|
sidebar: site.sidebar,
|
||||||
description: site.description,
|
description: site.description,
|
||||||
|
@ -107,21 +82,34 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
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,
|
||||||
allowed_instances:
|
allowed_instances: this.props.allowedInstances?.map(i => i.domain),
|
||||||
this.props.instancesRes?.federated_instances?.allowed.map(
|
blocked_instances: this.props.blockedInstances?.map(i => i.domain),
|
||||||
i => i.domain
|
|
||||||
),
|
|
||||||
blocked_instances:
|
|
||||||
this.props.instancesRes?.federated_instances?.blocked.map(
|
|
||||||
i => i.domain
|
|
||||||
),
|
|
||||||
auth: "TODO",
|
auth: "TODO",
|
||||||
},
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
async componentDidMount() {
|
constructor(props: any, context: any) {
|
||||||
this.setState({ themeList: await fetchThemeList() });
|
super(props, context);
|
||||||
|
|
||||||
|
this.handleSiteSidebarChange = this.handleSiteSidebarChange.bind(this);
|
||||||
|
this.handleSiteLegalInfoChange = this.handleSiteLegalInfoChange.bind(this);
|
||||||
|
this.handleSiteApplicationQuestionChange =
|
||||||
|
this.handleSiteApplicationQuestionChange.bind(this);
|
||||||
|
|
||||||
|
this.handleIconUpload = this.handleIconUpload.bind(this);
|
||||||
|
this.handleIconRemove = this.handleIconRemove.bind(this);
|
||||||
|
|
||||||
|
this.handleBannerUpload = this.handleBannerUpload.bind(this);
|
||||||
|
this.handleBannerRemove = this.handleBannerRemove.bind(this);
|
||||||
|
|
||||||
|
this.handleDefaultPostListingTypeChange =
|
||||||
|
this.handleDefaultPostListingTypeChange.bind(this);
|
||||||
|
|
||||||
|
this.handleDiscussionLanguageChange =
|
||||||
|
this.handleDiscussionLanguageChange.bind(this);
|
||||||
|
this.handleAddInstance = this.handleAddInstance.bind(this);
|
||||||
|
this.handleInstanceEnterPress = this.handleInstanceEnterPress.bind(this);
|
||||||
|
this.handleInstanceTextChange = this.handleInstanceTextChange.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Necessary to stop the loading
|
// Necessary to stop the loading
|
||||||
|
@ -129,29 +117,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
this.setState({ loading: false });
|
this.setState({ loading: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate() {
|
|
||||||
if (
|
|
||||||
!this.state.loading &&
|
|
||||||
!this.props.siteRes.site_view.local_site.site_setup &&
|
|
||||||
(this.state.siteForm.name ||
|
|
||||||
this.state.siteForm.sidebar ||
|
|
||||||
this.state.siteForm.application_question ||
|
|
||||||
this.state.siteForm.description)
|
|
||||||
) {
|
|
||||||
window.onbeforeunload = () => true;
|
|
||||||
} else {
|
|
||||||
window.onbeforeunload = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
window.onbeforeunload = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
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)}>
|
||||||
<NavigationPrompt
|
<NavigationPrompt
|
||||||
when={
|
when={
|
||||||
!this.state.loading &&
|
!this.state.loading &&
|
||||||
|
@ -161,10 +130,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
this.state.siteForm.sidebar ||
|
this.state.siteForm.sidebar ||
|
||||||
this.state.siteForm.application_question ||
|
this.state.siteForm.application_question ||
|
||||||
this.state.siteForm.description
|
this.state.siteForm.description
|
||||||
)
|
) &&
|
||||||
|
!this.state.submitted
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<form onSubmit={linkEvent(this, this.handleCreateSiteSubmit)}>
|
|
||||||
<h5>{`${
|
<h5>{`${
|
||||||
siteSetup
|
siteSetup
|
||||||
? capitalizeFirstLetter(i18n.t("save"))
|
? capitalizeFirstLetter(i18n.t("save"))
|
||||||
|
@ -255,10 +224,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
id="create-site-downvotes"
|
id="create-site-downvotes"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={this.state.siteForm.enable_downvotes}
|
checked={this.state.siteForm.enable_downvotes}
|
||||||
onChange={linkEvent(
|
onChange={linkEvent(this, this.handleSiteEnableDownvotesChange)}
|
||||||
this,
|
|
||||||
this.handleSiteEnableDownvotesChange
|
|
||||||
)}
|
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
className="form-check-label"
|
className="form-check-label"
|
||||||
|
@ -299,10 +265,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
<select
|
<select
|
||||||
id="create-site-registration-mode"
|
id="create-site-registration-mode"
|
||||||
value={this.state.siteForm.registration_mode}
|
value={this.state.siteForm.registration_mode}
|
||||||
onChange={linkEvent(
|
onChange={linkEvent(this, this.handleSiteRegistrationModeChange)}
|
||||||
this,
|
|
||||||
this.handleSiteRegistrationModeChange
|
|
||||||
)}
|
|
||||||
className="custom-select w-auto"
|
className="custom-select w-auto"
|
||||||
>
|
>
|
||||||
<option value={"RequireApplication"}>
|
<option value={"RequireApplication"}>
|
||||||
|
@ -429,7 +392,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
className="custom-select w-auto"
|
className="custom-select w-auto"
|
||||||
>
|
>
|
||||||
<option value="browser">{i18n.t("browser_default")}</option>
|
<option value="browser">{i18n.t("browser_default")}</option>
|
||||||
{this.state.themeList?.map(theme => (
|
{this.props.themeList?.map(theme => (
|
||||||
<option key={theme} value={theme}>
|
<option key={theme} value={theme}>
|
||||||
{theme}
|
{theme}
|
||||||
</option>
|
</option>
|
||||||
|
@ -442,9 +405,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
<label className="col-sm-3">{i18n.t("listing_type")}</label>
|
<label className="col-sm-3">{i18n.t("listing_type")}</label>
|
||||||
<div className="col-sm-9">
|
<div className="col-sm-9">
|
||||||
<ListingTypeSelect
|
<ListingTypeSelect
|
||||||
type_={
|
type_={this.state.siteForm.default_post_listing_type ?? "Local"}
|
||||||
this.state.siteForm.default_post_listing_type ?? "Local"
|
|
||||||
}
|
|
||||||
showLocal
|
showLocal
|
||||||
showSubscribed={false}
|
showSubscribed={false}
|
||||||
onChange={this.handleDefaultPostListingTypeChange}
|
onChange={this.handleDefaultPostListingTypeChange}
|
||||||
|
@ -661,7 +622,6 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -688,11 +648,15 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-sm bg-success ml-2"
|
className="btn btn-sm bg-success ml-2"
|
||||||
onClick={linkEvent(key, this.handleAddInstance)}
|
onClick={linkEvent(key, this.handleAddInstance)}
|
||||||
|
style={"width: 2rem; height: 2rem;"}
|
||||||
tabIndex={
|
tabIndex={
|
||||||
-1 /* Making this untabble because handling enter key in text input makes keyboard support for this button redundant */
|
-1 /* Making this untabble because handling enter key in text input makes keyboard support for this button redundant */
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Icon icon="add" classes="icon-inline text-light m-auto" />
|
<Icon
|
||||||
|
icon="add"
|
||||||
|
classes="icon-inline text-light m-auto d-block position-static"
|
||||||
|
/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{selectedInstances && selectedInstances.length > 0 && (
|
{selectedInstances && selectedInstances.length > 0 && (
|
||||||
|
@ -708,13 +672,17 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
<button
|
<button
|
||||||
id={instance}
|
id={instance}
|
||||||
type="button"
|
type="button"
|
||||||
|
style={"width: 2rem; height: 2rem;"}
|
||||||
className="btn btn-sm bg-danger"
|
className="btn btn-sm bg-danger"
|
||||||
onClick={linkEvent(
|
onClick={linkEvent(
|
||||||
{ key, instance },
|
{ key, instance },
|
||||||
this.handleRemoveInstance
|
this.handleRemoveInstance
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<Icon icon="x" classes="icon-inline text-light m-auto" />
|
<Icon
|
||||||
|
icon="x"
|
||||||
|
classes="icon-inline text-light m-auto d-block position-static"
|
||||||
|
/>
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
|
@ -745,48 +713,69 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleCreateSiteSubmit(i: SiteForm, event: any) {
|
handleSaveSiteSubmit(i: SiteForm, event: any) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
i.setState({ loading: true });
|
const auth = myAuthRequired();
|
||||||
const auth = myAuth() ?? "TODO";
|
|
||||||
i.setState(s => ((s.siteForm.auth = auth), s));
|
i.setState(s => ((s.siteForm.auth = auth), s));
|
||||||
|
i.setState({ loading: true, submitted: true });
|
||||||
|
|
||||||
|
const stateSiteForm = i.state.siteForm;
|
||||||
|
|
||||||
|
let form: EditSite | CreateSite;
|
||||||
|
|
||||||
if (i.props.siteRes.site_view.local_site.site_setup) {
|
if (i.props.siteRes.site_view.local_site.site_setup) {
|
||||||
WebSocketService.Instance.send(wsClient.editSite(i.state.siteForm));
|
form = stateSiteForm;
|
||||||
} else {
|
} else {
|
||||||
const sForm = i.state.siteForm;
|
form = {
|
||||||
const form: CreateSite = {
|
name: stateSiteForm.name ?? "My site",
|
||||||
name: sForm.name ?? "My site",
|
sidebar: stateSiteForm.sidebar,
|
||||||
sidebar: sForm.sidebar,
|
description: stateSiteForm.description,
|
||||||
description: sForm.description,
|
icon: stateSiteForm.icon,
|
||||||
icon: sForm.icon,
|
banner: stateSiteForm.banner,
|
||||||
banner: sForm.banner,
|
community_creation_admin_only:
|
||||||
community_creation_admin_only: sForm.community_creation_admin_only,
|
stateSiteForm.community_creation_admin_only,
|
||||||
enable_nsfw: sForm.enable_nsfw,
|
enable_nsfw: stateSiteForm.enable_nsfw,
|
||||||
enable_downvotes: sForm.enable_downvotes,
|
enable_downvotes: stateSiteForm.enable_downvotes,
|
||||||
application_question: sForm.application_question,
|
application_question: stateSiteForm.application_question,
|
||||||
registration_mode: sForm.registration_mode,
|
registration_mode: stateSiteForm.registration_mode,
|
||||||
require_email_verification: sForm.require_email_verification,
|
require_email_verification: stateSiteForm.require_email_verification,
|
||||||
private_instance: sForm.private_instance,
|
private_instance: stateSiteForm.private_instance,
|
||||||
default_theme: sForm.default_theme,
|
default_theme: stateSiteForm.default_theme,
|
||||||
default_post_listing_type: sForm.default_post_listing_type,
|
default_post_listing_type: stateSiteForm.default_post_listing_type,
|
||||||
application_email_admins: sForm.application_email_admins,
|
application_email_admins: stateSiteForm.application_email_admins,
|
||||||
hide_modlog_mod_names: sForm.hide_modlog_mod_names,
|
hide_modlog_mod_names: stateSiteForm.hide_modlog_mod_names,
|
||||||
legal_information: sForm.legal_information,
|
legal_information: stateSiteForm.legal_information,
|
||||||
slur_filter_regex: sForm.slur_filter_regex,
|
slur_filter_regex: stateSiteForm.slur_filter_regex,
|
||||||
actor_name_max_length: sForm.actor_name_max_length,
|
actor_name_max_length: stateSiteForm.actor_name_max_length,
|
||||||
federation_enabled: sForm.federation_enabled,
|
rate_limit_message: stateSiteForm.rate_limit_message,
|
||||||
federation_debug: sForm.federation_debug,
|
rate_limit_message_per_second:
|
||||||
federation_worker_count: sForm.federation_worker_count,
|
stateSiteForm.rate_limit_message_per_second,
|
||||||
captcha_enabled: sForm.captcha_enabled,
|
rate_limit_comment: stateSiteForm.rate_limit_comment,
|
||||||
captcha_difficulty: sForm.captcha_difficulty,
|
rate_limit_comment_per_second:
|
||||||
allowed_instances: sForm.allowed_instances,
|
stateSiteForm.rate_limit_comment_per_second,
|
||||||
blocked_instances: sForm.blocked_instances,
|
rate_limit_image: stateSiteForm.rate_limit_image,
|
||||||
discussion_languages: sForm.discussion_languages,
|
rate_limit_image_per_second: stateSiteForm.rate_limit_image_per_second,
|
||||||
|
rate_limit_post: stateSiteForm.rate_limit_post,
|
||||||
|
rate_limit_post_per_second: stateSiteForm.rate_limit_post_per_second,
|
||||||
|
rate_limit_register: stateSiteForm.rate_limit_register,
|
||||||
|
rate_limit_register_per_second:
|
||||||
|
stateSiteForm.rate_limit_register_per_second,
|
||||||
|
rate_limit_search: stateSiteForm.rate_limit_search,
|
||||||
|
rate_limit_search_per_second:
|
||||||
|
stateSiteForm.rate_limit_search_per_second,
|
||||||
|
federation_enabled: stateSiteForm.federation_enabled,
|
||||||
|
federation_debug: stateSiteForm.federation_debug,
|
||||||
|
federation_worker_count: stateSiteForm.federation_worker_count,
|
||||||
|
captcha_enabled: stateSiteForm.captcha_enabled,
|
||||||
|
captcha_difficulty: stateSiteForm.captcha_difficulty,
|
||||||
|
allowed_instances: stateSiteForm.allowed_instances,
|
||||||
|
blocked_instances: stateSiteForm.blocked_instances,
|
||||||
|
discussion_languages: stateSiteForm.discussion_languages,
|
||||||
auth,
|
auth,
|
||||||
};
|
};
|
||||||
WebSocketService.Instance.send(wsClient.createSite(form));
|
|
||||||
}
|
}
|
||||||
i.setState(i.state);
|
|
||||||
|
i.props.onSaveSite(form);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleAddInstance(key: InstanceKey) {
|
handleAddInstance(key: InstanceKey) {
|
||||||
|
|
|
@ -1,19 +1,18 @@
|
||||||
import { Component, InfernoMouseEvent, linkEvent } from "inferno";
|
import { Component, InfernoMouseEvent, linkEvent } from "inferno";
|
||||||
import { EditSite, GetSiteResponse } from "lemmy-js-client";
|
import { EditSite, Tagline } from "lemmy-js-client";
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { WebSocketService } from "../../services";
|
import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
|
||||||
import { capitalizeFirstLetter, myAuth, wsClient } from "../../utils";
|
|
||||||
import { HtmlTags } from "../common/html-tags";
|
import { HtmlTags } from "../common/html-tags";
|
||||||
import { Icon, Spinner } from "../common/icon";
|
import { Icon, Spinner } from "../common/icon";
|
||||||
import { MarkdownTextArea } from "../common/markdown-textarea";
|
import { MarkdownTextArea } from "../common/markdown-textarea";
|
||||||
|
|
||||||
interface TaglineFormProps {
|
interface TaglineFormProps {
|
||||||
siteRes: GetSiteResponse;
|
taglines: Array<Tagline>;
|
||||||
|
onSaveSite(form: EditSite): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface TaglineFormState {
|
interface TaglineFormState {
|
||||||
siteRes: GetSiteResponse;
|
taglines: Array<string>;
|
||||||
siteForm: EditSite;
|
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
editingRow?: number;
|
editingRow?: number;
|
||||||
}
|
}
|
||||||
|
@ -21,12 +20,8 @@ interface TaglineFormState {
|
||||||
export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
||||||
state: TaglineFormState = {
|
state: TaglineFormState = {
|
||||||
loading: false,
|
loading: false,
|
||||||
siteRes: this.props.siteRes,
|
|
||||||
editingRow: undefined,
|
editingRow: undefined,
|
||||||
siteForm: {
|
taglines: this.props.taglines.map(x => x.content),
|
||||||
taglines: this.props.siteRes.taglines?.map(x => x.content),
|
|
||||||
auth: "TODO",
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
|
@ -54,7 +49,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
||||||
<th style="width:121px"></th>
|
<th style="width:121px"></th>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{this.state.siteForm.taglines?.map((cv, index) => (
|
{this.state.taglines.map((cv, index) => (
|
||||||
<tr key={index}>
|
<tr key={index}>
|
||||||
<td>
|
<td>
|
||||||
{this.state.editingRow == index && (
|
{this.state.editingRow == index && (
|
||||||
|
@ -64,8 +59,8 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
||||||
this.handleTaglineChange(this, index, s)
|
this.handleTaglineChange(this, index, s)
|
||||||
}
|
}
|
||||||
hideNavigationWarnings
|
hideNavigationWarnings
|
||||||
allLanguages={this.state.siteRes.all_languages}
|
allLanguages={[]}
|
||||||
siteLanguages={this.state.siteRes.discussion_languages}
|
siteLanguages={[]}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{this.state.editingRow != index && <div>{cv}</div>}
|
{this.state.editingRow != index && <div>{cv}</div>}
|
||||||
|
@ -74,7 +69,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
||||||
<button
|
<button
|
||||||
className="btn btn-link btn-animate text-muted"
|
className="btn btn-link btn-animate text-muted"
|
||||||
onClick={linkEvent(
|
onClick={linkEvent(
|
||||||
{ form: this, index: index },
|
{ i: this, index: index },
|
||||||
this.handleEditTaglineClick
|
this.handleEditTaglineClick
|
||||||
)}
|
)}
|
||||||
data-tippy-content={i18n.t("edit")}
|
data-tippy-content={i18n.t("edit")}
|
||||||
|
@ -86,7 +81,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
||||||
<button
|
<button
|
||||||
className="btn btn-link btn-animate text-muted"
|
className="btn btn-link btn-animate text-muted"
|
||||||
onClick={linkEvent(
|
onClick={linkEvent(
|
||||||
{ form: this, index: index },
|
{ i: this, index: index },
|
||||||
this.handleDeleteTaglineClick
|
this.handleDeleteTaglineClick
|
||||||
)}
|
)}
|
||||||
data-tippy-content={i18n.t("delete")}
|
data-tippy-content={i18n.t("delete")}
|
||||||
|
@ -131,46 +126,38 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleTaglineChange(i: TaglineForm, index: number, val: string) {
|
handleTaglineChange(i: TaglineForm, index: number, val: string) {
|
||||||
const taglines = i.state.siteForm.taglines;
|
if (i.state.taglines) {
|
||||||
if (taglines) {
|
i.setState(prev => ({
|
||||||
taglines[index] = val;
|
...prev,
|
||||||
i.setState(i.state);
|
taglines: prev.taglines.map((tl, i) => (i === index ? val : tl)),
|
||||||
|
}));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleDeleteTaglineClick(
|
handleDeleteTaglineClick(d: { i: TaglineForm; index: number }, event: any) {
|
||||||
props: { form: TaglineForm; index: number },
|
|
||||||
event: any
|
|
||||||
) {
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
const taglines = props.form.state.siteForm.taglines;
|
d.i.setState(prev => ({
|
||||||
if (taglines) {
|
...prev,
|
||||||
taglines.splice(props.index, 1);
|
taglines: prev.taglines.filter((_, i) => i !== d.index),
|
||||||
props.form.state.siteForm.taglines = undefined;
|
editingRow: undefined,
|
||||||
props.form.setState(props.form.state);
|
}));
|
||||||
props.form.state.siteForm.taglines = taglines;
|
|
||||||
props.form.setState({ ...props.form.state, editingRow: undefined });
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleEditTaglineClick(
|
handleEditTaglineClick(d: { i: TaglineForm; index: number }, event: any) {
|
||||||
props: { form: TaglineForm; index: number },
|
|
||||||
event: any
|
|
||||||
) {
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
if (this.state.editingRow == props.index) {
|
if (this.state.editingRow == d.index) {
|
||||||
props.form.setState({ editingRow: undefined });
|
d.i.setState({ editingRow: undefined });
|
||||||
} else {
|
} else {
|
||||||
props.form.setState({ editingRow: props.index });
|
d.i.setState({ editingRow: d.index });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleSaveClick(i: TaglineForm) {
|
async handleSaveClick(i: TaglineForm) {
|
||||||
i.setState({ loading: true });
|
i.setState({ loading: true });
|
||||||
const auth = myAuth() ?? "TODO";
|
i.props.onSaveSite({
|
||||||
i.setState(s => ((s.siteForm.auth = auth), s));
|
taglines: i.state.taglines,
|
||||||
WebSocketService.Instance.send(wsClient.editSite(i.state.siteForm));
|
auth: myAuthRequired(),
|
||||||
i.setState({ ...i.state, editingRow: undefined });
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
handleAddTaglineClick(
|
handleAddTaglineClick(
|
||||||
|
@ -178,13 +165,12 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
||||||
event: InfernoMouseEvent<HTMLButtonElement>
|
event: InfernoMouseEvent<HTMLButtonElement>
|
||||||
) {
|
) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
if (!i.state.siteForm.taglines) {
|
const newTaglines = [...i.state.taglines];
|
||||||
i.state.siteForm.taglines = [];
|
newTaglines.push("");
|
||||||
}
|
|
||||||
i.state.siteForm.taglines.push("");
|
|
||||||
i.setState({
|
i.setState({
|
||||||
...i.state,
|
taglines: newTaglines,
|
||||||
editingRow: i.state.siteForm.taglines.length - 1,
|
editingRow: newTaglines.length - 1,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,13 +8,11 @@ import {
|
||||||
AdminPurgeCommunityView,
|
AdminPurgeCommunityView,
|
||||||
AdminPurgePersonView,
|
AdminPurgePersonView,
|
||||||
AdminPurgePostView,
|
AdminPurgePostView,
|
||||||
CommunityModeratorView,
|
|
||||||
GetCommunity,
|
GetCommunity,
|
||||||
GetCommunityResponse,
|
GetCommunityResponse,
|
||||||
GetModlog,
|
GetModlog,
|
||||||
GetModlogResponse,
|
GetModlogResponse,
|
||||||
GetPersonDetails,
|
GetPersonDetails,
|
||||||
GetPersonDetailsResponse,
|
|
||||||
ModAddCommunityView,
|
ModAddCommunityView,
|
||||||
ModAddView,
|
ModAddView,
|
||||||
ModBanFromCommunityView,
|
ModBanFromCommunityView,
|
||||||
|
@ -27,15 +25,12 @@ import {
|
||||||
ModTransferCommunityView,
|
ModTransferCommunityView,
|
||||||
ModlogActionType,
|
ModlogActionType,
|
||||||
Person,
|
Person,
|
||||||
UserOperation,
|
|
||||||
wsJsonToRes,
|
|
||||||
wsUserOp,
|
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import { Subscription } from "rxjs";
|
|
||||||
import { i18n } from "../i18next";
|
import { i18n } from "../i18next";
|
||||||
import { InitialFetchRequest } from "../interfaces";
|
import { InitialFetchRequest } from "../interfaces";
|
||||||
import { WebSocketService } from "../services";
|
import { FirstLoadService } from "../services/FirstLoadService";
|
||||||
|
import { HttpService, RequestState } from "../services/HttpService";
|
||||||
import {
|
import {
|
||||||
Choice,
|
Choice,
|
||||||
QueryParams,
|
QueryParams,
|
||||||
|
@ -49,13 +44,9 @@ import {
|
||||||
getQueryParams,
|
getQueryParams,
|
||||||
getQueryString,
|
getQueryString,
|
||||||
getUpdatedSearchId,
|
getUpdatedSearchId,
|
||||||
isBrowser,
|
|
||||||
myAuth,
|
myAuth,
|
||||||
personToChoice,
|
personToChoice,
|
||||||
setIsoData,
|
setIsoData,
|
||||||
toast,
|
|
||||||
wsClient,
|
|
||||||
wsSubscribe,
|
|
||||||
} from "../utils";
|
} from "../utils";
|
||||||
import { HtmlTags } from "./common/html-tags";
|
import { HtmlTags } from "./common/html-tags";
|
||||||
import { Icon, Spinner } from "./common/icon";
|
import { Icon, Spinner } from "./common/icon";
|
||||||
|
@ -100,10 +91,8 @@ const getModlogQueryParams = () =>
|
||||||
});
|
});
|
||||||
|
|
||||||
interface ModlogState {
|
interface ModlogState {
|
||||||
res?: GetModlogResponse;
|
res: RequestState<GetModlogResponse>;
|
||||||
communityMods?: CommunityModeratorView[];
|
communityRes: RequestState<GetCommunityResponse>;
|
||||||
communityName?: string;
|
|
||||||
loadingModlog: boolean;
|
|
||||||
loadingModSearch: boolean;
|
loadingModSearch: boolean;
|
||||||
loadingUserSearch: boolean;
|
loadingUserSearch: boolean;
|
||||||
modSearchOptions: Choice[];
|
modSearchOptions: Choice[];
|
||||||
|
@ -629,7 +618,7 @@ async function createNewOptions({
|
||||||
|
|
||||||
if (text.length > 0) {
|
if (text.length > 0) {
|
||||||
newOptions.push(
|
newOptions.push(
|
||||||
...(await fetchUsers(text)).users
|
...(await fetchUsers(text))
|
||||||
.slice(0, Number(fetchLimit))
|
.slice(0, Number(fetchLimit))
|
||||||
.map<Choice>(personToChoice)
|
.map<Choice>(personToChoice)
|
||||||
);
|
);
|
||||||
|
@ -643,10 +632,10 @@ export class Modlog extends Component<
|
||||||
ModlogState
|
ModlogState
|
||||||
> {
|
> {
|
||||||
private isoData = setIsoData(this.context);
|
private isoData = setIsoData(this.context);
|
||||||
private subscription?: Subscription;
|
|
||||||
|
|
||||||
state: ModlogState = {
|
state: ModlogState = {
|
||||||
loadingModlog: true,
|
res: { state: "empty" },
|
||||||
|
communityRes: { state: "empty" },
|
||||||
loadingModSearch: false,
|
loadingModSearch: false,
|
||||||
loadingUserSearch: false,
|
loadingUserSearch: false,
|
||||||
userSearchOptions: [],
|
userSearchOptions: [],
|
||||||
|
@ -662,58 +651,35 @@ export class Modlog extends Component<
|
||||||
this.handleUserChange = this.handleUserChange.bind(this);
|
this.handleUserChange = this.handleUserChange.bind(this);
|
||||||
this.handleModChange = this.handleModChange.bind(this);
|
this.handleModChange = this.handleModChange.bind(this);
|
||||||
|
|
||||||
this.parseMessage = this.parseMessage.bind(this);
|
|
||||||
this.subscription = wsSubscribe(this.parseMessage);
|
|
||||||
|
|
||||||
// Only fetch the data if coming from another route
|
// Only fetch the data if coming from another route
|
||||||
if (this.isoData.path === this.context.router.route.match.url) {
|
if (FirstLoadService.isFirstLoad) {
|
||||||
|
const [res, communityRes, filteredModRes, filteredUserRes] =
|
||||||
|
this.isoData.routeData;
|
||||||
this.state = {
|
this.state = {
|
||||||
...this.state,
|
...this.state,
|
||||||
res: this.isoData.routeData[0] as GetModlogResponse,
|
res,
|
||||||
|
communityRes,
|
||||||
};
|
};
|
||||||
|
|
||||||
const communityRes: GetCommunityResponse | undefined =
|
if (filteredModRes.state === "success") {
|
||||||
this.isoData.routeData[1];
|
|
||||||
|
|
||||||
// Getting the moderators
|
|
||||||
this.state = {
|
this.state = {
|
||||||
...this.state,
|
...this.state,
|
||||||
communityMods: communityRes?.moderators,
|
modSearchOptions: [personToChoice(filteredModRes.data.person_view)],
|
||||||
};
|
|
||||||
|
|
||||||
const filteredModRes: GetPersonDetailsResponse | undefined =
|
|
||||||
this.isoData.routeData[2];
|
|
||||||
if (filteredModRes) {
|
|
||||||
this.state = {
|
|
||||||
...this.state,
|
|
||||||
modSearchOptions: [personToChoice(filteredModRes.person_view)],
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
const filteredUserRes: GetPersonDetailsResponse | undefined =
|
if (filteredUserRes.state === "success") {
|
||||||
this.isoData.routeData[3];
|
|
||||||
if (filteredUserRes) {
|
|
||||||
this.state = {
|
this.state = {
|
||||||
...this.state,
|
...this.state,
|
||||||
userSearchOptions: [personToChoice(filteredUserRes.person_view)],
|
userSearchOptions: [personToChoice(filteredUserRes.data.person_view)],
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
this.state = { ...this.state, loadingModlog: false };
|
|
||||||
} else {
|
|
||||||
this.refetch();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
if (isBrowser()) {
|
|
||||||
this.subscription?.unsubscribe();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
get combined() {
|
get combined() {
|
||||||
const res = this.state.res;
|
const res = this.state.res;
|
||||||
const combined = res ? buildCombined(res) : [];
|
const combined = res.state == "success" ? buildCombined(res.data) : [];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<tbody>
|
<tbody>
|
||||||
|
@ -737,7 +703,10 @@ export class Modlog extends Component<
|
||||||
}
|
}
|
||||||
|
|
||||||
get amAdminOrMod(): boolean {
|
get amAdminOrMod(): boolean {
|
||||||
return amAdmin() || amMod(this.state.communityMods);
|
const amMod_ =
|
||||||
|
this.state.communityRes.state == "success" &&
|
||||||
|
amMod(this.state.communityRes.data.moderators);
|
||||||
|
return amAdmin() || amMod_;
|
||||||
}
|
}
|
||||||
|
|
||||||
modOrAdminText(person?: Person): string {
|
modOrAdminText(person?: Person): string {
|
||||||
|
@ -755,14 +724,12 @@ export class Modlog extends Component<
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
communityName,
|
|
||||||
loadingModlog,
|
|
||||||
loadingModSearch,
|
loadingModSearch,
|
||||||
loadingUserSearch,
|
loadingUserSearch,
|
||||||
userSearchOptions,
|
userSearchOptions,
|
||||||
modSearchOptions,
|
modSearchOptions,
|
||||||
} = this.state;
|
} = this.state;
|
||||||
const { actionType, page, modId, userId } = getModlogQueryParams();
|
const { actionType, modId, userId } = getModlogQueryParams();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container-lg">
|
<div className="container-lg">
|
||||||
|
@ -785,14 +752,17 @@ export class Modlog extends Component<
|
||||||
#<strong>#</strong>#
|
#<strong>#</strong>#
|
||||||
</T>
|
</T>
|
||||||
</div>
|
</div>
|
||||||
|
{this.state.communityRes.state === "success" && (
|
||||||
<h5>
|
<h5>
|
||||||
{communityName && (
|
<Link
|
||||||
<Link className="text-body" to={`/c/${communityName}`}>
|
className="text-body"
|
||||||
/c/{communityName}{" "}
|
to={`/c/${this.state.communityRes.data.community_view.community.name}`}
|
||||||
|
>
|
||||||
|
/c/{this.state.communityRes.data.community_view.community.name}{" "}
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
|
||||||
<span>{i18n.t("modlog")}</span>
|
<span>{i18n.t("modlog")}</span>
|
||||||
</h5>
|
</h5>
|
||||||
|
)}
|
||||||
<div className="form-row">
|
<div className="form-row">
|
||||||
<select
|
<select
|
||||||
value={actionType}
|
value={actionType}
|
||||||
|
@ -841,12 +811,24 @@ export class Modlog extends Component<
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="table-responsive">
|
{this.renderModlogTable()}
|
||||||
{loadingModlog ? (
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderModlogTable() {
|
||||||
|
switch (this.state.res.state) {
|
||||||
|
case "loading":
|
||||||
|
return (
|
||||||
<h5>
|
<h5>
|
||||||
<Spinner large />
|
<Spinner large />
|
||||||
</h5>
|
</h5>
|
||||||
) : (
|
);
|
||||||
|
case "success": {
|
||||||
|
const page = getModlogQueryParams().page;
|
||||||
|
return (
|
||||||
|
<div className="table-responsive">
|
||||||
<table id="modlog_table" className="table table-sm table-hover">
|
<table id="modlog_table" className="table table-sm table-hover">
|
||||||
<thead className="pointer">
|
<thead className="pointer">
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -857,13 +839,12 @@ export class Modlog extends Component<
|
||||||
</thead>
|
</thead>
|
||||||
{this.combined}
|
{this.combined}
|
||||||
</table>
|
</table>
|
||||||
)}
|
|
||||||
<Paginator page={page} onChange={this.handlePageChange} />
|
<Paginator page={page} onChange={this.handlePageChange} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
handleFilterActionChange(i: Modlog, event: any) {
|
handleFilterActionChange(i: Modlog, event: any) {
|
||||||
i.updateUrl({
|
i.updateUrl({
|
||||||
|
@ -918,7 +899,7 @@ export class Modlog extends Component<
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
updateUrl({ actionType, modId, page, userId }: Partial<ModlogProps>) {
|
async updateUrl({ actionType, modId, page, userId }: Partial<ModlogProps>) {
|
||||||
const {
|
const {
|
||||||
page: urlPage,
|
page: urlPage,
|
||||||
actionType: urlActionType,
|
actionType: urlActionType,
|
||||||
|
@ -941,21 +922,18 @@ export class Modlog extends Component<
|
||||||
)}`
|
)}`
|
||||||
);
|
);
|
||||||
|
|
||||||
this.setState({
|
await this.refetch();
|
||||||
loadingModlog: true,
|
|
||||||
res: undefined,
|
|
||||||
});
|
|
||||||
|
|
||||||
this.refetch();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
refetch() {
|
async refetch() {
|
||||||
const auth = myAuth(false);
|
const auth = myAuth();
|
||||||
const { actionType, page, modId, userId } = getModlogQueryParams();
|
const { actionType, page, modId, userId } = getModlogQueryParams();
|
||||||
const { communityId: urlCommunityId } = this.props.match.params;
|
const { communityId: urlCommunityId } = this.props.match.params;
|
||||||
const communityId = getIdFromString(urlCommunityId);
|
const communityId = getIdFromString(urlCommunityId);
|
||||||
|
|
||||||
const modlogForm: GetModlog = {
|
this.setState({ res: { state: "loading" } });
|
||||||
|
this.setState({
|
||||||
|
res: await HttpService.client.getModlog({
|
||||||
community_id: communityId,
|
community_id: communityId,
|
||||||
page,
|
page,
|
||||||
limit: fetchLimit,
|
limit: fetchLimit,
|
||||||
|
@ -966,17 +944,17 @@ export class Modlog extends Component<
|
||||||
? modId ?? undefined
|
? modId ?? undefined
|
||||||
: undefined,
|
: undefined,
|
||||||
auth,
|
auth,
|
||||||
};
|
}),
|
||||||
|
});
|
||||||
WebSocketService.Instance.send(wsClient.getModlog(modlogForm));
|
|
||||||
|
|
||||||
if (communityId) {
|
if (communityId) {
|
||||||
const communityForm: GetCommunity = {
|
this.setState({ communityRes: { state: "loading" } });
|
||||||
|
this.setState({
|
||||||
|
communityRes: await HttpService.client.getCommunity({
|
||||||
id: communityId,
|
id: communityId,
|
||||||
auth,
|
auth,
|
||||||
};
|
}),
|
||||||
|
});
|
||||||
WebSocketService.Instance.send(wsClient.getCommunity(communityForm));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -986,9 +964,11 @@ export class Modlog extends Component<
|
||||||
query: { modId: urlModId, page, userId: urlUserId, actionType },
|
query: { modId: urlModId, page, userId: urlUserId, actionType },
|
||||||
auth,
|
auth,
|
||||||
site,
|
site,
|
||||||
}: InitialFetchRequest<QueryParams<ModlogProps>>): Promise<any>[] {
|
}: InitialFetchRequest<QueryParams<ModlogProps>>): Promise<
|
||||||
|
RequestState<any>
|
||||||
|
>[] {
|
||||||
const pathSplit = path.split("/");
|
const pathSplit = path.split("/");
|
||||||
const promises: Promise<any>[] = [];
|
const promises: Promise<RequestState<any>>[] = [];
|
||||||
const communityId = getIdFromString(pathSplit[2]);
|
const communityId = getIdFromString(pathSplit[2]);
|
||||||
const modId = !site.site_view.local_site.hide_modlog_mod_names
|
const modId = !site.site_view.local_site.hide_modlog_mod_names
|
||||||
? getIdFromString(urlModId)
|
? getIdFromString(urlModId)
|
||||||
|
@ -1014,7 +994,7 @@ export class Modlog extends Component<
|
||||||
};
|
};
|
||||||
promises.push(client.getCommunity(communityForm));
|
promises.push(client.getCommunity(communityForm));
|
||||||
} else {
|
} else {
|
||||||
promises.push(Promise.resolve());
|
promises.push(Promise.resolve({ state: "empty" }));
|
||||||
}
|
}
|
||||||
|
|
||||||
if (modId) {
|
if (modId) {
|
||||||
|
@ -1025,7 +1005,7 @@ export class Modlog extends Component<
|
||||||
|
|
||||||
promises.push(client.getPersonDetails(getPersonForm));
|
promises.push(client.getPersonDetails(getPersonForm));
|
||||||
} else {
|
} else {
|
||||||
promises.push(Promise.resolve());
|
promises.push(Promise.resolve({ state: "empty" }));
|
||||||
}
|
}
|
||||||
|
|
||||||
if (userId) {
|
if (userId) {
|
||||||
|
@ -1036,43 +1016,9 @@ export class Modlog extends Component<
|
||||||
|
|
||||||
promises.push(client.getPersonDetails(getPersonForm));
|
promises.push(client.getPersonDetails(getPersonForm));
|
||||||
} else {
|
} else {
|
||||||
promises.push(Promise.resolve());
|
promises.push(Promise.resolve({ state: "empty" }));
|
||||||
}
|
}
|
||||||
|
|
||||||
return promises;
|
return promises;
|
||||||
}
|
}
|
||||||
|
|
||||||
parseMessage(msg: any) {
|
|
||||||
const op = wsUserOp(msg);
|
|
||||||
console.log(msg);
|
|
||||||
|
|
||||||
if (msg.error) {
|
|
||||||
toast(i18n.t(msg.error), "danger");
|
|
||||||
} else {
|
|
||||||
switch (op) {
|
|
||||||
case UserOperation.GetModlog: {
|
|
||||||
const res = wsJsonToRes<GetModlogResponse>(msg);
|
|
||||||
window.scrollTo(0, 0);
|
|
||||||
this.setState({ res, loadingModlog: false });
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
case UserOperation.GetCommunity: {
|
|
||||||
const {
|
|
||||||
moderators,
|
|
||||||
community_view: {
|
|
||||||
community: { name },
|
|
||||||
},
|
|
||||||
} = wsJsonToRes<GetCommunityResponse>(msg);
|
|
||||||
this.setState({
|
|
||||||
communityMods: moderators,
|
|
||||||
communityName: name,
|
|
||||||
});
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because it is too large
Load diff
|
@ -1,59 +1,35 @@
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component, linkEvent } from "inferno";
|
||||||
import {
|
import { GetSiteResponse, LoginResponse } from "lemmy-js-client";
|
||||||
GetSiteResponse,
|
|
||||||
LoginResponse,
|
|
||||||
PasswordChangeAfterReset,
|
|
||||||
UserOperation,
|
|
||||||
wsJsonToRes,
|
|
||||||
wsUserOp,
|
|
||||||
} from "lemmy-js-client";
|
|
||||||
import { Subscription } from "rxjs";
|
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { UserService, WebSocketService } from "../../services";
|
import { HttpService, UserService } from "../../services";
|
||||||
import {
|
import { RequestState } from "../../services/HttpService";
|
||||||
capitalizeFirstLetter,
|
import { capitalizeFirstLetter, myAuth, setIsoData } from "../../utils";
|
||||||
isBrowser,
|
|
||||||
setIsoData,
|
|
||||||
toast,
|
|
||||||
wsClient,
|
|
||||||
wsSubscribe,
|
|
||||||
} from "../../utils";
|
|
||||||
import { HtmlTags } from "../common/html-tags";
|
import { HtmlTags } from "../common/html-tags";
|
||||||
import { Spinner } from "../common/icon";
|
import { Spinner } from "../common/icon";
|
||||||
|
|
||||||
interface State {
|
interface State {
|
||||||
|
passwordChangeRes: RequestState<LoginResponse>;
|
||||||
form: {
|
form: {
|
||||||
token: string;
|
token: string;
|
||||||
password?: string;
|
password?: string;
|
||||||
password_verify?: string;
|
password_verify?: string;
|
||||||
};
|
};
|
||||||
loading: boolean;
|
|
||||||
siteRes: GetSiteResponse;
|
siteRes: GetSiteResponse;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class PasswordChange extends Component<any, State> {
|
export class PasswordChange extends Component<any, State> {
|
||||||
private isoData = setIsoData(this.context);
|
private isoData = setIsoData(this.context);
|
||||||
private subscription?: Subscription;
|
|
||||||
|
|
||||||
state: State = {
|
state: State = {
|
||||||
|
passwordChangeRes: { state: "empty" },
|
||||||
|
siteRes: this.isoData.site_res,
|
||||||
form: {
|
form: {
|
||||||
token: this.props.match.params.token,
|
token: this.props.match.params.token,
|
||||||
},
|
},
|
||||||
loading: false,
|
|
||||||
siteRes: this.isoData.site_res,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
|
|
||||||
this.parseMessage = this.parseMessage.bind(this);
|
|
||||||
this.subscription = wsSubscribe(this.parseMessage);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
if (isBrowser()) {
|
|
||||||
this.subscription?.unsubscribe();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
get documentTitle(): string {
|
get documentTitle(): string {
|
||||||
|
@ -117,7 +93,7 @@ export class PasswordChange extends Component<any, State> {
|
||||||
<div className="form-group row">
|
<div className="form-group row">
|
||||||
<div className="col-sm-10">
|
<div className="col-sm-10">
|
||||||
<button type="submit" className="btn btn-secondary">
|
<button type="submit" className="btn btn-secondary">
|
||||||
{this.state.loading ? (
|
{this.state.passwordChangeRes.state == "loading" ? (
|
||||||
<Spinner />
|
<Spinner />
|
||||||
) : (
|
) : (
|
||||||
capitalizeFirstLetter(i18n.t("save"))
|
capitalizeFirstLetter(i18n.t("save"))
|
||||||
|
@ -139,36 +115,33 @@ export class PasswordChange extends Component<any, State> {
|
||||||
i.setState(i.state);
|
i.setState(i.state);
|
||||||
}
|
}
|
||||||
|
|
||||||
handlePasswordChangeSubmit(i: PasswordChange, event: any) {
|
async handlePasswordChangeSubmit(i: PasswordChange, event: any) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
i.setState({ loading: true });
|
i.setState({ passwordChangeRes: { state: "loading" } });
|
||||||
|
|
||||||
const password = i.state.form.password;
|
const password = i.state.form.password;
|
||||||
const password_verify = i.state.form.password_verify;
|
const password_verify = i.state.form.password_verify;
|
||||||
|
|
||||||
if (password && password_verify) {
|
if (password && password_verify) {
|
||||||
const form: PasswordChangeAfterReset = {
|
i.setState({
|
||||||
|
passwordChangeRes: await HttpService.client.passwordChangeAfterReset({
|
||||||
token: i.state.form.token,
|
token: i.state.form.token,
|
||||||
password,
|
password,
|
||||||
password_verify,
|
password_verify,
|
||||||
};
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
WebSocketService.Instance.send(wsClient.passwordChange(form));
|
if (i.state.passwordChangeRes.state === "success") {
|
||||||
}
|
const data = i.state.passwordChangeRes.data;
|
||||||
}
|
|
||||||
|
|
||||||
parseMessage(msg: any) {
|
|
||||||
const op = wsUserOp(msg);
|
|
||||||
console.log(msg);
|
|
||||||
if (msg.error) {
|
|
||||||
toast(i18n.t(msg.error), "danger");
|
|
||||||
this.setState({ loading: false });
|
|
||||||
return;
|
|
||||||
} else if (op == UserOperation.PasswordChangeAfterReset) {
|
|
||||||
const data = wsJsonToRes<LoginResponse>(msg);
|
|
||||||
UserService.Instance.login(data);
|
UserService.Instance.login(data);
|
||||||
this.props.history.push("/");
|
|
||||||
location.reload();
|
const site = await HttpService.client.getSite({ auth: myAuth() });
|
||||||
|
if (site.state === "success") {
|
||||||
|
UserService.Instance.myUserInfo = site.data.my_user;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.props.history.replace("/");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,11 +1,40 @@
|
||||||
import { Component } from "inferno";
|
import { Component } from "inferno";
|
||||||
import {
|
import {
|
||||||
|
AddAdmin,
|
||||||
|
AddModToCommunity,
|
||||||
|
BanFromCommunity,
|
||||||
|
BanPerson,
|
||||||
|
BlockPerson,
|
||||||
|
CommentId,
|
||||||
CommentView,
|
CommentView,
|
||||||
|
CreateComment,
|
||||||
|
CreateCommentLike,
|
||||||
|
CreateCommentReport,
|
||||||
|
CreatePostLike,
|
||||||
|
CreatePostReport,
|
||||||
|
DeleteComment,
|
||||||
|
DeletePost,
|
||||||
|
DistinguishComment,
|
||||||
|
EditComment,
|
||||||
|
EditPost,
|
||||||
|
FeaturePost,
|
||||||
|
GetComments,
|
||||||
GetPersonDetailsResponse,
|
GetPersonDetailsResponse,
|
||||||
Language,
|
Language,
|
||||||
|
LockPost,
|
||||||
|
MarkCommentReplyAsRead,
|
||||||
|
MarkPersonMentionAsRead,
|
||||||
PersonView,
|
PersonView,
|
||||||
PostView,
|
PostView,
|
||||||
|
PurgeComment,
|
||||||
|
PurgePerson,
|
||||||
|
PurgePost,
|
||||||
|
RemoveComment,
|
||||||
|
RemovePost,
|
||||||
|
SaveComment,
|
||||||
|
SavePost,
|
||||||
SortType,
|
SortType,
|
||||||
|
TransferCommunity,
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { CommentViewType, PersonDetailsView } from "../../interfaces";
|
import { CommentViewType, PersonDetailsView } from "../../interfaces";
|
||||||
import { commentsToFlatNodes, setupTippy } from "../../utils";
|
import { commentsToFlatNodes, setupTippy } from "../../utils";
|
||||||
|
@ -15,6 +44,7 @@ import { PostListing } from "../post/post-listing";
|
||||||
|
|
||||||
interface PersonDetailsProps {
|
interface PersonDetailsProps {
|
||||||
personRes: GetPersonDetailsResponse;
|
personRes: GetPersonDetailsResponse;
|
||||||
|
finished: Map<CommentId, boolean | undefined>;
|
||||||
admins: PersonView[];
|
admins: PersonView[];
|
||||||
allLanguages: Language[];
|
allLanguages: Language[];
|
||||||
siteLanguages: number[];
|
siteLanguages: number[];
|
||||||
|
@ -25,6 +55,34 @@ interface PersonDetailsProps {
|
||||||
enableNsfw: boolean;
|
enableNsfw: boolean;
|
||||||
view: PersonDetailsView;
|
view: PersonDetailsView;
|
||||||
onPageChange(page: number): number | any;
|
onPageChange(page: number): number | any;
|
||||||
|
onSaveComment(form: SaveComment): void;
|
||||||
|
onCommentReplyRead(form: MarkCommentReplyAsRead): void;
|
||||||
|
onPersonMentionRead(form: MarkPersonMentionAsRead): void;
|
||||||
|
onCreateComment(form: CreateComment): void;
|
||||||
|
onEditComment(form: EditComment): void;
|
||||||
|
onCommentVote(form: CreateCommentLike): void;
|
||||||
|
onBlockPerson(form: BlockPerson): void;
|
||||||
|
onDeleteComment(form: DeleteComment): void;
|
||||||
|
onRemoveComment(form: RemoveComment): void;
|
||||||
|
onDistinguishComment(form: DistinguishComment): void;
|
||||||
|
onAddModToCommunity(form: AddModToCommunity): void;
|
||||||
|
onAddAdmin(form: AddAdmin): void;
|
||||||
|
onBanPersonFromCommunity(form: BanFromCommunity): void;
|
||||||
|
onBanPerson(form: BanPerson): void;
|
||||||
|
onTransferCommunity(form: TransferCommunity): void;
|
||||||
|
onFetchChildren?(form: GetComments): void;
|
||||||
|
onCommentReport(form: CreateCommentReport): void;
|
||||||
|
onPurgePerson(form: PurgePerson): void;
|
||||||
|
onPurgeComment(form: PurgeComment): void;
|
||||||
|
onPostEdit(form: EditPost): void;
|
||||||
|
onPostVote(form: CreatePostLike): void;
|
||||||
|
onPostReport(form: CreatePostReport): void;
|
||||||
|
onLockPost(form: LockPost): void;
|
||||||
|
onDeletePost(form: DeletePost): void;
|
||||||
|
onRemovePost(form: RemovePost): void;
|
||||||
|
onSavePost(form: SavePost): void;
|
||||||
|
onFeaturePost(form: FeaturePost): void;
|
||||||
|
onPurgePost(form: PurgePost): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
enum ItemEnum {
|
enum ItemEnum {
|
||||||
|
@ -93,6 +151,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
|
||||||
key={i.id}
|
key={i.id}
|
||||||
nodes={[{ comment_view: c, children: [], depth: 0 }]}
|
nodes={[{ comment_view: c, children: [], depth: 0 }]}
|
||||||
viewType={CommentViewType.Flat}
|
viewType={CommentViewType.Flat}
|
||||||
|
finished={this.props.finished}
|
||||||
admins={this.props.admins}
|
admins={this.props.admins}
|
||||||
noBorder
|
noBorder
|
||||||
noIndent
|
noIndent
|
||||||
|
@ -101,6 +160,25 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
|
||||||
enableDownvotes={this.props.enableDownvotes}
|
enableDownvotes={this.props.enableDownvotes}
|
||||||
allLanguages={this.props.allLanguages}
|
allLanguages={this.props.allLanguages}
|
||||||
siteLanguages={this.props.siteLanguages}
|
siteLanguages={this.props.siteLanguages}
|
||||||
|
onCommentReplyRead={this.props.onCommentReplyRead}
|
||||||
|
onPersonMentionRead={this.props.onPersonMentionRead}
|
||||||
|
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}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -116,6 +194,22 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
|
||||||
enableNsfw={this.props.enableNsfw}
|
enableNsfw={this.props.enableNsfw}
|
||||||
allLanguages={this.props.allLanguages}
|
allLanguages={this.props.allLanguages}
|
||||||
siteLanguages={this.props.siteLanguages}
|
siteLanguages={this.props.siteLanguages}
|
||||||
|
onPostEdit={this.props.onPostEdit}
|
||||||
|
onPostVote={this.props.onPostVote}
|
||||||
|
onPostReport={this.props.onPostReport}
|
||||||
|
onBlockPerson={this.props.onBlockPerson}
|
||||||
|
onLockPost={this.props.onLockPost}
|
||||||
|
onDeletePost={this.props.onDeletePost}
|
||||||
|
onRemovePost={this.props.onRemovePost}
|
||||||
|
onSavePost={this.props.onSavePost}
|
||||||
|
onFeaturePost={this.props.onFeaturePost}
|
||||||
|
onPurgePerson={this.props.onPurgePerson}
|
||||||
|
onPurgePost={this.props.onPurgePost}
|
||||||
|
onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
|
||||||
|
onBanPerson={this.props.onBanPerson}
|
||||||
|
onAddModToCommunity={this.props.onAddModToCommunity}
|
||||||
|
onAddAdmin={this.props.onAddAdmin}
|
||||||
|
onTransferCommunity={this.props.onTransferCommunity}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -167,12 +261,32 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
|
||||||
nodes={commentsToFlatNodes(this.props.personRes.comments)}
|
nodes={commentsToFlatNodes(this.props.personRes.comments)}
|
||||||
viewType={CommentViewType.Flat}
|
viewType={CommentViewType.Flat}
|
||||||
admins={this.props.admins}
|
admins={this.props.admins}
|
||||||
|
finished={this.props.finished}
|
||||||
noIndent
|
noIndent
|
||||||
showCommunity
|
showCommunity
|
||||||
showContext
|
showContext
|
||||||
enableDownvotes={this.props.enableDownvotes}
|
enableDownvotes={this.props.enableDownvotes}
|
||||||
allLanguages={this.props.allLanguages}
|
allLanguages={this.props.allLanguages}
|
||||||
siteLanguages={this.props.siteLanguages}
|
siteLanguages={this.props.siteLanguages}
|
||||||
|
onCommentReplyRead={this.props.onCommentReplyRead}
|
||||||
|
onPersonMentionRead={this.props.onPersonMentionRead}
|
||||||
|
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>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -191,6 +305,22 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
|
||||||
enableNsfw={this.props.enableNsfw}
|
enableNsfw={this.props.enableNsfw}
|
||||||
allLanguages={this.props.allLanguages}
|
allLanguages={this.props.allLanguages}
|
||||||
siteLanguages={this.props.siteLanguages}
|
siteLanguages={this.props.siteLanguages}
|
||||||
|
onPostEdit={this.props.onPostEdit}
|
||||||
|
onPostVote={this.props.onPostVote}
|
||||||
|
onPostReport={this.props.onPostReport}
|
||||||
|
onBlockPerson={this.props.onBlockPerson}
|
||||||
|
onLockPost={this.props.onLockPost}
|
||||||
|
onDeletePost={this.props.onDeletePost}
|
||||||
|
onRemovePost={this.props.onRemovePost}
|
||||||
|
onSavePost={this.props.onSavePost}
|
||||||
|
onFeaturePost={this.props.onFeaturePost}
|
||||||
|
onPurgePerson={this.props.onPurgePerson}
|
||||||
|
onPurgePost={this.props.onPurgePost}
|
||||||
|
onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
|
||||||
|
onBanPerson={this.props.onBanPerson}
|
||||||
|
onAddModToCommunity={this.props.onAddModToCommunity}
|
||||||
|
onAddAdmin={this.props.onAddAdmin}
|
||||||
|
onTransferCommunity={this.props.onTransferCommunity}
|
||||||
/>
|
/>
|
||||||
<hr className="my-3" />
|
<hr className="my-3" />
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -4,41 +4,66 @@ import { Component, linkEvent } from "inferno";
|
||||||
import { Link } from "inferno-router";
|
import { Link } from "inferno-router";
|
||||||
import { RouteComponentProps } from "inferno-router/dist/Route";
|
import { RouteComponentProps } from "inferno-router/dist/Route";
|
||||||
import {
|
import {
|
||||||
AddAdminResponse,
|
AddAdmin,
|
||||||
|
AddModToCommunity,
|
||||||
|
BanFromCommunity,
|
||||||
|
BanFromCommunityResponse,
|
||||||
BanPerson,
|
BanPerson,
|
||||||
BanPersonResponse,
|
BanPersonResponse,
|
||||||
BlockPerson,
|
BlockPerson,
|
||||||
BlockPersonResponse,
|
CommentId,
|
||||||
|
CommentReplyResponse,
|
||||||
CommentResponse,
|
CommentResponse,
|
||||||
Community,
|
Community,
|
||||||
CommunityModeratorView,
|
CommunityModeratorView,
|
||||||
|
CreateComment,
|
||||||
|
CreateCommentLike,
|
||||||
|
CreateCommentReport,
|
||||||
|
CreatePostLike,
|
||||||
|
CreatePostReport,
|
||||||
|
DeleteComment,
|
||||||
|
DeletePost,
|
||||||
|
DistinguishComment,
|
||||||
|
EditComment,
|
||||||
|
EditPost,
|
||||||
|
FeaturePost,
|
||||||
GetPersonDetails,
|
GetPersonDetails,
|
||||||
GetPersonDetailsResponse,
|
GetPersonDetailsResponse,
|
||||||
GetSiteResponse,
|
GetSiteResponse,
|
||||||
|
LockPost,
|
||||||
|
MarkCommentReplyAsRead,
|
||||||
|
MarkPersonMentionAsRead,
|
||||||
|
PersonView,
|
||||||
PostResponse,
|
PostResponse,
|
||||||
|
PurgeComment,
|
||||||
PurgeItemResponse,
|
PurgeItemResponse,
|
||||||
|
PurgePerson,
|
||||||
|
PurgePost,
|
||||||
|
RemoveComment,
|
||||||
|
RemovePost,
|
||||||
|
SaveComment,
|
||||||
|
SavePost,
|
||||||
SortType,
|
SortType,
|
||||||
UserOperation,
|
TransferCommunity,
|
||||||
wsJsonToRes,
|
|
||||||
wsUserOp,
|
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import { Subscription } from "rxjs";
|
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { InitialFetchRequest, PersonDetailsView } from "../../interfaces";
|
import { InitialFetchRequest, PersonDetailsView } from "../../interfaces";
|
||||||
import { UserService, WebSocketService } from "../../services";
|
import { UserService } from "../../services";
|
||||||
|
import { FirstLoadService } from "../../services/FirstLoadService";
|
||||||
|
import { HttpService, RequestState } from "../../services/HttpService";
|
||||||
import {
|
import {
|
||||||
QueryParams,
|
QueryParams,
|
||||||
canMod,
|
canMod,
|
||||||
capitalizeFirstLetter,
|
capitalizeFirstLetter,
|
||||||
createCommentLikeRes,
|
editComment,
|
||||||
createPostLikeFindRes,
|
editPost,
|
||||||
editCommentRes,
|
editWith,
|
||||||
editPostFindRes,
|
|
||||||
enableDownvotes,
|
enableDownvotes,
|
||||||
enableNsfw,
|
enableNsfw,
|
||||||
fetchLimit,
|
fetchLimit,
|
||||||
futureDaysToUnixTime,
|
futureDaysToUnixTime,
|
||||||
|
getCommentParentId,
|
||||||
getPageFromString,
|
getPageFromString,
|
||||||
getQueryParams,
|
getQueryParams,
|
||||||
getQueryString,
|
getQueryString,
|
||||||
|
@ -46,17 +71,15 @@ import {
|
||||||
isBanned,
|
isBanned,
|
||||||
mdToHtml,
|
mdToHtml,
|
||||||
myAuth,
|
myAuth,
|
||||||
|
myAuthRequired,
|
||||||
numToSI,
|
numToSI,
|
||||||
relTags,
|
relTags,
|
||||||
restoreScrollPosition,
|
restoreScrollPosition,
|
||||||
saveCommentRes,
|
|
||||||
saveScrollPosition,
|
saveScrollPosition,
|
||||||
setIsoData,
|
setIsoData,
|
||||||
setupTippy,
|
setupTippy,
|
||||||
toast,
|
toast,
|
||||||
updatePersonBlock,
|
updatePersonBlock,
|
||||||
wsClient,
|
|
||||||
wsSubscribe,
|
|
||||||
} from "../../utils";
|
} from "../../utils";
|
||||||
import { BannerIconHeader } from "../common/banner-icon-header";
|
import { BannerIconHeader } from "../common/banner-icon-header";
|
||||||
import { HtmlTags } from "../common/html-tags";
|
import { HtmlTags } from "../common/html-tags";
|
||||||
|
@ -68,14 +91,15 @@ import { PersonDetails } from "./person-details";
|
||||||
import { PersonListing } from "./person-listing";
|
import { PersonListing } from "./person-listing";
|
||||||
|
|
||||||
interface ProfileState {
|
interface ProfileState {
|
||||||
personRes?: GetPersonDetailsResponse;
|
personRes: RequestState<GetPersonDetailsResponse>;
|
||||||
loading: boolean;
|
|
||||||
personBlocked: boolean;
|
personBlocked: boolean;
|
||||||
banReason?: string;
|
banReason?: string;
|
||||||
banExpireDays?: number;
|
banExpireDays?: number;
|
||||||
showBanDialog: boolean;
|
showBanDialog: boolean;
|
||||||
removeData: boolean;
|
removeData: boolean;
|
||||||
siteRes: GetSiteResponse;
|
siteRes: GetSiteResponse;
|
||||||
|
finished: Map<CommentId, boolean | undefined>;
|
||||||
|
isIsomorphic: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ProfileProps {
|
interface ProfileProps {
|
||||||
|
@ -102,26 +126,6 @@ function getViewFromProps(view?: string): PersonDetailsView {
|
||||||
: PersonDetailsView.Overview;
|
: PersonDetailsView.Overview;
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleBlockPerson(recipientId: number, block: boolean) {
|
|
||||||
const auth = myAuth();
|
|
||||||
|
|
||||||
if (auth) {
|
|
||||||
const blockUserForm: BlockPerson = {
|
|
||||||
person_id: recipientId,
|
|
||||||
block,
|
|
||||||
auth,
|
|
||||||
};
|
|
||||||
|
|
||||||
WebSocketService.Instance.send(wsClient.blockPerson(blockUserForm));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleUnblockPerson = (personId: number) =>
|
|
||||||
toggleBlockPerson(personId, false);
|
|
||||||
|
|
||||||
const handleBlockPerson = (personId: number) =>
|
|
||||||
toggleBlockPerson(personId, true);
|
|
||||||
|
|
||||||
const getCommunitiesListing = (
|
const getCommunitiesListing = (
|
||||||
translationKey: NoOptionI18nKeys,
|
translationKey: NoOptionI18nKeys,
|
||||||
communityViews?: { community: Community }[]
|
communityViews?: { community: Community }[]
|
||||||
|
@ -153,13 +157,14 @@ export class Profile extends Component<
|
||||||
ProfileState
|
ProfileState
|
||||||
> {
|
> {
|
||||||
private isoData = setIsoData(this.context);
|
private isoData = setIsoData(this.context);
|
||||||
private subscription?: Subscription;
|
|
||||||
state: ProfileState = {
|
state: ProfileState = {
|
||||||
loading: true,
|
personRes: { state: "empty" },
|
||||||
personBlocked: false,
|
personBlocked: false,
|
||||||
siteRes: this.isoData.site_res,
|
siteRes: this.isoData.site_res,
|
||||||
showBanDialog: false,
|
showBanDialog: false,
|
||||||
removeData: false,
|
removeData: false,
|
||||||
|
finished: new Map(),
|
||||||
|
isIsomorphic: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props: RouteComponentProps<{ username: string }>, context: any) {
|
constructor(props: RouteComponentProps<{ username: string }>, context: any) {
|
||||||
|
@ -168,51 +173,95 @@ export class Profile extends Component<
|
||||||
this.handleSortChange = this.handleSortChange.bind(this);
|
this.handleSortChange = this.handleSortChange.bind(this);
|
||||||
this.handlePageChange = this.handlePageChange.bind(this);
|
this.handlePageChange = this.handlePageChange.bind(this);
|
||||||
|
|
||||||
this.parseMessage = this.parseMessage.bind(this);
|
this.handleBlockPerson = this.handleBlockPerson.bind(this);
|
||||||
this.subscription = wsSubscribe(this.parseMessage);
|
this.handleUnblockPerson = this.handleUnblockPerson.bind(this);
|
||||||
|
|
||||||
|
this.handleCreateComment = this.handleCreateComment.bind(this);
|
||||||
|
this.handleEditComment = this.handleEditComment.bind(this);
|
||||||
|
this.handleSaveComment = this.handleSaveComment.bind(this);
|
||||||
|
this.handleBlockPersonAlt = this.handleBlockPersonAlt.bind(this);
|
||||||
|
this.handleDeleteComment = this.handleDeleteComment.bind(this);
|
||||||
|
this.handleRemoveComment = this.handleRemoveComment.bind(this);
|
||||||
|
this.handleCommentVote = this.handleCommentVote.bind(this);
|
||||||
|
this.handleAddModToCommunity = this.handleAddModToCommunity.bind(this);
|
||||||
|
this.handleAddAdmin = this.handleAddAdmin.bind(this);
|
||||||
|
this.handlePurgePerson = this.handlePurgePerson.bind(this);
|
||||||
|
this.handlePurgeComment = this.handlePurgeComment.bind(this);
|
||||||
|
this.handleCommentReport = this.handleCommentReport.bind(this);
|
||||||
|
this.handleDistinguishComment = this.handleDistinguishComment.bind(this);
|
||||||
|
this.handleTransferCommunity = this.handleTransferCommunity.bind(this);
|
||||||
|
this.handleCommentReplyRead = this.handleCommentReplyRead.bind(this);
|
||||||
|
this.handlePersonMentionRead = this.handlePersonMentionRead.bind(this);
|
||||||
|
this.handleBanFromCommunity = this.handleBanFromCommunity.bind(this);
|
||||||
|
this.handleBanPerson = this.handleBanPerson.bind(this);
|
||||||
|
this.handlePostVote = this.handlePostVote.bind(this);
|
||||||
|
this.handlePostEdit = this.handlePostEdit.bind(this);
|
||||||
|
this.handlePostReport = this.handlePostReport.bind(this);
|
||||||
|
this.handleLockPost = this.handleLockPost.bind(this);
|
||||||
|
this.handleDeletePost = this.handleDeletePost.bind(this);
|
||||||
|
this.handleRemovePost = this.handleRemovePost.bind(this);
|
||||||
|
this.handleSavePost = this.handleSavePost.bind(this);
|
||||||
|
this.handlePurgePost = this.handlePurgePost.bind(this);
|
||||||
|
this.handleFeaturePost = this.handleFeaturePost.bind(this);
|
||||||
|
|
||||||
// Only fetch the data if coming from another route
|
// Only fetch the data if coming from another route
|
||||||
if (this.isoData.path === this.context.router.route.match.url) {
|
if (FirstLoadService.isFirstLoad) {
|
||||||
this.state = {
|
this.state = {
|
||||||
...this.state,
|
...this.state,
|
||||||
personRes: this.isoData.routeData[0] as GetPersonDetailsResponse,
|
personRes: this.isoData.routeData[0],
|
||||||
loading: false,
|
isIsomorphic: true,
|
||||||
};
|
};
|
||||||
} else {
|
|
||||||
this.fetchUserData();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
fetchUserData() {
|
async componentDidMount() {
|
||||||
|
if (!this.state.isIsomorphic) {
|
||||||
|
await this.fetchUserData();
|
||||||
|
}
|
||||||
|
setupTippy();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
saveScrollPosition(this.context);
|
||||||
|
}
|
||||||
|
|
||||||
|
async fetchUserData() {
|
||||||
const { page, sort, view } = getProfileQueryParams();
|
const { page, sort, view } = getProfileQueryParams();
|
||||||
|
|
||||||
const form: GetPersonDetails = {
|
this.setState({ personRes: { state: "empty" } });
|
||||||
|
this.setState({
|
||||||
|
personRes: await HttpService.client.getPersonDetails({
|
||||||
username: this.props.match.params.username,
|
username: this.props.match.params.username,
|
||||||
sort,
|
sort,
|
||||||
saved_only: view === PersonDetailsView.Saved,
|
saved_only: view === PersonDetailsView.Saved,
|
||||||
page,
|
page,
|
||||||
limit: fetchLimit,
|
limit: fetchLimit,
|
||||||
auth: myAuth(false),
|
auth: myAuth(),
|
||||||
};
|
}),
|
||||||
|
});
|
||||||
WebSocketService.Instance.send(wsClient.getPersonDetails(form));
|
restoreScrollPosition(this.context);
|
||||||
|
this.setPersonBlock();
|
||||||
}
|
}
|
||||||
|
|
||||||
get amCurrentUser() {
|
get amCurrentUser() {
|
||||||
|
if (this.state.personRes.state === "success") {
|
||||||
return (
|
return (
|
||||||
UserService.Instance.myUserInfo?.local_user_view.person.id ===
|
UserService.Instance.myUserInfo?.local_user_view.person.id ===
|
||||||
this.state.personRes?.person_view.person.id
|
this.state.personRes.data.person_view.person.id
|
||||||
);
|
);
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
setPersonBlock() {
|
setPersonBlock() {
|
||||||
const mui = UserService.Instance.myUserInfo;
|
const mui = UserService.Instance.myUserInfo;
|
||||||
const res = this.state.personRes;
|
const res = this.state.personRes;
|
||||||
|
|
||||||
if (mui && res) {
|
if (mui && res.state === "success") {
|
||||||
this.setState({
|
this.setState({
|
||||||
personBlocked: mui.person_blocks.some(
|
personBlocked: mui.person_blocks.some(
|
||||||
({ target: { id } }) => id === res.person_view.person.id
|
({ target: { id } }) => id === res.data.person_view.person.id
|
||||||
),
|
),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -223,7 +272,9 @@ export class Profile extends Component<
|
||||||
path,
|
path,
|
||||||
query: { page, sort, view: urlView },
|
query: { page, sort, view: urlView },
|
||||||
auth,
|
auth,
|
||||||
}: InitialFetchRequest<QueryParams<ProfileProps>>): Promise<any>[] {
|
}: InitialFetchRequest<QueryParams<ProfileProps>>): Promise<
|
||||||
|
RequestState<any>
|
||||||
|
>[] {
|
||||||
const pathSplit = path.split("/");
|
const pathSplit = path.split("/");
|
||||||
|
|
||||||
const username = pathSplit[2];
|
const username = pathSplit[2];
|
||||||
|
@ -241,35 +292,28 @@ export class Profile extends Component<
|
||||||
return [client.getPersonDetails(form)];
|
return [client.getPersonDetails(form)];
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.setPersonBlock();
|
|
||||||
setupTippy();
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
this.subscription?.unsubscribe();
|
|
||||||
saveScrollPosition(this.context);
|
|
||||||
}
|
|
||||||
|
|
||||||
get documentTitle(): string {
|
get documentTitle(): string {
|
||||||
|
const siteName = this.state.siteRes.site_view.site.name;
|
||||||
const res = this.state.personRes;
|
const res = this.state.personRes;
|
||||||
return res
|
return res.state == "success"
|
||||||
? `@${res.person_view.person.name} - ${this.state.siteRes.site_view.site.name}`
|
? `@${res.data.person_view.person.name} - ${siteName}`
|
||||||
: "";
|
: siteName;
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
renderPersonRes() {
|
||||||
const { personRes, loading, siteRes } = this.state;
|
switch (this.state.personRes.state) {
|
||||||
const { page, sort, view } = getProfileQueryParams();
|
case "loading":
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container-lg">
|
|
||||||
{loading ? (
|
|
||||||
<h5>
|
<h5>
|
||||||
<Spinner large />
|
<Spinner large />
|
||||||
</h5>
|
</h5>
|
||||||
) : (
|
);
|
||||||
personRes && (
|
case "success": {
|
||||||
|
const siteRes = this.state.siteRes;
|
||||||
|
const personRes = this.state.personRes.data;
|
||||||
|
const { page, sort, view } = getProfileQueryParams();
|
||||||
|
|
||||||
|
return (
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-12 col-md-8">
|
<div className="col-12 col-md-8">
|
||||||
<HtmlTags
|
<HtmlTags
|
||||||
|
@ -279,7 +323,7 @@ export class Profile extends Component<
|
||||||
image={personRes.person_view.person.avatar}
|
image={personRes.person_view.person.avatar}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{this.userInfo}
|
{this.userInfo(personRes.person_view)}
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
|
@ -291,12 +335,41 @@ export class Profile extends Component<
|
||||||
sort={sort}
|
sort={sort}
|
||||||
page={page}
|
page={page}
|
||||||
limit={fetchLimit}
|
limit={fetchLimit}
|
||||||
|
finished={this.state.finished}
|
||||||
enableDownvotes={enableDownvotes(siteRes)}
|
enableDownvotes={enableDownvotes(siteRes)}
|
||||||
enableNsfw={enableNsfw(siteRes)}
|
enableNsfw={enableNsfw(siteRes)}
|
||||||
view={view}
|
view={view}
|
||||||
onPageChange={this.handlePageChange}
|
onPageChange={this.handlePageChange}
|
||||||
allLanguages={siteRes.all_languages}
|
allLanguages={siteRes.all_languages}
|
||||||
siteLanguages={siteRes.discussion_languages}
|
siteLanguages={siteRes.discussion_languages}
|
||||||
|
// TODO all the forms here
|
||||||
|
onSaveComment={this.handleSaveComment}
|
||||||
|
onBlockPerson={this.handleBlockPersonAlt}
|
||||||
|
onDeleteComment={this.handleDeleteComment}
|
||||||
|
onRemoveComment={this.handleRemoveComment}
|
||||||
|
onCommentVote={this.handleCommentVote}
|
||||||
|
onCommentReport={this.handleCommentReport}
|
||||||
|
onDistinguishComment={this.handleDistinguishComment}
|
||||||
|
onAddModToCommunity={this.handleAddModToCommunity}
|
||||||
|
onAddAdmin={this.handleAddAdmin}
|
||||||
|
onTransferCommunity={this.handleTransferCommunity}
|
||||||
|
onPurgeComment={this.handlePurgeComment}
|
||||||
|
onPurgePerson={this.handlePurgePerson}
|
||||||
|
onCommentReplyRead={this.handleCommentReplyRead}
|
||||||
|
onPersonMentionRead={this.handlePersonMentionRead}
|
||||||
|
onBanPersonFromCommunity={this.handleBanFromCommunity}
|
||||||
|
onBanPerson={this.handleBanPerson}
|
||||||
|
onCreateComment={this.handleCreateComment}
|
||||||
|
onEditComment={this.handleEditComment}
|
||||||
|
onPostEdit={this.handlePostEdit}
|
||||||
|
onPostVote={this.handlePostVote}
|
||||||
|
onPostReport={this.handlePostReport}
|
||||||
|
onLockPost={this.handleLockPost}
|
||||||
|
onDeletePost={this.handleDeletePost}
|
||||||
|
onRemovePost={this.handleRemovePost}
|
||||||
|
onSavePost={this.handleSavePost}
|
||||||
|
onPurgePost={this.handlePurgePost}
|
||||||
|
onFeaturePost={this.handleFeaturePost}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -305,11 +378,14 @@ export class Profile extends Component<
|
||||||
{this.amCurrentUser && <Follows />}
|
{this.amCurrentUser && <Follows />}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return <div className="container-lg">{this.renderPersonRes()}</div>;
|
||||||
|
}
|
||||||
|
|
||||||
get viewRadios() {
|
get viewRadios() {
|
||||||
return (
|
return (
|
||||||
|
@ -366,8 +442,7 @@ export class Profile extends Component<
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
get userInfo() {
|
userInfo(pv: PersonView) {
|
||||||
const pv = this.state.personRes?.person_view;
|
|
||||||
const {
|
const {
|
||||||
personBlocked,
|
personBlocked,
|
||||||
siteRes: { admins },
|
siteRes: { admins },
|
||||||
|
@ -422,7 +497,7 @@ export class Profile extends Component<
|
||||||
)}
|
)}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
{this.banDialog}
|
{this.banDialog(pv)}
|
||||||
<div className="flex-grow-1 unselectable pointer mx-2"></div>
|
<div className="flex-grow-1 unselectable pointer mx-2"></div>
|
||||||
{!this.amCurrentUser && UserService.Instance.myUserInfo && (
|
{!this.amCurrentUser && UserService.Instance.myUserInfo && (
|
||||||
<>
|
<>
|
||||||
|
@ -448,7 +523,10 @@ export class Profile extends Component<
|
||||||
className={
|
className={
|
||||||
"d-flex align-self-start btn btn-secondary mr-2"
|
"d-flex align-self-start btn btn-secondary mr-2"
|
||||||
}
|
}
|
||||||
onClick={linkEvent(pv.person.id, handleUnblockPerson)}
|
onClick={linkEvent(
|
||||||
|
pv.person.id,
|
||||||
|
this.handleUnblockPerson
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
{i18n.t("unblock_user")}
|
{i18n.t("unblock_user")}
|
||||||
</button>
|
</button>
|
||||||
|
@ -457,7 +535,10 @@ export class Profile extends Component<
|
||||||
className={
|
className={
|
||||||
"d-flex align-self-start btn btn-secondary mr-2"
|
"d-flex align-self-start btn btn-secondary mr-2"
|
||||||
}
|
}
|
||||||
onClick={linkEvent(pv.person.id, handleBlockPerson)}
|
onClick={linkEvent(
|
||||||
|
pv.person.id,
|
||||||
|
this.handleBlockPerson
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
{i18n.t("block_user")}
|
{i18n.t("block_user")}
|
||||||
</button>
|
</button>
|
||||||
|
@ -544,14 +625,11 @@ export class Profile extends Component<
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
get banDialog() {
|
banDialog(pv: PersonView) {
|
||||||
const pv = this.state.personRes?.person_view;
|
|
||||||
const { showBanDialog } = this.state;
|
const { showBanDialog } = this.state;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
pv && (
|
showBanDialog && (
|
||||||
<>
|
|
||||||
{showBanDialog && (
|
|
||||||
<form onSubmit={linkEvent(this, this.handleModBanSubmit)}>
|
<form onSubmit={linkEvent(this, this.handleModBanSubmit)}>
|
||||||
<div className="form-group row col-12">
|
<div className="form-group row col-12">
|
||||||
<label className="col-form-label" htmlFor="profile-ban-reason">
|
<label className="col-form-label" htmlFor="profile-ban-reason">
|
||||||
|
@ -618,13 +696,11 @@ export class Profile extends Component<
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
updateUrl({ page, sort, view }: Partial<ProfileProps>) {
|
async updateUrl({ page, sort, view }: Partial<ProfileProps>) {
|
||||||
const {
|
const {
|
||||||
page: urlPage,
|
page: urlPage,
|
||||||
sort: urlSort,
|
sort: urlSort,
|
||||||
|
@ -640,9 +716,7 @@ export class Profile extends Component<
|
||||||
const { username } = this.props.match.params;
|
const { username } = this.props.match.params;
|
||||||
|
|
||||||
this.props.history.push(`/u/${username}${getQueryString(queryParams)}`);
|
this.props.history.push(`/u/${username}${getQueryString(queryParams)}`);
|
||||||
|
await this.fetchUserData();
|
||||||
this.setState({ loading: true });
|
|
||||||
this.fetchUserData();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handlePageChange(page: number) {
|
handlePageChange(page: number) {
|
||||||
|
@ -676,19 +750,18 @@ export class Profile extends Component<
|
||||||
i.setState({ removeData: event.target.checked });
|
i.setState({ removeData: event.target.checked });
|
||||||
}
|
}
|
||||||
|
|
||||||
handleModBanSubmitCancel(i: Profile, event?: any) {
|
handleModBanSubmitCancel(i: Profile) {
|
||||||
event.preventDefault();
|
|
||||||
i.setState({ showBanDialog: false });
|
i.setState({ showBanDialog: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
handleModBanSubmit(i: Profile, event?: any) {
|
async handleModBanSubmit(i: Profile, event: any) {
|
||||||
if (event) event.preventDefault();
|
event.preventDefault();
|
||||||
const { personRes, removeData, banReason, banExpireDays } = i.state;
|
const { removeData, banReason, banExpireDays } = i.state;
|
||||||
|
|
||||||
const person = personRes?.person_view.person;
|
const personRes = i.state.personRes;
|
||||||
const auth = myAuth();
|
|
||||||
|
|
||||||
if (person && auth) {
|
if (personRes.state == "success") {
|
||||||
|
const person = personRes.data.person_view.person;
|
||||||
const ban = !person.banned;
|
const ban = !person.banned;
|
||||||
|
|
||||||
// If its an unban, restore all their data
|
// If its an unban, restore all their data
|
||||||
|
@ -696,154 +769,281 @@ export class Profile extends Component<
|
||||||
i.setState({ removeData: false });
|
i.setState({ removeData: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
const form: BanPerson = {
|
const res = await HttpService.client.banPerson({
|
||||||
person_id: person.id,
|
person_id: person.id,
|
||||||
ban,
|
ban,
|
||||||
remove_data: removeData,
|
remove_data: removeData,
|
||||||
reason: banReason,
|
reason: banReason,
|
||||||
expires: futureDaysToUnixTime(banExpireDays),
|
expires: futureDaysToUnixTime(banExpireDays),
|
||||||
auth,
|
auth: myAuthRequired(),
|
||||||
};
|
});
|
||||||
WebSocketService.Instance.send(wsClient.banPerson(form));
|
// TODO
|
||||||
|
this.updateBan(res);
|
||||||
i.setState({ showBanDialog: false });
|
i.setState({ showBanDialog: false });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
parseMessage(msg: any) {
|
async toggleBlockPerson(recipientId: number, block: boolean) {
|
||||||
const op = wsUserOp(msg);
|
const res = await HttpService.client.blockPerson({
|
||||||
console.log(msg);
|
person_id: recipientId,
|
||||||
|
block,
|
||||||
if (msg.error) {
|
auth: myAuthRequired(),
|
||||||
toast(i18n.t(msg.error), "danger");
|
});
|
||||||
|
if (res.state == "success") {
|
||||||
if (msg.error === "couldnt_find_that_username_or_email") {
|
updatePersonBlock(res.data);
|
||||||
this.context.router.history.push("/");
|
|
||||||
}
|
}
|
||||||
} else if (msg.reconnect) {
|
|
||||||
this.fetchUserData();
|
|
||||||
} else {
|
|
||||||
switch (op) {
|
|
||||||
case UserOperation.GetPersonDetails: {
|
|
||||||
// Since the PersonDetails contains posts/comments as well as some general user info we listen here as well
|
|
||||||
// and set the parent state if it is not set or differs
|
|
||||||
// TODO this might need to get abstracted
|
|
||||||
const data = wsJsonToRes<GetPersonDetailsResponse>(msg);
|
|
||||||
this.setState({ personRes: data, loading: false });
|
|
||||||
this.setPersonBlock();
|
|
||||||
restoreScrollPosition(this.context);
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
case UserOperation.AddAdmin: {
|
handleUnblockPerson(personId: number) {
|
||||||
const { admins } = wsJsonToRes<AddAdminResponse>(msg);
|
this.toggleBlockPerson(personId, false);
|
||||||
this.setState(s => ((s.siteRes.admins = admins), s));
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
case UserOperation.CreateCommentLike: {
|
handleBlockPerson(personId: number) {
|
||||||
const { comment_view } = wsJsonToRes<CommentResponse>(msg);
|
this.toggleBlockPerson(personId, true);
|
||||||
createCommentLikeRes(comment_view, this.state.personRes?.comments);
|
|
||||||
this.setState(this.state);
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
case UserOperation.EditComment:
|
async handleAddModToCommunity(form: AddModToCommunity) {
|
||||||
case UserOperation.DeleteComment:
|
// TODO not sure what to do here
|
||||||
case UserOperation.RemoveComment: {
|
await HttpService.client.addModToCommunity(form);
|
||||||
const { comment_view } = wsJsonToRes<CommentResponse>(msg);
|
|
||||||
editCommentRes(comment_view, this.state.personRes?.comments);
|
|
||||||
this.setState(this.state);
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
case UserOperation.CreateComment: {
|
async handlePurgePerson(form: PurgePerson) {
|
||||||
const {
|
const purgePersonRes = await HttpService.client.purgePerson(form);
|
||||||
comment_view: {
|
this.purgeItem(purgePersonRes);
|
||||||
creator: { id },
|
|
||||||
},
|
|
||||||
} = wsJsonToRes<CommentResponse>(msg);
|
|
||||||
const mui = UserService.Instance.myUserInfo;
|
|
||||||
|
|
||||||
if (id === mui?.local_user_view.person.id) {
|
|
||||||
toast(i18n.t("reply_sent"));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
break;
|
async handlePurgeComment(form: PurgeComment) {
|
||||||
|
const purgeCommentRes = await HttpService.client.purgeComment(form);
|
||||||
|
this.purgeItem(purgeCommentRes);
|
||||||
}
|
}
|
||||||
|
|
||||||
case UserOperation.SaveComment: {
|
async handlePurgePost(form: PurgePost) {
|
||||||
const { comment_view } = wsJsonToRes<CommentResponse>(msg);
|
const purgeRes = await HttpService.client.purgePost(form);
|
||||||
saveCommentRes(comment_view, this.state.personRes?.comments);
|
this.purgeItem(purgeRes);
|
||||||
this.setState(this.state);
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
case UserOperation.EditPost:
|
async handleBlockPersonAlt(form: BlockPerson) {
|
||||||
case UserOperation.DeletePost:
|
const blockPersonRes = await HttpService.client.blockPerson(form);
|
||||||
case UserOperation.RemovePost:
|
if (blockPersonRes.state === "success") {
|
||||||
case UserOperation.LockPost:
|
updatePersonBlock(blockPersonRes.data);
|
||||||
case UserOperation.FeaturePost:
|
}
|
||||||
case UserOperation.SavePost: {
|
|
||||||
const { post_view } = wsJsonToRes<PostResponse>(msg);
|
|
||||||
editPostFindRes(post_view, this.state.personRes?.posts);
|
|
||||||
this.setState(this.state);
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
case UserOperation.CreatePostLike: {
|
async handleCreateComment(form: CreateComment) {
|
||||||
const { post_view } = wsJsonToRes<PostResponse>(msg);
|
const createCommentRes = await HttpService.client.createComment(form);
|
||||||
createPostLikeFindRes(post_view, this.state.personRes?.posts);
|
this.createAndUpdateComments(createCommentRes);
|
||||||
this.setState(this.state);
|
|
||||||
|
|
||||||
break;
|
return createCommentRes;
|
||||||
}
|
}
|
||||||
|
|
||||||
case UserOperation.BanPerson: {
|
async handleEditComment(form: EditComment) {
|
||||||
const data = wsJsonToRes<BanPersonResponse>(msg);
|
const editCommentRes = await HttpService.client.editComment(form);
|
||||||
const res = this.state.personRes;
|
this.findAndUpdateComment(editCommentRes);
|
||||||
res?.comments
|
|
||||||
.filter(c => c.creator.id === data.person_view.person.id)
|
|
||||||
.forEach(c => (c.creator.banned = data.banned));
|
|
||||||
res?.posts
|
|
||||||
.filter(c => c.creator.id === data.person_view.person.id)
|
|
||||||
.forEach(c => (c.creator.banned = data.banned));
|
|
||||||
const pv = res?.person_view;
|
|
||||||
|
|
||||||
if (pv?.person.id === data.person_view.person.id) {
|
return editCommentRes;
|
||||||
pv.person.banned = data.banned;
|
|
||||||
}
|
|
||||||
this.setState(this.state);
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
case UserOperation.BlockPerson: {
|
async handleDeleteComment(form: DeleteComment) {
|
||||||
const data = wsJsonToRes<BlockPersonResponse>(msg);
|
const deleteCommentRes = await HttpService.client.deleteComment(form);
|
||||||
updatePersonBlock(data);
|
this.findAndUpdateComment(deleteCommentRes);
|
||||||
this.setPersonBlock();
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
case UserOperation.PurgePerson:
|
async handleDeletePost(form: DeletePost) {
|
||||||
case UserOperation.PurgePost:
|
const deleteRes = await HttpService.client.deletePost(form);
|
||||||
case UserOperation.PurgeComment:
|
this.findAndUpdatePost(deleteRes);
|
||||||
case UserOperation.PurgeCommunity: {
|
}
|
||||||
const { success } = wsJsonToRes<PurgeItemResponse>(msg);
|
|
||||||
|
|
||||||
if (success) {
|
async handleRemovePost(form: RemovePost) {
|
||||||
|
const removeRes = await HttpService.client.removePost(form);
|
||||||
|
this.findAndUpdatePost(removeRes);
|
||||||
|
}
|
||||||
|
|
||||||
|
async handleRemoveComment(form: RemoveComment) {
|
||||||
|
const removeCommentRes = await HttpService.client.removeComment(form);
|
||||||
|
this.findAndUpdateComment(removeCommentRes);
|
||||||
|
}
|
||||||
|
|
||||||
|
async handleSaveComment(form: SaveComment) {
|
||||||
|
const saveCommentRes = await HttpService.client.saveComment(form);
|
||||||
|
this.findAndUpdateComment(saveCommentRes);
|
||||||
|
}
|
||||||
|
|
||||||
|
async handleSavePost(form: SavePost) {
|
||||||
|
const saveRes = await HttpService.client.savePost(form);
|
||||||
|
this.findAndUpdatePost(saveRes);
|
||||||
|
}
|
||||||
|
|
||||||
|
async handleFeaturePost(form: FeaturePost) {
|
||||||
|
const featureRes = await HttpService.client.featurePost(form);
|
||||||
|
this.findAndUpdatePost(featureRes);
|
||||||
|
}
|
||||||
|
|
||||||
|
async handleCommentVote(form: CreateCommentLike) {
|
||||||
|
const voteRes = await HttpService.client.likeComment(form);
|
||||||
|
this.findAndUpdateComment(voteRes);
|
||||||
|
}
|
||||||
|
|
||||||
|
async handlePostVote(form: CreatePostLike) {
|
||||||
|
const voteRes = await HttpService.client.likePost(form);
|
||||||
|
this.findAndUpdatePost(voteRes);
|
||||||
|
}
|
||||||
|
|
||||||
|
async handlePostEdit(form: EditPost) {
|
||||||
|
const res = await HttpService.client.editPost(form);
|
||||||
|
this.findAndUpdatePost(res);
|
||||||
|
}
|
||||||
|
|
||||||
|
async handleCommentReport(form: CreateCommentReport) {
|
||||||
|
const reportRes = await HttpService.client.createCommentReport(form);
|
||||||
|
if (reportRes.state === "success") {
|
||||||
|
toast(i18n.t("report_created"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async handlePostReport(form: CreatePostReport) {
|
||||||
|
const reportRes = await HttpService.client.createPostReport(form);
|
||||||
|
if (reportRes.state === "success") {
|
||||||
|
toast(i18n.t("report_created"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async handleLockPost(form: LockPost) {
|
||||||
|
const lockRes = await HttpService.client.lockPost(form);
|
||||||
|
this.findAndUpdatePost(lockRes);
|
||||||
|
}
|
||||||
|
|
||||||
|
async handleDistinguishComment(form: DistinguishComment) {
|
||||||
|
const distinguishRes = await HttpService.client.distinguishComment(form);
|
||||||
|
this.findAndUpdateComment(distinguishRes);
|
||||||
|
}
|
||||||
|
|
||||||
|
async handleAddAdmin(form: AddAdmin) {
|
||||||
|
const addAdminRes = await HttpService.client.addAdmin(form);
|
||||||
|
|
||||||
|
if (addAdminRes.state == "success") {
|
||||||
|
this.setState(s => ((s.siteRes.admins = addAdminRes.data.admins), s));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async handleTransferCommunity(form: TransferCommunity) {
|
||||||
|
await HttpService.client.transferCommunity(form);
|
||||||
|
toast(i18n.t("transfer_community"));
|
||||||
|
}
|
||||||
|
|
||||||
|
async handleCommentReplyRead(form: MarkCommentReplyAsRead) {
|
||||||
|
const readRes = await HttpService.client.markCommentReplyAsRead(form);
|
||||||
|
this.findAndUpdateCommentReply(readRes);
|
||||||
|
}
|
||||||
|
|
||||||
|
async handlePersonMentionRead(form: MarkPersonMentionAsRead) {
|
||||||
|
// TODO not sure what to do here. Maybe it is actually optional, because post doesn't need it.
|
||||||
|
await HttpService.client.markPersonMentionAsRead(form);
|
||||||
|
}
|
||||||
|
|
||||||
|
async handleBanFromCommunity(form: BanFromCommunity) {
|
||||||
|
const banRes = await HttpService.client.banFromCommunity(form);
|
||||||
|
this.updateBanFromCommunity(banRes);
|
||||||
|
}
|
||||||
|
|
||||||
|
async handleBanPerson(form: BanPerson) {
|
||||||
|
const banRes = await HttpService.client.banPerson(form);
|
||||||
|
this.updateBan(banRes);
|
||||||
|
}
|
||||||
|
|
||||||
|
updateBanFromCommunity(banRes: RequestState<BanFromCommunityResponse>) {
|
||||||
|
// Maybe not necessary
|
||||||
|
if (banRes.state === "success") {
|
||||||
|
this.setState(s => {
|
||||||
|
if (s.personRes.state == "success") {
|
||||||
|
s.personRes.data.posts
|
||||||
|
.filter(c => c.creator.id === banRes.data.person_view.person.id)
|
||||||
|
.forEach(
|
||||||
|
c => (c.creator_banned_from_community = banRes.data.banned)
|
||||||
|
);
|
||||||
|
|
||||||
|
s.personRes.data.comments
|
||||||
|
.filter(c => c.creator.id === banRes.data.person_view.person.id)
|
||||||
|
.forEach(
|
||||||
|
c => (c.creator_banned_from_community = banRes.data.banned)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return s;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateBan(banRes: RequestState<BanPersonResponse>) {
|
||||||
|
// Maybe not necessary
|
||||||
|
if (banRes.state == "success") {
|
||||||
|
this.setState(s => {
|
||||||
|
if (s.personRes.state == "success") {
|
||||||
|
s.personRes.data.posts
|
||||||
|
.filter(c => c.creator.id == banRes.data.person_view.person.id)
|
||||||
|
.forEach(c => (c.creator.banned = banRes.data.banned));
|
||||||
|
s.personRes.data.comments
|
||||||
|
.filter(c => c.creator.id == banRes.data.person_view.person.id)
|
||||||
|
.forEach(c => (c.creator.banned = banRes.data.banned));
|
||||||
|
}
|
||||||
|
return s;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
purgeItem(purgeRes: RequestState<PurgeItemResponse>) {
|
||||||
|
if (purgeRes.state == "success") {
|
||||||
toast(i18n.t("purge_success"));
|
toast(i18n.t("purge_success"));
|
||||||
this.context.router.history.push(`/`);
|
this.context.router.history.push(`/`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
findAndUpdateComment(res: RequestState<CommentResponse>) {
|
||||||
|
this.setState(s => {
|
||||||
|
if (s.personRes.state == "success" && res.state == "success") {
|
||||||
|
s.personRes.data.comments = editComment(
|
||||||
|
res.data.comment_view,
|
||||||
|
s.personRes.data.comments
|
||||||
|
);
|
||||||
|
s.finished.set(res.data.comment_view.comment.id, true);
|
||||||
}
|
}
|
||||||
|
return s;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
createAndUpdateComments(res: RequestState<CommentResponse>) {
|
||||||
|
this.setState(s => {
|
||||||
|
if (s.personRes.state == "success" && res.state == "success") {
|
||||||
|
s.personRes.data.comments.unshift(res.data.comment_view);
|
||||||
|
// Set finished for the parent
|
||||||
|
s.finished.set(
|
||||||
|
getCommentParentId(res.data.comment_view.comment) ?? 0,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return s;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
findAndUpdateCommentReply(res: RequestState<CommentReplyResponse>) {
|
||||||
|
this.setState(s => {
|
||||||
|
if (s.personRes.state == "success" && res.state == "success") {
|
||||||
|
s.personRes.data.comments = editWith(
|
||||||
|
res.data.comment_reply_view,
|
||||||
|
s.personRes.data.comments
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return s;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
findAndUpdatePost(res: RequestState<PostResponse>) {
|
||||||
|
this.setState(s => {
|
||||||
|
if (s.personRes.state == "success" && res.state == "success") {
|
||||||
|
s.personRes.data.posts = editPost(
|
||||||
|
res.data.post_view,
|
||||||
|
s.personRes.data.posts
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return s;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,27 +1,22 @@
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component, linkEvent } from "inferno";
|
||||||
import {
|
import {
|
||||||
|
ApproveRegistrationApplication,
|
||||||
GetSiteResponse,
|
GetSiteResponse,
|
||||||
ListRegistrationApplications,
|
ListRegistrationApplications,
|
||||||
ListRegistrationApplicationsResponse,
|
ListRegistrationApplicationsResponse,
|
||||||
RegistrationApplicationResponse,
|
RegistrationApplicationView,
|
||||||
UserOperation,
|
|
||||||
wsJsonToRes,
|
|
||||||
wsUserOp,
|
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { Subscription } from "rxjs";
|
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { InitialFetchRequest } from "../../interfaces";
|
import { InitialFetchRequest } from "../../interfaces";
|
||||||
import { UserService, WebSocketService } from "../../services";
|
import { UserService } from "../../services";
|
||||||
|
import { FirstLoadService } from "../../services/FirstLoadService";
|
||||||
|
import { HttpService, RequestState } from "../../services/HttpService";
|
||||||
import {
|
import {
|
||||||
|
editRegistrationApplication,
|
||||||
fetchLimit,
|
fetchLimit,
|
||||||
isBrowser,
|
myAuthRequired,
|
||||||
myAuth,
|
|
||||||
setIsoData,
|
setIsoData,
|
||||||
setupTippy,
|
setupTippy,
|
||||||
toast,
|
|
||||||
updateRegistrationApplicationRes,
|
|
||||||
wsClient,
|
|
||||||
wsSubscribe,
|
|
||||||
} from "../../utils";
|
} from "../../utils";
|
||||||
import { HtmlTags } from "../common/html-tags";
|
import { HtmlTags } from "../common/html-tags";
|
||||||
import { Spinner } from "../common/icon";
|
import { Spinner } from "../common/icon";
|
||||||
|
@ -34,11 +29,11 @@ enum UnreadOrAll {
|
||||||
}
|
}
|
||||||
|
|
||||||
interface RegistrationApplicationsState {
|
interface RegistrationApplicationsState {
|
||||||
listRegistrationApplicationsResponse?: ListRegistrationApplicationsResponse;
|
appsRes: RequestState<ListRegistrationApplicationsResponse>;
|
||||||
siteRes: GetSiteResponse;
|
siteRes: GetSiteResponse;
|
||||||
unreadOrAll: UnreadOrAll;
|
unreadOrAll: UnreadOrAll;
|
||||||
page: number;
|
page: number;
|
||||||
loading: boolean;
|
isIsomorphic: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class RegistrationApplications extends Component<
|
export class RegistrationApplications extends Component<
|
||||||
|
@ -46,45 +41,37 @@ export class RegistrationApplications extends Component<
|
||||||
RegistrationApplicationsState
|
RegistrationApplicationsState
|
||||||
> {
|
> {
|
||||||
private isoData = setIsoData(this.context);
|
private isoData = setIsoData(this.context);
|
||||||
private subscription?: Subscription;
|
|
||||||
state: RegistrationApplicationsState = {
|
state: RegistrationApplicationsState = {
|
||||||
|
appsRes: { state: "empty" },
|
||||||
siteRes: this.isoData.site_res,
|
siteRes: this.isoData.site_res,
|
||||||
unreadOrAll: UnreadOrAll.Unread,
|
unreadOrAll: UnreadOrAll.Unread,
|
||||||
page: 1,
|
page: 1,
|
||||||
loading: true,
|
isIsomorphic: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
|
|
||||||
this.handlePageChange = this.handlePageChange.bind(this);
|
this.handlePageChange = this.handlePageChange.bind(this);
|
||||||
|
this.handleApproveApplication = this.handleApproveApplication.bind(this);
|
||||||
this.parseMessage = this.parseMessage.bind(this);
|
|
||||||
this.subscription = wsSubscribe(this.parseMessage);
|
|
||||||
|
|
||||||
// Only fetch the data if coming from another route
|
// Only fetch the data if coming from another route
|
||||||
if (this.isoData.path == this.context.router.route.match.url) {
|
if (FirstLoadService.isFirstLoad) {
|
||||||
this.state = {
|
this.state = {
|
||||||
...this.state,
|
...this.state,
|
||||||
listRegistrationApplicationsResponse: this.isoData
|
appsRes: this.isoData.routeData[0],
|
||||||
.routeData[0] as ListRegistrationApplicationsResponse,
|
isIsomorphic: true,
|
||||||
loading: false,
|
|
||||||
};
|
};
|
||||||
} else {
|
|
||||||
this.refetch();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
async componentDidMount() {
|
||||||
|
if (!this.state.isIsomorphic) {
|
||||||
|
await this.refetch();
|
||||||
|
}
|
||||||
setupTippy();
|
setupTippy();
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
if (isBrowser()) {
|
|
||||||
this.subscription?.unsubscribe();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
get documentTitle(): string {
|
get documentTitle(): string {
|
||||||
const mui = UserService.Instance.myUserInfo;
|
const mui = UserService.Instance.myUserInfo;
|
||||||
return mui
|
return mui
|
||||||
|
@ -94,14 +81,17 @@ export class RegistrationApplications extends Component<
|
||||||
: "";
|
: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
renderApps() {
|
||||||
|
switch (this.state.appsRes.state) {
|
||||||
|
case "loading":
|
||||||
return (
|
return (
|
||||||
<div className="container-lg">
|
|
||||||
{this.state.loading ? (
|
|
||||||
<h5>
|
<h5>
|
||||||
<Spinner large />
|
<Spinner large />
|
||||||
</h5>
|
</h5>
|
||||||
) : (
|
);
|
||||||
|
case "success": {
|
||||||
|
const apps = this.state.appsRes.data.registration_applications;
|
||||||
|
return (
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
<HtmlTags
|
<HtmlTags
|
||||||
|
@ -110,17 +100,21 @@ export class RegistrationApplications extends Component<
|
||||||
/>
|
/>
|
||||||
<h5 className="mb-2">{i18n.t("registration_applications")}</h5>
|
<h5 className="mb-2">{i18n.t("registration_applications")}</h5>
|
||||||
{this.selects()}
|
{this.selects()}
|
||||||
{this.applicationList()}
|
{this.applicationList(apps)}
|
||||||
<Paginator
|
<Paginator
|
||||||
page={this.state.page}
|
page={this.state.page}
|
||||||
onChange={this.handlePageChange}
|
onChange={this.handlePageChange}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return <div className="container-lg">{this.renderApps()}</div>;
|
||||||
|
}
|
||||||
|
|
||||||
unreadOrAllRadios() {
|
unreadOrAllRadios() {
|
||||||
return (
|
return (
|
||||||
|
@ -163,22 +157,20 @@ export class RegistrationApplications extends Component<
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
applicationList() {
|
applicationList(apps: RegistrationApplicationView[]) {
|
||||||
const res = this.state.listRegistrationApplicationsResponse;
|
|
||||||
return (
|
return (
|
||||||
res && (
|
|
||||||
<div>
|
<div>
|
||||||
{res.registration_applications.map(ra => (
|
{apps.map(ra => (
|
||||||
<>
|
<>
|
||||||
<hr />
|
<hr />
|
||||||
<RegistrationApplication
|
<RegistrationApplication
|
||||||
key={ra.registration_application.id}
|
key={ra.registration_application.id}
|
||||||
application={ra}
|
application={ra}
|
||||||
|
onApproveApplication={this.handleApproveApplication}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -192,10 +184,12 @@ export class RegistrationApplications extends Component<
|
||||||
this.refetch();
|
this.refetch();
|
||||||
}
|
}
|
||||||
|
|
||||||
static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
|
static fetchInitialData({
|
||||||
const promises: Promise<any>[] = [];
|
auth,
|
||||||
|
client,
|
||||||
|
}: InitialFetchRequest): Promise<any>[] {
|
||||||
|
const promises: Promise<RequestState<any>>[] = [];
|
||||||
|
|
||||||
const auth = req.auth;
|
|
||||||
if (auth) {
|
if (auth) {
|
||||||
const form: ListRegistrationApplications = {
|
const form: ListRegistrationApplications = {
|
||||||
unread_only: true,
|
unread_only: true,
|
||||||
|
@ -203,54 +197,41 @@ export class RegistrationApplications extends Component<
|
||||||
limit: fetchLimit,
|
limit: fetchLimit,
|
||||||
auth,
|
auth,
|
||||||
};
|
};
|
||||||
promises.push(req.client.listRegistrationApplications(form));
|
promises.push(client.listRegistrationApplications(form));
|
||||||
|
} else {
|
||||||
|
promises.push(Promise.resolve({ state: "empty" }));
|
||||||
}
|
}
|
||||||
|
|
||||||
return promises;
|
return promises;
|
||||||
}
|
}
|
||||||
|
|
||||||
refetch() {
|
async refetch() {
|
||||||
const unread_only = this.state.unreadOrAll == UnreadOrAll.Unread;
|
const unread_only = this.state.unreadOrAll == UnreadOrAll.Unread;
|
||||||
const auth = myAuth();
|
this.setState({
|
||||||
if (auth) {
|
appsRes: { state: "loading" },
|
||||||
const form: ListRegistrationApplications = {
|
});
|
||||||
|
this.setState({
|
||||||
|
appsRes: await HttpService.client.listRegistrationApplications({
|
||||||
unread_only: unread_only,
|
unread_only: unread_only,
|
||||||
page: this.state.page,
|
page: this.state.page,
|
||||||
limit: fetchLimit,
|
limit: fetchLimit,
|
||||||
auth,
|
auth: myAuthRequired(),
|
||||||
};
|
}),
|
||||||
WebSocketService.Instance.send(
|
});
|
||||||
wsClient.listRegistrationApplications(form)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
parseMessage(msg: any) {
|
async handleApproveApplication(form: ApproveRegistrationApplication) {
|
||||||
const op = wsUserOp(msg);
|
const approveRes = await HttpService.client.approveRegistrationApplication(
|
||||||
console.log(msg);
|
form
|
||||||
if (msg.error) {
|
);
|
||||||
toast(i18n.t(msg.error), "danger");
|
this.setState(s => {
|
||||||
return;
|
if (s.appsRes.state == "success" && approveRes.state == "success") {
|
||||||
} else if (msg.reconnect) {
|
s.appsRes.data.registration_applications = editRegistrationApplication(
|
||||||
this.refetch();
|
approveRes.data.registration_application,
|
||||||
} else if (op == UserOperation.ListRegistrationApplications) {
|
s.appsRes.data.registration_applications
|
||||||
const data = wsJsonToRes<ListRegistrationApplicationsResponse>(msg);
|
|
||||||
this.setState({
|
|
||||||
listRegistrationApplicationsResponse: data,
|
|
||||||
loading: false,
|
|
||||||
});
|
|
||||||
window.scrollTo(0, 0);
|
|
||||||
} else if (op == UserOperation.ApproveRegistrationApplication) {
|
|
||||||
const data = wsJsonToRes<RegistrationApplicationResponse>(msg);
|
|
||||||
updateRegistrationApplicationRes(
|
|
||||||
data.registration_application,
|
|
||||||
this.state.listRegistrationApplicationsResponse
|
|
||||||
?.registration_applications
|
|
||||||
);
|
);
|
||||||
const uacs = UserService.Instance.unreadApplicationCountSub;
|
|
||||||
// Minor bug, where if the application switches from deny to approve, the count will still go down
|
|
||||||
uacs.next(uacs.getValue() - 1);
|
|
||||||
this.setState(this.state);
|
|
||||||
}
|
}
|
||||||
|
return s;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,27 +13,23 @@ import {
|
||||||
PostReportView,
|
PostReportView,
|
||||||
PrivateMessageReportResponse,
|
PrivateMessageReportResponse,
|
||||||
PrivateMessageReportView,
|
PrivateMessageReportView,
|
||||||
UserOperation,
|
ResolveCommentReport,
|
||||||
wsJsonToRes,
|
ResolvePostReport,
|
||||||
wsUserOp,
|
ResolvePrivateMessageReport,
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { Subscription } from "rxjs";
|
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { InitialFetchRequest } from "../../interfaces";
|
import { InitialFetchRequest } from "../../interfaces";
|
||||||
import { UserService, WebSocketService } from "../../services";
|
import { HttpService, UserService } from "../../services";
|
||||||
|
import { FirstLoadService } from "../../services/FirstLoadService";
|
||||||
|
import { RequestState } from "../../services/HttpService";
|
||||||
import {
|
import {
|
||||||
amAdmin,
|
amAdmin,
|
||||||
|
editCommentReport,
|
||||||
|
editPostReport,
|
||||||
|
editPrivateMessageReport,
|
||||||
fetchLimit,
|
fetchLimit,
|
||||||
isBrowser,
|
myAuthRequired,
|
||||||
myAuth,
|
|
||||||
setIsoData,
|
setIsoData,
|
||||||
setupTippy,
|
|
||||||
toast,
|
|
||||||
updateCommentReportRes,
|
|
||||||
updatePostReportRes,
|
|
||||||
updatePrivateMessageReportRes,
|
|
||||||
wsClient,
|
|
||||||
wsSubscribe,
|
|
||||||
} from "../../utils";
|
} from "../../utils";
|
||||||
import { CommentReport } from "../comment/comment-report";
|
import { CommentReport } from "../comment/comment-report";
|
||||||
import { HtmlTags } from "../common/html-tags";
|
import { HtmlTags } from "../common/html-tags";
|
||||||
|
@ -68,66 +64,62 @@ type ItemType = {
|
||||||
};
|
};
|
||||||
|
|
||||||
interface ReportsState {
|
interface ReportsState {
|
||||||
listCommentReportsResponse?: ListCommentReportsResponse;
|
commentReportsRes: RequestState<ListCommentReportsResponse>;
|
||||||
listPostReportsResponse?: ListPostReportsResponse;
|
postReportsRes: RequestState<ListPostReportsResponse>;
|
||||||
listPrivateMessageReportsResponse?: ListPrivateMessageReportsResponse;
|
messageReportsRes: RequestState<ListPrivateMessageReportsResponse>;
|
||||||
unreadOrAll: UnreadOrAll;
|
unreadOrAll: UnreadOrAll;
|
||||||
messageType: MessageType;
|
messageType: MessageType;
|
||||||
combined: ItemType[];
|
|
||||||
siteRes: GetSiteResponse;
|
siteRes: GetSiteResponse;
|
||||||
page: number;
|
page: number;
|
||||||
loading: boolean;
|
isIsomorphic: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Reports extends Component<any, ReportsState> {
|
export class Reports extends Component<any, ReportsState> {
|
||||||
private isoData = setIsoData(this.context);
|
private isoData = setIsoData(this.context);
|
||||||
private subscription?: Subscription;
|
|
||||||
state: ReportsState = {
|
state: ReportsState = {
|
||||||
|
commentReportsRes: { state: "empty" },
|
||||||
|
postReportsRes: { state: "empty" },
|
||||||
|
messageReportsRes: { state: "empty" },
|
||||||
unreadOrAll: UnreadOrAll.Unread,
|
unreadOrAll: UnreadOrAll.Unread,
|
||||||
messageType: MessageType.All,
|
messageType: MessageType.All,
|
||||||
combined: [],
|
|
||||||
page: 1,
|
page: 1,
|
||||||
siteRes: this.isoData.site_res,
|
siteRes: this.isoData.site_res,
|
||||||
loading: true,
|
isIsomorphic: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
|
|
||||||
this.handlePageChange = this.handlePageChange.bind(this);
|
this.handlePageChange = this.handlePageChange.bind(this);
|
||||||
|
this.handleResolveCommentReport =
|
||||||
this.parseMessage = this.parseMessage.bind(this);
|
this.handleResolveCommentReport.bind(this);
|
||||||
this.subscription = wsSubscribe(this.parseMessage);
|
this.handleResolvePostReport = this.handleResolvePostReport.bind(this);
|
||||||
|
this.handleResolvePrivateMessageReport =
|
||||||
|
this.handleResolvePrivateMessageReport.bind(this);
|
||||||
|
|
||||||
// Only fetch the data if coming from another route
|
// Only fetch the data if coming from another route
|
||||||
if (this.isoData.path == this.context.router.route.match.url) {
|
if (FirstLoadService.isFirstLoad) {
|
||||||
|
const [commentReportsRes, postReportsRes, messageReportsRes] =
|
||||||
|
this.isoData.routeData;
|
||||||
this.state = {
|
this.state = {
|
||||||
...this.state,
|
...this.state,
|
||||||
listCommentReportsResponse: this.isoData
|
commentReportsRes,
|
||||||
.routeData[0] as ListCommentReportsResponse,
|
postReportsRes,
|
||||||
listPostReportsResponse: this.isoData
|
isIsomorphic: true,
|
||||||
.routeData[1] as ListPostReportsResponse,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
if (amAdmin()) {
|
if (amAdmin()) {
|
||||||
this.state = {
|
this.state = {
|
||||||
...this.state,
|
...this.state,
|
||||||
listPrivateMessageReportsResponse: this.isoData
|
messageReportsRes,
|
||||||
.routeData[2] as ListPrivateMessageReportsResponse,
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
this.state = {
|
|
||||||
...this.state,
|
|
||||||
combined: this.buildCombined(),
|
|
||||||
loading: false,
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
this.refetch();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
async componentDidMount() {
|
||||||
if (isBrowser()) {
|
if (!this.state.isIsomorphic) {
|
||||||
this.subscription?.unsubscribe();
|
await this.refetch();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -143,11 +135,6 @@ export class Reports extends Component<any, ReportsState> {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="container-lg">
|
<div className="container-lg">
|
||||||
{this.state.loading ? (
|
|
||||||
<h5>
|
|
||||||
<Spinner large />
|
|
||||||
</h5>
|
|
||||||
) : (
|
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
<HtmlTags
|
<HtmlTags
|
||||||
|
@ -156,24 +143,38 @@ export class Reports extends Component<any, ReportsState> {
|
||||||
/>
|
/>
|
||||||
<h5 className="mb-2">{i18n.t("reports")}</h5>
|
<h5 className="mb-2">{i18n.t("reports")}</h5>
|
||||||
{this.selects()}
|
{this.selects()}
|
||||||
{this.state.messageType == MessageType.All && this.all()}
|
{this.section}
|
||||||
{this.state.messageType == MessageType.CommentReport &&
|
|
||||||
this.commentReports()}
|
|
||||||
{this.state.messageType == MessageType.PostReport &&
|
|
||||||
this.postReports()}
|
|
||||||
{this.state.messageType == MessageType.PrivateMessageReport &&
|
|
||||||
this.privateMessageReports()}
|
|
||||||
<Paginator
|
<Paginator
|
||||||
page={this.state.page}
|
page={this.state.page}
|
||||||
onChange={this.handlePageChange}
|
onChange={this.handlePageChange}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get section() {
|
||||||
|
switch (this.state.messageType) {
|
||||||
|
case MessageType.All: {
|
||||||
|
return this.all();
|
||||||
|
}
|
||||||
|
case MessageType.CommentReport: {
|
||||||
|
return this.commentReports();
|
||||||
|
}
|
||||||
|
case MessageType.PostReport: {
|
||||||
|
return this.postReports();
|
||||||
|
}
|
||||||
|
case MessageType.PrivateMessageReport: {
|
||||||
|
return this.privateMessageReports();
|
||||||
|
}
|
||||||
|
|
||||||
|
default: {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
unreadOrAllRadios() {
|
unreadOrAllRadios() {
|
||||||
return (
|
return (
|
||||||
<div className="btn-group btn-group-toggle flex-wrap mb-2">
|
<div className="btn-group btn-group-toggle flex-wrap mb-2">
|
||||||
|
@ -309,23 +310,25 @@ export class Reports extends Component<any, ReportsState> {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
buildCombined(): ItemType[] {
|
get buildCombined(): ItemType[] {
|
||||||
// let comments: ItemType[] = this.state.listCommentReportsResponse
|
const commentRes = this.state.commentReportsRes;
|
||||||
// .map(r => r.comment_reports)
|
|
||||||
// .unwrapOr([])
|
|
||||||
// .map(r => this.commentReportToItemType(r));
|
|
||||||
const comments =
|
const comments =
|
||||||
this.state.listCommentReportsResponse?.comment_reports.map(
|
commentRes.state == "success"
|
||||||
this.commentReportToItemType
|
? commentRes.data.comment_reports.map(this.commentReportToItemType)
|
||||||
) ?? [];
|
: [];
|
||||||
|
|
||||||
|
const postRes = this.state.postReportsRes;
|
||||||
const posts =
|
const posts =
|
||||||
this.state.listPostReportsResponse?.post_reports.map(
|
postRes.state == "success"
|
||||||
this.postReportToItemType
|
? postRes.data.post_reports.map(this.postReportToItemType)
|
||||||
) ?? [];
|
: [];
|
||||||
|
const pmRes = this.state.messageReportsRes;
|
||||||
const privateMessages =
|
const privateMessages =
|
||||||
this.state.listPrivateMessageReportsResponse?.private_message_reports.map(
|
pmRes.state == "success"
|
||||||
|
? pmRes.data.private_message_reports.map(
|
||||||
this.privateMessageReportToItemType
|
this.privateMessageReportToItemType
|
||||||
) ?? [];
|
)
|
||||||
|
: [];
|
||||||
|
|
||||||
return [...comments, ...posts, ...privateMessages].sort((a, b) =>
|
return [...comments, ...posts, ...privateMessages].sort((a, b) =>
|
||||||
b.published.localeCompare(a.published)
|
b.published.localeCompare(a.published)
|
||||||
|
@ -336,15 +339,26 @@ export class Reports extends Component<any, ReportsState> {
|
||||||
switch (i.type_) {
|
switch (i.type_) {
|
||||||
case MessageEnum.CommentReport:
|
case MessageEnum.CommentReport:
|
||||||
return (
|
return (
|
||||||
<CommentReport key={i.id} report={i.view as CommentReportView} />
|
<CommentReport
|
||||||
|
key={i.id}
|
||||||
|
report={i.view as CommentReportView}
|
||||||
|
onResolveReport={this.handleResolveCommentReport}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
case MessageEnum.PostReport:
|
case MessageEnum.PostReport:
|
||||||
return <PostReport key={i.id} report={i.view as PostReportView} />;
|
return (
|
||||||
|
<PostReport
|
||||||
|
key={i.id}
|
||||||
|
report={i.view as PostReportView}
|
||||||
|
onResolveReport={this.handleResolvePostReport}
|
||||||
|
/>
|
||||||
|
);
|
||||||
case MessageEnum.PrivateMessageReport:
|
case MessageEnum.PrivateMessageReport:
|
||||||
return (
|
return (
|
||||||
<PrivateMessageReport
|
<PrivateMessageReport
|
||||||
key={i.id}
|
key={i.id}
|
||||||
report={i.view as PrivateMessageReportView}
|
report={i.view as PrivateMessageReportView}
|
||||||
|
onResolveReport={this.handleResolvePrivateMessageReport}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
default:
|
default:
|
||||||
|
@ -355,7 +369,7 @@ export class Reports extends Component<any, ReportsState> {
|
||||||
all() {
|
all() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{this.state.combined.map(i => (
|
{this.buildCombined.map(i => (
|
||||||
<>
|
<>
|
||||||
<hr />
|
<hr />
|
||||||
{this.renderItemType(i)}
|
{this.renderItemType(i)}
|
||||||
|
@ -366,42 +380,75 @@ export class Reports extends Component<any, ReportsState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
commentReports() {
|
commentReports() {
|
||||||
const reports = this.state.listCommentReportsResponse?.comment_reports;
|
const res = this.state.commentReportsRes;
|
||||||
|
switch (res.state) {
|
||||||
|
case "loading":
|
||||||
|
return (
|
||||||
|
<h5>
|
||||||
|
<Spinner large />
|
||||||
|
</h5>
|
||||||
|
);
|
||||||
|
case "success": {
|
||||||
|
const reports = res.data.comment_reports;
|
||||||
return (
|
return (
|
||||||
reports && (
|
|
||||||
<div>
|
<div>
|
||||||
{reports.map(cr => (
|
{reports.map(cr => (
|
||||||
<>
|
<>
|
||||||
<hr />
|
<hr />
|
||||||
<CommentReport key={cr.comment_report.id} report={cr} />
|
<CommentReport
|
||||||
|
key={cr.comment_report.id}
|
||||||
|
report={cr}
|
||||||
|
onResolveReport={this.handleResolveCommentReport}
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
postReports() {
|
postReports() {
|
||||||
const reports = this.state.listPostReportsResponse?.post_reports;
|
const res = this.state.postReportsRes;
|
||||||
|
switch (res.state) {
|
||||||
|
case "loading":
|
||||||
|
return (
|
||||||
|
<h5>
|
||||||
|
<Spinner large />
|
||||||
|
</h5>
|
||||||
|
);
|
||||||
|
case "success": {
|
||||||
|
const reports = res.data.post_reports;
|
||||||
return (
|
return (
|
||||||
reports && (
|
|
||||||
<div>
|
<div>
|
||||||
{reports.map(pr => (
|
{reports.map(pr => (
|
||||||
<>
|
<>
|
||||||
<hr />
|
<hr />
|
||||||
<PostReport key={pr.post_report.id} report={pr} />
|
<PostReport
|
||||||
|
key={pr.post_report.id}
|
||||||
|
report={pr}
|
||||||
|
onResolveReport={this.handleResolvePostReport}
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
privateMessageReports() {
|
privateMessageReports() {
|
||||||
const reports =
|
const res = this.state.messageReportsRes;
|
||||||
this.state.listPrivateMessageReportsResponse?.private_message_reports;
|
switch (res.state) {
|
||||||
|
case "loading":
|
||||||
|
return (
|
||||||
|
<h5>
|
||||||
|
<Spinner large />
|
||||||
|
</h5>
|
||||||
|
);
|
||||||
|
case "success": {
|
||||||
|
const reports = res.data.private_message_reports;
|
||||||
return (
|
return (
|
||||||
reports && (
|
|
||||||
<div>
|
<div>
|
||||||
{reports.map(pmr => (
|
{reports.map(pmr => (
|
||||||
<>
|
<>
|
||||||
|
@ -409,36 +456,40 @@ export class Reports extends Component<any, ReportsState> {
|
||||||
<PrivateMessageReport
|
<PrivateMessageReport
|
||||||
key={pmr.private_message_report.id}
|
key={pmr.private_message_report.id}
|
||||||
report={pmr}
|
report={pmr}
|
||||||
|
onResolveReport={this.handleResolvePrivateMessageReport}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
handlePageChange(page: number) {
|
async handlePageChange(page: number) {
|
||||||
this.setState({ page });
|
this.setState({ page });
|
||||||
this.refetch();
|
await this.refetch();
|
||||||
}
|
}
|
||||||
|
|
||||||
handleUnreadOrAllChange(i: Reports, event: any) {
|
async handleUnreadOrAllChange(i: Reports, event: any) {
|
||||||
i.setState({ unreadOrAll: Number(event.target.value), page: 1 });
|
i.setState({ unreadOrAll: Number(event.target.value), page: 1 });
|
||||||
i.refetch();
|
await i.refetch();
|
||||||
}
|
}
|
||||||
|
|
||||||
handleMessageTypeChange(i: Reports, event: any) {
|
async handleMessageTypeChange(i: Reports, event: any) {
|
||||||
i.setState({ messageType: Number(event.target.value), page: 1 });
|
i.setState({ messageType: Number(event.target.value), page: 1 });
|
||||||
i.refetch();
|
await i.refetch();
|
||||||
}
|
}
|
||||||
|
|
||||||
static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
|
static fetchInitialData({
|
||||||
const promises: Promise<any>[] = [];
|
auth,
|
||||||
|
client,
|
||||||
|
}: InitialFetchRequest): Promise<any>[] {
|
||||||
|
const promises: Promise<RequestState<any>>[] = [];
|
||||||
|
|
||||||
const unresolved_only = true;
|
const unresolved_only = true;
|
||||||
const page = 1;
|
const page = 1;
|
||||||
const limit = fetchLimit;
|
const limit = fetchLimit;
|
||||||
const auth = req.auth;
|
|
||||||
|
|
||||||
if (auth) {
|
if (auth) {
|
||||||
const commentReportsForm: ListCommentReports = {
|
const commentReportsForm: ListCommentReports = {
|
||||||
|
@ -447,7 +498,7 @@ export class Reports extends Component<any, ReportsState> {
|
||||||
limit,
|
limit,
|
||||||
auth,
|
auth,
|
||||||
};
|
};
|
||||||
promises.push(req.client.listCommentReports(commentReportsForm));
|
promises.push(client.listCommentReports(commentReportsForm));
|
||||||
|
|
||||||
const postReportsForm: ListPostReports = {
|
const postReportsForm: ListPostReports = {
|
||||||
unresolved_only,
|
unresolved_only,
|
||||||
|
@ -455,7 +506,7 @@ export class Reports extends Component<any, ReportsState> {
|
||||||
limit,
|
limit,
|
||||||
auth,
|
auth,
|
||||||
};
|
};
|
||||||
promises.push(req.client.listPostReports(postReportsForm));
|
promises.push(client.listPostReports(postReportsForm));
|
||||||
|
|
||||||
if (amAdmin()) {
|
if (amAdmin()) {
|
||||||
const privateMessageReportsForm: ListPrivateMessageReports = {
|
const privateMessageReportsForm: ListPrivateMessageReports = {
|
||||||
|
@ -465,120 +516,109 @@ export class Reports extends Component<any, ReportsState> {
|
||||||
auth,
|
auth,
|
||||||
};
|
};
|
||||||
promises.push(
|
promises.push(
|
||||||
req.client.listPrivateMessageReports(privateMessageReportsForm)
|
client.listPrivateMessageReports(privateMessageReportsForm)
|
||||||
);
|
);
|
||||||
|
} else {
|
||||||
|
promises.push(Promise.resolve({ state: "empty" }));
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
promises.push(
|
||||||
|
Promise.resolve({ state: "empty" }),
|
||||||
|
Promise.resolve({ state: "empty" }),
|
||||||
|
Promise.resolve({ state: "empty" })
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return promises;
|
return promises;
|
||||||
}
|
}
|
||||||
|
|
||||||
refetch() {
|
async refetch() {
|
||||||
const unresolved_only = this.state.unreadOrAll == UnreadOrAll.Unread;
|
const unresolved_only = this.state.unreadOrAll == UnreadOrAll.Unread;
|
||||||
const page = this.state.page;
|
const page = this.state.page;
|
||||||
const limit = fetchLimit;
|
const limit = fetchLimit;
|
||||||
const auth = myAuth();
|
const auth = myAuthRequired();
|
||||||
if (auth) {
|
|
||||||
const commentReportsForm: ListCommentReports = {
|
|
||||||
unresolved_only,
|
|
||||||
page,
|
|
||||||
limit,
|
|
||||||
auth,
|
|
||||||
};
|
|
||||||
WebSocketService.Instance.send(
|
|
||||||
wsClient.listCommentReports(commentReportsForm)
|
|
||||||
);
|
|
||||||
|
|
||||||
const postReportsForm: ListPostReports = {
|
this.setState({
|
||||||
|
commentReportsRes: { state: "loading" },
|
||||||
|
postReportsRes: { state: "loading" },
|
||||||
|
messageReportsRes: { state: "loading" },
|
||||||
|
});
|
||||||
|
|
||||||
|
const form:
|
||||||
|
| ListCommentReports
|
||||||
|
| ListPostReports
|
||||||
|
| ListPrivateMessageReports = {
|
||||||
unresolved_only,
|
unresolved_only,
|
||||||
page,
|
page,
|
||||||
limit,
|
limit,
|
||||||
auth,
|
auth,
|
||||||
};
|
};
|
||||||
WebSocketService.Instance.send(wsClient.listPostReports(postReportsForm));
|
|
||||||
|
this.setState({
|
||||||
|
commentReportsRes: await HttpService.client.listCommentReports(form),
|
||||||
|
postReportsRes: await HttpService.client.listPostReports(form),
|
||||||
|
});
|
||||||
|
|
||||||
if (amAdmin()) {
|
if (amAdmin()) {
|
||||||
const privateMessageReportsForm: ListPrivateMessageReports = {
|
this.setState({
|
||||||
unresolved_only,
|
messageReportsRes: await HttpService.client.listPrivateMessageReports(
|
||||||
page,
|
form
|
||||||
limit,
|
),
|
||||||
auth,
|
});
|
||||||
};
|
|
||||||
WebSocketService.Instance.send(
|
|
||||||
wsClient.listPrivateMessageReports(privateMessageReportsForm)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
parseMessage(msg: any) {
|
async handleResolveCommentReport(form: ResolveCommentReport) {
|
||||||
const op = wsUserOp(msg);
|
const res = await HttpService.client.resolveCommentReport(form);
|
||||||
console.log(msg);
|
this.findAndUpdateCommentReport(res);
|
||||||
if (msg.error) {
|
}
|
||||||
toast(i18n.t(msg.error), "danger");
|
|
||||||
return;
|
async handleResolvePostReport(form: ResolvePostReport) {
|
||||||
} else if (msg.reconnect) {
|
const res = await HttpService.client.resolvePostReport(form);
|
||||||
this.refetch();
|
this.findAndUpdatePostReport(res);
|
||||||
} else if (op == UserOperation.ListCommentReports) {
|
}
|
||||||
const data = wsJsonToRes<ListCommentReportsResponse>(msg);
|
|
||||||
this.setState({ listCommentReportsResponse: data });
|
async handleResolvePrivateMessageReport(form: ResolvePrivateMessageReport) {
|
||||||
this.setState({ combined: this.buildCombined(), loading: false });
|
const res = await HttpService.client.resolvePrivateMessageReport(form);
|
||||||
// this.sendUnreadCount();
|
this.findAndUpdatePrivateMessageReport(res);
|
||||||
window.scrollTo(0, 0);
|
}
|
||||||
setupTippy();
|
|
||||||
} else if (op == UserOperation.ListPostReports) {
|
findAndUpdateCommentReport(res: RequestState<CommentReportResponse>) {
|
||||||
const data = wsJsonToRes<ListPostReportsResponse>(msg);
|
this.setState(s => {
|
||||||
this.setState({ listPostReportsResponse: data });
|
if (s.commentReportsRes.state == "success" && res.state == "success") {
|
||||||
this.setState({ combined: this.buildCombined(), loading: false });
|
s.commentReportsRes.data.comment_reports = editCommentReport(
|
||||||
// this.sendUnreadCount();
|
res.data.comment_report_view,
|
||||||
window.scrollTo(0, 0);
|
s.commentReportsRes.data.comment_reports
|
||||||
setupTippy();
|
|
||||||
} else if (op == UserOperation.ListPrivateMessageReports) {
|
|
||||||
const data = wsJsonToRes<ListPrivateMessageReportsResponse>(msg);
|
|
||||||
this.setState({ listPrivateMessageReportsResponse: data });
|
|
||||||
this.setState({ combined: this.buildCombined(), loading: false });
|
|
||||||
// this.sendUnreadCount();
|
|
||||||
window.scrollTo(0, 0);
|
|
||||||
setupTippy();
|
|
||||||
} else if (op == UserOperation.ResolvePostReport) {
|
|
||||||
const data = wsJsonToRes<PostReportResponse>(msg);
|
|
||||||
updatePostReportRes(
|
|
||||||
data.post_report_view,
|
|
||||||
this.state.listPostReportsResponse?.post_reports
|
|
||||||
);
|
);
|
||||||
const urcs = UserService.Instance.unreadReportCountSub;
|
|
||||||
if (data.post_report_view.post_report.resolved) {
|
|
||||||
urcs.next(urcs.getValue() - 1);
|
|
||||||
} else {
|
|
||||||
urcs.next(urcs.getValue() + 1);
|
|
||||||
}
|
}
|
||||||
this.setState(this.state);
|
return s;
|
||||||
} else if (op == UserOperation.ResolveCommentReport) {
|
});
|
||||||
const data = wsJsonToRes<CommentReportResponse>(msg);
|
}
|
||||||
updateCommentReportRes(
|
|
||||||
data.comment_report_view,
|
findAndUpdatePostReport(res: RequestState<PostReportResponse>) {
|
||||||
this.state.listCommentReportsResponse?.comment_reports
|
this.setState(s => {
|
||||||
|
if (s.postReportsRes.state == "success" && res.state == "success") {
|
||||||
|
s.postReportsRes.data.post_reports = editPostReport(
|
||||||
|
res.data.post_report_view,
|
||||||
|
s.postReportsRes.data.post_reports
|
||||||
);
|
);
|
||||||
const urcs = UserService.Instance.unreadReportCountSub;
|
|
||||||
if (data.comment_report_view.comment_report.resolved) {
|
|
||||||
urcs.next(urcs.getValue() - 1);
|
|
||||||
} else {
|
|
||||||
urcs.next(urcs.getValue() + 1);
|
|
||||||
}
|
}
|
||||||
this.setState(this.state);
|
return s;
|
||||||
} else if (op == UserOperation.ResolvePrivateMessageReport) {
|
});
|
||||||
const data = wsJsonToRes<PrivateMessageReportResponse>(msg);
|
}
|
||||||
updatePrivateMessageReportRes(
|
|
||||||
data.private_message_report_view,
|
findAndUpdatePrivateMessageReport(
|
||||||
this.state.listPrivateMessageReportsResponse?.private_message_reports
|
res: RequestState<PrivateMessageReportResponse>
|
||||||
|
) {
|
||||||
|
this.setState(s => {
|
||||||
|
if (s.messageReportsRes.state == "success" && res.state == "success") {
|
||||||
|
s.messageReportsRes.data.private_message_reports =
|
||||||
|
editPrivateMessageReport(
|
||||||
|
res.data.private_message_report_view,
|
||||||
|
s.messageReportsRes.data.private_message_reports
|
||||||
);
|
);
|
||||||
const urcs = UserService.Instance.unreadReportCountSub;
|
|
||||||
if (data.private_message_report_view.private_message_report.resolved) {
|
|
||||||
urcs.next(urcs.getValue() - 1);
|
|
||||||
} else {
|
|
||||||
urcs.next(urcs.getValue() + 1);
|
|
||||||
}
|
|
||||||
this.setState(this.state);
|
|
||||||
}
|
}
|
||||||
|
return s;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,26 +1,19 @@
|
||||||
import { NoOptionI18nKeys } from "i18next";
|
import { NoOptionI18nKeys } from "i18next";
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component, linkEvent } from "inferno";
|
||||||
import {
|
import {
|
||||||
BlockCommunity,
|
|
||||||
BlockCommunityResponse,
|
BlockCommunityResponse,
|
||||||
BlockPerson,
|
|
||||||
BlockPersonResponse,
|
BlockPersonResponse,
|
||||||
ChangePassword,
|
|
||||||
CommunityBlockView,
|
CommunityBlockView,
|
||||||
DeleteAccount,
|
DeleteAccountResponse,
|
||||||
GetSiteResponse,
|
GetSiteResponse,
|
||||||
ListingType,
|
ListingType,
|
||||||
LoginResponse,
|
LoginResponse,
|
||||||
PersonBlockView,
|
PersonBlockView,
|
||||||
SaveUserSettings,
|
|
||||||
SortType,
|
SortType,
|
||||||
UserOperation,
|
|
||||||
wsJsonToRes,
|
|
||||||
wsUserOp,
|
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { Subscription } from "rxjs";
|
|
||||||
import { i18n, languages } from "../../i18next";
|
import { i18n, languages } from "../../i18next";
|
||||||
import { UserService, WebSocketService } from "../../services";
|
import { UserService } from "../../services";
|
||||||
|
import { HttpService, RequestState } from "../../services/HttpService";
|
||||||
import {
|
import {
|
||||||
Choice,
|
Choice,
|
||||||
capitalizeFirstLetter,
|
capitalizeFirstLetter,
|
||||||
|
@ -34,6 +27,7 @@ import {
|
||||||
fetchUsers,
|
fetchUsers,
|
||||||
getLanguages,
|
getLanguages,
|
||||||
myAuth,
|
myAuth,
|
||||||
|
myAuthRequired,
|
||||||
personToChoice,
|
personToChoice,
|
||||||
relTags,
|
relTags,
|
||||||
setIsoData,
|
setIsoData,
|
||||||
|
@ -43,8 +37,6 @@ import {
|
||||||
toast,
|
toast,
|
||||||
updateCommunityBlock,
|
updateCommunityBlock,
|
||||||
updatePersonBlock,
|
updatePersonBlock,
|
||||||
wsClient,
|
|
||||||
wsSubscribe,
|
|
||||||
} from "../../utils";
|
} from "../../utils";
|
||||||
import { HtmlTags } from "../common/html-tags";
|
import { HtmlTags } from "../common/html-tags";
|
||||||
import { Icon, Spinner } from "../common/icon";
|
import { Icon, Spinner } from "../common/icon";
|
||||||
|
@ -59,6 +51,9 @@ import { CommunityLink } from "../community/community-link";
|
||||||
import { PersonListing } from "./person-listing";
|
import { PersonListing } from "./person-listing";
|
||||||
|
|
||||||
interface SettingsState {
|
interface SettingsState {
|
||||||
|
saveRes: RequestState<LoginResponse>;
|
||||||
|
changePasswordRes: RequestState<LoginResponse>;
|
||||||
|
deleteAccountRes: RequestState<DeleteAccountResponse>;
|
||||||
// TODO redo these forms
|
// TODO redo these forms
|
||||||
saveUserSettingsForm: {
|
saveUserSettingsForm: {
|
||||||
show_nsfw?: boolean;
|
show_nsfw?: boolean;
|
||||||
|
@ -94,9 +89,6 @@ interface SettingsState {
|
||||||
communityBlocks: CommunityBlockView[];
|
communityBlocks: CommunityBlockView[];
|
||||||
currentTab: string;
|
currentTab: string;
|
||||||
themeList: string[];
|
themeList: string[];
|
||||||
saveUserSettingsLoading: boolean;
|
|
||||||
changePasswordLoading: boolean;
|
|
||||||
deleteAccountLoading: boolean;
|
|
||||||
deleteAccountShowConfirm: boolean;
|
deleteAccountShowConfirm: boolean;
|
||||||
siteRes: GetSiteResponse;
|
siteRes: GetSiteResponse;
|
||||||
searchCommunityLoading: boolean;
|
searchCommunityLoading: boolean;
|
||||||
|
@ -143,13 +135,12 @@ const Filter = ({
|
||||||
|
|
||||||
export class Settings extends Component<any, SettingsState> {
|
export class Settings extends Component<any, SettingsState> {
|
||||||
private isoData = setIsoData(this.context);
|
private isoData = setIsoData(this.context);
|
||||||
private subscription?: Subscription;
|
|
||||||
state: SettingsState = {
|
state: SettingsState = {
|
||||||
|
saveRes: { state: "empty" },
|
||||||
|
deleteAccountRes: { state: "empty" },
|
||||||
|
changePasswordRes: { state: "empty" },
|
||||||
saveUserSettingsForm: {},
|
saveUserSettingsForm: {},
|
||||||
changePasswordForm: {},
|
changePasswordForm: {},
|
||||||
saveUserSettingsLoading: false,
|
|
||||||
changePasswordLoading: false,
|
|
||||||
deleteAccountLoading: false,
|
|
||||||
deleteAccountShowConfirm: false,
|
deleteAccountShowConfirm: false,
|
||||||
deleteAccountForm: {},
|
deleteAccountForm: {},
|
||||||
personBlocks: [],
|
personBlocks: [],
|
||||||
|
@ -180,8 +171,8 @@ export class Settings extends Component<any, SettingsState> {
|
||||||
this.userSettings = this.userSettings.bind(this);
|
this.userSettings = this.userSettings.bind(this);
|
||||||
this.blockCards = this.blockCards.bind(this);
|
this.blockCards = this.blockCards.bind(this);
|
||||||
|
|
||||||
this.parseMessage = this.parseMessage.bind(this);
|
this.handleBlockPerson = this.handleBlockPerson.bind(this);
|
||||||
this.subscription = wsSubscribe(this.parseMessage);
|
this.handleBlockCommunity = this.handleBlockCommunity.bind(this);
|
||||||
|
|
||||||
const mui = UserService.Instance.myUserInfo;
|
const mui = UserService.Instance.myUserInfo;
|
||||||
if (mui) {
|
if (mui) {
|
||||||
|
@ -245,10 +236,6 @@ export class Settings extends Component<any, SettingsState> {
|
||||||
this.setState({ themeList: await fetchThemeList() });
|
this.setState({ themeList: await fetchThemeList() });
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
this.subscription?.unsubscribe();
|
|
||||||
}
|
|
||||||
|
|
||||||
get documentTitle(): string {
|
get documentTitle(): string {
|
||||||
return i18n.t("settings");
|
return i18n.t("settings");
|
||||||
}
|
}
|
||||||
|
@ -375,7 +362,7 @@ export class Settings extends Component<any, SettingsState> {
|
||||||
</div>
|
</div>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<button type="submit" className="btn btn-block btn-secondary mr-4">
|
<button type="submit" className="btn btn-block btn-secondary mr-4">
|
||||||
{this.state.changePasswordLoading ? (
|
{this.state.changePasswordRes.state === "loading" ? (
|
||||||
<Spinner />
|
<Spinner />
|
||||||
) : (
|
) : (
|
||||||
capitalizeFirstLetter(i18n.t("save"))
|
capitalizeFirstLetter(i18n.t("save"))
|
||||||
|
@ -791,7 +778,7 @@ export class Settings extends Component<any, SettingsState> {
|
||||||
{this.totpSection()}
|
{this.totpSection()}
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<button type="submit" className="btn btn-block btn-secondary mr-4">
|
<button type="submit" className="btn btn-block btn-secondary mr-4">
|
||||||
{this.state.saveUserSettingsLoading ? (
|
{this.state.saveRes.state === "loading" ? (
|
||||||
<Spinner />
|
<Spinner />
|
||||||
) : (
|
) : (
|
||||||
capitalizeFirstLetter(i18n.t("save"))
|
capitalizeFirstLetter(i18n.t("save"))
|
||||||
|
@ -830,7 +817,7 @@ export class Settings extends Component<any, SettingsState> {
|
||||||
disabled={!this.state.deleteAccountForm.password}
|
disabled={!this.state.deleteAccountForm.password}
|
||||||
onClick={linkEvent(this, this.handleDeleteAccount)}
|
onClick={linkEvent(this, this.handleDeleteAccount)}
|
||||||
>
|
>
|
||||||
{this.state.deleteAccountLoading ? (
|
{this.state.deleteAccountRes.state === "loading" ? (
|
||||||
<Spinner />
|
<Spinner />
|
||||||
) : (
|
) : (
|
||||||
capitalizeFirstLetter(i18n.t("delete"))
|
capitalizeFirstLetter(i18n.t("delete"))
|
||||||
|
@ -911,9 +898,7 @@ export class Settings extends Component<any, SettingsState> {
|
||||||
const searchPersonOptions: Choice[] = [];
|
const searchPersonOptions: Choice[] = [];
|
||||||
|
|
||||||
if (text.length > 0) {
|
if (text.length > 0) {
|
||||||
searchPersonOptions.push(
|
searchPersonOptions.push(...(await fetchUsers(text)).map(personToChoice));
|
||||||
...(await fetchUsers(text)).users.map(personToChoice)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
|
@ -929,7 +914,7 @@ export class Settings extends Component<any, SettingsState> {
|
||||||
|
|
||||||
if (text.length > 0) {
|
if (text.length > 0) {
|
||||||
searchCommunityOptions.push(
|
searchCommunityOptions.push(
|
||||||
...(await fetchCommunities(text)).communities.map(communityToChoice)
|
...(await fetchCommunities(text)).map(communityToChoice)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -939,100 +924,107 @@ export class Settings extends Component<any, SettingsState> {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
handleBlockPerson({ value }: Choice) {
|
async handleBlockPerson({ value }: Choice) {
|
||||||
const auth = myAuth();
|
if (value !== "0") {
|
||||||
if (auth && value !== "0") {
|
const res = await HttpService.client.blockPerson({
|
||||||
const blockUserForm: BlockPerson = {
|
|
||||||
person_id: Number(value),
|
person_id: Number(value),
|
||||||
block: true,
|
block: true,
|
||||||
auth,
|
auth: myAuthRequired(),
|
||||||
};
|
});
|
||||||
|
this.personBlock(res);
|
||||||
WebSocketService.Instance.send(wsClient.blockPerson(blockUserForm));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleUnblockPerson(i: { ctx: Settings; recipientId: number }) {
|
async handleUnblockPerson({
|
||||||
const auth = myAuth();
|
ctx,
|
||||||
if (auth) {
|
recipientId,
|
||||||
const blockUserForm: BlockPerson = {
|
}: {
|
||||||
person_id: i.recipientId,
|
ctx: Settings;
|
||||||
|
recipientId: number;
|
||||||
|
}) {
|
||||||
|
const res = await HttpService.client.blockPerson({
|
||||||
|
person_id: recipientId,
|
||||||
block: false,
|
block: false,
|
||||||
auth,
|
auth: myAuthRequired(),
|
||||||
};
|
});
|
||||||
WebSocketService.Instance.send(wsClient.blockPerson(blockUserForm));
|
ctx.personBlock(res);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleBlockCommunity({ value }: Choice) {
|
async handleBlockCommunity({ value }: Choice) {
|
||||||
const auth = myAuth();
|
if (value !== "0") {
|
||||||
if (auth && value !== "0") {
|
const res = await HttpService.client.blockCommunity({
|
||||||
const blockCommunityForm: BlockCommunity = {
|
|
||||||
community_id: Number(value),
|
community_id: Number(value),
|
||||||
block: true,
|
block: true,
|
||||||
auth,
|
auth: myAuthRequired(),
|
||||||
};
|
});
|
||||||
WebSocketService.Instance.send(
|
this.communityBlock(res);
|
||||||
wsClient.blockCommunity(blockCommunityForm)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleUnblockCommunity(i: { ctx: Settings; communityId: number }) {
|
async handleUnblockCommunity(i: { ctx: Settings; communityId: number }) {
|
||||||
const auth = myAuth();
|
const auth = myAuth();
|
||||||
if (auth) {
|
if (auth) {
|
||||||
const blockCommunityForm: BlockCommunity = {
|
const res = await HttpService.client.blockCommunity({
|
||||||
community_id: i.communityId,
|
community_id: i.communityId,
|
||||||
block: false,
|
block: false,
|
||||||
auth,
|
auth: myAuthRequired(),
|
||||||
};
|
});
|
||||||
WebSocketService.Instance.send(
|
i.ctx.communityBlock(res);
|
||||||
wsClient.blockCommunity(blockCommunityForm)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleShowNsfwChange(i: Settings, event: any) {
|
handleShowNsfwChange(i: Settings, event: any) {
|
||||||
i.state.saveUserSettingsForm.show_nsfw = event.target.checked;
|
i.setState(
|
||||||
i.setState(i.state);
|
s => ((s.saveUserSettingsForm.show_nsfw = event.target.checked), s)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleShowAvatarsChange(i: Settings, event: any) {
|
handleShowAvatarsChange(i: Settings, event: any) {
|
||||||
i.state.saveUserSettingsForm.show_avatars = event.target.checked;
|
|
||||||
const mui = UserService.Instance.myUserInfo;
|
const mui = UserService.Instance.myUserInfo;
|
||||||
if (mui) {
|
if (mui) {
|
||||||
mui.local_user_view.local_user.show_avatars = event.target.checked;
|
mui.local_user_view.local_user.show_avatars = event.target.checked;
|
||||||
}
|
}
|
||||||
i.setState(i.state);
|
i.setState(
|
||||||
|
s => ((s.saveUserSettingsForm.show_avatars = event.target.checked), s)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleBotAccount(i: Settings, event: any) {
|
handleBotAccount(i: Settings, event: any) {
|
||||||
i.state.saveUserSettingsForm.bot_account = event.target.checked;
|
i.setState(
|
||||||
i.setState(i.state);
|
s => ((s.saveUserSettingsForm.bot_account = event.target.checked), s)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleShowBotAccounts(i: Settings, event: any) {
|
handleShowBotAccounts(i: Settings, event: any) {
|
||||||
i.state.saveUserSettingsForm.show_bot_accounts = event.target.checked;
|
i.setState(
|
||||||
i.setState(i.state);
|
s => (
|
||||||
|
(s.saveUserSettingsForm.show_bot_accounts = event.target.checked), s
|
||||||
|
)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleReadPosts(i: Settings, event: any) {
|
handleReadPosts(i: Settings, event: any) {
|
||||||
i.state.saveUserSettingsForm.show_read_posts = event.target.checked;
|
i.setState(
|
||||||
i.setState(i.state);
|
s => ((s.saveUserSettingsForm.show_read_posts = event.target.checked), s)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleShowNewPostNotifs(i: Settings, event: any) {
|
handleShowNewPostNotifs(i: Settings, event: any) {
|
||||||
i.state.saveUserSettingsForm.show_new_post_notifs = event.target.checked;
|
i.setState(
|
||||||
i.setState(i.state);
|
s => (
|
||||||
|
(s.saveUserSettingsForm.show_new_post_notifs = event.target.checked), s
|
||||||
|
)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleShowScoresChange(i: Settings, event: any) {
|
handleShowScoresChange(i: Settings, event: any) {
|
||||||
i.state.saveUserSettingsForm.show_scores = event.target.checked;
|
|
||||||
const mui = UserService.Instance.myUserInfo;
|
const mui = UserService.Instance.myUserInfo;
|
||||||
if (mui) {
|
if (mui) {
|
||||||
mui.local_user_view.local_user.show_scores = event.target.checked;
|
mui.local_user_view.local_user.show_scores = event.target.checked;
|
||||||
}
|
}
|
||||||
i.setState(i.state);
|
i.setState(
|
||||||
|
s => ((s.saveUserSettingsForm.show_scores = event.target.checked), s)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleGenerateTotp(i: Settings, event: any) {
|
handleGenerateTotp(i: Settings, event: any) {
|
||||||
|
@ -1041,35 +1033,37 @@ export class Settings extends Component<any, SettingsState> {
|
||||||
if (checked) {
|
if (checked) {
|
||||||
toast(i18n.t("two_factor_setup_instructions"));
|
toast(i18n.t("two_factor_setup_instructions"));
|
||||||
}
|
}
|
||||||
i.state.saveUserSettingsForm.generate_totp_2fa = checked;
|
i.setState(s => ((s.saveUserSettingsForm.generate_totp_2fa = checked), s));
|
||||||
i.setState(i.state);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleRemoveTotp(i: Settings, event: any) {
|
handleRemoveTotp(i: Settings, event: any) {
|
||||||
// Coerce true to undefined here, so it won't generate it.
|
// Coerce true to undefined here, so it won't generate it.
|
||||||
const checked: boolean | undefined = !event.target.checked && undefined;
|
const checked: boolean | undefined = !event.target.checked && undefined;
|
||||||
i.state.saveUserSettingsForm.generate_totp_2fa = checked;
|
i.setState(s => ((s.saveUserSettingsForm.generate_totp_2fa = checked), s));
|
||||||
i.setState(i.state);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleSendNotificationsToEmailChange(i: Settings, event: any) {
|
handleSendNotificationsToEmailChange(i: Settings, event: any) {
|
||||||
i.state.saveUserSettingsForm.send_notifications_to_email =
|
i.setState(
|
||||||
event.target.checked;
|
s => (
|
||||||
i.setState(i.state);
|
(s.saveUserSettingsForm.send_notifications_to_email =
|
||||||
|
event.target.checked),
|
||||||
|
s
|
||||||
|
)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleThemeChange(i: Settings, event: any) {
|
handleThemeChange(i: Settings, event: any) {
|
||||||
i.state.saveUserSettingsForm.theme = event.target.value;
|
i.setState(s => ((s.saveUserSettingsForm.theme = event.target.value), s));
|
||||||
setTheme(event.target.value, true);
|
setTheme(event.target.value, true);
|
||||||
i.setState(i.state);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleInterfaceLangChange(i: Settings, event: any) {
|
handleInterfaceLangChange(i: Settings, event: any) {
|
||||||
i.state.saveUserSettingsForm.interface_language = event.target.value;
|
i.setState(
|
||||||
|
s => ((s.saveUserSettingsForm.interface_language = event.target.value), s)
|
||||||
|
);
|
||||||
i18n.changeLanguage(
|
i18n.changeLanguage(
|
||||||
getLanguages(i.state.saveUserSettingsForm.interface_language).at(0)
|
getLanguages(i.state.saveUserSettingsForm.interface_language).at(0)
|
||||||
);
|
);
|
||||||
i.setState(i.state);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleDiscussionLanguageChange(val: number[]) {
|
handleDiscussionLanguageChange(val: number[]) {
|
||||||
|
@ -1089,8 +1083,7 @@ export class Settings extends Component<any, SettingsState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleEmailChange(i: Settings, event: any) {
|
handleEmailChange(i: Settings, event: any) {
|
||||||
i.state.saveUserSettingsForm.email = event.target.value;
|
i.setState(s => ((s.saveUserSettingsForm.email = event.target.value), s));
|
||||||
i.setState(i.state);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleBioChange(val: string) {
|
handleBioChange(val: string) {
|
||||||
|
@ -1114,90 +1107,100 @@ export class Settings extends Component<any, SettingsState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleDisplayNameChange(i: Settings, event: any) {
|
handleDisplayNameChange(i: Settings, event: any) {
|
||||||
i.state.saveUserSettingsForm.display_name = event.target.value;
|
i.setState(
|
||||||
i.setState(i.state);
|
s => ((s.saveUserSettingsForm.display_name = event.target.value), s)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleMatrixUserIdChange(i: Settings, event: any) {
|
handleMatrixUserIdChange(i: Settings, event: any) {
|
||||||
i.state.saveUserSettingsForm.matrix_user_id = event.target.value;
|
i.setState(
|
||||||
i.setState(i.state);
|
s => ((s.saveUserSettingsForm.matrix_user_id = event.target.value), s)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleNewPasswordChange(i: Settings, event: any) {
|
handleNewPasswordChange(i: Settings, event: any) {
|
||||||
i.state.changePasswordForm.new_password = event.target.value;
|
const newPass: string | undefined =
|
||||||
if (i.state.changePasswordForm.new_password == "") {
|
event.target.value == "" ? undefined : event.target.value;
|
||||||
i.state.changePasswordForm.new_password = undefined;
|
i.setState(s => ((s.changePasswordForm.new_password = newPass), s));
|
||||||
}
|
|
||||||
i.setState(i.state);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleNewPasswordVerifyChange(i: Settings, event: any) {
|
handleNewPasswordVerifyChange(i: Settings, event: any) {
|
||||||
i.state.changePasswordForm.new_password_verify = event.target.value;
|
const newPassVerify: string | undefined =
|
||||||
if (i.state.changePasswordForm.new_password_verify == "") {
|
event.target.value == "" ? undefined : event.target.value;
|
||||||
i.state.changePasswordForm.new_password_verify = undefined;
|
i.setState(
|
||||||
}
|
s => ((s.changePasswordForm.new_password_verify = newPassVerify), s)
|
||||||
i.setState(i.state);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleOldPasswordChange(i: Settings, event: any) {
|
handleOldPasswordChange(i: Settings, event: any) {
|
||||||
i.state.changePasswordForm.old_password = event.target.value;
|
const oldPass: string | undefined =
|
||||||
if (i.state.changePasswordForm.old_password == "") {
|
event.target.value == "" ? undefined : event.target.value;
|
||||||
i.state.changePasswordForm.old_password = undefined;
|
i.setState(s => ((s.changePasswordForm.old_password = oldPass), s));
|
||||||
}
|
|
||||||
i.setState(i.state);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleSaveSettingsSubmit(i: Settings, event: any) {
|
async handleSaveSettingsSubmit(i: Settings, event: any) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
i.setState({ saveUserSettingsLoading: true });
|
i.setState({ saveRes: { state: "loading" } });
|
||||||
const auth = myAuth();
|
|
||||||
if (auth) {
|
const saveRes = await HttpService.client.saveUserSettings({
|
||||||
const form: SaveUserSettings = { ...i.state.saveUserSettingsForm, auth };
|
...i.state.saveUserSettingsForm,
|
||||||
WebSocketService.Instance.send(wsClient.saveUserSettings(form));
|
auth: myAuthRequired(),
|
||||||
}
|
});
|
||||||
|
if (saveRes.state === "success") {
|
||||||
|
UserService.Instance.login(saveRes.data);
|
||||||
|
location.reload();
|
||||||
|
toast(i18n.t("saved"));
|
||||||
|
window.scrollTo(0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleChangePasswordSubmit(i: Settings, event: any) {
|
i.setState({ saveRes });
|
||||||
|
}
|
||||||
|
|
||||||
|
async handleChangePasswordSubmit(i: Settings, event: any) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
i.setState({ changePasswordLoading: true });
|
const { new_password, new_password_verify, old_password } =
|
||||||
const auth = myAuth();
|
i.state.changePasswordForm;
|
||||||
const pForm = i.state.changePasswordForm;
|
|
||||||
const new_password = pForm.new_password;
|
if (new_password && old_password && new_password_verify) {
|
||||||
const new_password_verify = pForm.new_password_verify;
|
i.setState({ changePasswordRes: { state: "loading" } });
|
||||||
const old_password = pForm.old_password;
|
const changePasswordRes = await HttpService.client.changePassword({
|
||||||
if (auth && new_password && old_password && new_password_verify) {
|
|
||||||
const form: ChangePassword = {
|
|
||||||
new_password,
|
new_password,
|
||||||
new_password_verify,
|
new_password_verify,
|
||||||
old_password,
|
old_password,
|
||||||
auth,
|
auth: myAuthRequired(),
|
||||||
};
|
});
|
||||||
|
if (changePasswordRes.state === "success") {
|
||||||
|
UserService.Instance.login(changePasswordRes.data);
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
toast(i18n.t("password_changed"));
|
||||||
|
}
|
||||||
|
|
||||||
WebSocketService.Instance.send(wsClient.changePassword(form));
|
i.setState({ changePasswordRes });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleDeleteAccountShowConfirmToggle(i: Settings, event: any) {
|
handleDeleteAccountShowConfirmToggle(i: Settings) {
|
||||||
event.preventDefault();
|
|
||||||
i.setState({ deleteAccountShowConfirm: !i.state.deleteAccountShowConfirm });
|
i.setState({ deleteAccountShowConfirm: !i.state.deleteAccountShowConfirm });
|
||||||
}
|
}
|
||||||
|
|
||||||
handleDeleteAccountPasswordChange(i: Settings, event: any) {
|
handleDeleteAccountPasswordChange(i: Settings, event: any) {
|
||||||
i.state.deleteAccountForm.password = event.target.value;
|
i.setState(s => ((s.deleteAccountForm.password = event.target.value), s));
|
||||||
i.setState(i.state);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleDeleteAccount(i: Settings, event: any) {
|
async handleDeleteAccount(i: Settings) {
|
||||||
event.preventDefault();
|
|
||||||
i.setState({ deleteAccountLoading: true });
|
|
||||||
const auth = myAuth();
|
|
||||||
const password = i.state.deleteAccountForm.password;
|
const password = i.state.deleteAccountForm.password;
|
||||||
if (auth && password) {
|
if (password) {
|
||||||
const form: DeleteAccount = {
|
i.setState({ deleteAccountRes: { state: "loading" } });
|
||||||
|
const deleteAccountRes = await HttpService.client.deleteAccount({
|
||||||
password,
|
password,
|
||||||
auth,
|
auth: myAuthRequired(),
|
||||||
};
|
});
|
||||||
WebSocketService.Instance.send(wsClient.deleteAccount(form));
|
if (deleteAccountRes.state === "success") {
|
||||||
|
UserService.Instance.logout();
|
||||||
|
this.context.router.history.replace("/");
|
||||||
|
}
|
||||||
|
|
||||||
|
i.setState({ deleteAccountRes });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1205,44 +1208,19 @@ export class Settings extends Component<any, SettingsState> {
|
||||||
i.ctx.setState({ currentTab: i.tab });
|
i.ctx.setState({ currentTab: i.tab });
|
||||||
}
|
}
|
||||||
|
|
||||||
parseMessage(msg: any) {
|
personBlock(res: RequestState<BlockPersonResponse>) {
|
||||||
const op = wsUserOp(msg);
|
if (res.state === "success") {
|
||||||
console.log(msg);
|
updatePersonBlock(res.data);
|
||||||
if (msg.error) {
|
|
||||||
this.setState({
|
|
||||||
saveUserSettingsLoading: false,
|
|
||||||
changePasswordLoading: false,
|
|
||||||
deleteAccountLoading: false,
|
|
||||||
});
|
|
||||||
toast(i18n.t(msg.error), "danger");
|
|
||||||
return;
|
|
||||||
} else if (op == UserOperation.SaveUserSettings) {
|
|
||||||
this.setState({ saveUserSettingsLoading: false });
|
|
||||||
toast(i18n.t("saved"));
|
|
||||||
window.scrollTo(0, 0);
|
|
||||||
} else if (op == UserOperation.ChangePassword) {
|
|
||||||
const data = wsJsonToRes<LoginResponse>(msg);
|
|
||||||
UserService.Instance.login(data);
|
|
||||||
this.setState({ changePasswordLoading: false });
|
|
||||||
window.scrollTo(0, 0);
|
|
||||||
toast(i18n.t("password_changed"));
|
|
||||||
} else if (op == UserOperation.DeleteAccount) {
|
|
||||||
this.setState({
|
|
||||||
deleteAccountLoading: false,
|
|
||||||
deleteAccountShowConfirm: false,
|
|
||||||
});
|
|
||||||
UserService.Instance.logout();
|
|
||||||
window.location.href = "/";
|
|
||||||
} else if (op == UserOperation.BlockPerson) {
|
|
||||||
const data = wsJsonToRes<BlockPersonResponse>(msg);
|
|
||||||
updatePersonBlock(data);
|
|
||||||
const mui = UserService.Instance.myUserInfo;
|
const mui = UserService.Instance.myUserInfo;
|
||||||
if (mui) {
|
if (mui) {
|
||||||
this.setState({ personBlocks: mui.person_blocks });
|
this.setState({ personBlocks: mui.person_blocks });
|
||||||
}
|
}
|
||||||
} else if (op == UserOperation.BlockCommunity) {
|
}
|
||||||
const data = wsJsonToRes<BlockCommunityResponse>(msg);
|
}
|
||||||
updateCommunityBlock(data);
|
|
||||||
|
communityBlock(res: RequestState<BlockCommunityResponse>) {
|
||||||
|
if (res.state === "success") {
|
||||||
|
updateCommunityBlock(res.data);
|
||||||
const mui = UserService.Instance.myUserInfo;
|
const mui = UserService.Instance.myUserInfo;
|
||||||
if (mui) {
|
if (mui) {
|
||||||
this.setState({ communityBlocks: mui.community_blocks });
|
this.setState({ communityBlocks: mui.community_blocks });
|
||||||
|
|
|
@ -1,56 +1,47 @@
|
||||||
import { Component } from "inferno";
|
import { Component } from "inferno";
|
||||||
import {
|
import { GetSiteResponse, VerifyEmailResponse } from "lemmy-js-client";
|
||||||
GetSiteResponse,
|
|
||||||
UserOperation,
|
|
||||||
VerifyEmail as VerifyEmailForm,
|
|
||||||
wsJsonToRes,
|
|
||||||
wsUserOp,
|
|
||||||
} from "lemmy-js-client";
|
|
||||||
import { Subscription } from "rxjs";
|
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { WebSocketService } from "../../services";
|
import { HttpService, RequestState } from "../../services/HttpService";
|
||||||
import {
|
import { setIsoData, toast } from "../../utils";
|
||||||
isBrowser,
|
|
||||||
setIsoData,
|
|
||||||
toast,
|
|
||||||
wsClient,
|
|
||||||
wsSubscribe,
|
|
||||||
} from "../../utils";
|
|
||||||
import { HtmlTags } from "../common/html-tags";
|
import { HtmlTags } from "../common/html-tags";
|
||||||
|
import { Spinner } from "../common/icon";
|
||||||
|
|
||||||
interface State {
|
interface State {
|
||||||
verifyEmailForm: VerifyEmailForm;
|
verifyRes: RequestState<VerifyEmailResponse>;
|
||||||
siteRes: GetSiteResponse;
|
siteRes: GetSiteResponse;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class VerifyEmail extends Component<any, State> {
|
export class VerifyEmail extends Component<any, State> {
|
||||||
private isoData = setIsoData(this.context);
|
private isoData = setIsoData(this.context);
|
||||||
private subscription?: Subscription;
|
|
||||||
|
|
||||||
state: State = {
|
state: State = {
|
||||||
verifyEmailForm: {
|
verifyRes: { state: "empty" },
|
||||||
token: this.props.match.params.token,
|
|
||||||
},
|
|
||||||
siteRes: this.isoData.site_res,
|
siteRes: this.isoData.site_res,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
|
|
||||||
this.parseMessage = this.parseMessage.bind(this);
|
|
||||||
this.subscription = wsSubscribe(this.parseMessage);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
async verify() {
|
||||||
WebSocketService.Instance.send(
|
this.setState({
|
||||||
wsClient.verifyEmail(this.state.verifyEmailForm)
|
verifyRes: { state: "loading" },
|
||||||
);
|
});
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
verifyRes: await HttpService.client.verifyEmail({
|
||||||
|
token: this.props.match.params.token,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (this.state.verifyRes.state == "success") {
|
||||||
|
toast(i18n.t("email_verified"));
|
||||||
|
this.props.history.push("/login");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
async componentDidMount() {
|
||||||
if (isBrowser()) {
|
await this.verify();
|
||||||
this.subscription?.unsubscribe();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
get documentTitle(): string {
|
get documentTitle(): string {
|
||||||
|
@ -69,26 +60,14 @@ export class VerifyEmail extends Component<any, State> {
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
|
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
|
||||||
<h5>{i18n.t("verify_email")}</h5>
|
<h5>{i18n.t("verify_email")}</h5>
|
||||||
|
{this.state.verifyRes.state == "loading" && (
|
||||||
|
<h5>
|
||||||
|
<Spinner large />
|
||||||
|
</h5>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
parseMessage(msg: any) {
|
|
||||||
const op = wsUserOp(msg);
|
|
||||||
console.log(msg);
|
|
||||||
if (msg.error) {
|
|
||||||
toast(i18n.t(msg.error), "danger");
|
|
||||||
this.setState(this.state);
|
|
||||||
this.props.history.push("/");
|
|
||||||
return;
|
|
||||||
} else if (op == UserOperation.VerifyEmail) {
|
|
||||||
const data = wsJsonToRes(msg);
|
|
||||||
if (data) {
|
|
||||||
toast(i18n.t("email_verified"));
|
|
||||||
this.props.history.push("/login");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,18 +1,19 @@
|
||||||
import { Component } from "inferno";
|
import { Component } from "inferno";
|
||||||
import { RouteComponentProps } from "inferno-router/dist/Route";
|
import { RouteComponentProps } from "inferno-router/dist/Route";
|
||||||
import {
|
import {
|
||||||
|
CreatePost as CreatePostI,
|
||||||
GetCommunity,
|
GetCommunity,
|
||||||
GetCommunityResponse,
|
|
||||||
GetSiteResponse,
|
GetSiteResponse,
|
||||||
PostView,
|
ListCommunitiesResponse,
|
||||||
UserOperation,
|
|
||||||
wsJsonToRes,
|
|
||||||
wsUserOp,
|
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { Subscription } from "rxjs";
|
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { InitialFetchRequest, PostFormParams } from "../../interfaces";
|
import { InitialFetchRequest, PostFormParams } from "../../interfaces";
|
||||||
import { WebSocketService } from "../../services";
|
import { FirstLoadService } from "../../services/FirstLoadService";
|
||||||
|
import {
|
||||||
|
HttpService,
|
||||||
|
RequestState,
|
||||||
|
WrappedLemmyHttp,
|
||||||
|
} from "../../services/HttpService";
|
||||||
import {
|
import {
|
||||||
Choice,
|
Choice,
|
||||||
QueryParams,
|
QueryParams,
|
||||||
|
@ -20,12 +21,8 @@ import {
|
||||||
enableNsfw,
|
enableNsfw,
|
||||||
getIdFromString,
|
getIdFromString,
|
||||||
getQueryParams,
|
getQueryParams,
|
||||||
isBrowser,
|
|
||||||
myAuth,
|
myAuth,
|
||||||
setIsoData,
|
setIsoData,
|
||||||
toast,
|
|
||||||
wsClient,
|
|
||||||
wsSubscribe,
|
|
||||||
} from "../../utils";
|
} from "../../utils";
|
||||||
import { HtmlTags } from "../common/html-tags";
|
import { HtmlTags } from "../common/html-tags";
|
||||||
import { Spinner } from "../common/icon";
|
import { Spinner } from "../common/icon";
|
||||||
|
@ -41,10 +38,16 @@ function getCreatePostQueryParams() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function fetchCommunitiesForOptions(client: WrappedLemmyHttp) {
|
||||||
|
return client.listCommunities({ limit: 30, sort: "TopMonth", type_: "All" });
|
||||||
|
}
|
||||||
|
|
||||||
interface CreatePostState {
|
interface CreatePostState {
|
||||||
siteRes: GetSiteResponse;
|
siteRes: GetSiteResponse;
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
selectedCommunityChoice?: Choice;
|
selectedCommunityChoice?: Choice;
|
||||||
|
initialCommunitiesRes: RequestState<ListCommunitiesResponse>;
|
||||||
|
isIsomorphic: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class CreatePost extends Component<
|
export class CreatePost extends Component<
|
||||||
|
@ -52,10 +55,11 @@ export class CreatePost extends Component<
|
||||||
CreatePostState
|
CreatePostState
|
||||||
> {
|
> {
|
||||||
private isoData = setIsoData(this.context);
|
private isoData = setIsoData(this.context);
|
||||||
private subscription?: Subscription;
|
|
||||||
state: CreatePostState = {
|
state: CreatePostState = {
|
||||||
siteRes: this.isoData.site_res,
|
siteRes: this.isoData.site_res,
|
||||||
loading: true,
|
loading: true,
|
||||||
|
initialCommunitiesRes: { state: "empty" },
|
||||||
|
isIsomorphic: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props: RouteComponentProps<Record<string, never>>, context: any) {
|
constructor(props: RouteComponentProps<Record<string, never>>, context: any) {
|
||||||
|
@ -65,19 +69,14 @@ export class CreatePost extends Component<
|
||||||
this.handleSelectedCommunityChange =
|
this.handleSelectedCommunityChange =
|
||||||
this.handleSelectedCommunityChange.bind(this);
|
this.handleSelectedCommunityChange.bind(this);
|
||||||
|
|
||||||
this.parseMessage = this.parseMessage.bind(this);
|
|
||||||
this.subscription = wsSubscribe(this.parseMessage);
|
|
||||||
|
|
||||||
// Only fetch the data if coming from another route
|
// Only fetch the data if coming from another route
|
||||||
if (this.isoData.path === this.context.router.route.match.url) {
|
if (FirstLoadService.isFirstLoad) {
|
||||||
const communityRes = this.isoData.routeData[0] as
|
const [communityRes, listCommunitiesRes] = this.isoData.routeData;
|
||||||
| GetCommunityResponse
|
|
||||||
| undefined;
|
|
||||||
|
|
||||||
if (communityRes) {
|
if (communityRes?.state === "success") {
|
||||||
const communityChoice: Choice = {
|
const communityChoice: Choice = {
|
||||||
label: communityRes.community_view.community.title,
|
label: communityRes.data.community_view.community.title,
|
||||||
value: communityRes.community_view.community.id.toString(),
|
value: communityRes.data.community_view.community.id.toString(),
|
||||||
};
|
};
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
|
@ -89,31 +88,50 @@ export class CreatePost extends Component<
|
||||||
this.state = {
|
this.state = {
|
||||||
...this.state,
|
...this.state,
|
||||||
loading: false,
|
loading: false,
|
||||||
|
initialCommunitiesRes: listCommunitiesRes,
|
||||||
|
isIsomorphic: true,
|
||||||
};
|
};
|
||||||
} else {
|
|
||||||
this.fetchCommunity();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
fetchCommunity() {
|
async fetchCommunity() {
|
||||||
const { communityId } = getCreatePostQueryParams();
|
const { communityId } = getCreatePostQueryParams();
|
||||||
const auth = myAuth(false);
|
const auth = myAuth();
|
||||||
|
|
||||||
if (communityId) {
|
if (communityId) {
|
||||||
const form: GetCommunity = {
|
const res = await HttpService.client.getCommunity({
|
||||||
id: communityId,
|
id: communityId,
|
||||||
auth,
|
auth,
|
||||||
};
|
});
|
||||||
|
if (res.state === "success") {
|
||||||
WebSocketService.Instance.send(wsClient.getCommunity(form));
|
this.setState({
|
||||||
|
selectedCommunityChoice: {
|
||||||
|
label: res.data.community_view.community.name,
|
||||||
|
value: res.data.community_view.community.id.toString(),
|
||||||
|
},
|
||||||
|
loading: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount(): void {
|
async componentDidMount() {
|
||||||
|
// TODO test this
|
||||||
|
if (!this.state.isIsomorphic) {
|
||||||
const { communityId } = getCreatePostQueryParams();
|
const { communityId } = getCreatePostQueryParams();
|
||||||
|
|
||||||
if (communityId?.toString() !== this.state.selectedCommunityChoice?.value) {
|
const initialCommunitiesRes = await fetchCommunitiesForOptions(
|
||||||
this.fetchCommunity();
|
HttpService.client
|
||||||
|
);
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
initialCommunitiesRes,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (
|
||||||
|
communityId?.toString() !== this.state.selectedCommunityChoice?.value
|
||||||
|
) {
|
||||||
|
await this.fetchCommunity();
|
||||||
} else if (!communityId) {
|
} else if (!communityId) {
|
||||||
this.setState({
|
this.setState({
|
||||||
selectedCommunityChoice: undefined,
|
selectedCommunityChoice: undefined,
|
||||||
|
@ -121,11 +139,6 @@ export class CreatePost extends Component<
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
if (isBrowser()) {
|
|
||||||
this.subscription?.unsubscribe();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
get documentTitle(): string {
|
get documentTitle(): string {
|
||||||
|
@ -164,6 +177,11 @@ export class CreatePost extends Component<
|
||||||
siteLanguages={this.state.siteRes.discussion_languages}
|
siteLanguages={this.state.siteRes.discussion_languages}
|
||||||
selectedCommunityChoice={selectedCommunityChoice}
|
selectedCommunityChoice={selectedCommunityChoice}
|
||||||
onSelectCommunity={this.handleSelectedCommunityChange}
|
onSelectCommunity={this.handleSelectedCommunityChange}
|
||||||
|
initialCommunities={
|
||||||
|
this.state.initialCommunitiesRes.state === "success"
|
||||||
|
? this.state.initialCommunitiesRes.data.communities
|
||||||
|
: []
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -172,7 +190,7 @@ export class CreatePost extends Component<
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
updateUrl({ communityId }: Partial<CreatePostProps>) {
|
async updateUrl({ communityId }: Partial<CreatePostProps>) {
|
||||||
const { communityId: urlCommunityId } = getCreatePostQueryParams();
|
const { communityId: urlCommunityId } = getCreatePostQueryParams();
|
||||||
|
|
||||||
const locationState = this.props.history.location.state as
|
const locationState = this.props.history.location.state as
|
||||||
|
@ -191,7 +209,7 @@ export class CreatePost extends Component<
|
||||||
|
|
||||||
history.replaceState(locationState, "", url);
|
history.replaceState(locationState, "", url);
|
||||||
|
|
||||||
this.fetchCommunity();
|
await this.fetchCommunity();
|
||||||
}
|
}
|
||||||
|
|
||||||
handleSelectedCommunityChange(choice: Choice) {
|
handleSelectedCommunityChange(choice: Choice) {
|
||||||
|
@ -200,16 +218,23 @@ export class CreatePost extends Component<
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
handlePostCreate(post_view: PostView) {
|
async handlePostCreate(form: CreatePostI) {
|
||||||
this.props.history.replace(`/post/${post_view.post.id}`);
|
const res = await HttpService.client.createPost(form);
|
||||||
|
|
||||||
|
if (res.state === "success") {
|
||||||
|
const postId = res.data.post_view.post.id;
|
||||||
|
this.props.history.replace(`/post/${postId}`);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static fetchInitialData({
|
static fetchInitialData({
|
||||||
client,
|
client,
|
||||||
query: { communityId },
|
query: { communityId },
|
||||||
auth,
|
auth,
|
||||||
}: InitialFetchRequest<QueryParams<CreatePostProps>>): Promise<any>[] {
|
}: InitialFetchRequest<QueryParams<CreatePostProps>>): Promise<
|
||||||
const promises: Promise<any>[] = [];
|
RequestState<any>
|
||||||
|
>[] {
|
||||||
|
const promises: Promise<RequestState<any>>[] = [];
|
||||||
|
|
||||||
if (communityId) {
|
if (communityId) {
|
||||||
const form: GetCommunity = {
|
const form: GetCommunity = {
|
||||||
|
@ -219,31 +244,11 @@ export class CreatePost extends Component<
|
||||||
|
|
||||||
promises.push(client.getCommunity(form));
|
promises.push(client.getCommunity(form));
|
||||||
} else {
|
} else {
|
||||||
promises.push(Promise.resolve());
|
promises.push(Promise.resolve({ state: "empty" }));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
promises.push(fetchCommunitiesForOptions(client));
|
||||||
|
|
||||||
return promises;
|
return promises;
|
||||||
}
|
}
|
||||||
|
|
||||||
parseMessage(msg: any) {
|
|
||||||
const op = wsUserOp(msg);
|
|
||||||
console.log(msg);
|
|
||||||
if (msg.error) {
|
|
||||||
toast(i18n.t(msg.error), "danger");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (op === UserOperation.GetCommunity) {
|
|
||||||
const {
|
|
||||||
community_view: {
|
|
||||||
community: { title, id },
|
|
||||||
},
|
|
||||||
} = wsJsonToRes<GetCommunityResponse>(msg);
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
selectedCommunityChoice: { label: title, value: id.toString() },
|
|
||||||
loading: false,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,21 +1,18 @@
|
||||||
import autosize from "autosize";
|
import autosize from "autosize";
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component, InfernoNode, linkEvent } from "inferno";
|
||||||
import {
|
import {
|
||||||
|
CommunityView,
|
||||||
CreatePost,
|
CreatePost,
|
||||||
EditPost,
|
EditPost,
|
||||||
|
GetSiteMetadataResponse,
|
||||||
Language,
|
Language,
|
||||||
PostResponse,
|
|
||||||
PostView,
|
PostView,
|
||||||
Search,
|
|
||||||
SearchResponse,
|
SearchResponse,
|
||||||
UserOperation,
|
|
||||||
wsJsonToRes,
|
|
||||||
wsUserOp,
|
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { Subscription } from "rxjs";
|
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { PostFormParams } from "../../interfaces";
|
import { PostFormParams } from "../../interfaces";
|
||||||
import { UserService, WebSocketService } from "../../services";
|
import { UserService } from "../../services";
|
||||||
|
import { HttpService, RequestState } from "../../services/HttpService";
|
||||||
import {
|
import {
|
||||||
Choice,
|
Choice,
|
||||||
archiveTodayUrl,
|
archiveTodayUrl,
|
||||||
|
@ -24,21 +21,18 @@ import {
|
||||||
debounce,
|
debounce,
|
||||||
fetchCommunities,
|
fetchCommunities,
|
||||||
getIdFromString,
|
getIdFromString,
|
||||||
getSiteMetadata,
|
|
||||||
ghostArchiveUrl,
|
ghostArchiveUrl,
|
||||||
isImage,
|
isImage,
|
||||||
myAuth,
|
myAuth,
|
||||||
|
myAuthRequired,
|
||||||
pictrsDeleteToast,
|
pictrsDeleteToast,
|
||||||
relTags,
|
relTags,
|
||||||
setupTippy,
|
setupTippy,
|
||||||
toast,
|
toast,
|
||||||
trendingFetchLimit,
|
trendingFetchLimit,
|
||||||
uploadImage,
|
|
||||||
validTitle,
|
validTitle,
|
||||||
validURL,
|
validURL,
|
||||||
webArchiveUrl,
|
webArchiveUrl,
|
||||||
wsClient,
|
|
||||||
wsSubscribe,
|
|
||||||
} from "../../utils";
|
} from "../../utils";
|
||||||
import { Icon, Spinner } from "../common/icon";
|
import { Icon, Spinner } from "../common/icon";
|
||||||
import { LanguageSelect } from "../common/language-select";
|
import { LanguageSelect } from "../common/language-select";
|
||||||
|
@ -51,16 +45,18 @@ const MAX_POST_TITLE_LENGTH = 200;
|
||||||
|
|
||||||
interface PostFormProps {
|
interface PostFormProps {
|
||||||
post_view?: PostView; // If a post is given, that means this is an edit
|
post_view?: PostView; // If a post is given, that means this is an edit
|
||||||
|
crossPosts?: PostView[];
|
||||||
allLanguages: Language[];
|
allLanguages: Language[];
|
||||||
siteLanguages: number[];
|
siteLanguages: number[];
|
||||||
params?: PostFormParams;
|
params?: PostFormParams;
|
||||||
onCancel?(): any;
|
onCancel?(): void;
|
||||||
onCreate?(post: PostView): any;
|
onCreate?(form: CreatePost): void;
|
||||||
onEdit?(post: PostView): any;
|
onEdit?(form: EditPost): void;
|
||||||
enableNsfw?: boolean;
|
enableNsfw?: boolean;
|
||||||
enableDownvotes?: boolean;
|
enableDownvotes?: boolean;
|
||||||
selectedCommunityChoice?: Choice;
|
selectedCommunityChoice?: Choice;
|
||||||
onSelectCommunity?: (choice: Choice) => void;
|
onSelectCommunity?: (choice: Choice) => void;
|
||||||
|
initialCommunities?: CommunityView[];
|
||||||
}
|
}
|
||||||
|
|
||||||
interface PostFormState {
|
interface PostFormState {
|
||||||
|
@ -73,25 +69,27 @@ interface PostFormState {
|
||||||
community_id?: number;
|
community_id?: number;
|
||||||
honeypot?: string;
|
honeypot?: string;
|
||||||
};
|
};
|
||||||
suggestedTitle?: string;
|
|
||||||
suggestedPosts?: PostView[];
|
|
||||||
crossPosts?: PostView[];
|
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
|
suggestedPostsRes: RequestState<SearchResponse>;
|
||||||
|
metadataRes: RequestState<GetSiteMetadataResponse>;
|
||||||
imageLoading: boolean;
|
imageLoading: boolean;
|
||||||
communitySearchLoading: boolean;
|
communitySearchLoading: boolean;
|
||||||
communitySearchOptions: Choice[];
|
communitySearchOptions: Choice[];
|
||||||
previewMode: boolean;
|
previewMode: boolean;
|
||||||
|
submitted: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class PostForm extends Component<PostFormProps, PostFormState> {
|
export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
private subscription?: Subscription;
|
|
||||||
state: PostFormState = {
|
state: PostFormState = {
|
||||||
|
suggestedPostsRes: { state: "empty" },
|
||||||
|
metadataRes: { state: "empty" },
|
||||||
form: {},
|
form: {},
|
||||||
loading: false,
|
loading: false,
|
||||||
imageLoading: false,
|
imageLoading: false,
|
||||||
communitySearchLoading: false,
|
communitySearchLoading: false,
|
||||||
previewMode: false,
|
previewMode: false,
|
||||||
communitySearchOptions: [],
|
communitySearchOptions: [],
|
||||||
|
submitted: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props: PostFormProps, context: any) {
|
constructor(props: PostFormProps, context: any) {
|
||||||
|
@ -102,39 +100,52 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
this.handleLanguageChange = this.handleLanguageChange.bind(this);
|
this.handleLanguageChange = this.handleLanguageChange.bind(this);
|
||||||
this.handleCommunitySelect = this.handleCommunitySelect.bind(this);
|
this.handleCommunitySelect = this.handleCommunitySelect.bind(this);
|
||||||
|
|
||||||
this.parseMessage = this.parseMessage.bind(this);
|
const { post_view, selectedCommunityChoice, params } = this.props;
|
||||||
this.subscription = wsSubscribe(this.parseMessage);
|
|
||||||
|
|
||||||
// Means its an edit
|
// Means its an edit
|
||||||
const pv = this.props.post_view;
|
if (post_view) {
|
||||||
if (pv) {
|
|
||||||
this.state = {
|
this.state = {
|
||||||
...this.state,
|
...this.state,
|
||||||
form: {
|
form: {
|
||||||
body: pv.post.body,
|
body: post_view.post.body,
|
||||||
name: pv.post.name,
|
name: post_view.post.name,
|
||||||
community_id: pv.community.id,
|
community_id: post_view.community.id,
|
||||||
url: pv.post.url,
|
url: post_view.post.url,
|
||||||
nsfw: pv.post.nsfw,
|
nsfw: post_view.post.nsfw,
|
||||||
language_id: pv.post.language_id,
|
language_id: post_view.post.language_id,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
} else if (selectedCommunityChoice) {
|
||||||
|
|
||||||
const selectedCommunityChoice = this.props.selectedCommunityChoice;
|
|
||||||
|
|
||||||
if (selectedCommunityChoice) {
|
|
||||||
this.state = {
|
this.state = {
|
||||||
...this.state,
|
...this.state,
|
||||||
form: {
|
form: {
|
||||||
...this.state.form,
|
...this.state.form,
|
||||||
community_id: getIdFromString(selectedCommunityChoice.value),
|
community_id: getIdFromString(selectedCommunityChoice.value),
|
||||||
},
|
},
|
||||||
communitySearchOptions: [selectedCommunityChoice],
|
communitySearchOptions: [selectedCommunityChoice]
|
||||||
|
.concat(
|
||||||
|
this.props.initialCommunities?.map(
|
||||||
|
({ community: { id, title } }) => ({
|
||||||
|
label: title,
|
||||||
|
value: id.toString(),
|
||||||
|
})
|
||||||
|
) ?? []
|
||||||
|
)
|
||||||
|
.filter(option => option.value !== selectedCommunityChoice.value),
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
this.state = {
|
||||||
|
...this.state,
|
||||||
|
communitySearchOptions:
|
||||||
|
this.props.initialCommunities?.map(
|
||||||
|
({ community: { id, title } }) => ({
|
||||||
|
label: title,
|
||||||
|
value: id.toString(),
|
||||||
|
})
|
||||||
|
) ?? [],
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
const params = this.props.params;
|
|
||||||
if (params) {
|
if (params) {
|
||||||
this.state = {
|
this.state = {
|
||||||
...this.state,
|
...this.state,
|
||||||
|
@ -155,54 +166,42 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate() {
|
componentWillReceiveProps(
|
||||||
if (
|
nextProps: Readonly<{ children?: InfernoNode } & PostFormProps>
|
||||||
!this.state.loading &&
|
): void {
|
||||||
(this.state.form.name || this.state.form.url || this.state.form.body)
|
if (this.props != nextProps) {
|
||||||
) {
|
this.setState(
|
||||||
window.onbeforeunload = () => true;
|
s => (
|
||||||
} else {
|
(s.form.community_id = getIdFromString(
|
||||||
window.onbeforeunload = null;
|
nextProps.selectedCommunityChoice?.value
|
||||||
|
)),
|
||||||
|
s
|
||||||
|
)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
this.subscription?.unsubscribe();
|
|
||||||
/* this.choices && this.choices.destroy(); */
|
|
||||||
window.onbeforeunload = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
static getDerivedStateFromProps(
|
|
||||||
{ selectedCommunityChoice }: PostFormProps,
|
|
||||||
{ form, ...restState }: PostFormState
|
|
||||||
) {
|
|
||||||
return {
|
|
||||||
...restState,
|
|
||||||
form: {
|
|
||||||
...form,
|
|
||||||
community_id: getIdFromString(selectedCommunityChoice?.value),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const firstLang = this.state.form.language_id;
|
const firstLang = this.state.form.language_id;
|
||||||
const selectedLangs = firstLang ? Array.of(firstLang) : undefined;
|
const selectedLangs = firstLang ? Array.of(firstLang) : undefined;
|
||||||
|
|
||||||
const url = this.state.form.url;
|
const url = this.state.form.url;
|
||||||
|
|
||||||
|
// TODO
|
||||||
|
// const promptCheck =
|
||||||
|
// !!this.state.form.name || !!this.state.form.url || !!this.state.form.body;
|
||||||
|
// <Prompt when={promptCheck} message={i18n.t("block_leaving")} />
|
||||||
return (
|
return (
|
||||||
<div>
|
<form onSubmit={linkEvent(this, this.handlePostSubmit)}>
|
||||||
<NavigationPrompt
|
<NavigationPrompt
|
||||||
when={
|
when={
|
||||||
!this.state.loading &&
|
|
||||||
!!(
|
!!(
|
||||||
this.state.form.name ||
|
this.state.form.name ||
|
||||||
this.state.form.url ||
|
this.state.form.url ||
|
||||||
this.state.form.body
|
this.state.form.body
|
||||||
)
|
) && !this.state.submitted
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<form onSubmit={linkEvent(this, this.handlePostSubmit)}>
|
|
||||||
<div className="form-group row">
|
<div className="form-group row">
|
||||||
<label className="col-sm-2 col-form-label" htmlFor="post-url">
|
<label className="col-sm-2 col-form-label" htmlFor="post-url">
|
||||||
{i18n.t("url")}
|
{i18n.t("url")}
|
||||||
|
@ -216,16 +215,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
onInput={linkEvent(this, this.handlePostUrlChange)}
|
onInput={linkEvent(this, this.handlePostUrlChange)}
|
||||||
onPaste={linkEvent(this, this.handleImageUploadPaste)}
|
onPaste={linkEvent(this, this.handleImageUploadPaste)}
|
||||||
/>
|
/>
|
||||||
{this.state.suggestedTitle && (
|
{this.renderSuggestedTitleCopy()}
|
||||||
<div
|
|
||||||
className="mt-1 text-muted small font-weight-bold pointer"
|
|
||||||
role="button"
|
|
||||||
onClick={linkEvent(this, this.copySuggestedTitle)}
|
|
||||||
>
|
|
||||||
{i18n.t("copy_suggested_title", { title: "" })}{" "}
|
|
||||||
{this.state.suggestedTitle}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<form>
|
<form>
|
||||||
<label
|
<label
|
||||||
htmlFor="file-upload"
|
htmlFor="file-upload"
|
||||||
|
@ -279,18 +269,36 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
{url && isImage(url) && (
|
{url && isImage(url) && (
|
||||||
<img src={url} className="img-fluid" alt="" />
|
<img src={url} className="img-fluid" alt="" />
|
||||||
)}
|
)}
|
||||||
{this.state.crossPosts && this.state.crossPosts.length > 0 && (
|
{this.props.crossPosts && this.props.crossPosts.length > 0 && (
|
||||||
<>
|
<>
|
||||||
<div className="my-1 text-muted small font-weight-bold">
|
<div className="my-1 text-muted small font-weight-bold">
|
||||||
{i18n.t("cross_posts")}
|
{i18n.t("cross_posts")}
|
||||||
</div>
|
</div>
|
||||||
<PostListings
|
<PostListings
|
||||||
showCommunity
|
showCommunity
|
||||||
posts={this.state.crossPosts}
|
posts={this.props.crossPosts}
|
||||||
enableDownvotes={this.props.enableDownvotes}
|
enableDownvotes={this.props.enableDownvotes}
|
||||||
enableNsfw={this.props.enableNsfw}
|
enableNsfw={this.props.enableNsfw}
|
||||||
allLanguages={this.props.allLanguages}
|
allLanguages={this.props.allLanguages}
|
||||||
siteLanguages={this.props.siteLanguages}
|
siteLanguages={this.props.siteLanguages}
|
||||||
|
viewOnly
|
||||||
|
// All of these are unused, since its view only
|
||||||
|
onPostEdit={() => {}}
|
||||||
|
onPostVote={() => {}}
|
||||||
|
onPostReport={() => {}}
|
||||||
|
onBlockPerson={() => {}}
|
||||||
|
onLockPost={() => {}}
|
||||||
|
onDeletePost={() => {}}
|
||||||
|
onRemovePost={() => {}}
|
||||||
|
onSavePost={() => {}}
|
||||||
|
onFeaturePost={() => {}}
|
||||||
|
onPurgePerson={() => {}}
|
||||||
|
onPurgePost={() => {}}
|
||||||
|
onBanPersonFromCommunity={() => {}}
|
||||||
|
onBanPerson={() => {}}
|
||||||
|
onAddModToCommunity={() => {}}
|
||||||
|
onAddAdmin={() => {}}
|
||||||
|
onTransferCommunity={() => {}}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
@ -318,22 +326,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
{i18n.t("invalid_post_title")}
|
{i18n.t("invalid_post_title")}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{this.state.suggestedPosts &&
|
{this.renderSuggestedPosts()}
|
||||||
this.state.suggestedPosts.length > 0 && (
|
|
||||||
<>
|
|
||||||
<div className="my-1 text-muted small font-weight-bold">
|
|
||||||
{i18n.t("related_posts")}
|
|
||||||
</div>
|
|
||||||
<PostListings
|
|
||||||
showCommunity
|
|
||||||
posts={this.state.suggestedPosts}
|
|
||||||
enableDownvotes={this.props.enableDownvotes}
|
|
||||||
enableNsfw={this.props.enableNsfw}
|
|
||||||
allLanguages={this.props.allLanguages}
|
|
||||||
siteLanguages={this.props.siteLanguages}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -345,15 +338,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
onContentChange={this.handlePostBodyChange}
|
onContentChange={this.handlePostBodyChange}
|
||||||
allLanguages={this.props.allLanguages}
|
allLanguages={this.props.allLanguages}
|
||||||
siteLanguages={this.props.siteLanguages}
|
siteLanguages={this.props.siteLanguages}
|
||||||
|
hideNavigationWarnings
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{!this.props.post_view && (
|
{!this.props.post_view && (
|
||||||
<div className="form-group row">
|
<div className="form-group row">
|
||||||
<label
|
<label className="col-sm-2 col-form-label" htmlFor="post-community">
|
||||||
className="col-sm-2 col-form-label"
|
|
||||||
htmlFor="post-community"
|
|
||||||
>
|
|
||||||
{i18n.t("community")}
|
{i18n.t("community")}
|
||||||
</label>
|
</label>
|
||||||
<div className="col-sm-10">
|
<div className="col-sm-10">
|
||||||
|
@ -436,26 +427,95 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
renderSuggestedTitleCopy() {
|
||||||
|
switch (this.state.metadataRes.state) {
|
||||||
|
case "loading":
|
||||||
|
return <Spinner />;
|
||||||
|
case "success": {
|
||||||
|
const suggestedTitle = this.state.metadataRes.data.metadata.title;
|
||||||
|
|
||||||
|
return (
|
||||||
|
suggestedTitle && (
|
||||||
|
<div
|
||||||
|
className="mt-1 text-muted small font-weight-bold pointer"
|
||||||
|
role="button"
|
||||||
|
onClick={linkEvent(
|
||||||
|
{ i: this, suggestedTitle },
|
||||||
|
this.copySuggestedTitle
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{i18n.t("copy_suggested_title", { title: "" })} {suggestedTitle}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
renderSuggestedPosts() {
|
||||||
|
switch (this.state.suggestedPostsRes.state) {
|
||||||
|
case "loading":
|
||||||
|
return <Spinner />;
|
||||||
|
case "success": {
|
||||||
|
const suggestedPosts = this.state.suggestedPostsRes.data.posts;
|
||||||
|
|
||||||
|
return (
|
||||||
|
suggestedPosts &&
|
||||||
|
suggestedPosts.length > 0 && (
|
||||||
|
<>
|
||||||
|
<div className="my-1 text-muted small font-weight-bold">
|
||||||
|
{i18n.t("related_posts")}
|
||||||
|
</div>
|
||||||
|
<PostListings
|
||||||
|
showCommunity
|
||||||
|
posts={suggestedPosts}
|
||||||
|
enableDownvotes={this.props.enableDownvotes}
|
||||||
|
enableNsfw={this.props.enableNsfw}
|
||||||
|
allLanguages={this.props.allLanguages}
|
||||||
|
siteLanguages={this.props.siteLanguages}
|
||||||
|
viewOnly
|
||||||
|
// All of these are unused, since its view only
|
||||||
|
onPostEdit={() => {}}
|
||||||
|
onPostVote={() => {}}
|
||||||
|
onPostReport={() => {}}
|
||||||
|
onBlockPerson={() => {}}
|
||||||
|
onLockPost={() => {}}
|
||||||
|
onDeletePost={() => {}}
|
||||||
|
onRemovePost={() => {}}
|
||||||
|
onSavePost={() => {}}
|
||||||
|
onFeaturePost={() => {}}
|
||||||
|
onPurgePerson={() => {}}
|
||||||
|
onPurgePost={() => {}}
|
||||||
|
onBanPersonFromCommunity={() => {}}
|
||||||
|
onBanPerson={() => {}}
|
||||||
|
onAddModToCommunity={() => {}}
|
||||||
|
onAddAdmin={() => {}}
|
||||||
|
onTransferCommunity={() => {}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
handlePostSubmit(i: PostForm, event: any) {
|
handlePostSubmit(i: PostForm, event: any) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
i.setState({ loading: true });
|
|
||||||
|
|
||||||
// Coerce empty url string to undefined
|
// Coerce empty url string to undefined
|
||||||
if ((i.state.form.url ?? "blank") === "") {
|
if ((i.state.form.url ?? "") === "") {
|
||||||
i.setState(s => ((s.form.url = undefined), s));
|
i.setState(s => ((s.form.url = undefined), s));
|
||||||
}
|
}
|
||||||
|
i.setState({ loading: true, submitted: true });
|
||||||
|
const auth = myAuthRequired();
|
||||||
|
|
||||||
const pForm = i.state.form;
|
const pForm = i.state.form;
|
||||||
const pv = i.props.post_view;
|
const pv = i.props.post_view;
|
||||||
const auth = myAuth();
|
|
||||||
if (auth) {
|
|
||||||
if (pv) {
|
if (pv) {
|
||||||
const form: EditPost = {
|
i.props.onEdit?.({
|
||||||
name: pForm.name,
|
name: pForm.name,
|
||||||
url: pForm.url,
|
url: pForm.url,
|
||||||
body: pForm.body,
|
body: pForm.body,
|
||||||
|
@ -463,11 +523,9 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
post_id: pv.post.id,
|
post_id: pv.post.id,
|
||||||
language_id: pForm.language_id,
|
language_id: pForm.language_id,
|
||||||
auth,
|
auth,
|
||||||
};
|
});
|
||||||
WebSocketService.Instance.send(wsClient.editPost(form));
|
} else if (pForm.name && pForm.community_id) {
|
||||||
} else {
|
i.props.onCreate?.({
|
||||||
if (pForm.name && pForm.community_id) {
|
|
||||||
const form: CreatePost = {
|
|
||||||
name: pForm.name,
|
name: pForm.name,
|
||||||
community_id: pForm.community_id,
|
community_id: pForm.community_id,
|
||||||
url: pForm.url,
|
url: pForm.url,
|
||||||
|
@ -476,20 +534,17 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
language_id: pForm.language_id,
|
language_id: pForm.language_id,
|
||||||
honeypot: pForm.honeypot,
|
honeypot: pForm.honeypot,
|
||||||
auth,
|
auth,
|
||||||
};
|
});
|
||||||
WebSocketService.Instance.send(wsClient.createPost(form));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
copySuggestedTitle(i: PostForm) {
|
copySuggestedTitle(d: { i: PostForm; suggestedTitle?: string }) {
|
||||||
const sTitle = i.state.suggestedTitle;
|
const sTitle = d.suggestedTitle;
|
||||||
if (sTitle) {
|
if (sTitle) {
|
||||||
i.setState(
|
d.i.setState(
|
||||||
s => ((s.form.name = sTitle?.substring(0, MAX_POST_TITLE_LENGTH)), s)
|
s => ((s.form.name = sTitle?.substring(0, MAX_POST_TITLE_LENGTH)), s)
|
||||||
);
|
);
|
||||||
i.setState({ suggestedTitle: undefined });
|
d.i.setState({ suggestedPostsRes: { state: "empty" } });
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const textarea: any = document.getElementById("post-title");
|
const textarea: any = document.getElementById("post-title");
|
||||||
autosize.update(textarea);
|
autosize.update(textarea);
|
||||||
|
@ -502,27 +557,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
i.fetchPageTitle();
|
i.fetchPageTitle();
|
||||||
}
|
}
|
||||||
|
|
||||||
fetchPageTitle() {
|
async fetchPageTitle() {
|
||||||
const url = this.state.form.url;
|
const url = this.state.form.url;
|
||||||
if (url && validURL(url)) {
|
if (url && validURL(url)) {
|
||||||
const form: Search = {
|
this.setState({ metadataRes: { state: "loading" } });
|
||||||
q: url,
|
this.setState({
|
||||||
type_: "Url",
|
metadataRes: await HttpService.client.getSiteMetadata({ url }),
|
||||||
sort: "TopAll",
|
|
||||||
listing_type: "All",
|
|
||||||
page: 1,
|
|
||||||
limit: trendingFetchLimit,
|
|
||||||
auth: myAuth(false),
|
|
||||||
};
|
|
||||||
|
|
||||||
WebSocketService.Instance.send(wsClient.search(form));
|
|
||||||
|
|
||||||
// Fetch the page title
|
|
||||||
getSiteMetadata(url).then(d => {
|
|
||||||
this.setState({ suggestedTitle: d.metadata.title });
|
|
||||||
});
|
});
|
||||||
} else {
|
|
||||||
this.setState({ suggestedTitle: undefined, crossPosts: undefined });
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -531,10 +572,12 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
i.fetchSimilarPosts();
|
i.fetchSimilarPosts();
|
||||||
}
|
}
|
||||||
|
|
||||||
fetchSimilarPosts() {
|
async fetchSimilarPosts() {
|
||||||
const q = this.state.form.name;
|
const q = this.state.form.name;
|
||||||
if (q && q !== "") {
|
if (q && q !== "") {
|
||||||
const form: Search = {
|
this.setState({ suggestedPostsRes: { state: "loading" } });
|
||||||
|
this.setState({
|
||||||
|
suggestedPostsRes: await HttpService.client.search({
|
||||||
q,
|
q,
|
||||||
type_: "Posts",
|
type_: "Posts",
|
||||||
sort: "TopAll",
|
sort: "TopAll",
|
||||||
|
@ -542,12 +585,9 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
community_id: this.state.form.community_id,
|
community_id: this.state.form.community_id,
|
||||||
page: 1,
|
page: 1,
|
||||||
limit: trendingFetchLimit,
|
limit: trendingFetchLimit,
|
||||||
auth: myAuth(false),
|
auth: myAuth(),
|
||||||
};
|
}),
|
||||||
|
});
|
||||||
WebSocketService.Instance.send(wsClient.search(form));
|
|
||||||
} else {
|
|
||||||
this.setState({ suggestedPosts: undefined });
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -598,23 +638,21 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
|
|
||||||
i.setState({ imageLoading: true });
|
i.setState({ imageLoading: true });
|
||||||
|
|
||||||
uploadImage(file)
|
HttpService.client.uploadImage({ image: file }).then(res => {
|
||||||
.then(res => {
|
|
||||||
console.log("pictrs upload:");
|
console.log("pictrs upload:");
|
||||||
console.log(res);
|
console.log(res);
|
||||||
if (res.msg === "ok") {
|
if (res.state === "success") {
|
||||||
i.state.form.url = res.url;
|
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 });
|
||||||
pictrsDeleteToast(file.name, res.delete_url as string);
|
|
||||||
} else {
|
} else {
|
||||||
i.setState({ imageLoading: false });
|
|
||||||
toast(JSON.stringify(res), "danger");
|
toast(JSON.stringify(res), "danger");
|
||||||
}
|
}
|
||||||
})
|
} else if (res.state === "failed") {
|
||||||
.catch(error => {
|
console.error(res.msg);
|
||||||
i.setState({ imageLoading: false });
|
toast(res.msg, "danger");
|
||||||
console.error(error);
|
}
|
||||||
toast(error, "danger");
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -629,9 +667,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (text.length > 0) {
|
if (text.length > 0) {
|
||||||
newOptions.push(
|
newOptions.push(...(await fetchCommunities(text)).map(communityToChoice));
|
||||||
...(await fetchCommunities(text)).communities.map(communityToChoice)
|
|
||||||
);
|
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
communitySearchOptions: newOptions,
|
communitySearchOptions: newOptions,
|
||||||
|
@ -648,35 +684,4 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
||||||
this.props.onSelectCommunity(choice);
|
this.props.onSelectCommunity(choice);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
parseMessage(msg: any) {
|
|
||||||
const mui = UserService.Instance.myUserInfo;
|
|
||||||
const op = wsUserOp(msg);
|
|
||||||
console.log(msg);
|
|
||||||
if (msg.error) {
|
|
||||||
// Errors handled by top level pages
|
|
||||||
// toast(i18n.t(msg.error), "danger");
|
|
||||||
this.setState({ loading: false });
|
|
||||||
return;
|
|
||||||
} else if (op == UserOperation.CreatePost) {
|
|
||||||
const data = wsJsonToRes<PostResponse>(msg);
|
|
||||||
if (data.post_view.creator.id == mui?.local_user_view.person.id) {
|
|
||||||
this.props.onCreate?.(data.post_view);
|
|
||||||
}
|
|
||||||
} else if (op == UserOperation.EditPost) {
|
|
||||||
const data = wsJsonToRes<PostResponse>(msg);
|
|
||||||
if (data.post_view.creator.id == mui?.local_user_view.person.id) {
|
|
||||||
this.setState({ loading: false });
|
|
||||||
this.props.onEdit?.(data.post_view);
|
|
||||||
}
|
|
||||||
} else if (op == UserOperation.Search) {
|
|
||||||
const data = wsJsonToRes<SearchResponse>(msg);
|
|
||||||
|
|
||||||
if (data.type_ == "Posts") {
|
|
||||||
this.setState({ suggestedPosts: data.posts });
|
|
||||||
} else if (data.type_ == "Url") {
|
|
||||||
this.setState({ crossPosts: data.posts });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because it is too large
Load diff
|
@ -1,7 +1,26 @@
|
||||||
import { Component } from "inferno";
|
import { Component } from "inferno";
|
||||||
import { T } from "inferno-i18next-dess";
|
import { T } from "inferno-i18next-dess";
|
||||||
import { Link } from "inferno-router";
|
import { Link } from "inferno-router";
|
||||||
import { Language, PostView } from "lemmy-js-client";
|
import {
|
||||||
|
AddAdmin,
|
||||||
|
AddModToCommunity,
|
||||||
|
BanFromCommunity,
|
||||||
|
BanPerson,
|
||||||
|
BlockPerson,
|
||||||
|
CreatePostLike,
|
||||||
|
CreatePostReport,
|
||||||
|
DeletePost,
|
||||||
|
EditPost,
|
||||||
|
FeaturePost,
|
||||||
|
Language,
|
||||||
|
LockPost,
|
||||||
|
PostView,
|
||||||
|
PurgePerson,
|
||||||
|
PurgePost,
|
||||||
|
RemovePost,
|
||||||
|
SavePost,
|
||||||
|
TransferCommunity,
|
||||||
|
} from "lemmy-js-client";
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { PostListing } from "./post-listing";
|
import { PostListing } from "./post-listing";
|
||||||
|
|
||||||
|
@ -13,6 +32,23 @@ interface PostListingsProps {
|
||||||
removeDuplicates?: boolean;
|
removeDuplicates?: boolean;
|
||||||
enableDownvotes?: boolean;
|
enableDownvotes?: boolean;
|
||||||
enableNsfw?: boolean;
|
enableNsfw?: boolean;
|
||||||
|
viewOnly?: boolean;
|
||||||
|
onPostEdit(form: EditPost): void;
|
||||||
|
onPostVote(form: CreatePostLike): void;
|
||||||
|
onPostReport(form: CreatePostReport): void;
|
||||||
|
onBlockPerson(form: BlockPerson): void;
|
||||||
|
onLockPost(form: LockPost): void;
|
||||||
|
onDeletePost(form: DeletePost): void;
|
||||||
|
onRemovePost(form: RemovePost): void;
|
||||||
|
onSavePost(form: SavePost): void;
|
||||||
|
onFeaturePost(form: FeaturePost): void;
|
||||||
|
onPurgePerson(form: PurgePerson): void;
|
||||||
|
onPurgePost(form: PurgePost): void;
|
||||||
|
onBanPersonFromCommunity(form: BanFromCommunity): void;
|
||||||
|
onBanPerson(form: BanPerson): void;
|
||||||
|
onAddModToCommunity(form: AddModToCommunity): void;
|
||||||
|
onAddAdmin(form: AddAdmin): void;
|
||||||
|
onTransferCommunity(form: TransferCommunity): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class PostListings extends Component<PostListingsProps, any> {
|
export class PostListings extends Component<PostListingsProps, any> {
|
||||||
|
@ -36,12 +72,29 @@ export class PostListings extends Component<PostListingsProps, any> {
|
||||||
<>
|
<>
|
||||||
<PostListing
|
<PostListing
|
||||||
post_view={post_view}
|
post_view={post_view}
|
||||||
duplicates={this.duplicatesMap.get(post_view.post.id)}
|
crossPosts={this.duplicatesMap.get(post_view.post.id)}
|
||||||
showCommunity={this.props.showCommunity}
|
showCommunity={this.props.showCommunity}
|
||||||
enableDownvotes={this.props.enableDownvotes}
|
enableDownvotes={this.props.enableDownvotes}
|
||||||
enableNsfw={this.props.enableNsfw}
|
enableNsfw={this.props.enableNsfw}
|
||||||
|
viewOnly={this.props.viewOnly}
|
||||||
allLanguages={this.props.allLanguages}
|
allLanguages={this.props.allLanguages}
|
||||||
siteLanguages={this.props.siteLanguages}
|
siteLanguages={this.props.siteLanguages}
|
||||||
|
onPostEdit={this.props.onPostEdit}
|
||||||
|
onPostVote={this.props.onPostVote}
|
||||||
|
onPostReport={this.props.onPostReport}
|
||||||
|
onBlockPerson={this.props.onBlockPerson}
|
||||||
|
onLockPost={this.props.onLockPost}
|
||||||
|
onDeletePost={this.props.onDeletePost}
|
||||||
|
onRemovePost={this.props.onRemovePost}
|
||||||
|
onSavePost={this.props.onSavePost}
|
||||||
|
onFeaturePost={this.props.onFeaturePost}
|
||||||
|
onPurgePerson={this.props.onPurgePerson}
|
||||||
|
onPurgePost={this.props.onPurgePost}
|
||||||
|
onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
|
||||||
|
onBanPerson={this.props.onBanPerson}
|
||||||
|
onAddModToCommunity={this.props.onAddModToCommunity}
|
||||||
|
onAddAdmin={this.props.onAddAdmin}
|
||||||
|
onTransferCommunity={this.props.onTransferCommunity}
|
||||||
/>
|
/>
|
||||||
<hr className="my-3" />
|
<hr className="my-3" />
|
||||||
</>
|
</>
|
||||||
|
@ -62,7 +115,7 @@ export class PostListings extends Component<PostListingsProps, any> {
|
||||||
|
|
||||||
removeDuplicates(): PostView[] {
|
removeDuplicates(): PostView[] {
|
||||||
// Must use a spread to clone the props, because splice will fail below otherwise.
|
// Must use a spread to clone the props, because splice will fail below otherwise.
|
||||||
const posts = [...this.props.posts];
|
const posts = [...this.props.posts].filter(empty => empty);
|
||||||
|
|
||||||
// A map from post url to list of posts (dupes)
|
// A map from post url to list of posts (dupes)
|
||||||
const urlMap = new Map<string, PostView[]>();
|
const urlMap = new Map<string, PostView[]>();
|
||||||
|
|
|
@ -1,22 +1,38 @@
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component, InfernoNode, linkEvent } from "inferno";
|
||||||
import { T } from "inferno-i18next-dess";
|
import { T } from "inferno-i18next-dess";
|
||||||
import { PostReportView, PostView, ResolvePostReport } from "lemmy-js-client";
|
import { PostReportView, PostView, ResolvePostReport } from "lemmy-js-client";
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { WebSocketService } from "../../services";
|
import { myAuthRequired } from "../../utils";
|
||||||
import { myAuth, wsClient } from "../../utils";
|
import { Icon, Spinner } from "../common/icon";
|
||||||
import { Icon } from "../common/icon";
|
|
||||||
import { PersonListing } from "../person/person-listing";
|
import { PersonListing } from "../person/person-listing";
|
||||||
import { PostListing } from "./post-listing";
|
import { PostListing } from "./post-listing";
|
||||||
|
|
||||||
interface PostReportProps {
|
interface PostReportProps {
|
||||||
report: PostReportView;
|
report: PostReportView;
|
||||||
|
onResolveReport(form: ResolvePostReport): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class PostReport extends Component<PostReportProps, any> {
|
interface PostReportState {
|
||||||
|
loading: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class PostReport extends Component<PostReportProps, PostReportState> {
|
||||||
|
state: PostReportState = {
|
||||||
|
loading: false,
|
||||||
|
};
|
||||||
|
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
componentWillReceiveProps(
|
||||||
|
nextProps: Readonly<{ children?: InfernoNode } & PostReportProps>
|
||||||
|
): void {
|
||||||
|
if (this.props != nextProps) {
|
||||||
|
this.setState({ loading: false });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const r = this.props.report;
|
const r = this.props.report;
|
||||||
const resolver = r.resolver;
|
const resolver = r.resolver;
|
||||||
|
@ -54,6 +70,23 @@ export class PostReport extends Component<PostReportProps, any> {
|
||||||
allLanguages={[]}
|
allLanguages={[]}
|
||||||
siteLanguages={[]}
|
siteLanguages={[]}
|
||||||
hideImage
|
hideImage
|
||||||
|
// All of these are unused, since its view only
|
||||||
|
onPostEdit={() => {}}
|
||||||
|
onPostVote={() => {}}
|
||||||
|
onPostReport={() => {}}
|
||||||
|
onBlockPerson={() => {}}
|
||||||
|
onLockPost={() => {}}
|
||||||
|
onDeletePost={() => {}}
|
||||||
|
onRemovePost={() => {}}
|
||||||
|
onSavePost={() => {}}
|
||||||
|
onFeaturePost={() => {}}
|
||||||
|
onPurgePerson={() => {}}
|
||||||
|
onPurgePost={() => {}}
|
||||||
|
onBanPersonFromCommunity={() => {}}
|
||||||
|
onBanPerson={() => {}}
|
||||||
|
onAddModToCommunity={() => {}}
|
||||||
|
onAddAdmin={() => {}}
|
||||||
|
onTransferCommunity={() => {}}
|
||||||
/>
|
/>
|
||||||
<div>
|
<div>
|
||||||
{i18n.t("reporter")}: <PersonListing person={r.creator} />
|
{i18n.t("reporter")}: <PersonListing person={r.creator} />
|
||||||
|
@ -82,26 +115,27 @@ export class PostReport extends Component<PostReportProps, any> {
|
||||||
data-tippy-content={tippyContent}
|
data-tippy-content={tippyContent}
|
||||||
aria-label={tippyContent}
|
aria-label={tippyContent}
|
||||||
>
|
>
|
||||||
|
{this.state.loading ? (
|
||||||
|
<Spinner />
|
||||||
|
) : (
|
||||||
<Icon
|
<Icon
|
||||||
icon="check"
|
icon="check"
|
||||||
classes={`icon-inline ${
|
classes={`icon-inline ${
|
||||||
r.post_report.resolved ? "text-success" : "text-danger"
|
r.post_report.resolved ? "text-success" : "text-danger"
|
||||||
}`}
|
}`}
|
||||||
/>
|
/>
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleResolveReport(i: PostReport) {
|
handleResolveReport(i: PostReport) {
|
||||||
const auth = myAuth();
|
i.setState({ loading: true });
|
||||||
if (auth) {
|
i.props.onResolveReport({
|
||||||
const form: ResolvePostReport = {
|
|
||||||
report_id: i.props.report.post_report.id,
|
report_id: i.props.report.post_report.id,
|
||||||
resolved: !i.props.report.post_report.resolved,
|
resolved: !i.props.report.post_report.resolved,
|
||||||
auth,
|
auth: myAuthRequired(),
|
||||||
};
|
});
|
||||||
WebSocketService.Instance.send(wsClient.resolvePostReport(form));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because it is too large
Load diff
|
@ -1,24 +1,19 @@
|
||||||
import { Component } from "inferno";
|
import { Component } from "inferno";
|
||||||
import {
|
import {
|
||||||
|
CreatePrivateMessage as CreatePrivateMessageI,
|
||||||
GetPersonDetails,
|
GetPersonDetails,
|
||||||
GetPersonDetailsResponse,
|
GetPersonDetailsResponse,
|
||||||
GetSiteResponse,
|
GetSiteResponse,
|
||||||
UserOperation,
|
|
||||||
wsJsonToRes,
|
|
||||||
wsUserOp,
|
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { Subscription } from "rxjs";
|
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { InitialFetchRequest } from "../../interfaces";
|
import { InitialFetchRequest } from "../../interfaces";
|
||||||
import { WebSocketService } from "../../services";
|
import { FirstLoadService } from "../../services/FirstLoadService";
|
||||||
|
import { HttpService, RequestState } from "../../services/HttpService";
|
||||||
import {
|
import {
|
||||||
getRecipientIdFromProps,
|
getRecipientIdFromProps,
|
||||||
isBrowser,
|
|
||||||
myAuth,
|
myAuth,
|
||||||
setIsoData,
|
setIsoData,
|
||||||
toast,
|
toast,
|
||||||
wsClient,
|
|
||||||
wsSubscribe,
|
|
||||||
} from "../../utils";
|
} from "../../utils";
|
||||||
import { HtmlTags } from "../common/html-tags";
|
import { HtmlTags } from "../common/html-tags";
|
||||||
import { Spinner } from "../common/icon";
|
import { Spinner } from "../common/icon";
|
||||||
|
@ -26,9 +21,9 @@ import { PrivateMessageForm } from "./private-message-form";
|
||||||
|
|
||||||
interface CreatePrivateMessageState {
|
interface CreatePrivateMessageState {
|
||||||
siteRes: GetSiteResponse;
|
siteRes: GetSiteResponse;
|
||||||
recipientDetailsRes?: GetPersonDetailsResponse;
|
recipientRes: RequestState<GetPersonDetailsResponse>;
|
||||||
recipient_id: number;
|
recipientId: number;
|
||||||
loading: boolean;
|
isIsomorphic: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class CreatePrivateMessage extends Component<
|
export class CreatePrivateMessage extends Component<
|
||||||
|
@ -36,11 +31,11 @@ export class CreatePrivateMessage extends Component<
|
||||||
CreatePrivateMessageState
|
CreatePrivateMessageState
|
||||||
> {
|
> {
|
||||||
private isoData = setIsoData(this.context);
|
private isoData = setIsoData(this.context);
|
||||||
private subscription?: Subscription;
|
|
||||||
state: CreatePrivateMessageState = {
|
state: CreatePrivateMessageState = {
|
||||||
siteRes: this.isoData.site_res,
|
siteRes: this.isoData.site_res,
|
||||||
recipient_id: getRecipientIdFromProps(this.props),
|
recipientRes: { state: "empty" },
|
||||||
loading: true,
|
recipientId: getRecipientIdFromProps(this.props),
|
||||||
|
isIsomorphic: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
|
@ -48,33 +43,40 @@ export class CreatePrivateMessage extends Component<
|
||||||
this.handlePrivateMessageCreate =
|
this.handlePrivateMessageCreate =
|
||||||
this.handlePrivateMessageCreate.bind(this);
|
this.handlePrivateMessageCreate.bind(this);
|
||||||
|
|
||||||
this.parseMessage = this.parseMessage.bind(this);
|
|
||||||
this.subscription = wsSubscribe(this.parseMessage);
|
|
||||||
|
|
||||||
// Only fetch the data if coming from another route
|
// Only fetch the data if coming from another route
|
||||||
if (this.isoData.path == this.context.router.route.match.url) {
|
if (FirstLoadService.isFirstLoad) {
|
||||||
this.state = {
|
this.state = {
|
||||||
...this.state,
|
...this.state,
|
||||||
recipientDetailsRes: this.isoData
|
recipientRes: this.isoData.routeData[0],
|
||||||
.routeData[0] as GetPersonDetailsResponse,
|
isIsomorphic: true,
|
||||||
loading: false,
|
|
||||||
};
|
};
|
||||||
} else {
|
|
||||||
this.fetchPersonDetails();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
fetchPersonDetails() {
|
async componentDidMount() {
|
||||||
const form: GetPersonDetails = {
|
if (!this.state.isIsomorphic) {
|
||||||
person_id: this.state.recipient_id,
|
await this.fetchPersonDetails();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async fetchPersonDetails() {
|
||||||
|
this.setState({
|
||||||
|
recipientRes: { state: "loading" },
|
||||||
|
});
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
recipientRes: await HttpService.client.getPersonDetails({
|
||||||
|
person_id: this.state.recipientId,
|
||||||
sort: "New",
|
sort: "New",
|
||||||
saved_only: false,
|
saved_only: false,
|
||||||
auth: myAuth(false),
|
auth: myAuth(),
|
||||||
};
|
}),
|
||||||
WebSocketService.Instance.send(wsClient.getPersonDetails(form));
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
|
static fetchInitialData(
|
||||||
|
req: InitialFetchRequest
|
||||||
|
): Promise<RequestState<any>>[] {
|
||||||
const person_id = Number(req.path.split("/").pop());
|
const person_id = Number(req.path.split("/").pop());
|
||||||
const form: GetPersonDetails = {
|
const form: GetPersonDetails = {
|
||||||
person_id,
|
person_id,
|
||||||
|
@ -86,30 +88,25 @@ export class CreatePrivateMessage extends Component<
|
||||||
}
|
}
|
||||||
|
|
||||||
get documentTitle(): string {
|
get documentTitle(): string {
|
||||||
const name_ = this.state.recipientDetailsRes?.person_view.person.name;
|
if (this.state.recipientRes.state == "success") {
|
||||||
return name_ ? `${i18n.t("create_private_message")} - ${name_}` : "";
|
const name_ = this.state.recipientRes.data.person_view.person.name;
|
||||||
}
|
return `${i18n.t("create_private_message")} - ${name_}`;
|
||||||
|
} else {
|
||||||
componentWillUnmount() {
|
return "";
|
||||||
if (isBrowser()) {
|
|
||||||
this.subscription?.unsubscribe();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
renderRecipientRes() {
|
||||||
const res = this.state.recipientDetailsRes;
|
switch (this.state.recipientRes.state) {
|
||||||
|
case "loading":
|
||||||
return (
|
return (
|
||||||
<div className="container-lg">
|
|
||||||
<HtmlTags
|
|
||||||
title={this.documentTitle}
|
|
||||||
path={this.context.router.route.match.url}
|
|
||||||
/>
|
|
||||||
{this.state.loading ? (
|
|
||||||
<h5>
|
<h5>
|
||||||
<Spinner large />
|
<Spinner large />
|
||||||
</h5>
|
</h5>
|
||||||
) : (
|
);
|
||||||
res && (
|
case "success": {
|
||||||
|
const res = this.state.recipientRes.data;
|
||||||
|
return (
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
|
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
|
||||||
<h5>{i18n.t("create_private_message")}</h5>
|
<h5>{i18n.t("create_private_message")}</h5>
|
||||||
|
@ -119,29 +116,31 @@ export class CreatePrivateMessage extends Component<
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
)}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="container-lg">
|
||||||
|
<HtmlTags
|
||||||
|
title={this.documentTitle}
|
||||||
|
path={this.context.router.route.match.url}
|
||||||
|
/>
|
||||||
|
{this.renderRecipientRes()}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handlePrivateMessageCreate() {
|
async handlePrivateMessageCreate(form: CreatePrivateMessageI) {
|
||||||
|
const res = await HttpService.client.createPrivateMessage(form);
|
||||||
|
|
||||||
|
if (res.state == "success") {
|
||||||
toast(i18n.t("message_sent"));
|
toast(i18n.t("message_sent"));
|
||||||
|
|
||||||
// Navigate to the front
|
// Navigate to the front
|
||||||
this.context.router.history.push("/");
|
this.context.router.history.push("/");
|
||||||
}
|
}
|
||||||
|
|
||||||
parseMessage(msg: any) {
|
|
||||||
const op = wsUserOp(msg);
|
|
||||||
console.log(msg);
|
|
||||||
if (msg.error) {
|
|
||||||
toast(i18n.t(msg.error), "danger");
|
|
||||||
this.setState({ loading: false });
|
|
||||||
return;
|
|
||||||
} else if (op == UserOperation.GetPersonDetails) {
|
|
||||||
const data = wsJsonToRes<GetPersonDetailsResponse>(msg);
|
|
||||||
this.setState({ recipientDetailsRes: data, loading: false });
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,27 +1,17 @@
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component, InfernoNode, linkEvent } from "inferno";
|
||||||
import { T } from "inferno-i18next-dess";
|
import { T } from "inferno-i18next-dess";
|
||||||
import {
|
import {
|
||||||
CreatePrivateMessage,
|
CreatePrivateMessage,
|
||||||
EditPrivateMessage,
|
EditPrivateMessage,
|
||||||
Person,
|
Person,
|
||||||
PrivateMessageResponse,
|
|
||||||
PrivateMessageView,
|
PrivateMessageView,
|
||||||
UserOperation,
|
|
||||||
wsJsonToRes,
|
|
||||||
wsUserOp,
|
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { Subscription } from "rxjs";
|
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { WebSocketService } from "../../services";
|
|
||||||
import {
|
import {
|
||||||
capitalizeFirstLetter,
|
capitalizeFirstLetter,
|
||||||
isBrowser,
|
myAuthRequired,
|
||||||
myAuth,
|
|
||||||
relTags,
|
relTags,
|
||||||
setupTippy,
|
setupTippy,
|
||||||
toast,
|
|
||||||
wsClient,
|
|
||||||
wsSubscribe,
|
|
||||||
} from "../../utils";
|
} from "../../utils";
|
||||||
import { Icon, Spinner } from "../common/icon";
|
import { Icon, Spinner } from "../common/icon";
|
||||||
import { MarkdownTextArea } from "../common/markdown-textarea";
|
import { MarkdownTextArea } from "../common/markdown-textarea";
|
||||||
|
@ -32,8 +22,8 @@ interface PrivateMessageFormProps {
|
||||||
recipient: Person;
|
recipient: Person;
|
||||||
privateMessageView?: PrivateMessageView; // If a pm is given, that means this is an edit
|
privateMessageView?: PrivateMessageView; // If a pm is given, that means this is an edit
|
||||||
onCancel?(): any;
|
onCancel?(): any;
|
||||||
onCreate?(message: PrivateMessageView): any;
|
onCreate?(form: CreatePrivateMessage): void;
|
||||||
onEdit?(message: PrivateMessageView): any;
|
onEdit?(form: EditPrivateMessage): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface PrivateMessageFormState {
|
interface PrivateMessageFormState {
|
||||||
|
@ -41,58 +31,54 @@ interface PrivateMessageFormState {
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
previewMode: boolean;
|
previewMode: boolean;
|
||||||
showDisclaimer: boolean;
|
showDisclaimer: boolean;
|
||||||
|
submitted: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class PrivateMessageForm extends Component<
|
export class PrivateMessageForm extends Component<
|
||||||
PrivateMessageFormProps,
|
PrivateMessageFormProps,
|
||||||
PrivateMessageFormState
|
PrivateMessageFormState
|
||||||
> {
|
> {
|
||||||
private subscription?: Subscription;
|
|
||||||
state: PrivateMessageFormState = {
|
state: PrivateMessageFormState = {
|
||||||
loading: false,
|
loading: false,
|
||||||
previewMode: false,
|
previewMode: false,
|
||||||
showDisclaimer: false,
|
showDisclaimer: false,
|
||||||
|
content: this.props.privateMessageView
|
||||||
|
? this.props.privateMessageView.private_message.content
|
||||||
|
: undefined,
|
||||||
|
submitted: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
|
|
||||||
this.handleContentChange = this.handleContentChange.bind(this);
|
this.handleContentChange = this.handleContentChange.bind(this);
|
||||||
|
|
||||||
this.parseMessage = this.parseMessage.bind(this);
|
|
||||||
this.subscription = wsSubscribe(this.parseMessage);
|
|
||||||
|
|
||||||
// Its an edit
|
|
||||||
if (this.props.privateMessageView) {
|
|
||||||
this.state.content =
|
|
||||||
this.props.privateMessageView.private_message.content;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
setupTippy();
|
setupTippy();
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate() {
|
componentWillReceiveProps(
|
||||||
if (!this.state.loading && this.state.content) {
|
nextProps: Readonly<{ children?: InfernoNode } & PrivateMessageFormProps>
|
||||||
window.onbeforeunload = () => true;
|
): void {
|
||||||
} else {
|
if (this.props != nextProps) {
|
||||||
window.onbeforeunload = null;
|
this.setState({ loading: false, content: undefined, previewMode: false });
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
if (isBrowser()) {
|
|
||||||
this.subscription?.unsubscribe();
|
|
||||||
window.onbeforeunload = null;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// TODO
|
||||||
|
// <Prompt
|
||||||
|
// when={!this.state.loading && this.state.content}
|
||||||
|
// message={i18n.t("block_leaving")}
|
||||||
|
// />
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
|
||||||
<NavigationPrompt when={!this.state.loading && !!this.state.content} />
|
|
||||||
<form onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}>
|
<form onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}>
|
||||||
|
<NavigationPrompt
|
||||||
|
when={
|
||||||
|
!this.state.loading && !!this.state.content && !this.state.submitted
|
||||||
|
}
|
||||||
|
/>
|
||||||
{!this.props.privateMessageView && (
|
{!this.props.privateMessageView && (
|
||||||
<div className="form-group row">
|
<div className="form-group row">
|
||||||
<label className="col-sm-2 col-form-label">
|
<label className="col-sm-2 col-form-label">
|
||||||
|
@ -122,6 +108,7 @@ export class PrivateMessageForm extends Component<
|
||||||
onContentChange={this.handleContentChange}
|
onContentChange={this.handleContentChange}
|
||||||
allLanguages={[]}
|
allLanguages={[]}
|
||||||
siteLanguages={[]}
|
siteLanguages={[]}
|
||||||
|
hideNavigationWarnings
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -174,32 +161,27 @@ export class PrivateMessageForm extends Component<
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handlePrivateMessageSubmit(i: PrivateMessageForm, event: any) {
|
handlePrivateMessageSubmit(i: PrivateMessageForm, event: any) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
i.setState({ loading: true, submitted: true });
|
||||||
const pm = i.props.privateMessageView;
|
const pm = i.props.privateMessageView;
|
||||||
const auth = myAuth();
|
const auth = myAuthRequired();
|
||||||
const content = i.state.content;
|
const content = i.state.content ?? "";
|
||||||
if (auth && content) {
|
|
||||||
if (pm) {
|
if (pm) {
|
||||||
const form: EditPrivateMessage = {
|
i.props.onEdit?.({
|
||||||
private_message_id: pm.private_message.id,
|
private_message_id: pm.private_message.id,
|
||||||
content,
|
content,
|
||||||
auth,
|
auth,
|
||||||
};
|
});
|
||||||
WebSocketService.Instance.send(wsClient.editPrivateMessage(form));
|
|
||||||
} else {
|
} else {
|
||||||
const form: CreatePrivateMessage = {
|
i.props.onCreate?.({
|
||||||
content,
|
content,
|
||||||
recipient_id: i.props.recipient.id,
|
recipient_id: i.props.recipient.id,
|
||||||
auth,
|
auth,
|
||||||
};
|
});
|
||||||
WebSocketService.Instance.send(wsClient.createPrivateMessage(form));
|
|
||||||
}
|
|
||||||
i.setState({ loading: true });
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -219,25 +201,4 @@ export class PrivateMessageForm extends Component<
|
||||||
handleShowDisclaimer(i: PrivateMessageForm) {
|
handleShowDisclaimer(i: PrivateMessageForm) {
|
||||||
i.setState({ showDisclaimer: !i.state.showDisclaimer });
|
i.setState({ showDisclaimer: !i.state.showDisclaimer });
|
||||||
}
|
}
|
||||||
|
|
||||||
parseMessage(msg: any) {
|
|
||||||
const op = wsUserOp(msg);
|
|
||||||
console.log(msg);
|
|
||||||
if (msg.error) {
|
|
||||||
toast(i18n.t(msg.error), "danger");
|
|
||||||
this.setState({ loading: false });
|
|
||||||
return;
|
|
||||||
} else if (
|
|
||||||
op == UserOperation.EditPrivateMessage ||
|
|
||||||
op == UserOperation.DeletePrivateMessage ||
|
|
||||||
op == UserOperation.MarkPrivateMessageAsRead
|
|
||||||
) {
|
|
||||||
const data = wsJsonToRes<PrivateMessageResponse>(msg);
|
|
||||||
this.setState({ loading: false });
|
|
||||||
this.props.onEdit?.(data.private_message_view);
|
|
||||||
} else if (op == UserOperation.CreatePrivateMessage) {
|
|
||||||
const data = wsJsonToRes<PrivateMessageResponse>(msg);
|
|
||||||
this.props.onCreate?.(data.private_message_view);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,24 +1,40 @@
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component, InfernoNode, linkEvent } from "inferno";
|
||||||
import { T } from "inferno-i18next-dess";
|
import { T } from "inferno-i18next-dess";
|
||||||
import {
|
import {
|
||||||
PrivateMessageReportView,
|
PrivateMessageReportView,
|
||||||
ResolvePrivateMessageReport,
|
ResolvePrivateMessageReport,
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { WebSocketService } from "../../services";
|
import { mdToHtml, myAuthRequired } from "../../utils";
|
||||||
import { mdToHtml, myAuth, wsClient } from "../../utils";
|
import { Icon, Spinner } from "../common/icon";
|
||||||
import { Icon } from "../common/icon";
|
|
||||||
import { PersonListing } from "../person/person-listing";
|
import { PersonListing } from "../person/person-listing";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
report: PrivateMessageReportView;
|
report: PrivateMessageReportView;
|
||||||
|
onResolveReport(form: ResolvePrivateMessageReport): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class PrivateMessageReport extends Component<Props, any> {
|
interface State {
|
||||||
|
loading: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class PrivateMessageReport extends Component<Props, State> {
|
||||||
|
state: State = {
|
||||||
|
loading: false,
|
||||||
|
};
|
||||||
|
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
componentWillReceiveProps(
|
||||||
|
nextProps: Readonly<{ children?: InfernoNode } & Props>
|
||||||
|
): void {
|
||||||
|
if (this.props != nextProps) {
|
||||||
|
this.setState({ loading: false });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const r = this.props.report;
|
const r = this.props.report;
|
||||||
const pmr = r.private_message_report;
|
const pmr = r.private_message_report;
|
||||||
|
@ -66,29 +82,28 @@ export class PrivateMessageReport extends Component<Props, any> {
|
||||||
data-tippy-content={tippyContent}
|
data-tippy-content={tippyContent}
|
||||||
aria-label={tippyContent}
|
aria-label={tippyContent}
|
||||||
>
|
>
|
||||||
|
{this.state.loading ? (
|
||||||
|
<Spinner />
|
||||||
|
) : (
|
||||||
<Icon
|
<Icon
|
||||||
icon="check"
|
icon="check"
|
||||||
classes={`icon-inline ${
|
classes={`icon-inline ${
|
||||||
pmr.resolved ? "text-success" : "text-danger"
|
pmr.resolved ? "text-success" : "text-danger"
|
||||||
}`}
|
}`}
|
||||||
/>
|
/>
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleResolveReport(i: PrivateMessageReport) {
|
handleResolveReport(i: PrivateMessageReport) {
|
||||||
|
i.setState({ loading: true });
|
||||||
const pmr = i.props.report.private_message_report;
|
const pmr = i.props.report.private_message_report;
|
||||||
const auth = myAuth();
|
i.props.onResolveReport({
|
||||||
if (auth) {
|
|
||||||
const form: ResolvePrivateMessageReport = {
|
|
||||||
report_id: pmr.id,
|
report_id: pmr.id,
|
||||||
resolved: !pmr.resolved,
|
resolved: !pmr.resolved,
|
||||||
auth,
|
auth: myAuthRequired(),
|
||||||
};
|
});
|
||||||
WebSocketService.Instance.send(
|
|
||||||
wsClient.resolvePrivateMessageReport(form)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,15 +1,17 @@
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component, InfernoNode, linkEvent } from "inferno";
|
||||||
import {
|
import {
|
||||||
|
CreatePrivateMessage,
|
||||||
CreatePrivateMessageReport,
|
CreatePrivateMessageReport,
|
||||||
DeletePrivateMessage,
|
DeletePrivateMessage,
|
||||||
|
EditPrivateMessage,
|
||||||
MarkPrivateMessageAsRead,
|
MarkPrivateMessageAsRead,
|
||||||
Person,
|
Person,
|
||||||
PrivateMessageView,
|
PrivateMessageView,
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { UserService, WebSocketService } from "../../services";
|
import { UserService } from "../../services";
|
||||||
import { mdToHtml, myAuth, toast, wsClient } from "../../utils";
|
import { mdToHtml, myAuthRequired } from "../../utils";
|
||||||
import { Icon } from "../common/icon";
|
import { Icon, Spinner } from "../common/icon";
|
||||||
import { MomentTime } from "../common/moment-time";
|
import { MomentTime } from "../common/moment-time";
|
||||||
import { PersonListing } from "../person/person-listing";
|
import { PersonListing } from "../person/person-listing";
|
||||||
import { PrivateMessageForm } from "./private-message-form";
|
import { PrivateMessageForm } from "./private-message-form";
|
||||||
|
@ -21,10 +23,18 @@ interface PrivateMessageState {
|
||||||
viewSource: boolean;
|
viewSource: boolean;
|
||||||
showReportDialog: boolean;
|
showReportDialog: boolean;
|
||||||
reportReason?: string;
|
reportReason?: string;
|
||||||
|
deleteLoading: boolean;
|
||||||
|
readLoading: boolean;
|
||||||
|
reportLoading: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface PrivateMessageProps {
|
interface PrivateMessageProps {
|
||||||
private_message_view: PrivateMessageView;
|
private_message_view: PrivateMessageView;
|
||||||
|
onDelete(form: DeletePrivateMessage): void;
|
||||||
|
onMarkRead(form: MarkPrivateMessageAsRead): void;
|
||||||
|
onReport(form: CreatePrivateMessageReport): void;
|
||||||
|
onCreate(form: CreatePrivateMessage): void;
|
||||||
|
onEdit(form: EditPrivateMessage): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class PrivateMessage extends Component<
|
export class PrivateMessage extends Component<
|
||||||
|
@ -37,15 +47,14 @@ export class PrivateMessage extends Component<
|
||||||
collapsed: false,
|
collapsed: false,
|
||||||
viewSource: false,
|
viewSource: false,
|
||||||
showReportDialog: false,
|
showReportDialog: false,
|
||||||
|
deleteLoading: false,
|
||||||
|
readLoading: false,
|
||||||
|
reportLoading: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
|
|
||||||
this.handleReplyCancel = this.handleReplyCancel.bind(this);
|
this.handleReplyCancel = this.handleReplyCancel.bind(this);
|
||||||
this.handlePrivateMessageCreate =
|
|
||||||
this.handlePrivateMessageCreate.bind(this);
|
|
||||||
this.handlePrivateMessageEdit = this.handlePrivateMessageEdit.bind(this);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
get mine(): boolean {
|
get mine(): boolean {
|
||||||
|
@ -55,6 +64,23 @@ export class PrivateMessage extends Component<
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
componentWillReceiveProps(
|
||||||
|
nextProps: Readonly<{ children?: InfernoNode } & PrivateMessageProps>
|
||||||
|
): void {
|
||||||
|
if (this.props != nextProps) {
|
||||||
|
this.setState({
|
||||||
|
showReply: false,
|
||||||
|
showEdit: false,
|
||||||
|
collapsed: false,
|
||||||
|
viewSource: false,
|
||||||
|
showReportDialog: false,
|
||||||
|
deleteLoading: false,
|
||||||
|
readLoading: false,
|
||||||
|
reportLoading: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const message_view = this.props.private_message_view;
|
const message_view = this.props.private_message_view;
|
||||||
const otherPerson: Person = this.mine
|
const otherPerson: Person = this.mine
|
||||||
|
@ -98,8 +124,7 @@ export class PrivateMessage extends Component<
|
||||||
<PrivateMessageForm
|
<PrivateMessageForm
|
||||||
recipient={otherPerson}
|
recipient={otherPerson}
|
||||||
privateMessageView={message_view}
|
privateMessageView={message_view}
|
||||||
onEdit={this.handlePrivateMessageEdit}
|
onEdit={this.props.onEdit}
|
||||||
onCreate={this.handlePrivateMessageCreate}
|
|
||||||
onCancel={this.handleReplyCancel}
|
onCancel={this.handleReplyCancel}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
@ -131,12 +156,17 @@ export class PrivateMessage extends Component<
|
||||||
: i18n.t("mark_as_read")
|
: i18n.t("mark_as_read")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
{this.state.readLoading ? (
|
||||||
|
<Spinner />
|
||||||
|
) : (
|
||||||
<Icon
|
<Icon
|
||||||
icon="check"
|
icon="check"
|
||||||
classes={`icon-inline ${
|
classes={`icon-inline ${
|
||||||
message_view.private_message.read && "text-success"
|
message_view.private_message.read &&
|
||||||
|
"text-success"
|
||||||
}`}
|
}`}
|
||||||
/>
|
/>
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
<li className="list-inline-item">{this.reportButton}</li>
|
<li className="list-inline-item">{this.reportButton}</li>
|
||||||
|
@ -179,6 +209,9 @@ export class PrivateMessage extends Component<
|
||||||
: i18n.t("restore")
|
: i18n.t("restore")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
{this.state.deleteLoading ? (
|
||||||
|
<Spinner />
|
||||||
|
) : (
|
||||||
<Icon
|
<Icon
|
||||||
icon="trash"
|
icon="trash"
|
||||||
classes={`icon-inline ${
|
classes={`icon-inline ${
|
||||||
|
@ -186,6 +219,7 @@ export class PrivateMessage extends Component<
|
||||||
"text-danger"
|
"text-danger"
|
||||||
}`}
|
}`}
|
||||||
/>
|
/>
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
</>
|
</>
|
||||||
|
@ -231,14 +265,14 @@ export class PrivateMessage extends Component<
|
||||||
className="btn btn-secondary"
|
className="btn btn-secondary"
|
||||||
aria-label={i18n.t("create_report")}
|
aria-label={i18n.t("create_report")}
|
||||||
>
|
>
|
||||||
{i18n.t("create_report")}
|
{this.state.reportLoading ? <Spinner /> : i18n.t("create_report")}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
)}
|
)}
|
||||||
{this.state.showReply && (
|
{this.state.showReply && (
|
||||||
<PrivateMessageForm
|
<PrivateMessageForm
|
||||||
recipient={otherPerson}
|
recipient={otherPerson}
|
||||||
onCreate={this.handlePrivateMessageCreate}
|
onCreate={this.props.onCreate}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{/* A collapsed clearfix */}
|
{/* A collapsed clearfix */}
|
||||||
|
@ -275,15 +309,12 @@ export class PrivateMessage extends Component<
|
||||||
}
|
}
|
||||||
|
|
||||||
handleDeleteClick(i: PrivateMessage) {
|
handleDeleteClick(i: PrivateMessage) {
|
||||||
const auth = myAuth();
|
i.setState({ deleteLoading: true });
|
||||||
if (auth) {
|
i.props.onDelete({
|
||||||
const form: DeletePrivateMessage = {
|
|
||||||
private_message_id: i.props.private_message_view.private_message.id,
|
private_message_id: i.props.private_message_view.private_message.id,
|
||||||
deleted: !i.props.private_message_view.private_message.deleted,
|
deleted: !i.props.private_message_view.private_message.deleted,
|
||||||
auth,
|
auth: myAuthRequired(),
|
||||||
};
|
});
|
||||||
WebSocketService.Instance.send(wsClient.deletePrivateMessage(form));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleReplyCancel() {
|
handleReplyCancel() {
|
||||||
|
@ -291,15 +322,12 @@ export class PrivateMessage extends Component<
|
||||||
}
|
}
|
||||||
|
|
||||||
handleMarkRead(i: PrivateMessage) {
|
handleMarkRead(i: PrivateMessage) {
|
||||||
const auth = myAuth();
|
i.setState({ readLoading: true });
|
||||||
if (auth) {
|
i.props.onMarkRead({
|
||||||
const form: MarkPrivateMessageAsRead = {
|
|
||||||
private_message_id: i.props.private_message_view.private_message.id,
|
private_message_id: i.props.private_message_view.private_message.id,
|
||||||
read: !i.props.private_message_view.private_message.read,
|
read: !i.props.private_message_view.private_message.read,
|
||||||
auth,
|
auth: myAuthRequired(),
|
||||||
};
|
});
|
||||||
WebSocketService.Instance.send(wsClient.markPrivateMessageAsRead(form));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleMessageCollapse(i: PrivateMessage) {
|
handleMessageCollapse(i: PrivateMessage) {
|
||||||
|
@ -320,31 +348,11 @@ export class PrivateMessage extends Component<
|
||||||
|
|
||||||
handleReportSubmit(i: PrivateMessage, event: any) {
|
handleReportSubmit(i: PrivateMessage, event: any) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
const auth = myAuth();
|
i.setState({ reportLoading: true });
|
||||||
const reason = i.state.reportReason;
|
i.props.onReport({
|
||||||
if (auth && reason) {
|
|
||||||
const form: CreatePrivateMessageReport = {
|
|
||||||
private_message_id: i.props.private_message_view.private_message.id,
|
private_message_id: i.props.private_message_view.private_message.id,
|
||||||
reason,
|
reason: i.state.reportReason ?? "",
|
||||||
auth,
|
auth: myAuthRequired(),
|
||||||
};
|
});
|
||||||
WebSocketService.Instance.send(wsClient.createPrivateMessageReport(form));
|
|
||||||
|
|
||||||
i.setState({ showReportDialog: false });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handlePrivateMessageEdit() {
|
|
||||||
this.setState({ showEdit: false });
|
|
||||||
}
|
|
||||||
|
|
||||||
handlePrivateMessageCreate(message: PrivateMessageView) {
|
|
||||||
if (
|
|
||||||
message.creator.id ==
|
|
||||||
UserService.Instance.myUserInfo?.local_user_view.person.id
|
|
||||||
) {
|
|
||||||
this.setState({ showReply: false });
|
|
||||||
toast(i18n.t("message_sent"));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import type { NoOptionI18nKeys } from "i18next";
|
import type { NoOptionI18nKeys } from "i18next";
|
||||||
import { Component, linkEvent } from "inferno";
|
import { Component, linkEvent } from "inferno";
|
||||||
import {
|
import {
|
||||||
CommentResponse,
|
|
||||||
CommentView,
|
CommentView,
|
||||||
CommunityView,
|
CommunityView,
|
||||||
GetCommunity,
|
GetCommunity,
|
||||||
|
@ -13,7 +12,6 @@ import {
|
||||||
ListCommunitiesResponse,
|
ListCommunitiesResponse,
|
||||||
ListingType,
|
ListingType,
|
||||||
PersonView,
|
PersonView,
|
||||||
PostResponse,
|
|
||||||
PostView,
|
PostView,
|
||||||
ResolveObject,
|
ResolveObject,
|
||||||
ResolveObjectResponse,
|
ResolveObjectResponse,
|
||||||
|
@ -21,22 +19,17 @@ import {
|
||||||
SearchResponse,
|
SearchResponse,
|
||||||
SearchType,
|
SearchType,
|
||||||
SortType,
|
SortType,
|
||||||
UserOperation,
|
|
||||||
wsJsonToRes,
|
|
||||||
wsUserOp,
|
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { Subscription } from "rxjs";
|
|
||||||
import { i18n } from "../i18next";
|
import { i18n } from "../i18next";
|
||||||
import { CommentViewType, InitialFetchRequest } from "../interfaces";
|
import { CommentViewType, InitialFetchRequest } from "../interfaces";
|
||||||
import { WebSocketService } from "../services";
|
import { FirstLoadService } from "../services/FirstLoadService";
|
||||||
|
import { HttpService, RequestState } from "../services/HttpService";
|
||||||
import {
|
import {
|
||||||
Choice,
|
Choice,
|
||||||
QueryParams,
|
QueryParams,
|
||||||
capitalizeFirstLetter,
|
capitalizeFirstLetter,
|
||||||
commentsToFlatNodes,
|
commentsToFlatNodes,
|
||||||
communityToChoice,
|
communityToChoice,
|
||||||
createCommentLikeRes,
|
|
||||||
createPostLikeFindRes,
|
|
||||||
debounce,
|
debounce,
|
||||||
enableDownvotes,
|
enableDownvotes,
|
||||||
enableNsfw,
|
enableNsfw,
|
||||||
|
@ -55,9 +48,6 @@ import {
|
||||||
saveScrollPosition,
|
saveScrollPosition,
|
||||||
setIsoData,
|
setIsoData,
|
||||||
showLocal,
|
showLocal,
|
||||||
toast,
|
|
||||||
wsClient,
|
|
||||||
wsSubscribe,
|
|
||||||
} from "../utils";
|
} from "../utils";
|
||||||
import { CommentNodes } from "./comment/comment-nodes";
|
import { CommentNodes } from "./comment/comment-nodes";
|
||||||
import { HtmlTags } from "./common/html-tags";
|
import { HtmlTags } from "./common/html-tags";
|
||||||
|
@ -83,17 +73,18 @@ interface SearchProps {
|
||||||
type FilterType = "creator" | "community";
|
type FilterType = "creator" | "community";
|
||||||
|
|
||||||
interface SearchState {
|
interface SearchState {
|
||||||
searchResponse?: SearchResponse;
|
searchRes: RequestState<SearchResponse>;
|
||||||
communities: CommunityView[];
|
resolveObjectRes: RequestState<ResolveObjectResponse>;
|
||||||
creatorDetails?: GetPersonDetailsResponse;
|
creatorDetailsRes: RequestState<GetPersonDetailsResponse>;
|
||||||
searchLoading: boolean;
|
communitiesRes: RequestState<ListCommunitiesResponse>;
|
||||||
searchCommunitiesLoading: boolean;
|
communityRes: RequestState<GetCommunityResponse>;
|
||||||
searchCreatorLoading: boolean;
|
|
||||||
siteRes: GetSiteResponse;
|
siteRes: GetSiteResponse;
|
||||||
searchText?: string;
|
searchText?: string;
|
||||||
resolveObjectResponse?: ResolveObjectResponse;
|
|
||||||
communitySearchOptions: Choice[];
|
communitySearchOptions: Choice[];
|
||||||
creatorSearchOptions: Choice[];
|
creatorSearchOptions: Choice[];
|
||||||
|
searchCreatorLoading: boolean;
|
||||||
|
searchCommunitiesLoading: boolean;
|
||||||
|
isIsomorphic: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Combined {
|
interface Combined {
|
||||||
|
@ -238,15 +229,18 @@ function getListing(
|
||||||
|
|
||||||
export class Search extends Component<any, SearchState> {
|
export class Search extends Component<any, SearchState> {
|
||||||
private isoData = setIsoData(this.context);
|
private isoData = setIsoData(this.context);
|
||||||
private subscription?: Subscription;
|
|
||||||
state: SearchState = {
|
state: SearchState = {
|
||||||
searchLoading: false,
|
resolveObjectRes: { state: "empty" },
|
||||||
|
creatorDetailsRes: { state: "empty" },
|
||||||
|
communitiesRes: { state: "empty" },
|
||||||
|
communityRes: { state: "empty" },
|
||||||
siteRes: this.isoData.site_res,
|
siteRes: this.isoData.site_res,
|
||||||
communities: [],
|
|
||||||
searchCommunitiesLoading: false,
|
|
||||||
searchCreatorLoading: false,
|
|
||||||
creatorSearchOptions: [],
|
creatorSearchOptions: [],
|
||||||
communitySearchOptions: [],
|
communitySearchOptions: [],
|
||||||
|
searchRes: { state: "empty" },
|
||||||
|
searchCreatorLoading: false,
|
||||||
|
searchCommunitiesLoading: false,
|
||||||
|
isIsomorphic: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
|
@ -259,9 +253,6 @@ export class Search extends Component<any, SearchState> {
|
||||||
this.handleCommunityFilterChange.bind(this);
|
this.handleCommunityFilterChange.bind(this);
|
||||||
this.handleCreatorFilterChange = this.handleCreatorFilterChange.bind(this);
|
this.handleCreatorFilterChange = this.handleCreatorFilterChange.bind(this);
|
||||||
|
|
||||||
this.parseMessage = this.parseMessage.bind(this);
|
|
||||||
this.subscription = wsSubscribe(this.parseMessage);
|
|
||||||
|
|
||||||
const { q } = getSearchQueryParams();
|
const { q } = getSearchQueryParams();
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
|
@ -270,71 +261,70 @@ export class Search extends Component<any, SearchState> {
|
||||||
};
|
};
|
||||||
|
|
||||||
// Only fetch the data if coming from another route
|
// Only fetch the data if coming from another route
|
||||||
if (this.isoData.path === this.context.router.route.match.url) {
|
if (FirstLoadService.isFirstLoad) {
|
||||||
const communityRes = this.isoData.routeData[0] as
|
const [
|
||||||
| GetCommunityResponse
|
communityRes,
|
||||||
| undefined;
|
communitiesRes,
|
||||||
const communitiesRes = this.isoData.routeData[1] as
|
creatorDetailsRes,
|
||||||
| ListCommunitiesResponse
|
searchRes,
|
||||||
| undefined;
|
resolveObjectRes,
|
||||||
// This can be single or multiple communities given
|
] = this.isoData.routeData;
|
||||||
if (communitiesRes) {
|
|
||||||
this.state = {
|
this.state = {
|
||||||
...this.state,
|
...this.state,
|
||||||
communities: communitiesRes.communities,
|
communitiesRes,
|
||||||
|
communityRes,
|
||||||
|
creatorDetailsRes,
|
||||||
|
creatorSearchOptions:
|
||||||
|
creatorDetailsRes.state == "success"
|
||||||
|
? [personToChoice(creatorDetailsRes.data.person_view)]
|
||||||
|
: [],
|
||||||
|
isIsomorphic: true,
|
||||||
};
|
};
|
||||||
}
|
|
||||||
if (communityRes) {
|
if (communityRes.state === "success") {
|
||||||
this.state = {
|
this.state = {
|
||||||
...this.state,
|
...this.state,
|
||||||
communities: [communityRes.community_view],
|
|
||||||
communitySearchOptions: [
|
communitySearchOptions: [
|
||||||
communityToChoice(communityRes.community_view),
|
communityToChoice(communityRes.data.community_view),
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
const creatorRes = this.isoData.routeData[2] as GetPersonDetailsResponse;
|
if (q) {
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
...this.state,
|
...this.state,
|
||||||
creatorDetails: creatorRes,
|
searchRes,
|
||||||
creatorSearchOptions: creatorRes
|
resolveObjectRes,
|
||||||
? [personToChoice(creatorRes.person_view)]
|
|
||||||
: [],
|
|
||||||
};
|
};
|
||||||
|
|
||||||
if (q !== "") {
|
|
||||||
this.state = {
|
|
||||||
...this.state,
|
|
||||||
searchResponse: this.isoData.routeData[3] as SearchResponse,
|
|
||||||
resolveObjectResponse: this.isoData
|
|
||||||
.routeData[4] as ResolveObjectResponse,
|
|
||||||
searchLoading: false,
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
this.search();
|
|
||||||
}
|
}
|
||||||
} else {
|
}
|
||||||
const listCommunitiesForm: ListCommunities = {
|
}
|
||||||
|
|
||||||
|
async componentDidMount() {
|
||||||
|
if (!this.state.isIsomorphic) {
|
||||||
|
const promises = [this.fetchCommunities()];
|
||||||
|
if (this.state.searchText) {
|
||||||
|
promises.push(this.search());
|
||||||
|
}
|
||||||
|
|
||||||
|
await Promise.all(promises);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async fetchCommunities() {
|
||||||
|
this.setState({ communitiesRes: { state: "loading" } });
|
||||||
|
this.setState({
|
||||||
|
communitiesRes: await HttpService.client.listCommunities({
|
||||||
type_: defaultListingType,
|
type_: defaultListingType,
|
||||||
sort: defaultSortType,
|
sort: defaultSortType,
|
||||||
limit: fetchLimit,
|
limit: fetchLimit,
|
||||||
auth: myAuth(false),
|
auth: myAuth(),
|
||||||
};
|
}),
|
||||||
|
});
|
||||||
WebSocketService.Instance.send(
|
|
||||||
wsClient.listCommunities(listCommunitiesForm)
|
|
||||||
);
|
|
||||||
|
|
||||||
if (q) {
|
|
||||||
this.search();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
this.subscription?.unsubscribe();
|
|
||||||
saveScrollPosition(this.context);
|
saveScrollPosition(this.context);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -342,8 +332,10 @@ export class Search extends Component<any, SearchState> {
|
||||||
client,
|
client,
|
||||||
auth,
|
auth,
|
||||||
query: { communityId, creatorId, q, type, sort, listingType, page },
|
query: { communityId, creatorId, q, type, sort, listingType, page },
|
||||||
}: InitialFetchRequest<QueryParams<SearchProps>>): Promise<any>[] {
|
}: InitialFetchRequest<QueryParams<SearchProps>>): Promise<
|
||||||
const promises: Promise<any>[] = [];
|
RequestState<any>
|
||||||
|
>[] {
|
||||||
|
const promises: Promise<RequestState<any>>[] = [];
|
||||||
|
|
||||||
const community_id = getIdFromString(communityId);
|
const community_id = getIdFromString(communityId);
|
||||||
if (community_id) {
|
if (community_id) {
|
||||||
|
@ -352,7 +344,7 @@ export class Search extends Component<any, SearchState> {
|
||||||
auth,
|
auth,
|
||||||
};
|
};
|
||||||
promises.push(client.getCommunity(getCommunityForm));
|
promises.push(client.getCommunity(getCommunityForm));
|
||||||
promises.push(Promise.resolve());
|
promises.push(Promise.resolve({ state: "empty" }));
|
||||||
} else {
|
} else {
|
||||||
const listCommunitiesForm: ListCommunities = {
|
const listCommunitiesForm: ListCommunities = {
|
||||||
type_: defaultListingType,
|
type_: defaultListingType,
|
||||||
|
@ -360,7 +352,7 @@ export class Search extends Component<any, SearchState> {
|
||||||
limit: fetchLimit,
|
limit: fetchLimit,
|
||||||
auth,
|
auth,
|
||||||
};
|
};
|
||||||
promises.push(Promise.resolve());
|
promises.push(Promise.resolve({ state: "empty" }));
|
||||||
promises.push(client.listCommunities(listCommunitiesForm));
|
promises.push(client.listCommunities(listCommunitiesForm));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -372,7 +364,7 @@ export class Search extends Component<any, SearchState> {
|
||||||
};
|
};
|
||||||
promises.push(client.getPersonDetails(getCreatorForm));
|
promises.push(client.getPersonDetails(getCreatorForm));
|
||||||
} else {
|
} else {
|
||||||
promises.push(Promise.resolve());
|
promises.push(Promise.resolve({ state: "empty" }));
|
||||||
}
|
}
|
||||||
|
|
||||||
const query = getSearchQueryFromQuery(q);
|
const query = getSearchQueryFromQuery(q);
|
||||||
|
@ -400,8 +392,8 @@ export class Search extends Component<any, SearchState> {
|
||||||
promises.push(client.resolveObject(resolveObjectForm));
|
promises.push(client.resolveObject(resolveObjectForm));
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
promises.push(Promise.resolve());
|
promises.push(Promise.resolve({ state: "empty" }));
|
||||||
promises.push(Promise.resolve());
|
promises.push(Promise.resolve({ state: "empty" }));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -427,7 +419,8 @@ export class Search extends Component<any, SearchState> {
|
||||||
{this.selects}
|
{this.selects}
|
||||||
{this.searchForm}
|
{this.searchForm}
|
||||||
{this.displayResults(type)}
|
{this.displayResults(type)}
|
||||||
{this.resultsCount === 0 && !this.state.searchLoading && (
|
{this.resultsCount === 0 &&
|
||||||
|
this.state.searchRes.state === "success" && (
|
||||||
<span>{i18n.t("no_results")}</span>
|
<span>{i18n.t("no_results")}</span>
|
||||||
)}
|
)}
|
||||||
<Paginator page={page} onChange={this.handlePageChange} />
|
<Paginator page={page} onChange={this.handlePageChange} />
|
||||||
|
@ -470,7 +463,7 @@ export class Search extends Component<any, SearchState> {
|
||||||
minLength={1}
|
minLength={1}
|
||||||
/>
|
/>
|
||||||
<button type="submit" className="btn btn-secondary mr-2 mb-2">
|
<button type="submit" className="btn btn-secondary mr-2 mb-2">
|
||||||
{this.state.searchLoading ? (
|
{this.state.searchRes.state == "loading" ? (
|
||||||
<Spinner />
|
<Spinner />
|
||||||
) : (
|
) : (
|
||||||
<span>{i18n.t("search")}</span>
|
<span>{i18n.t("search")}</span>
|
||||||
|
@ -488,8 +481,13 @@ export class Search extends Component<any, SearchState> {
|
||||||
creatorSearchOptions,
|
creatorSearchOptions,
|
||||||
searchCommunitiesLoading,
|
searchCommunitiesLoading,
|
||||||
searchCreatorLoading,
|
searchCreatorLoading,
|
||||||
|
communitiesRes,
|
||||||
} = this.state;
|
} = this.state;
|
||||||
|
|
||||||
|
const hasCommunities =
|
||||||
|
communitiesRes.state == "success" &&
|
||||||
|
communitiesRes.data.communities.length > 0;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mb-2">
|
<div className="mb-2">
|
||||||
<select
|
<select
|
||||||
|
@ -524,14 +522,14 @@ export class Search extends Component<any, SearchState> {
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
<div className="form-row">
|
<div className="form-row">
|
||||||
{this.state.communities.length > 0 && (
|
{hasCommunities && (
|
||||||
<Filter
|
<Filter
|
||||||
filterType="community"
|
filterType="community"
|
||||||
onChange={this.handleCommunityFilterChange}
|
onChange={this.handleCommunityFilterChange}
|
||||||
onSearch={this.handleCommunitySearch}
|
onSearch={this.handleCommunitySearch}
|
||||||
options={communitySearchOptions}
|
options={communitySearchOptions}
|
||||||
loading={searchCommunitiesLoading}
|
|
||||||
value={communityId}
|
value={communityId}
|
||||||
|
loading={searchCommunitiesLoading}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<Filter
|
<Filter
|
||||||
|
@ -539,8 +537,8 @@ export class Search extends Component<any, SearchState> {
|
||||||
onChange={this.handleCreatorFilterChange}
|
onChange={this.handleCreatorFilterChange}
|
||||||
onSearch={this.handleCreatorSearch}
|
onSearch={this.handleCreatorSearch}
|
||||||
options={creatorSearchOptions}
|
options={creatorSearchOptions}
|
||||||
loading={searchCreatorLoading}
|
|
||||||
value={creatorId}
|
value={creatorId}
|
||||||
|
loading={searchCreatorLoading}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -549,11 +547,14 @@ export class Search extends Component<any, SearchState> {
|
||||||
|
|
||||||
buildCombined(): Combined[] {
|
buildCombined(): Combined[] {
|
||||||
const combined: Combined[] = [];
|
const combined: Combined[] = [];
|
||||||
const { resolveObjectResponse, searchResponse } = this.state;
|
const {
|
||||||
|
resolveObjectRes: resolveObjectResponse,
|
||||||
|
searchRes: searchResponse,
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
// Push the possible resolve / federated objects first
|
// Push the possible resolve / federated objects first
|
||||||
if (resolveObjectResponse) {
|
if (resolveObjectResponse.state == "success") {
|
||||||
const { comment, post, community, person } = resolveObjectResponse;
|
const { comment, post, community, person } = resolveObjectResponse.data;
|
||||||
|
|
||||||
if (comment) {
|
if (comment) {
|
||||||
combined.push(commentViewToCombined(comment));
|
combined.push(commentViewToCombined(comment));
|
||||||
|
@ -570,8 +571,8 @@ export class Search extends Component<any, SearchState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Push the search results
|
// Push the search results
|
||||||
if (searchResponse) {
|
if (searchResponse.state === "success") {
|
||||||
const { comments, posts, communities, users } = searchResponse;
|
const { comments, posts, communities, users } = searchResponse.data;
|
||||||
|
|
||||||
combined.push(
|
combined.push(
|
||||||
...[
|
...[
|
||||||
|
@ -622,6 +623,23 @@ export class Search extends Component<any, SearchState> {
|
||||||
allLanguages={this.state.siteRes.all_languages}
|
allLanguages={this.state.siteRes.all_languages}
|
||||||
siteLanguages={this.state.siteRes.discussion_languages}
|
siteLanguages={this.state.siteRes.discussion_languages}
|
||||||
viewOnly
|
viewOnly
|
||||||
|
// All of these are unused, since its view only
|
||||||
|
onPostEdit={() => {}}
|
||||||
|
onPostVote={() => {}}
|
||||||
|
onPostReport={() => {}}
|
||||||
|
onBlockPerson={() => {}}
|
||||||
|
onLockPost={() => {}}
|
||||||
|
onDeletePost={() => {}}
|
||||||
|
onRemovePost={() => {}}
|
||||||
|
onSavePost={() => {}}
|
||||||
|
onFeaturePost={() => {}}
|
||||||
|
onPurgePerson={() => {}}
|
||||||
|
onPurgePost={() => {}}
|
||||||
|
onBanPersonFromCommunity={() => {}}
|
||||||
|
onBanPerson={() => {}}
|
||||||
|
onAddModToCommunity={() => {}}
|
||||||
|
onAddAdmin={() => {}}
|
||||||
|
onTransferCommunity={() => {}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{i.type_ === "comments" && (
|
{i.type_ === "comments" && (
|
||||||
|
@ -641,6 +659,26 @@ export class Search extends Component<any, SearchState> {
|
||||||
enableDownvotes={enableDownvotes(this.state.siteRes)}
|
enableDownvotes={enableDownvotes(this.state.siteRes)}
|
||||||
allLanguages={this.state.siteRes.all_languages}
|
allLanguages={this.state.siteRes.all_languages}
|
||||||
siteLanguages={this.state.siteRes.discussion_languages}
|
siteLanguages={this.state.siteRes.discussion_languages}
|
||||||
|
// All of these are unused, since its viewonly
|
||||||
|
finished={new Map()}
|
||||||
|
onSaveComment={() => {}}
|
||||||
|
onBlockPerson={() => {}}
|
||||||
|
onDeleteComment={() => {}}
|
||||||
|
onRemoveComment={() => {}}
|
||||||
|
onCommentVote={() => {}}
|
||||||
|
onCommentReport={() => {}}
|
||||||
|
onDistinguishComment={() => {}}
|
||||||
|
onAddModToCommunity={() => {}}
|
||||||
|
onAddAdmin={() => {}}
|
||||||
|
onTransferCommunity={() => {}}
|
||||||
|
onPurgeComment={() => {}}
|
||||||
|
onPurgePerson={() => {}}
|
||||||
|
onCommentReplyRead={() => {}}
|
||||||
|
onPersonMentionRead={() => {}}
|
||||||
|
onBanPersonFromCommunity={() => {}}
|
||||||
|
onBanPerson={() => {}}
|
||||||
|
onCreateComment={() => Promise.resolve({ state: "empty" })}
|
||||||
|
onEditComment={() => Promise.resolve({ state: "empty" })}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{i.type_ === "communities" && (
|
{i.type_ === "communities" && (
|
||||||
|
@ -657,11 +695,19 @@ export class Search extends Component<any, SearchState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
get comments() {
|
get comments() {
|
||||||
const { searchResponse, resolveObjectResponse, siteRes } = this.state;
|
const {
|
||||||
const comments = searchResponse?.comments ?? [];
|
searchRes: searchResponse,
|
||||||
|
resolveObjectRes: resolveObjectResponse,
|
||||||
|
siteRes,
|
||||||
|
} = this.state;
|
||||||
|
const comments =
|
||||||
|
searchResponse.state === "success" ? searchResponse.data.comments : [];
|
||||||
|
|
||||||
if (resolveObjectResponse?.comment) {
|
if (
|
||||||
comments.unshift(resolveObjectResponse?.comment);
|
resolveObjectResponse.state === "success" &&
|
||||||
|
resolveObjectResponse.data.comment
|
||||||
|
) {
|
||||||
|
comments.unshift(resolveObjectResponse.data.comment);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -674,16 +720,44 @@ export class Search extends Component<any, SearchState> {
|
||||||
enableDownvotes={enableDownvotes(siteRes)}
|
enableDownvotes={enableDownvotes(siteRes)}
|
||||||
allLanguages={siteRes.all_languages}
|
allLanguages={siteRes.all_languages}
|
||||||
siteLanguages={siteRes.discussion_languages}
|
siteLanguages={siteRes.discussion_languages}
|
||||||
|
// All of these are unused, since its viewonly
|
||||||
|
finished={new Map()}
|
||||||
|
onSaveComment={() => {}}
|
||||||
|
onBlockPerson={() => {}}
|
||||||
|
onDeleteComment={() => {}}
|
||||||
|
onRemoveComment={() => {}}
|
||||||
|
onCommentVote={() => {}}
|
||||||
|
onCommentReport={() => {}}
|
||||||
|
onDistinguishComment={() => {}}
|
||||||
|
onAddModToCommunity={() => {}}
|
||||||
|
onAddAdmin={() => {}}
|
||||||
|
onTransferCommunity={() => {}}
|
||||||
|
onPurgeComment={() => {}}
|
||||||
|
onPurgePerson={() => {}}
|
||||||
|
onCommentReplyRead={() => {}}
|
||||||
|
onPersonMentionRead={() => {}}
|
||||||
|
onBanPersonFromCommunity={() => {}}
|
||||||
|
onBanPerson={() => {}}
|
||||||
|
onCreateComment={() => Promise.resolve({ state: "empty" })}
|
||||||
|
onEditComment={() => Promise.resolve({ state: "empty" })}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
get posts() {
|
get posts() {
|
||||||
const { searchResponse, resolveObjectResponse, siteRes } = this.state;
|
const {
|
||||||
const posts = searchResponse?.posts ?? [];
|
searchRes: searchResponse,
|
||||||
|
resolveObjectRes: resolveObjectResponse,
|
||||||
|
siteRes,
|
||||||
|
} = this.state;
|
||||||
|
const posts =
|
||||||
|
searchResponse.state === "success" ? searchResponse.data.posts : [];
|
||||||
|
|
||||||
if (resolveObjectResponse?.post) {
|
if (
|
||||||
posts.unshift(resolveObjectResponse.post);
|
resolveObjectResponse.state === "success" &&
|
||||||
|
resolveObjectResponse.data.post
|
||||||
|
) {
|
||||||
|
posts.unshift(resolveObjectResponse.data.post);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -699,6 +773,23 @@ export class Search extends Component<any, SearchState> {
|
||||||
allLanguages={siteRes.all_languages}
|
allLanguages={siteRes.all_languages}
|
||||||
siteLanguages={siteRes.discussion_languages}
|
siteLanguages={siteRes.discussion_languages}
|
||||||
viewOnly
|
viewOnly
|
||||||
|
// All of these are unused, since its view only
|
||||||
|
onPostEdit={() => {}}
|
||||||
|
onPostVote={() => {}}
|
||||||
|
onPostReport={() => {}}
|
||||||
|
onBlockPerson={() => {}}
|
||||||
|
onLockPost={() => {}}
|
||||||
|
onDeletePost={() => {}}
|
||||||
|
onRemovePost={() => {}}
|
||||||
|
onSavePost={() => {}}
|
||||||
|
onFeaturePost={() => {}}
|
||||||
|
onPurgePerson={() => {}}
|
||||||
|
onPurgePost={() => {}}
|
||||||
|
onBanPersonFromCommunity={() => {}}
|
||||||
|
onBanPerson={() => {}}
|
||||||
|
onAddModToCommunity={() => {}}
|
||||||
|
onAddAdmin={() => {}}
|
||||||
|
onTransferCommunity={() => {}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -708,11 +799,18 @@ export class Search extends Component<any, SearchState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
get communities() {
|
get communities() {
|
||||||
const { searchResponse, resolveObjectResponse } = this.state;
|
const {
|
||||||
const communities = searchResponse?.communities ?? [];
|
searchRes: searchResponse,
|
||||||
|
resolveObjectRes: resolveObjectResponse,
|
||||||
|
} = this.state;
|
||||||
|
const communities =
|
||||||
|
searchResponse.state === "success" ? searchResponse.data.communities : [];
|
||||||
|
|
||||||
if (resolveObjectResponse?.community) {
|
if (
|
||||||
communities.unshift(resolveObjectResponse.community);
|
resolveObjectResponse.state === "success" &&
|
||||||
|
resolveObjectResponse.data.community
|
||||||
|
) {
|
||||||
|
communities.unshift(resolveObjectResponse.data.community);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -727,11 +825,18 @@ export class Search extends Component<any, SearchState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
get users() {
|
get users() {
|
||||||
const { searchResponse, resolveObjectResponse } = this.state;
|
const {
|
||||||
const users = searchResponse?.users ?? [];
|
searchRes: searchResponse,
|
||||||
|
resolveObjectRes: resolveObjectResponse,
|
||||||
|
} = this.state;
|
||||||
|
const users =
|
||||||
|
searchResponse.state === "success" ? searchResponse.data.users : [];
|
||||||
|
|
||||||
if (resolveObjectResponse?.person) {
|
if (
|
||||||
users.unshift(resolveObjectResponse.person);
|
resolveObjectResponse.state === "success" &&
|
||||||
|
resolveObjectResponse.data.person
|
||||||
|
) {
|
||||||
|
users.unshift(resolveObjectResponse.data.person);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -746,20 +851,22 @@ export class Search extends Component<any, SearchState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
get resultsCount(): number {
|
get resultsCount(): number {
|
||||||
const { searchResponse: r, resolveObjectResponse: resolveRes } = this.state;
|
const { searchRes: r, resolveObjectRes: resolveRes } = this.state;
|
||||||
|
|
||||||
const searchCount = r
|
const searchCount =
|
||||||
? r.posts.length +
|
r.state === "success"
|
||||||
r.comments.length +
|
? r.data.posts.length +
|
||||||
r.communities.length +
|
r.data.comments.length +
|
||||||
r.users.length
|
r.data.communities.length +
|
||||||
|
r.data.users.length
|
||||||
: 0;
|
: 0;
|
||||||
|
|
||||||
const resObjCount = resolveRes
|
const resObjCount =
|
||||||
? resolveRes.post ||
|
resolveRes.state === "success"
|
||||||
resolveRes.person ||
|
? resolveRes.data.post ||
|
||||||
resolveRes.community ||
|
resolveRes.data.person ||
|
||||||
resolveRes.comment
|
resolveRes.data.community ||
|
||||||
|
resolveRes.data.comment
|
||||||
? 1
|
? 1
|
||||||
: 0
|
: 0
|
||||||
: 0;
|
: 0;
|
||||||
|
@ -767,14 +874,16 @@ export class Search extends Component<any, SearchState> {
|
||||||
return resObjCount + searchCount;
|
return resObjCount + searchCount;
|
||||||
}
|
}
|
||||||
|
|
||||||
search() {
|
async search() {
|
||||||
const auth = myAuth(false);
|
const auth = myAuth();
|
||||||
const { searchText: q } = this.state;
|
const { searchText: q } = this.state;
|
||||||
const { communityId, creatorId, type, sort, listingType, page } =
|
const { communityId, creatorId, type, sort, listingType, page } =
|
||||||
getSearchQueryParams();
|
getSearchQueryParams();
|
||||||
|
|
||||||
if (q && q !== "") {
|
if (q) {
|
||||||
const form: SearchForm = {
|
this.setState({ searchRes: { state: "loading" } });
|
||||||
|
this.setState({
|
||||||
|
searchRes: await HttpService.client.search({
|
||||||
q,
|
q,
|
||||||
community_id: communityId ?? undefined,
|
community_id: communityId ?? undefined,
|
||||||
creator_id: creatorId ?? undefined,
|
creator_id: creatorId ?? undefined,
|
||||||
|
@ -784,37 +893,30 @@ export class Search extends Component<any, SearchState> {
|
||||||
page,
|
page,
|
||||||
limit: fetchLimit,
|
limit: fetchLimit,
|
||||||
auth,
|
auth,
|
||||||
};
|
}),
|
||||||
|
});
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
restoreScrollPosition(this.context);
|
||||||
|
|
||||||
if (auth) {
|
if (auth) {
|
||||||
const resolveObjectForm: ResolveObject = {
|
this.setState({ resolveObjectRes: { state: "loading" } });
|
||||||
|
this.setState({
|
||||||
|
resolveObjectRes: await HttpService.client.resolveObject({
|
||||||
q,
|
q,
|
||||||
auth,
|
auth,
|
||||||
};
|
}),
|
||||||
WebSocketService.Instance.send(
|
|
||||||
wsClient.resolveObject(resolveObjectForm)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
searchResponse: undefined,
|
|
||||||
resolveObjectResponse: undefined,
|
|
||||||
searchLoading: true,
|
|
||||||
});
|
});
|
||||||
|
}
|
||||||
WebSocketService.Instance.send(wsClient.search(form));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleCreatorSearch = debounce(async (text: string) => {
|
handleCreatorSearch = debounce(async (text: string) => {
|
||||||
const { creatorId } = getSearchQueryParams();
|
const { creatorId } = getSearchQueryParams();
|
||||||
const { creatorSearchOptions } = this.state;
|
const { creatorSearchOptions } = this.state;
|
||||||
this.setState({
|
|
||||||
searchCreatorLoading: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
const newOptions: Choice[] = [];
|
const newOptions: Choice[] = [];
|
||||||
|
|
||||||
|
this.setState({ searchCreatorLoading: true });
|
||||||
|
|
||||||
const selectedChoice = creatorSearchOptions.find(
|
const selectedChoice = creatorSearchOptions.find(
|
||||||
choice => getIdFromString(choice.value) === creatorId
|
choice => getIdFromString(choice.value) === creatorId
|
||||||
);
|
);
|
||||||
|
@ -824,7 +926,7 @@ export class Search extends Component<any, SearchState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (text.length > 0) {
|
if (text.length > 0) {
|
||||||
newOptions.push(...(await fetchUsers(text)).users.map(personToChoice));
|
newOptions.push(...(await fetchUsers(text)).map(personToChoice));
|
||||||
}
|
}
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
|
@ -851,9 +953,7 @@ export class Search extends Component<any, SearchState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (text.length > 0) {
|
if (text.length > 0) {
|
||||||
newOptions.push(
|
newOptions.push(...(await fetchCommunities(text)).map(communityToChoice));
|
||||||
...(await fetchCommunities(text)).communities.map(communityToChoice)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
|
@ -913,7 +1013,7 @@ export class Search extends Component<any, SearchState> {
|
||||||
i.setState({ searchText: event.target.value });
|
i.setState({ searchText: event.target.value });
|
||||||
}
|
}
|
||||||
|
|
||||||
updateUrl({
|
async updateUrl({
|
||||||
q,
|
q,
|
||||||
type,
|
type,
|
||||||
listingType,
|
listingType,
|
||||||
|
@ -950,71 +1050,6 @@ export class Search extends Component<any, SearchState> {
|
||||||
|
|
||||||
this.props.history.push(`/search${getQueryString(queryParams)}`);
|
this.props.history.push(`/search${getQueryString(queryParams)}`);
|
||||||
|
|
||||||
this.search();
|
await this.search();
|
||||||
}
|
|
||||||
|
|
||||||
parseMessage(msg: any) {
|
|
||||||
console.log(msg);
|
|
||||||
const op = wsUserOp(msg);
|
|
||||||
if (msg.error) {
|
|
||||||
if (msg.error === "couldnt_find_object") {
|
|
||||||
this.setState({
|
|
||||||
resolveObjectResponse: {},
|
|
||||||
});
|
|
||||||
this.checkFinishedLoading();
|
|
||||||
} else {
|
|
||||||
toast(i18n.t(msg.error), "danger");
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
switch (op) {
|
|
||||||
case UserOperation.Search: {
|
|
||||||
const searchResponse = wsJsonToRes<SearchResponse>(msg);
|
|
||||||
this.setState({ searchResponse });
|
|
||||||
window.scrollTo(0, 0);
|
|
||||||
this.checkFinishedLoading();
|
|
||||||
restoreScrollPosition(this.context);
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
case UserOperation.CreateCommentLike: {
|
|
||||||
const { comment_view } = wsJsonToRes<CommentResponse>(msg);
|
|
||||||
createCommentLikeRes(
|
|
||||||
comment_view,
|
|
||||||
this.state.searchResponse?.comments
|
|
||||||
);
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
case UserOperation.CreatePostLike: {
|
|
||||||
const { post_view } = wsJsonToRes<PostResponse>(msg);
|
|
||||||
createPostLikeFindRes(post_view, this.state.searchResponse?.posts);
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
case UserOperation.ListCommunities: {
|
|
||||||
const { communities } = wsJsonToRes<ListCommunitiesResponse>(msg);
|
|
||||||
this.setState({ communities });
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
case UserOperation.ResolveObject: {
|
|
||||||
const resolveObjectResponse = wsJsonToRes<ResolveObjectResponse>(msg);
|
|
||||||
this.setState({ resolveObjectResponse });
|
|
||||||
this.checkFinishedLoading();
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
checkFinishedLoading() {
|
|
||||||
if (this.state.searchResponse || this.state.resolveObjectResponse) {
|
|
||||||
this.setState({ searchLoading: false });
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -34,12 +34,6 @@ function getHost() {
|
||||||
return isBrowser() ? getExternalHost() : getInternalHost();
|
return isBrowser() ? getExternalHost() : getInternalHost();
|
||||||
}
|
}
|
||||||
|
|
||||||
function getWsHost() {
|
|
||||||
return isBrowser()
|
|
||||||
? window.lemmyConfig?.wsHost ?? getHost()
|
|
||||||
: process.env.LEMMY_UI_LEMMY_WS_HOST ?? getExternalHost();
|
|
||||||
}
|
|
||||||
|
|
||||||
function getBaseLocal(s = "") {
|
function getBaseLocal(s = "") {
|
||||||
return `http${s}://${getHost()}`;
|
return `http${s}://${getHost()}`;
|
||||||
}
|
}
|
||||||
|
@ -47,18 +41,20 @@ function getBaseLocal(s = "") {
|
||||||
export function getHttpBaseInternal() {
|
export function getHttpBaseInternal() {
|
||||||
return getBaseLocal(); // Don't use secure here
|
return getBaseLocal(); // Don't use secure here
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getHttpBaseExternal() {
|
||||||
|
return `http${getSecure()}://${getExternalHost()}`;
|
||||||
|
}
|
||||||
|
|
||||||
export function getHttpBase() {
|
export function getHttpBase() {
|
||||||
return getBaseLocal(getSecure());
|
return getBaseLocal(getSecure());
|
||||||
}
|
}
|
||||||
export function getWsUri() {
|
|
||||||
return `ws${getSecure()}://${getWsHost()}/api/v3/ws`;
|
|
||||||
}
|
|
||||||
export function isHttps() {
|
export function isHttps() {
|
||||||
return getSecure() === "s";
|
return getSecure() === "s";
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(`httpbase: ${getHttpBase()}`);
|
console.log(`httpbase: ${getHttpBase()}`);
|
||||||
console.log(`wsUri: ${getWsUri()}`);
|
|
||||||
console.log(`isHttps: ${isHttps()}`);
|
console.log(`isHttps: ${isHttps()}`);
|
||||||
|
|
||||||
// This is for html tags, don't include port
|
// This is for html tags, don't include port
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import { CommentView, GetSiteResponse, LemmyHttp } from "lemmy-js-client";
|
import { CommentView, GetSiteResponse } from "lemmy-js-client";
|
||||||
import type { ParsedQs } from "qs";
|
import type { ParsedQs } from "qs";
|
||||||
|
import { RequestState, WrappedLemmyHttp } from "./services/HttpService";
|
||||||
import { ErrorPageData } from "./utils";
|
import { ErrorPageData } from "./utils";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -7,7 +8,7 @@ import { ErrorPageData } from "./utils";
|
||||||
*/
|
*/
|
||||||
export interface IsoData {
|
export interface IsoData {
|
||||||
path: string;
|
path: string;
|
||||||
routeData: any[];
|
routeData: RequestState<any>[];
|
||||||
site_res: GetSiteResponse;
|
site_res: GetSiteResponse;
|
||||||
errorPageData?: ErrorPageData;
|
errorPageData?: ErrorPageData;
|
||||||
}
|
}
|
||||||
|
@ -28,7 +29,7 @@ declare global {
|
||||||
|
|
||||||
export interface InitialFetchRequest<T extends ParsedQs = ParsedQs> {
|
export interface InitialFetchRequest<T extends ParsedQs = ParsedQs> {
|
||||||
auth?: string;
|
auth?: string;
|
||||||
client: LemmyHttp;
|
client: WrappedLemmyHttp;
|
||||||
path: string;
|
path: string;
|
||||||
query: T;
|
query: T;
|
||||||
site: GetSiteResponse;
|
site: GetSiteResponse;
|
||||||
|
@ -69,6 +70,11 @@ export enum PurgeType {
|
||||||
Comment,
|
Comment,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export enum VoteType {
|
||||||
|
Upvote,
|
||||||
|
Downvote,
|
||||||
|
}
|
||||||
|
|
||||||
export interface CommentNodeI {
|
export interface CommentNodeI {
|
||||||
comment_view: CommentView;
|
comment_view: CommentView;
|
||||||
children: Array<CommentNodeI>;
|
children: Array<CommentNodeI>;
|
||||||
|
|
|
@ -22,10 +22,11 @@ import { Post } from "./components/post/post";
|
||||||
import { CreatePrivateMessage } from "./components/private_message/create-private-message";
|
import { CreatePrivateMessage } from "./components/private_message/create-private-message";
|
||||||
import { Search } from "./components/search";
|
import { Search } from "./components/search";
|
||||||
import { InitialFetchRequest } from "./interfaces";
|
import { InitialFetchRequest } from "./interfaces";
|
||||||
|
import { RequestState } from "./services/HttpService";
|
||||||
|
|
||||||
interface IRoutePropsWithFetch extends IRouteProps {
|
interface IRoutePropsWithFetch extends IRouteProps {
|
||||||
// TODO Make sure this one is good.
|
// TODO Make sure this one is good.
|
||||||
fetchInitialData?(req: InitialFetchRequest): Promise<any>[];
|
fetchInitialData?(req: InitialFetchRequest): Promise<RequestState<any>>[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export const routes: IRoutePropsWithFetch[] = [
|
export const routes: IRoutePropsWithFetch[] = [
|
||||||
|
|
25
src/shared/services/FirstLoadService.ts
Normal file
25
src/shared/services/FirstLoadService.ts
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
export class FirstLoadService {
|
||||||
|
#isFirstLoad: boolean;
|
||||||
|
static #instance: FirstLoadService;
|
||||||
|
|
||||||
|
private constructor() {
|
||||||
|
this.#isFirstLoad = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
get isFirstLoad() {
|
||||||
|
const isFirst = this.#isFirstLoad;
|
||||||
|
if (isFirst) {
|
||||||
|
this.#isFirstLoad = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return isFirst;
|
||||||
|
}
|
||||||
|
|
||||||
|
static get #Instance() {
|
||||||
|
return this.#instance ?? (this.#instance = new this());
|
||||||
|
}
|
||||||
|
|
||||||
|
static get isFirstLoad() {
|
||||||
|
return this.#Instance.isFirstLoad;
|
||||||
|
}
|
||||||
|
}
|
18
src/shared/services/HistoryService.ts
Normal file
18
src/shared/services/HistoryService.ts
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
import { History, createBrowserHistory } from "history";
|
||||||
|
|
||||||
|
export class HistoryService {
|
||||||
|
static #_instance: HistoryService;
|
||||||
|
#history: History;
|
||||||
|
|
||||||
|
private constructor() {
|
||||||
|
this.#history = createBrowserHistory();
|
||||||
|
}
|
||||||
|
|
||||||
|
static get #Instance() {
|
||||||
|
return this.#_instance ?? (this.#_instance = new this());
|
||||||
|
}
|
||||||
|
|
||||||
|
public static get history() {
|
||||||
|
return this.#Instance.#history;
|
||||||
|
}
|
||||||
|
}
|
96
src/shared/services/HttpService.ts
Normal file
96
src/shared/services/HttpService.ts
Normal file
|
@ -0,0 +1,96 @@
|
||||||
|
import { LemmyHttp } from "lemmy-js-client";
|
||||||
|
import { getHttpBase } from "../../shared/env";
|
||||||
|
import { i18n } from "../../shared/i18next";
|
||||||
|
import { toast } from "../../shared/utils";
|
||||||
|
|
||||||
|
type EmptyRequestState = {
|
||||||
|
state: "empty";
|
||||||
|
};
|
||||||
|
|
||||||
|
type LoadingRequestState = {
|
||||||
|
state: "loading";
|
||||||
|
};
|
||||||
|
|
||||||
|
type FailedRequestState = {
|
||||||
|
state: "failed";
|
||||||
|
msg: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type SuccessRequestState<T> = {
|
||||||
|
state: "success";
|
||||||
|
data: T;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Shows the state of an API request.
|
||||||
|
*
|
||||||
|
* Can be empty, loading, failed, or success
|
||||||
|
*/
|
||||||
|
export type RequestState<T> =
|
||||||
|
| EmptyRequestState
|
||||||
|
| LoadingRequestState
|
||||||
|
| FailedRequestState
|
||||||
|
| SuccessRequestState<T>;
|
||||||
|
|
||||||
|
export type WrappedLemmyHttp = {
|
||||||
|
[K in keyof LemmyHttp]: LemmyHttp[K] extends (...args: any[]) => any
|
||||||
|
? ReturnType<LemmyHttp[K]> extends Promise<infer U>
|
||||||
|
? (...args: Parameters<LemmyHttp[K]>) => Promise<RequestState<U>>
|
||||||
|
: (
|
||||||
|
...args: Parameters<LemmyHttp[K]>
|
||||||
|
) => Promise<RequestState<LemmyHttp[K]>>
|
||||||
|
: LemmyHttp[K];
|
||||||
|
};
|
||||||
|
|
||||||
|
class WrappedLemmyHttpClient {
|
||||||
|
#client: LemmyHttp;
|
||||||
|
|
||||||
|
constructor(client: LemmyHttp) {
|
||||||
|
this.#client = client;
|
||||||
|
|
||||||
|
for (const key of Object.getOwnPropertyNames(
|
||||||
|
Object.getPrototypeOf(this.#client)
|
||||||
|
)) {
|
||||||
|
if (key !== "constructor") {
|
||||||
|
WrappedLemmyHttpClient.prototype[key] = async (...args) => {
|
||||||
|
try {
|
||||||
|
const res = await this.#client[key](...args);
|
||||||
|
|
||||||
|
return {
|
||||||
|
data: res,
|
||||||
|
state: "success",
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`API error: ${error}`);
|
||||||
|
toast(i18n.t(error), "danger");
|
||||||
|
return {
|
||||||
|
state: "failed",
|
||||||
|
msg: error,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function wrapClient(client: LemmyHttp) {
|
||||||
|
return new WrappedLemmyHttpClient(client) as unknown as WrappedLemmyHttp; // unfortunately, this verbose cast is necessary
|
||||||
|
}
|
||||||
|
|
||||||
|
export class HttpService {
|
||||||
|
static #_instance: HttpService;
|
||||||
|
#client: WrappedLemmyHttp;
|
||||||
|
|
||||||
|
private constructor() {
|
||||||
|
this.#client = wrapClient(new LemmyHttp(getHttpBase()));
|
||||||
|
}
|
||||||
|
|
||||||
|
static get #Instance() {
|
||||||
|
return this.#_instance ?? (this.#_instance = new this());
|
||||||
|
}
|
||||||
|
|
||||||
|
public static get client() {
|
||||||
|
return this.#Instance.#client;
|
||||||
|
}
|
||||||
|
}
|
|
@ -2,7 +2,6 @@
|
||||||
import IsomorphicCookie from "isomorphic-cookie";
|
import IsomorphicCookie from "isomorphic-cookie";
|
||||||
import jwt_decode from "jwt-decode";
|
import jwt_decode from "jwt-decode";
|
||||||
import { LoginResponse, MyUserInfo } from "lemmy-js-client";
|
import { LoginResponse, MyUserInfo } from "lemmy-js-client";
|
||||||
import { BehaviorSubject } from "rxjs";
|
|
||||||
import { isHttps } from "../env";
|
import { isHttps } from "../env";
|
||||||
import { i18n } from "../i18next";
|
import { i18n } from "../i18next";
|
||||||
import { isAuthPath, isBrowser, toast } from "../utils";
|
import { isAuthPath, isBrowser, toast } from "../utils";
|
||||||
|
@ -19,18 +18,12 @@ interface JwtInfo {
|
||||||
}
|
}
|
||||||
|
|
||||||
export class UserService {
|
export class UserService {
|
||||||
private static _instance: UserService;
|
static #instance: UserService;
|
||||||
public myUserInfo?: MyUserInfo;
|
public myUserInfo?: MyUserInfo;
|
||||||
public jwtInfo?: JwtInfo;
|
public jwtInfo?: JwtInfo;
|
||||||
public unreadInboxCountSub: BehaviorSubject<number> =
|
|
||||||
new BehaviorSubject<number>(0);
|
|
||||||
public unreadReportCountSub: BehaviorSubject<number> =
|
|
||||||
new BehaviorSubject<number>(0);
|
|
||||||
public unreadApplicationCountSub: BehaviorSubject<number> =
|
|
||||||
new BehaviorSubject<number>(0);
|
|
||||||
|
|
||||||
private constructor() {
|
private constructor() {
|
||||||
this.setJwtInfo();
|
this.#setJwtInfo();
|
||||||
}
|
}
|
||||||
|
|
||||||
public login(res: LoginResponse) {
|
public login(res: LoginResponse) {
|
||||||
|
@ -39,7 +32,7 @@ export class UserService {
|
||||||
if (res.jwt) {
|
if (res.jwt) {
|
||||||
toast(i18n.t("logged_in"));
|
toast(i18n.t("logged_in"));
|
||||||
IsomorphicCookie.save("jwt", res.jwt, { expires, secure: isHttps() });
|
IsomorphicCookie.save("jwt", res.jwt, { expires, secure: isHttps() });
|
||||||
this.setJwtInfo();
|
this.#setJwtInfo();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -55,7 +48,7 @@ export class UserService {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public auth(throwErr = true): string | undefined {
|
public auth(throwErr = false): string | undefined {
|
||||||
const jwt = this.jwtInfo?.jwt;
|
const jwt = this.jwtInfo?.jwt;
|
||||||
if (jwt) {
|
if (jwt) {
|
||||||
return jwt;
|
return jwt;
|
||||||
|
@ -70,7 +63,7 @@ export class UserService {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private setJwtInfo() {
|
#setJwtInfo() {
|
||||||
const jwt: string | undefined = IsomorphicCookie.load("jwt");
|
const jwt: string | undefined = IsomorphicCookie.load("jwt");
|
||||||
|
|
||||||
if (jwt) {
|
if (jwt) {
|
||||||
|
@ -79,6 +72,6 @@ export class UserService {
|
||||||
}
|
}
|
||||||
|
|
||||||
public static get Instance() {
|
public static get Instance() {
|
||||||
return this._instance || (this._instance = new this());
|
return this.#instance || (this.#instance = new this());
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,68 +0,0 @@
|
||||||
import { Observable } from "rxjs";
|
|
||||||
import { share } from "rxjs/operators";
|
|
||||||
import {
|
|
||||||
ExponentialBackoff,
|
|
||||||
LRUBuffer,
|
|
||||||
Websocket as WS,
|
|
||||||
WebsocketBuilder,
|
|
||||||
} from "websocket-ts";
|
|
||||||
import { getWsUri } from "../env";
|
|
||||||
import { isBrowser } from "../utils";
|
|
||||||
|
|
||||||
export class WebSocketService {
|
|
||||||
private static _instance: WebSocketService;
|
|
||||||
private ws: WS;
|
|
||||||
public subject: Observable<any>;
|
|
||||||
|
|
||||||
private constructor() {
|
|
||||||
let firstConnect = true;
|
|
||||||
|
|
||||||
this.subject = new Observable((obs: any) => {
|
|
||||||
this.ws = new WebsocketBuilder(getWsUri())
|
|
||||||
.onMessage((_i, e) => {
|
|
||||||
try {
|
|
||||||
obs.next(JSON.parse(e.data.toString()));
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.onOpen(() => {
|
|
||||||
console.log(`Connected to ${getWsUri()}`);
|
|
||||||
|
|
||||||
if (!firstConnect) {
|
|
||||||
const res = {
|
|
||||||
reconnect: true,
|
|
||||||
};
|
|
||||||
obs.next(res);
|
|
||||||
}
|
|
||||||
firstConnect = false;
|
|
||||||
})
|
|
||||||
.onRetry(() => {
|
|
||||||
console.log("Retrying websocket connection...");
|
|
||||||
})
|
|
||||||
.onClose(() => {
|
|
||||||
console.error("Websocket closed.");
|
|
||||||
})
|
|
||||||
.withBackoff(new ExponentialBackoff(100, 7))
|
|
||||||
.withBuffer(new LRUBuffer(1000))
|
|
||||||
.build();
|
|
||||||
}).pipe(share());
|
|
||||||
|
|
||||||
if (isBrowser()) {
|
|
||||||
window.onunload = () => {
|
|
||||||
this.ws.close();
|
|
||||||
|
|
||||||
// Clears out scroll positions.
|
|
||||||
sessionStorage.clear();
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
public send(data: string) {
|
|
||||||
this.ws.send(data);
|
|
||||||
}
|
|
||||||
|
|
||||||
public static get Instance() {
|
|
||||||
return this._instance || (this._instance = new this());
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,2 +1,2 @@
|
||||||
|
export { HttpService } from "./HttpService";
|
||||||
export { UserService } from "./UserService";
|
export { UserService } from "./UserService";
|
||||||
export { WebSocketService } from "./WebSocketService";
|
|
||||||
|
|
|
@ -3,7 +3,9 @@ import emojiShortName from "emoji-short-name";
|
||||||
import {
|
import {
|
||||||
BlockCommunityResponse,
|
BlockCommunityResponse,
|
||||||
BlockPersonResponse,
|
BlockPersonResponse,
|
||||||
|
CommentAggregates,
|
||||||
Comment as CommentI,
|
Comment as CommentI,
|
||||||
|
CommentReplyView,
|
||||||
CommentReportView,
|
CommentReportView,
|
||||||
CommentSortType,
|
CommentSortType,
|
||||||
CommentView,
|
CommentView,
|
||||||
|
@ -14,9 +16,9 @@ import {
|
||||||
GetSiteResponse,
|
GetSiteResponse,
|
||||||
Language,
|
Language,
|
||||||
LemmyHttp,
|
LemmyHttp,
|
||||||
LemmyWebsocket,
|
|
||||||
MyUserInfo,
|
MyUserInfo,
|
||||||
Person,
|
Person,
|
||||||
|
PersonMentionView,
|
||||||
PersonView,
|
PersonView,
|
||||||
PostReportView,
|
PostReportView,
|
||||||
PostView,
|
PostView,
|
||||||
|
@ -24,8 +26,8 @@ import {
|
||||||
PrivateMessageView,
|
PrivateMessageView,
|
||||||
RegistrationApplicationView,
|
RegistrationApplicationView,
|
||||||
Search,
|
Search,
|
||||||
|
SearchType,
|
||||||
SortType,
|
SortType,
|
||||||
UploadImageResponse,
|
|
||||||
} from "lemmy-js-client";
|
} from "lemmy-js-client";
|
||||||
import { default as MarkdownIt } from "markdown-it";
|
import { default as MarkdownIt } from "markdown-it";
|
||||||
import markdown_it_container from "markdown-it-container";
|
import markdown_it_container from "markdown-it-container";
|
||||||
|
@ -37,22 +39,18 @@ import markdown_it_sup from "markdown-it-sup";
|
||||||
import Renderer from "markdown-it/lib/renderer";
|
import Renderer from "markdown-it/lib/renderer";
|
||||||
import Token from "markdown-it/lib/token";
|
import Token from "markdown-it/lib/token";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import { Subscription } from "rxjs";
|
|
||||||
import { delay, retryWhen, take } from "rxjs/operators";
|
|
||||||
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, languages } from "./i18next";
|
||||||
import { CommentNodeI, DataType, IsoData } from "./interfaces";
|
import { CommentNodeI, DataType, IsoData, VoteType } from "./interfaces";
|
||||||
import { UserService, WebSocketService } from "./services";
|
import { HttpService, UserService } from "./services";
|
||||||
|
|
||||||
let Tribute: any;
|
let Tribute: any;
|
||||||
if (isBrowser()) {
|
if (isBrowser()) {
|
||||||
Tribute = require("tributejs");
|
Tribute = require("tributejs");
|
||||||
}
|
}
|
||||||
|
|
||||||
export const wsClient = new LemmyWebsocket();
|
|
||||||
|
|
||||||
export const favIconUrl = "/static/assets/icons/favicon.svg";
|
export const favIconUrl = "/static/assets/icons/favicon.svg";
|
||||||
export const favIconPngUrl = "/static/assets/icons/apple-touch-icon.png";
|
export const favIconPngUrl = "/static/assets/icons/apple-touch-icon.png";
|
||||||
// TODO
|
// TODO
|
||||||
|
@ -206,12 +204,10 @@ export function hotRank(score: number, timeStr: string): number {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function mdToHtml(text: string) {
|
export function mdToHtml(text: string) {
|
||||||
// restore '>' character to fix quotes
|
|
||||||
return { __html: md.render(text) };
|
return { __html: md.render(text) };
|
||||||
}
|
}
|
||||||
|
|
||||||
export function mdToHtmlNoImages(text: string) {
|
export function mdToHtmlNoImages(text: string) {
|
||||||
// restore '>' character to fix quotes
|
|
||||||
return { __html: mdNoImages.render(text) };
|
return { __html: mdNoImages.render(text) };
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -561,86 +557,6 @@ export function pictrsDeleteToast(filename: string, deleteUrl: string) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
interface NotifyInfo {
|
|
||||||
name: string;
|
|
||||||
icon?: string;
|
|
||||||
link: string;
|
|
||||||
body?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function messageToastify(info: NotifyInfo, router: any) {
|
|
||||||
if (isBrowser()) {
|
|
||||||
const htmlBody = info.body ? md.render(info.body) : "";
|
|
||||||
const backgroundColor = `var(--light)`;
|
|
||||||
|
|
||||||
const toast = Toastify({
|
|
||||||
text: `${htmlBody}<br />${info.name}`,
|
|
||||||
avatar: info.icon,
|
|
||||||
backgroundColor: backgroundColor,
|
|
||||||
className: "text-dark",
|
|
||||||
close: true,
|
|
||||||
gravity: "top",
|
|
||||||
position: "right",
|
|
||||||
duration: 5000,
|
|
||||||
escapeMarkup: false,
|
|
||||||
onClick: () => {
|
|
||||||
if (toast) {
|
|
||||||
toast.hideToast();
|
|
||||||
router.history.push(info.link);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
toast.showToast();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function notifyPost(post_view: PostView, router: any) {
|
|
||||||
const info: NotifyInfo = {
|
|
||||||
name: post_view.community.name,
|
|
||||||
icon: post_view.community.icon,
|
|
||||||
link: `/post/${post_view.post.id}`,
|
|
||||||
body: post_view.post.name,
|
|
||||||
};
|
|
||||||
notify(info, router);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function notifyComment(comment_view: CommentView, router: any) {
|
|
||||||
const info: NotifyInfo = {
|
|
||||||
name: comment_view.creator.name,
|
|
||||||
icon: comment_view.creator.avatar,
|
|
||||||
link: `/comment/${comment_view.comment.id}`,
|
|
||||||
body: comment_view.comment.content,
|
|
||||||
};
|
|
||||||
notify(info, router);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function notifyPrivateMessage(pmv: PrivateMessageView, router: any) {
|
|
||||||
const info: NotifyInfo = {
|
|
||||||
name: pmv.creator.name,
|
|
||||||
icon: pmv.creator.avatar,
|
|
||||||
link: `/inbox`,
|
|
||||||
body: pmv.private_message.content,
|
|
||||||
};
|
|
||||||
notify(info, router);
|
|
||||||
}
|
|
||||||
|
|
||||||
function notify(info: NotifyInfo, router: any) {
|
|
||||||
messageToastify(info, router);
|
|
||||||
|
|
||||||
if (Notification.permission !== "granted") Notification.requestPermission();
|
|
||||||
else {
|
|
||||||
var notification = new Notification(info.name, {
|
|
||||||
...{ body: info.body },
|
|
||||||
...(info.icon && { icon: info.icon }),
|
|
||||||
});
|
|
||||||
|
|
||||||
notification.onclick = (ev: Event): any => {
|
|
||||||
ev.preventDefault();
|
|
||||||
router.history.push(info.link);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function setupTribute() {
|
export function setupTribute() {
|
||||||
return new Tribute({
|
return new Tribute({
|
||||||
noMatchTemplate: function () {
|
noMatchTemplate: function () {
|
||||||
|
@ -877,15 +793,12 @@ interface PersonTribute {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function personSearch(text: string): Promise<PersonTribute[]> {
|
async function personSearch(text: string): Promise<PersonTribute[]> {
|
||||||
const users = (await fetchUsers(text)).users;
|
const usersResponse = await fetchUsers(text);
|
||||||
const persons: PersonTribute[] = users.map(pv => {
|
|
||||||
const tribute: PersonTribute = {
|
return usersResponse.map(pv => ({
|
||||||
key: `@${pv.person.name}@${hostname(pv.person.actor_id)}`,
|
key: `@${pv.person.name}@${hostname(pv.person.actor_id)}`,
|
||||||
view: pv,
|
view: pv,
|
||||||
};
|
}));
|
||||||
return tribute;
|
|
||||||
});
|
|
||||||
return persons;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface CommunityTribute {
|
interface CommunityTribute {
|
||||||
|
@ -894,15 +807,12 @@ interface CommunityTribute {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function communitySearch(text: string): Promise<CommunityTribute[]> {
|
async function communitySearch(text: string): Promise<CommunityTribute[]> {
|
||||||
const comms = (await fetchCommunities(text)).communities;
|
const communitiesResponse = await fetchCommunities(text);
|
||||||
const communities: CommunityTribute[] = comms.map(cv => {
|
|
||||||
const tribute: CommunityTribute = {
|
return communitiesResponse.map(cv => ({
|
||||||
key: `!${cv.community.name}@${hostname(cv.community.actor_id)}`,
|
key: `!${cv.community.name}@${hostname(cv.community.actor_id)}`,
|
||||||
view: cv,
|
view: cv,
|
||||||
};
|
}));
|
||||||
return tribute;
|
|
||||||
});
|
|
||||||
return communities;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getRecipientIdFromProps(props: any): number {
|
export function getRecipientIdFromProps(props: any): number {
|
||||||
|
@ -921,42 +831,128 @@ export function getCommentIdFromProps(props: any): number | undefined {
|
||||||
return id ? Number(id) : undefined;
|
return id ? Number(id) : undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function editCommentRes(data: CommentView, comments?: CommentView[]) {
|
type ImmutableListKey =
|
||||||
const found = comments?.find(c => c.comment.id == data.comment.id);
|
| "comment"
|
||||||
if (found) {
|
| "comment_reply"
|
||||||
found.comment.content = data.comment.content;
|
| "person_mention"
|
||||||
found.comment.distinguished = data.comment.distinguished;
|
| "community"
|
||||||
found.comment.updated = data.comment.updated;
|
| "private_message"
|
||||||
found.comment.removed = data.comment.removed;
|
| "post"
|
||||||
found.comment.deleted = data.comment.deleted;
|
| "post_report"
|
||||||
found.counts.upvotes = data.counts.upvotes;
|
| "comment_report"
|
||||||
found.counts.downvotes = data.counts.downvotes;
|
| "private_message_report"
|
||||||
found.counts.score = data.counts.score;
|
| "registration_application";
|
||||||
}
|
|
||||||
|
function editListImmutable<
|
||||||
|
T extends { [key in F]: { id: number } },
|
||||||
|
F extends ImmutableListKey
|
||||||
|
>(fieldName: F, data: T, list: T[]): T[] {
|
||||||
|
return [
|
||||||
|
...list.map(c => (c[fieldName].id === data[fieldName].id ? data : c)),
|
||||||
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
export function saveCommentRes(data: CommentView, comments?: CommentView[]) {
|
export function editComment(
|
||||||
const found = comments?.find(c => c.comment.id == data.comment.id);
|
data: CommentView,
|
||||||
if (found) {
|
comments: CommentView[]
|
||||||
found.saved = data.saved;
|
): CommentView[] {
|
||||||
}
|
return editListImmutable("comment", data, comments);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function editCommentReply(
|
||||||
|
data: CommentReplyView,
|
||||||
|
replies: CommentReplyView[]
|
||||||
|
): CommentReplyView[] {
|
||||||
|
return editListImmutable("comment_reply", data, replies);
|
||||||
|
}
|
||||||
|
|
||||||
|
interface WithComment {
|
||||||
|
comment: CommentI;
|
||||||
|
counts: CommentAggregates;
|
||||||
|
my_vote?: number;
|
||||||
|
saved: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function editMention(
|
||||||
|
data: PersonMentionView,
|
||||||
|
comments: PersonMentionView[]
|
||||||
|
): PersonMentionView[] {
|
||||||
|
return editListImmutable("person_mention", data, comments);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function editCommunity(
|
||||||
|
data: CommunityView,
|
||||||
|
communities: CommunityView[]
|
||||||
|
): CommunityView[] {
|
||||||
|
return editListImmutable("community", data, communities);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function editPrivateMessage(
|
||||||
|
data: PrivateMessageView,
|
||||||
|
messages: PrivateMessageView[]
|
||||||
|
): PrivateMessageView[] {
|
||||||
|
return editListImmutable("private_message", data, messages);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function editPost(data: PostView, posts: PostView[]): PostView[] {
|
||||||
|
return editListImmutable("post", data, posts);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function editPostReport(
|
||||||
|
data: PostReportView,
|
||||||
|
reports: PostReportView[]
|
||||||
|
) {
|
||||||
|
return editListImmutable("post_report", data, reports);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function editCommentReport(
|
||||||
|
data: CommentReportView,
|
||||||
|
reports: CommentReportView[]
|
||||||
|
): CommentReportView[] {
|
||||||
|
return editListImmutable("comment_report", data, reports);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function editPrivateMessageReport(
|
||||||
|
data: PrivateMessageReportView,
|
||||||
|
reports: PrivateMessageReportView[]
|
||||||
|
): PrivateMessageReportView[] {
|
||||||
|
return editListImmutable("private_message_report", data, reports);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function editRegistrationApplication(
|
||||||
|
data: RegistrationApplicationView,
|
||||||
|
apps: RegistrationApplicationView[]
|
||||||
|
): RegistrationApplicationView[] {
|
||||||
|
return editListImmutable("registration_application", data, apps);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function editWith<D extends WithComment, L extends WithComment>(
|
||||||
|
{ comment, counts, saved, my_vote }: D,
|
||||||
|
list: L[]
|
||||||
|
) {
|
||||||
|
return [
|
||||||
|
...list.map(c =>
|
||||||
|
c.comment.id === comment.id
|
||||||
|
? { ...c, comment, counts, saved, my_vote }
|
||||||
|
: c
|
||||||
|
),
|
||||||
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
export function updatePersonBlock(
|
export function updatePersonBlock(
|
||||||
data: BlockPersonResponse,
|
data: BlockPersonResponse,
|
||||||
myUserInfo: MyUserInfo | undefined = UserService.Instance.myUserInfo
|
myUserInfo: MyUserInfo | undefined = UserService.Instance.myUserInfo
|
||||||
) {
|
) {
|
||||||
const mui = myUserInfo;
|
if (myUserInfo) {
|
||||||
if (mui) {
|
|
||||||
if (data.blocked) {
|
if (data.blocked) {
|
||||||
mui.person_blocks.push({
|
myUserInfo.person_blocks.push({
|
||||||
person: mui.local_user_view.person,
|
person: myUserInfo.local_user_view.person,
|
||||||
target: data.person_view.person,
|
target: data.person_view.person,
|
||||||
});
|
});
|
||||||
toast(`${i18n.t("blocked")} ${data.person_view.person.name}`);
|
toast(`${i18n.t("blocked")} ${data.person_view.person.name}`);
|
||||||
} else {
|
} else {
|
||||||
mui.person_blocks = mui.person_blocks.filter(
|
myUserInfo.person_blocks = myUserInfo.person_blocks.filter(
|
||||||
i => i.target.id != data.person_view.person.id
|
i => i.target.id !== data.person_view.person.id
|
||||||
);
|
);
|
||||||
toast(`${i18n.t("unblocked")} ${data.person_view.person.name}`);
|
toast(`${i18n.t("unblocked")} ${data.person_view.person.name}`);
|
||||||
}
|
}
|
||||||
|
@ -967,127 +963,22 @@ export function updateCommunityBlock(
|
||||||
data: BlockCommunityResponse,
|
data: BlockCommunityResponse,
|
||||||
myUserInfo: MyUserInfo | undefined = UserService.Instance.myUserInfo
|
myUserInfo: MyUserInfo | undefined = UserService.Instance.myUserInfo
|
||||||
) {
|
) {
|
||||||
const mui = myUserInfo;
|
if (myUserInfo) {
|
||||||
if (mui) {
|
|
||||||
if (data.blocked) {
|
if (data.blocked) {
|
||||||
mui.community_blocks.push({
|
myUserInfo.community_blocks.push({
|
||||||
person: mui.local_user_view.person,
|
person: myUserInfo.local_user_view.person,
|
||||||
community: data.community_view.community,
|
community: data.community_view.community,
|
||||||
});
|
});
|
||||||
toast(`${i18n.t("blocked")} ${data.community_view.community.name}`);
|
toast(`${i18n.t("blocked")} ${data.community_view.community.name}`);
|
||||||
} else {
|
} else {
|
||||||
mui.community_blocks = mui.community_blocks.filter(
|
myUserInfo.community_blocks = myUserInfo.community_blocks.filter(
|
||||||
i => i.community.id != data.community_view.community.id
|
i => i.community.id !== data.community_view.community.id
|
||||||
);
|
);
|
||||||
toast(`${i18n.t("unblocked")} ${data.community_view.community.name}`);
|
toast(`${i18n.t("unblocked")} ${data.community_view.community.name}`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function createCommentLikeRes(
|
|
||||||
data: CommentView,
|
|
||||||
comments?: CommentView[]
|
|
||||||
) {
|
|
||||||
const found = comments?.find(c => c.comment.id === data.comment.id);
|
|
||||||
if (found) {
|
|
||||||
found.counts.score = data.counts.score;
|
|
||||||
found.counts.upvotes = data.counts.upvotes;
|
|
||||||
found.counts.downvotes = data.counts.downvotes;
|
|
||||||
if (data.my_vote !== null) {
|
|
||||||
found.my_vote = data.my_vote;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function createPostLikeFindRes(data: PostView, posts?: PostView[]) {
|
|
||||||
const found = posts?.find(p => p.post.id == data.post.id);
|
|
||||||
if (found) {
|
|
||||||
createPostLikeRes(data, found);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function createPostLikeRes(data: PostView, post_view?: PostView) {
|
|
||||||
if (post_view) {
|
|
||||||
post_view.counts.score = data.counts.score;
|
|
||||||
post_view.counts.upvotes = data.counts.upvotes;
|
|
||||||
post_view.counts.downvotes = data.counts.downvotes;
|
|
||||||
if (data.my_vote !== null) {
|
|
||||||
post_view.my_vote = data.my_vote;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function editPostFindRes(data: PostView, posts?: PostView[]) {
|
|
||||||
const found = posts?.find(p => p.post.id == data.post.id);
|
|
||||||
if (found) {
|
|
||||||
editPostRes(data, found);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function editPostRes(data: PostView, post: PostView) {
|
|
||||||
if (post) {
|
|
||||||
post.post.url = data.post.url;
|
|
||||||
post.post.name = data.post.name;
|
|
||||||
post.post.nsfw = data.post.nsfw;
|
|
||||||
post.post.deleted = data.post.deleted;
|
|
||||||
post.post.removed = data.post.removed;
|
|
||||||
post.post.featured_community = data.post.featured_community;
|
|
||||||
post.post.featured_local = data.post.featured_local;
|
|
||||||
post.post.body = data.post.body;
|
|
||||||
post.post.locked = data.post.locked;
|
|
||||||
post.saved = data.saved;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO possible to make these generic?
|
|
||||||
export function updatePostReportRes(
|
|
||||||
data: PostReportView,
|
|
||||||
reports?: PostReportView[]
|
|
||||||
) {
|
|
||||||
const found = reports?.find(p => p.post_report.id == data.post_report.id);
|
|
||||||
if (found) {
|
|
||||||
found.post_report = data.post_report;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function updateCommentReportRes(
|
|
||||||
data: CommentReportView,
|
|
||||||
reports?: CommentReportView[]
|
|
||||||
) {
|
|
||||||
const found = reports?.find(
|
|
||||||
c => c.comment_report.id == data.comment_report.id
|
|
||||||
);
|
|
||||||
if (found) {
|
|
||||||
found.comment_report = data.comment_report;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function updatePrivateMessageReportRes(
|
|
||||||
data: PrivateMessageReportView,
|
|
||||||
reports?: PrivateMessageReportView[]
|
|
||||||
) {
|
|
||||||
const found = reports?.find(
|
|
||||||
c => c.private_message_report.id == data.private_message_report.id
|
|
||||||
);
|
|
||||||
if (found) {
|
|
||||||
found.private_message_report = data.private_message_report;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function updateRegistrationApplicationRes(
|
|
||||||
data: RegistrationApplicationView,
|
|
||||||
applications?: RegistrationApplicationView[]
|
|
||||||
) {
|
|
||||||
const found = applications?.find(
|
|
||||||
ra => ra.registration_application.id == data.registration_application.id
|
|
||||||
);
|
|
||||||
if (found) {
|
|
||||||
found.registration_application = data.registration_application;
|
|
||||||
found.admin = data.admin;
|
|
||||||
found.creator_local_user = data.creator_local_user;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function commentsToFlatNodes(comments: CommentView[]): CommentNodeI[] {
|
export function commentsToFlatNodes(comments: CommentView[]): CommentNodeI[] {
|
||||||
const nodes: CommentNodeI[] = [];
|
const nodes: CommentNodeI[] = [];
|
||||||
for (const comment of comments) {
|
for (const comment of comments) {
|
||||||
|
@ -1180,6 +1071,7 @@ export function getDepthFromComment(comment?: CommentI): number | undefined {
|
||||||
return len ? len - 2 : undefined;
|
return len ? len - 2 : undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// TODO make immutable
|
||||||
export function insertCommentIntoTree(
|
export function insertCommentIntoTree(
|
||||||
tree: CommentNodeI[],
|
tree: CommentNodeI[],
|
||||||
cv: CommentView,
|
cv: CommentView,
|
||||||
|
@ -1276,20 +1168,6 @@ export function setIsoData(context: any): IsoData {
|
||||||
} else return context.router.staticContext;
|
} else return context.router.staticContext;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function wsSubscribe(parseMessage: any): Subscription | undefined {
|
|
||||||
if (isBrowser()) {
|
|
||||||
return WebSocketService.Instance.subject
|
|
||||||
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
|
|
||||||
.subscribe(
|
|
||||||
msg => parseMessage(msg),
|
|
||||||
err => console.error(err),
|
|
||||||
() => console.log("complete")
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
moment.updateLocale("en", {
|
moment.updateLocale("en", {
|
||||||
relativeTime: {
|
relativeTime: {
|
||||||
future: "in %s",
|
future: "in %s",
|
||||||
|
@ -1353,32 +1231,30 @@ export function personToChoice(pvs: PersonView): Choice {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function fetchCommunities(q: string) {
|
function fetchSearchResults(q: string, type_: SearchType) {
|
||||||
const form: Search = {
|
const form: Search = {
|
||||||
q,
|
q,
|
||||||
type_: "Communities",
|
type_,
|
||||||
sort: "TopAll",
|
sort: "TopAll",
|
||||||
listing_type: "All",
|
listing_type: "All",
|
||||||
page: 1,
|
page: 1,
|
||||||
limit: fetchLimit,
|
limit: fetchLimit,
|
||||||
auth: myAuth(false),
|
auth: myAuth(),
|
||||||
};
|
};
|
||||||
const client = new LemmyHttp(getHttpBase());
|
|
||||||
return client.search(form);
|
return HttpService.client.search(form);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function fetchCommunities(q: string) {
|
||||||
|
const res = await fetchSearchResults(q, "Communities");
|
||||||
|
|
||||||
|
return res.state === "success" ? res.data.communities : [];
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function fetchUsers(q: string) {
|
export async function fetchUsers(q: string) {
|
||||||
const form: Search = {
|
const res = await fetchSearchResults(q, "Users");
|
||||||
q,
|
|
||||||
type_: "Users",
|
return res.state === "success" ? res.data.users : [];
|
||||||
sort: "TopAll",
|
|
||||||
listing_type: "All",
|
|
||||||
page: 1,
|
|
||||||
limit: fetchLimit,
|
|
||||||
auth: myAuth(false),
|
|
||||||
};
|
|
||||||
const client = new LemmyHttp(getHttpBase());
|
|
||||||
return client.search(form);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function communitySelectName(cv: CommunityView): string {
|
export function communitySelectName(cv: CommunityView): string {
|
||||||
|
@ -1398,7 +1274,7 @@ export function initializeSite(site?: GetSiteResponse) {
|
||||||
UserService.Instance.myUserInfo = site?.my_user;
|
UserService.Instance.myUserInfo = site?.my_user;
|
||||||
i18n.changeLanguage(getLanguages()[0]);
|
i18n.changeLanguage(getLanguages()[0]);
|
||||||
if (site) {
|
if (site) {
|
||||||
setupEmojiDataModel(site.custom_emojis);
|
setupEmojiDataModel(site.custom_emojis ?? []);
|
||||||
}
|
}
|
||||||
setupMarkdown();
|
setupMarkdown();
|
||||||
}
|
}
|
||||||
|
@ -1429,8 +1305,12 @@ export function isBanned(ps: Person): boolean {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function myAuth(throwErr = true): string | undefined {
|
export function myAuth(): string | undefined {
|
||||||
return UserService.Instance.auth(throwErr);
|
return UserService.Instance.auth();
|
||||||
|
}
|
||||||
|
|
||||||
|
export function myAuthRequired(): string {
|
||||||
|
return UserService.Instance.auth(true) ?? "";
|
||||||
}
|
}
|
||||||
|
|
||||||
export function enableDownvotes(siteRes: GetSiteResponse): boolean {
|
export function enableDownvotes(siteRes: GetSiteResponse): boolean {
|
||||||
|
@ -1528,12 +1408,6 @@ export function selectableLanguages(
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function uploadImage(image: File): Promise<UploadImageResponse> {
|
|
||||||
const client = new LemmyHttp(getHttpBase());
|
|
||||||
|
|
||||||
return client.uploadImage({ image });
|
|
||||||
}
|
|
||||||
|
|
||||||
interface EmojiMartCategory {
|
interface EmojiMartCategory {
|
||||||
id: string;
|
id: string;
|
||||||
name: string;
|
name: string;
|
||||||
|
@ -1594,7 +1468,7 @@ export function getQueryString<T extends Record<string, string | undefined>>(
|
||||||
}
|
}
|
||||||
|
|
||||||
export function isAuthPath(pathname: string) {
|
export function isAuthPath(pathname: string) {
|
||||||
return /create_.*|inbox|settings|setup|admin|reports|registration_applications/g.test(
|
return /create_.*|inbox|settings|admin|reports|registration_applications/g.test(
|
||||||
pathname
|
pathname
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1608,3 +1482,11 @@ export function share(shareData: ShareData) {
|
||||||
navigator.share(shareData);
|
navigator.share(shareData);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function newVote(voteType: VoteType, myVote?: number): number {
|
||||||
|
if (voteType == VoteType.Upvote) {
|
||||||
|
return myVote == 1 ? 0 : 1;
|
||||||
|
} else {
|
||||||
|
return myVote == -1 ? 0 : -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -69,10 +69,10 @@ const createServerConfig = (_env, mode) => {
|
||||||
});
|
});
|
||||||
|
|
||||||
if (mode === "development") {
|
if (mode === "development") {
|
||||||
config.cache = {
|
// config.cache = {
|
||||||
type: "filesystem",
|
// type: "filesystem",
|
||||||
name: "server",
|
// name: "server",
|
||||||
};
|
// };
|
||||||
|
|
||||||
config.plugins.push(
|
config.plugins.push(
|
||||||
new RunNodeWebpackPlugin({
|
new RunNodeWebpackPlugin({
|
||||||
|
@ -94,7 +94,7 @@ const createClientConfig = (_env, mode) => {
|
||||||
plugins: [
|
plugins: [
|
||||||
...base.plugins,
|
...base.plugins,
|
||||||
new ServiceWorkerPlugin({
|
new ServiceWorkerPlugin({
|
||||||
enableInDevelopment: true,
|
enableInDevelopment: mode !== "development", // this may seem counterintuitive, but it is correct
|
||||||
workbox: {
|
workbox: {
|
||||||
modifyURLPrefix: {
|
modifyURLPrefix: {
|
||||||
"/": "/static/",
|
"/": "/static/",
|
||||||
|
@ -149,10 +149,10 @@ const createClientConfig = (_env, mode) => {
|
||||||
});
|
});
|
||||||
|
|
||||||
if (mode === "development") {
|
if (mode === "development") {
|
||||||
config.cache = {
|
// config.cache = {
|
||||||
type: "filesystem",
|
// type: "filesystem",
|
||||||
name: "client",
|
// name: "client",
|
||||||
};
|
// };
|
||||||
}
|
}
|
||||||
|
|
||||||
return config;
|
return config;
|
||||||
|
|
Loading…
Reference in a new issue