mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-22 12:21:13 +00:00
Merge branch 'main' into patch-1
This commit is contained in:
n3oney
commit
a7d91d3f2c
134 changed files with 40742 additions and 28371 deletions
|
|
@ -3,11 +3,12 @@
|
|||
"env": {
|
||||
"browser": true
|
||||
},
|
||||
"plugins": ["@typescript-eslint"],
|
||||
"plugins": ["@typescript-eslint", "jsx-a11y"],
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:inferno/recommended"
|
||||
"plugin:inferno/recommended",
|
||||
"plugin:jsx-a11y/recommended"
|
||||
],
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"parserOptions": {
|
||||
|
|
@ -20,6 +21,16 @@
|
|||
"@typescript-eslint/explicit-module-boundary-types": 0,
|
||||
"@typescript-eslint/no-empty-function": 0,
|
||||
"arrow-body-style": 0,
|
||||
"jsx-a11y/alt-text": 1,
|
||||
"jsx-a11y/anchor-is-valid": 1,
|
||||
"jsx-a11y/aria-activedescendant-has-tabindex": 1,
|
||||
"jsx-a11y/aria-role": 1,
|
||||
"jsx-a11y/click-events-have-key-events": 1,
|
||||
"jsx-a11y/iframe-has-title": 1,
|
||||
"jsx-a11y/interactive-supports-focus": 1,
|
||||
"jsx-a11y/no-redundant-roles": 1,
|
||||
"jsx-a11y/no-static-element-interactions": 1,
|
||||
"jsx-a11y/role-has-required-aria-props": 1,
|
||||
"curly": 0,
|
||||
"eol-last": 0,
|
||||
"eqeqeq": 0,
|
||||
|
|
|
|||
2
.github/CODEOWNERS
vendored
2
.github/CODEOWNERS
vendored
|
|
@ -1 +1 @@
|
|||
* @dessalines @SleeplessOne1917
|
||||
* @dessalines @SleeplessOne1917 @alectrocute
|
||||
|
|
|
|||
2
.github/ISSUE_TEMPLATE/BUG_REPORT.yml
vendored
2
.github/ISSUE_TEMPLATE/BUG_REPORT.yml
vendored
|
|
@ -8,7 +8,7 @@ body:
|
|||
value: |
|
||||
Found a bug? Please fill out the sections below. 👍
|
||||
Thanks for taking the time to fill out this bug report!
|
||||
For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy)
|
||||
For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy/issues/new/choose)
|
||||
- type: checkboxes
|
||||
attributes:
|
||||
label: Requirements
|
||||
|
|
|
|||
6
.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml
vendored
6
.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml
vendored
|
|
@ -1,16 +1,16 @@
|
|||
name: "\U0001F680 Feature request"
|
||||
description: Suggest an idea for improving Lemmy
|
||||
description: Suggest an idea for improving Lemmy's UI
|
||||
labels: ["enhancement"]
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
Have a suggestion about Lemmy's UI?
|
||||
For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy)
|
||||
For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy/issues/new/choose)
|
||||
- type: checkboxes
|
||||
attributes:
|
||||
label: Requirements
|
||||
description: Before you create a bug report please do the following.
|
||||
description: Before you create a feature request please do the following.
|
||||
options:
|
||||
- label: Is this a feature request? For questions or discussions use https://lemmy.ml/c/lemmy_support
|
||||
required: true
|
||||
|
|
|
|||
|
|
@ -1,2 +1,3 @@
|
|||
src/shared/translations
|
||||
lemmy-translations
|
||||
src/assets/css/themes/*.css
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Subproject commit f45ddff206adb52ab0ac7555bf14978edac5d2f2
|
||||
Subproject commit 7fc71d0860bbe5c6d620ec27112350ffe5b9229c
|
||||
29
package.json
29
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "lemmy-ui",
|
||||
"version": "0.18.0-rc.1",
|
||||
"version": "0.18.0-rc.3",
|
||||
"description": "An isomorphic UI for lemmy",
|
||||
"repository": "https://github.com/LemmyNet/lemmy-ui",
|
||||
"license": "AGPL-3.0",
|
||||
|
|
@ -12,14 +12,26 @@
|
|||
"build:prod": "webpack --mode=production",
|
||||
"clean": "yarn run rimraf dist",
|
||||
"dev": "yarn start",
|
||||
"lint": "node generate_translations.js && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx \"src/**\" && prettier --check \"src/**/*.{ts,tsx,js,css,scss}\"",
|
||||
"lint": "yarn translations:generate && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx \"src/**\" && prettier --check \"src/**/*.{ts,tsx,js,css,scss}\"",
|
||||
"prepare": "husky install",
|
||||
"start": "yarn build:dev --watch"
|
||||
"start": "yarn build:dev --watch",
|
||||
"themes:build": "sass src/assets/css/themes/:src/assets/css/themes",
|
||||
"themes:watch": "sass --watch src/assets/css/themes/:src/assets/css/themes",
|
||||
"translations:generate": "node generate_translations.js",
|
||||
"translations:init": "git submodule init && yarn translations:update",
|
||||
"translations:update": "git submodule update --remote --recursive"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{ts,tsx,js}": ["prettier --write", "eslint --fix"],
|
||||
"*.{css, scss}": ["prettier --write"],
|
||||
"package.json": ["sortpack"]
|
||||
"*.{ts,tsx,js}": [
|
||||
"prettier --write",
|
||||
"eslint --fix"
|
||||
],
|
||||
"*.{css, scss}": [
|
||||
"prettier --write"
|
||||
],
|
||||
"package.json": [
|
||||
"sortpack"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-proposal-decorators": "^7.21.0",
|
||||
|
|
@ -54,7 +66,7 @@
|
|||
"inferno-server": "^8.1.1",
|
||||
"isomorphic-cookie": "^1.2.4",
|
||||
"jwt-decode": "^3.1.2",
|
||||
"lemmy-js-client": "0.17.2-rc.24",
|
||||
"lemmy-js-client": "0.18.0-rc.1",
|
||||
"lodash": "^4.17.21",
|
||||
"markdown-it": "^13.0.1",
|
||||
"markdown-it-container": "^3.0.0",
|
||||
|
|
@ -94,9 +106,9 @@
|
|||
"@types/toastify-js": "^1.11.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.59.5",
|
||||
"@typescript-eslint/parser": "^5.59.5",
|
||||
"bootswatch": "^5.2.3",
|
||||
"eslint": "^8.40.0",
|
||||
"eslint-plugin-inferno": "^7.32.2",
|
||||
"eslint-plugin-jsx-a11y": "^6.7.1",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"husky": "^8.0.3",
|
||||
"import-sort-style-module": "^6.0.0",
|
||||
|
|
@ -109,6 +121,7 @@
|
|||
"sortpack": "^2.3.4",
|
||||
"style-loader": "^3.3.2",
|
||||
"terser": "^5.17.3",
|
||||
"tsconfig-paths-webpack-plugin": "^4.0.1",
|
||||
"typescript": "^5.0.4",
|
||||
"webpack-dev-server": "4.15.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
}
|
||||
|
||||
.upvote:hover {
|
||||
color: var(--info);
|
||||
color: var(--bs-info);
|
||||
}
|
||||
|
||||
.upvote {
|
||||
|
|
@ -29,14 +29,14 @@
|
|||
}
|
||||
|
||||
.downvote:hover {
|
||||
color: var(--danger);
|
||||
color: var(--bs-danger);
|
||||
}
|
||||
|
||||
.downvote {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.custom-select {
|
||||
.form-select {
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
}
|
||||
|
||||
.md-div p:last-child {
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.md-div img {
|
||||
|
|
@ -84,12 +84,8 @@
|
|||
margin-top: -6.5px;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.post-title a:visited {
|
||||
color: var(--gray) !important;
|
||||
color: var(--bs-gray) !important;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
@ -179,7 +175,7 @@
|
|||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 2px solid var(--secondary);
|
||||
border-left: 2px solid var(--bs-secondary);
|
||||
margin: 0.5em 5px;
|
||||
padding: 0.1em 5px;
|
||||
}
|
||||
|
|
@ -218,7 +214,7 @@ blockquote {
|
|||
}
|
||||
|
||||
hr {
|
||||
border-top: 1px solid var(--light);
|
||||
border-top: 1px solid var(--bs-light);
|
||||
}
|
||||
|
||||
.emoji {
|
||||
|
|
@ -270,6 +266,14 @@ hr {
|
|||
-ms-transform: scale(1.2);
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO: Fix this in markup rather than this overly specific selector:
|
||||
* https://getbootstrap.com/docs/5.3/components/buttons/#block-buttons
|
||||
*/
|
||||
.btn.d-block + .btn.d-block {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.mini-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -367,16 +371,16 @@ br.big {
|
|||
margin-top: 2px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
background: var(--light);
|
||||
background: var(--bs-light);
|
||||
}
|
||||
|
||||
.tribute-container li {
|
||||
padding: 5px 5px;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tribute-container li.highlight {
|
||||
background: var(--primary);
|
||||
background: var(--bs-primary);
|
||||
}
|
||||
|
||||
.tribute-container li span {
|
||||
|
|
@ -410,13 +414,22 @@ br.big {
|
|||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.lang-select-action {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.lang-select-action:focus {
|
||||
width: auto;
|
||||
}
|
||||
em-emoji-picker {
|
||||
#emoji-picker {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.skip-link {
|
||||
top: -40px;
|
||||
transition: top 0.3s ease;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.skip-link {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
top: 0;
|
||||
}
|
||||
|
|
|
|||
7
src/assets/css/themes/_variables.darkly-red.scss
Normal file
7
src/assets/css/themes/_variables.darkly-red.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
@import "variables.darkly";
|
||||
|
||||
$primary: $blue;
|
||||
$secondary: #444;
|
||||
$light: $gray-800;
|
||||
|
||||
$link-color: $red;
|
||||
|
|
@ -1,35 +1,34 @@
|
|||
@import "./variables";
|
||||
|
||||
// Colors
|
||||
$white: #fff;
|
||||
$gray-100: #f8f9fa;
|
||||
$gray-200: #ebebeb;
|
||||
$gray-300: #dee2e6;
|
||||
$gray-400: #ced4da;
|
||||
$gray-500: #adb5bd;
|
||||
$gray-600: #888;
|
||||
$gray-700: #444;
|
||||
$gray-800: #303030;
|
||||
$gray-900: #222;
|
||||
$black: #000;
|
||||
|
||||
$blue: #375a7f;
|
||||
$indigo: #6610f2;
|
||||
$purple: #6f42c1;
|
||||
$pink: #e83e8c;
|
||||
$red: #e74c3c;
|
||||
$orange: #fd7e14;
|
||||
$yellow: #f39c12;
|
||||
$green: #00bc8c;
|
||||
$teal: #20c997;
|
||||
$cyan: #3498db;
|
||||
$primary: $blue;
|
||||
|
||||
$primary: $green;
|
||||
$secondary: $gray-700;
|
||||
$success: $green;
|
||||
$info: $cyan;
|
||||
$warning: $yellow;
|
||||
$danger: $red;
|
||||
$dark: $gray-300;
|
||||
$yiq-contrasted-threshold: 175;
|
||||
$body-bg: $gray-900;
|
||||
|
||||
$body-color: $gray-300;
|
||||
$body-bg: $gray-900;
|
||||
$link-color: $success;
|
||||
$border-color: rgba($body-color, 0.25);
|
||||
$mark-bg: #333;
|
||||
$text-muted: $gray-600;
|
||||
$yiq-contrasted-threshold: 175;
|
||||
|
||||
$font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol";
|
||||
|
|
@ -37,28 +36,10 @@ $font-size-base: 0.9375rem;
|
|||
$h1-font-size: 3rem;
|
||||
$h2-font-size: 2.5rem;
|
||||
$h3-font-size: 2rem;
|
||||
$text-muted: $gray-600;
|
||||
$table-accent-bg: $gray-800;
|
||||
$table-border-color: $gray-700;
|
||||
$input-border-color: $body-bg;
|
||||
$input-group-addon-color: $gray-500;
|
||||
$input-group-addon-bg: $gray-700;
|
||||
$custom-file-color: $gray-500;
|
||||
$custom-file-border-color: $body-bg;
|
||||
$dropdown-bg: $gray-900;
|
||||
$dropdown-border-color: $gray-700;
|
||||
$dropdown-divider-bg: $gray-700;
|
||||
$dropdown-link-color: $white;
|
||||
$dropdown-link-hover-color: $white;
|
||||
$dropdown-link-hover-bg: $primary;
|
||||
$nav-link-padding-x: 2rem;
|
||||
$nav-link-disabled-color: $gray-500;
|
||||
$nav-tabs-border-color: $gray-700;
|
||||
$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color
|
||||
transparent;
|
||||
$nav-tabs-link-active-color: $white;
|
||||
$nav-tabs-link-active-border-color: $nav-tabs-border-color
|
||||
$nav-tabs-border-color transparent;
|
||||
|
||||
$card-cap-bg: $gray-700;
|
||||
$card-bg: $gray-800;
|
||||
|
||||
$navbar-padding-y: 1rem;
|
||||
$navbar-dark-color: rgba($white, 0.6);
|
||||
$navbar-dark-hover-color: $white;
|
||||
|
|
@ -66,6 +47,40 @@ $navbar-light-color: rgba($white, 0.6);
|
|||
$navbar-light-hover-color: $white;
|
||||
$navbar-light-active-color: $white;
|
||||
$navbar-light-toggler-border-color: rgba($gray-900, 0.1);
|
||||
$navbar-light-brand-color: $white;
|
||||
$navbar-light-brand-hover-color: $navbar-light-brand-color;
|
||||
|
||||
$nav-link-padding-x: 2rem;
|
||||
$nav-link-disabled-color: $gray-500;
|
||||
|
||||
$nav-tabs-border-color: $gray-700;
|
||||
$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color
|
||||
transparent;
|
||||
$nav-tabs-link-active-color: $white;
|
||||
$nav-tabs-link-active-border-color: $nav-tabs-border-color
|
||||
$nav-tabs-border-color transparent;
|
||||
|
||||
$input-bg: $gray-700;
|
||||
$input-color: $white;
|
||||
$input-disabled-bg: darken($gray-700, 10%);
|
||||
$input-border-color: $body-bg;
|
||||
$input-group-addon-color: $gray-500;
|
||||
$input-group-addon-bg: $gray-700;
|
||||
|
||||
$hr-border-color: rgba($body-color, 0.25);
|
||||
|
||||
$table-border-color: $gray-700;
|
||||
|
||||
$custom-file-color: $gray-500;
|
||||
$custom-file-border-color: $body-bg;
|
||||
|
||||
$dropdown-bg: $gray-900;
|
||||
$dropdown-border-color: $gray-700;
|
||||
$dropdown-divider-bg: $gray-700;
|
||||
$dropdown-link-color: $white;
|
||||
$dropdown-link-hover-color: $white;
|
||||
$dropdown-link-hover-bg: $primary;
|
||||
|
||||
$pagination-color: $white;
|
||||
$pagination-bg: $success;
|
||||
$pagination-border-width: 0;
|
||||
|
|
@ -78,9 +93,8 @@ $pagination-active-border-color: transparent;
|
|||
$pagination-disabled-color: $white;
|
||||
$pagination-disabled-bg: darken($success, 15%);
|
||||
$pagination-disabled-border-color: transparent;
|
||||
|
||||
$jumbotron-bg: $gray-800;
|
||||
$card-cap-bg: $gray-700;
|
||||
$card-bg: $gray-800;
|
||||
$popover-bg: $gray-800;
|
||||
$popover-header-bg: $gray-700;
|
||||
$toast-background-color: $gray-700;
|
||||
|
|
@ -96,12 +110,6 @@ $breadcrumb-bg: $gray-700;
|
|||
$close-color: $white;
|
||||
$close-text-shadow: none;
|
||||
$pre-color: inherit;
|
||||
$mark-bg: #333;
|
||||
$custom-select-bg: $secondary;
|
||||
$custom-select-bg: $gray-700;
|
||||
$custom-select-color: $white;
|
||||
$input-bg: $secondary;
|
||||
$input-color: $white;
|
||||
$input-disabled-bg: darken($secondary, 10%);
|
||||
$light: $gray-800;
|
||||
$navbar-light-brand-color: $navbar-dark-active-color;
|
||||
$navbar-light-brand-hover-color: $navbar-dark-active-color;
|
||||
|
|
|
|||
4
src/assets/css/themes/_variables.litely-red.scss
Normal file
4
src/assets/css/themes/_variables.litely-red.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@import "variables.litely";
|
||||
|
||||
$secondary: #c80000;
|
||||
$danger: darken($primary, 24%);
|
||||
|
|
@ -1,33 +1,52 @@
|
|||
$white: #ffffff;
|
||||
$orange: #f1641e;
|
||||
$cyan: #02bdc2;
|
||||
$green: #00c853;
|
||||
$secondary: $green;
|
||||
$body-color: $gray-700;
|
||||
$link-color: theme-color("primary");
|
||||
$primary: $orange;
|
||||
@import "./variables";
|
||||
|
||||
// Colors
|
||||
$gray-100: #f8f9fa;
|
||||
$gray-600: #6c757d;
|
||||
$gray-700: #495057;
|
||||
$gray-800: #343a40;
|
||||
$gray-900: #212529;
|
||||
$black: #222;
|
||||
|
||||
$blue: #007bff;
|
||||
$indigo: #6610f2;
|
||||
$red: #d8486a;
|
||||
$orange: #f1641e;
|
||||
$green: #00a846;
|
||||
$cyan: #02bdc2;
|
||||
|
||||
$primary: $orange;
|
||||
$secondary: $green;
|
||||
$success: $indigo;
|
||||
$info: $blue;
|
||||
$danger: darken($primary, 25%);
|
||||
|
||||
$body-color: $gray-700;
|
||||
$body-bg: #fff;
|
||||
$link-color: $primary;
|
||||
$border-color: rgba($body-color, 0.25);
|
||||
$mark-bg: rgb(255, 252, 239);
|
||||
$headings-color: $gray-700;
|
||||
|
||||
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Droid Sans",
|
||||
"Segoe UI", "Helvetica", Arial, sans-serif;
|
||||
$font-weight-bold: 600;
|
||||
|
||||
$card-color: $gray-700;
|
||||
$card-cap-color: $gray-700;
|
||||
$card-bg: $gray-100;
|
||||
|
||||
$navbar-dark-toggler-border-color: rgba($black, 0.1);
|
||||
$navbar-light-color: $gray-600;
|
||||
$navbar-light-hover-color: $gray-900;
|
||||
$navbar-light-active-color: $gray-900;
|
||||
|
||||
$form-feedback-valid-color: $info;
|
||||
$input-btn-focus-color: rgba($primary, 0.75);
|
||||
|
||||
$border-radius: 0.5rem;
|
||||
$border-radius-lg: 0.5rem;
|
||||
$border-radius-sm: 1rem;
|
||||
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Droid Sans",
|
||||
"Segoe UI", "Helvetica", Arial, sans-serif;
|
||||
$headings-color: $gray-700;
|
||||
$input-btn-focus-color: rgba($component-active-bg, 0.75);
|
||||
$form-feedback-valid-color: theme-color("info");
|
||||
$navbar-light-color: $gray-600;
|
||||
$black: #222222;
|
||||
$navbar-dark-toggler-border-color: rgba($black, 0.1);
|
||||
$navbar-light-active-color: $gray-900;
|
||||
$card-color: $gray-700;
|
||||
$card-cap-color: $gray-700;
|
||||
$info: $blue;
|
||||
$body-bg: #fff;
|
||||
$success: $indigo;
|
||||
$danger: darken($primary, 25%);
|
||||
$navbar-light-hover-color: $gray-900;
|
||||
$card-bg: $gray-100;
|
||||
$border-color: $gray-700;
|
||||
$mark-bg: rgb(255, 252, 239);
|
||||
$font-weight-bold: 600;
|
||||
$rounded-pill: 0.25rem;
|
||||
|
||||
$hr-border-color: rgba($body-color, 0.25);
|
||||
|
|
|
|||
6
src/assets/css/themes/_variables.scss
Normal file
6
src/assets/css/themes/_variables.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
$link-decoration: none;
|
||||
$min-contrast-ratio: 3;
|
||||
|
||||
$container-max-widths: (
|
||||
lg: 1140px,
|
||||
);
|
||||
File diff suppressed because it is too large
Load diff
2
src/assets/css/themes/darkly-red.scss
Normal file
2
src/assets/css/themes/darkly-red.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@import "variables.darkly-red";
|
||||
@import "../../../../node_modules/bootstrap/scss/bootstrap";
|
||||
File diff suppressed because it is too large
Load diff
2
src/assets/css/themes/darkly.scss
Normal file
2
src/assets/css/themes/darkly.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@import "variables.darkly";
|
||||
@import "../../../../node_modules/bootstrap/scss/bootstrap";
|
||||
File diff suppressed because it is too large
Load diff
2
src/assets/css/themes/litely-red.scss
Normal file
2
src/assets/css/themes/litely-red.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@import "variables.litely-red";
|
||||
@import "../../../../node_modules/bootstrap/scss/bootstrap";
|
||||
File diff suppressed because it is too large
Load diff
2
src/assets/css/themes/litely.scss
Normal file
2
src/assets/css/themes/litely.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@import "variables.litely";
|
||||
@import "../../../../node_modules/bootstrap/scss/bootstrap";
|
||||
|
|
@ -1,14 +1,13 @@
|
|||
import { hydrate } from "inferno-hydrate";
|
||||
import { Router } from "inferno-router";
|
||||
import { App } from "../shared/components/app/app";
|
||||
import { HistoryService } from "../shared/services/HistoryService";
|
||||
import { initializeSite } from "../shared/utils";
|
||||
|
||||
import "bootstrap/js/dist/collapse";
|
||||
import "bootstrap/js/dist/dropdown";
|
||||
import { HistoryService } from "../shared/services/HistoryService";
|
||||
|
||||
const site = window.isoData.site_res;
|
||||
initializeSite(site);
|
||||
initializeSite(window.isoData.site_res);
|
||||
|
||||
const wrapper = (
|
||||
<Router history={HistoryService.history}>
|
||||
|
|
@ -17,6 +16,7 @@ const wrapper = (
|
|||
);
|
||||
|
||||
const root = document.getElementById("root");
|
||||
|
||||
if (root) {
|
||||
hydrate(wrapper, root);
|
||||
}
|
||||
|
|
|
|||
116
src/server/handlers/catch-all-handler.tsx
Normal file
116
src/server/handlers/catch-all-handler.tsx
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
import type { Request, Response } from "express";
|
||||
import { StaticRouter, matchPath } from "inferno-router";
|
||||
import { renderToString } from "inferno-server";
|
||||
import IsomorphicCookie from "isomorphic-cookie";
|
||||
import { GetSite, GetSiteResponse, LemmyHttp } from "lemmy-js-client";
|
||||
import { App } from "../../shared/components/app/app";
|
||||
import { getHttpBaseInternal } from "../../shared/env";
|
||||
import {
|
||||
InitialFetchRequest,
|
||||
IsoDataOptionalSite,
|
||||
RouteData,
|
||||
} from "../../shared/interfaces";
|
||||
import { routes } from "../../shared/routes";
|
||||
import {
|
||||
FailedRequestState,
|
||||
wrapClient,
|
||||
} from "../../shared/services/HttpService";
|
||||
import { ErrorPageData, initializeSite, isAuthPath } from "../../shared/utils";
|
||||
import { createSsrHtml } from "../utils/create-ssr-html";
|
||||
import { getErrorPageData } from "../utils/get-error-page-data";
|
||||
import { setForwardedHeaders } from "../utils/set-forwarded-headers";
|
||||
|
||||
export default async (req: Request, res: Response) => {
|
||||
try {
|
||||
const activeRoute = routes.find(route => matchPath(req.path, route));
|
||||
let auth: string | undefined = IsomorphicCookie.load("jwt", req);
|
||||
|
||||
const getSiteForm: GetSite = { auth };
|
||||
|
||||
const headers = setForwardedHeaders(req.headers);
|
||||
const client = wrapClient(new LemmyHttp(getHttpBaseInternal(), headers));
|
||||
|
||||
const { path, url, query } = req;
|
||||
|
||||
// Get site data first
|
||||
// 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
|
||||
let site: GetSiteResponse | undefined = undefined;
|
||||
let routeData: RouteData = {};
|
||||
let errorPageData: ErrorPageData | undefined = undefined;
|
||||
let try_site = await client.getSite(getSiteForm);
|
||||
if (try_site.state === "failed" && try_site.msg == "not_logged_in") {
|
||||
console.error(
|
||||
"Incorrect JWT token, skipping auth so frontend can remove jwt cookie"
|
||||
);
|
||||
getSiteForm.auth = undefined;
|
||||
auth = undefined;
|
||||
try_site = await client.getSite(getSiteForm);
|
||||
}
|
||||
|
||||
if (!auth && isAuthPath(path)) {
|
||||
return res.redirect("/login");
|
||||
}
|
||||
|
||||
if (try_site.state === "success") {
|
||||
site = try_site.data;
|
||||
initializeSite(site);
|
||||
|
||||
if (path !== "/setup" && !site.site_view.local_site.site_setup) {
|
||||
return res.redirect("/setup");
|
||||
}
|
||||
|
||||
if (site && activeRoute?.fetchInitialData) {
|
||||
const initialFetchReq: InitialFetchRequest = {
|
||||
client,
|
||||
auth,
|
||||
path,
|
||||
query,
|
||||
site,
|
||||
};
|
||||
|
||||
routeData = await activeRoute.fetchInitialData(initialFetchReq);
|
||||
}
|
||||
} else if (try_site.state === "failed") {
|
||||
errorPageData = getErrorPageData(new Error(try_site.msg), site);
|
||||
}
|
||||
|
||||
const error = Object.values(routeData).find(
|
||||
res => res.state === "failed"
|
||||
) as FailedRequestState | undefined;
|
||||
|
||||
// Redirect to the 404 if there's an API error
|
||||
if (error) {
|
||||
console.error(error.msg);
|
||||
if (error.msg === "instance_is_private") {
|
||||
return res.redirect(`/signup`);
|
||||
} else {
|
||||
errorPageData = getErrorPageData(new Error(error.msg), site);
|
||||
}
|
||||
}
|
||||
|
||||
const isoData: IsoDataOptionalSite = {
|
||||
path,
|
||||
site_res: site,
|
||||
routeData,
|
||||
errorPageData,
|
||||
};
|
||||
|
||||
const wrapper = (
|
||||
<StaticRouter location={url} context={isoData}>
|
||||
<App />
|
||||
</StaticRouter>
|
||||
);
|
||||
|
||||
const root = renderToString(wrapper);
|
||||
|
||||
res.send(await createSsrHtml(root, isoData));
|
||||
} catch (err) {
|
||||
// If an error is caught here, the error page couldn't even be rendered
|
||||
console.error(err);
|
||||
res.statusCode = 500;
|
||||
return res.send(
|
||||
process.env.NODE_ENV === "development" ? err.message : "Server error"
|
||||
);
|
||||
}
|
||||
};
|
||||
18
src/server/handlers/robots-handler.ts
Normal file
18
src/server/handlers/robots-handler.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import type { Response } from "express";
|
||||
|
||||
export default async ({ res }: { res: Response }) => {
|
||||
res.setHeader("content-type", "text/plain; charset=utf-8");
|
||||
|
||||
res.send(`User-Agent: *
|
||||
Disallow: /login
|
||||
Disallow: /settings
|
||||
Disallow: /create_community
|
||||
Disallow: /create_post
|
||||
Disallow: /create_private_message
|
||||
Disallow: /inbox
|
||||
Disallow: /setup
|
||||
Disallow: /admin
|
||||
Disallow: /password_change
|
||||
Disallow: /search/
|
||||
`);
|
||||
};
|
||||
14
src/server/handlers/service-worker-handler.ts
Normal file
14
src/server/handlers/service-worker-handler.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import type { Response } from "express";
|
||||
import path from "path";
|
||||
|
||||
export default async ({ res }: { res: Response }) => {
|
||||
res
|
||||
.setHeader("Content-Type", "application/javascript")
|
||||
.sendFile(
|
||||
path.resolve(
|
||||
`./dist/service-worker${
|
||||
process.env.NODE_ENV === "development" ? "-development" : ""
|
||||
}.js`
|
||||
)
|
||||
);
|
||||
};
|
||||
32
src/server/handlers/theme-handler.ts
Normal file
32
src/server/handlers/theme-handler.ts
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import type { Request, Response } from "express";
|
||||
import { existsSync } from "fs";
|
||||
import path from "path";
|
||||
|
||||
const extraThemesFolder =
|
||||
process.env["LEMMY_UI_EXTRA_THEMES_FOLDER"] || "./extra_themes";
|
||||
|
||||
export default async (req: Request, res: Response) => {
|
||||
res.contentType("text/css");
|
||||
|
||||
const theme = req.params.name;
|
||||
|
||||
if (!theme.endsWith(".css")) {
|
||||
res.statusCode = 400;
|
||||
res.send("Theme must be a css file");
|
||||
}
|
||||
|
||||
const customTheme = path.resolve(extraThemesFolder, theme);
|
||||
|
||||
if (existsSync(customTheme)) {
|
||||
res.sendFile(customTheme);
|
||||
} else {
|
||||
const internalTheme = path.resolve(`./dist/assets/css/themes/${theme}`);
|
||||
|
||||
// If the theme doesn't exist, just send litely
|
||||
if (existsSync(internalTheme)) {
|
||||
res.sendFile(internalTheme);
|
||||
} else {
|
||||
res.sendFile(path.resolve("./dist/assets/css/themes/litely.css"));
|
||||
}
|
||||
}
|
||||
};
|
||||
6
src/server/handlers/themes-list-handler.ts
Normal file
6
src/server/handlers/themes-list-handler.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import type { Response } from "express";
|
||||
import { buildThemeList } from "../utils/build-themes-list";
|
||||
|
||||
export default async ({ res }: { res: Response }) => {
|
||||
res.type("json").send(JSON.stringify(await buildThemeList()));
|
||||
};
|
||||
|
|
@ -1,465 +1,38 @@
|
|||
import express from "express";
|
||||
import { existsSync } from "fs";
|
||||
import { readdir, readFile } from "fs/promises";
|
||||
import { IncomingHttpHeaders } from "http";
|
||||
import { Helmet } from "inferno-helmet";
|
||||
import { matchPath, StaticRouter } from "inferno-router";
|
||||
import { renderToString } from "inferno-server";
|
||||
import IsomorphicCookie from "isomorphic-cookie";
|
||||
import { GetSite, GetSiteResponse, LemmyHttp } from "lemmy-js-client";
|
||||
import path from "path";
|
||||
import process from "process";
|
||||
import serialize from "serialize-javascript";
|
||||
import sharp from "sharp";
|
||||
import { App } from "../shared/components/app/app";
|
||||
import { getHttpBaseExternal, getHttpBaseInternal } from "../shared/env";
|
||||
import {
|
||||
ILemmyConfig,
|
||||
InitialFetchRequest,
|
||||
IsoDataOptionalSite,
|
||||
} from "../shared/interfaces";
|
||||
import { routes } from "../shared/routes";
|
||||
import { RequestState, wrapClient } from "../shared/services/HttpService";
|
||||
import {
|
||||
ErrorPageData,
|
||||
favIconPngUrl,
|
||||
favIconUrl,
|
||||
initializeSite,
|
||||
isAuthPath,
|
||||
} from "../shared/utils";
|
||||
import CatchAllHandler from "./handlers/catch-all-handler";
|
||||
import RobotsHandler from "./handlers/robots-handler";
|
||||
import ServiceWorkerHandler from "./handlers/service-worker-handler";
|
||||
import ThemeHandler from "./handlers/theme-handler";
|
||||
import ThemesListHandler from "./handlers/themes-list-handler";
|
||||
import setDefaultCsp from "./middleware/set-default-csp";
|
||||
|
||||
const server = express();
|
||||
|
||||
const [hostname, port] = process.env["LEMMY_UI_HOST"]
|
||||
? process.env["LEMMY_UI_HOST"].split(":")
|
||||
: ["0.0.0.0", "1234"];
|
||||
const extraThemesFolder =
|
||||
process.env["LEMMY_UI_EXTRA_THEMES_FOLDER"] || "./extra_themes";
|
||||
|
||||
if (!process.env["LEMMY_UI_DISABLE_CSP"] && !process.env["LEMMY_UI_DEBUG"]) {
|
||||
server.use(function (_req, res, next) {
|
||||
res.setHeader(
|
||||
"Content-Security-Policy",
|
||||
`default-src 'self'; manifest-src *; connect-src *; img-src * data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; form-action 'self'; base-uri 'self'; frame-src *; media-src *`
|
||||
);
|
||||
next();
|
||||
});
|
||||
}
|
||||
const customHtmlHeader = process.env["LEMMY_UI_CUSTOM_HTML_HEADER"] || "";
|
||||
|
||||
server.use(express.json());
|
||||
server.use(express.urlencoded({ extended: false }));
|
||||
server.use("/static", express.static(path.resolve("./dist")));
|
||||
|
||||
const robotstxt = `User-Agent: *
|
||||
Disallow: /login
|
||||
Disallow: /settings
|
||||
Disallow: /create_community
|
||||
Disallow: /create_post
|
||||
Disallow: /create_private_message
|
||||
Disallow: /inbox
|
||||
Disallow: /setup
|
||||
Disallow: /admin
|
||||
Disallow: /password_change
|
||||
Disallow: /search/
|
||||
`;
|
||||
|
||||
server.get("/service-worker.js", async (_req, res) => {
|
||||
res.setHeader("Content-Type", "application/javascript");
|
||||
res.sendFile(
|
||||
path.resolve(
|
||||
`./dist/service-worker${
|
||||
process.env.NODE_ENV === "development" ? "-development" : ""
|
||||
}.js`
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
server.get("/robots.txt", async (_req, res) => {
|
||||
res.setHeader("content-type", "text/plain; charset=utf-8");
|
||||
res.send(robotstxt);
|
||||
});
|
||||
|
||||
server.get("/css/themes/:name", async (req, res) => {
|
||||
res.contentType("text/css");
|
||||
const theme = req.params.name;
|
||||
if (!theme.endsWith(".css")) {
|
||||
res.statusCode = 400;
|
||||
res.send("Theme must be a css file");
|
||||
if (!process.env["LEMMY_UI_DISABLE_CSP"] && !process.env["LEMMY_UI_DEBUG"]) {
|
||||
server.use(setDefaultCsp);
|
||||
}
|
||||
|
||||
const customTheme = path.resolve(`${extraThemesFolder}/${theme}`);
|
||||
if (existsSync(customTheme)) {
|
||||
res.sendFile(customTheme);
|
||||
} else {
|
||||
const internalTheme = path.resolve(`./dist/assets/css/themes/${theme}`);
|
||||
|
||||
// If the theme doesn't exist, just send litely
|
||||
if (existsSync(internalTheme)) {
|
||||
res.sendFile(internalTheme);
|
||||
} else {
|
||||
res.sendFile(path.resolve("./dist/assets/css/themes/litely.css"));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
async function buildThemeList(): Promise<string[]> {
|
||||
const themes = ["darkly", "darkly-red", "litely", "litely-red"];
|
||||
if (existsSync(extraThemesFolder)) {
|
||||
const dirThemes = await readdir(extraThemesFolder);
|
||||
const cssThemes = dirThemes
|
||||
.filter(d => d.endsWith(".css"))
|
||||
.map(d => d.replace(".css", ""));
|
||||
themes.push(...cssThemes);
|
||||
}
|
||||
return themes;
|
||||
}
|
||||
|
||||
server.get("/css/themelist", async (_req, res) => {
|
||||
res.type("json");
|
||||
res.send(JSON.stringify(await buildThemeList()));
|
||||
});
|
||||
|
||||
// server.use(cookieParser());
|
||||
server.get("/*", async (req, res) => {
|
||||
try {
|
||||
const activeRoute = routes.find(route => matchPath(req.path, route));
|
||||
let auth: string | undefined = IsomorphicCookie.load("jwt", req);
|
||||
|
||||
const getSiteForm: GetSite = { auth };
|
||||
|
||||
const headers = setForwardedHeaders(req.headers);
|
||||
const client = wrapClient(new LemmyHttp(getHttpBaseInternal(), headers));
|
||||
|
||||
const { path, url, query } = req;
|
||||
|
||||
// Get site data first
|
||||
// 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
|
||||
let site: GetSiteResponse | undefined = undefined;
|
||||
const routeData: RequestState<any>[] = [];
|
||||
let errorPageData: ErrorPageData | undefined = undefined;
|
||||
let try_site = await client.getSite(getSiteForm);
|
||||
if (try_site.state === "failed" && try_site.msg == "not_logged_in") {
|
||||
console.error(
|
||||
"Incorrect JWT token, skipping auth so frontend can remove jwt cookie"
|
||||
);
|
||||
getSiteForm.auth = undefined;
|
||||
auth = undefined;
|
||||
try_site = await client.getSite(getSiteForm);
|
||||
}
|
||||
|
||||
if (!auth && isAuthPath(path)) {
|
||||
return res.redirect("/login");
|
||||
}
|
||||
|
||||
if (try_site.state === "success") {
|
||||
site = try_site.data;
|
||||
initializeSite(site);
|
||||
|
||||
if (path !== "/setup" && !site.site_view.local_site.site_setup) {
|
||||
return res.redirect("/setup");
|
||||
}
|
||||
|
||||
if (site) {
|
||||
const initialFetchReq: InitialFetchRequest = {
|
||||
client,
|
||||
auth,
|
||||
path,
|
||||
query,
|
||||
site,
|
||||
};
|
||||
|
||||
if (activeRoute?.fetchInitialData) {
|
||||
routeData.push(
|
||||
...(await Promise.all([
|
||||
...activeRoute.fetchInitialData(initialFetchReq),
|
||||
]))
|
||||
);
|
||||
}
|
||||
}
|
||||
} else if (try_site.state === "failed") {
|
||||
errorPageData = getErrorPageData(new Error(try_site.msg), site);
|
||||
}
|
||||
|
||||
// Redirect to the 404 if there's an API error
|
||||
if (routeData[0] && routeData[0].state === "failed") {
|
||||
const error = routeData[0].msg;
|
||||
console.error(error);
|
||||
if (error === "instance_is_private") {
|
||||
return res.redirect(`/signup`);
|
||||
} else {
|
||||
errorPageData = getErrorPageData(new Error(error), site);
|
||||
}
|
||||
}
|
||||
|
||||
const isoData: IsoDataOptionalSite = {
|
||||
path,
|
||||
site_res: site,
|
||||
routeData,
|
||||
errorPageData,
|
||||
};
|
||||
|
||||
const wrapper = (
|
||||
<StaticRouter location={url} context={isoData}>
|
||||
<App />
|
||||
</StaticRouter>
|
||||
);
|
||||
|
||||
const root = renderToString(wrapper);
|
||||
|
||||
res.send(await createSsrHtml(root, isoData));
|
||||
} catch (err) {
|
||||
// If an error is caught here, the error page couldn't even be rendered
|
||||
console.error(err);
|
||||
res.statusCode = 500;
|
||||
return res.send(
|
||||
process.env.NODE_ENV === "development" ? err.message : "Server error"
|
||||
);
|
||||
}
|
||||
});
|
||||
server.get("/robots.txt", RobotsHandler);
|
||||
server.get("/service-worker.js", ServiceWorkerHandler);
|
||||
server.get("/css/themes/:name", ThemeHandler);
|
||||
server.get("/css/themelist", ThemesListHandler);
|
||||
server.get("/*", CatchAllHandler);
|
||||
|
||||
server.listen(Number(port), hostname, () => {
|
||||
console.log(`http://${hostname}:${port}`);
|
||||
});
|
||||
|
||||
function setForwardedHeaders(headers: IncomingHttpHeaders): {
|
||||
[key: string]: string;
|
||||
} {
|
||||
const out: { [key: string]: string } = {};
|
||||
if (headers.host) {
|
||||
out.host = headers.host;
|
||||
}
|
||||
const realIp = headers["x-real-ip"];
|
||||
if (realIp) {
|
||||
out["x-real-ip"] = realIp as string;
|
||||
}
|
||||
const forwardedFor = headers["x-forwarded-for"];
|
||||
if (forwardedFor) {
|
||||
out["x-forwarded-for"] = forwardedFor as string;
|
||||
}
|
||||
|
||||
return out;
|
||||
}
|
||||
|
||||
process.on("SIGINT", () => {
|
||||
console.info("Interrupted");
|
||||
process.exit(0);
|
||||
});
|
||||
|
||||
const iconSizes = [72, 96, 144, 192, 512];
|
||||
const defaultLogoPathDirectory = path.join(
|
||||
process.cwd(),
|
||||
"dist",
|
||||
"assets",
|
||||
"icons"
|
||||
);
|
||||
|
||||
export async function generateManifestBase64({
|
||||
my_user,
|
||||
site_view: {
|
||||
site,
|
||||
local_site: { community_creation_admin_only },
|
||||
},
|
||||
}: GetSiteResponse) {
|
||||
const url = getHttpBaseExternal();
|
||||
|
||||
const icon = site.icon ? await fetchIconPng(site.icon) : null;
|
||||
|
||||
const manifest = {
|
||||
name: site.name,
|
||||
description: site.description ?? "A link aggregator for the fediverse",
|
||||
start_url: url,
|
||||
scope: url,
|
||||
display: "standalone",
|
||||
id: "/",
|
||||
background_color: "#222222",
|
||||
theme_color: "#222222",
|
||||
icons: await Promise.all(
|
||||
iconSizes.map(async size => {
|
||||
let src = await readFile(
|
||||
path.join(defaultLogoPathDirectory, `icon-${size}x${size}.png`)
|
||||
).then(buf => buf.toString("base64"));
|
||||
|
||||
if (icon) {
|
||||
src = await sharp(icon)
|
||||
.resize(size, size)
|
||||
.png()
|
||||
.toBuffer()
|
||||
.then(buf => buf.toString("base64"));
|
||||
}
|
||||
|
||||
return {
|
||||
sizes: `${size}x${size}`,
|
||||
type: "image/png",
|
||||
src: `data:image/png;base64,${src}`,
|
||||
purpose: "any maskable",
|
||||
};
|
||||
})
|
||||
),
|
||||
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");
|
||||
}
|
||||
|
||||
async function fetchIconPng(iconUrl: string) {
|
||||
return await fetch(iconUrl)
|
||||
.then(res => res.blob())
|
||||
.then(blob => blob.arrayBuffer());
|
||||
}
|
||||
|
||||
function getErrorPageData(error: Error, site?: GetSiteResponse) {
|
||||
const errorPageData: ErrorPageData = {};
|
||||
|
||||
if (site) {
|
||||
errorPageData.error = error.message;
|
||||
}
|
||||
|
||||
const adminMatrixIds = site?.admins
|
||||
.map(({ person: { matrix_user_id } }) => matrix_user_id)
|
||||
.filter(id => id) as string[] | undefined;
|
||||
if (adminMatrixIds && adminMatrixIds.length > 0) {
|
||||
errorPageData.adminMatrixIds = adminMatrixIds;
|
||||
}
|
||||
|
||||
return errorPageData;
|
||||
}
|
||||
|
||||
async function createSsrHtml(root: string, isoData: IsoDataOptionalSite) {
|
||||
const site = isoData.site_res;
|
||||
const appleTouchIcon = site?.site_view.site.icon
|
||||
? `data:image/png;base64,${sharp(
|
||||
await fetchIconPng(site.site_view.site.icon)
|
||||
)
|
||||
.resize(180, 180)
|
||||
.extend({
|
||||
bottom: 20,
|
||||
top: 20,
|
||||
left: 20,
|
||||
right: 20,
|
||||
background: "#222222",
|
||||
})
|
||||
.png()
|
||||
.toBuffer()
|
||||
.then(buf => buf.toString("base64"))}`
|
||||
: favIconPngUrl;
|
||||
|
||||
const erudaStr =
|
||||
process.env["LEMMY_UI_DEBUG"] === "true"
|
||||
? renderToString(
|
||||
<>
|
||||
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
|
||||
<script>eruda.init();</script>
|
||||
</>
|
||||
)
|
||||
: "";
|
||||
|
||||
const helmet = Helmet.renderStatic();
|
||||
|
||||
const config: ILemmyConfig = { wsHost: process.env.LEMMY_UI_LEMMY_WS_HOST };
|
||||
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html ${helmet.htmlAttributes.toString()}>
|
||||
<head>
|
||||
<script>window.isoData = ${serialize(isoData)}</script>
|
||||
<script>window.lemmyConfig = ${serialize(config)}</script>
|
||||
|
||||
<!-- A remote debugging utility for mobile -->
|
||||
${erudaStr}
|
||||
|
||||
<!-- Custom injected script -->
|
||||
${customHtmlHeader}
|
||||
|
||||
${helmet.title.toString()}
|
||||
${helmet.meta.toString()}
|
||||
|
||||
<!-- Required meta tags -->
|
||||
<meta name="Description" content="Lemmy">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
|
||||
<link
|
||||
id="favicon"
|
||||
rel="shortcut icon"
|
||||
type="image/x-icon"
|
||||
href=${site?.site_view.site.icon ?? favIconUrl}
|
||||
/>
|
||||
|
||||
<!-- Web app manifest -->
|
||||
${
|
||||
site &&
|
||||
`<link
|
||||
rel="manifest"
|
||||
href=${`data:application/manifest+json;base64,${await generateManifestBase64(
|
||||
site
|
||||
)}`}
|
||||
/>`
|
||||
}
|
||||
<link rel="apple-touch-icon" href=${appleTouchIcon} />
|
||||
<link rel="apple-touch-startup-image" href=${appleTouchIcon} />
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
|
||||
|
||||
<!-- Current theme and more -->
|
||||
${helmet.link.toString()}
|
||||
|
||||
</head>
|
||||
|
||||
<body ${helmet.bodyAttributes.toString()}>
|
||||
<noscript>
|
||||
<div class="alert alert-danger rounded-0" role="alert">
|
||||
<b>Javascript is disabled. Actions will not work.</b>
|
||||
</div>
|
||||
</noscript>
|
||||
|
||||
<div id='root'>${root}</div>
|
||||
<script defer src='/static/js/client.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
10
src/server/middleware/set-default-csp.ts
Normal file
10
src/server/middleware/set-default-csp.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import type { NextFunction, Response } from "express";
|
||||
|
||||
export default function ({ res, next }: { res: Response; next: NextFunction }) {
|
||||
res.setHeader(
|
||||
"Content-Security-Policy",
|
||||
`default-src 'self'; manifest-src *; connect-src *; img-src * data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; form-action 'self'; base-uri 'self'; frame-src *; media-src *`
|
||||
);
|
||||
|
||||
next();
|
||||
}
|
||||
18
src/server/utils/build-themes-list.ts
Normal file
18
src/server/utils/build-themes-list.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import { existsSync } from "fs";
|
||||
import { readdir } from "fs/promises";
|
||||
|
||||
const extraThemesFolder =
|
||||
process.env["LEMMY_UI_EXTRA_THEMES_FOLDER"] || "./extra_themes";
|
||||
|
||||
const themes = ["darkly", "darkly-red", "litely", "litely-red"];
|
||||
|
||||
export async function buildThemeList(): Promise<string[]> {
|
||||
if (existsSync(extraThemesFolder)) {
|
||||
const dirThemes = await readdir(extraThemesFolder);
|
||||
const cssThemes = dirThemes
|
||||
.filter(d => d.endsWith(".css"))
|
||||
.map(d => d.replace(".css", ""));
|
||||
themes.push(...cssThemes);
|
||||
}
|
||||
return themes;
|
||||
}
|
||||
109
src/server/utils/create-ssr-html.tsx
Normal file
109
src/server/utils/create-ssr-html.tsx
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
import { Helmet } from "inferno-helmet";
|
||||
import { renderToString } from "inferno-server";
|
||||
import serialize from "serialize-javascript";
|
||||
import sharp from "sharp";
|
||||
import { ILemmyConfig, IsoDataOptionalSite } from "../../shared/interfaces";
|
||||
import { favIconPngUrl, favIconUrl } from "../../shared/utils";
|
||||
import { fetchIconPng } from "./fetch-icon-png";
|
||||
import { generateManifestBase64 } from "./generate-manifest-base64";
|
||||
|
||||
const customHtmlHeader = process.env["LEMMY_UI_CUSTOM_HTML_HEADER"] || "";
|
||||
|
||||
export async function createSsrHtml(
|
||||
root: string,
|
||||
isoData: IsoDataOptionalSite
|
||||
) {
|
||||
const site = isoData.site_res;
|
||||
|
||||
const appleTouchIcon = site?.site_view.site.icon
|
||||
? `data:image/png;base64,${sharp(
|
||||
await fetchIconPng(site.site_view.site.icon)
|
||||
)
|
||||
.resize(180, 180)
|
||||
.extend({
|
||||
bottom: 20,
|
||||
top: 20,
|
||||
left: 20,
|
||||
right: 20,
|
||||
background: "#222222",
|
||||
})
|
||||
.png()
|
||||
.toBuffer()
|
||||
.then(buf => buf.toString("base64"))}`
|
||||
: favIconPngUrl;
|
||||
|
||||
const erudaStr =
|
||||
process.env["LEMMY_UI_DEBUG"] === "true"
|
||||
? renderToString(
|
||||
<>
|
||||
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
|
||||
<script>eruda.init();</script>
|
||||
</>
|
||||
)
|
||||
: "";
|
||||
|
||||
const helmet = Helmet.renderStatic();
|
||||
|
||||
const config: ILemmyConfig = { wsHost: process.env.LEMMY_UI_LEMMY_WS_HOST };
|
||||
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html ${helmet.htmlAttributes.toString()}>
|
||||
<head>
|
||||
<script>window.isoData = ${serialize(isoData)}</script>
|
||||
<script>window.lemmyConfig = ${serialize(config)}</script>
|
||||
|
||||
<!-- A remote debugging utility for mobile -->
|
||||
${erudaStr}
|
||||
|
||||
<!-- Custom injected script -->
|
||||
${customHtmlHeader}
|
||||
|
||||
${helmet.title.toString()}
|
||||
${helmet.meta.toString()}
|
||||
|
||||
<!-- Required meta tags -->
|
||||
<meta name="Description" content="Lemmy">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
|
||||
<link
|
||||
id="favicon"
|
||||
rel="shortcut icon"
|
||||
type="image/x-icon"
|
||||
href=${site?.site_view.site.icon ?? favIconUrl}
|
||||
/>
|
||||
|
||||
<!-- Web app manifest -->
|
||||
${
|
||||
site &&
|
||||
`<link
|
||||
rel="manifest"
|
||||
href=${`data:application/manifest+json;base64,${await generateManifestBase64(
|
||||
site
|
||||
)}`}
|
||||
/>`
|
||||
}
|
||||
<link rel="apple-touch-icon" href=${appleTouchIcon} />
|
||||
<link rel="apple-touch-startup-image" href=${appleTouchIcon} />
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
|
||||
|
||||
<!-- Current theme and more -->
|
||||
${helmet.link.toString()}
|
||||
|
||||
</head>
|
||||
|
||||
<body ${helmet.bodyAttributes.toString()}>
|
||||
<noscript>
|
||||
<div class="alert alert-danger rounded-0" role="alert">
|
||||
<b>Javascript is disabled. Actions will not work.</b>
|
||||
</div>
|
||||
</noscript>
|
||||
|
||||
<div id='root'>${root}</div>
|
||||
<script defer src='/static/js/client.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
}
|
||||
5
src/server/utils/fetch-icon-png.ts
Normal file
5
src/server/utils/fetch-icon-png.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export async function fetchIconPng(iconUrl: string) {
|
||||
return await fetch(iconUrl)
|
||||
.then(res => res.blob())
|
||||
.then(blob => blob.arrayBuffer());
|
||||
}
|
||||
107
src/server/utils/generate-manifest-base64.ts
Normal file
107
src/server/utils/generate-manifest-base64.ts
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
import { readFile } from "fs/promises";
|
||||
import { GetSiteResponse } from "lemmy-js-client";
|
||||
import path from "path";
|
||||
import sharp from "sharp";
|
||||
import { getHttpBaseExternal } from "../../shared/env";
|
||||
import { fetchIconPng } from "./fetch-icon-png";
|
||||
|
||||
const iconSizes = [72, 96, 144, 192, 512];
|
||||
|
||||
const defaultLogoPathDirectory = path.join(
|
||||
process.cwd(),
|
||||
"dist",
|
||||
"assets",
|
||||
"icons"
|
||||
);
|
||||
|
||||
export async function generateManifestBase64({
|
||||
my_user,
|
||||
site_view: {
|
||||
site,
|
||||
local_site: { community_creation_admin_only },
|
||||
},
|
||||
}: GetSiteResponse) {
|
||||
const url = getHttpBaseExternal();
|
||||
|
||||
const icon = site.icon ? await fetchIconPng(site.icon) : null;
|
||||
|
||||
const manifest = {
|
||||
name: site.name,
|
||||
description: site.description ?? "A link aggregator for the fediverse",
|
||||
start_url: url,
|
||||
scope: url,
|
||||
display: "standalone",
|
||||
id: "/",
|
||||
background_color: "#222222",
|
||||
theme_color: "#222222",
|
||||
icons: await Promise.all(
|
||||
iconSizes.map(async size => {
|
||||
let src = await readFile(
|
||||
path.join(defaultLogoPathDirectory, `icon-${size}x${size}.png`)
|
||||
).then(buf => buf.toString("base64"));
|
||||
|
||||
if (icon) {
|
||||
src = await sharp(icon)
|
||||
.resize(size, size)
|
||||
.png()
|
||||
.toBuffer()
|
||||
.then(buf => buf.toString("base64"));
|
||||
}
|
||||
|
||||
return {
|
||||
sizes: `${size}x${size}`,
|
||||
type: "image/png",
|
||||
src: `data:image/png;base64,${src}`,
|
||||
purpose: "any maskable",
|
||||
};
|
||||
})
|
||||
),
|
||||
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");
|
||||
}
|
||||
20
src/server/utils/get-error-page-data.ts
Normal file
20
src/server/utils/get-error-page-data.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { GetSiteResponse } from "lemmy-js-client";
|
||||
import { ErrorPageData } from "../../shared/utils";
|
||||
|
||||
export function getErrorPageData(error: Error, site?: GetSiteResponse) {
|
||||
const errorPageData: ErrorPageData = {};
|
||||
|
||||
if (site) {
|
||||
errorPageData.error = error.message;
|
||||
}
|
||||
|
||||
const adminMatrixIds = site?.admins
|
||||
.map(({ person: { matrix_user_id } }) => matrix_user_id)
|
||||
.filter(id => id) as string[] | undefined;
|
||||
|
||||
if (adminMatrixIds && adminMatrixIds.length > 0) {
|
||||
errorPageData.adminMatrixIds = adminMatrixIds;
|
||||
}
|
||||
|
||||
return errorPageData;
|
||||
}
|
||||
25
src/server/utils/set-forwarded-headers.ts
Normal file
25
src/server/utils/set-forwarded-headers.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import { IncomingHttpHeaders } from "http";
|
||||
|
||||
export function setForwardedHeaders(headers: IncomingHttpHeaders): {
|
||||
[key: string]: string;
|
||||
} {
|
||||
const out: { [key: string]: string } = {};
|
||||
|
||||
if (headers.host) {
|
||||
out.host = headers.host;
|
||||
}
|
||||
|
||||
const realIp = headers["x-real-ip"];
|
||||
|
||||
if (realIp) {
|
||||
out["x-real-ip"] = realIp as string;
|
||||
}
|
||||
|
||||
const forwardedFor = headers["x-forwarded-for"];
|
||||
|
||||
if (forwardedFor) {
|
||||
out["x-forwarded-for"] = forwardedFor as string;
|
||||
}
|
||||
|
||||
return out;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component } from "inferno";
|
||||
import { Component, createRef, linkEvent, RefObject } from "inferno";
|
||||
import { Provider } from "inferno-i18next-dess";
|
||||
import { Route, Switch } from "inferno-router";
|
||||
import { i18n } from "../../i18next";
|
||||
|
|
@ -15,8 +15,15 @@ import { Theme } from "./theme";
|
|||
|
||||
export class App extends Component<any, any> {
|
||||
private isoData: IsoDataOptionalSite = setIsoData(this.context);
|
||||
private readonly mainContentRef: RefObject<HTMLElement>;
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.mainContentRef = createRef();
|
||||
}
|
||||
|
||||
handleJumpToContent(event) {
|
||||
event.preventDefault();
|
||||
this.mainContentRef.current?.focus();
|
||||
}
|
||||
render() {
|
||||
const siteRes = this.isoData.site_res;
|
||||
|
|
@ -25,7 +32,13 @@ export class App extends Component<any, any> {
|
|||
return (
|
||||
<>
|
||||
<Provider i18next={i18n}>
|
||||
<div id="app">
|
||||
<div id="app" className="lemmy-site">
|
||||
<a
|
||||
className="skip-link bg-light text-dark p-2 text-decoration-none position-absolute start-0 z-3"
|
||||
onClick={linkEvent(this, this.handleJumpToContent)}
|
||||
>
|
||||
${i18n.t("jump_to_content", "Jump to content")}
|
||||
</a>
|
||||
{siteView && (
|
||||
<Theme defaultTheme={siteView.local_site.default_theme} />
|
||||
)}
|
||||
|
|
@ -39,6 +52,7 @@ export class App extends Component<any, any> {
|
|||
exact
|
||||
component={routeProps => (
|
||||
<ErrorGuard>
|
||||
<main tabIndex={-1} ref={this.mainContentRef}>
|
||||
{RouteComponent &&
|
||||
(isAuthPath(path ?? "") ? (
|
||||
<AuthGuard>
|
||||
|
|
@ -47,6 +61,7 @@ export class App extends Component<any, any> {
|
|||
) : (
|
||||
<RouteComponent {...routeProps} />
|
||||
))}
|
||||
</main>
|
||||
</ErrorGuard>
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export class ErrorPage extends Component<any, any> {
|
|||
const { errorPageData } = this.isoData;
|
||||
|
||||
return (
|
||||
<div className="container-lg text-center">
|
||||
<div className="error-page container-lg text-center">
|
||||
<h1>
|
||||
{errorPageData
|
||||
? i18n.t("error_page_title")
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@ export class Footer extends Component<FooterProps, any> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<nav className="container-lg navbar navbar-expand-md navbar-light navbar-bg p-3">
|
||||
<footer className="app-footer container-lg navbar navbar-expand-md navbar-light navbar-bg p-3">
|
||||
<div className="navbar-collapse">
|
||||
<ul className="navbar-nav ml-auto">
|
||||
<ul className="navbar-nav ms-auto">
|
||||
{this.props.site?.version !== VERSION && (
|
||||
<li className="nav-item">
|
||||
<span className="nav-link">UI: {VERSION}</span>
|
||||
|
|
@ -63,7 +63,7 @@ export class Footer extends Component<FooterProps, any> {
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
import { isBrowser } from "@utils/browser";
|
||||
import { poll } from "@utils/helpers";
|
||||
import { amAdmin, canCreateCommunity } from "@utils/roles";
|
||||
import { Component, createRef, linkEvent } from "inferno";
|
||||
import { NavLink } from "inferno-router";
|
||||
import {
|
||||
|
|
@ -10,13 +13,9 @@ import { i18n } from "../../i18next";
|
|||
import { UserService } from "../../services";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
amAdmin,
|
||||
canCreateCommunity,
|
||||
donateLemmyUrl,
|
||||
isBrowser,
|
||||
myAuth,
|
||||
numToSI,
|
||||
poll,
|
||||
showAvatars,
|
||||
toast,
|
||||
updateUnreadCountsInterval,
|
||||
|
|
@ -86,11 +85,15 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
const siteView = this.props.siteRes?.site_view;
|
||||
const person = UserService.Instance.myUserInfo?.local_user_view.person;
|
||||
return (
|
||||
<nav className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg">
|
||||
<nav
|
||||
className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg"
|
||||
id="navbar"
|
||||
>
|
||||
<NavLink
|
||||
id="navTitle"
|
||||
to="/"
|
||||
title={siteView?.site.description ?? siteView?.site.name}
|
||||
className="d-flex align-items-center navbar-brand mr-md-3"
|
||||
className="d-flex align-items-center navbar-brand me-md-3"
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{siteView?.site.icon && showAvatars() && (
|
||||
|
|
@ -99,11 +102,11 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
{siteView?.site.name}
|
||||
</NavLink>
|
||||
{person && (
|
||||
<ul className="navbar-nav d-flex flex-row ml-auto d-md-none">
|
||||
<li className="nav-item">
|
||||
<ul className="navbar-nav d-flex flex-row ms-auto d-md-none">
|
||||
<li id="navMessages" className="nav-item nav-item-icon">
|
||||
<NavLink
|
||||
to="/inbox"
|
||||
className="p-1 nav-link border-0"
|
||||
className="p-1 nav-link border-0 nav-messages"
|
||||
title={i18n.t("unread_messages", {
|
||||
count: Number(this.state.unreadApplicationCountRes.state),
|
||||
formattedCount: numToSI(this.unreadInboxCount),
|
||||
|
|
@ -112,14 +115,14 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
>
|
||||
<Icon icon="bell" />
|
||||
{this.unreadInboxCount > 0 && (
|
||||
<span className="mx-1 badge badge-light">
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadInboxCount)}
|
||||
</span>
|
||||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
{this.moderatesSomething && (
|
||||
<li className="nav-item">
|
||||
<li className="nav-item nav-item-icon">
|
||||
<NavLink
|
||||
to="/reports"
|
||||
className="p-1 nav-link border-0"
|
||||
|
|
@ -131,7 +134,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
>
|
||||
<Icon icon="shield" />
|
||||
{this.unreadReportCount > 0 && (
|
||||
<span className="mx-1 badge badge-light">
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadReportCount)}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -139,7 +142,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
</li>
|
||||
)}
|
||||
{amAdmin() && (
|
||||
<li className="nav-item">
|
||||
<li className="nav-item nav-item-icon">
|
||||
<NavLink
|
||||
to="/registration_applications"
|
||||
className="p-1 nav-link border-0"
|
||||
|
|
@ -151,7 +154,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
>
|
||||
<Icon icon="clipboard" />
|
||||
{this.unreadApplicationCount > 0 && (
|
||||
<span className="mx-1 badge badge-light">
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadApplicationCount)}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -178,7 +181,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
id="navbarDropdown"
|
||||
ref={this.mobileMenuRef}
|
||||
>
|
||||
<ul className="mr-auto navbar-nav">
|
||||
<ul id="navbarLinks" className="me-auto navbar-nav">
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/communities"
|
||||
|
|
@ -220,42 +223,51 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
)}
|
||||
<li className="nav-item">
|
||||
<a
|
||||
className="nav-link"
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
title={i18n.t("support_lemmy")}
|
||||
href={donateLemmyUrl}
|
||||
>
|
||||
<Icon icon="heart" classes="small" />
|
||||
<span className="d-inline ms-1 d-md-none ms-md-0">
|
||||
{i18n.t("support_lemmy")}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="navbar-nav">
|
||||
<li className="nav-item">
|
||||
<ul id="navbarIcons" className="navbar-nav">
|
||||
<li id="navSearch" className="nav-item">
|
||||
<NavLink
|
||||
to="/search"
|
||||
className="nav-link"
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
title={i18n.t("search")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="search" />
|
||||
<span className="d-inline ms-1 d-md-none ms-md-0">
|
||||
{i18n.t("search")}
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
{amAdmin() && (
|
||||
<li className="nav-item">
|
||||
<li id="navAdmin" className="nav-item">
|
||||
<NavLink
|
||||
to="/admin"
|
||||
className="nav-link"
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
title={i18n.t("admin_settings")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="settings" />
|
||||
<span className="d-inline ms-1 d-md-none ms-md-0">
|
||||
{i18n.t("admin_settings")}
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
{person ? (
|
||||
<>
|
||||
<li className="nav-item">
|
||||
<li id="navMessages" className="nav-item">
|
||||
<NavLink
|
||||
className="nav-link"
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
to="/inbox"
|
||||
title={i18n.t("unread_messages", {
|
||||
count: Number(this.unreadInboxCount),
|
||||
|
|
@ -264,17 +276,23 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="bell" />
|
||||
<span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
|
||||
{i18n.t("unread_messages", {
|
||||
count: Number(this.unreadInboxCount),
|
||||
formattedCount: numToSI(this.unreadInboxCount),
|
||||
})}
|
||||
</span>
|
||||
{this.unreadInboxCount > 0 && (
|
||||
<span className="mx-1 badge badge-light">
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadInboxCount)}
|
||||
</span>
|
||||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
{this.moderatesSomething && (
|
||||
<li className="nav-item">
|
||||
<li id="navModeration" className="nav-item">
|
||||
<NavLink
|
||||
className="nav-link"
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
to="/reports"
|
||||
title={i18n.t("unread_reports", {
|
||||
count: Number(this.unreadReportCount),
|
||||
|
|
@ -283,8 +301,14 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="shield" />
|
||||
<span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
|
||||
{i18n.t("unread_reports", {
|
||||
count: Number(this.unreadReportCount),
|
||||
formattedCount: numToSI(this.unreadReportCount),
|
||||
})}
|
||||
</span>
|
||||
{this.unreadReportCount > 0 && (
|
||||
<span className="mx-1 badge badge-light">
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadReportCount)}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -292,10 +316,10 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
</li>
|
||||
)}
|
||||
{amAdmin() && (
|
||||
<li className="nav-item">
|
||||
<li id="navApplications" className="nav-item">
|
||||
<NavLink
|
||||
to="/registration_applications"
|
||||
className="nav-link"
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
title={i18n.t("unread_registration_applications", {
|
||||
count: Number(this.unreadApplicationCount),
|
||||
formattedCount: numToSI(this.unreadApplicationCount),
|
||||
|
|
@ -303,8 +327,14 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="clipboard" />
|
||||
<span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
|
||||
{i18n.t("unread_registration_applications", {
|
||||
count: Number(this.unreadApplicationCount),
|
||||
formattedCount: numToSI(this.unreadApplicationCount),
|
||||
})}
|
||||
</span>
|
||||
{this.unreadApplicationCount > 0 && (
|
||||
<span className="mx-1 badge badge-light">
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadApplicationCount)}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -312,7 +342,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
</li>
|
||||
)}
|
||||
{person && (
|
||||
<div className="dropdown">
|
||||
<div id="dropdownUser" className="dropdown">
|
||||
<button
|
||||
className="btn dropdown-toggle"
|
||||
role="button"
|
||||
|
|
@ -335,7 +365,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
title={i18n.t("profile")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="user" classes="mr-1" />
|
||||
<Icon icon="user" classes="me-1" />
|
||||
{i18n.t("profile")}
|
||||
</NavLink>
|
||||
</li>
|
||||
|
|
@ -346,7 +376,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
title={i18n.t("settings")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="settings" classes="mr-1" />
|
||||
<Icon icon="settings" classes="me-1" />
|
||||
{i18n.t("settings")}
|
||||
</NavLink>
|
||||
</li>
|
||||
|
|
@ -358,7 +388,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
className="dropdown-item btn btn-link px-2"
|
||||
onClick={linkEvent(this, handleLogOut)}
|
||||
>
|
||||
<Icon icon="log-out" classes="mr-1" />
|
||||
<Icon icon="log-out" classes="me-1" />
|
||||
{i18n.t("logout")}
|
||||
</button>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ interface CommentFormProps {
|
|||
onReplyCancel?(): void;
|
||||
allLanguages: Language[];
|
||||
siteLanguages: number[];
|
||||
containerClass?: string;
|
||||
onUpsertComment(form: EditComment | CreateComment): void;
|
||||
}
|
||||
|
||||
|
|
@ -40,7 +41,11 @@ export class CommentForm extends Component<CommentFormProps, any> {
|
|||
: undefined;
|
||||
|
||||
return (
|
||||
<div className="mb-3">
|
||||
<div
|
||||
className={["comment-form", "mb-3", this.props.containerClass].join(
|
||||
" "
|
||||
)}
|
||||
>
|
||||
{UserService.Instance.myUserInfo ? (
|
||||
<MarkdownTextArea
|
||||
initialContent={initialContent}
|
||||
|
|
@ -58,7 +63,7 @@ export class CommentForm extends Component<CommentFormProps, any> {
|
|||
/>
|
||||
) : (
|
||||
<div className="alert alert-warning" role="alert">
|
||||
<Icon icon="alert-triangle" classes="icon-inline mr-2" />
|
||||
<Icon icon="alert-triangle" classes="icon-inline me-2" />
|
||||
<T i18nKey="must_login" class="d-inline">
|
||||
#
|
||||
<Link className="alert-link" to="/login">
|
||||
|
|
|
|||
|
|
@ -1,3 +1,11 @@
|
|||
import {
|
||||
amCommunityCreator,
|
||||
canAdmin,
|
||||
canMod,
|
||||
isAdmin,
|
||||
isBanned,
|
||||
isMod,
|
||||
} from "@utils/roles";
|
||||
import classNames from "classnames";
|
||||
import { Component, InfernoNode, linkEvent } from "inferno";
|
||||
import { Link } from "inferno-router";
|
||||
|
|
@ -40,16 +48,10 @@ import {
|
|||
} from "../../interfaces";
|
||||
import { UserService } from "../../services";
|
||||
import {
|
||||
amCommunityCreator,
|
||||
canAdmin,
|
||||
canMod,
|
||||
colorList,
|
||||
commentTreeMaxDepth,
|
||||
futureDaysToUnixTime,
|
||||
getCommentParentId,
|
||||
isAdmin,
|
||||
isBanned,
|
||||
isMod,
|
||||
mdToHtml,
|
||||
mdToHtmlNoImages,
|
||||
myAuth,
|
||||
|
|
@ -282,7 +284,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
|
||||
return (
|
||||
<li className="comment" role="comment">
|
||||
<div
|
||||
<article
|
||||
id={`comment-${cv.comment.id}`}
|
||||
className={classNames(`details comment-node py-2`, {
|
||||
"border-top border-light": !this.props.noBorder,
|
||||
|
|
@ -291,12 +293,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
>
|
||||
<div
|
||||
className={classNames({
|
||||
"ml-2": !this.props.noIndent,
|
||||
"ms-2": !this.props.noIndent,
|
||||
})}
|
||||
>
|
||||
<div className="d-flex flex-wrap align-items-center text-muted small">
|
||||
<button
|
||||
className="btn btn-sm text-muted mr-2"
|
||||
className="btn btn-sm text-muted me-2"
|
||||
onClick={linkEvent(this, this.handleCommentCollapse)}
|
||||
aria-label={this.expandText}
|
||||
data-tippy-content={this.expandText}
|
||||
|
|
@ -306,29 +308,29 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
classes="icon-inline"
|
||||
/>
|
||||
</button>
|
||||
<span className="mr-2">
|
||||
<span className="me-2">
|
||||
<PersonListing person={cv.creator} />
|
||||
</span>
|
||||
{cv.comment.distinguished && (
|
||||
<Icon icon="shield" inline classes={`text-danger mr-2`} />
|
||||
<Icon icon="shield" inline classes={`text-danger me-2`} />
|
||||
)}
|
||||
{this.isPostCreator && (
|
||||
<div className="badge badge-light d-none d-sm-inline mr-2">
|
||||
<div className="badge text-bg-light d-none d-sm-inline me-2">
|
||||
{i18n.t("creator")}
|
||||
</div>
|
||||
)}
|
||||
{isMod_ && (
|
||||
<div className="badge d-none d-sm-inline mr-2">
|
||||
<div className="badge text-bg-light d-none d-sm-inline me-2">
|
||||
{i18n.t("mod")}
|
||||
</div>
|
||||
)}
|
||||
{isAdmin_ && (
|
||||
<div className="badge d-none d-sm-inline mr-2">
|
||||
<div className="badge text-bg-light d-none d-sm-inline me-2">
|
||||
{i18n.t("admin")}
|
||||
</div>
|
||||
)}
|
||||
{cv.creator.bot_account && (
|
||||
<div className="badge d-none d-sm-inline mr-2">
|
||||
<div className="badge text-bg-light d-none d-sm-inline me-2">
|
||||
{i18n.t("bot_account").toLowerCase()}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -337,14 +339,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
<span className="mx-1">{i18n.t("to")}</span>
|
||||
<CommunityLink community={cv.community} />
|
||||
<span className="mx-2">•</span>
|
||||
<Link className="mr-2" to={`/post/${cv.post.id}`}>
|
||||
<Link className="me-2" to={`/post/${cv.post.id}`}>
|
||||
{cv.post.name}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
{this.linkBtn(true)}
|
||||
{cv.comment.language_id !== 0 && (
|
||||
<span className="badge d-none d-sm-inline mr-2">
|
||||
<span className="badge text-bg-light d-none d-sm-inline me-2">
|
||||
{
|
||||
this.props.allLanguages.find(
|
||||
lang => lang.id === cv.comment.language_id
|
||||
|
|
@ -353,7 +355,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
</span>
|
||||
)}
|
||||
{/* This is an expanding spacer for mobile */}
|
||||
<div className="mr-lg-5 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2" />
|
||||
<div className="me-lg-5 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2" />
|
||||
{showScores() && (
|
||||
<>
|
||||
<a
|
||||
|
|
@ -365,7 +367,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
<Spinner />
|
||||
) : (
|
||||
<span
|
||||
className="mr-1 font-weight-bold"
|
||||
className="me-1 font-weight-bold"
|
||||
aria-label={i18n.t("number_of_points", {
|
||||
count: Number(this.commentView.counts.score),
|
||||
formattedCount: numToSI(
|
||||
|
|
@ -377,7 +379,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
</span>
|
||||
)}
|
||||
</a>
|
||||
<span className="mr-1">•</span>
|
||||
<span className="me-1">•</span>
|
||||
</>
|
||||
)}
|
||||
<span>
|
||||
|
|
@ -400,6 +402,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
focus
|
||||
allLanguages={this.props.allLanguages}
|
||||
siteLanguages={this.props.siteLanguages}
|
||||
containerClass="comment-comment-container"
|
||||
onUpsertComment={this.props.onEditComment}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -467,7 +470,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
{showScores() &&
|
||||
this.commentView.counts.upvotes !==
|
||||
this.commentView.counts.score && (
|
||||
<span className="ml-1">
|
||||
<span className="ms-1">
|
||||
{numToSI(this.commentView.counts.upvotes)}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -494,7 +497,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
{showScores() &&
|
||||
this.commentView.counts.upvotes !==
|
||||
this.commentView.counts.score && (
|
||||
<span className="ml-1">
|
||||
<span className="ms-1">
|
||||
{numToSI(this.commentView.counts.downvotes)}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -512,7 +515,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
</button>
|
||||
{!this.state.showAdvanced ? (
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted"
|
||||
className="btn btn-link btn-animate text-muted btn-more"
|
||||
onClick={linkEvent(this, this.handleShowAdvanced)}
|
||||
data-tippy-content={i18n.t("more")}
|
||||
aria-label={i18n.t("more")}
|
||||
|
|
@ -944,10 +947,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{showMoreChildren && (
|
||||
<div
|
||||
className={classNames("details ml-1 comment-node py-2", {
|
||||
className={classNames("details ms-1 comment-node py-2", {
|
||||
"border-top border-light": !this.props.noBorder,
|
||||
})}
|
||||
style={`border-left: 2px ${moreRepliesBorderColor} solid !important`}
|
||||
|
|
@ -979,7 +982,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
onSubmit={linkEvent(this, this.handleRemoveComment)}
|
||||
>
|
||||
<label
|
||||
className="sr-only"
|
||||
className="visually-hidden"
|
||||
htmlFor={`mod-remove-reason-${cv.comment.id}`}
|
||||
>
|
||||
{i18n.t("reason")}
|
||||
|
|
@ -987,7 +990,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
<input
|
||||
type="text"
|
||||
id={`mod-remove-reason-${cv.comment.id}`}
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("reason")}
|
||||
value={this.state.removeReason}
|
||||
onInput={linkEvent(this, this.handleModRemoveReasonChange)}
|
||||
|
|
@ -1007,7 +1010,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
onSubmit={linkEvent(this, this.handleReportComment)}
|
||||
>
|
||||
<label
|
||||
className="sr-only"
|
||||
className="visually-hidden"
|
||||
htmlFor={`report-reason-${cv.comment.id}`}
|
||||
>
|
||||
{i18n.t("reason")}
|
||||
|
|
@ -1016,7 +1019,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
type="text"
|
||||
required
|
||||
id={`report-reason-${cv.comment.id}`}
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("reason")}
|
||||
value={this.state.reportReason}
|
||||
onInput={linkEvent(this, this.handleReportReasonChange)}
|
||||
|
|
@ -1032,7 +1035,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
)}
|
||||
{this.state.showBanDialog && (
|
||||
<form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
|
||||
<div className="form-group row col-12">
|
||||
<div className="mb-3 row col-12">
|
||||
<label
|
||||
className="col-form-label"
|
||||
htmlFor={`mod-ban-reason-${cv.comment.id}`}
|
||||
|
|
@ -1042,7 +1045,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
<input
|
||||
type="text"
|
||||
id={`mod-ban-reason-${cv.comment.id}`}
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("reason")}
|
||||
value={this.state.banReason}
|
||||
onInput={linkEvent(this, this.handleModBanReasonChange)}
|
||||
|
|
@ -1056,12 +1059,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
<input
|
||||
type="number"
|
||||
id={`mod-ban-expires-${cv.comment.id}`}
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("number_of_days")}
|
||||
value={this.state.banExpireDays}
|
||||
onInput={linkEvent(this, this.handleModBanExpireDaysChange)}
|
||||
/>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -1081,11 +1084,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
</div>
|
||||
</div>
|
||||
{/* TODO hold off on expires until later */}
|
||||
{/* <div class="form-group row"> */}
|
||||
{/* <div class="mb-3 row"> */}
|
||||
{/* <label class="col-form-label">Expires</label> */}
|
||||
{/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
|
||||
{/* <input type="date" class="form-control me-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
|
||||
{/* </div> */}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-secondary"
|
||||
|
|
@ -1106,7 +1109,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
{this.state.showPurgeDialog && (
|
||||
<form onSubmit={linkEvent(this, this.handlePurgeBothSubmit)}>
|
||||
<PurgeWarning />
|
||||
<label className="sr-only" htmlFor="purge-reason">
|
||||
<label className="visually-hidden" htmlFor="purge-reason">
|
||||
{i18n.t("reason")}
|
||||
</label>
|
||||
<input
|
||||
|
|
@ -1117,7 +1120,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
value={this.state.purgeReason}
|
||||
onInput={linkEvent(this, this.handlePurgeReasonChange)}
|
||||
/>
|
||||
<div className="form-group row col-12">
|
||||
<div className="mb-3 row col-12">
|
||||
{this.state.purgeLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
|
|
@ -1143,6 +1146,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
focus
|
||||
allLanguages={this.props.allLanguages}
|
||||
siteLanguages={this.props.siteLanguages}
|
||||
containerClass="comment-comment-container"
|
||||
onUpsertComment={this.props.onCreateComment}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ export class CommentReport extends Component<
|
|||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="comment-report">
|
||||
<CommentNode
|
||||
node={node}
|
||||
viewType={CommentViewType.Flat}
|
||||
|
|
|
|||
128
src/shared/components/common/badges.tsx
Normal file
128
src/shared/components/common/badges.tsx
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
import { Link } from "inferno-router";
|
||||
import {
|
||||
CommunityAggregates,
|
||||
CommunityId,
|
||||
SiteAggregates,
|
||||
} from "lemmy-js-client";
|
||||
import { i18n } from "../../i18next";
|
||||
import { numToSI } from "../../utils";
|
||||
|
||||
interface BadgesProps {
|
||||
counts: CommunityAggregates | SiteAggregates;
|
||||
communityId?: CommunityId;
|
||||
}
|
||||
|
||||
const isCommunityAggregates = (
|
||||
counts: CommunityAggregates | SiteAggregates
|
||||
): counts is CommunityAggregates => {
|
||||
return "subscribers" in counts;
|
||||
};
|
||||
|
||||
const isSiteAggregates = (
|
||||
counts: CommunityAggregates | SiteAggregates
|
||||
): counts is SiteAggregates => {
|
||||
return "communities" in counts;
|
||||
};
|
||||
|
||||
export const Badges = ({ counts, communityId }: BadgesProps) => {
|
||||
return (
|
||||
<ul className="badges my-1 list-inline">
|
||||
<li
|
||||
className="list-inline-item badge text-bg-secondary pointer"
|
||||
data-tippy-content={i18n.t("active_users_in_the_last_day", {
|
||||
count: Number(counts.users_active_day),
|
||||
formattedCount: numToSI(counts.users_active_day),
|
||||
})}
|
||||
>
|
||||
{i18n.t("number_of_users", {
|
||||
count: Number(counts.users_active_day),
|
||||
formattedCount: numToSI(counts.users_active_day),
|
||||
})}{" "}
|
||||
/ {i18n.t("day")}
|
||||
</li>
|
||||
<li
|
||||
className="list-inline-item badge text-bg-secondary pointer"
|
||||
data-tippy-content={i18n.t("active_users_in_the_last_week", {
|
||||
count: Number(counts.users_active_week),
|
||||
formattedCount: numToSI(counts.users_active_week),
|
||||
})}
|
||||
>
|
||||
{i18n.t("number_of_users", {
|
||||
count: Number(counts.users_active_week),
|
||||
formattedCount: numToSI(counts.users_active_week),
|
||||
})}{" "}
|
||||
/ {i18n.t("week")}
|
||||
</li>
|
||||
<li
|
||||
className="list-inline-item badge text-bg-secondary pointer"
|
||||
data-tippy-content={i18n.t("active_users_in_the_last_month", {
|
||||
count: Number(counts.users_active_month),
|
||||
formattedCount: numToSI(counts.users_active_month),
|
||||
})}
|
||||
>
|
||||
{i18n.t("number_of_users", {
|
||||
count: Number(counts.users_active_month),
|
||||
formattedCount: numToSI(counts.users_active_month),
|
||||
})}{" "}
|
||||
/ {i18n.t("month")}
|
||||
</li>
|
||||
<li
|
||||
className="list-inline-item badge text-bg-secondary pointer"
|
||||
data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
|
||||
count: Number(counts.users_active_half_year),
|
||||
formattedCount: numToSI(counts.users_active_half_year),
|
||||
})}
|
||||
>
|
||||
{i18n.t("number_of_users", {
|
||||
count: Number(counts.users_active_half_year),
|
||||
formattedCount: numToSI(counts.users_active_half_year),
|
||||
})}{" "}
|
||||
/ {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
|
||||
</li>
|
||||
{isSiteAggregates(counts) && (
|
||||
<>
|
||||
<li className="list-inline-item badge text-bg-secondary">
|
||||
{i18n.t("number_of_users", {
|
||||
count: Number(counts.users),
|
||||
formattedCount: numToSI(counts.users),
|
||||
})}
|
||||
</li>
|
||||
<li className="list-inline-item badge text-bg-secondary">
|
||||
{i18n.t("number_of_communities", {
|
||||
count: Number(counts.communities),
|
||||
formattedCount: numToSI(counts.communities),
|
||||
})}
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
{isCommunityAggregates(counts) && (
|
||||
<li className="list-inline-item badge text-bg-secondary">
|
||||
{i18n.t("number_of_subscribers", {
|
||||
count: Number(counts.subscribers),
|
||||
formattedCount: numToSI(counts.subscribers),
|
||||
})}
|
||||
</li>
|
||||
)}
|
||||
<li className="list-inline-item badge text-bg-secondary">
|
||||
{i18n.t("number_of_posts", {
|
||||
count: Number(counts.posts),
|
||||
formattedCount: numToSI(counts.posts),
|
||||
})}
|
||||
</li>
|
||||
<li className="list-inline-item badge text-bg-secondary">
|
||||
{i18n.t("number_of_comments", {
|
||||
count: Number(counts.comments),
|
||||
formattedCount: numToSI(counts.comments),
|
||||
})}
|
||||
</li>
|
||||
<li className="list-inline-item">
|
||||
<Link
|
||||
className="badge text-bg-primary"
|
||||
to={`/modlog${communityId ? `/${communityId}` : ""}`}
|
||||
>
|
||||
{i18n.t("modlog")}
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
|
@ -15,7 +15,8 @@ export class BannerIconHeader extends Component<BannerIconHeaderProps, any> {
|
|||
const banner = this.props.banner;
|
||||
const icon = this.props.icon;
|
||||
return (
|
||||
<div className="position-relative mb-2">
|
||||
(banner || icon) && (
|
||||
<div className="banner-icon-header position-relative mb-2">
|
||||
{banner && <PictrsImage src={banner} banner alt="" />}
|
||||
{icon && (
|
||||
<PictrsImage
|
||||
|
|
@ -26,6 +27,7 @@ export class BannerIconHeader extends Component<BannerIconHeaderProps, any> {
|
|||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export class CommentSortSelect extends Component<
|
|||
name={this.id}
|
||||
value={this.state.sort}
|
||||
onChange={linkEvent(this, this.handleSortChange)}
|
||||
className="custom-select w-auto mr-2 mb-2"
|
||||
className="sort-select form-select d-inline-block w-auto me-2 mb-2"
|
||||
aria-label={i18n.t("sort_type")}
|
||||
>
|
||||
<option disabled aria-hidden="true">
|
||||
|
|
@ -52,7 +52,7 @@ export class CommentSortSelect extends Component<
|
|||
<option value={"Old"}>{i18n.t("old")}</option>
|
||||
</select>
|
||||
<a
|
||||
className="text-muted"
|
||||
className="sort-select-help text-muted"
|
||||
href={sortingHelpUrl}
|
||||
rel={relTags}
|
||||
title={i18n.t("sorting_help")}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export class DataTypeSelect extends Component<
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="btn-group btn-group-toggle flex-wrap mb-2">
|
||||
<div className="data-type-select btn-group btn-group-toggle flex-wrap">
|
||||
<label
|
||||
className={`pointer btn btn-outline-secondary
|
||||
${this.state.type_ == DataType.Post && "active"}
|
||||
|
|
@ -39,6 +39,7 @@ export class DataTypeSelect extends Component<
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={DataType.Post}
|
||||
checked={this.state.type_ == DataType.Post}
|
||||
onChange={linkEvent(this, this.handleTypeChange)}
|
||||
|
|
@ -52,6 +53,7 @@ export class DataTypeSelect extends Component<
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={DataType.Comment}
|
||||
checked={this.state.type_ == DataType.Comment}
|
||||
onChange={linkEvent(this, this.handleTypeChange)}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
|
|||
}
|
||||
render() {
|
||||
return (
|
||||
<span>
|
||||
<span className="emoji-picker">
|
||||
<button
|
||||
className="btn btn-sm text-muted"
|
||||
data-tippy-content={i18n.t("emoji")}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export class Icon extends Component<IconProps, any> {
|
|||
<use
|
||||
xlinkHref={`/static/assets/symbols.svg#icon-${this.props.icon}`}
|
||||
></use>
|
||||
<div className="sr-only">
|
||||
<div className="visually-hidden">
|
||||
<title>{this.props.icon}</title>
|
||||
</div>
|
||||
</svg>
|
||||
|
|
@ -59,8 +59,8 @@ export class PurgeWarning extends Component<any, any> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="mt-2 alert alert-danger" role="alert">
|
||||
<Icon icon="alert-triangle" classes="icon-inline mr-2" />
|
||||
<div className="purge-warning mt-2 alert alert-danger" role="alert">
|
||||
<Icon icon="alert-triangle" classes="icon-inline me-2" />
|
||||
{i18n.t("purge_warning")}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ export class ImageUploadForm extends Component<
|
|||
|
||||
render() {
|
||||
return (
|
||||
<form className="d-inline">
|
||||
<form className="image-upload-form d-inline">
|
||||
<label
|
||||
htmlFor={this.id}
|
||||
className="pointer text-muted small font-weight-bold"
|
||||
|
|
|
|||
|
|
@ -49,13 +49,13 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
|
|||
return this.props.iconVersion ? (
|
||||
this.selectBtn
|
||||
) : (
|
||||
<div>
|
||||
<div className="language-select">
|
||||
{this.props.multiple && this.props.showLanguageWarning && (
|
||||
<div className="alert alert-warning" role="alert">
|
||||
{i18n.t("undetermined_language_warning")}
|
||||
</div>
|
||||
)}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className={classNames(
|
||||
"col-form-label",
|
||||
|
|
@ -73,14 +73,12 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
|
|||
>
|
||||
{this.selectBtn}
|
||||
{this.props.multiple && (
|
||||
<div className="input-group-append">
|
||||
<button
|
||||
className="input-group-text"
|
||||
className="btn btn-outline-secondary"
|
||||
onClick={linkEvent(this, this.handleDeselectAll)}
|
||||
>
|
||||
<Icon icon="x" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -100,12 +98,9 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
|
|||
|
||||
return (
|
||||
<select
|
||||
className={classNames(
|
||||
"lang-select-action",
|
||||
this.props.iconVersion
|
||||
? "btn btn-sm text-muted"
|
||||
: "form-control custom-select"
|
||||
)}
|
||||
className={classNames("form-select w-auto", {
|
||||
"d-inline-block": !this.props.iconVersion,
|
||||
})}
|
||||
id={this.id}
|
||||
onChange={linkEvent(this, this.handleLanguageChange)}
|
||||
aria-label={i18n.t("language_select_placeholder")}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export class ListingTypeSelect extends Component<
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="btn-group btn-group-toggle flex-wrap mb-2">
|
||||
<div className="listing-type-select btn-group btn-group-toggle flex-wrap">
|
||||
{this.props.showSubscribed && (
|
||||
<label
|
||||
title={i18n.t("subscribed_description")}
|
||||
|
|
@ -51,6 +51,7 @@ export class ListingTypeSelect extends Component<
|
|||
<input
|
||||
id={`${this.id}-subscribed`}
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={"Subscribed"}
|
||||
checked={this.state.type_ == "Subscribed"}
|
||||
onChange={linkEvent(this, this.handleTypeChange)}
|
||||
|
|
@ -69,6 +70,7 @@ export class ListingTypeSelect extends Component<
|
|||
<input
|
||||
id={`${this.id}-local`}
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={"Local"}
|
||||
checked={this.state.type_ == "Local"}
|
||||
onChange={linkEvent(this, this.handleTypeChange)}
|
||||
|
|
@ -86,6 +88,7 @@ export class ListingTypeSelect extends Component<
|
|||
<input
|
||||
id={`${this.id}-all`}
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={"All"}
|
||||
checked={this.state.type_ == "All"}
|
||||
onChange={linkEvent(this, this.handleTypeChange)}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { isBrowser } from "@utils/browser";
|
||||
import autosize from "autosize";
|
||||
import classNames from "classnames";
|
||||
import { NoOptionI18nKeys } from "i18next";
|
||||
import { Component, linkEvent } from "inferno";
|
||||
import { Language } from "lemmy-js-client";
|
||||
|
|
@ -7,7 +9,6 @@ import { HttpService, UserService } from "../../services";
|
|||
import {
|
||||
concurrentImageUpload,
|
||||
customEmojisLookup,
|
||||
isBrowser,
|
||||
markdownFieldCharacterLimit,
|
||||
markdownHelpUrl,
|
||||
maxUploadImages,
|
||||
|
|
@ -63,8 +64,9 @@ export class MarkdownTextArea extends Component<
|
|||
MarkdownTextAreaProps,
|
||||
MarkdownTextAreaState
|
||||
> {
|
||||
private id = `comment-textarea-${randomStr()}`;
|
||||
private formId = `comment-form-${randomStr()}`;
|
||||
private id = `markdown-textarea-${randomStr()}`;
|
||||
private formId = `markdown-form-${randomStr()}`;
|
||||
|
||||
private tribute: any;
|
||||
|
||||
state: MarkdownTextAreaState = {
|
||||
|
|
@ -134,7 +136,11 @@ export class MarkdownTextArea extends Component<
|
|||
// message={i18n.t("block_leaving")}
|
||||
// />
|
||||
return (
|
||||
<form id={this.formId} onSubmit={linkEvent(this, this.handleSubmit)}>
|
||||
<form
|
||||
className="markdown-textarea"
|
||||
id={this.formId}
|
||||
onSubmit={linkEvent(this, this.handleSubmit)}
|
||||
>
|
||||
<NavigationPrompt
|
||||
when={
|
||||
!this.props.hideNavigationWarnings &&
|
||||
|
|
@ -142,48 +148,10 @@ export class MarkdownTextArea extends Component<
|
|||
!this.state.submitted
|
||||
}
|
||||
/>
|
||||
<div className="form-group row">
|
||||
<div className={`col-sm-12`}>
|
||||
<textarea
|
||||
id={this.id}
|
||||
className={`form-control ${this.state.previewMode && "d-none"}`}
|
||||
value={this.state.content}
|
||||
onInput={linkEvent(this, this.handleContentChange)}
|
||||
onPaste={linkEvent(this, this.handleImageUploadPaste)}
|
||||
onKeyDown={linkEvent(this, this.handleKeyBinds)}
|
||||
required
|
||||
disabled={this.isDisabled}
|
||||
rows={2}
|
||||
maxLength={this.props.maxLength ?? markdownFieldCharacterLimit}
|
||||
placeholder={this.props.placeholder}
|
||||
/>
|
||||
{this.state.previewMode && this.state.content && (
|
||||
<div
|
||||
className="card border-secondary card-body md-div"
|
||||
dangerouslySetInnerHTML={mdToHtml(this.state.content)}
|
||||
/>
|
||||
)}
|
||||
{this.state.imageUploadStatus &&
|
||||
this.state.imageUploadStatus.total > 1 && (
|
||||
<ProgressBar
|
||||
className="mt-2"
|
||||
striped
|
||||
animated
|
||||
value={this.state.imageUploadStatus.uploaded}
|
||||
max={this.state.imageUploadStatus.total}
|
||||
text={i18n.t("pictures_uploded_progess", {
|
||||
uploaded: this.state.imageUploadStatus.uploaded,
|
||||
total: this.state.imageUploadStatus.total,
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<label className="sr-only" htmlFor={this.id}>
|
||||
{i18n.t("body")}
|
||||
</label>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-sm-12 d-flex flex-wrap">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="rounded bg-light border">
|
||||
<div className="d-flex flex-wrap border-bottom">
|
||||
{this.getFormatButton("bold", this.handleInsertBold)}
|
||||
{this.getFormatButton("italic", this.handleInsertItalic)}
|
||||
{this.getFormatButton("link", this.handleInsertLink)}
|
||||
|
|
@ -212,7 +180,9 @@ export class MarkdownTextArea extends Component<
|
|||
name="file"
|
||||
className="d-none"
|
||||
multiple
|
||||
disabled={!UserService.Instance.myUserInfo || this.isDisabled}
|
||||
disabled={
|
||||
!UserService.Instance.myUserInfo || this.isDisabled
|
||||
}
|
||||
onChange={linkEvent(this, this.handleImageUpload)}
|
||||
/>
|
||||
</form>
|
||||
|
|
@ -225,7 +195,10 @@ export class MarkdownTextArea extends Component<
|
|||
{this.getFormatButton("list", this.handleInsertList)}
|
||||
{this.getFormatButton("code", this.handleInsertCode)}
|
||||
{this.getFormatButton("subscript", this.handleInsertSubscript)}
|
||||
{this.getFormatButton("superscript", this.handleInsertSuperscript)}
|
||||
{this.getFormatButton(
|
||||
"superscript",
|
||||
this.handleInsertSuperscript
|
||||
)}
|
||||
{this.getFormatButton("spoiler", this.handleInsertSpoiler)}
|
||||
<a
|
||||
href={markdownHelpUrl}
|
||||
|
|
@ -237,7 +210,55 @@ export class MarkdownTextArea extends Component<
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<div className="col-sm-12 d-flex align-items-center flex-wrap">
|
||||
<div>
|
||||
<textarea
|
||||
id={this.id}
|
||||
className={classNames(
|
||||
"form-control border-0 rounded-top-0 rounded-bottom",
|
||||
{
|
||||
"d-none": this.state.previewMode,
|
||||
}
|
||||
)}
|
||||
value={this.state.content}
|
||||
onInput={linkEvent(this, this.handleContentChange)}
|
||||
onPaste={linkEvent(this, this.handleImageUploadPaste)}
|
||||
onKeyDown={linkEvent(this, this.handleKeyBinds)}
|
||||
required
|
||||
disabled={this.isDisabled}
|
||||
rows={2}
|
||||
maxLength={
|
||||
this.props.maxLength ?? markdownFieldCharacterLimit
|
||||
}
|
||||
placeholder={this.props.placeholder}
|
||||
/>
|
||||
{this.state.previewMode && this.state.content && (
|
||||
<div
|
||||
className="card border-secondary card-body md-div"
|
||||
dangerouslySetInnerHTML={mdToHtml(this.state.content)}
|
||||
/>
|
||||
)}
|
||||
{this.state.imageUploadStatus &&
|
||||
this.state.imageUploadStatus.total > 1 && (
|
||||
<ProgressBar
|
||||
className="mt-2"
|
||||
striped
|
||||
animated
|
||||
value={this.state.imageUploadStatus.uploaded}
|
||||
max={this.state.imageUploadStatus.total}
|
||||
text={i18n.t("pictures_uploded_progess", {
|
||||
uploaded: this.state.imageUploadStatus.uploaded,
|
||||
total: this.state.imageUploadStatus.total,
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<label className="visually-hidden" htmlFor={this.id}>
|
||||
{i18n.t("body")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 d-flex align-items-center flex-wrap mt-2">
|
||||
{this.props.showLanguage && (
|
||||
<LanguageSelect
|
||||
iconVersion
|
||||
|
|
@ -257,7 +278,7 @@ export class MarkdownTextArea extends Component<
|
|||
{this.props.buttonTitle && (
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-secondary mr-2"
|
||||
className="btn btn-sm btn-secondary ms-2"
|
||||
disabled={this.isDisabled}
|
||||
>
|
||||
{this.state.loading ? (
|
||||
|
|
@ -270,7 +291,7 @@ export class MarkdownTextArea extends Component<
|
|||
{this.props.replyType && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-secondary mr-2"
|
||||
className="btn btn-sm btn-secondary ms-2"
|
||||
onClick={linkEvent(this, this.handleReplyCancel)}
|
||||
>
|
||||
{i18n.t("cancel")}
|
||||
|
|
@ -278,7 +299,7 @@ export class MarkdownTextArea extends Component<
|
|||
)}
|
||||
{this.state.content && (
|
||||
<button
|
||||
className={`btn btn-sm btn-secondary mr-2 ${
|
||||
className={`btn btn-sm btn-secondary ms-2 ${
|
||||
this.state.previewMode && "active"
|
||||
}`}
|
||||
onClick={linkEvent(this, this.handlePreviewToggle)}
|
||||
|
|
|
|||
|
|
@ -36,9 +36,9 @@ export class MomentTime extends Component<MomentTimeProps, any> {
|
|||
return (
|
||||
<span
|
||||
data-tippy-content={this.createdAndModifiedTimes()}
|
||||
className="font-italics pointer unselectable"
|
||||
className="moment-time font-italics pointer unselectable"
|
||||
>
|
||||
<Icon icon="edit-2" classes="icon-inline mr-1" />
|
||||
<Icon icon="edit-2" classes="icon-inline me-1" />
|
||||
{moment.utc(this.props.updated).fromNow(!this.props.showAgo)}
|
||||
</span>
|
||||
);
|
||||
|
|
@ -46,7 +46,7 @@ export class MomentTime extends Component<MomentTimeProps, any> {
|
|||
const published = this.props.published;
|
||||
return (
|
||||
<span
|
||||
className="pointer unselectable"
|
||||
className="moment-time pointer unselectable"
|
||||
data-tippy-content={this.format(published)}
|
||||
>
|
||||
{moment.utc(published).fromNow(!this.props.showAgo)}
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@ export class Paginator extends Component<PaginatorProps, any> {
|
|||
}
|
||||
render() {
|
||||
return (
|
||||
<div className="my-2">
|
||||
<div className="paginator my-2">
|
||||
<button
|
||||
className="btn btn-secondary mr-2"
|
||||
className="btn btn-secondary me-2"
|
||||
disabled={this.props.page == 1}
|
||||
onClick={linkEvent(this, this.handlePrev)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<picture>
|
||||
<picture className="pictrs-image d-inline-block overflow-hidden">
|
||||
<source srcSet={this.src("webp")} type="image/webp" />
|
||||
<source srcSet={this.props.src} />
|
||||
<source srcSet={this.src("jpg")} type="image/jpeg" />
|
||||
|
|
@ -39,8 +39,8 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
|
|||
"img-expanded slight-radius":
|
||||
!this.props.thumbnail && !this.props.icon,
|
||||
"img-blur": this.props.thumbnail && this.props.nsfw,
|
||||
"rounded-circle img-cover img-icon mr-2": this.props.icon,
|
||||
"ml-2 mb-0 rounded-circle img-cover avatar-overlay":
|
||||
"rounded-circle img-cover img-icon me-2": this.props.icon,
|
||||
"ms-2 mb-0 rounded-circle img-cover avatar-overlay":
|
||||
this.props.iconOverlay,
|
||||
"avatar-pushup": this.props.pushup,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ export class RegistrationApplication extends Component<
|
|||
const accepted = a.creator_local_user.accepted_application;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="registration-application">
|
||||
<div>
|
||||
{i18n.t("applicant")}: <PersonListing person={a.creator} />
|
||||
</div>
|
||||
|
|
@ -96,7 +96,7 @@ export class RegistrationApplication extends Component<
|
|||
)}
|
||||
|
||||
{this.state.denyExpanded && (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label">
|
||||
{i18n.t("deny_reason")}
|
||||
</label>
|
||||
|
|
@ -113,7 +113,7 @@ export class RegistrationApplication extends Component<
|
|||
)}
|
||||
{(!ra.admin_id || (ra.admin_id && !accepted)) && (
|
||||
<button
|
||||
className="btn btn-secondary mr-2 my-2"
|
||||
className="btn btn-secondary me-2 my-2"
|
||||
onClick={linkEvent(this, this.handleApprove)}
|
||||
aria-label={i18n.t("approve")}
|
||||
>
|
||||
|
|
@ -122,7 +122,7 @@ export class RegistrationApplication extends Component<
|
|||
)}
|
||||
{(!ra.admin_id || (ra.admin_id && accepted)) && (
|
||||
<button
|
||||
className="btn btn-secondary mr-2"
|
||||
className="btn btn-secondary me-2"
|
||||
onClick={linkEvent(this, this.handleDeny)}
|
||||
aria-label={i18n.t("deny")}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -102,11 +102,11 @@ export class SearchableSelect extends Component<
|
|||
const { searchText, selectedIndex, loadingEllipses } = this.state;
|
||||
|
||||
return (
|
||||
<div className="dropdown">
|
||||
<div className="searchable-select dropdown">
|
||||
<button
|
||||
id={id}
|
||||
type="button"
|
||||
className="custom-select text-start"
|
||||
className="form-select d-inline-block text-start"
|
||||
aria-haspopup="listbox"
|
||||
data-bs-toggle="dropdown"
|
||||
onClick={linkEvent(this, focusSearch)}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
|
|||
name={this.id}
|
||||
value={this.state.sort}
|
||||
onChange={linkEvent(this, this.handleSortChange)}
|
||||
className="custom-select w-auto mr-2 mb-2"
|
||||
className="sort-select form-select d-inline-block w-auto me-2"
|
||||
aria-label={i18n.t("sort_type")}
|
||||
>
|
||||
<option disabled aria-hidden="true">
|
||||
|
|
@ -73,7 +73,7 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
|
|||
<option value={"TopAll"}>{i18n.t("top_all")}</option>
|
||||
</select>
|
||||
<a
|
||||
className="text-muted"
|
||||
className="sort-select-icon text-muted"
|
||||
href={sortingHelpUrl}
|
||||
rel={relTags}
|
||||
title={i18n.t("sorting_help")}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { getQueryParams, getQueryString } from "@utils/helpers";
|
||||
import type { QueryParams } from "@utils/types";
|
||||
import { Component, linkEvent } from "inferno";
|
||||
import {
|
||||
CommunityResponse,
|
||||
|
|
@ -11,11 +13,9 @@ import { InitialFetchRequest } from "../../interfaces";
|
|||
import { FirstLoadService } from "../../services/FirstLoadService";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
QueryParams,
|
||||
RouteDataResponse,
|
||||
editCommunity,
|
||||
getPageFromString,
|
||||
getQueryParams,
|
||||
getQueryString,
|
||||
myAuth,
|
||||
myAuthRequired,
|
||||
numToSI,
|
||||
|
|
@ -30,6 +30,10 @@ import { CommunityLink } from "./community-link";
|
|||
|
||||
const communityLimit = 50;
|
||||
|
||||
type CommunitiesData = RouteDataResponse<{
|
||||
listCommunitiesResponse: ListCommunitiesResponse;
|
||||
}>;
|
||||
|
||||
interface CommunitiesState {
|
||||
listCommunitiesResponse: RequestState<ListCommunitiesResponse>;
|
||||
siteRes: GetSiteResponse;
|
||||
|
|
@ -47,7 +51,7 @@ function getListingTypeFromQuery(listingType?: string): ListingType {
|
|||
}
|
||||
|
||||
export class Communities extends Component<any, CommunitiesState> {
|
||||
private isoData = setIsoData(this.context);
|
||||
private isoData = setIsoData<CommunitiesData>(this.context);
|
||||
state: CommunitiesState = {
|
||||
listCommunitiesResponse: { state: "empty" },
|
||||
siteRes: this.isoData.site_res,
|
||||
|
|
@ -62,9 +66,11 @@ export class Communities extends Component<any, CommunitiesState> {
|
|||
|
||||
// Only fetch the data if coming from another route
|
||||
if (FirstLoadService.isFirstLoad) {
|
||||
const { listCommunitiesResponse } = this.isoData.routeData;
|
||||
|
||||
this.state = {
|
||||
...this.state,
|
||||
listCommunitiesResponse: this.isoData.routeData[0],
|
||||
listCommunitiesResponse,
|
||||
isIsomorphic: true,
|
||||
};
|
||||
}
|
||||
|
|
@ -106,9 +112,7 @@ export class Communities extends Component<any, CommunitiesState> {
|
|||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="float-md-right">{this.searchForm()}</div>
|
||||
</div>
|
||||
<div className="col-md-6">{this.searchForm()}</div>
|
||||
</div>
|
||||
|
||||
<div className="table-responsive">
|
||||
|
|
@ -203,7 +207,7 @@ export class Communities extends Component<any, CommunitiesState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="communities container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -216,25 +220,29 @@ export class Communities extends Component<any, CommunitiesState> {
|
|||
searchForm() {
|
||||
return (
|
||||
<form
|
||||
className="form-inline"
|
||||
className="row justify-content-end"
|
||||
onSubmit={linkEvent(this, this.handleSearchSubmit)}
|
||||
>
|
||||
<div className="col-auto">
|
||||
<input
|
||||
type="text"
|
||||
id="communities-search"
|
||||
className="form-control mr-2 mb-2"
|
||||
className="form-control me-2 mb-2"
|
||||
value={this.state.searchText}
|
||||
placeholder={`${i18n.t("search")}...`}
|
||||
onInput={linkEvent(this, this.handleSearchChange)}
|
||||
required
|
||||
minLength={3}
|
||||
/>
|
||||
<label className="sr-only" htmlFor="communities-search">
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<label className="visually-hidden" htmlFor="communities-search">
|
||||
{i18n.t("search")}
|
||||
</label>
|
||||
<button type="submit" className="btn btn-secondary mr-2 mb-2">
|
||||
<button type="submit" className="btn btn-secondary mb-2">
|
||||
<span>{i18n.t("search")}</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
|
@ -274,13 +282,13 @@ export class Communities extends Component<any, CommunitiesState> {
|
|||
i.context.router.history.push(`/search?q=${searchParamEncoded}`);
|
||||
}
|
||||
|
||||
static fetchInitialData({
|
||||
static async fetchInitialData({
|
||||
query: { listingType, page },
|
||||
client,
|
||||
auth,
|
||||
}: InitialFetchRequest<QueryParams<CommunitiesProps>>): Promise<
|
||||
RequestState<any>
|
||||
>[] {
|
||||
}: InitialFetchRequest<
|
||||
QueryParams<CommunitiesProps>
|
||||
>): Promise<CommunitiesData> {
|
||||
const listCommunitiesForm: ListCommunities = {
|
||||
type_: getListingTypeFromQuery(listingType),
|
||||
sort: "TopMonth",
|
||||
|
|
@ -289,7 +297,11 @@ export class Communities extends Component<any, CommunitiesState> {
|
|||
auth: auth,
|
||||
};
|
||||
|
||||
return [client.listCommunities(listCommunitiesForm)];
|
||||
return {
|
||||
listCommunitiesResponse: await client.listCommunities(
|
||||
listCommunitiesForm
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
getCommunitiesQueryParams() {
|
||||
|
|
|
|||
|
|
@ -85,7 +85,10 @@ export class CommunityForm extends Component<
|
|||
|
||||
render() {
|
||||
return (
|
||||
<form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
|
||||
<form
|
||||
className="community-form"
|
||||
onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}
|
||||
>
|
||||
<NavigationPrompt
|
||||
when={
|
||||
!this.props.loading &&
|
||||
|
|
@ -98,14 +101,14 @@ export class CommunityForm extends Component<
|
|||
}
|
||||
/>
|
||||
{!this.props.community_view && (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-12 col-sm-2 col-form-label"
|
||||
htmlFor="community-name"
|
||||
>
|
||||
{i18n.t("name")}
|
||||
<span
|
||||
className="position-absolute pointer unselectable ml-2 text-muted"
|
||||
className="position-absolute pointer unselectable ms-2 text-muted"
|
||||
data-tippy-content={i18n.t("name_explain")}
|
||||
>
|
||||
<Icon icon="help-circle" classes="icon-inline" />
|
||||
|
|
@ -126,14 +129,14 @@ export class CommunityForm extends Component<
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-12 col-sm-2 col-form-label"
|
||||
htmlFor="community-title"
|
||||
>
|
||||
{i18n.t("display_name")}
|
||||
<span
|
||||
className="position-absolute pointer unselectable ml-2 text-muted"
|
||||
className="position-absolute pointer unselectable ms-2 text-muted"
|
||||
data-tippy-content={i18n.t("display_name_explain")}
|
||||
>
|
||||
<Icon icon="help-circle" classes="icon-inline" />
|
||||
|
|
@ -152,8 +155,10 @@ export class CommunityForm extends Component<
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<label className="col-12 col-sm-2">{i18n.t("icon")}</label>
|
||||
<div className="mb-3 row">
|
||||
<label className="col-12 col-sm-2 col-form-label">
|
||||
{i18n.t("icon")}
|
||||
</label>
|
||||
<div className="col-12 col-sm-10">
|
||||
<ImageUploadForm
|
||||
uploadTitle={i18n.t("upload_icon")}
|
||||
|
|
@ -164,8 +169,10 @@ export class CommunityForm extends Component<
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<label className="col-12 col-sm-2">{i18n.t("banner")}</label>
|
||||
<div className="mb-3 row">
|
||||
<label className="col-12 col-sm-2 col-form-label">
|
||||
{i18n.t("banner")}
|
||||
</label>
|
||||
<div className="col-12 col-sm-10">
|
||||
<ImageUploadForm
|
||||
uploadTitle={i18n.t("upload_banner")}
|
||||
|
|
@ -175,7 +182,7 @@ export class CommunityForm extends Component<
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-12 col-sm-2 col-form-label" htmlFor={this.id}>
|
||||
{i18n.t("sidebar")}
|
||||
</label>
|
||||
|
|
@ -192,7 +199,7 @@ export class CommunityForm extends Component<
|
|||
</div>
|
||||
|
||||
{this.props.enableNsfw && (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<legend className="col-form-label col-sm-2 pt-0">
|
||||
{i18n.t("nsfw")}
|
||||
</legend>
|
||||
|
|
@ -209,7 +216,7 @@ export class CommunityForm extends Component<
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<legend className="col-form-label col-6 pt-0">
|
||||
{i18n.t("only_mods_can_post_in_community")}
|
||||
</legend>
|
||||
|
|
@ -236,11 +243,11 @@ export class CommunityForm extends Component<
|
|||
multiple={true}
|
||||
onChange={this.handleDiscussionLanguageChange}
|
||||
/>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-secondary mr-2"
|
||||
className="btn btn-secondary me-2"
|
||||
disabled={this.props.loading}
|
||||
>
|
||||
{this.props.loading ? (
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export class CommunityLink extends Component<CommunityLinkProps, any> {
|
|||
return !this.props.realLink ? (
|
||||
<Link
|
||||
title={apubName}
|
||||
className={`${this.props.muted ? "text-muted" : ""}`}
|
||||
className={`community-link ${this.props.muted ? "text-muted" : ""}`}
|
||||
to={link}
|
||||
>
|
||||
{this.avatarAndName(displayName)}
|
||||
|
|
@ -45,7 +45,7 @@ export class CommunityLink extends Component<CommunityLinkProps, any> {
|
|||
) : (
|
||||
<a
|
||||
title={apubName}
|
||||
className={`${this.props.muted ? "text-muted" : ""}`}
|
||||
className={`community-link ${this.props.muted ? "text-muted" : ""}`}
|
||||
href={link}
|
||||
rel={relTags}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { getQueryParams, getQueryString } from "@utils/helpers";
|
||||
import type { QueryParams } from "@utils/types";
|
||||
import { Component, linkEvent } from "inferno";
|
||||
import { RouteComponentProps } from "inferno-router/dist/Route";
|
||||
import {
|
||||
|
|
@ -62,7 +64,7 @@ import { UserService } from "../../services";
|
|||
import { FirstLoadService } from "../../services/FirstLoadService";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
QueryParams,
|
||||
RouteDataResponse,
|
||||
commentsToFlatNodes,
|
||||
communityRSSUrl,
|
||||
editComment,
|
||||
|
|
@ -74,8 +76,6 @@ import {
|
|||
getCommentParentId,
|
||||
getDataTypeString,
|
||||
getPageFromString,
|
||||
getQueryParams,
|
||||
getQueryString,
|
||||
myAuth,
|
||||
postToCommentSortType,
|
||||
relTags,
|
||||
|
|
@ -100,6 +100,12 @@ import { SiteSidebar } from "../home/site-sidebar";
|
|||
import { PostListings } from "../post/post-listings";
|
||||
import { CommunityLink } from "./community-link";
|
||||
|
||||
type CommunityData = RouteDataResponse<{
|
||||
communityRes: GetCommunityResponse;
|
||||
postsRes: GetPostsResponse;
|
||||
commentsRes: GetCommentsResponse;
|
||||
}>;
|
||||
|
||||
interface State {
|
||||
communityRes: RequestState<GetCommunityResponse>;
|
||||
postsRes: RequestState<GetPostsResponse>;
|
||||
|
|
@ -140,7 +146,7 @@ export class Community extends Component<
|
|||
RouteComponentProps<{ name: string }>,
|
||||
State
|
||||
> {
|
||||
private isoData = setIsoData(this.context);
|
||||
private isoData = setIsoData<CommunityData>(this.context);
|
||||
state: State = {
|
||||
communityRes: { state: "empty" },
|
||||
postsRes: { state: "empty" },
|
||||
|
|
@ -194,13 +200,14 @@ export class Community extends Component<
|
|||
|
||||
// Only fetch the data if coming from another route
|
||||
if (FirstLoadService.isFirstLoad) {
|
||||
const [communityRes, postsRes, commentsRes] = this.isoData.routeData;
|
||||
const { communityRes, commentsRes, postsRes } = this.isoData.routeData;
|
||||
|
||||
this.state = {
|
||||
...this.state,
|
||||
isIsomorphic: true,
|
||||
commentsRes,
|
||||
communityRes,
|
||||
postsRes,
|
||||
commentsRes,
|
||||
isIsomorphic: true,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -227,23 +234,21 @@ export class Community extends Component<
|
|||
saveScrollPosition(this.context);
|
||||
}
|
||||
|
||||
static fetchInitialData({
|
||||
static async fetchInitialData({
|
||||
client,
|
||||
path,
|
||||
query: { dataType: urlDataType, page: urlPage, sort: urlSort },
|
||||
auth,
|
||||
}: InitialFetchRequest<QueryParams<CommunityProps>>): Promise<
|
||||
RequestState<any>
|
||||
>[] {
|
||||
Promise<CommunityData>
|
||||
> {
|
||||
const pathSplit = path.split("/");
|
||||
const promises: Promise<RequestState<any>>[] = [];
|
||||
|
||||
const communityName = pathSplit[2];
|
||||
const communityForm: GetCommunity = {
|
||||
name: communityName,
|
||||
auth,
|
||||
};
|
||||
promises.push(client.getCommunity(communityForm));
|
||||
|
||||
const dataType = getDataTypeFromQuery(urlDataType);
|
||||
|
||||
|
|
@ -251,6 +256,11 @@ export class Community extends Component<
|
|||
|
||||
const page = getPageFromString(urlPage);
|
||||
|
||||
let postsResponse: RequestState<GetPostsResponse> = { state: "empty" };
|
||||
let commentsResponse: RequestState<GetCommentsResponse> = {
|
||||
state: "empty",
|
||||
};
|
||||
|
||||
if (dataType === DataType.Post) {
|
||||
const getPostsForm: GetPosts = {
|
||||
community_name: communityName,
|
||||
|
|
@ -261,8 +271,8 @@ export class Community extends Component<
|
|||
saved_only: false,
|
||||
auth,
|
||||
};
|
||||
promises.push(client.getPosts(getPostsForm));
|
||||
promises.push(Promise.resolve({ state: "empty" }));
|
||||
|
||||
postsResponse = await client.getPosts(getPostsForm);
|
||||
} else {
|
||||
const getCommentsForm: GetComments = {
|
||||
community_name: communityName,
|
||||
|
|
@ -273,11 +283,15 @@ export class Community extends Component<
|
|||
saved_only: false,
|
||||
auth,
|
||||
};
|
||||
promises.push(Promise.resolve({ state: "empty" }));
|
||||
promises.push(client.getComments(getCommentsForm));
|
||||
|
||||
commentsResponse = await client.getComments(getCommentsForm);
|
||||
}
|
||||
|
||||
return promises;
|
||||
return {
|
||||
communityRes: await client.getCommunity(communityForm),
|
||||
commentsRes: commentsResponse,
|
||||
postsRes: postsResponse,
|
||||
};
|
||||
}
|
||||
|
||||
get documentTitle(): string {
|
||||
|
|
@ -313,7 +327,7 @@ export class Community extends Component<
|
|||
{this.communityInfo(res)}
|
||||
<div className="d-block d-md-none">
|
||||
<button
|
||||
className="btn btn-secondary d-inline-block mb-2 mr-3"
|
||||
className="btn btn-secondary d-inline-block mb-2 me-3"
|
||||
onClick={linkEvent(this, this.handleShowSidebarMobile)}
|
||||
>
|
||||
{i18n.t("sidebar")}{" "}
|
||||
|
|
@ -343,7 +357,9 @@ export class Community extends Component<
|
|||
}
|
||||
|
||||
render() {
|
||||
return <div className="container-lg">{this.renderCommunity()}</div>;
|
||||
return (
|
||||
<div className="community container-lg">{this.renderCommunity()}</div>
|
||||
);
|
||||
}
|
||||
|
||||
sidebar(res: GetCommunityResponse) {
|
||||
|
|
@ -360,7 +376,6 @@ export class Community extends Component<
|
|||
community_view={res.community_view}
|
||||
moderators={res.moderators}
|
||||
admins={site_res.admins}
|
||||
online={res.online}
|
||||
enableNsfw={enableNsfw(site_res)}
|
||||
editable
|
||||
allLanguages={site_res.all_languages}
|
||||
|
|
@ -497,13 +512,13 @@ export class Community extends Component<
|
|||
|
||||
return (
|
||||
<div className="mb-3">
|
||||
<span className="mr-3">
|
||||
<span className="me-3">
|
||||
<DataTypeSelect
|
||||
type_={dataType}
|
||||
onChange={this.handleDataTypeChange}
|
||||
/>
|
||||
</span>
|
||||
<span className="mr-2">
|
||||
<span className="me-2">
|
||||
<SortSelect sort={sort} onChange={this.handleSortChange} />
|
||||
</span>
|
||||
{communityRss && (
|
||||
|
|
@ -647,6 +662,12 @@ export class Community extends Component<
|
|||
const blockCommunityRes = await HttpService.client.blockCommunity(form);
|
||||
if (blockCommunityRes.state == "success") {
|
||||
updateCommunityBlock(blockCommunityRes.data);
|
||||
this.setState(s => {
|
||||
if (s.communityRes.state == "success") {
|
||||
s.communityRes.data.community_view.blocked =
|
||||
blockCommunityRes.data.blocked;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="create-community container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { amAdmin, amMod, amTopMod } from "@utils/roles";
|
||||
import { Component, InfernoNode, linkEvent } from "inferno";
|
||||
import { T } from "inferno-i18next-dess";
|
||||
import { Link } from "inferno-router";
|
||||
|
|
@ -16,16 +17,8 @@ import {
|
|||
} from "lemmy-js-client";
|
||||
import { i18n } from "../../i18next";
|
||||
import { UserService } from "../../services";
|
||||
import {
|
||||
amAdmin,
|
||||
amMod,
|
||||
amTopMod,
|
||||
getUnixTime,
|
||||
hostname,
|
||||
mdToHtml,
|
||||
myAuthRequired,
|
||||
numToSI,
|
||||
} from "../../utils";
|
||||
import { getUnixTime, hostname, mdToHtml, myAuthRequired } from "../../utils";
|
||||
import { Badges } from "../common/badges";
|
||||
import { BannerIconHeader } from "../common/banner-icon-header";
|
||||
import { Icon, PurgeWarning, Spinner } from "../common/icon";
|
||||
import { CommunityForm } from "../community/community-form";
|
||||
|
|
@ -39,7 +32,6 @@ interface SidebarProps {
|
|||
allLanguages: Language[];
|
||||
siteLanguages: number[];
|
||||
communityLanguages?: number[];
|
||||
online: number;
|
||||
enableNsfw?: boolean;
|
||||
showIcon?: boolean;
|
||||
editable?: boolean;
|
||||
|
|
@ -64,7 +56,6 @@ interface SidebarState {
|
|||
removeCommunityLoading: boolean;
|
||||
leaveModTeamLoading: boolean;
|
||||
followCommunityLoading: boolean;
|
||||
blockCommunityLoading: boolean;
|
||||
purgeCommunityLoading: boolean;
|
||||
}
|
||||
|
||||
|
|
@ -78,7 +69,6 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
removeCommunityLoading: false,
|
||||
leaveModTeamLoading: false,
|
||||
followCommunityLoading: false,
|
||||
blockCommunityLoading: false,
|
||||
purgeCommunityLoading: false,
|
||||
};
|
||||
|
||||
|
|
@ -105,7 +95,6 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
removeCommunityLoading: false,
|
||||
leaveModTeamLoading: false,
|
||||
followCommunityLoading: false,
|
||||
blockCommunityLoading: false,
|
||||
purgeCommunityLoading: false,
|
||||
});
|
||||
}
|
||||
|
|
@ -113,7 +102,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className="community-sidebar">
|
||||
{!this.state.showEdit ? (
|
||||
this.sidebar()
|
||||
) : (
|
||||
|
|
@ -135,8 +124,9 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
const myUSerInfo = UserService.Instance.myUserInfo;
|
||||
const { name, actor_id } = this.props.community_view.community;
|
||||
return (
|
||||
<div>
|
||||
<div className="card border-secondary mb-3">
|
||||
<aside className="mb-3">
|
||||
<div id="sidebarContainer">
|
||||
<section id="sidebarMain" className="card border-secondary mb-3">
|
||||
<div className="card-body">
|
||||
{this.communityTitle()}
|
||||
{this.props.editable && this.adminButtons()}
|
||||
|
|
@ -157,15 +147,19 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="card border-secondary mb-3">
|
||||
</section>
|
||||
<section id="sidebarInfo" className="card border-secondary mb-3">
|
||||
<div className="card-body">
|
||||
{this.description()}
|
||||
{this.badges()}
|
||||
<Badges
|
||||
communityId={this.props.community_view.community.id}
|
||||
counts={this.props.community_view.counts}
|
||||
/>
|
||||
{this.mods()}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -178,19 +172,19 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
{this.props.showIcon && !community.removed && (
|
||||
<BannerIconHeader icon={community.icon} banner={community.banner} />
|
||||
)}
|
||||
<span className="mr-2">
|
||||
<span className="me-2">
|
||||
<CommunityLink community={community} hideAvatar />
|
||||
</span>
|
||||
{subscribed === "Subscribed" && (
|
||||
<button
|
||||
className="btn btn-secondary btn-sm mr-2"
|
||||
className="btn btn-secondary btn-sm me-2"
|
||||
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 me-1" />
|
||||
{i18n.t("joined")}
|
||||
</>
|
||||
)}
|
||||
|
|
@ -198,7 +192,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
)}
|
||||
{subscribed === "Pending" && (
|
||||
<button
|
||||
className="btn btn-warning mr-2"
|
||||
className="btn btn-warning me-2"
|
||||
onClick={linkEvent(this, this.handleUnfollowCommunity)}
|
||||
>
|
||||
{this.state.followCommunityLoading ? (
|
||||
|
|
@ -209,17 +203,17 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
</button>
|
||||
)}
|
||||
{community.removed && (
|
||||
<small className="mr-2 text-muted font-italic">
|
||||
<small className="me-2 text-muted font-italic">
|
||||
{i18n.t("removed")}
|
||||
</small>
|
||||
)}
|
||||
{community.deleted && (
|
||||
<small className="mr-2 text-muted font-italic">
|
||||
<small className="me-2 text-muted font-italic">
|
||||
{i18n.t("deleted")}
|
||||
</small>
|
||||
)}
|
||||
{community.nsfw && (
|
||||
<small className="mr-2 text-muted font-italic">
|
||||
<small className="me-2 text-muted font-italic">
|
||||
{i18n.t("nsfw")}
|
||||
</small>
|
||||
)}
|
||||
|
|
@ -235,99 +229,6 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
);
|
||||
}
|
||||
|
||||
badges() {
|
||||
const community_view = this.props.community_view;
|
||||
const counts = community_view.counts;
|
||||
return (
|
||||
<ul className="my-1 list-inline">
|
||||
<li className="list-inline-item badge badge-secondary">
|
||||
{i18n.t("number_online", {
|
||||
count: this.props.online,
|
||||
formattedCount: numToSI(this.props.online),
|
||||
})}
|
||||
</li>
|
||||
<li
|
||||
className="list-inline-item badge badge-secondary pointer"
|
||||
data-tippy-content={i18n.t("active_users_in_the_last_day", {
|
||||
count: Number(counts.users_active_day),
|
||||
formattedCount: numToSI(counts.users_active_day),
|
||||
})}
|
||||
>
|
||||
{i18n.t("number_of_users", {
|
||||
count: Number(counts.users_active_day),
|
||||
formattedCount: numToSI(counts.users_active_day),
|
||||
})}{" "}
|
||||
/ {i18n.t("day")}
|
||||
</li>
|
||||
<li
|
||||
className="list-inline-item badge badge-secondary pointer"
|
||||
data-tippy-content={i18n.t("active_users_in_the_last_week", {
|
||||
count: Number(counts.users_active_week),
|
||||
formattedCount: numToSI(counts.users_active_week),
|
||||
})}
|
||||
>
|
||||
{i18n.t("number_of_users", {
|
||||
count: Number(counts.users_active_week),
|
||||
formattedCount: numToSI(counts.users_active_week),
|
||||
})}{" "}
|
||||
/ {i18n.t("week")}
|
||||
</li>
|
||||
<li
|
||||
className="list-inline-item badge badge-secondary pointer"
|
||||
data-tippy-content={i18n.t("active_users_in_the_last_month", {
|
||||
count: Number(counts.users_active_month),
|
||||
formattedCount: numToSI(counts.users_active_month),
|
||||
})}
|
||||
>
|
||||
{i18n.t("number_of_users", {
|
||||
count: Number(counts.users_active_month),
|
||||
formattedCount: numToSI(counts.users_active_month),
|
||||
})}{" "}
|
||||
/ {i18n.t("month")}
|
||||
</li>
|
||||
<li
|
||||
className="list-inline-item badge badge-secondary pointer"
|
||||
data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
|
||||
count: Number(counts.users_active_half_year),
|
||||
formattedCount: numToSI(counts.users_active_half_year),
|
||||
})}
|
||||
>
|
||||
{i18n.t("number_of_users", {
|
||||
count: Number(counts.users_active_half_year),
|
||||
formattedCount: numToSI(counts.users_active_half_year),
|
||||
})}{" "}
|
||||
/ {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
|
||||
</li>
|
||||
<li className="list-inline-item badge badge-secondary">
|
||||
{i18n.t("number_of_subscribers", {
|
||||
count: Number(counts.subscribers),
|
||||
formattedCount: numToSI(counts.subscribers),
|
||||
})}
|
||||
</li>
|
||||
<li className="list-inline-item badge badge-secondary">
|
||||
{i18n.t("number_of_posts", {
|
||||
count: Number(counts.posts),
|
||||
formattedCount: numToSI(counts.posts),
|
||||
})}
|
||||
</li>
|
||||
<li className="list-inline-item badge badge-secondary">
|
||||
{i18n.t("number_of_comments", {
|
||||
count: Number(counts.comments),
|
||||
formattedCount: numToSI(counts.comments),
|
||||
})}
|
||||
</li>
|
||||
<li className="list-inline-item">
|
||||
<Link
|
||||
className="badge badge-primary"
|
||||
to={`/modlog/${this.props.community_view.community.id}`}
|
||||
>
|
||||
{i18n.t("modlog")}
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
mods() {
|
||||
return (
|
||||
<ul className="list-inline small">
|
||||
|
|
@ -345,7 +246,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
const cv = this.props.community_view;
|
||||
return (
|
||||
<Link
|
||||
className={`btn btn-secondary btn-block mb-2 ${
|
||||
className={`btn btn-secondary d-block mb-2 w-100 ${
|
||||
cv.community.deleted || cv.community.removed ? "no-click" : ""
|
||||
}`}
|
||||
to={`/create_post?communityId=${cv.community.id}`}
|
||||
|
|
@ -358,10 +259,10 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
subscribe() {
|
||||
const community_view = this.props.community_view;
|
||||
return (
|
||||
<div className="mb-2">
|
||||
<>
|
||||
{community_view.subscribed == "NotSubscribed" && (
|
||||
<button
|
||||
className="btn btn-secondary btn-block"
|
||||
className="btn btn-secondary d-block mb-2 w-100"
|
||||
onClick={linkEvent(this, this.handleFollowCommunity)}
|
||||
>
|
||||
{this.state.followCommunityLoading ? (
|
||||
|
|
@ -371,41 +272,24 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
blockCommunity() {
|
||||
const community_view = this.props.community_view;
|
||||
const blocked = this.props.community_view.blocked;
|
||||
const { subscribed, blocked } = this.props.community_view;
|
||||
|
||||
return (
|
||||
<div className="mb-2">
|
||||
{community_view.subscribed == "NotSubscribed" &&
|
||||
(blocked ? (
|
||||
<>
|
||||
{subscribed == "NotSubscribed" && (
|
||||
<button
|
||||
className="btn btn-danger btn-block"
|
||||
className="btn btn-danger d-block mb-2 w-100"
|
||||
onClick={linkEvent(this, this.handleBlockCommunity)}
|
||||
>
|
||||
{this.state.blockCommunityLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
i18n.t("unblock_community")
|
||||
)}
|
||||
{i18n.t(blocked ? "unblock_community" : "block_community")}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className="btn btn-danger btn-block"
|
||||
onClick={linkEvent(this, this.handleBlockCommunity)}
|
||||
>
|
||||
{this.state.blockCommunityLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
i18n.t("block_community")
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -538,25 +422,25 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
</ul>
|
||||
{this.state.showRemoveDialog && (
|
||||
<form onSubmit={linkEvent(this, this.handleRemoveCommunity)}>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<label className="col-form-label" htmlFor="remove-reason">
|
||||
{i18n.t("reason")}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="remove-reason"
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("optional")}
|
||||
value={this.state.removeReason}
|
||||
onInput={linkEvent(this, this.handleModRemoveReasonChange)}
|
||||
/>
|
||||
</div>
|
||||
{/* TODO hold off on expires for now */}
|
||||
{/* <div class="form-group row"> */}
|
||||
{/* <div class="mb-3 row"> */}
|
||||
{/* <label class="col-form-label">Expires</label> */}
|
||||
{/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
|
||||
{/* <input type="date" class="form-control me-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
|
||||
{/* </div> */}
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<button type="submit" className="btn btn-secondary">
|
||||
{this.state.removeCommunityLoading ? (
|
||||
<Spinner />
|
||||
|
|
@ -569,23 +453,23 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
)}
|
||||
{this.state.showPurgeDialog && (
|
||||
<form onSubmit={linkEvent(this, this.handlePurgeCommunity)}>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<PurgeWarning />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="sr-only" htmlFor="purge-reason">
|
||||
<div className="input-group mb-3">
|
||||
<label className="visually-hidden" htmlFor="purge-reason">
|
||||
{i18n.t("reason")}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="purge-reason"
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("reason")}
|
||||
value={this.state.purgeReason}
|
||||
onInput={linkEvent(this, this.handlePurgeReasonChange)}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
{this.state.purgeCommunityLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
|
|
@ -668,10 +552,11 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
}
|
||||
|
||||
handleBlockCommunity(i: Sidebar) {
|
||||
i.setState({ blockCommunityLoading: true });
|
||||
const { community, blocked } = i.props.community_view;
|
||||
|
||||
i.props.onBlockCommunity({
|
||||
community_id: 0,
|
||||
block: !i.props.community_view.blocked,
|
||||
community_id: community.id,
|
||||
block: !blocked,
|
||||
auth: myAuthRequired(),
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import { InitialFetchRequest } from "../../interfaces";
|
|||
import { FirstLoadService } from "../../services/FirstLoadService";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
RouteDataResponse,
|
||||
capitalizeFirstLetter,
|
||||
fetchThemeList,
|
||||
myAuthRequired,
|
||||
|
|
@ -32,6 +33,11 @@ import RateLimitForm from "./rate-limit-form";
|
|||
import { SiteForm } from "./site-form";
|
||||
import { TaglineForm } from "./tagline-form";
|
||||
|
||||
type AdminSettingsData = RouteDataResponse<{
|
||||
bannedRes: BannedPersonsResponse;
|
||||
instancesRes: GetFederatedInstancesResponse;
|
||||
}>;
|
||||
|
||||
interface AdminSettingsState {
|
||||
siteRes: GetSiteResponse;
|
||||
banned: PersonView[];
|
||||
|
|
@ -46,7 +52,7 @@ interface AdminSettingsState {
|
|||
}
|
||||
|
||||
export class AdminSettings extends Component<any, AdminSettingsState> {
|
||||
private isoData = setIsoData(this.context);
|
||||
private isoData = setIsoData<AdminSettingsData>(this.context);
|
||||
state: AdminSettingsState = {
|
||||
siteRes: this.isoData.site_res,
|
||||
banned: [],
|
||||
|
|
@ -70,7 +76,8 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
|||
|
||||
// Only fetch the data if coming from another route
|
||||
if (FirstLoadService.isFirstLoad) {
|
||||
const [bannedRes, instancesRes] = this.isoData.routeData;
|
||||
const { bannedRes, instancesRes } = this.isoData.routeData;
|
||||
|
||||
this.state = {
|
||||
...this.state,
|
||||
bannedRes,
|
||||
|
|
@ -80,47 +87,18 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
|||
}
|
||||
}
|
||||
|
||||
async fetchData() {
|
||||
this.setState({
|
||||
bannedRes: { state: "loading" },
|
||||
instancesRes: { state: "loading" },
|
||||
themeList: [],
|
||||
loading: true,
|
||||
});
|
||||
|
||||
const auth = myAuthRequired();
|
||||
|
||||
const [bannedRes, instancesRes, themeList] = await Promise.all([
|
||||
HttpService.client.getBannedPersons({ auth }),
|
||||
HttpService.client.getFederatedInstances({ auth }),
|
||||
fetchThemeList(),
|
||||
]);
|
||||
|
||||
this.setState({
|
||||
bannedRes,
|
||||
instancesRes,
|
||||
themeList,
|
||||
loading: false,
|
||||
});
|
||||
}
|
||||
|
||||
static fetchInitialData({
|
||||
static async fetchInitialData({
|
||||
auth,
|
||||
client,
|
||||
}: InitialFetchRequest): Promise<any>[] {
|
||||
const promises: Promise<RequestState<any>>[] = [];
|
||||
|
||||
if (auth) {
|
||||
promises.push(client.getBannedPersons({ auth }));
|
||||
promises.push(client.getFederatedInstances({ auth }));
|
||||
} else {
|
||||
promises.push(
|
||||
Promise.resolve({ state: "empty" }),
|
||||
Promise.resolve({ state: "empty" })
|
||||
);
|
||||
}
|
||||
|
||||
return promises;
|
||||
}: InitialFetchRequest): Promise<AdminSettingsData> {
|
||||
return {
|
||||
bannedRes: await client.getBannedPersons({
|
||||
auth: auth as string,
|
||||
}),
|
||||
instancesRes: await client.getFederatedInstances({
|
||||
auth: auth as string,
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
|
|
@ -142,7 +120,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
|||
: undefined;
|
||||
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="admin-settings container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -218,6 +196,28 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
|||
);
|
||||
}
|
||||
|
||||
async fetchData() {
|
||||
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,
|
||||
});
|
||||
}
|
||||
|
||||
admins() {
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="col-12">
|
||||
<div className="home-emojis-form col-12">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -258,7 +258,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
|
|||
</table>
|
||||
<br />
|
||||
<button
|
||||
className="btn btn-sm btn-secondary mr-2"
|
||||
className="btn btn-sm btn-secondary me-2"
|
||||
onClick={linkEvent(this, this.handleAddEmojiClick)}
|
||||
>
|
||||
{i18n.t("add_custom_emoji")}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
import { getQueryParams, getQueryString } from "@utils/helpers";
|
||||
import { canCreateCommunity } from "@utils/roles";
|
||||
import type { QueryParams } from "@utils/types";
|
||||
import { NoOptionI18nKeys } from "i18next";
|
||||
import { Component, linkEvent, MouseEventHandler } from "inferno";
|
||||
import { Component, MouseEventHandler, linkEvent } from "inferno";
|
||||
import { T } from "inferno-i18next-dess";
|
||||
import { Link } from "inferno-router";
|
||||
import {
|
||||
|
|
@ -57,7 +60,7 @@ import { UserService } from "../../services";
|
|||
import { FirstLoadService } from "../../services/FirstLoadService";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
canCreateCommunity,
|
||||
RouteDataResponse,
|
||||
commentsToFlatNodes,
|
||||
editComment,
|
||||
editPost,
|
||||
|
|
@ -68,13 +71,10 @@ import {
|
|||
getCommentParentId,
|
||||
getDataTypeString,
|
||||
getPageFromString,
|
||||
getQueryParams,
|
||||
getQueryString,
|
||||
getRandomFromList,
|
||||
mdToHtml,
|
||||
myAuth,
|
||||
postToCommentSortType,
|
||||
QueryParams,
|
||||
relTags,
|
||||
restoreScrollPosition,
|
||||
saveScrollPosition,
|
||||
|
|
@ -117,6 +117,45 @@ interface HomeProps {
|
|||
page: number;
|
||||
}
|
||||
|
||||
type HomeData = RouteDataResponse<{
|
||||
postsRes: GetPostsResponse;
|
||||
commentsRes: GetCommentsResponse;
|
||||
trendingCommunitiesRes: ListCommunitiesResponse;
|
||||
}>;
|
||||
|
||||
function getRss(listingType: ListingType) {
|
||||
const { sort } = getHomeQueryParams();
|
||||
const auth = myAuth();
|
||||
|
||||
let rss: string | undefined = undefined;
|
||||
|
||||
switch (listingType) {
|
||||
case "All": {
|
||||
rss = `/feeds/all.xml?sort=${sort}`;
|
||||
break;
|
||||
}
|
||||
case "Local": {
|
||||
rss = `/feeds/local.xml?sort=${sort}`;
|
||||
break;
|
||||
}
|
||||
case "Subscribed": {
|
||||
rss = auth ? `/feeds/front/${auth}.xml?sort=${sort}` : undefined;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
rss && (
|
||||
<>
|
||||
<a href={rss} rel={relTags} title="RSS">
|
||||
<Icon icon="rss" classes="text-muted small" />
|
||||
</a>
|
||||
<link rel="alternate" type="application/atom+xml" href={rss} />
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function getDataTypeFromQuery(type?: string): DataType {
|
||||
return type ? DataType[type] : DataType.Post;
|
||||
}
|
||||
|
|
@ -155,7 +194,7 @@ const MobileButton = ({
|
|||
onClick: MouseEventHandler<HTMLButtonElement>;
|
||||
}) => (
|
||||
<button
|
||||
className="btn btn-secondary d-inline-block mb-2 mr-3"
|
||||
className="btn btn-secondary d-inline-block mb-2 me-3"
|
||||
onClick={onClick}
|
||||
>
|
||||
{i18n.t(textKey)}{" "}
|
||||
|
|
@ -170,13 +209,13 @@ const LinkButton = ({
|
|||
path: string;
|
||||
translationKey: NoOptionI18nKeys;
|
||||
}) => (
|
||||
<Link className="btn btn-secondary btn-block" to={path}>
|
||||
<Link className="btn btn-secondary d-block" to={path}>
|
||||
{i18n.t(translationKey)}
|
||||
</Link>
|
||||
);
|
||||
|
||||
export class Home extends Component<any, HomeState> {
|
||||
private isoData = setIsoData(this.context);
|
||||
private isoData = setIsoData<HomeData>(this.context);
|
||||
state: HomeState = {
|
||||
postsRes: { state: "empty" },
|
||||
commentsRes: { state: "empty" },
|
||||
|
|
@ -228,14 +267,14 @@ export class Home extends Component<any, HomeState> {
|
|||
|
||||
// Only fetch the data if coming from another route
|
||||
if (FirstLoadService.isFirstLoad) {
|
||||
const [postsRes, commentsRes, trendingCommunitiesRes] =
|
||||
const { trendingCommunitiesRes, commentsRes, postsRes } =
|
||||
this.isoData.routeData;
|
||||
|
||||
this.state = {
|
||||
...this.state,
|
||||
postsRes,
|
||||
commentsRes,
|
||||
trendingCommunitiesRes,
|
||||
commentsRes,
|
||||
postsRes,
|
||||
tagline: getRandomFromList(this.state?.siteRes?.taglines ?? [])
|
||||
?.content,
|
||||
isIsomorphic: true,
|
||||
|
|
@ -244,7 +283,12 @@ export class Home extends Component<any, HomeState> {
|
|||
}
|
||||
|
||||
async componentDidMount() {
|
||||
if (!this.state.isIsomorphic || !this.isoData.routeData.length) {
|
||||
if (
|
||||
!this.state.isIsomorphic ||
|
||||
!Object.values(this.isoData.routeData).some(
|
||||
res => res.state === "success" || res.state === "failed"
|
||||
)
|
||||
) {
|
||||
await Promise.all([this.fetchTrendingCommunities(), this.fetchData()]);
|
||||
}
|
||||
|
||||
|
|
@ -255,13 +299,11 @@ export class Home extends Component<any, HomeState> {
|
|||
saveScrollPosition(this.context);
|
||||
}
|
||||
|
||||
static fetchInitialData({
|
||||
static async fetchInitialData({
|
||||
client,
|
||||
auth,
|
||||
query: { dataType: urlDataType, listingType, page: urlPage, sort: urlSort },
|
||||
}: InitialFetchRequest<QueryParams<HomeProps>>): Promise<
|
||||
RequestState<any>
|
||||
>[] {
|
||||
}: InitialFetchRequest<QueryParams<HomeProps>>): Promise<HomeData> {
|
||||
const dataType = getDataTypeFromQuery(urlDataType);
|
||||
|
||||
// TODO figure out auth default_listingType, default_sort_type
|
||||
|
|
@ -270,7 +312,10 @@ export class Home extends Component<any, HomeState> {
|
|||
|
||||
const page = urlPage ? Number(urlPage) : 1;
|
||||
|
||||
const promises: Promise<RequestState<any>>[] = [];
|
||||
let postsRes: RequestState<GetPostsResponse> = { state: "empty" };
|
||||
let commentsRes: RequestState<GetCommentsResponse> = {
|
||||
state: "empty",
|
||||
};
|
||||
|
||||
if (dataType === DataType.Post) {
|
||||
const getPostsForm: GetPosts = {
|
||||
|
|
@ -282,8 +327,7 @@ export class Home extends Component<any, HomeState> {
|
|||
auth,
|
||||
};
|
||||
|
||||
promises.push(client.getPosts(getPostsForm));
|
||||
promises.push(Promise.resolve({ state: "empty" }));
|
||||
postsRes = await client.getPosts(getPostsForm);
|
||||
} else {
|
||||
const getCommentsForm: GetComments = {
|
||||
page,
|
||||
|
|
@ -293,8 +337,8 @@ export class Home extends Component<any, HomeState> {
|
|||
saved_only: false,
|
||||
auth,
|
||||
};
|
||||
promises.push(Promise.resolve({ state: "empty" }));
|
||||
promises.push(client.getComments(getCommentsForm));
|
||||
|
||||
commentsRes = await client.getComments(getCommentsForm);
|
||||
}
|
||||
|
||||
const trendingCommunitiesForm: ListCommunities = {
|
||||
|
|
@ -303,9 +347,14 @@ export class Home extends Component<any, HomeState> {
|
|||
limit: trendingFetchLimit,
|
||||
auth,
|
||||
};
|
||||
promises.push(client.listCommunities(trendingCommunitiesForm));
|
||||
|
||||
return promises;
|
||||
return {
|
||||
trendingCommunitiesRes: await client.listCommunities(
|
||||
trendingCommunitiesForm
|
||||
),
|
||||
commentsRes,
|
||||
postsRes,
|
||||
};
|
||||
}
|
||||
|
||||
get documentTitle(): string {
|
||||
|
|
@ -325,7 +374,7 @@ export class Home extends Component<any, HomeState> {
|
|||
} = this.state;
|
||||
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="home container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -340,7 +389,7 @@ export class Home extends Component<any, HomeState> {
|
|||
></div>
|
||||
)}
|
||||
<div className="d-block d-md-none">{this.mobileView}</div>
|
||||
{this.posts()}
|
||||
{this.posts}
|
||||
</main>
|
||||
<aside className="d-none d-md-block col-md-4">
|
||||
{this.mySidebar}
|
||||
|
|
@ -361,7 +410,6 @@ export class Home extends Component<any, HomeState> {
|
|||
siteRes: {
|
||||
site_view: { counts, site },
|
||||
admins,
|
||||
online,
|
||||
},
|
||||
showSubscribedMobile,
|
||||
showTrendingMobile,
|
||||
|
|
@ -393,18 +441,18 @@ export class Home extends Component<any, HomeState> {
|
|||
site={site}
|
||||
admins={admins}
|
||||
counts={counts}
|
||||
online={online}
|
||||
showLocal={showLocal(this.isoData)}
|
||||
isMobile={true}
|
||||
/>
|
||||
)}
|
||||
{showTrendingMobile && (
|
||||
<div className="col-12 card border-secondary mb-3">
|
||||
<div className="card-body">{this.trendingCommunities(true)}</div>
|
||||
<div className="card border-secondary mb-3">
|
||||
{this.trendingCommunities()}
|
||||
</div>
|
||||
)}
|
||||
{showSubscribedMobile && (
|
||||
<div className="col-12 card border-secondary mb-3">
|
||||
<div className="card-body">{this.subscribedCommunities}</div>
|
||||
<div className="card border-secondary mb-3">
|
||||
{this.subscribedCommunities(true)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -417,16 +465,66 @@ export class Home extends Component<any, HomeState> {
|
|||
siteRes: {
|
||||
site_view: { counts, site },
|
||||
admins,
|
||||
online,
|
||||
},
|
||||
} = this.state;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<div className="card border-secondary mb-3">
|
||||
<div className="card-body">
|
||||
<div id="sidebarContainer">
|
||||
<section id="sidebarMain" className="card border-secondary mb-3">
|
||||
{this.trendingCommunities()}
|
||||
</section>
|
||||
<SiteSidebar
|
||||
site={site}
|
||||
admins={admins}
|
||||
counts={counts}
|
||||
showLocal={showLocal(this.isoData)}
|
||||
/>
|
||||
{this.hasFollows && (
|
||||
<div className="accordion">
|
||||
<section
|
||||
id="sidebarSubscribed"
|
||||
className="card border-secondary mb-3"
|
||||
>
|
||||
{this.subscribedCommunities(false)}
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
trendingCommunities() {
|
||||
switch (this.state.trendingCommunitiesRes?.state) {
|
||||
case "loading":
|
||||
return (
|
||||
<h5>
|
||||
<Spinner large />
|
||||
</h5>
|
||||
);
|
||||
case "success": {
|
||||
const trending = this.state.trendingCommunitiesRes.data.communities;
|
||||
return (
|
||||
<>
|
||||
<header className="card-header d-flex align-items-center">
|
||||
<h5 className="mb-0">
|
||||
<T i18nKey="trending_communities">
|
||||
#
|
||||
<Link className="text-body" to="/communities">
|
||||
#
|
||||
</Link>
|
||||
</T>
|
||||
</h5>
|
||||
</header>
|
||||
<div className="card-body">
|
||||
{trending.length > 0 && (
|
||||
<ul className="list-inline">
|
||||
{trending.map(cv => (
|
||||
<li key={cv.community.id} className="list-inline-item">
|
||||
<CommunityLink community={cv.community} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{canCreateCommunity(this.state.siteRes) && (
|
||||
<LinkButton
|
||||
path="/create_community"
|
||||
|
|
@ -438,85 +536,58 @@ export class Home extends Component<any, HomeState> {
|
|||
translationKey="explore_communities"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SiteSidebar
|
||||
site={site}
|
||||
admins={admins}
|
||||
counts={counts}
|
||||
online={online}
|
||||
showLocal={showLocal(this.isoData)}
|
||||
/>
|
||||
{this.hasFollows && (
|
||||
<div className="card border-secondary mb-3">
|
||||
<div className="card-body">{this.subscribedCommunities}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
trendingCommunities(isMobile = false) {
|
||||
switch (this.state.trendingCommunitiesRes?.state) {
|
||||
case "loading":
|
||||
return (
|
||||
<h5>
|
||||
<Spinner large />
|
||||
</h5>
|
||||
);
|
||||
case "success": {
|
||||
const trending = this.state.trendingCommunitiesRes.data.communities;
|
||||
return (
|
||||
<div className={!isMobile ? "mb-2" : ""}>
|
||||
<h5>
|
||||
<T i18nKey="trending_communities">
|
||||
#
|
||||
<Link className="text-body" to="/communities">
|
||||
#
|
||||
</Link>
|
||||
</T>
|
||||
</h5>
|
||||
<ul className="list-inline mb-0">
|
||||
{trending.map(cv => (
|
||||
<li
|
||||
key={cv.community.id}
|
||||
className="list-inline-item d-inline-block"
|
||||
>
|
||||
<CommunityLink community={cv.community} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
get subscribedCommunities() {
|
||||
subscribedCommunities(isMobile = false) {
|
||||
const { subscribedCollapsed } = this.state;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h5>
|
||||
<>
|
||||
<header
|
||||
className="card-header d-flex align-items-center"
|
||||
id="sidebarSubscribedHeader"
|
||||
>
|
||||
<h5 className="mb-0 d-inline">
|
||||
<T class="d-inline" i18nKey="subscribed_to_communities">
|
||||
#
|
||||
<Link className="text-body" to="/communities">
|
||||
#
|
||||
</Link>
|
||||
</T>
|
||||
</h5>
|
||||
{!isMobile && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm text-muted"
|
||||
onClick={linkEvent(this, this.handleCollapseSubscribe)}
|
||||
aria-label={i18n.t("collapse")}
|
||||
data-tippy-content={i18n.t("collapse")}
|
||||
aria-label={
|
||||
subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse")
|
||||
}
|
||||
data-tippy-content={
|
||||
subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse")
|
||||
}
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#sidebarSubscribedBody"
|
||||
aria-expanded="true"
|
||||
aria-controls="sidebarSubscribedBody"
|
||||
>
|
||||
<Icon
|
||||
icon={`${subscribedCollapsed ? "plus" : "minus"}-square`}
|
||||
classes="icon-inline"
|
||||
/>
|
||||
</button>
|
||||
</h5>
|
||||
{!subscribedCollapsed && (
|
||||
)}
|
||||
</header>
|
||||
<div
|
||||
id="sidebarSubscribedBody"
|
||||
className="collapse show"
|
||||
aria-labelledby="sidebarSubscribedHeader"
|
||||
>
|
||||
<div className="card-body">
|
||||
<ul className="list-inline mb-0">
|
||||
{UserService.Instance.myUserInfo?.follows.map(cfv => (
|
||||
<li
|
||||
|
|
@ -527,8 +598,9 @@ export class Home extends Component<any, HomeState> {
|
|||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -555,7 +627,7 @@ export class Home extends Component<any, HomeState> {
|
|||
await this.fetchData();
|
||||
}
|
||||
|
||||
posts() {
|
||||
get posts() {
|
||||
const { page } = getHomeQueryParams();
|
||||
|
||||
return (
|
||||
|
|
@ -574,7 +646,7 @@ export class Home extends Component<any, HomeState> {
|
|||
const siteRes = this.state.siteRes;
|
||||
|
||||
if (dataType === DataType.Post) {
|
||||
switch (this.state.postsRes?.state) {
|
||||
switch (this.state.postsRes.state) {
|
||||
case "loading":
|
||||
return (
|
||||
<h5>
|
||||
|
|
@ -662,59 +734,26 @@ export class Home extends Component<any, HomeState> {
|
|||
const { listingType, dataType, sort } = getHomeQueryParams();
|
||||
|
||||
return (
|
||||
<div className="mb-3">
|
||||
<span className="mr-3">
|
||||
<div className="row align-items-center mb-3 g-3">
|
||||
<div className="col-auto">
|
||||
<DataTypeSelect
|
||||
type_={dataType}
|
||||
onChange={this.handleDataTypeChange}
|
||||
/>
|
||||
</span>
|
||||
<span className="mr-3">
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<ListingTypeSelect
|
||||
type_={listingType}
|
||||
showLocal={showLocal(this.isoData)}
|
||||
showSubscribed
|
||||
onChange={this.handleListingTypeChange}
|
||||
/>
|
||||
</span>
|
||||
<span className="mr-2">
|
||||
<SortSelect sort={sort} onChange={this.handleSortChange} />
|
||||
</span>
|
||||
{this.getRss(listingType)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
getRss(listingType: ListingType) {
|
||||
const { sort } = getHomeQueryParams();
|
||||
const auth = myAuth();
|
||||
|
||||
let rss: string | undefined = undefined;
|
||||
|
||||
switch (listingType) {
|
||||
case "All": {
|
||||
rss = `/feeds/all.xml?sort=${sort}`;
|
||||
break;
|
||||
}
|
||||
case "Local": {
|
||||
rss = `/feeds/local.xml?sort=${sort}`;
|
||||
break;
|
||||
}
|
||||
case "Subscribed": {
|
||||
rss = auth ? `/feeds/front/${auth}.xml?sort=${sort}` : undefined;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
rss && (
|
||||
<>
|
||||
<a href={rss} rel={relTags} title="RSS">
|
||||
<Icon icon="rss" classes="text-muted small" />
|
||||
</a>
|
||||
<link rel="alternate" type="application/atom+xml" href={rss} />
|
||||
</>
|
||||
)
|
||||
<div className="col-auto">
|
||||
<SortSelect sort={sort} onChange={this.handleSortChange} />
|
||||
</div>
|
||||
<div className="col-auto ps-0">{getRss(listingType)}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,10 +8,14 @@ import { i18n } from "../../i18next";
|
|||
import { InitialFetchRequest } from "../../interfaces";
|
||||
import { FirstLoadService } from "../../services/FirstLoadService";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import { relTags, setIsoData } from "../../utils";
|
||||
import { RouteDataResponse, relTags, setIsoData } from "../../utils";
|
||||
import { HtmlTags } from "../common/html-tags";
|
||||
import { Spinner } from "../common/icon";
|
||||
|
||||
type InstancesData = RouteDataResponse<{
|
||||
federatedInstancesResponse: GetFederatedInstancesResponse;
|
||||
}>;
|
||||
|
||||
interface InstancesState {
|
||||
instancesRes: RequestState<GetFederatedInstancesResponse>;
|
||||
siteRes: GetSiteResponse;
|
||||
|
|
@ -19,7 +23,7 @@ interface InstancesState {
|
|||
}
|
||||
|
||||
export class Instances extends Component<any, InstancesState> {
|
||||
private isoData = setIsoData(this.context);
|
||||
private isoData = setIsoData<InstancesData>(this.context);
|
||||
state: InstancesState = {
|
||||
instancesRes: { state: "empty" },
|
||||
siteRes: this.isoData.site_res,
|
||||
|
|
@ -33,7 +37,7 @@ export class Instances extends Component<any, InstancesState> {
|
|||
if (FirstLoadService.isFirstLoad) {
|
||||
this.state = {
|
||||
...this.state,
|
||||
instancesRes: this.isoData.routeData[0],
|
||||
instancesRes: this.isoData.routeData.federatedInstancesResponse,
|
||||
isIsomorphic: true,
|
||||
};
|
||||
}
|
||||
|
|
@ -55,10 +59,12 @@ export class Instances extends Component<any, InstancesState> {
|
|||
});
|
||||
}
|
||||
|
||||
static fetchInitialData(
|
||||
req: InitialFetchRequest
|
||||
): Promise<RequestState<any>>[] {
|
||||
return [req.client.getFederatedInstances({})];
|
||||
static async fetchInitialData({
|
||||
client,
|
||||
}: InitialFetchRequest): Promise<InstancesData> {
|
||||
return {
|
||||
federatedInstancesResponse: await client.getFederatedInstances({}),
|
||||
};
|
||||
}
|
||||
|
||||
get documentTitle(): string {
|
||||
|
|
@ -103,7 +109,7 @@ export class Instances extends Component<any, InstancesState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="home-instances container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export class Legal extends Component<any, LegalState> {
|
|||
render() {
|
||||
const legal = this.state.siteRes.site_view.local_site.legal_information;
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="legal container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import { isBrowser } from "@utils/browser";
|
||||
import { Component, linkEvent } from "inferno";
|
||||
import { GetSiteResponse, LoginResponse } from "lemmy-js-client";
|
||||
import { i18n } from "../../i18next";
|
||||
import { UserService } from "../../services";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import { isBrowser, myAuth, setIsoData, toast, validEmail } from "../../utils";
|
||||
import { myAuth, setIsoData, toast, validEmail } from "../../utils";
|
||||
import { HtmlTags } from "../common/html-tags";
|
||||
import { Spinner } from "../common/icon";
|
||||
|
||||
|
|
@ -49,7 +50,7 @@ export class Login extends Component<any, State> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="login container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -66,7 +67,7 @@ export class Login extends Component<any, State> {
|
|||
<div>
|
||||
<form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
|
||||
<h5>{i18n.t("login")}</h5>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-sm-2 col-form-label"
|
||||
htmlFor="login-email-or-username"
|
||||
|
|
@ -86,7 +87,7 @@ export class Login extends Component<any, State> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="login-password">
|
||||
{i18n.t("password")}
|
||||
</label>
|
||||
|
|
@ -116,7 +117,7 @@ export class Login extends Component<any, State> {
|
|||
</div>
|
||||
</div>
|
||||
{this.state.showTotp && (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-sm-6 col-form-label"
|
||||
htmlFor="login-totp-token"
|
||||
|
|
@ -137,7 +138,7 @@ export class Login extends Component<any, State> {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-sm-10">
|
||||
<button type="submit" className="btn btn-secondary">
|
||||
{this.state.loginRes.state == "loading" ? (
|
||||
|
|
@ -172,7 +173,7 @@ export class Login extends Component<any, State> {
|
|||
toast(i18n.t("enter_two_factor_code"), "info");
|
||||
}
|
||||
|
||||
i.setState({ loginRes: { state: "empty" } });
|
||||
i.setState({ loginRes: { state: "failed", msg: loginRes.msg } });
|
||||
break;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -51,30 +51,30 @@ function RateLimits({
|
|||
rateLimitValue,
|
||||
}: RateLimitsProps) {
|
||||
return (
|
||||
<div className="form-group row">
|
||||
<label className="col-12 col-form-label" htmlFor="rate-limit">
|
||||
{i18n.t("rate_limit")}
|
||||
</label>
|
||||
<div className="mb-3 row">
|
||||
<div className="col-md-6">
|
||||
<label htmlFor="rate-limit">{i18n.t("rate_limit")}</label>
|
||||
<input
|
||||
type="number"
|
||||
id="rate-limit"
|
||||
className="form-control col-12"
|
||||
className="form-control"
|
||||
min={0}
|
||||
value={rateLimitValue}
|
||||
onInput={handleRateLimit}
|
||||
/>
|
||||
<label className="col-12 col-form-label" htmlFor="rate-limit-per-second">
|
||||
{i18n.t("per_second")}
|
||||
</label>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<label htmlFor="rate-limit-per-second">{i18n.t("per_second")}</label>
|
||||
<input
|
||||
type="number"
|
||||
id="rate-limit-per-second"
|
||||
className="form-control col-12"
|
||||
className="form-control"
|
||||
min={0}
|
||||
value={rateLimitPerSecondValue}
|
||||
onInput={handleRateLimitPerSecond}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -133,7 +133,10 @@ export default class RateLimitsForm extends Component<
|
|||
|
||||
render() {
|
||||
return (
|
||||
<form onSubmit={linkEvent(this, submitRateLimitForm)}>
|
||||
<form
|
||||
className="rate-limit-form"
|
||||
onSubmit={linkEvent(this, submitRateLimitForm)}
|
||||
>
|
||||
<h5>{i18n.t("rate_limit_header")}</h5>
|
||||
<Tabs
|
||||
tabs={rateLimitTypes.map(rateLimitType => ({
|
||||
|
|
@ -157,11 +160,10 @@ export default class RateLimitsForm extends Component<
|
|||
),
|
||||
}))}
|
||||
/>
|
||||
<div className="form-group row">
|
||||
<div className="col-12">
|
||||
<div className="col-12 mb-3">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-secondary mr-2"
|
||||
className="btn btn-secondary me-2"
|
||||
disabled={this.props.loading}
|
||||
>
|
||||
{this.props.loading ? (
|
||||
|
|
@ -171,7 +173,6 @@ export default class RateLimitsForm extends Component<
|
|||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ export class Setup extends Component<any, State> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="home-setup container-lg">
|
||||
<Helmet title={this.documentTitle} />
|
||||
<div className="row">
|
||||
<div className="col-12 offset-lg-3 col-lg-6">
|
||||
|
|
@ -86,7 +86,7 @@ export class Setup extends Component<any, State> {
|
|||
return (
|
||||
<form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
|
||||
<h5>{i18n.t("setup_admin")}</h5>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="username">
|
||||
{i18n.t("username")}
|
||||
</label>
|
||||
|
|
@ -103,7 +103,7 @@ export class Setup extends Component<any, State> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="email">
|
||||
{i18n.t("email")}
|
||||
</label>
|
||||
|
|
@ -120,7 +120,7 @@ export class Setup extends Component<any, State> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="password">
|
||||
{i18n.t("password")}
|
||||
</label>
|
||||
|
|
@ -138,7 +138,7 @@ export class Setup extends Component<any, State> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="verify-password">
|
||||
{i18n.t("verify_password")}
|
||||
</label>
|
||||
|
|
@ -156,7 +156,7 @@ export class Setup extends Component<any, State> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-sm-10">
|
||||
<button type="submit" className="btn btn-secondary">
|
||||
{this.state.registerRes.state == "loading" ? (
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { isBrowser } from "@utils/browser";
|
||||
import { Options, passwordStrength } from "check-password-strength";
|
||||
import { NoOptionI18nKeys } from "i18next";
|
||||
import { Component, linkEvent } from "inferno";
|
||||
|
|
@ -13,7 +14,6 @@ import { i18n } from "../../i18next";
|
|||
import { UserService } from "../../services";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
isBrowser,
|
||||
joinLemmyUrl,
|
||||
mdToHtml,
|
||||
myAuth,
|
||||
|
|
@ -127,7 +127,7 @@ export class Signup extends Component<any, State> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="home-signup container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -148,7 +148,7 @@ export class Signup extends Component<any, State> {
|
|||
<h5>{this.titleName(siteView)}</h5>
|
||||
|
||||
{this.isLemmyMl && (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="mt-2 mb-0 alert alert-warning" role="alert">
|
||||
<T i18nKey="lemmy_ml_registration_message">
|
||||
#<a href={joinLemmyUrl}>#</a>
|
||||
|
|
@ -157,7 +157,7 @@ export class Signup extends Component<any, State> {
|
|||
</div>
|
||||
)}
|
||||
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-sm-2 col-form-label"
|
||||
htmlFor="register-username"
|
||||
|
|
@ -180,7 +180,7 @@ export class Signup extends Component<any, State> {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="register-email">
|
||||
{i18n.t("email")}
|
||||
</label>
|
||||
|
|
@ -204,14 +204,14 @@ export class Signup extends Component<any, State> {
|
|||
this.state.form.email &&
|
||||
!validEmail(this.state.form.email) && (
|
||||
<div className="mt-2 mb-0 alert alert-warning" role="alert">
|
||||
<Icon icon="alert-triangle" classes="icon-inline mr-2" />
|
||||
<Icon icon="alert-triangle" classes="icon-inline me-2" />
|
||||
{i18n.t("no_password_reset")}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-sm-2 col-form-label"
|
||||
htmlFor="register-password"
|
||||
|
|
@ -238,7 +238,7 @@ export class Signup extends Component<any, State> {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-sm-2 col-form-label"
|
||||
htmlFor="register-verify-password"
|
||||
|
|
@ -261,10 +261,10 @@ export class Signup extends Component<any, State> {
|
|||
|
||||
{siteView.local_site.registration_mode == "RequireApplication" && (
|
||||
<>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="offset-sm-2 col-sm-10">
|
||||
<div className="mt-2 alert alert-warning" role="alert">
|
||||
<Icon icon="alert-triangle" classes="icon-inline mr-2" />
|
||||
<Icon icon="alert-triangle" classes="icon-inline me-2" />
|
||||
{i18n.t("fill_out_application")}
|
||||
</div>
|
||||
{siteView.local_site.application_question && (
|
||||
|
|
@ -278,7 +278,7 @@ export class Signup extends Component<any, State> {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-sm-2 col-form-label"
|
||||
htmlFor="application_answer"
|
||||
|
|
@ -298,8 +298,7 @@ export class Signup extends Component<any, State> {
|
|||
</>
|
||||
)}
|
||||
{this.renderCaptcha()}
|
||||
{siteView.local_site.enable_nsfw && (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-sm-10">
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -309,16 +308,12 @@ export class Signup extends Component<any, State> {
|
|||
checked={this.state.form.show_nsfw}
|
||||
onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label"
|
||||
htmlFor="register-show-nsfw"
|
||||
>
|
||||
<label className="form-check-label" htmlFor="register-show-nsfw">
|
||||
{i18n.t("show_nsfw")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<input
|
||||
tabIndex={-1}
|
||||
autoComplete="false"
|
||||
|
|
@ -329,7 +324,7 @@ export class Signup extends Component<any, State> {
|
|||
value={this.state.form.honeypot}
|
||||
onInput={linkEvent(this, this.handleHoneyPotChange)}
|
||||
/>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-sm-10">
|
||||
<button type="submit" className="btn btn-secondary">
|
||||
{this.state.registerRes.state == "loading" ? (
|
||||
|
|
@ -351,9 +346,9 @@ export class Signup extends Component<any, State> {
|
|||
case "success": {
|
||||
const res = this.state.captchaRes.data;
|
||||
return (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2" htmlFor="register-captcha">
|
||||
<span className="mr-2">{i18n.t("enter_code")}</span>
|
||||
<span className="me-2">{i18n.t("enter_code")}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
|
|
@ -396,7 +391,7 @@ export class Signup extends Component<any, State> {
|
|||
/>
|
||||
{captchaRes.wav && (
|
||||
<button
|
||||
className="rounded-bottom btn btn-sm btn-secondary btn-block"
|
||||
className="rounded-bottom btn btn-sm btn-secondary d-block"
|
||||
style="border-top-right-radius: 0; border-top-left-radius: 0;"
|
||||
title={i18n.t("play_captcha_audio")}
|
||||
onClick={linkEvent(this, this.handleCaptchaPlay)}
|
||||
|
|
|
|||
|
|
@ -81,7 +81,6 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
slur_filter_regex: ls.slur_filter_regex,
|
||||
actor_name_max_length: ls.actor_name_max_length,
|
||||
federation_enabled: ls.federation_enabled,
|
||||
federation_debug: ls.federation_debug,
|
||||
federation_worker_count: ls.federation_worker_count,
|
||||
captcha_enabled: ls.captcha_enabled,
|
||||
captcha_difficulty: ls.captcha_difficulty,
|
||||
|
|
@ -121,7 +120,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
render() {
|
||||
const siteSetup = this.props.siteRes.site_view.local_site.site_setup;
|
||||
return (
|
||||
<form onSubmit={linkEvent(this, this.handleSaveSiteSubmit)}>
|
||||
<form
|
||||
className="site-form"
|
||||
onSubmit={linkEvent(this, this.handleSaveSiteSubmit)}
|
||||
>
|
||||
<NavigationPrompt
|
||||
when={
|
||||
!this.props.loading &&
|
||||
|
|
@ -140,7 +142,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
? capitalizeFirstLetter(i18n.t("edit"))
|
||||
: capitalizeFirstLetter(i18n.t("setup"))
|
||||
} ${i18n.t("your_site")}`}</h5>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-12 col-form-label" htmlFor="create-site-name">
|
||||
{i18n.t("name")}
|
||||
</label>
|
||||
|
|
@ -157,8 +159,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="mr-2">{i18n.t("icon")}</label>
|
||||
<div className="input-group mb-3">
|
||||
<label className="me-2 col-form-label">{i18n.t("icon")}</label>
|
||||
<ImageUploadForm
|
||||
uploadTitle={i18n.t("upload_icon")}
|
||||
imageSrc={this.state.siteForm.icon}
|
||||
|
|
@ -167,8 +169,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
rounded
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="mr-2">{i18n.t("banner")}</label>
|
||||
<div className="input-group mb-3">
|
||||
<label className="me-2 col-form-label">{i18n.t("banner")}</label>
|
||||
<ImageUploadForm
|
||||
uploadTitle={i18n.t("upload_banner")}
|
||||
imageSrc={this.state.siteForm.banner}
|
||||
|
|
@ -176,7 +178,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
onRemove={this.handleBannerRemove}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-12 col-form-label" htmlFor="site-desc">
|
||||
{i18n.t("description")}
|
||||
</label>
|
||||
|
|
@ -191,7 +193,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-12 col-form-label">{i18n.t("sidebar")}</label>
|
||||
<div className="col-12">
|
||||
<MarkdownTextArea
|
||||
|
|
@ -203,7 +205,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-12 col-form-label">
|
||||
{i18n.t("legal_information")}
|
||||
</label>
|
||||
|
|
@ -217,7 +219,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -236,7 +238,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -255,10 +257,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<label
|
||||
className="form-check-label mr-2"
|
||||
className="form-check-label me-2"
|
||||
htmlFor="create-site-registration-mode"
|
||||
>
|
||||
{i18n.t("registration_mode")}
|
||||
|
|
@ -267,7 +269,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
id="create-site-registration-mode"
|
||||
value={this.state.siteForm.registration_mode}
|
||||
onChange={linkEvent(this, this.handleSiteRegistrationModeChange)}
|
||||
className="custom-select w-auto"
|
||||
className="form-select d-inline-block w-auto"
|
||||
>
|
||||
<option value={"RequireApplication"}>
|
||||
{i18n.t("require_registration_application")}
|
||||
|
|
@ -278,7 +280,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
{this.state.siteForm.registration_mode == "RequireApplication" && (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-12 col-form-label">
|
||||
{i18n.t("application_questionnaire")}
|
||||
</label>
|
||||
|
|
@ -293,7 +295,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -315,7 +317,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -337,7 +339,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -359,7 +361,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -378,10 +380,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<label
|
||||
className="form-check-label mr-2"
|
||||
className="form-check-label me-2"
|
||||
htmlFor="create-site-default-theme"
|
||||
>
|
||||
{i18n.t("theme")}
|
||||
|
|
@ -390,7 +392,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
id="create-site-default-theme"
|
||||
value={this.state.siteForm.default_theme}
|
||||
onChange={linkEvent(this, this.handleSiteDefaultTheme)}
|
||||
className="custom-select w-auto"
|
||||
className="form-select d-inline-block w-auto"
|
||||
>
|
||||
<option value="browser">{i18n.t("browser_default")}</option>
|
||||
{this.props.themeList?.map(theme => (
|
||||
|
|
@ -402,8 +404,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
{this.props.showLocal && (
|
||||
<form className="form-group row">
|
||||
<label className="col-sm-3">{i18n.t("listing_type")}</label>
|
||||
<form className="mb-3 row">
|
||||
<label className="col-sm-3 col-form-label">
|
||||
{i18n.t("listing_type")}
|
||||
</label>
|
||||
<div className="col-sm-9">
|
||||
<ListingTypeSelect
|
||||
type_={this.state.siteForm.default_post_listing_type ?? "Local"}
|
||||
|
|
@ -414,7 +418,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</form>
|
||||
)}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -433,7 +437,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -452,7 +456,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-12 col-form-label"
|
||||
htmlFor="create-site-slur-filter-regex"
|
||||
|
|
@ -479,7 +483,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
onChange={this.handleDiscussionLanguageChange}
|
||||
showAll
|
||||
/>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-12 col-form-label"
|
||||
htmlFor="create-site-actor-name"
|
||||
|
|
@ -497,7 +501,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -518,11 +522,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
{this.state.siteForm.federation_enabled && (
|
||||
<>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
{this.federatedInstanceSelect("allowed_instances")}
|
||||
{this.federatedInstanceSelect("blocked_instances")}
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -541,7 +545,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-12 col-form-label"
|
||||
htmlFor="create-site-federation-worker-count"
|
||||
|
|
@ -564,7 +568,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -584,10 +588,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
{this.state.siteForm.captcha_enabled && (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<label
|
||||
className="form-check-label mr-2"
|
||||
className="form-check-label me-2"
|
||||
htmlFor="create-site-captcha-difficulty"
|
||||
>
|
||||
{i18n.t("captcha_difficulty")}
|
||||
|
|
@ -596,7 +600,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
id="create-site-captcha-difficulty"
|
||||
value={this.state.siteForm.captcha_difficulty}
|
||||
onChange={linkEvent(this, this.handleSiteCaptchaDifficulty)}
|
||||
className="custom-select w-auto"
|
||||
className="form-select d-inline-block w-auto"
|
||||
>
|
||||
<option value="easy">{i18n.t("easy")}</option>
|
||||
<option value="medium">{i18n.t("medium")}</option>
|
||||
|
|
@ -605,11 +609,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-secondary mr-2"
|
||||
className="btn btn-secondary me-2"
|
||||
disabled={this.props.loading}
|
||||
>
|
||||
{this.props.loading ? (
|
||||
|
|
@ -647,7 +651,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm bg-success ml-2"
|
||||
className="btn btn-sm bg-success ms-2"
|
||||
onClick={linkEvent(key, this.handleAddInstance)}
|
||||
style={"width: 2rem; height: 2rem;"}
|
||||
tabIndex={
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { Component, linkEvent } from "inferno";
|
||||
import { Link } from "inferno-router";
|
||||
import { PersonView, Site, SiteAggregates } from "lemmy-js-client";
|
||||
import { i18n } from "../../i18next";
|
||||
import { mdToHtml, numToSI } from "../../utils";
|
||||
import { mdToHtml } from "../../utils";
|
||||
import { Badges } from "../common/badges";
|
||||
import { BannerIconHeader } from "../common/banner-icon-header";
|
||||
import { Icon } from "../common/icon";
|
||||
import { PersonListing } from "../person/person-listing";
|
||||
|
|
@ -12,7 +12,7 @@ interface SiteSidebarProps {
|
|||
showLocal: boolean;
|
||||
counts?: SiteAggregates;
|
||||
admins?: PersonView[];
|
||||
online?: number;
|
||||
isMobile?: boolean;
|
||||
}
|
||||
|
||||
interface SiteSidebarState {
|
||||
|
|
@ -30,31 +30,49 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="card border-secondary mb-3">
|
||||
<div className="card-body">
|
||||
<div>
|
||||
<div className="mb-2">{this.siteName()}</div>
|
||||
<div className="site-sidebar accordion">
|
||||
<section id="sidebarInfo" className="card border-secondary mb-3">
|
||||
<header
|
||||
className="card-header d-flex align-items-center"
|
||||
id="sidebarInfoHeader"
|
||||
>
|
||||
{this.siteName()}
|
||||
{!this.state.collapsed && (
|
||||
<>
|
||||
<BannerIconHeader banner={this.props.site.banner} />
|
||||
{this.siteInfo()}
|
||||
</>
|
||||
)}
|
||||
</header>
|
||||
|
||||
<div
|
||||
id="sidebarInfoBody"
|
||||
className="collapse show"
|
||||
aria-labelledby="sidebarInfoHeader"
|
||||
>
|
||||
<div className="card-body">{this.siteInfo()}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
siteName() {
|
||||
return (
|
||||
<h5 className="mb-0 d-inline">
|
||||
{this.props.site.name}
|
||||
<>
|
||||
<h5 className="mb-0 d-inline">{this.props.site.name}</h5>
|
||||
{!this.props.isMobile && (
|
||||
<button
|
||||
className="btn btn-sm text-muted"
|
||||
type="button"
|
||||
className="btn btn-sm"
|
||||
onClick={linkEvent(this, this.handleCollapseSidebar)}
|
||||
aria-label={i18n.t("collapse")}
|
||||
data-tippy-content={i18n.t("collapse")}
|
||||
aria-label={
|
||||
this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
|
||||
}
|
||||
data-tippy-content={
|
||||
this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
|
||||
}
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#sidebarInfoBody"
|
||||
aria-expanded="true"
|
||||
aria-controls="sidebarInfoBody"
|
||||
>
|
||||
{this.state.collapsed ? (
|
||||
<Icon icon="plus-square" classes="icon-inline" />
|
||||
|
|
@ -62,7 +80,8 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
|
|||
<Icon icon="minus-square" classes="icon-inline" />
|
||||
)}
|
||||
</button>
|
||||
</h5>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -72,7 +91,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
|
|||
<div>
|
||||
{site.description && <h6>{site.description}</h6>}
|
||||
{site.sidebar && this.siteSidebar(site.sidebar)}
|
||||
{this.props.counts && this.badges(this.props.counts)}
|
||||
{this.props.counts && <Badges counts={this.props.counts} />}
|
||||
{this.props.admins && this.admins(this.props.admins)}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -97,102 +116,6 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
|
|||
);
|
||||
}
|
||||
|
||||
badges(siteAggregates: SiteAggregates) {
|
||||
const counts = siteAggregates;
|
||||
const online = this.props.online ?? 1;
|
||||
return (
|
||||
<ul className="my-2 list-inline">
|
||||
<li className="list-inline-item badge badge-secondary">
|
||||
{i18n.t("number_online", {
|
||||
count: online,
|
||||
formattedCount: numToSI(online),
|
||||
})}
|
||||
</li>
|
||||
<li
|
||||
className="list-inline-item badge badge-secondary pointer"
|
||||
data-tippy-content={i18n.t("active_users_in_the_last_day", {
|
||||
count: Number(counts.users_active_day),
|
||||
formattedCount: numToSI(counts.users_active_day),
|
||||
})}
|
||||
>
|
||||
{i18n.t("number_of_users", {
|
||||
count: Number(counts.users_active_day),
|
||||
formattedCount: numToSI(counts.users_active_day),
|
||||
})}{" "}
|
||||
/ {i18n.t("day")}
|
||||
</li>
|
||||
<li
|
||||
className="list-inline-item badge badge-secondary pointer"
|
||||
data-tippy-content={i18n.t("active_users_in_the_last_week", {
|
||||
count: Number(counts.users_active_week),
|
||||
formattedCount: numToSI(counts.users_active_week),
|
||||
})}
|
||||
>
|
||||
{i18n.t("number_of_users", {
|
||||
count: Number(counts.users_active_week),
|
||||
formattedCount: numToSI(counts.users_active_week),
|
||||
})}{" "}
|
||||
/ {i18n.t("week")}
|
||||
</li>
|
||||
<li
|
||||
className="list-inline-item badge badge-secondary pointer"
|
||||
data-tippy-content={i18n.t("active_users_in_the_last_month", {
|
||||
count: Number(counts.users_active_month),
|
||||
formattedCount: numToSI(counts.users_active_month),
|
||||
})}
|
||||
>
|
||||
{i18n.t("number_of_users", {
|
||||
count: Number(counts.users_active_month),
|
||||
formattedCount: numToSI(counts.users_active_month),
|
||||
})}{" "}
|
||||
/ {i18n.t("month")}
|
||||
</li>
|
||||
<li
|
||||
className="list-inline-item badge badge-secondary pointer"
|
||||
data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
|
||||
count: Number(counts.users_active_half_year),
|
||||
formattedCount: numToSI(counts.users_active_half_year),
|
||||
})}
|
||||
>
|
||||
{i18n.t("number_of_users", {
|
||||
count: Number(counts.users_active_half_year),
|
||||
formattedCount: numToSI(counts.users_active_half_year),
|
||||
})}{" "}
|
||||
/ {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
|
||||
</li>
|
||||
<li className="list-inline-item badge badge-secondary">
|
||||
{i18n.t("number_of_users", {
|
||||
count: Number(counts.users),
|
||||
formattedCount: numToSI(counts.users),
|
||||
})}
|
||||
</li>
|
||||
<li className="list-inline-item badge badge-secondary">
|
||||
{i18n.t("number_of_communities", {
|
||||
count: Number(counts.communities),
|
||||
formattedCount: numToSI(counts.communities),
|
||||
})}
|
||||
</li>
|
||||
<li className="list-inline-item badge badge-secondary">
|
||||
{i18n.t("number_of_posts", {
|
||||
count: Number(counts.posts),
|
||||
formattedCount: numToSI(counts.posts),
|
||||
})}
|
||||
</li>
|
||||
<li className="list-inline-item badge badge-secondary">
|
||||
{i18n.t("number_of_comments", {
|
||||
count: Number(counts.comments),
|
||||
formattedCount: numToSI(counts.comments),
|
||||
})}
|
||||
</li>
|
||||
<li className="list-inline-item">
|
||||
<Link className="badge badge-primary" to="/modlog">
|
||||
{i18n.t("modlog")}
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
handleCollapseSidebar(i: SiteSidebar) {
|
||||
i.setState({ collapsed: !i.state.collapsed });
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="col-12">
|
||||
<div className="tagline-form col-12">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -89,10 +89,10 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
|||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<button
|
||||
className="btn btn-sm btn-secondary mr-2"
|
||||
className="btn btn-sm btn-secondary me-2"
|
||||
onClick={linkEvent(this, this.handleAddTaglineClick)}
|
||||
>
|
||||
{i18n.t("add_tagline")}
|
||||
|
|
@ -100,11 +100,11 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<button
|
||||
onClick={linkEvent(this, this.handleSaveClick)}
|
||||
className="btn btn-secondary mr-2"
|
||||
className="btn btn-secondary me-2"
|
||||
disabled={this.props.loading}
|
||||
>
|
||||
{this.props.loading ? (
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
import { debounce, getQueryParams, getQueryString } from "@utils/helpers";
|
||||
import { amAdmin, amMod } from "@utils/roles";
|
||||
import type { QueryParams } from "@utils/types";
|
||||
import { NoOptionI18nKeys } from "i18next";
|
||||
import { Component, linkEvent } from "inferno";
|
||||
import { T } from "inferno-i18next-dess";
|
||||
|
|
@ -13,6 +16,7 @@ import {
|
|||
GetModlog,
|
||||
GetModlogResponse,
|
||||
GetPersonDetails,
|
||||
GetPersonDetailsResponse,
|
||||
ModAddCommunityView,
|
||||
ModAddView,
|
||||
ModBanFromCommunityView,
|
||||
|
|
@ -33,16 +37,11 @@ import { FirstLoadService } from "../services/FirstLoadService";
|
|||
import { HttpService, RequestState } from "../services/HttpService";
|
||||
import {
|
||||
Choice,
|
||||
QueryParams,
|
||||
amAdmin,
|
||||
amMod,
|
||||
debounce,
|
||||
RouteDataResponse,
|
||||
fetchLimit,
|
||||
fetchUsers,
|
||||
getIdFromString,
|
||||
getPageFromString,
|
||||
getQueryParams,
|
||||
getQueryString,
|
||||
getUpdatedSearchId,
|
||||
myAuth,
|
||||
personToChoice,
|
||||
|
|
@ -74,6 +73,13 @@ type View =
|
|||
| AdminPurgePostView
|
||||
| AdminPurgeCommentView;
|
||||
|
||||
type ModlogData = RouteDataResponse<{
|
||||
res: GetModlogResponse;
|
||||
communityRes: GetCommunityResponse;
|
||||
modUserResponse: GetPersonDetailsResponse;
|
||||
userResponse: GetPersonDetailsResponse;
|
||||
}>;
|
||||
|
||||
interface ModlogType {
|
||||
id: number;
|
||||
type_: ModlogActionType;
|
||||
|
|
@ -575,8 +581,8 @@ const Filter = ({
|
|||
options: Choice[];
|
||||
loading: boolean;
|
||||
}) => (
|
||||
<div className="col-sm-6 form-group">
|
||||
<label className="col-form-label" htmlFor={`filter-${filterType}`}>
|
||||
<div className="col-sm-6 mb-3">
|
||||
<label className="mb-2" htmlFor={`filter-${filterType}`}>
|
||||
{i18n.t(`filter_by_${filterType}` as NoOptionI18nKeys)}
|
||||
</label>
|
||||
<SearchableSelect
|
||||
|
|
@ -631,7 +637,7 @@ export class Modlog extends Component<
|
|||
RouteComponentProps<{ communityId?: string }>,
|
||||
ModlogState
|
||||
> {
|
||||
private isoData = setIsoData(this.context);
|
||||
private isoData = setIsoData<ModlogData>(this.context);
|
||||
|
||||
state: ModlogState = {
|
||||
res: { state: "empty" },
|
||||
|
|
@ -653,25 +659,26 @@ export class Modlog extends Component<
|
|||
|
||||
// Only fetch the data if coming from another route
|
||||
if (FirstLoadService.isFirstLoad) {
|
||||
const [res, communityRes, filteredModRes, filteredUserRes] =
|
||||
const { res, communityRes, modUserResponse, userResponse } =
|
||||
this.isoData.routeData;
|
||||
|
||||
this.state = {
|
||||
...this.state,
|
||||
res,
|
||||
communityRes,
|
||||
};
|
||||
|
||||
if (filteredModRes.state === "success") {
|
||||
if (modUserResponse.state === "success") {
|
||||
this.state = {
|
||||
...this.state,
|
||||
modSearchOptions: [personToChoice(filteredModRes.data.person_view)],
|
||||
modSearchOptions: [personToChoice(modUserResponse.data.person_view)],
|
||||
};
|
||||
}
|
||||
|
||||
if (filteredUserRes.state === "success") {
|
||||
if (userResponse.state === "success") {
|
||||
this.state = {
|
||||
...this.state,
|
||||
userSearchOptions: [personToChoice(filteredUserRes.data.person_view)],
|
||||
userSearchOptions: [personToChoice(userResponse.data.person_view)],
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -732,7 +739,7 @@ export class Modlog extends Component<
|
|||
const { actionType, modId, userId } = getModlogQueryParams();
|
||||
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="modlog container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -746,7 +753,7 @@ export class Modlog extends Component<
|
|||
<Icon
|
||||
icon="alert-triangle"
|
||||
inline
|
||||
classes="mr-sm-2 mx-auto d-sm-inline d-block"
|
||||
classes="me-sm-2 mx-auto d-sm-inline d-block"
|
||||
/>
|
||||
<T i18nKey="modlog_content_warning" class="d-inline">
|
||||
#<strong>#</strong>#
|
||||
|
|
@ -763,11 +770,12 @@ export class Modlog extends Component<
|
|||
<span>{i18n.t("modlog")}</span>
|
||||
</h5>
|
||||
)}
|
||||
<div className="form-row">
|
||||
<div className="row mb-2">
|
||||
<div className="col-sm-6">
|
||||
<select
|
||||
value={actionType}
|
||||
onChange={linkEvent(this, this.handleFilterActionChange)}
|
||||
className="custom-select col-sm-6"
|
||||
className="form-select"
|
||||
aria-label="action"
|
||||
>
|
||||
<option disabled aria-hidden="true">
|
||||
|
|
@ -778,11 +786,15 @@ export class Modlog extends Component<
|
|||
<option value={"ModLockPost"}>Locking Posts</option>
|
||||
<option value={"ModFeaturePost"}>Featuring Posts</option>
|
||||
<option value={"ModRemoveComment"}>Removing Comments</option>
|
||||
<option value={"ModRemoveCommunity"}>Removing Communities</option>
|
||||
<option value={"ModRemoveCommunity"}>
|
||||
Removing Communities
|
||||
</option>
|
||||
<option value={"ModBanFromCommunity"}>
|
||||
Banning From Communities
|
||||
</option>
|
||||
<option value={"ModAddCommunity"}>Adding Mod to Community</option>
|
||||
<option value={"ModAddCommunity"}>
|
||||
Adding Mod to Community
|
||||
</option>
|
||||
<option value={"ModTransferCommunity"}>
|
||||
Transferring Communities
|
||||
</option>
|
||||
|
|
@ -790,7 +802,8 @@ export class Modlog extends Component<
|
|||
<option value={"ModBan"}>Banning From Site</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-row mb-2">
|
||||
</div>
|
||||
<div className="row mb-2">
|
||||
<Filter
|
||||
filterType="user"
|
||||
onChange={this.handleUserChange}
|
||||
|
|
@ -958,17 +971,14 @@ export class Modlog extends Component<
|
|||
}
|
||||
}
|
||||
|
||||
static fetchInitialData({
|
||||
static async fetchInitialData({
|
||||
client,
|
||||
path,
|
||||
query: { modId: urlModId, page, userId: urlUserId, actionType },
|
||||
auth,
|
||||
site,
|
||||
}: InitialFetchRequest<QueryParams<ModlogProps>>): Promise<
|
||||
RequestState<any>
|
||||
>[] {
|
||||
}: InitialFetchRequest<QueryParams<ModlogProps>>): Promise<ModlogData> {
|
||||
const pathSplit = path.split("/");
|
||||
const promises: Promise<RequestState<any>>[] = [];
|
||||
const communityId = getIdFromString(pathSplit[2]);
|
||||
const modId = !site.site_view.local_site.hide_modlog_mod_names
|
||||
? getIdFromString(urlModId)
|
||||
|
|
@ -985,40 +995,50 @@ export class Modlog extends Component<
|
|||
auth,
|
||||
};
|
||||
|
||||
promises.push(client.getModlog(modlogForm));
|
||||
let communityResponse: RequestState<GetCommunityResponse> = {
|
||||
state: "empty",
|
||||
};
|
||||
|
||||
if (communityId) {
|
||||
const communityForm: GetCommunity = {
|
||||
id: communityId,
|
||||
auth,
|
||||
};
|
||||
promises.push(client.getCommunity(communityForm));
|
||||
} else {
|
||||
promises.push(Promise.resolve({ state: "empty" }));
|
||||
|
||||
communityResponse = await client.getCommunity(communityForm);
|
||||
}
|
||||
|
||||
let modUserResponse: RequestState<GetPersonDetailsResponse> = {
|
||||
state: "empty",
|
||||
};
|
||||
|
||||
if (modId) {
|
||||
const getPersonForm: GetPersonDetails = {
|
||||
person_id: modId,
|
||||
auth,
|
||||
};
|
||||
|
||||
promises.push(client.getPersonDetails(getPersonForm));
|
||||
} else {
|
||||
promises.push(Promise.resolve({ state: "empty" }));
|
||||
modUserResponse = await client.getPersonDetails(getPersonForm);
|
||||
}
|
||||
|
||||
let userResponse: RequestState<GetPersonDetailsResponse> = {
|
||||
state: "empty",
|
||||
};
|
||||
|
||||
if (userId) {
|
||||
const getPersonForm: GetPersonDetails = {
|
||||
person_id: userId,
|
||||
auth,
|
||||
};
|
||||
|
||||
promises.push(client.getPersonDetails(getPersonForm));
|
||||
} else {
|
||||
promises.push(Promise.resolve({ state: "empty" }));
|
||||
userResponse = await client.getPersonDetails(getPersonForm);
|
||||
}
|
||||
|
||||
return promises;
|
||||
return {
|
||||
res: await client.getModlog(modlogForm),
|
||||
communityRes: communityResponse,
|
||||
modUserResponse,
|
||||
userResponse,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export class CakeDay extends Component<CakeDayProps, any> {
|
|||
render() {
|
||||
return (
|
||||
<div
|
||||
className={`mx-2 d-inline-block unselectable pointer`}
|
||||
className={`cake-day mx-2 d-inline-block unselectable pointer`}
|
||||
data-tippy-content={this.cakeDayTippy()}
|
||||
>
|
||||
<Icon icon="cake" classes="icon-inline" />
|
||||
|
|
|
|||
|
|
@ -24,10 +24,7 @@ import {
|
|||
DistinguishComment,
|
||||
EditComment,
|
||||
EditPrivateMessage,
|
||||
GetPersonMentions,
|
||||
GetPersonMentionsResponse,
|
||||
GetPrivateMessages,
|
||||
GetReplies,
|
||||
GetRepliesResponse,
|
||||
GetSiteResponse,
|
||||
MarkCommentReplyAsRead,
|
||||
|
|
@ -53,6 +50,7 @@ import { UserService } from "../../services";
|
|||
import { FirstLoadService } from "../../services/FirstLoadService";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
RouteDataResponse,
|
||||
commentsToFlatNodes,
|
||||
editCommentReply,
|
||||
editMention,
|
||||
|
|
@ -92,6 +90,13 @@ enum ReplyEnum {
|
|||
Mention,
|
||||
Message,
|
||||
}
|
||||
|
||||
type InboxData = RouteDataResponse<{
|
||||
repliesRes: GetRepliesResponse;
|
||||
mentionsRes: GetPersonMentionsResponse;
|
||||
messagesRes: PrivateMessagesResponse;
|
||||
}>;
|
||||
|
||||
type ReplyType = {
|
||||
id: number;
|
||||
type_: ReplyEnum;
|
||||
|
|
@ -114,7 +119,7 @@ interface InboxState {
|
|||
}
|
||||
|
||||
export class Inbox extends Component<any, InboxState> {
|
||||
private isoData = setIsoData(this.context);
|
||||
private isoData = setIsoData<InboxData>(this.context);
|
||||
state: InboxState = {
|
||||
unreadOrAll: UnreadOrAll.Unread,
|
||||
messageType: MessageType.All,
|
||||
|
|
@ -162,7 +167,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
|
||||
// Only fetch the data if coming from another route
|
||||
if (FirstLoadService.isFirstLoad) {
|
||||
const [repliesRes, mentionsRes, messagesRes] = this.isoData.routeData;
|
||||
const { mentionsRes, messagesRes, repliesRes } = this.isoData.routeData;
|
||||
|
||||
this.state = {
|
||||
...this.state,
|
||||
|
|
@ -211,7 +216,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
const auth = myAuth();
|
||||
const inboxRss = auth ? `/feeds/inbox/${auth}.xml` : undefined;
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="inbox container-lg">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<HtmlTags
|
||||
|
|
@ -223,7 +228,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
{inboxRss && (
|
||||
<small>
|
||||
<a href={inboxRss} title="RSS" rel={relTags}>
|
||||
<Icon icon="rss" classes="ml-2 text-muted small" />
|
||||
<Icon icon="rss" classes="ms-2 text-muted small" />
|
||||
</a>
|
||||
<link
|
||||
rel="alternate"
|
||||
|
|
@ -287,6 +292,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={UnreadOrAll.Unread}
|
||||
checked={this.state.unreadOrAll == UnreadOrAll.Unread}
|
||||
onChange={linkEvent(this, this.handleUnreadOrAllChange)}
|
||||
|
|
@ -300,6 +306,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={UnreadOrAll.All}
|
||||
checked={this.state.unreadOrAll == UnreadOrAll.All}
|
||||
onChange={linkEvent(this, this.handleUnreadOrAllChange)}
|
||||
|
|
@ -320,6 +327,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={MessageType.All}
|
||||
checked={this.state.messageType == MessageType.All}
|
||||
onChange={linkEvent(this, this.handleMessageTypeChange)}
|
||||
|
|
@ -333,6 +341,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={MessageType.Replies}
|
||||
checked={this.state.messageType == MessageType.Replies}
|
||||
onChange={linkEvent(this, this.handleMessageTypeChange)}
|
||||
|
|
@ -346,6 +355,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={MessageType.Mentions}
|
||||
checked={this.state.messageType == MessageType.Mentions}
|
||||
onChange={linkEvent(this, this.handleMessageTypeChange)}
|
||||
|
|
@ -359,6 +369,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={MessageType.Messages}
|
||||
checked={this.state.messageType == MessageType.Messages}
|
||||
onChange={linkEvent(this, this.handleMessageTypeChange)}
|
||||
|
|
@ -372,8 +383,8 @@ export class Inbox extends Component<any, InboxState> {
|
|||
selects() {
|
||||
return (
|
||||
<div className="mb-2">
|
||||
<span className="mr-3">{this.unreadOrAllRadios()}</span>
|
||||
<span className="mr-3">{this.messageTypeRadios()}</span>
|
||||
<span className="me-3">{this.unreadOrAllRadios()}</span>
|
||||
<span className="me-3">{this.messageTypeRadios()}</span>
|
||||
<CommentSortSelect
|
||||
sort={this.state.sort}
|
||||
onChange={this.handleSortChange}
|
||||
|
|
@ -686,50 +697,40 @@ export class Inbox extends Component<any, InboxState> {
|
|||
await i.refetch();
|
||||
}
|
||||
|
||||
static fetchInitialData({
|
||||
static async fetchInitialData({
|
||||
client,
|
||||
auth,
|
||||
}: InitialFetchRequest): Promise<any>[] {
|
||||
const promises: Promise<RequestState<any>>[] = [];
|
||||
|
||||
}: InitialFetchRequest): Promise<InboxData> {
|
||||
const sort: CommentSortType = "New";
|
||||
|
||||
if (auth) {
|
||||
// It can be /u/me, or /username/1
|
||||
const repliesForm: GetReplies = {
|
||||
return {
|
||||
mentionsRes: auth
|
||||
? await client.getPersonMentions({
|
||||
sort,
|
||||
unread_only: true,
|
||||
page: 1,
|
||||
limit: fetchLimit,
|
||||
auth,
|
||||
};
|
||||
promises.push(client.getReplies(repliesForm));
|
||||
|
||||
const personMentionsForm: GetPersonMentions = {
|
||||
})
|
||||
: { state: "empty" },
|
||||
messagesRes: auth
|
||||
? await client.getPrivateMessages({
|
||||
unread_only: true,
|
||||
page: 1,
|
||||
limit: fetchLimit,
|
||||
auth,
|
||||
})
|
||||
: { state: "empty" },
|
||||
repliesRes: auth
|
||||
? await client.getReplies({
|
||||
sort,
|
||||
unread_only: true,
|
||||
page: 1,
|
||||
limit: fetchLimit,
|
||||
auth,
|
||||
})
|
||||
: { state: "empty" },
|
||||
};
|
||||
promises.push(client.getPersonMentions(personMentionsForm));
|
||||
|
||||
const privateMessagesForm: GetPrivateMessages = {
|
||||
unread_only: true,
|
||||
page: 1,
|
||||
limit: fetchLimit,
|
||||
auth,
|
||||
};
|
||||
promises.push(client.getPrivateMessages(privateMessagesForm));
|
||||
} else {
|
||||
promises.push(
|
||||
Promise.resolve({ state: "empty" }),
|
||||
Promise.resolve({ state: "empty" }),
|
||||
Promise.resolve({ state: "empty" })
|
||||
);
|
||||
}
|
||||
|
||||
return promises;
|
||||
}
|
||||
|
||||
async refetch() {
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export class PasswordChange extends Component<any, State> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="password-change container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -58,7 +58,7 @@ export class PasswordChange extends Component<any, State> {
|
|||
passwordChangeForm() {
|
||||
return (
|
||||
<form onSubmit={linkEvent(this, this.handlePasswordChangeSubmit)}>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="new-password">
|
||||
{i18n.t("new_password")}
|
||||
</label>
|
||||
|
|
@ -74,7 +74,7 @@ export class PasswordChange extends Component<any, State> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="verify-password">
|
||||
{i18n.t("verify_password")}
|
||||
</label>
|
||||
|
|
@ -90,7 +90,7 @@ export class PasswordChange extends Component<any, State> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-sm-10">
|
||||
<button type="submit" className="btn btn-secondary">
|
||||
{this.state.passwordChangeRes.state == "loading" ? (
|
||||
|
|
@ -140,7 +140,7 @@ export class PasswordChange extends Component<any, State> {
|
|||
UserService.Instance.myUserInfo = site.data.my_user;
|
||||
}
|
||||
|
||||
this.props.history.replace("/");
|
||||
i.props.history.replace("/");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -107,19 +107,9 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
|
|||
setupTippy();
|
||||
}
|
||||
|
||||
// TODO wut?
|
||||
// componentDidUpdate(lastProps: UserDetailsProps) {
|
||||
// for (const key of Object.keys(lastProps)) {
|
||||
// if (lastProps[key] !== this.props[key]) {
|
||||
// this.fetchUserData();
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className="person-details">
|
||||
{this.viewSelector(this.props.view)}
|
||||
|
||||
<Paginator page={this.props.page} onChange={this.handlePageChange} />
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import classNames from "classnames";
|
||||
import { Component } from "inferno";
|
||||
import { Link } from "inferno-router";
|
||||
import { Person } from "lemmy-js-client";
|
||||
|
|
@ -48,7 +49,13 @@ export class PersonListing extends Component<PersonListingProps, any> {
|
|||
{!this.props.realLink ? (
|
||||
<Link
|
||||
title={apubName}
|
||||
className={this.props.muted ? "text-muted" : "text-info"}
|
||||
className={classNames(
|
||||
"person-listing d-inline-flex align-items-baseline",
|
||||
{
|
||||
"text-muted": this.props.muted,
|
||||
"text-info": !this.props.muted,
|
||||
}
|
||||
)}
|
||||
to={link}
|
||||
>
|
||||
{this.avatarAndName(displayName)}
|
||||
|
|
@ -56,7 +63,9 @@ export class PersonListing extends Component<PersonListingProps, any> {
|
|||
) : (
|
||||
<a
|
||||
title={apubName}
|
||||
className={this.props.muted ? "text-muted" : "text-info"}
|
||||
className={`person-listing d-inline-flex align-items-baseline ${
|
||||
this.props.muted ? "text-muted" : "text-info"
|
||||
}`}
|
||||
href={link}
|
||||
rel={relTags}
|
||||
>
|
||||
|
|
@ -73,10 +82,14 @@ export class PersonListing extends Component<PersonListingProps, any> {
|
|||
const avatar = this.props.person.avatar;
|
||||
return (
|
||||
<>
|
||||
{avatar &&
|
||||
!this.props.hideAvatar &&
|
||||
{!this.props.hideAvatar &&
|
||||
!this.props.person.banned &&
|
||||
showAvatars() && <PictrsImage src={avatar} icon />}
|
||||
showAvatars() && (
|
||||
<PictrsImage
|
||||
src={avatar ?? "/static/assets/icons/icon-96x96.png"}
|
||||
icon
|
||||
/>
|
||||
)}
|
||||
<span>{displayName}</span>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
import { getQueryParams, getQueryString } from "@utils/helpers";
|
||||
import { canMod, isAdmin, isBanned } from "@utils/roles";
|
||||
import type { QueryParams } from "@utils/types";
|
||||
import classNames from "classnames";
|
||||
import { NoOptionI18nKeys } from "i18next";
|
||||
import { Component, linkEvent } from "inferno";
|
||||
|
|
@ -53,8 +56,7 @@ import { UserService } from "../../services";
|
|||
import { FirstLoadService } from "../../services/FirstLoadService";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
QueryParams,
|
||||
canMod,
|
||||
RouteDataResponse,
|
||||
capitalizeFirstLetter,
|
||||
editComment,
|
||||
editPost,
|
||||
|
|
@ -65,10 +67,6 @@ import {
|
|||
futureDaysToUnixTime,
|
||||
getCommentParentId,
|
||||
getPageFromString,
|
||||
getQueryParams,
|
||||
getQueryString,
|
||||
isAdmin,
|
||||
isBanned,
|
||||
mdToHtml,
|
||||
myAuth,
|
||||
myAuthRequired,
|
||||
|
|
@ -90,6 +88,10 @@ import { CommunityLink } from "../community/community-link";
|
|||
import { PersonDetails } from "./person-details";
|
||||
import { PersonListing } from "./person-listing";
|
||||
|
||||
type ProfileData = RouteDataResponse<{
|
||||
personResponse: GetPersonDetailsResponse;
|
||||
}>;
|
||||
|
||||
interface ProfileState {
|
||||
personRes: RequestState<GetPersonDetailsResponse>;
|
||||
personBlocked: boolean;
|
||||
|
|
@ -156,7 +158,7 @@ export class Profile extends Component<
|
|||
RouteComponentProps<{ username: string }>,
|
||||
ProfileState
|
||||
> {
|
||||
private isoData = setIsoData(this.context);
|
||||
private isoData = setIsoData<ProfileData>(this.context);
|
||||
state: ProfileState = {
|
||||
personRes: { state: "empty" },
|
||||
personBlocked: false,
|
||||
|
|
@ -208,7 +210,7 @@ export class Profile extends Component<
|
|||
if (FirstLoadService.isFirstLoad) {
|
||||
this.state = {
|
||||
...this.state,
|
||||
personRes: this.isoData.routeData[0],
|
||||
personRes: this.isoData.routeData.personResponse,
|
||||
isIsomorphic: true,
|
||||
};
|
||||
}
|
||||
|
|
@ -267,14 +269,12 @@ export class Profile extends Component<
|
|||
}
|
||||
}
|
||||
|
||||
static fetchInitialData({
|
||||
static async fetchInitialData({
|
||||
client,
|
||||
path,
|
||||
query: { page, sort, view: urlView },
|
||||
auth,
|
||||
}: InitialFetchRequest<QueryParams<ProfileProps>>): Promise<
|
||||
RequestState<any>
|
||||
>[] {
|
||||
}: InitialFetchRequest<QueryParams<ProfileProps>>): Promise<ProfileData> {
|
||||
const pathSplit = path.split("/");
|
||||
|
||||
const username = pathSplit[2];
|
||||
|
|
@ -289,7 +289,9 @@ export class Profile extends Component<
|
|||
auth,
|
||||
};
|
||||
|
||||
return [client.getPersonDetails(form)];
|
||||
return {
|
||||
personResponse: await client.getPersonDetails(form),
|
||||
};
|
||||
}
|
||||
|
||||
get documentTitle(): string {
|
||||
|
|
@ -384,7 +386,11 @@ export class Profile extends Component<
|
|||
}
|
||||
|
||||
render() {
|
||||
return <div className="container-lg">{this.renderPersonRes()}</div>;
|
||||
return (
|
||||
<div className="person-profile container-lg">
|
||||
{this.renderPersonRes()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
get viewRadios() {
|
||||
|
|
@ -410,6 +416,7 @@ export class Profile extends Component<
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={view}
|
||||
checked={active}
|
||||
onChange={linkEvent(this, this.handleViewChange)}
|
||||
|
|
@ -427,7 +434,7 @@ export class Profile extends Component<
|
|||
|
||||
return (
|
||||
<div className="mb-2">
|
||||
<span className="mr-3">{this.viewRadios}</span>
|
||||
<span className="me-3">{this.viewRadios}</span>
|
||||
<SortSelect
|
||||
sort={sort}
|
||||
onChange={this.handleSortChange}
|
||||
|
|
@ -476,22 +483,22 @@ export class Profile extends Component<
|
|||
/>
|
||||
</li>
|
||||
{isBanned(pv.person) && (
|
||||
<li className="list-inline-item badge badge-danger">
|
||||
<li className="list-inline-item badge text-bg-danger">
|
||||
{i18n.t("banned")}
|
||||
</li>
|
||||
)}
|
||||
{pv.person.deleted && (
|
||||
<li className="list-inline-item badge badge-danger">
|
||||
<li className="list-inline-item badge text-bg-danger">
|
||||
{i18n.t("deleted")}
|
||||
</li>
|
||||
)}
|
||||
{pv.person.admin && (
|
||||
<li className="list-inline-item badge badge-light">
|
||||
<li className="list-inline-item badge text-bg-light">
|
||||
{i18n.t("admin")}
|
||||
</li>
|
||||
)}
|
||||
{pv.person.bot_account && (
|
||||
<li className="list-inline-item badge badge-light">
|
||||
<li className="list-inline-item badge text-bg-light">
|
||||
{i18n.t("bot_account").toLowerCase()}
|
||||
</li>
|
||||
)}
|
||||
|
|
@ -502,7 +509,7 @@ export class Profile extends Component<
|
|||
{!this.amCurrentUser && UserService.Instance.myUserInfo && (
|
||||
<>
|
||||
<a
|
||||
className={`d-flex align-self-start btn btn-secondary mr-2 ${
|
||||
className={`d-flex align-self-start btn btn-secondary me-2 ${
|
||||
!pv.person.matrix_user_id && "invisible"
|
||||
}`}
|
||||
rel={relTags}
|
||||
|
|
@ -512,7 +519,7 @@ export class Profile extends Component<
|
|||
</a>
|
||||
<Link
|
||||
className={
|
||||
"d-flex align-self-start btn btn-secondary mr-2"
|
||||
"d-flex align-self-start btn btn-secondary me-2"
|
||||
}
|
||||
to={`/create_private_message/${pv.person.id}`}
|
||||
>
|
||||
|
|
@ -521,7 +528,7 @@ export class Profile extends Component<
|
|||
{personBlocked ? (
|
||||
<button
|
||||
className={
|
||||
"d-flex align-self-start btn btn-secondary mr-2"
|
||||
"d-flex align-self-start btn btn-secondary me-2"
|
||||
}
|
||||
onClick={linkEvent(
|
||||
pv.person.id,
|
||||
|
|
@ -533,7 +540,7 @@ export class Profile extends Component<
|
|||
) : (
|
||||
<button
|
||||
className={
|
||||
"d-flex align-self-start btn btn-secondary mr-2"
|
||||
"d-flex align-self-start btn btn-secondary me-2"
|
||||
}
|
||||
onClick={linkEvent(
|
||||
pv.person.id,
|
||||
|
|
@ -552,7 +559,7 @@ export class Profile extends Component<
|
|||
(!isBanned(pv.person) ? (
|
||||
<button
|
||||
className={
|
||||
"d-flex align-self-start btn btn-secondary mr-2"
|
||||
"d-flex align-self-start btn btn-secondary me-2"
|
||||
}
|
||||
onClick={linkEvent(this, this.handleModBanShow)}
|
||||
aria-label={i18n.t("ban")}
|
||||
|
|
@ -562,7 +569,7 @@ export class Profile extends Component<
|
|||
) : (
|
||||
<button
|
||||
className={
|
||||
"d-flex align-self-start btn btn-secondary mr-2"
|
||||
"d-flex align-self-start btn btn-secondary me-2"
|
||||
}
|
||||
onClick={linkEvent(this, this.handleModBanSubmit)}
|
||||
aria-label={i18n.t("unban")}
|
||||
|
|
@ -581,13 +588,13 @@ export class Profile extends Component<
|
|||
)}
|
||||
<div>
|
||||
<ul className="list-inline mb-2">
|
||||
<li className="list-inline-item badge badge-light">
|
||||
<li className="list-inline-item badge text-bg-light">
|
||||
{i18n.t("number_of_posts", {
|
||||
count: Number(pv.counts.post_count),
|
||||
formattedCount: numToSI(pv.counts.post_count),
|
||||
})}
|
||||
</li>
|
||||
<li className="list-inline-item badge badge-light">
|
||||
<li className="list-inline-item badge text-bg-light">
|
||||
{i18n.t("number_of_comments", {
|
||||
count: Number(pv.counts.comment_count),
|
||||
formattedCount: numToSI(pv.counts.comment_count),
|
||||
|
|
@ -605,7 +612,7 @@ export class Profile extends Component<
|
|||
</div>
|
||||
<div className="d-flex align-items-center text-muted mb-2">
|
||||
<Icon icon="cake" />
|
||||
<span className="ml-2">
|
||||
<span className="ms-2">
|
||||
{i18n.t("cake_day_title")}{" "}
|
||||
{moment
|
||||
.utc(pv.person.published)
|
||||
|
|
@ -631,14 +638,14 @@ export class Profile extends Component<
|
|||
return (
|
||||
showBanDialog && (
|
||||
<form onSubmit={linkEvent(this, this.handleModBanSubmit)}>
|
||||
<div className="form-group row col-12">
|
||||
<div className="mb-3 row col-12">
|
||||
<label className="col-form-label" htmlFor="profile-ban-reason">
|
||||
{i18n.t("reason")}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="profile-ban-reason"
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("reason")}
|
||||
value={this.state.banReason}
|
||||
onInput={linkEvent(this, this.handleModBanReasonChange)}
|
||||
|
|
@ -649,12 +656,12 @@ export class Profile extends Component<
|
|||
<input
|
||||
type="number"
|
||||
id={`mod-ban-expires`}
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("number_of_days")}
|
||||
value={this.state.banExpireDays}
|
||||
onInput={linkEvent(this, this.handleModBanExpireDaysChange)}
|
||||
/>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -674,14 +681,14 @@ export class Profile extends Component<
|
|||
</div>
|
||||
</div>
|
||||
{/* TODO hold off on expires until later */}
|
||||
{/* <div class="form-group row"> */}
|
||||
{/* <div class="mb-3 row"> */}
|
||||
{/* <label class="col-form-label">Expires</label> */}
|
||||
{/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
|
||||
{/* <input type="date" class="form-control me-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
|
||||
{/* </div> */}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<button
|
||||
type="reset"
|
||||
className="btn btn-secondary mr-2"
|
||||
className="btn btn-secondary me-2"
|
||||
aria-label={i18n.t("cancel")}
|
||||
onClick={linkEvent(this, this.handleModBanSubmitCancel)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { Component, linkEvent } from "inferno";
|
|||
import {
|
||||
ApproveRegistrationApplication,
|
||||
GetSiteResponse,
|
||||
ListRegistrationApplications,
|
||||
ListRegistrationApplicationsResponse,
|
||||
RegistrationApplicationView,
|
||||
} from "lemmy-js-client";
|
||||
|
|
@ -12,6 +11,7 @@ import { UserService } from "../../services";
|
|||
import { FirstLoadService } from "../../services/FirstLoadService";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
RouteDataResponse,
|
||||
editRegistrationApplication,
|
||||
fetchLimit,
|
||||
myAuthRequired,
|
||||
|
|
@ -28,6 +28,10 @@ enum UnreadOrAll {
|
|||
All,
|
||||
}
|
||||
|
||||
type RegistrationApplicationsData = RouteDataResponse<{
|
||||
listRegistrationApplicationsResponse: ListRegistrationApplicationsResponse;
|
||||
}>;
|
||||
|
||||
interface RegistrationApplicationsState {
|
||||
appsRes: RequestState<ListRegistrationApplicationsResponse>;
|
||||
siteRes: GetSiteResponse;
|
||||
|
|
@ -40,7 +44,7 @@ export class RegistrationApplications extends Component<
|
|||
any,
|
||||
RegistrationApplicationsState
|
||||
> {
|
||||
private isoData = setIsoData(this.context);
|
||||
private isoData = setIsoData<RegistrationApplicationsData>(this.context);
|
||||
state: RegistrationApplicationsState = {
|
||||
appsRes: { state: "empty" },
|
||||
siteRes: this.isoData.site_res,
|
||||
|
|
@ -59,7 +63,7 @@ export class RegistrationApplications extends Component<
|
|||
if (FirstLoadService.isFirstLoad) {
|
||||
this.state = {
|
||||
...this.state,
|
||||
appsRes: this.isoData.routeData[0],
|
||||
appsRes: this.isoData.routeData.listRegistrationApplicationsResponse,
|
||||
isIsomorphic: true,
|
||||
};
|
||||
}
|
||||
|
|
@ -113,7 +117,11 @@ export class RegistrationApplications extends Component<
|
|||
}
|
||||
|
||||
render() {
|
||||
return <div className="container-lg">{this.renderApps()}</div>;
|
||||
return (
|
||||
<div className="registration-applications container-lg">
|
||||
{this.renderApps()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
unreadOrAllRadios() {
|
||||
|
|
@ -126,6 +134,7 @@ export class RegistrationApplications extends Component<
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={UnreadOrAll.Unread}
|
||||
checked={this.state.unreadOrAll == UnreadOrAll.Unread}
|
||||
onChange={linkEvent(this, this.handleUnreadOrAllChange)}
|
||||
|
|
@ -139,6 +148,7 @@ export class RegistrationApplications extends Component<
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={UnreadOrAll.All}
|
||||
checked={this.state.unreadOrAll == UnreadOrAll.All}
|
||||
onChange={linkEvent(this, this.handleUnreadOrAllChange)}
|
||||
|
|
@ -152,7 +162,7 @@ export class RegistrationApplications extends Component<
|
|||
selects() {
|
||||
return (
|
||||
<div className="mb-2">
|
||||
<span className="mr-3">{this.unreadOrAllRadios()}</span>
|
||||
<span className="me-3">{this.unreadOrAllRadios()}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -184,25 +194,20 @@ export class RegistrationApplications extends Component<
|
|||
this.refetch();
|
||||
}
|
||||
|
||||
static fetchInitialData({
|
||||
static async fetchInitialData({
|
||||
auth,
|
||||
client,
|
||||
}: InitialFetchRequest): Promise<any>[] {
|
||||
const promises: Promise<RequestState<any>>[] = [];
|
||||
|
||||
if (auth) {
|
||||
const form: ListRegistrationApplications = {
|
||||
}: InitialFetchRequest): Promise<RegistrationApplicationsData> {
|
||||
return {
|
||||
listRegistrationApplicationsResponse: auth
|
||||
? await client.listRegistrationApplications({
|
||||
unread_only: true,
|
||||
page: 1,
|
||||
limit: fetchLimit,
|
||||
auth,
|
||||
auth: auth as string,
|
||||
})
|
||||
: { state: "empty" },
|
||||
};
|
||||
promises.push(client.listRegistrationApplications(form));
|
||||
} else {
|
||||
promises.push(Promise.resolve({ state: "empty" }));
|
||||
}
|
||||
|
||||
return promises;
|
||||
}
|
||||
|
||||
async refetch() {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { amAdmin } from "@utils/roles";
|
||||
import { Component, linkEvent } from "inferno";
|
||||
import {
|
||||
CommentReportResponse,
|
||||
|
|
@ -23,7 +24,7 @@ import { HttpService, UserService } from "../../services";
|
|||
import { FirstLoadService } from "../../services/FirstLoadService";
|
||||
import { RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
amAdmin,
|
||||
RouteDataResponse,
|
||||
editCommentReport,
|
||||
editPostReport,
|
||||
editPrivateMessageReport,
|
||||
|
|
@ -56,6 +57,12 @@ enum MessageEnum {
|
|||
PrivateMessageReport,
|
||||
}
|
||||
|
||||
type ReportsData = RouteDataResponse<{
|
||||
commentReportsRes: ListCommentReportsResponse;
|
||||
postReportsRes: ListPostReportsResponse;
|
||||
messageReportsRes: ListPrivateMessageReportsResponse;
|
||||
}>;
|
||||
|
||||
type ItemType = {
|
||||
id: number;
|
||||
type_: MessageEnum;
|
||||
|
|
@ -75,7 +82,7 @@ interface ReportsState {
|
|||
}
|
||||
|
||||
export class Reports extends Component<any, ReportsState> {
|
||||
private isoData = setIsoData(this.context);
|
||||
private isoData = setIsoData<ReportsData>(this.context);
|
||||
state: ReportsState = {
|
||||
commentReportsRes: { state: "empty" },
|
||||
postReportsRes: { state: "empty" },
|
||||
|
|
@ -99,8 +106,9 @@ export class Reports extends Component<any, ReportsState> {
|
|||
|
||||
// Only fetch the data if coming from another route
|
||||
if (FirstLoadService.isFirstLoad) {
|
||||
const [commentReportsRes, postReportsRes, messageReportsRes] =
|
||||
const { commentReportsRes, postReportsRes, messageReportsRes } =
|
||||
this.isoData.routeData;
|
||||
|
||||
this.state = {
|
||||
...this.state,
|
||||
commentReportsRes,
|
||||
|
|
@ -111,7 +119,7 @@ export class Reports extends Component<any, ReportsState> {
|
|||
if (amAdmin()) {
|
||||
this.state = {
|
||||
...this.state,
|
||||
messageReportsRes,
|
||||
messageReportsRes: messageReportsRes,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -134,7 +142,7 @@ export class Reports extends Component<any, ReportsState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="person-reports container-lg">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<HtmlTags
|
||||
|
|
@ -185,6 +193,7 @@ export class Reports extends Component<any, ReportsState> {
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={UnreadOrAll.Unread}
|
||||
checked={this.state.unreadOrAll == UnreadOrAll.Unread}
|
||||
onChange={linkEvent(this, this.handleUnreadOrAllChange)}
|
||||
|
|
@ -198,6 +207,7 @@ export class Reports extends Component<any, ReportsState> {
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={UnreadOrAll.All}
|
||||
checked={this.state.unreadOrAll == UnreadOrAll.All}
|
||||
onChange={linkEvent(this, this.handleUnreadOrAllChange)}
|
||||
|
|
@ -218,6 +228,7 @@ export class Reports extends Component<any, ReportsState> {
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={MessageType.All}
|
||||
checked={this.state.messageType == MessageType.All}
|
||||
onChange={linkEvent(this, this.handleMessageTypeChange)}
|
||||
|
|
@ -231,6 +242,7 @@ export class Reports extends Component<any, ReportsState> {
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={MessageType.CommentReport}
|
||||
checked={this.state.messageType == MessageType.CommentReport}
|
||||
onChange={linkEvent(this, this.handleMessageTypeChange)}
|
||||
|
|
@ -244,6 +256,7 @@ export class Reports extends Component<any, ReportsState> {
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={MessageType.PostReport}
|
||||
checked={this.state.messageType == MessageType.PostReport}
|
||||
onChange={linkEvent(this, this.handleMessageTypeChange)}
|
||||
|
|
@ -261,6 +274,7 @@ export class Reports extends Component<any, ReportsState> {
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={MessageType.PrivateMessageReport}
|
||||
checked={
|
||||
this.state.messageType == MessageType.PrivateMessageReport
|
||||
|
|
@ -277,8 +291,8 @@ export class Reports extends Component<any, ReportsState> {
|
|||
selects() {
|
||||
return (
|
||||
<div className="mb-2">
|
||||
<span className="mr-3">{this.unreadOrAllRadios()}</span>
|
||||
<span className="mr-3">{this.messageTypeRadios()}</span>
|
||||
<span className="me-3">{this.unreadOrAllRadios()}</span>
|
||||
<span className="me-3">{this.messageTypeRadios()}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -481,55 +495,48 @@ export class Reports extends Component<any, ReportsState> {
|
|||
await i.refetch();
|
||||
}
|
||||
|
||||
static fetchInitialData({
|
||||
static async fetchInitialData({
|
||||
auth,
|
||||
client,
|
||||
}: InitialFetchRequest): Promise<any>[] {
|
||||
const promises: Promise<RequestState<any>>[] = [];
|
||||
|
||||
}: InitialFetchRequest): Promise<ReportsData> {
|
||||
const unresolved_only = true;
|
||||
const page = 1;
|
||||
const limit = fetchLimit;
|
||||
|
||||
if (auth) {
|
||||
const commentReportsForm: ListCommentReports = {
|
||||
unresolved_only,
|
||||
page,
|
||||
limit,
|
||||
auth,
|
||||
auth: auth as string,
|
||||
};
|
||||
promises.push(client.listCommentReports(commentReportsForm));
|
||||
|
||||
const postReportsForm: ListPostReports = {
|
||||
unresolved_only,
|
||||
page,
|
||||
limit,
|
||||
auth,
|
||||
auth: auth as string,
|
||||
};
|
||||
|
||||
const data: ReportsData = {
|
||||
commentReportsRes: await client.listCommentReports(commentReportsForm),
|
||||
postReportsRes: await client.listPostReports(postReportsForm),
|
||||
messageReportsRes: { state: "empty" },
|
||||
};
|
||||
promises.push(client.listPostReports(postReportsForm));
|
||||
|
||||
if (amAdmin()) {
|
||||
const privateMessageReportsForm: ListPrivateMessageReports = {
|
||||
unresolved_only,
|
||||
page,
|
||||
limit,
|
||||
auth,
|
||||
auth: auth as string,
|
||||
};
|
||||
promises.push(
|
||||
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" })
|
||||
|
||||
data.messageReportsRes = await client.listPrivateMessageReports(
|
||||
privateMessageReportsForm
|
||||
);
|
||||
}
|
||||
|
||||
return promises;
|
||||
return data;
|
||||
}
|
||||
|
||||
async refetch() {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { debounce } from "@utils/helpers";
|
||||
import { NoOptionI18nKeys } from "i18next";
|
||||
import { Component, linkEvent } from "inferno";
|
||||
import {
|
||||
|
|
@ -18,10 +19,8 @@ import {
|
|||
Choice,
|
||||
capitalizeFirstLetter,
|
||||
communityToChoice,
|
||||
debounce,
|
||||
elementUrl,
|
||||
emDash,
|
||||
enableNsfw,
|
||||
fetchCommunities,
|
||||
fetchThemeList,
|
||||
fetchUsers,
|
||||
|
|
@ -111,7 +110,7 @@ const Filter = ({
|
|||
onChange: (choice: Choice) => void;
|
||||
loading: boolean;
|
||||
}) => (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-md-4 col-form-label"
|
||||
htmlFor={`block-${filterType}-filter`}
|
||||
|
|
@ -241,7 +240,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="person-settings container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -305,7 +304,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
<>
|
||||
<h5>{i18n.t("change_password")}</h5>
|
||||
<form onSubmit={linkEvent(this, this.handleChangePasswordSubmit)}>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-5 col-form-label" htmlFor="user-password">
|
||||
{i18n.t("new_password")}
|
||||
</label>
|
||||
|
|
@ -321,7 +320,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-sm-5 col-form-label"
|
||||
htmlFor="user-verify-password"
|
||||
|
|
@ -340,7 +339,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-sm-5 col-form-label"
|
||||
htmlFor="user-old-password"
|
||||
|
|
@ -359,8 +358,11 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<button type="submit" className="btn btn-block btn-secondary mr-4">
|
||||
<div className="input-group mb-3">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn d-block btn-secondary me-4 w-100"
|
||||
>
|
||||
{this.state.changePasswordRes.state === "loading" ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
|
|
@ -468,11 +470,11 @@ export class Settings extends Component<any, SettingsState> {
|
|||
<>
|
||||
<h5>{i18n.t("settings")}</h5>
|
||||
<form onSubmit={linkEvent(this, this.handleSaveSettingsSubmit)}>
|
||||
<div className="form-group row">
|
||||
<label className="col-sm-5 col-form-label" htmlFor="display-name">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-3 col-form-label" htmlFor="display-name">
|
||||
{i18n.t("display_name")}
|
||||
</label>
|
||||
<div className="col-sm-7">
|
||||
<div className="col-sm-9">
|
||||
<input
|
||||
id="display-name"
|
||||
type="text"
|
||||
|
|
@ -485,7 +487,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-3 col-form-label" htmlFor="user-bio">
|
||||
{i18n.t("bio")}
|
||||
</label>
|
||||
|
|
@ -500,7 +502,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-3 col-form-label" htmlFor="user-email">
|
||||
{i18n.t("email")}
|
||||
</label>
|
||||
|
|
@ -516,13 +518,13 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<label className="col-sm-5 col-form-label" htmlFor="matrix-user-id">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-3 col-form-label" htmlFor="matrix-user-id">
|
||||
<a href={elementUrl} rel={relTags}>
|
||||
{i18n.t("matrix_user_id")}
|
||||
</a>
|
||||
</label>
|
||||
<div className="col-sm-7">
|
||||
<div className="col-sm-9">
|
||||
<input
|
||||
id="matrix-user-id"
|
||||
type="text"
|
||||
|
|
@ -534,8 +536,10 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<label className="col-sm-3">{i18n.t("avatar")}</label>
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-3 col-form-label">
|
||||
{i18n.t("avatar")}
|
||||
</label>
|
||||
<div className="col-sm-9">
|
||||
<ImageUploadForm
|
||||
uploadTitle={i18n.t("upload_avatar")}
|
||||
|
|
@ -546,8 +550,10 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<label className="col-sm-3">{i18n.t("banner")}</label>
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-3 col-form-label">
|
||||
{i18n.t("banner")}
|
||||
</label>
|
||||
<div className="col-sm-9">
|
||||
<ImageUploadForm
|
||||
uploadTitle={i18n.t("upload_banner")}
|
||||
|
|
@ -557,8 +563,8 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<label className="col-sm-3" htmlFor="user-language">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-3 form-label" htmlFor="user-language">
|
||||
{i18n.t("interface_language")}
|
||||
</label>
|
||||
<div className="col-sm-9">
|
||||
|
|
@ -566,7 +572,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
id="user-language"
|
||||
value={this.state.saveUserSettingsForm.interface_language}
|
||||
onChange={linkEvent(this, this.handleInterfaceLangChange)}
|
||||
className="custom-select w-auto"
|
||||
className="form-select d-inline-block w-auto"
|
||||
>
|
||||
<option disabled aria-hidden="true">
|
||||
{i18n.t("interface_language")}
|
||||
|
|
@ -594,8 +600,8 @@ export class Settings extends Component<any, SettingsState> {
|
|||
showSite
|
||||
onChange={this.handleDiscussionLanguageChange}
|
||||
/>
|
||||
<div className="form-group row">
|
||||
<label className="col-sm-3" htmlFor="user-theme">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-3 col-form-label" htmlFor="user-theme">
|
||||
{i18n.t("theme")}
|
||||
</label>
|
||||
<div className="col-sm-9">
|
||||
|
|
@ -603,7 +609,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
id="user-theme"
|
||||
value={this.state.saveUserSettingsForm.theme}
|
||||
onChange={linkEvent(this, this.handleThemeChange)}
|
||||
className="custom-select w-auto"
|
||||
className="form-select d-inline-block w-auto"
|
||||
>
|
||||
<option disabled aria-hidden="true">
|
||||
{i18n.t("theme")}
|
||||
|
|
@ -617,8 +623,8 @@ export class Settings extends Component<any, SettingsState> {
|
|||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<form className="form-group row">
|
||||
<label className="col-sm-3">{i18n.t("type")}</label>
|
||||
<form className="mb-3 row">
|
||||
<label className="col-sm-3 col-form-label">{i18n.t("type")}</label>
|
||||
<div className="col-sm-9">
|
||||
<ListingTypeSelect
|
||||
type_={
|
||||
|
|
@ -631,8 +637,10 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</div>
|
||||
</form>
|
||||
<form className="form-group row">
|
||||
<label className="col-sm-3">{i18n.t("sort_type")}</label>
|
||||
<form className="mb-3 row">
|
||||
<label className="col-sm-3 col-form-label">
|
||||
{i18n.t("sort_type")}
|
||||
</label>
|
||||
<div className="col-sm-9">
|
||||
<SortSelect
|
||||
sort={
|
||||
|
|
@ -642,8 +650,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</div>
|
||||
</form>
|
||||
{enableNsfw(this.state.siteRes) && (
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -657,8 +664,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
</label>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -672,7 +678,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -686,7 +692,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -700,7 +706,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -717,7 +723,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -734,7 +740,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -751,7 +757,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -775,8 +781,8 @@ export class Settings extends Component<any, SettingsState> {
|
|||
</div>
|
||||
</div>
|
||||
{this.totpSection()}
|
||||
<div className="form-group">
|
||||
<button type="submit" className="btn btn-block btn-secondary mr-4">
|
||||
<div className="input-group mb-3">
|
||||
<button type="submit" className="btn d-block btn-secondary me-4">
|
||||
{this.state.saveRes.state === "loading" ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
|
|
@ -785,9 +791,9 @@ export class Settings extends Component<any, SettingsState> {
|
|||
</button>
|
||||
</div>
|
||||
<hr />
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<button
|
||||
className="btn btn-block btn-danger"
|
||||
className="btn d-block btn-danger"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
this.handleDeleteAccountShowConfirmToggle
|
||||
|
|
@ -812,7 +818,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
className="form-control my-2"
|
||||
/>
|
||||
<button
|
||||
className="btn btn-danger mr-4"
|
||||
className="btn btn-danger me-4"
|
||||
disabled={!this.state.deleteAccountForm.password}
|
||||
onClick={linkEvent(this, this.handleDeleteAccount)}
|
||||
>
|
||||
|
|
@ -846,7 +852,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
return (
|
||||
<>
|
||||
{!totpUrl && (
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -869,7 +875,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
{i18n.t("two_factor_link")}
|
||||
</a>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ export class VerifyEmail extends Component<any, State> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="verfy-email container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
import { getQueryParams } from "@utils/helpers";
|
||||
import type { QueryParams } from "@utils/types";
|
||||
import { Component } from "inferno";
|
||||
import { RouteComponentProps } from "inferno-router/dist/Route";
|
||||
import {
|
||||
CreatePost as CreatePostI,
|
||||
GetCommunity,
|
||||
GetCommunityResponse,
|
||||
GetSiteResponse,
|
||||
ListCommunitiesResponse,
|
||||
} from "lemmy-js-client";
|
||||
|
|
@ -16,11 +19,10 @@ import {
|
|||
} from "../../services/HttpService";
|
||||
import {
|
||||
Choice,
|
||||
QueryParams,
|
||||
RouteDataResponse,
|
||||
enableDownvotes,
|
||||
enableNsfw,
|
||||
getIdFromString,
|
||||
getQueryParams,
|
||||
myAuth,
|
||||
setIsoData,
|
||||
} from "../../utils";
|
||||
|
|
@ -32,6 +34,11 @@ export interface CreatePostProps {
|
|||
communityId?: number;
|
||||
}
|
||||
|
||||
type CreatePostData = RouteDataResponse<{
|
||||
communityResponse: GetCommunityResponse;
|
||||
initialCommunitiesRes: ListCommunitiesResponse;
|
||||
}>;
|
||||
|
||||
function getCreatePostQueryParams() {
|
||||
return getQueryParams<CreatePostProps>({
|
||||
communityId: getIdFromString,
|
||||
|
|
@ -54,7 +61,7 @@ export class CreatePost extends Component<
|
|||
RouteComponentProps<Record<string, never>>,
|
||||
CreatePostState
|
||||
> {
|
||||
private isoData = setIsoData(this.context);
|
||||
private isoData = setIsoData<CreatePostData>(this.context);
|
||||
state: CreatePostState = {
|
||||
siteRes: this.isoData.site_res,
|
||||
loading: true,
|
||||
|
|
@ -71,7 +78,15 @@ export class CreatePost extends Component<
|
|||
|
||||
// Only fetch the data if coming from another route
|
||||
if (FirstLoadService.isFirstLoad) {
|
||||
const [communityRes, listCommunitiesRes] = this.isoData.routeData;
|
||||
const { communityResponse: communityRes, initialCommunitiesRes } =
|
||||
this.isoData.routeData;
|
||||
|
||||
this.state = {
|
||||
...this.state,
|
||||
loading: false,
|
||||
initialCommunitiesRes,
|
||||
isIsomorphic: true,
|
||||
};
|
||||
|
||||
if (communityRes?.state === "success") {
|
||||
const communityChoice: Choice = {
|
||||
|
|
@ -84,13 +99,6 @@ export class CreatePost extends Component<
|
|||
selectedCommunityChoice: communityChoice,
|
||||
};
|
||||
}
|
||||
|
||||
this.state = {
|
||||
...this.state,
|
||||
loading: false,
|
||||
initialCommunitiesRes: listCommunitiesRes,
|
||||
isIsomorphic: true,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -155,7 +163,7 @@ export class CreatePost extends Component<
|
|||
| undefined;
|
||||
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="create-post container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -166,7 +174,10 @@ export class CreatePost extends Component<
|
|||
</h5>
|
||||
) : (
|
||||
<div className="row">
|
||||
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
|
||||
<div
|
||||
id="createPostForm"
|
||||
className="col-12 col-lg-6 offset-lg-3 mb-4"
|
||||
>
|
||||
<h5>{i18n.t("create_post")}</h5>
|
||||
<PostForm
|
||||
onCreate={this.handlePostCreate}
|
||||
|
|
@ -231,14 +242,17 @@ export class CreatePost extends Component<
|
|||
}
|
||||
}
|
||||
|
||||
static fetchInitialData({
|
||||
static async fetchInitialData({
|
||||
client,
|
||||
query: { communityId },
|
||||
auth,
|
||||
}: InitialFetchRequest<QueryParams<CreatePostProps>>): Promise<
|
||||
RequestState<any>
|
||||
>[] {
|
||||
const promises: Promise<RequestState<any>>[] = [];
|
||||
}: InitialFetchRequest<
|
||||
QueryParams<CreatePostProps>
|
||||
>): Promise<CreatePostData> {
|
||||
const data: CreatePostData = {
|
||||
initialCommunitiesRes: await fetchCommunitiesForOptions(client),
|
||||
communityResponse: { state: "empty" },
|
||||
};
|
||||
|
||||
if (communityId) {
|
||||
const form: GetCommunity = {
|
||||
|
|
@ -246,13 +260,9 @@ export class CreatePost extends Component<
|
|||
id: getIdFromString(communityId),
|
||||
};
|
||||
|
||||
promises.push(client.getCommunity(form));
|
||||
} else {
|
||||
promises.push(Promise.resolve({ state: "empty" }));
|
||||
data.communityResponse = await client.getCommunity(form);
|
||||
}
|
||||
|
||||
promises.push(fetchCommunitiesForOptions(client));
|
||||
|
||||
return promises;
|
||||
return data;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export class MetadataCard extends Component<
|
|||
return (
|
||||
<>
|
||||
{!this.state.expanded && post.embed_title && post.url && (
|
||||
<div className="card border-secondary mt-3 mb-2">
|
||||
<div className="post-metadata-card card border-secondary mt-3 mb-2">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="card-body">
|
||||
|
|
@ -41,14 +41,14 @@ export class MetadataCard extends Component<
|
|||
{post.embed_title}
|
||||
</a>
|
||||
</h5>
|
||||
<span className="d-inline-block ml-2 mb-2 small text-muted">
|
||||
<span className="d-inline-block ms-2 mb-2 small text-muted">
|
||||
<a
|
||||
className="text-muted font-italic"
|
||||
href={post.url}
|
||||
rel={relTags}
|
||||
>
|
||||
{new URL(post.url).hostname}
|
||||
<Icon icon="external-link" classes="ml-1" />
|
||||
<Icon icon="external-link" classes="ms-1" />
|
||||
</a>
|
||||
</span>
|
||||
</>
|
||||
|
|
@ -75,7 +75,10 @@ export class MetadataCard extends Component<
|
|||
</div>
|
||||
)}
|
||||
{this.state.expanded && post.embed_video_url && (
|
||||
<iframe src={post.embed_video_url}></iframe>
|
||||
<iframe
|
||||
className="post-metadata-iframe"
|
||||
src={post.embed_video_url}
|
||||
></iframe>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { debounce } from "@utils/helpers";
|
||||
import autosize from "autosize";
|
||||
import { Component, InfernoNode, linkEvent } from "inferno";
|
||||
import {
|
||||
|
|
@ -18,7 +19,6 @@ import {
|
|||
archiveTodayUrl,
|
||||
capitalizeFirstLetter,
|
||||
communityToChoice,
|
||||
debounce,
|
||||
fetchCommunities,
|
||||
getIdFromString,
|
||||
ghostArchiveUrl,
|
||||
|
|
@ -193,7 +193,10 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
// !!this.state.form.name || !!this.state.form.url || !!this.state.form.body;
|
||||
// <Prompt when={promptCheck} message={i18n.t("block_leaving")} />
|
||||
return (
|
||||
<form onSubmit={linkEvent(this, this.handlePostSubmit)}>
|
||||
<form
|
||||
className="post-form"
|
||||
onSubmit={linkEvent(this, this.handlePostSubmit)}
|
||||
>
|
||||
<NavigationPrompt
|
||||
when={
|
||||
!!(
|
||||
|
|
@ -203,7 +206,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
) && !this.state.submitted
|
||||
}
|
||||
/>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="post-url">
|
||||
{i18n.t("url")}
|
||||
</label>
|
||||
|
|
@ -241,7 +244,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
<div>
|
||||
<a
|
||||
href={`${webArchiveUrl}/save/${encodeURIComponent(url)}`}
|
||||
className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
|
||||
className="me-2 d-inline-block float-right text-muted small font-weight-bold"
|
||||
rel={relTags}
|
||||
>
|
||||
archive.org {i18n.t("archive_link")}
|
||||
|
|
@ -250,7 +253,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
href={`${ghostArchiveUrl}/search?term=${encodeURIComponent(
|
||||
url
|
||||
)}`}
|
||||
className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
|
||||
className="me-2 d-inline-block float-right text-muted small font-weight-bold"
|
||||
rel={relTags}
|
||||
>
|
||||
ghostarchive.org {i18n.t("archive_link")}
|
||||
|
|
@ -259,7 +262,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
href={`${archiveTodayUrl}/?run=1&url=${encodeURIComponent(
|
||||
url
|
||||
)}`}
|
||||
className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
|
||||
className="me-2 d-inline-block float-right text-muted small font-weight-bold"
|
||||
rel={relTags}
|
||||
>
|
||||
archive.today {i18n.t("archive_link")}
|
||||
|
|
@ -277,7 +280,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
aria-label={i18n.t("delete")}
|
||||
data-tippy-content={i18n.t("delete")}
|
||||
>
|
||||
<Icon icon="x" classes="icon-inline mr-1" />
|
||||
<Icon icon="x" classes="icon-inline me-1" />
|
||||
{capitalizeFirstLetter(i18n.t("delete"))}
|
||||
</button>
|
||||
)}
|
||||
|
|
@ -316,7 +319,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="post-title">
|
||||
{i18n.t("title")}
|
||||
</label>
|
||||
|
|
@ -342,7 +345,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label">{i18n.t("body")}</label>
|
||||
<div className="col-sm-10">
|
||||
<MarkdownTextArea
|
||||
|
|
@ -355,7 +358,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
</div>
|
||||
</div>
|
||||
{!this.props.post_view && (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="post-community">
|
||||
{i18n.t("community")}
|
||||
</label>
|
||||
|
|
@ -378,7 +381,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
</div>
|
||||
)}
|
||||
{this.props.enableNsfw && (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<legend className="col-form-label col-sm-2 pt-0">
|
||||
{i18n.t("nsfw")}
|
||||
</legend>
|
||||
|
|
@ -412,12 +415,12 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
value={this.state.form.honeypot}
|
||||
onInput={linkEvent(this, this.handleHoneyPotChange)}
|
||||
/>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-sm-10">
|
||||
<button
|
||||
disabled={!this.state.form.community_id || this.state.loading}
|
||||
type="submit"
|
||||
className="btn btn-secondary mr-2"
|
||||
className="btn btn-secondary me-2"
|
||||
>
|
||||
{this.state.loading ? (
|
||||
<Spinner />
|
||||
|
|
|
|||
|
|
@ -1,3 +1,14 @@
|
|||
import { canShare, share } from "@utils/browser";
|
||||
import {
|
||||
amAdmin,
|
||||
amCommunityCreator,
|
||||
amMod,
|
||||
canAdmin,
|
||||
canMod,
|
||||
isAdmin,
|
||||
isBanned,
|
||||
isMod,
|
||||
} from "@utils/roles";
|
||||
import classNames from "classnames";
|
||||
import { Component, linkEvent } from "inferno";
|
||||
import { Link } from "inferno-router";
|
||||
|
|
@ -28,18 +39,9 @@ import { i18n } from "../../i18next";
|
|||
import { BanType, PostFormParams, PurgeType, VoteType } from "../../interfaces";
|
||||
import { UserService } from "../../services";
|
||||
import {
|
||||
amAdmin,
|
||||
amCommunityCreator,
|
||||
amMod,
|
||||
canAdmin,
|
||||
canMod,
|
||||
canShare,
|
||||
futureDaysToUnixTime,
|
||||
hostname,
|
||||
isAdmin,
|
||||
isBanned,
|
||||
isImage,
|
||||
isMod,
|
||||
isVideo,
|
||||
mdNoImages,
|
||||
mdToHtml,
|
||||
|
|
@ -49,7 +51,6 @@ import {
|
|||
numToSI,
|
||||
relTags,
|
||||
setupTippy,
|
||||
share,
|
||||
showScores,
|
||||
} from "../../utils";
|
||||
import { Icon, PurgeWarning, Spinner } from "../common/icon";
|
||||
|
|
@ -201,7 +202,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
const post = this.postView.post;
|
||||
|
||||
return (
|
||||
<div className="post-listing">
|
||||
<div className="post-listing mt-2">
|
||||
{!this.state.showEdit ? (
|
||||
<>
|
||||
{this.listing()}
|
||||
|
|
@ -230,13 +231,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
body() {
|
||||
const body = this.postView.post.body;
|
||||
return body ? (
|
||||
<div className="col-12 card my-2 p-2">
|
||||
<article id="postContent" className="col-12 card my-2 p-2">
|
||||
{this.state.viewSource ? (
|
||||
<pre>{body}</pre>
|
||||
) : (
|
||||
<div className="md-div" dangerouslySetInnerHTML={mdToHtml(body)} />
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
) : (
|
||||
<></>
|
||||
);
|
||||
|
|
@ -367,33 +368,31 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
|
||||
createdLine() {
|
||||
const post_view = this.postView;
|
||||
const url = post_view.post.url;
|
||||
const body = post_view.post.body;
|
||||
return (
|
||||
<ul className="list-inline mb-1 text-muted small">
|
||||
<ul className="list-inline mb-1 text-muted small mt-2">
|
||||
<li className="list-inline-item">
|
||||
<PersonListing person={post_view.creator} />
|
||||
|
||||
{this.creatorIsMod_ && (
|
||||
<span className="mx-1 badge">{i18n.t("mod")}</span>
|
||||
<span className="mx-1 badge text-bg-light">{i18n.t("mod")}</span>
|
||||
)}
|
||||
{this.creatorIsAdmin_ && (
|
||||
<span className="mx-1 badge">{i18n.t("admin")}</span>
|
||||
<span className="mx-1 badge text-bg-light">{i18n.t("admin")}</span>
|
||||
)}
|
||||
{post_view.creator.bot_account && (
|
||||
<span className="mx-1 badge">
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{i18n.t("bot_account").toLowerCase()}
|
||||
</span>
|
||||
)}
|
||||
{this.props.showCommunity && (
|
||||
<span>
|
||||
<span className="mx-1"> {i18n.t("to")} </span>
|
||||
<CommunityLink community={post_view.community} />
|
||||
</span>
|
||||
<>
|
||||
{" "}
|
||||
{i18n.t("to")} <CommunityLink community={post_view.community} />
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
{post_view.post.language_id !== 0 && (
|
||||
<span className="mx-1 badge">
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{
|
||||
this.props.allLanguages.find(
|
||||
lang => lang.id === post_view.post.language_id
|
||||
|
|
@ -402,21 +401,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
</span>
|
||||
)}
|
||||
<li className="list-inline-item">•</li>
|
||||
{url && !(hostname(url) === getExternalHost()) && (
|
||||
<>
|
||||
<li className="list-inline-item">
|
||||
<a
|
||||
className="text-muted font-italic"
|
||||
href={url}
|
||||
title={url}
|
||||
rel={relTags}
|
||||
>
|
||||
{hostname(url)}
|
||||
</a>
|
||||
</li>
|
||||
<li className="list-inline-item">•</li>
|
||||
</>
|
||||
)}
|
||||
<li className="list-inline-item">
|
||||
<span>
|
||||
<MomentTime
|
||||
|
|
@ -425,28 +409,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
/>
|
||||
</span>
|
||||
</li>
|
||||
{body && (
|
||||
<>
|
||||
<li className="list-inline-item">•</li>
|
||||
<li className="list-inline-item">
|
||||
<button
|
||||
className="text-muted btn btn-sm btn-link p-0"
|
||||
data-tippy-content={mdNoImages.render(body)}
|
||||
data-tippy-allowHtml={true}
|
||||
onClick={linkEvent(this, this.handleShowBody)}
|
||||
>
|
||||
<Icon icon="book-open" classes="icon-inline mr-1" />
|
||||
</button>
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
voteBar() {
|
||||
return (
|
||||
<div className={`vote-bar col-1 pr-0 small text-center`}>
|
||||
<div className={`vote-bar col-1 pe-0 small text-center`}>
|
||||
<button
|
||||
className={`btn-animate btn btn-link p-0 ${
|
||||
this.postView.my_vote == 1 ? "text-info" : "text-muted"
|
||||
|
|
@ -464,7 +433,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
</button>
|
||||
{showScores() ? (
|
||||
<div
|
||||
className={`unselectable pointer font-weight-bold text-muted px-1`}
|
||||
className={`unselectable pointer text-muted px-1 post-score`}
|
||||
data-tippy-content={this.pointsTippy}
|
||||
>
|
||||
{numToSI(this.postView.counts.score)}
|
||||
|
|
@ -497,7 +466,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
const post = this.postView.post;
|
||||
return (
|
||||
<Link
|
||||
className={`d-inline-block ${
|
||||
className={`d-inline ${
|
||||
!post.featured_community && !post.featured_local
|
||||
? "text-body"
|
||||
: "text-primary"
|
||||
|
|
@ -505,8 +474,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
to={`/post/${post.id}`}
|
||||
title={i18n.t("comments")}
|
||||
>
|
||||
<div
|
||||
className="d-inline-block"
|
||||
<span
|
||||
className="d-inline"
|
||||
dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
|
||||
/>
|
||||
</Link>
|
||||
|
|
@ -518,35 +487,29 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
const url = post.url;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="post-title overflow-hidden">
|
||||
<h5>
|
||||
{url ? (
|
||||
this.props.showBody ? (
|
||||
<h5 className="d-inline">
|
||||
{url && this.props.showBody ? (
|
||||
<a
|
||||
className={`d-inline-block ${
|
||||
className={
|
||||
!post.featured_community && !post.featured_local
|
||||
? "text-body"
|
||||
: "text-primary"
|
||||
}`}
|
||||
}
|
||||
href={url}
|
||||
title={url}
|
||||
rel={relTags}
|
||||
>
|
||||
<div
|
||||
className="d-inline-block"
|
||||
dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
|
||||
/>
|
||||
</a>
|
||||
) : (
|
||||
this.postLink
|
||||
)
|
||||
></a>
|
||||
) : (
|
||||
this.postLink
|
||||
)}
|
||||
</h5>
|
||||
{(url && isImage(url)) ||
|
||||
(post.thumbnail_url && (
|
||||
<button
|
||||
className="btn btn-link text-monospace text-muted small d-inline-block"
|
||||
className="btn btn-sm text-monospace text-muted d-inline-block"
|
||||
data-tippy-content={i18n.t("expand_here")}
|
||||
onClick={linkEvent(this, this.handleImageExpandClick)}
|
||||
>
|
||||
|
|
@ -559,13 +522,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
</button>
|
||||
))}
|
||||
{post.removed && (
|
||||
<small className="ml-2 text-muted font-italic">
|
||||
<small className="ms-2 badge text-bg-secondary">
|
||||
{i18n.t("removed")}
|
||||
</small>
|
||||
)}
|
||||
{post.deleted && (
|
||||
<small
|
||||
className="unselectable pointer ml-2 text-muted font-italic"
|
||||
className="unselectable pointer ms-2 text-muted font-italic"
|
||||
data-tippy-content={i18n.t("deleted")}
|
||||
>
|
||||
<Icon icon="trash" classes="icon-inline text-danger" />
|
||||
|
|
@ -573,7 +536,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
)}
|
||||
{post.locked && (
|
||||
<small
|
||||
className="unselectable pointer ml-2 text-muted font-italic"
|
||||
className="unselectable pointer ms-2 text-muted font-italic"
|
||||
data-tippy-content={i18n.t("locked")}
|
||||
>
|
||||
<Icon icon="lock" classes="icon-inline text-danger" />
|
||||
|
|
@ -581,27 +544,50 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
)}
|
||||
{post.featured_community && (
|
||||
<small
|
||||
className="unselectable pointer ml-2 text-muted font-italic"
|
||||
data-tippy-content={i18n.t("featured")}
|
||||
className="unselectable pointer ms-2 text-muted font-italic"
|
||||
data-tippy-content={i18n.t("featured_in_community")}
|
||||
aria-label={i18n.t("featured_in_community")}
|
||||
>
|
||||
<Icon icon="pin" classes="icon-inline text-primary" />
|
||||
</small>
|
||||
)}
|
||||
{post.featured_local && (
|
||||
<small
|
||||
className="unselectable pointer ml-2 text-muted font-italic"
|
||||
data-tippy-content={i18n.t("featured")}
|
||||
className="unselectable pointer ms-2 text-muted font-italic"
|
||||
data-tippy-content={i18n.t("featured_in_local")}
|
||||
aria-label={i18n.t("featured_in_local")}
|
||||
>
|
||||
<Icon icon="pin" classes="icon-inline text-secondary" />
|
||||
</small>
|
||||
)}
|
||||
{post.nsfw && (
|
||||
<small className="ml-2 text-muted font-italic">
|
||||
<small className="ms-2 badge text-bg-danger">
|
||||
{i18n.t("nsfw")}
|
||||
</small>
|
||||
)}
|
||||
</h5>
|
||||
</div>
|
||||
{url && this.urlLine()}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
urlLine() {
|
||||
const post = this.postView.post;
|
||||
const url = post.url;
|
||||
|
||||
return (
|
||||
<p className="d-flex text-muted align-items-center gap-1 small m-0">
|
||||
{url && !(hostname(url) === getExternalHost()) && (
|
||||
<a
|
||||
className="text-muted font-italic"
|
||||
href={url}
|
||||
title={url}
|
||||
rel={relTags}
|
||||
>
|
||||
{hostname(url)}
|
||||
</a>
|
||||
)}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -610,9 +596,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
return dupes && dupes.length > 0 ? (
|
||||
<ul className="list-inline mb-1 small text-muted">
|
||||
<>
|
||||
<li className="list-inline-item mr-2">{i18n.t("cross_posted_to")}</li>
|
||||
<li className="list-inline-item me-2">{i18n.t("cross_posted_to")}</li>
|
||||
{dupes.map(pv => (
|
||||
<li key={pv.post.id} className="list-inline-item mr-2">
|
||||
<li key={pv.post.id} className="list-inline-item me-2">
|
||||
<Link to={`/post/${pv.post.id}`}>
|
||||
{pv.community.local
|
||||
? pv.community.name
|
||||
|
|
@ -631,11 +617,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
const post = this.postView.post;
|
||||
|
||||
return (
|
||||
<div className="d-flex justify-content-start flex-wrap text-muted font-weight-bold mb-1">
|
||||
<div className="d-flex align-items-center justify-content-start flex-wrap text-muted">
|
||||
{this.commentsButton}
|
||||
{canShare() && (
|
||||
<button
|
||||
className="btn btn-link"
|
||||
className="btn btn-sm btn-animate text-muted py-0"
|
||||
onClick={linkEvent(this, this.handleShare)}
|
||||
type="button"
|
||||
>
|
||||
|
|
@ -644,7 +630,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
)}
|
||||
{!post.local && (
|
||||
<a
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
className="btn btn-sm btn-animate text-muted py-0"
|
||||
title={i18n.t("link")}
|
||||
href={post.ap_id}
|
||||
>
|
||||
|
|
@ -654,50 +640,94 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
{mobile && !this.props.viewOnly && this.mobileVotes}
|
||||
{UserService.Instance.myUserInfo &&
|
||||
!this.props.viewOnly &&
|
||||
this.postActions(mobile)}
|
||||
this.postActions()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
postActions(mobile = false) {
|
||||
showPreviewButton() {
|
||||
const post_view = this.postView;
|
||||
const body = post_view.post.body;
|
||||
|
||||
return (
|
||||
<button
|
||||
className="btn btn-sm btn-animate text-muted py-0"
|
||||
data-tippy-content={body && mdNoImages.render(body)}
|
||||
data-tippy-allowHtml={true}
|
||||
onClick={linkEvent(this, this.handleShowBody)}
|
||||
>
|
||||
<Icon
|
||||
icon="book-open"
|
||||
classes={classNames("icon-inline me-1", {
|
||||
"text-success": this.state.showBody,
|
||||
})}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
postActions() {
|
||||
// Possible enhancement: Priority+ pattern instead of just hard coding which get hidden behind the show more button.
|
||||
// Possible enhancement: Make each button a component.
|
||||
const post_view = this.postView;
|
||||
const post = post_view.post;
|
||||
|
||||
return (
|
||||
<>
|
||||
{this.saveButton}
|
||||
{this.crossPostButton}
|
||||
{mobile && this.showMoreButton}
|
||||
{(!mobile || this.state.showAdvanced) && (
|
||||
<>
|
||||
{!this.myPost && (
|
||||
<>
|
||||
{this.reportButton}
|
||||
{this.blockButton}
|
||||
</>
|
||||
)}
|
||||
{this.myPost && (this.showBody || this.state.showAdvanced) && (
|
||||
<>
|
||||
{this.editButton}
|
||||
{this.deleteButton}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{this.state.showAdvanced && (
|
||||
<>
|
||||
|
||||
{/**
|
||||
* If there is a URL, or if the post has a body and we were told not to
|
||||
* show the body, show the MetadataCard/body toggle.
|
||||
*/}
|
||||
{(post.url || (post.body && !this.props.showBody)) &&
|
||||
this.showPreviewButton()}
|
||||
|
||||
{this.showBody && post_view.post.body && this.viewSourceButton}
|
||||
|
||||
<div className="dropdown">
|
||||
<button
|
||||
className="btn btn-sm btn-animate text-muted py-0 dropdown-toggle"
|
||||
onClick={linkEvent(this, this.handleShowAdvanced)}
|
||||
data-tippy-content={i18n.t("more")}
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
aria-controls="advancedButtonsDropdown"
|
||||
aria-label={i18n.t("more")}
|
||||
>
|
||||
<Icon icon="more-vertical" inline />
|
||||
</button>
|
||||
|
||||
<ul className="dropdown-menu" id="advancedButtonsDropdown">
|
||||
{!this.myPost ? (
|
||||
<>
|
||||
<li>{this.reportButton}</li>
|
||||
<li>{this.blockButton}</li>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<li>{this.editButton}</li>
|
||||
<li>{this.deleteButton}</li>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Any mod can do these, not limited to hierarchy*/}
|
||||
{(amMod(this.props.moderators) || amAdmin()) && (
|
||||
<>
|
||||
{this.lockButton}
|
||||
{this.featureButton}
|
||||
<li>
|
||||
<hr className="dropdown-divider" />
|
||||
</li>
|
||||
<li>{this.lockButton}</li>
|
||||
{this.featureButtons}
|
||||
</>
|
||||
)}
|
||||
{(this.canMod_ || this.canAdmin_) && <>{this.modRemoveButton}</>}
|
||||
</>
|
||||
|
||||
{(this.canMod_ || this.canAdmin_) && (
|
||||
<li>{this.modRemoveButton}</li>
|
||||
)}
|
||||
{!mobile && this.showMoreButton}
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -706,15 +736,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
const post_view = this.postView;
|
||||
return (
|
||||
<Link
|
||||
className="btn btn-link text-muted py-0 pl-0 text-muted"
|
||||
className="btn btn-link text-muted ps-0 text-muted"
|
||||
title={i18n.t("number_of_comments", {
|
||||
count: Number(post_view.counts.comments),
|
||||
formattedCount: Number(post_view.counts.comments),
|
||||
})}
|
||||
to={`/post/${post_view.post.id}?scrollToComments=true`}
|
||||
>
|
||||
<Icon icon="message-square" classes="mr-1" inline />
|
||||
<span className="mr-2">
|
||||
<Icon icon="message-square" classes="me-1" inline />
|
||||
<span className="me-2">
|
||||
{i18n.t("number_of_comments", {
|
||||
count: Number(post_view.counts.comments),
|
||||
formattedCount: numToSI(post_view.counts.comments),
|
||||
|
|
@ -759,7 +789,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
<>
|
||||
<Icon icon="arrow-up1" classes="icon-inline small" />
|
||||
{showScores() && (
|
||||
<span className="ml-2">
|
||||
<span className="ms-2">
|
||||
{numToSI(this.postView.counts.upvotes)}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -768,7 +798,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
</button>
|
||||
{this.props.enableDownvotes && (
|
||||
<button
|
||||
className={`ml-2 btn-animate btn py-0 px-1 ${
|
||||
className={`ms-2 btn-animate btn py-0 px-1 ${
|
||||
this.postView.my_vote === -1 ? "text-danger" : "text-muted"
|
||||
}`}
|
||||
onClick={linkEvent(this, this.handleDownvote)}
|
||||
|
|
@ -783,7 +813,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
<Icon icon="arrow-down1" classes="icon-inline small" />
|
||||
{showScores() && (
|
||||
<span
|
||||
className={classNames("ml-2", {
|
||||
className={classNames("ms-2", {
|
||||
invisible: this.postView.counts.downvotes === 0,
|
||||
})}
|
||||
>
|
||||
|
|
@ -804,7 +834,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
const label = saved ? i18n.t("unsave") : i18n.t("save");
|
||||
return (
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
className="btn btn-sm btn-animate text-muted py-0"
|
||||
onClick={linkEvent(this, this.handleSavePostClick)}
|
||||
data-tippy-content={label}
|
||||
aria-label={label}
|
||||
|
|
@ -825,7 +855,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
get crossPostButton() {
|
||||
return (
|
||||
<Link
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
className="btn btn-sm btn-animate text-muted py-0"
|
||||
to={{
|
||||
/* Empty string properties are required to satisfy type*/
|
||||
pathname: "/create_post",
|
||||
|
|
@ -846,12 +876,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
get reportButton() {
|
||||
return (
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
|
||||
onClick={linkEvent(this, this.handleShowReportDialog)}
|
||||
data-tippy-content={i18n.t("show_report_dialog")}
|
||||
aria-label={i18n.t("show_report_dialog")}
|
||||
>
|
||||
<Icon icon="flag" inline />
|
||||
<Icon classes="me-1" icon="flag" inline />
|
||||
{i18n.t("create_report")}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
@ -859,12 +889,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
get blockButton() {
|
||||
return (
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
|
||||
onClick={linkEvent(this, this.handleBlockPersonClick)}
|
||||
data-tippy-content={i18n.t("block_user")}
|
||||
aria-label={i18n.t("block_user")}
|
||||
>
|
||||
{this.state.blockLoading ? <Spinner /> : <Icon icon="slash" inline />}
|
||||
{this.state.blockLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<Icon classes="me-1" icon="slash" inline />
|
||||
)}
|
||||
{i18n.t("block_user")}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
@ -872,12 +906,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
get editButton() {
|
||||
return (
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
|
||||
onClick={linkEvent(this, this.handleEditClick)}
|
||||
data-tippy-content={i18n.t("edit")}
|
||||
aria-label={i18n.t("edit")}
|
||||
>
|
||||
<Icon icon="edit" inline />
|
||||
<Icon classes="me-1" icon="edit" inline />
|
||||
{i18n.t("edit")}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
@ -887,41 +921,30 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
const label = !deleted ? i18n.t("delete") : i18n.t("restore");
|
||||
return (
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
|
||||
onClick={linkEvent(this, this.handleDeleteClick)}
|
||||
data-tippy-content={label}
|
||||
aria-label={label}
|
||||
>
|
||||
{this.state.deleteLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<>
|
||||
<Icon
|
||||
icon="trash"
|
||||
classes={classNames({ "text-danger": deleted })}
|
||||
classes={classNames("me-1", { "text-danger": deleted })}
|
||||
inline
|
||||
/>
|
||||
{label}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
get showMoreButton() {
|
||||
return (
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
onClick={linkEvent(this, this.handleShowAdvanced)}
|
||||
data-tippy-content={i18n.t("more")}
|
||||
aria-label={i18n.t("more")}
|
||||
>
|
||||
<Icon icon="more-vertical" inline />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
get viewSourceButton() {
|
||||
return (
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
className="btn btn-sm btn-animate text-muted py-0"
|
||||
onClick={linkEvent(this, this.handleViewSource)}
|
||||
data-tippy-content={i18n.t("view_source")}
|
||||
aria-label={i18n.t("view_source")}
|
||||
|
|
@ -940,25 +963,27 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
const label = locked ? i18n.t("unlock") : i18n.t("lock");
|
||||
return (
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
|
||||
onClick={linkEvent(this, this.handleModLock)}
|
||||
data-tippy-content={label}
|
||||
aria-label={label}
|
||||
>
|
||||
{this.state.lockLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<>
|
||||
<Icon
|
||||
icon="lock"
|
||||
classes={classNames({ "text-danger": locked })}
|
||||
classes={classNames("me-1", { "text-danger": locked })}
|
||||
inline
|
||||
/>
|
||||
{label}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
get featureButton() {
|
||||
get featureButtons() {
|
||||
const featuredCommunity = this.postView.post.featured_community;
|
||||
const labelCommunity = featuredCommunity
|
||||
? i18n.t("unfeature_from_community")
|
||||
|
|
@ -969,9 +994,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
? i18n.t("unfeature_from_local")
|
||||
: i18n.t("feature_in_local");
|
||||
return (
|
||||
<span>
|
||||
<>
|
||||
<li>
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0 pl-0"
|
||||
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
|
||||
onClick={linkEvent(this, this.handleModFeaturePostCommunity)}
|
||||
data-tippy-content={labelCommunity}
|
||||
aria-label={labelCommunity}
|
||||
|
|
@ -979,19 +1005,23 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
{this.state.featureCommunityLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<span>
|
||||
<>
|
||||
<Icon
|
||||
icon="pin"
|
||||
classes={classNames({ "text-success": featuredCommunity })}
|
||||
classes={classNames("me-1", {
|
||||
"text-success": featuredCommunity,
|
||||
})}
|
||||
inline
|
||||
/>
|
||||
{i18n.t("community")}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
{amAdmin() && (
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
|
||||
onClick={linkEvent(this, this.handleModFeaturePostLocal)}
|
||||
data-tippy-content={labelLocal}
|
||||
aria-label={labelLocal}
|
||||
|
|
@ -999,18 +1029,21 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
{this.state.featureLocalLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<span>
|
||||
<>
|
||||
<Icon
|
||||
icon="pin"
|
||||
classes={classNames({ "text-success": featuredLocal })}
|
||||
classes={classNames("me-1", {
|
||||
"text-success": featuredLocal,
|
||||
})}
|
||||
inline
|
||||
/>
|
||||
{i18n.t("local")}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
</li>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1018,7 +1051,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
const removed = this.postView.post.removed;
|
||||
return (
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
!removed ? this.handleModRemoveShow : this.handleModRemoveSubmit
|
||||
|
|
@ -1110,13 +1143,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
) : (
|
||||
<>
|
||||
<button
|
||||
className="d-inline-block mr-1 btn btn-link btn-animate text-muted py-0"
|
||||
className="d-inline-block me-1 btn btn-link btn-animate text-muted py-0"
|
||||
aria-label={i18n.t("are_you_sure")}
|
||||
>
|
||||
{i18n.t("are_you_sure")}
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0 d-inline-block mr-1"
|
||||
className="btn btn-link btn-animate text-muted py-0 d-inline-block me-1"
|
||||
aria-label={i18n.t("yes")}
|
||||
onClick={linkEvent(this, this.handleTransferCommunity)}
|
||||
>
|
||||
|
|
@ -1215,13 +1248,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
className="form-inline"
|
||||
onSubmit={linkEvent(this, this.handleModRemoveSubmit)}
|
||||
>
|
||||
<label className="sr-only" htmlFor="post-listing-remove-reason">
|
||||
<label
|
||||
className="visually-hidden"
|
||||
htmlFor="post-listing-remove-reason"
|
||||
>
|
||||
{i18n.t("reason")}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="post-listing-remove-reason"
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("reason")}
|
||||
value={this.state.removeReason}
|
||||
onInput={linkEvent(this, this.handleModRemoveReasonChange)}
|
||||
|
|
@ -1237,7 +1273,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
)}
|
||||
{this.state.showBanDialog && (
|
||||
<form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
|
||||
<div className="form-group row col-12">
|
||||
<div className="mb-3 row col-12">
|
||||
<label
|
||||
className="col-form-label"
|
||||
htmlFor="post-listing-ban-reason"
|
||||
|
|
@ -1247,7 +1283,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
<input
|
||||
type="text"
|
||||
id="post-listing-ban-reason"
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("reason")}
|
||||
value={this.state.banReason}
|
||||
onInput={linkEvent(this, this.handleModBanReasonChange)}
|
||||
|
|
@ -1258,12 +1294,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
<input
|
||||
type="number"
|
||||
id={`mod-ban-expires`}
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("number_of_days")}
|
||||
value={this.state.banExpireDays}
|
||||
onInput={linkEvent(this, this.handleModBanExpireDaysChange)}
|
||||
/>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -1283,11 +1319,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
</div>
|
||||
</div>
|
||||
{/* TODO hold off on expires until later */}
|
||||
{/* <div class="form-group row"> */}
|
||||
{/* <div class="mb-3 row"> */}
|
||||
{/* <label class="col-form-label">Expires</label> */}
|
||||
{/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
|
||||
{/* <input type="date" class="form-control me-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
|
||||
{/* </div> */}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-secondary"
|
||||
|
|
@ -1309,13 +1345,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
className="form-inline"
|
||||
onSubmit={linkEvent(this, this.handleReportSubmit)}
|
||||
>
|
||||
<label className="sr-only" htmlFor="post-report-reason">
|
||||
<label className="visually-hidden" htmlFor="post-report-reason">
|
||||
{i18n.t("reason")}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="post-report-reason"
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("reason")}
|
||||
required
|
||||
value={this.state.reportReason}
|
||||
|
|
@ -1336,13 +1372,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
onSubmit={linkEvent(this, this.handlePurgeSubmit)}
|
||||
>
|
||||
<PurgeWarning />
|
||||
<label className="sr-only" htmlFor="purge-reason">
|
||||
<label className="visually-hidden" htmlFor="purge-reason">
|
||||
{i18n.t("reason")}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="purge-reason"
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("reason")}
|
||||
value={this.state.purgeReason}
|
||||
onInput={linkEvent(this, this.handlePurgeReasonChange)}
|
||||
|
|
@ -1398,7 +1434,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
<>
|
||||
{/* The mobile view*/}
|
||||
<div className="d-block d-sm-none">
|
||||
<div className="row">
|
||||
<article className="row post-container">
|
||||
<div className="col-12">
|
||||
{this.createdLine()}
|
||||
|
||||
|
|
@ -1413,14 +1449,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
{this.duplicatesLine()}
|
||||
{this.removeAndBanDialogs()}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
{/* The larger view*/}
|
||||
<div className="d-none d-sm-block">
|
||||
<div className="row">
|
||||
<article className="row post-container">
|
||||
{!this.props.viewOnly && this.voteBar()}
|
||||
<div className="col-sm-2 pr-0">
|
||||
<div className="col-sm-2 pe-0 post-media">
|
||||
<div className="">{this.thumbnail()}</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-9">
|
||||
|
|
@ -1435,7 +1471,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ export class PostListings extends Component<PostListingsProps, any> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className="post-listings">
|
||||
{this.posts.length > 0 ? (
|
||||
this.posts.map((post_view, idx) => (
|
||||
<>
|
||||
|
|
@ -96,9 +96,7 @@ export class PostListings extends Component<PostListingsProps, any> {
|
|||
onAddAdmin={this.props.onAddAdmin}
|
||||
onTransferCommunity={this.props.onTransferCommunity}
|
||||
/>
|
||||
{idx + 1 !== this.posts.length && (
|
||||
<hr className="my-3 border border-primary" />
|
||||
)}
|
||||
{idx + 1 !== this.posts.length && <hr className="my-3" />}
|
||||
</>
|
||||
))
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ export class PostReport extends Component<PostReportProps, PostReportState> {
|
|||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="post-report">
|
||||
<PostListing
|
||||
post_view={pv}
|
||||
showCommunity={true}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { isBrowser } from "@utils/browser";
|
||||
import { debounce } from "@utils/helpers";
|
||||
import autosize from "autosize";
|
||||
import { Component, createRef, linkEvent, RefObject } from "inferno";
|
||||
import {
|
||||
|
|
@ -64,7 +66,6 @@ import {
|
|||
buildCommentsTree,
|
||||
commentsToFlatNodes,
|
||||
commentTreeMaxDepth,
|
||||
debounce,
|
||||
editComment,
|
||||
editWith,
|
||||
enableDownvotes,
|
||||
|
|
@ -73,10 +74,10 @@ import {
|
|||
getCommentParentId,
|
||||
getDepthFromComment,
|
||||
getIdFromProps,
|
||||
isBrowser,
|
||||
isImage,
|
||||
myAuth,
|
||||
restoreScrollPosition,
|
||||
RouteDataResponse,
|
||||
saveScrollPosition,
|
||||
setIsoData,
|
||||
setupTippy,
|
||||
|
|
@ -93,6 +94,11 @@ import { PostListing } from "./post-listing";
|
|||
|
||||
const commentsShownInterval = 15;
|
||||
|
||||
type PostData = RouteDataResponse<{
|
||||
postRes: GetPostResponse;
|
||||
commentsRes: GetCommentsResponse;
|
||||
}>;
|
||||
|
||||
interface PostState {
|
||||
postId?: number;
|
||||
commentId?: number;
|
||||
|
|
@ -110,7 +116,7 @@ interface PostState {
|
|||
}
|
||||
|
||||
export class Post extends Component<any, PostState> {
|
||||
private isoData = setIsoData(this.context);
|
||||
private isoData = setIsoData<PostData>(this.context);
|
||||
private commentScrollDebounced: () => void;
|
||||
state: PostState = {
|
||||
postRes: { state: "empty" },
|
||||
|
|
@ -169,7 +175,7 @@ export class Post extends Component<any, PostState> {
|
|||
|
||||
// Only fetch the data if coming from another route
|
||||
if (FirstLoadService.isFirstLoad) {
|
||||
const [postRes, commentsRes] = this.isoData.routeData;
|
||||
const { commentsRes, postRes } = this.isoData.routeData;
|
||||
|
||||
this.state = {
|
||||
...this.state,
|
||||
|
|
@ -220,13 +226,12 @@ export class Post extends Component<any, PostState> {
|
|||
}
|
||||
}
|
||||
|
||||
static fetchInitialData({
|
||||
auth,
|
||||
static async fetchInitialData({
|
||||
client,
|
||||
path,
|
||||
}: InitialFetchRequest): Promise<any>[] {
|
||||
auth,
|
||||
}: InitialFetchRequest): Promise<PostData> {
|
||||
const pathSplit = path.split("/");
|
||||
const promises: Promise<RequestState<any>>[] = [];
|
||||
|
||||
const pathType = pathSplit.at(1);
|
||||
const id = pathSplit.at(2) ? Number(pathSplit.at(2)) : undefined;
|
||||
|
|
@ -252,10 +257,10 @@ export class Post extends Component<any, PostState> {
|
|||
commentsForm.parent_id = id;
|
||||
}
|
||||
|
||||
promises.push(client.getPost(postForm));
|
||||
promises.push(client.getComments(commentsForm));
|
||||
|
||||
return promises;
|
||||
return {
|
||||
postRes: await client.getPost(postForm),
|
||||
commentsRes: await client.getComments(commentsForm),
|
||||
};
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
|
@ -384,12 +389,13 @@ export class Post extends Component<any, PostState> {
|
|||
disabled={res.post_view.post.locked}
|
||||
allLanguages={this.state.siteRes.all_languages}
|
||||
siteLanguages={this.state.siteRes.discussion_languages}
|
||||
containerClass="post-comment-container"
|
||||
onUpsertComment={this.handleCreateComment}
|
||||
finished={this.state.finished.get(0)}
|
||||
/>
|
||||
<div className="d-block d-md-none">
|
||||
<button
|
||||
className="btn btn-secondary d-inline-block mb-2 mr-3"
|
||||
className="btn btn-secondary d-inline-block mb-2 me-3"
|
||||
onClick={linkEvent(this, this.handleShowSidebarMobile)}
|
||||
>
|
||||
{i18n.t("sidebar")}{" "}
|
||||
|
|
@ -418,13 +424,13 @@ export class Post extends Component<any, PostState> {
|
|||
}
|
||||
|
||||
render() {
|
||||
return <div className="container-lg">{this.renderPostRes()}</div>;
|
||||
return <div className="post container-lg">{this.renderPostRes()}</div>;
|
||||
}
|
||||
|
||||
sortRadios() {
|
||||
return (
|
||||
<>
|
||||
<div className="btn-group btn-group-toggle flex-wrap mr-3 mb-2">
|
||||
<div className="btn-group btn-group-toggle flex-wrap me-3 mb-2">
|
||||
<label
|
||||
className={`btn btn-outline-secondary pointer ${
|
||||
this.state.commentSort === "Hot" && "active"
|
||||
|
|
@ -433,6 +439,7 @@ export class Post extends Component<any, PostState> {
|
|||
{i18n.t("hot")}
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={"Hot"}
|
||||
checked={this.state.commentSort === "Hot"}
|
||||
onChange={linkEvent(this, this.handleCommentSortChange)}
|
||||
|
|
@ -446,6 +453,7 @@ export class Post extends Component<any, PostState> {
|
|||
{i18n.t("top")}
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={"Top"}
|
||||
checked={this.state.commentSort === "Top"}
|
||||
onChange={linkEvent(this, this.handleCommentSortChange)}
|
||||
|
|
@ -459,6 +467,7 @@ export class Post extends Component<any, PostState> {
|
|||
{i18n.t("new")}
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={"New"}
|
||||
checked={this.state.commentSort === "New"}
|
||||
onChange={linkEvent(this, this.handleCommentSortChange)}
|
||||
|
|
@ -472,6 +481,7 @@ export class Post extends Component<any, PostState> {
|
|||
{i18n.t("old")}
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={"Old"}
|
||||
checked={this.state.commentSort === "Old"}
|
||||
onChange={linkEvent(this, this.handleCommentSortChange)}
|
||||
|
|
@ -487,6 +497,7 @@ export class Post extends Component<any, PostState> {
|
|||
{i18n.t("chat")}
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={CommentViewType.Flat}
|
||||
checked={this.state.commentViewType === CommentViewType.Flat}
|
||||
onChange={linkEvent(this, this.handleCommentViewTypeChange)}
|
||||
|
|
@ -547,12 +558,10 @@ export class Post extends Component<any, PostState> {
|
|||
const res = this.state.postRes;
|
||||
if (res.state === "success") {
|
||||
return (
|
||||
<div className="mb-3">
|
||||
<Sidebar
|
||||
community_view={res.data.community_view}
|
||||
moderators={res.data.moderators}
|
||||
admins={this.state.siteRes.admins}
|
||||
online={res.data.online}
|
||||
enableNsfw={enableNsfw(this.state.siteRes)}
|
||||
showIcon
|
||||
allLanguages={this.state.siteRes.all_languages}
|
||||
|
|
@ -565,7 +574,6 @@ export class Post extends Component<any, PostState> {
|
|||
onBlockCommunity={this.handleBlockCommunity}
|
||||
onEditCommunity={this.handleEditCommunity}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -582,14 +590,14 @@ export class Post extends Component<any, PostState> {
|
|||
{!!this.state.commentId && (
|
||||
<>
|
||||
<button
|
||||
className="pl-0 d-block btn btn-link text-muted"
|
||||
className="ps-0 d-block btn btn-link text-muted"
|
||||
onClick={linkEvent(this, this.handleViewPost)}
|
||||
>
|
||||
{i18n.t("view_all_comments")} ➔
|
||||
</button>
|
||||
{showContextButton && (
|
||||
<button
|
||||
className="pl-0 d-block btn btn-link text-muted"
|
||||
className="ps-0 d-block btn btn-link text-muted"
|
||||
onClick={linkEvent(this, this.handleViewContext)}
|
||||
>
|
||||
{i18n.t("show_context")} ➔
|
||||
|
|
@ -729,19 +737,14 @@ export class Post extends Component<any, PostState> {
|
|||
|
||||
async handleBlockCommunity(form: BlockCommunity) {
|
||||
const blockCommunityRes = await HttpService.client.blockCommunity(form);
|
||||
// TODO Probably isn't necessary
|
||||
this.setState(s => {
|
||||
if (
|
||||
s.postRes.state == "success" &&
|
||||
blockCommunityRes.state == "success"
|
||||
) {
|
||||
s.postRes.data.community_view = blockCommunityRes.data.community_view;
|
||||
}
|
||||
return s;
|
||||
});
|
||||
|
||||
if (blockCommunityRes.state == "success") {
|
||||
updateCommunityBlock(blockCommunityRes.data);
|
||||
this.setState(s => {
|
||||
if (s.postRes.state == "success") {
|
||||
s.postRes.data.community_view.blocked =
|
||||
blockCommunityRes.data.blocked;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { InitialFetchRequest } from "../../interfaces";
|
|||
import { FirstLoadService } from "../../services/FirstLoadService";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
RouteDataResponse,
|
||||
getRecipientIdFromProps,
|
||||
myAuth,
|
||||
setIsoData,
|
||||
|
|
@ -19,6 +20,10 @@ import { HtmlTags } from "../common/html-tags";
|
|||
import { Spinner } from "../common/icon";
|
||||
import { PrivateMessageForm } from "./private-message-form";
|
||||
|
||||
type CreatePrivateMessageData = RouteDataResponse<{
|
||||
recipientDetailsResponse: GetPersonDetailsResponse;
|
||||
}>;
|
||||
|
||||
interface CreatePrivateMessageState {
|
||||
siteRes: GetSiteResponse;
|
||||
recipientRes: RequestState<GetPersonDetailsResponse>;
|
||||
|
|
@ -30,7 +35,7 @@ export class CreatePrivateMessage extends Component<
|
|||
any,
|
||||
CreatePrivateMessageState
|
||||
> {
|
||||
private isoData = setIsoData(this.context);
|
||||
private isoData = setIsoData<CreatePrivateMessageData>(this.context);
|
||||
state: CreatePrivateMessageState = {
|
||||
siteRes: this.isoData.site_res,
|
||||
recipientRes: { state: "empty" },
|
||||
|
|
@ -47,7 +52,7 @@ export class CreatePrivateMessage extends Component<
|
|||
if (FirstLoadService.isFirstLoad) {
|
||||
this.state = {
|
||||
...this.state,
|
||||
recipientRes: this.isoData.routeData[0],
|
||||
recipientRes: this.isoData.routeData.recipientDetailsResponse,
|
||||
isIsomorphic: true,
|
||||
};
|
||||
}
|
||||
|
|
@ -59,6 +64,25 @@ export class CreatePrivateMessage extends Component<
|
|||
}
|
||||
}
|
||||
|
||||
static async fetchInitialData({
|
||||
client,
|
||||
path,
|
||||
auth,
|
||||
}: InitialFetchRequest): Promise<CreatePrivateMessageData> {
|
||||
const person_id = Number(path.split("/").pop());
|
||||
|
||||
const form: GetPersonDetails = {
|
||||
person_id,
|
||||
sort: "New",
|
||||
saved_only: false,
|
||||
auth,
|
||||
};
|
||||
|
||||
return {
|
||||
recipientDetailsResponse: await client.getPersonDetails(form),
|
||||
};
|
||||
}
|
||||
|
||||
async fetchPersonDetails() {
|
||||
this.setState({
|
||||
recipientRes: { state: "loading" },
|
||||
|
|
@ -74,19 +98,6 @@ export class CreatePrivateMessage extends Component<
|
|||
});
|
||||
}
|
||||
|
||||
static fetchInitialData(
|
||||
req: InitialFetchRequest
|
||||
): Promise<RequestState<any>>[] {
|
||||
const person_id = Number(req.path.split("/").pop());
|
||||
const form: GetPersonDetails = {
|
||||
person_id,
|
||||
sort: "New",
|
||||
saved_only: false,
|
||||
auth: req.auth,
|
||||
};
|
||||
return [req.client.getPersonDetails(form)];
|
||||
}
|
||||
|
||||
get documentTitle(): string {
|
||||
if (this.state.recipientRes.state == "success") {
|
||||
const name_ = this.state.recipientRes.data.person_view.person.name;
|
||||
|
|
@ -123,7 +134,7 @@ export class CreatePrivateMessage extends Component<
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="create-private-message container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
|
|||
|
|
@ -73,14 +73,17 @@ export class PrivateMessageForm extends Component<
|
|||
|
||||
render() {
|
||||
return (
|
||||
<form onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}>
|
||||
<form
|
||||
className="private-message-form"
|
||||
onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}
|
||||
>
|
||||
<NavigationPrompt
|
||||
when={
|
||||
!this.state.loading && !!this.state.content && !this.state.submitted
|
||||
}
|
||||
/>
|
||||
{!this.props.privateMessageView && (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label">
|
||||
{capitalizeFirstLetter(i18n.t("to"))}
|
||||
</label>
|
||||
|
|
@ -90,7 +93,7 @@ export class PrivateMessageForm extends Component<
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label">
|
||||
{i18n.t("message")}
|
||||
<button
|
||||
|
|
@ -114,7 +117,7 @@ export class PrivateMessageForm extends Component<
|
|||
</div>
|
||||
|
||||
{this.state.showDisclaimer && (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="offset-sm-2 col-sm-10">
|
||||
<div className="alert alert-danger" role="alert">
|
||||
<T i18nKey="private_message_disclaimer">
|
||||
|
|
@ -131,11 +134,11 @@ export class PrivateMessageForm extends Component<
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="offset-sm-2 col-sm-10">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-secondary mr-2"
|
||||
className="btn btn-secondary me-2"
|
||||
disabled={this.state.loading}
|
||||
>
|
||||
{this.state.loading ? (
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export class PrivateMessageReport extends Component<Props, State> {
|
|||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="private-message-report">
|
||||
<div>
|
||||
{i18n.t("creator")}:{" "}
|
||||
<PersonListing person={r.private_message_creator} />
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ export class PrivateMessage extends Component<
|
|||
: message_view.creator;
|
||||
|
||||
return (
|
||||
<div className="border-top border-light">
|
||||
<div className="private-message border-top border-light">
|
||||
<div>
|
||||
<ul className="list-inline mb-0 text-muted small">
|
||||
{/* TODO refactor this */}
|
||||
|
|
@ -248,13 +248,13 @@ export class PrivateMessage extends Component<
|
|||
className="form-inline"
|
||||
onSubmit={linkEvent(this, this.handleReportSubmit)}
|
||||
>
|
||||
<label className="sr-only" htmlFor="pm-report-reason">
|
||||
<label className="visually-hidden" htmlFor="pm-report-reason">
|
||||
{i18n.t("reason")}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="pm-report-reason"
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("reason")}
|
||||
required
|
||||
value={this.state.reportReason}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { debounce, getQueryParams, getQueryString } from "@utils/helpers";
|
||||
import type { QueryParams } from "@utils/types";
|
||||
import type { NoOptionI18nKeys } from "i18next";
|
||||
import { Component, linkEvent } from "inferno";
|
||||
import {
|
||||
|
|
@ -26,11 +28,10 @@ import { FirstLoadService } from "../services/FirstLoadService";
|
|||
import { HttpService, RequestState } from "../services/HttpService";
|
||||
import {
|
||||
Choice,
|
||||
QueryParams,
|
||||
RouteDataResponse,
|
||||
capitalizeFirstLetter,
|
||||
commentsToFlatNodes,
|
||||
communityToChoice,
|
||||
debounce,
|
||||
enableDownvotes,
|
||||
enableNsfw,
|
||||
fetchCommunities,
|
||||
|
|
@ -38,8 +39,6 @@ import {
|
|||
fetchUsers,
|
||||
getIdFromString,
|
||||
getPageFromString,
|
||||
getQueryParams,
|
||||
getQueryString,
|
||||
getUpdatedSearchId,
|
||||
myAuth,
|
||||
numToSI,
|
||||
|
|
@ -70,6 +69,14 @@ interface SearchProps {
|
|||
page: number;
|
||||
}
|
||||
|
||||
type SearchData = RouteDataResponse<{
|
||||
communityResponse: GetCommunityResponse;
|
||||
listCommunitiesResponse: ListCommunitiesResponse;
|
||||
creatorDetailsResponse: GetPersonDetailsResponse;
|
||||
searchResponse: SearchResponse;
|
||||
resolveObjectResponse: ResolveObjectResponse;
|
||||
}>;
|
||||
|
||||
type FilterType = "creator" | "community";
|
||||
|
||||
interface SearchState {
|
||||
|
|
@ -173,8 +180,8 @@ const Filter = ({
|
|||
loading: boolean;
|
||||
}) => {
|
||||
return (
|
||||
<div className="form-group col-sm-6">
|
||||
<label className="col-form-label" htmlFor={`${filterType}-filter`}>
|
||||
<div className="mb-3 col-sm-6">
|
||||
<label className="col-form-label me-2" htmlFor={`${filterType}-filter`}>
|
||||
{capitalizeFirstLetter(i18n.t(filterType))}
|
||||
</label>
|
||||
<SearchableSelect
|
||||
|
|
@ -228,7 +235,8 @@ function getListing(
|
|||
}
|
||||
|
||||
export class Search extends Component<any, SearchState> {
|
||||
private isoData = setIsoData(this.context);
|
||||
private isoData = setIsoData<SearchData>(this.context);
|
||||
|
||||
state: SearchState = {
|
||||
resolveObjectRes: { state: "empty" },
|
||||
creatorDetailsRes: { state: "empty" },
|
||||
|
|
@ -262,44 +270,65 @@ export class Search extends Component<any, SearchState> {
|
|||
|
||||
// Only fetch the data if coming from another route
|
||||
if (FirstLoadService.isFirstLoad) {
|
||||
const [
|
||||
communityRes,
|
||||
communitiesRes,
|
||||
creatorDetailsRes,
|
||||
searchRes,
|
||||
resolveObjectRes,
|
||||
] = this.isoData.routeData;
|
||||
const {
|
||||
communityResponse: communityRes,
|
||||
creatorDetailsResponse: creatorDetailsRes,
|
||||
listCommunitiesResponse: communitiesRes,
|
||||
resolveObjectResponse: resolveObjectRes,
|
||||
searchResponse: searchRes,
|
||||
} = this.isoData.routeData;
|
||||
|
||||
this.state = {
|
||||
...this.state,
|
||||
communitiesRes,
|
||||
communityRes,
|
||||
creatorDetailsRes,
|
||||
creatorSearchOptions:
|
||||
creatorDetailsRes.state == "success"
|
||||
? [personToChoice(creatorDetailsRes.data.person_view)]
|
||||
: [],
|
||||
isIsomorphic: true,
|
||||
};
|
||||
|
||||
if (communityRes.state === "success") {
|
||||
if (creatorDetailsRes?.state === "success") {
|
||||
this.state = {
|
||||
...this.state,
|
||||
communitySearchOptions: [
|
||||
communityToChoice(communityRes.data.community_view),
|
||||
],
|
||||
creatorSearchOptions:
|
||||
creatorDetailsRes?.state === "success"
|
||||
? [personToChoice(creatorDetailsRes.data.person_view)]
|
||||
: [],
|
||||
creatorDetailsRes,
|
||||
};
|
||||
}
|
||||
|
||||
if (q) {
|
||||
if (communitiesRes?.state === "success") {
|
||||
this.state = {
|
||||
...this.state,
|
||||
communitiesRes,
|
||||
};
|
||||
}
|
||||
|
||||
if (communityRes?.state === "success") {
|
||||
this.state = {
|
||||
...this.state,
|
||||
communityRes,
|
||||
};
|
||||
}
|
||||
|
||||
if (q !== "") {
|
||||
this.state = {
|
||||
...this.state,
|
||||
};
|
||||
|
||||
if (searchRes?.state === "success") {
|
||||
this.state = {
|
||||
...this.state,
|
||||
searchRes,
|
||||
};
|
||||
}
|
||||
|
||||
if (resolveObjectRes?.state === "success") {
|
||||
this.state = {
|
||||
...this.state,
|
||||
resolveObjectRes,
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
if (!this.state.isIsomorphic) {
|
||||
|
|
@ -328,23 +357,25 @@ export class Search extends Component<any, SearchState> {
|
|||
saveScrollPosition(this.context);
|
||||
}
|
||||
|
||||
static fetchInitialData({
|
||||
static async fetchInitialData({
|
||||
client,
|
||||
auth,
|
||||
query: { communityId, creatorId, q, type, sort, listingType, page },
|
||||
}: InitialFetchRequest<QueryParams<SearchProps>>): Promise<
|
||||
RequestState<any>
|
||||
>[] {
|
||||
const promises: Promise<RequestState<any>>[] = [];
|
||||
|
||||
}: InitialFetchRequest<QueryParams<SearchProps>>): Promise<SearchData> {
|
||||
const community_id = getIdFromString(communityId);
|
||||
let communityResponse: RequestState<GetCommunityResponse> = {
|
||||
state: "empty",
|
||||
};
|
||||
let listCommunitiesResponse: RequestState<ListCommunitiesResponse> = {
|
||||
state: "empty",
|
||||
};
|
||||
if (community_id) {
|
||||
const getCommunityForm: GetCommunity = {
|
||||
id: community_id,
|
||||
auth,
|
||||
};
|
||||
promises.push(client.getCommunity(getCommunityForm));
|
||||
promises.push(Promise.resolve({ state: "empty" }));
|
||||
|
||||
communityResponse = await client.getCommunity(getCommunityForm);
|
||||
} else {
|
||||
const listCommunitiesForm: ListCommunities = {
|
||||
type_: defaultListingType,
|
||||
|
|
@ -352,23 +383,32 @@ export class Search extends Component<any, SearchState> {
|
|||
limit: fetchLimit,
|
||||
auth,
|
||||
};
|
||||
promises.push(Promise.resolve({ state: "empty" }));
|
||||
promises.push(client.listCommunities(listCommunitiesForm));
|
||||
|
||||
listCommunitiesResponse = await client.listCommunities(
|
||||
listCommunitiesForm
|
||||
);
|
||||
}
|
||||
|
||||
const creator_id = getIdFromString(creatorId);
|
||||
let creatorDetailsResponse: RequestState<GetPersonDetailsResponse> = {
|
||||
state: "empty",
|
||||
};
|
||||
if (creator_id) {
|
||||
const getCreatorForm: GetPersonDetails = {
|
||||
person_id: creator_id,
|
||||
auth,
|
||||
};
|
||||
promises.push(client.getPersonDetails(getCreatorForm));
|
||||
} else {
|
||||
promises.push(Promise.resolve({ state: "empty" }));
|
||||
|
||||
creatorDetailsResponse = await client.getPersonDetails(getCreatorForm);
|
||||
}
|
||||
|
||||
const query = getSearchQueryFromQuery(q);
|
||||
|
||||
let searchResponse: RequestState<SearchResponse> = { state: "empty" };
|
||||
let resolveObjectResponse: RequestState<ResolveObjectResponse> = {
|
||||
state: "empty",
|
||||
};
|
||||
|
||||
if (query) {
|
||||
const form: SearchForm = {
|
||||
q: query,
|
||||
|
|
@ -383,21 +423,24 @@ export class Search extends Component<any, SearchState> {
|
|||
};
|
||||
|
||||
if (query !== "") {
|
||||
promises.push(client.search(form));
|
||||
searchResponse = await client.search(form);
|
||||
if (auth) {
|
||||
const resolveObjectForm: ResolveObject = {
|
||||
q: query,
|
||||
auth,
|
||||
};
|
||||
promises.push(client.resolveObject(resolveObjectForm));
|
||||
resolveObjectResponse = await client.resolveObject(resolveObjectForm);
|
||||
}
|
||||
} else {
|
||||
promises.push(Promise.resolve({ state: "empty" }));
|
||||
promises.push(Promise.resolve({ state: "empty" }));
|
||||
}
|
||||
}
|
||||
|
||||
return promises;
|
||||
return {
|
||||
communityResponse,
|
||||
creatorDetailsResponse,
|
||||
listCommunitiesResponse,
|
||||
resolveObjectResponse,
|
||||
searchResponse,
|
||||
};
|
||||
}
|
||||
|
||||
get documentTitle(): string {
|
||||
|
|
@ -410,7 +453,7 @@ export class Search extends Component<any, SearchState> {
|
|||
const { type, page } = getSearchQueryParams();
|
||||
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="search container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -448,13 +491,11 @@ export class Search extends Component<any, SearchState> {
|
|||
|
||||
get searchForm() {
|
||||
return (
|
||||
<form
|
||||
className="form-inline"
|
||||
onSubmit={linkEvent(this, this.handleSearchSubmit)}
|
||||
>
|
||||
<form className="row" onSubmit={linkEvent(this, this.handleSearchSubmit)}>
|
||||
<div className="col-auto">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control mr-2 mb-2"
|
||||
className="form-control me-2 mb-2 col-sm-8"
|
||||
value={this.state.searchText}
|
||||
placeholder={`${i18n.t("search")}...`}
|
||||
aria-label={i18n.t("search")}
|
||||
|
|
@ -462,13 +503,16 @@ export class Search extends Component<any, SearchState> {
|
|||
required
|
||||
minLength={1}
|
||||
/>
|
||||
<button type="submit" className="btn btn-secondary mr-2 mb-2">
|
||||
{this.state.searchRes.state == "loading" ? (
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<button type="submit" className="btn btn-secondary mb-2">
|
||||
{this.state.searchRes.state === "loading" ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<span>{i18n.t("search")}</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
|
@ -493,7 +537,7 @@ export class Search extends Component<any, SearchState> {
|
|||
<select
|
||||
value={type}
|
||||
onChange={linkEvent(this, this.handleTypeChange)}
|
||||
className="custom-select w-auto mb-2"
|
||||
className="form-select d-inline-block w-auto mb-2"
|
||||
aria-label={i18n.t("type")}
|
||||
>
|
||||
<option disabled aria-hidden="true">
|
||||
|
|
@ -505,7 +549,7 @@ export class Search extends Component<any, SearchState> {
|
|||
</option>
|
||||
))}
|
||||
</select>
|
||||
<span className="ml-2">
|
||||
<span className="ms-2">
|
||||
<ListingTypeSelect
|
||||
type_={listingType}
|
||||
showLocal={showLocal(this.isoData)}
|
||||
|
|
@ -513,7 +557,7 @@ export class Search extends Component<any, SearchState> {
|
|||
onChange={this.handleListingTypeChange}
|
||||
/>
|
||||
</span>
|
||||
<span className="ml-2">
|
||||
<span className="ms-2">
|
||||
<SortSelect
|
||||
sort={sort}
|
||||
onChange={this.handleSortChange}
|
||||
|
|
@ -521,7 +565,7 @@ export class Search extends Component<any, SearchState> {
|
|||
hideMostComments
|
||||
/>
|
||||
</span>
|
||||
<div className="form-row">
|
||||
<div className="row">
|
||||
{hasCommunities && (
|
||||
<Filter
|
||||
filterType="community"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { isBrowser } from "./utils";
|
||||
import { isBrowser } from "@utils/browser";
|
||||
|
||||
const testHost = "0.0.0.0:8536";
|
||||
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue