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 {
admins: Array<UserView>;
online: number;
enableNsfw: boolean;
+ showIcon?: boolean;
}
interface SidebarState {
showRemoveDialog: boolean;
removeReason: string;
removeExpires: string;
+ showConfirmLeaveModTeam: boolean;
}
export class Sidebar extends Component<SidebarProps, SidebarState> {
showRemoveDialog: false,
removeReason: null,
removeExpires: null,
+ showConfirmLeaveModTeam: false,
};
constructor(props: any, context: any) {
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>
);
}
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,
<UserListing
user={{
name: mod.user_name,
+ preferred_username: mod.user_preferred_username,
avatar: mod.avatar,
id: mod.user_id,
local: mod.user_local,
</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
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 = {