Add content warning to modlog and fix modlog routing bug (#994)

* Add content warning to modlog and fix modlog routing bug

* Add translation logic

src/assets/css/main.css

@@ -129,10 +129,52 @@
   user-select: none;
 }
 
+.icon-emoji {
+  width: 4em;
+  height: auto;
+  max-height: inherit;
+}
+
+.icon-emoji-admin {
+  max-width: 24px;
+  max-height: 24px;
+  display: inline-block;
+}
+
 .icon-inline {
   margin-bottom: 2px;
 }
 
+.emoji-picker-container {
+  position: absolute;
+  top: 30px;
+  z-index: 1000;
+  transform: translateX(-50%);
+}
+
+@media only screen and (max-width: 992px) {
+  .emoji-picker-container {
+    width: 100vw;
+    transform: translateX(0%);
+    position: fixed;
+    left: 0;
+  }
+
+  .emoji-picker-container > section {
+    width: 100% !important;
+  }
+}
+
+.click-away-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 999;
+}
+
 .spinner-large {
   display: grid;
   display: block;
@@ -209,6 +251,10 @@ hr {
   text-overflow: ellipsis;
 }
 
+.text-xs-center {
+  text-align: center;
+}
+
 .overflow-wrap-anywhere {
   overflow-wrap: anywhere;
 }
@@ -384,3 +430,6 @@ br.big {
 .lang-select-action:focus {
   width: auto;
 }
+em-emoji-picker {
+  width: 100%;
+}

src/shared/components/common/markdown-textarea.tsx

@@ -372,9 +372,9 @@ export class MarkdownTextArea extends Component<
           let textarea: any = document.getElementById(i.id);
           autosize.update(textarea);
           pictrsDeleteToast(
-            `${i18n.t("click_to_delete_picture")}: ${file.name}`,
-            `${i18n.t("picture_deleted")}: ${file.name}`,
-            `${i18n.t("failed_to_delete_picture")}: ${file.name}`,
+            i18n.t("click_to_delete_picture", file.name),
+            i18n.t("picture_deleted", file.name),
+            i18n.t("failed_to_delete_picture", file.name),
             deleteUrl
           );
         } else {

src/shared/components/community/sidebar.tsx

@@ -262,7 +262,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
         <li className="list-inline-item">
           <Link
             className="badge badge-primary"
-            to={`/modlog/community/${this.props.community_view.community.id}`}
+            to={`/modlog/${this.props.community_view.community.id}`}
           >
             {i18n.t("modlog")}
           </Link>

src/shared/components/modlog.tsx

@@ -1,4 +1,5 @@
 import { Component, linkEvent } from "inferno";
+import { T } from "inferno-i18next-dess";
 import { Link } from "inferno-router";
 import {
   AdminPurgeCommentView,
@@ -47,7 +48,7 @@ import {
   wsSubscribe,
 } from "../utils";
 import { HtmlTags } from "./common/html-tags";
-import { Spinner } from "./common/icon";
+import { Icon, Spinner } from "./common/icon";
 import { MomentTime } from "./common/moment-time";
 import { Paginator } from "./common/paginator";
 import { CommunityLink } from "./community/community-link";
@@ -604,6 +605,21 @@ export class Modlog extends Component<any, ModlogState> {
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
+        <div>
+          <div
+            className="alert alert-warning text-sm-start text-xs-center"
+            role="alert"
+          >
+            <Icon
+              icon="alert-triangle"
+              inline
+              classes="mr-sm-2 mx-auto d-sm-inline d-block"
+            />
+            <T i18nKey="modlog_content_warning" class="d-inline">
+              #<strong>#</strong>#
+            </T>
+          </div>
+        </div>
         {this.state.loading ? (
           <h5>
             <Spinner large />

src/shared/components/post/create-post.tsx

@@ -163,16 +163,7 @@ export class CreatePost extends Component<any, CreatePostState> {
       url: urlParams.get("url") ?? undefined,
     };
 
-    const locationState = this.props.history.location.state as
-      | PostFormParams
-      | undefined;
-
-    this.props.history.replace(
-      `/create_post${getQueryString(queryParams)}`,
-      locationState
-    );
-
-    this.fetchCommunity();
+    return params;
   }
 
   get prevCommunityName(): string | undefined {

src/shared/components/post/post-form.tsx

@@ -608,9 +608,9 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
           i.state.form.url = url;
           i.setState({ imageLoading: false });
           pictrsDeleteToast(
-            `${i18n.t("click_to_delete_picture")}: ${file.name}`,
-            `${i18n.t("picture_deleted")}: ${file.name}`,
-            `${i18n.t("failed_to_delete_picture")}: ${file.name}`,
+            i18n.t("click_to_delete_picture", file.name),
+            i18n.t("picture_deleted", file.name),
+            i18n.t("failed_to_delete_picture", file.name),
             deleteUrl
           );
         } else {

src/shared/components/search.tsx

@@ -368,13 +368,18 @@ export class Search extends Component<any, SearchState> {
           path={this.context.router.route.match.url}
         />
         <h5>{i18n.t("search")}</h5>
-        {this.selects}
-        {this.searchForm}
-        {this.displayResults(type)}
-        {this.resultsCount === 0 && !this.state.searchLoading && (
+        {this.selects()}
+        {this.searchForm()}
+        {this.state.type_ == SearchType.All && this.all()}
+        {this.state.type_ == SearchType.Comments && this.comments()}
+        {this.state.type_ == SearchType.Posts && this.posts()}
+        {this.state.type_ == SearchType.Communities && this.communities()}
+        {this.state.type_ == SearchType.Users && this.users()}
+        {this.state.type_ == SearchType.Url && this.posts()}
+        {this.resultsCount() === 0 && !this.state.loading && (
           <span>{i18n.t("no_results")}</span>
         )}
-        <Paginator page={page} onChange={this.handlePageChange} />
+        <Paginator page={this.state.page} onChange={this.handlePageChange} />
       </div>
     );
   }
@@ -986,7 +991,7 @@ export class Search extends Component<any, SearchState> {
 
   checkFinishedLoading() {
     if (this.state.searchResponse || this.state.resolveObjectResponse) {
-      this.setState({ searchLoading: false });
+      this.setState({ loading: false });
     }
   }
 }

src/shared/routes.ts

@@ -114,7 +114,7 @@ export const routes: IRoutePropsWithFetch[] = [
     component: Settings,
   },
   {
-    path: `/modlog/community/:community_id`,
+    path: `/modlog/:communityId`,
     component: Modlog,
     fetchInitialData: req => Modlog.fetchInitialData(req),
   },