routes.api: fix get_captcha endpoint (#1135)

[lemmy.git] / ui / src / components / sidebar.tsx

diff --git a/ui/src/components/sidebar.tsx b/ui/src/components/sidebar.tsx
index ddf0bef66f781710d3bd17b9cef2969fdb76c175..25cbd79722b65866309624119b3225ae9ac6bee7 100644 (file)
--- a/ui/src/components/sidebar.tsx
+++ b/ui/src/components/sidebar.tsx
@@ -7,12 +7,14 @@ import {
   DeleteCommunityForm,
   RemoveCommunityForm,
   UserView,
-} from '../interfaces';
+  AddModToCommunityForm,
+} from 'lemmy-js-client';
 import { WebSocketService, UserService } from '../services';
 import { mdToHtml, getUnixTime } from '../utils';
 import { CommunityForm } from './community-form';
 import { UserListing } from './user-listing';
 import { CommunityLink } from './community-link';
+import { BannerIconHeader } from './banner-icon-header';
 import { i18n } from '../i18next';
 
 interface SidebarProps {
@@ -21,6 +23,7 @@ interface SidebarProps {
   admins: Array<UserView>;
   online: number;
   enableNsfw: boolean;
+  showIcon?: boolean;
 }
 
 interface SidebarState {
@@ -28,6 +31,7 @@ interface SidebarState {
   showRemoveDialog: boolean;
   removeReason: string;
   removeExpires: string;
+  showConfirmLeaveModTeam: boolean;
 }
 
 export class Sidebar extends Component<SidebarProps, SidebarState> {
@@ -36,6 +40,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     showRemoveDialog: false,
     removeReason: null,
     removeExpires: null,
+    showConfirmLeaveModTeam: false,
   };
 
   constructor(props: any, context: any) {
@@ -86,24 +91,36 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
   communityTitle() {
     let community = this.props.community;
     return (
-      <h5 className="mb-2">
-        <span>{community.title}</span>
-        {community.removed && (
-          <small className="ml-2 text-muted font-italic">
-            {i18n.t('removed')}
-          </small>
-        )}
-        {community.deleted && (
-          <small className="ml-2 text-muted font-italic">
-            {i18n.t('deleted')}
-          </small>
-        )}
-        {community.nsfw && (
-          <small className="ml-2 text-muted font-italic">
-            {i18n.t('nsfw')}
-          </small>
-        )}
-      </h5>
+      <div>
+        <h5 className="mb-0">
+          {this.props.showIcon && (
+            <BannerIconHeader icon={community.icon} banner={community.banner} />
+          )}
+          <span>{community.title}</span>
+          {community.removed && (
+            <small className="ml-2 text-muted font-italic">
+              {i18n.t('removed')}
+            </small>
+          )}
+          {community.deleted && (
+            <small className="ml-2 text-muted font-italic">
+              {i18n.t('deleted')}
+            </small>
+          )}
+          {community.nsfw && (
+            <small className="ml-2 text-muted font-italic">
+              {i18n.t('nsfw')}
+            </small>
+          )}
+        </h5>
+        <CommunityLink
+          community={community}
+          realLink
+          useApubName
+          muted
+          hideAvatar
+        />
+      </div>
     );
   }
 
@@ -111,11 +128,9 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     let community = this.props.community;
     return (
       <ul class="my-1 list-inline">
-        {/*
-              <li className="list-inline-item badge badge-light">
-                {i18n.t('number_online', { count: this.props.online })}
-              </li>
-              */}
+        <li className="list-inline-item badge badge-light">
+          {i18n.t('number_online', { count: this.props.online })}
+        </li>
         <li className="list-inline-item badge badge-light">
           {i18n.t('number_of_subscribers', {
             count: community.number_of_subscribers,
@@ -160,6 +175,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             <UserListing
               user={{
                 name: mod.user_name,
+                preferred_username: mod.user_preferred_username,
                 avatar: mod.avatar,
                 id: mod.user_id,
                 local: mod.user_local,
@@ -235,6 +251,45 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                   </svg>
                 </span>
               </li>
+              {!this.amCreator &&
+                (!this.state.showConfirmLeaveModTeam ? (
+                  <li className="list-inline-item-action">
+                    <span
+                      class="pointer"
+                      onClick={linkEvent(
+                        this,
+                        this.handleShowConfirmLeaveModTeamClick
+                      )}
+                    >
+                      {i18n.t('leave_mod_team')}
+                    </span>
+                  </li>
+                ) : (
+                  <>
+                    <li className="list-inline-item-action">
+                      {i18n.t('are_you_sure')}
+                    </li>
+                    <li className="list-inline-item-action">
+                      <span
+                        class="pointer"
+                        onClick={linkEvent(this, this.handleLeaveModTeamClick)}
+                      >
+                        {i18n.t('yes')}
+                      </span>
+                    </li>
+                    <li className="list-inline-item-action">
+                      <span
+                        class="pointer"
+                        onClick={linkEvent(
+                          this,
+                          this.handleCancelLeaveModTeamClick
+                        )}
+                      >
+                        {i18n.t('no')}
+                      </span>
+                    </li>
+                  </>
+                ))}
               {this.amCreator && (
                 <li className="list-inline-item-action">
                   <span
@@ -331,6 +386,27 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     WebSocketService.Instance.deleteCommunity(deleteForm);
   }
 
+  handleShowConfirmLeaveModTeamClick(i: Sidebar) {
+    i.state.showConfirmLeaveModTeam = true;
+    i.setState(i.state);
+  }
+
+  handleLeaveModTeamClick(i: Sidebar) {
+    let form: AddModToCommunityForm = {
+      user_id: UserService.Instance.user.id,
+      community_id: i.props.community.id,
+      added: false,
+    };
+    WebSocketService.Instance.addModToCommunity(form);
+    i.state.showConfirmLeaveModTeam = false;
+    i.setState(i.state);
+  }
+
+  handleCancelLeaveModTeamClick(i: Sidebar) {
+    i.state.showConfirmLeaveModTeam = false;
+    i.setState(i.state);
+  }
+
   handleUnsubscribe(communityId: number) {
     event.preventDefault();
     let form: FollowCommunityForm = {