mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-25 22:01:13 +00:00
feat: Move Badges to common component
This commit is contained in:
Jay Sitter
parent
afcffce572
commit
f8f1f49250
3 changed files with 124 additions and 194 deletions
113
src/shared/components/common/badges.tsx
Normal file
113
src/shared/components/common/badges.tsx
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
import { Link } from "inferno-router";
|
||||
import {
|
||||
CommunityAggregates,
|
||||
CommunityView,
|
||||
SiteAggregates,
|
||||
} from "lemmy-js-client";
|
||||
import { i18n } from "../../i18next";
|
||||
import { numToSI } from "../../utils";
|
||||
|
||||
interface BadgesProps {
|
||||
counts: CommunityAggregates | SiteAggregates;
|
||||
online: number;
|
||||
community_view?: CommunityView;
|
||||
}
|
||||
|
||||
const isCommunityAggregates = (
|
||||
counts: CommunityAggregates | SiteAggregates
|
||||
): counts is CommunityAggregates => {
|
||||
return "subscribers" in counts;
|
||||
};
|
||||
|
||||
export const Badges = ({ counts, community_view, online }: BadgesProps) => {
|
||||
return (
|
||||
<ul className="my-1 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>
|
||||
{isCommunityAggregates(counts) && (
|
||||
<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/${community_view ?? community_view?.community.id}`}
|
||||
>
|
||||
{i18n.t("modlog")}
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
|
@ -24,8 +24,8 @@ import {
|
|||
hostname,
|
||||
mdToHtml,
|
||||
myAuthRequired,
|
||||
numToSI,
|
||||
} 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";
|
||||
|
|
@ -158,7 +158,11 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
<div className="card border-secondary mb-3">
|
||||
<div className="card-body">
|
||||
{this.description()}
|
||||
{this.badges()}
|
||||
<Badges
|
||||
online={this.props.online}
|
||||
community_view={this.props.community_view}
|
||||
counts={this.props.community_view.counts}
|
||||
/>
|
||||
{this.mods()}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -232,99 +236,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">
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
@ -72,7 +72,9 @@ 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 online={this.props.online ?? 1} counts={this.props.counts} />
|
||||
)}
|
||||
{this.props.admins && this.admins(this.props.admins)}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -97,102 +99,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 });
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue