-import { Component, linkEvent } from 'inferno';
-import { Link } from 'inferno-router';
+import { Component, linkEvent } from "inferno";
+import { Link } from "inferno-router";
import {
CommunityView,
CommunityModeratorView,
RemoveCommunity,
UserViewSafe,
AddModToCommunity,
- Category,
-} 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';
+} from "lemmy-js-client";
+import { WebSocketService, UserService } from "../services";
+import { mdToHtml, getUnixTime, wsClient, authField } from "../utils";
+import { CommunityForm } from "./community-form";
+import { UserListing } from "./user-listing";
+import { CommunityLink } from "./community-link";
+import { BannerIconHeader } from "./banner-icon-header";
+import { Icon } from "./icon";
+import { i18n } from "../i18next";
interface SidebarProps {
community_view: CommunityView;
- categories: Category[];
moderators: CommunityModeratorView[];
admins: UserViewSafe[];
online: number;
this.sidebar()
) : (
<CommunityForm
- categories={this.props.categories}
community_view={this.props.community_view}
onEdit={this.handleEditCommunity}
onCancel={this.handleEditCancel}
href="#"
onClick={linkEvent(community.id, this.handleUnsubscribe)}
>
- <svg class="text-success mr-1 icon icon-inline">
- <use xlinkHref="#icon-check"></use>
- </svg>
- {i18n.t('joined')}
+ <Icon icon="check" classes="icon-inline text-success mr-1" />
+ {i18n.t("joined")}
</a>
)}
{community.removed && (
<small className="mr-2 text-muted font-italic">
- {i18n.t('removed')}
+ {i18n.t("removed")}
</small>
)}
{community.deleted && (
<small className="mr-2 text-muted font-italic">
- {i18n.t('deleted')}
+ {i18n.t("deleted")}
</small>
)}
{community.nsfw && (
<small className="mr-2 text-muted font-italic">
- {i18n.t('nsfw')}
+ {i18n.t("nsfw")}
</small>
)}
</h5>
badges() {
let community_view = this.props.community_view;
+ let counts = community_view.counts;
return (
<ul class="my-1 list-inline">
<li className="list-inline-item badge badge-secondary">
- {i18n.t('number_online', { count: this.props.online })}
+ {i18n.t("number_online", { count: this.props.online })}
+ </li>
+ <li
+ className="list-inline-item badge badge-secondary pointer"
+ data-tippy-content={`${i18n.t("number_of_users", {
+ count: counts.users_active_day,
+ })} ${i18n.t("active_in_the_last")} ${i18n.t("day")}`}
+ >
+ {i18n.t("number_of_users", {
+ count: counts.users_active_day,
+ })}{" "}
+ / {i18n.t("day")}
+ </li>
+ <li
+ className="list-inline-item badge badge-secondary pointer"
+ data-tippy-content={`${i18n.t("number_of_users", {
+ count: counts.users_active_week,
+ })} ${i18n.t("active_in_the_last")} ${i18n.t("week")}`}
+ >
+ {i18n.t("number_of_users", {
+ count: counts.users_active_week,
+ })}{" "}
+ / {i18n.t("week")}
+ </li>
+ <li
+ className="list-inline-item badge badge-secondary pointer"
+ data-tippy-content={`${i18n.t("number_of_users", {
+ count: counts.users_active_month,
+ })} ${i18n.t("active_in_the_last")} ${i18n.t("month")}`}
+ >
+ {i18n.t("number_of_users", {
+ count: counts.users_active_month,
+ })}{" "}
+ / {i18n.t("month")}
+ </li>
+ <li
+ className="list-inline-item badge badge-secondary pointer"
+ data-tippy-content={`${i18n.t("number_of_users", {
+ count: counts.users_active_half_year,
+ })} ${i18n.t("active_in_the_last")} ${i18n.t("number_of_months", {
+ count: 6,
+ })}`}
+ >
+ {i18n.t("number_of_users", {
+ count: counts.users_active_half_year,
+ })}{" "}
+ / {i18n.t("number_of_months", { count: 6 })}
</li>
<li className="list-inline-item badge badge-secondary">
- {i18n.t('number_of_subscribers', {
- count: community_view.counts.subscribers,
+ {i18n.t("number_of_subscribers", {
+ count: counts.subscribers,
})}
</li>
<li className="list-inline-item badge badge-secondary">
- {i18n.t('number_of_posts', {
- count: community_view.counts.posts,
+ {i18n.t("number_of_posts", {
+ count: counts.posts,
})}
</li>
<li className="list-inline-item badge badge-secondary">
- {i18n.t('number_of_comments', {
- count: community_view.counts.comments,
+ {i18n.t("number_of_comments", {
+ count: counts.comments,
})}
</li>
- <li className="list-inline-item">
- <Link className="badge badge-secondary" to="/communities">
- {community_view.category.name}
- </Link>
- </li>
<li className="list-inline-item">
<Link
className="badge badge-secondary"
to={`/modlog/community/${this.props.community_view.community.id}`}
>
- {i18n.t('modlog')}
+ {i18n.t("modlog")}
</Link>
</li>
</ul>
mods() {
return (
<ul class="list-inline small">
- <li class="list-inline-item">{i18n.t('mods')}: </li>
+ <li class="list-inline-item">{i18n.t("mods")}: </li>
{this.props.moderators.map(mod => (
<li class="list-inline-item">
<UserListing user={mod.moderator} />
<Link
className={`btn btn-secondary btn-block mb-2 ${
community_view.community.deleted || community_view.community.removed
- ? 'no-click'
- : ''
+ ? "no-click"
+ : ""
}`}
to={`/create_post?community_id=${community_view.community.id}`}
>
- {i18n.t('create_a_post')}
+ {i18n.t("create_a_post")}
</Link>
)
);
this.handleSubscribe
)}
>
- {i18n.t('subscribe')}
+ {i18n.t("subscribe")}
</a>
)}
</div>
<>
<li className="list-inline-item-action">
<span
+ role="button"
class="pointer"
onClick={linkEvent(this, this.handleEditClick)}
- data-tippy-content={i18n.t('edit')}
+ data-tippy-content={i18n.t("edit")}
+ aria-label={i18n.t("edit")}
>
- <svg class="icon icon-inline">
- <use xlinkHref="#icon-edit"></use>
- </svg>
+ <Icon icon="edit" classes="icon-inline" />
</span>
</li>
{!this.amCreator &&
<li className="list-inline-item-action">
<span
class="pointer"
+ role="button"
onClick={linkEvent(
this,
this.handleShowConfirmLeaveModTeamClick
)}
>
- {i18n.t('leave_mod_team')}
+ {i18n.t("leave_mod_team")}
</span>
</li>
) : (
<>
<li className="list-inline-item-action">
- {i18n.t('are_you_sure')}
+ {i18n.t("are_you_sure")}
</li>
<li className="list-inline-item-action">
<span
class="pointer"
+ role="button"
onClick={linkEvent(this, this.handleLeaveModTeamClick)}
>
- {i18n.t('yes')}
+ {i18n.t("yes")}
</span>
</li>
<li className="list-inline-item-action">
<span
class="pointer"
+ role="button"
onClick={linkEvent(
this,
this.handleCancelLeaveModTeamClick
)}
>
- {i18n.t('no')}
+ {i18n.t("no")}
</span>
</li>
</>
onClick={linkEvent(this, this.handleDeleteClick)}
data-tippy-content={
!community_view.community.deleted
- ? i18n.t('delete')
- : i18n.t('restore')
+ ? i18n.t("delete")
+ : i18n.t("restore")
+ }
+ aria-label={
+ !community_view.community.deleted
+ ? i18n.t("delete")
+ : i18n.t("restore")
}
>
- <svg
- class={`icon icon-inline ${
- community_view.community.deleted && 'text-danger'
+ <Icon
+ icon="trash"
+ classes={`icon-inline ${
+ community_view.community.deleted && "text-danger"
}`}
- >
- <use xlinkHref="#icon-trash"></use>
- </svg>
+ />
</span>
</li>
)}
{!this.props.community_view.community.removed ? (
<span
class="pointer"
+ role="button"
onClick={linkEvent(this, this.handleModRemoveShow)}
>
- {i18n.t('remove')}
+ {i18n.t("remove")}
</span>
) : (
<span
class="pointer"
+ role="button"
onClick={linkEvent(this, this.handleModRemoveSubmit)}
>
- {i18n.t('restore')}
+ {i18n.t("restore")}
</span>
)}
</li>
<form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
<div class="form-group row">
<label class="col-form-label" htmlFor="remove-reason">
- {i18n.t('reason')}
+ {i18n.t("reason")}
</label>
<input
type="text"
id="remove-reason"
class="form-control mr-2"
- placeholder={i18n.t('optional')}
+ placeholder={i18n.t("optional")}
value={this.state.removeReason}
onInput={linkEvent(this, this.handleModRemoveReasonChange)}
/>
{/* </div> */}
<div class="form-group row">
<button type="submit" class="btn btn-secondary">
- {i18n.t('remove_community')}
+ {i18n.t("remove_community")}
</button>
</div>
</form>
handleDeleteClick(i: Sidebar, event: any) {
event.preventDefault();
let deleteForm: DeleteCommunity = {
- edit_id: i.props.community_view.community.id,
+ community_id: i.props.community_view.community.id,
deleted: !i.props.community_view.community.deleted,
- auth: UserService.Instance.authField(),
+ auth: authField(),
};
- WebSocketService.Instance.client.deleteCommunity(deleteForm);
+ WebSocketService.Instance.send(wsClient.deleteCommunity(deleteForm));
}
handleShowConfirmLeaveModTeamClick(i: Sidebar) {
user_id: UserService.Instance.user.id,
community_id: i.props.community_view.community.id,
added: false,
- auth: UserService.Instance.authField(),
+ auth: authField(),
};
- WebSocketService.Instance.client.addModToCommunity(form);
+ WebSocketService.Instance.send(wsClient.addModToCommunity(form));
i.state.showConfirmLeaveModTeam = false;
i.setState(i.state);
}
let form: FollowCommunity = {
community_id: communityId,
follow: false,
- auth: UserService.Instance.authField(),
+ auth: authField(),
};
- WebSocketService.Instance.client.followCommunity(form);
+ WebSocketService.Instance.send(wsClient.followCommunity(form));
}
handleSubscribe(communityId: number, event: any) {
let form: FollowCommunity = {
community_id: communityId,
follow: true,
- auth: UserService.Instance.authField(),
+ auth: authField(),
};
- WebSocketService.Instance.client.followCommunity(form);
+ WebSocketService.Instance.send(wsClient.followCommunity(form));
}
private get amCreator(): boolean {
handleModRemoveSubmit(i: Sidebar, event: any) {
event.preventDefault();
let removeForm: RemoveCommunity = {
- edit_id: i.props.community_view.community.id,
+ community_id: i.props.community_view.community.id,
removed: !i.props.community_view.community.removed,
reason: i.state.removeReason,
expires: getUnixTime(i.state.removeExpires),
- auth: UserService.Instance.authField(),
+ auth: authField(),
};
- WebSocketService.Instance.client.removeCommunity(removeForm);
+ WebSocketService.Instance.send(wsClient.removeCommunity(removeForm));
i.state.showRemoveDialog = false;
i.setState(i.state);
projects / lemmy-ui.git / blobdiff