src/shared/components/home/site-sidebar.tsx

   1 import { Component, linkEvent } from "inferno";
   2 import { Link } from "inferno-router";
   3 import { PersonViewSafe, Site, SiteAggregates } from "lemmy-js-client";
   4 import { i18n } from "../../i18next";
   5 import { UserService } from "../../services";
   6 import { mdToHtml, numToSI } from "../../utils";
   7 import { BannerIconHeader } from "../common/banner-icon-header";
   8 import { Icon } from "../common/icon";
   9 import { PersonListing } from "../person/person-listing";
  10 import { SiteForm } from "./site-form";
  11
  12 interface SiteSidebarProps {
  13   site: Site;
  14   counts?: SiteAggregates;
  15   admins?: PersonViewSafe[];
  16   online?: number;
  17 }
  18
  19 interface SiteSidebarState {
  20   collapsed: boolean;
  21   showEdit: boolean;
  22 }
  23
  24 export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
  25   private emptyState: SiteSidebarState = {
  26     collapsed: false,
  27     showEdit: false,
  28   };
  29
  30   constructor(props: any, context: any) {
  31     super(props, context);
  32     this.state = this.emptyState;
  33     this.handleEditCancel = this.handleEditCancel.bind(this);
  34     this.handleEditSite = this.handleEditSite.bind(this);
  35   }
  36
  37   render() {
  38     let site = this.props.site;
  39     return (
  40       <div class="card border-secondary mb-3">
  41         <div class="card-body">
  42           {!this.state.showEdit ? (
  43             <div>
  44               <div class="mb-2">
  45                 {this.siteName()}
  46                 {this.props.admins && this.adminButtons()}
  47               </div>
  48               {!this.state.collapsed && (
  49                 <>
  50                   <BannerIconHeader banner={site.banner} />
  51                   {this.siteInfo()}
  52                 </>
  53               )}
  54             </div>
  55           ) : (
  56             <SiteForm
  57               site={site}
  58               onEdit={this.handleEditSite}
  59               onCancel={this.handleEditCancel}
  60             />
  61           )}
  62         </div>
  63       </div>
  64     );
  65   }
  66
  67   siteName() {
  68     let site = this.props.site;
  69     return (
  70       site.name && (
  71         <h5 class="mb-0 d-inline">
  72           {site.name}
  73           <button
  74             class="btn btn-sm text-muted"
  75             onClick={linkEvent(this, this.handleCollapseSidebar)}
  76             aria-label={i18n.t("collapse")}
  77             data-tippy-content={i18n.t("collapse")}
  78           >
  79             {this.state.collapsed ? (
  80               <Icon icon="plus-square" classes="icon-inline" />
  81             ) : (
  82               <Icon icon="minus-square" classes="icon-inline" />
  83             )}
  84           </button>
  85         </h5>
  86       )
  87     );
  88   }
  89
  90   siteInfo() {
  91     let site = this.props.site;
  92     return (
  93       <div>
  94         {site.description && <h6>{site.description}</h6>}
  95         {site.sidebar && this.siteSidebar()}
  96         {this.props.counts && this.badges()}
  97         {this.props.admins && this.admins()}
  98       </div>
  99     );
 100   }
 101
 102   adminButtons() {
 103     return (
 104       this.canAdmin && (
 105         <ul class="list-inline mb-1 text-muted font-weight-bold">
 106           <li className="list-inline-item-action">
 107             <button
 108               class="btn btn-link d-inline-block text-muted"
 109               onClick={linkEvent(this, this.handleEditClick)}
 110               aria-label={i18n.t("edit")}
 111               data-tippy-content={i18n.t("edit")}
 112             >
 113               <Icon icon="edit" classes="icon-inline" />
 114             </button>
 115           </li>
 116         </ul>
 117       )
 118     );
 119   }
 120
 121   siteSidebar() {
 122     return (
 123       <div
 124         className="md-div"
 125         dangerouslySetInnerHTML={mdToHtml(this.props.site.sidebar)}
 126       />
 127     );
 128   }
 129
 130   admins() {
 131     return (
 132       <ul class="mt-1 list-inline small mb-0">
 133         <li class="list-inline-item">{i18n.t("admins")}:</li>
 134         {this.props.admins?.map(av => (
 135           <li class="list-inline-item">
 136             <PersonListing person={av.person} />
 137           </li>
 138         ))}
 139       </ul>
 140     );
 141   }
 142
 143   badges() {
 144     let counts = this.props.counts;
 145     let online = this.props.online;
 146     return (
 147       <ul class="my-2 list-inline">
 148         <li className="list-inline-item badge badge-secondary">
 149           {i18n.t("number_online", {
 150             count: online,
 151             formattedCount: numToSI(online),
 152           })}
 153         </li>
 154         <li
 155           className="list-inline-item badge badge-secondary pointer"
 156           data-tippy-content={i18n.t("active_users_in_the_last_day", {
 157             count: counts.users_active_day,
 158             formattedCount: numToSI(counts.users_active_day),
 159           })}
 160         >
 161           {i18n.t("number_of_users", {
 162             count: counts.users_active_day,
 163             formattedCount: numToSI(counts.users_active_day),
 164           })}{" "}
 165           / {i18n.t("day")}
 166         </li>
 167         <li
 168           className="list-inline-item badge badge-secondary pointer"
 169           data-tippy-content={i18n.t("active_users_in_the_last_week", {
 170             count: counts.users_active_week,
 171             formattedCount: counts.users_active_week,
 172           })}
 173         >
 174           {i18n.t("number_of_users", {
 175             count: counts.users_active_week,
 176             formattedCount: numToSI(counts.users_active_week),
 177           })}{" "}
 178           / {i18n.t("week")}
 179         </li>
 180         <li
 181           className="list-inline-item badge badge-secondary pointer"
 182           data-tippy-content={i18n.t("active_users_in_the_last_month", {
 183             count: counts.users_active_month,
 184             formattedCount: counts.users_active_month,
 185           })}
 186         >
 187           {i18n.t("number_of_users", {
 188             count: counts.users_active_month,
 189             formattedCount: numToSI(counts.users_active_month),
 190           })}{" "}
 191           / {i18n.t("month")}
 192         </li>
 193         <li
 194           className="list-inline-item badge badge-secondary pointer"
 195           data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
 196             count: counts.users_active_half_year,
 197             formattedCount: counts.users_active_half_year,
 198           })}
 199         >
 200           {i18n.t("number_of_users", {
 201             count: counts.users_active_half_year,
 202             formattedCount: numToSI(counts.users_active_half_year),
 203           })}{" "}
 204           / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
 205         </li>
 206         <li className="list-inline-item badge badge-secondary">
 207           {i18n.t("number_of_users", {
 208             count: counts.users,
 209             formattedCount: numToSI(counts.users),
 210           })}
 211         </li>
 212         <li className="list-inline-item badge badge-secondary">
 213           {i18n.t("number_of_communities", {
 214             count: counts.communities,
 215             formattedCount: numToSI(counts.communities),
 216           })}
 217         </li>
 218         <li className="list-inline-item badge badge-secondary">
 219           {i18n.t("number_of_posts", {
 220             count: counts.posts,
 221             formattedCount: numToSI(counts.posts),
 222           })}
 223         </li>
 224         <li className="list-inline-item badge badge-secondary">
 225           {i18n.t("number_of_comments", {
 226             count: counts.comments,
 227             formattedCount: numToSI(counts.comments),
 228           })}
 229         </li>
 230         <li className="list-inline-item">
 231           <Link className="badge badge-primary" to="/modlog">
 232             {i18n.t("modlog")}
 233           </Link>
 234         </li>
 235       </ul>
 236     );
 237   }
 238
 239   get canAdmin(): boolean {
 240     return (
 241       UserService.Instance.myUserInfo &&
 242       this.props.admins
 243         .map(a => a.person.id)
 244         .includes(UserService.Instance.myUserInfo.local_user_view.person.id)
 245     );
 246   }
 247
 248   handleCollapseSidebar(i: SiteSidebar) {
 249     i.state.collapsed = !i.state.collapsed;
 250     i.setState(i.state);
 251   }
 252
 253   handleEditClick(i: SiteSidebar) {
 254     i.state.showEdit = true;
 255     i.setState(i.state);
 256   }
 257
 258   handleEditSite() {
 259     this.state.showEdit = false;
 260     this.setState(this.state);
 261   }
 262
 263   handleEditCancel() {
 264     this.state.showEdit = false;
 265     this.setState(this.state);
 266   }
 267 }