src/shared/utils.ts

   1 import emojiShortName from "emoji-short-name";
   2 import {
   3   BlockCommunityResponse,
   4   BlockPersonResponse,
   5   CommentReportView,
   6   CommentView,
   7   CommunityBlockView,
   8   CommunityView,
   9   GetSiteMetadata,
  10   GetSiteResponse,
  11   LemmyHttp,
  12   LemmyWebsocket,
  13   ListingType,
  14   MyUserInfo,
  15   PersonBlockView,
  16   PersonSafe,
  17   PersonViewSafe,
  18   PostReportView,
  19   PostView,
  20   PrivateMessageView,
  21   RegistrationApplicationView,
  22   Search,
  23   SearchType,
  24   SortType,
  25   UserOperation,
  26   WebSocketJsonResponse,
  27   WebSocketResponse,
  28 } from "lemmy-js-client";
  29 import markdown_it from "markdown-it";
  30 import markdown_it_container from "markdown-it-container";
  31 import markdown_it_footnote from "markdown-it-footnote";
  32 import markdown_it_html5_embed from "markdown-it-html5-embed";
  33 import markdown_it_sub from "markdown-it-sub";
  34 import markdown_it_sup from "markdown-it-sup";
  35 import moment from "moment";
  36 import { Subscription } from "rxjs";
  37 import { delay, retryWhen, take } from "rxjs/operators";
  38 import tippy from "tippy.js";
  39 import Toastify from "toastify-js";
  40 import { httpBase } from "./env";
  41 import { i18n, languages } from "./i18next";
  42 import {
  43   CommentNode as CommentNodeI,
  44   CommentSortType,
  45   DataType,
  46   IsoData,
  47 } from "./interfaces";
  48 import { UserService, WebSocketService } from "./services";
  49
  50 var Tribute: any;
  51 if (isBrowser()) {
  52   Tribute = require("tributejs");
  53 }
  54
  55 export const wsClient = new LemmyWebsocket();
  56
  57 export const favIconUrl = "/static/assets/icons/favicon.svg";
  58 export const favIconPngUrl = "/static/assets/icons/apple-touch-icon.png";
  59 // TODO
  60 // export const defaultFavIcon = `${window.location.protocol}//${window.location.host}${favIconPngUrl}`;
  61 export const repoUrl = "https://github.com/LemmyNet";
  62 export const joinLemmyUrl = "https://join-lemmy.org";
  63 export const donateLemmyUrl = `${joinLemmyUrl}/donate`;
  64 export const docsUrl = `${joinLemmyUrl}/docs/en/index.html`;
  65 export const helpGuideUrl = `${joinLemmyUrl}/docs/en/about/guide.html`; // TODO find a way to redirect to the non-en folder
  66 export const markdownHelpUrl = `${helpGuideUrl}#using-markdown`;
  67 export const sortingHelpUrl = `${helpGuideUrl}#sorting`;
  68 export const archiveTodayUrl = "https://archive.today";
  69 export const ghostArchiveUrl = "https://ghostarchive.org";
  70 export const webArchiveUrl = "https://web.archive.org";
  71 export const elementUrl = "https://element.io";
  72
  73 export const postRefetchSeconds: number = 60 * 1000;
  74 export const fetchLimit = 20;
  75 export const mentionDropdownFetchLimit = 10;
  76
  77 export const relTags = "noopener nofollow";
  78
  79 const DEFAULT_ALPHABET =
  80   "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  81
  82 function getRandomCharFromAlphabet(alphabet: string): string {
  83   return alphabet.charAt(Math.floor(Math.random() * alphabet.length));
  84 }
  85
  86 export function randomStr(
  87   idDesiredLength = 20,
  88   alphabet = DEFAULT_ALPHABET
  89 ): string {
  90   /**
  91    * Create n-long array and map it to random chars from given alphabet.
  92    * Then join individual chars as string
  93    */
  94   return Array.from({ length: idDesiredLength })
  95     .map(() => {
  96       return getRandomCharFromAlphabet(alphabet);
  97     })
  98     .join("");
  99 }
 100
 101 export function wsJsonToRes<ResponseType>(
 102   msg: WebSocketJsonResponse<ResponseType>
 103 ): WebSocketResponse<ResponseType> {
 104   return {
 105     op: wsUserOp(msg),
 106     data: msg.data,
 107   };
 108 }
 109
 110 export function wsUserOp(msg: any): UserOperation {
 111   let opStr: string = msg.op;
 112   return UserOperation[opStr];
 113 }
 114
 115 export const md = new markdown_it({
 116   html: true,
 117   linkify: true,
 118   typographer: true,
 119 })
 120   .use(markdown_it_sub)
 121   .use(markdown_it_sup)
 122   .use(markdown_it_footnote)
 123   .use(markdown_it_html5_embed, {
 124     html5embed: {
 125       useImageSyntax: true, // Enables video/audio embed with ![]() syntax (default)
 126       attributes: {
 127         audio: 'controls preload="metadata"',
 128         video:
 129           'width="100%" max-height="100%" controls loop preload="metadata"',
 130       },
 131     },
 132   })
 133   .use(markdown_it_container, "spoiler", {
 134     validate: function (params: any) {
 135       return params.trim().match(/^spoiler\s+(.*)$/);
 136     },
 137
 138     render: function (tokens: any, idx: any) {
 139       var m = tokens[idx].info.trim().match(/^spoiler\s+(.*)$/);
 140
 141       if (tokens[idx].nesting === 1) {
 142         // opening tag
 143         return `<details><summary> ${md.utils.escapeHtml(m[1])} </summary>\n`;
 144       } else {
 145         // closing tag
 146         return "</details>\n";
 147       }
 148     },
 149   });
 150
 151 export function hotRankComment(comment_view: CommentView): number {
 152   return hotRank(comment_view.counts.score, comment_view.comment.published);
 153 }
 154
 155 export function hotRankActivePost(post_view: PostView): number {
 156   return hotRank(post_view.counts.score, post_view.counts.newest_comment_time);
 157 }
 158
 159 export function hotRankPost(post_view: PostView): number {
 160   return hotRank(post_view.counts.score, post_view.post.published);
 161 }
 162
 163 export function hotRank(score: number, timeStr: string): number {
 164   // Rank = ScaleFactor * sign(Score) * log(1 + abs(Score)) / (Time + 2)^Gravity
 165   let date: Date = new Date(timeStr + "Z"); // Add Z to convert from UTC date
 166   let now: Date = new Date();
 167   let hoursElapsed: number = (now.getTime() - date.getTime()) / 36e5;
 168
 169   let rank =
 170     (10000 * Math.log10(Math.max(1, 3 + score))) /
 171     Math.pow(hoursElapsed + 2, 1.8);
 172
 173   // console.log(`Comment: ${comment.content}\nRank: ${rank}\nScore: ${comment.score}\nHours: ${hoursElapsed}`);
 174
 175   return rank;
 176 }
 177
 178 export function mdToHtml(text: string) {
 179   return { __html: md.render(text) };
 180 }
 181
 182 export function getUnixTime(text: string): number {
 183   return text ? new Date(text).getTime() / 1000 : undefined;
 184 }
 185
 186 export function futureDaysToUnixTime(days: number): number {
 187   return days
 188     ? Math.trunc(
 189         new Date(Date.now() + 1000 * 60 * 60 * 24 * days).getTime() / 1000
 190       )
 191     : undefined;
 192 }
 193
 194 export function canMod(
 195   myUserInfo: MyUserInfo,
 196   modIds: number[],
 197   creator_id: number,
 198   onSelf = false
 199 ): boolean {
 200   // You can do moderator actions only on the mods added after you.
 201   if (myUserInfo) {
 202     let yourIndex = modIds.findIndex(
 203       id => id == myUserInfo.local_user_view.person.id
 204     );
 205     if (yourIndex == -1) {
 206       return false;
 207     } else {
 208       // onSelf +1 on mod actions not for yourself, IE ban, remove, etc
 209       modIds = modIds.slice(0, yourIndex + (onSelf ? 0 : 1));
 210       return !modIds.includes(creator_id);
 211     }
 212   } else {
 213     return false;
 214   }
 215 }
 216
 217 export function isMod(modIds: number[], creator_id: number): boolean {
 218   return modIds.includes(creator_id);
 219 }
 220
 221 const imageRegex = /(http)?s?:?(\/\/[^"']*\.(?:jpg|jpeg|gif|png|svg|webp))/;
 222 const videoRegex = /(http)?s?:?(\/\/[^"']*\.(?:mp4|webm))/;
 223
 224 export function isImage(url: string) {
 225   return imageRegex.test(url);
 226 }
 227
 228 export function isVideo(url: string) {
 229   return videoRegex.test(url);
 230 }
 231
 232 export function validURL(str: string) {
 233   return !!new URL(str);
 234 }
 235
 236 export function communityRSSUrl(actorId: string, sort: string): string {
 237   let url = new URL(actorId);
 238   return `${url.origin}/feeds${url.pathname}.xml?sort=${sort}`;
 239 }
 240
 241 export function validEmail(email: string) {
 242   let re =
 243     /^(([^\s"(),.:;<>@[\\\]]+(\.[^\s"(),.:;<>@[\\\]]+)*)|(".+"))@((\[(?:\d{1,3}\.){3}\d{1,3}])|(([\dA-Za-z\-]+\.)+[A-Za-z]{2,}))$/;
 244   return re.test(String(email).toLowerCase());
 245 }
 246
 247 export function capitalizeFirstLetter(str: string): string {
 248   return str.charAt(0).toUpperCase() + str.slice(1);
 249 }
 250
 251 export function routeSortTypeToEnum(sort: string): SortType {
 252   return SortType[sort];
 253 }
 254
 255 export function listingTypeFromNum(type_: number): ListingType {
 256   return Object.values(ListingType)[type_];
 257 }
 258
 259 export function sortTypeFromNum(type_: number): SortType {
 260   return Object.values(SortType)[type_];
 261 }
 262
 263 export function routeListingTypeToEnum(type: string): ListingType {
 264   return ListingType[type];
 265 }
 266
 267 export function routeDataTypeToEnum(type: string): DataType {
 268   return DataType[capitalizeFirstLetter(type)];
 269 }
 270
 271 export function routeSearchTypeToEnum(type: string): SearchType {
 272   return SearchType[type];
 273 }
 274
 275 export async function getSiteMetadata(url: string) {
 276   let form: GetSiteMetadata = {
 277     url,
 278   };
 279   let client = new LemmyHttp(httpBase);
 280   return client.getSiteMetadata(form);
 281 }
 282
 283 export function debounce(func: any, wait = 1000, immediate = false) {
 284   // 'private' variable for instance
 285   // The returned function will be able to reference this due to closure.
 286   // Each call to the returned function will share this common timer.
 287   let timeout: any;
 288
 289   // Calling debounce returns a new anonymous function
 290   return function () {
 291     // reference the context and args for the setTimeout function
 292     var args = arguments;
 293
 294     // Should the function be called now? If immediate is true
 295     //   and not already in a timeout then the answer is: Yes
 296     var callNow = immediate && !timeout;
 297
 298     // This is the basic debounce behaviour where you can call this
 299     //   function several times, but it will only execute once
 300     //   [before or after imposing a delay].
 301     //   Each time the returned function is called, the timer starts over.
 302     clearTimeout(timeout);
 303
 304     // Set the new timeout
 305     timeout = setTimeout(function () {
 306       // Inside the timeout function, clear the timeout variable
 307       // which will let the next execution run when in 'immediate' mode
 308       timeout = null;
 309
 310       // Check if the function already ran with the immediate flag
 311       if (!immediate) {
 312         // Call the original function with apply
 313         // apply lets you define the 'this' object as well as the arguments
 314         //    (both captured before setTimeout)
 315         func.apply(this, args);
 316       }
 317     }, wait);
 318
 319     // Immediate mode and no wait timer? Execute the function..
 320     if (callNow) func.apply(this, args);
 321   };
 322 }
 323
 324 export function getLanguages(override?: string): string[] {
 325   let myUserInfo = UserService.Instance.myUserInfo;
 326   let lang =
 327     override ||
 328     (myUserInfo?.local_user_view.local_user.lang
 329       ? myUserInfo.local_user_view.local_user.lang
 330       : "browser");
 331
 332   if (lang == "browser" && isBrowser()) {
 333     return getBrowserLanguages();
 334   } else {
 335     return [lang];
 336   }
 337 }
 338
 339 function getBrowserLanguages(): string[] {
 340   // Intersect lemmy's langs, with the browser langs
 341   let langs = languages ? languages.map(l => l.code) : ["en"];
 342
 343   // NOTE, mobile browsers seem to be missing this list, so append en
 344   let allowedLangs = navigator.languages
 345     .concat("en")
 346     .filter(v => langs.includes(v));
 347   return allowedLangs;
 348 }
 349
 350 export async function fetchThemeList(): Promise<string[]> {
 351   return fetch("/css/themelist").then(res => res.json());
 352 }
 353
 354 export async function setTheme(theme: string, forceReload = false) {
 355   if (!isBrowser()) {
 356     return;
 357   }
 358   if (theme === "browser" && !forceReload) {
 359     return;
 360   }
 361   // This is only run on a force reload
 362   if (theme == "browser") {
 363     theme = "darkly";
 364   }
 365
 366   let themeList = await fetchThemeList();
 367
 368   // Unload all the other themes
 369   for (var i = 0; i < themeList.length; i++) {
 370     let styleSheet = document.getElementById(themeList[i]);
 371     if (styleSheet) {
 372       styleSheet.setAttribute("disabled", "disabled");
 373     }
 374   }
 375
 376   document
 377     .getElementById("default-light")
 378     ?.setAttribute("disabled", "disabled");
 379   document.getElementById("default-dark")?.setAttribute("disabled", "disabled");
 380
 381   // Load the theme dynamically
 382   let cssLoc = `/css/themes/${theme}.css`;
 383
 384   loadCss(theme, cssLoc);
 385   document.getElementById(theme).removeAttribute("disabled");
 386 }
 387
 388 export function loadCss(id: string, loc: string) {
 389   if (!document.getElementById(id)) {
 390     var head = document.getElementsByTagName("head")[0];
 391     var link = document.createElement("link");
 392     link.id = id;
 393     link.rel = "stylesheet";
 394     link.type = "text/css";
 395     link.href = loc;
 396     link.media = "all";
 397     head.appendChild(link);
 398   }
 399 }
 400
 401 export function objectFlip(obj: any) {
 402   const ret = {};
 403   Object.keys(obj).forEach(key => {
 404     ret[obj[key]] = key;
 405   });
 406   return ret;
 407 }
 408
 409 export function showAvatars(): boolean {
 410   return (
 411     UserService.Instance.myUserInfo?.local_user_view.local_user.show_avatars ||
 412     !UserService.Instance.myUserInfo
 413   );
 414 }
 415
 416 export function showScores(): boolean {
 417   return (
 418     UserService.Instance.myUserInfo?.local_user_view.local_user.show_scores ||
 419     !UserService.Instance.myUserInfo
 420   );
 421 }
 422
 423 export function isCakeDay(published: string): boolean {
 424   // moment(undefined) or moment.utc(undefined) returns the current date/time
 425   // moment(null) or moment.utc(null) returns null
 426   const createDate = moment.utc(published || null).local();
 427   const currentDate = moment(new Date());
 428
 429   return (
 430     createDate.date() === currentDate.date() &&
 431     createDate.month() === currentDate.month() &&
 432     createDate.year() !== currentDate.year()
 433   );
 434 }
 435
 436 export function toast(text: string, background = "success") {
 437   if (isBrowser()) {
 438     let backgroundColor = `var(--${background})`;
 439     Toastify({
 440       text: text,
 441       backgroundColor: backgroundColor,
 442       gravity: "bottom",
 443       position: "left",
 444     }).showToast();
 445   }
 446 }
 447
 448 export function pictrsDeleteToast(
 449   clickToDeleteText: string,
 450   deletePictureText: string,
 451   deleteUrl: string
 452 ) {
 453   if (isBrowser()) {
 454     let backgroundColor = `var(--light)`;
 455     let toast = Toastify({
 456       text: clickToDeleteText,
 457       backgroundColor: backgroundColor,
 458       gravity: "top",
 459       position: "right",
 460       duration: 10000,
 461       onClick: () => {
 462         if (toast) {
 463           window.location.replace(deleteUrl);
 464           alert(deletePictureText);
 465           toast.hideToast();
 466         }
 467       },
 468       close: true,
 469     }).showToast();
 470   }
 471 }
 472
 473 interface NotifyInfo {
 474   name: string;
 475   icon?: string;
 476   link: string;
 477   body: string;
 478 }
 479
 480 export function messageToastify(info: NotifyInfo, router: any) {
 481   if (isBrowser()) {
 482     let htmlBody = info.body ? md.render(info.body) : "";
 483     let backgroundColor = `var(--light)`;
 484
 485     let toast = Toastify({
 486       text: `${htmlBody}<br />${info.name}`,
 487       avatar: info.icon ? info.icon : null,
 488       backgroundColor: backgroundColor,
 489       className: "text-dark",
 490       close: true,
 491       gravity: "top",
 492       position: "right",
 493       duration: 5000,
 494       escapeMarkup: false,
 495       onClick: () => {
 496         if (toast) {
 497           toast.hideToast();
 498           router.history.push(info.link);
 499         }
 500       },
 501     }).showToast();
 502   }
 503 }
 504
 505 export function notifyPost(post_view: PostView, router: any) {
 506   let info: NotifyInfo = {
 507     name: post_view.community.name,
 508     icon: post_view.community.icon,
 509     link: `/post/${post_view.post.id}`,
 510     body: post_view.post.name,
 511   };
 512   notify(info, router);
 513 }
 514
 515 export function notifyComment(comment_view: CommentView, router: any) {
 516   let info: NotifyInfo = {
 517     name: comment_view.creator.name,
 518     icon: comment_view.creator.avatar,
 519     link: `/post/${comment_view.post.id}/comment/${comment_view.comment.id}`,
 520     body: comment_view.comment.content,
 521   };
 522   notify(info, router);
 523 }
 524
 525 export function notifyPrivateMessage(pmv: PrivateMessageView, router: any) {
 526   let info: NotifyInfo = {
 527     name: pmv.creator.name,
 528     icon: pmv.creator.avatar,
 529     link: `/inbox`,
 530     body: pmv.private_message.content,
 531   };
 532   notify(info, router);
 533 }
 534
 535 function notify(info: NotifyInfo, router: any) {
 536   messageToastify(info, router);
 537
 538   // TODO absolute nightmare bug, but notifs are currently broken.
 539   // Notification.new will try to do a browser fetch ???
 540
 541   // if (Notification.permission !== "granted") Notification.requestPermission();
 542   // else {
 543   //   var notification = new Notification(info.name, {
 544   //     icon: info.icon,
 545   //     body: info.body,
 546   //   });
 547
 548   //   notification.onclick = (ev: Event): any => {
 549   //     ev.preventDefault();
 550   //     router.history.push(info.link);
 551   //   };
 552   // }
 553 }
 554
 555 export function setupTribute() {
 556   return new Tribute({
 557     noMatchTemplate: function () {
 558       return "";
 559     },
 560     collection: [
 561       // Emojis
 562       {
 563         trigger: ":",
 564         menuItemTemplate: (item: any) => {
 565           let shortName = `:${item.original.key}:`;
 566           return `${item.original.val} ${shortName}`;
 567         },
 568         selectTemplate: (item: any) => {
 569           return `${item.original.val}`;
 570         },
 571         values: Object.entries(emojiShortName).map(e => {
 572           return { key: e[1], val: e[0] };
 573         }),
 574         allowSpaces: false,
 575         autocompleteMode: true,
 576         // TODO
 577         // menuItemLimit: mentionDropdownFetchLimit,
 578         menuShowMinLength: 2,
 579       },
 580       // Persons
 581       {
 582         trigger: "@",
 583         selectTemplate: (item: any) => {
 584           let it: PersonTribute = item.original;
 585           return `[${it.key}](${it.view.person.actor_id})`;
 586         },
 587         values: debounce(async (text: string, cb: any) => {
 588           cb(await personSearch(text));
 589         }),
 590         allowSpaces: false,
 591         autocompleteMode: true,
 592         // TODO
 593         // menuItemLimit: mentionDropdownFetchLimit,
 594         menuShowMinLength: 2,
 595       },
 596
 597       // Communities
 598       {
 599         trigger: "!",
 600         selectTemplate: (item: any) => {
 601           let it: CommunityTribute = item.original;
 602           return `[${it.key}](${it.view.community.actor_id})`;
 603         },
 604         values: debounce(async (text: string, cb: any) => {
 605           cb(await communitySearch(text));
 606         }),
 607         allowSpaces: false,
 608         autocompleteMode: true,
 609         // TODO
 610         // menuItemLimit: mentionDropdownFetchLimit,
 611         menuShowMinLength: 2,
 612       },
 613     ],
 614   });
 615 }
 616
 617 var tippyInstance: any;
 618 if (isBrowser()) {
 619   tippyInstance = tippy("[data-tippy-content]");
 620 }
 621
 622 export function setupTippy() {
 623   if (isBrowser()) {
 624     tippyInstance.forEach((e: any) => e.destroy());
 625     tippyInstance = tippy("[data-tippy-content]", {
 626       delay: [500, 0],
 627       // Display on "long press"
 628       touch: ["hold", 500],
 629     });
 630   }
 631 }
 632
 633 interface PersonTribute {
 634   key: string;
 635   view: PersonViewSafe;
 636 }
 637
 638 async function personSearch(text: string): Promise<PersonTribute[]> {
 639   let users = (await fetchUsers(text)).users;
 640   let persons: PersonTribute[] = users.map(pv => {
 641     let tribute: PersonTribute = {
 642       key: `@${pv.person.name}@${hostname(pv.person.actor_id)}`,
 643       view: pv,
 644     };
 645     return tribute;
 646   });
 647   return persons;
 648 }
 649
 650 interface CommunityTribute {
 651   key: string;
 652   view: CommunityView;
 653 }
 654
 655 async function communitySearch(text: string): Promise<CommunityTribute[]> {
 656   let comms = (await fetchCommunities(text)).communities;
 657   let communities: CommunityTribute[] = comms.map(cv => {
 658     let tribute: CommunityTribute = {
 659       key: `!${cv.community.name}@${hostname(cv.community.actor_id)}`,
 660       view: cv,
 661     };
 662     return tribute;
 663   });
 664   return communities;
 665 }
 666
 667 export function getListingTypeFromProps(props: any): ListingType {
 668   return props.match.params.listing_type
 669     ? routeListingTypeToEnum(props.match.params.listing_type)
 670     : UserService.Instance.myUserInfo
 671     ? Object.values(ListingType)[
 672         UserService.Instance.myUserInfo.local_user_view.local_user
 673           .default_listing_type
 674       ]
 675     : ListingType.Local;
 676 }
 677
 678 export function getListingTypeFromPropsNoDefault(props: any): ListingType {
 679   return props.match.params.listing_type
 680     ? routeListingTypeToEnum(props.match.params.listing_type)
 681     : ListingType.Local;
 682 }
 683
 684 // TODO might need to add a user setting for this too
 685 export function getDataTypeFromProps(props: any): DataType {
 686   return props.match.params.data_type
 687     ? routeDataTypeToEnum(props.match.params.data_type)
 688     : DataType.Post;
 689 }
 690
 691 export function getSortTypeFromProps(props: any): SortType {
 692   return props.match.params.sort
 693     ? routeSortTypeToEnum(props.match.params.sort)
 694     : UserService.Instance.myUserInfo
 695     ? Object.values(SortType)[
 696         UserService.Instance.myUserInfo.local_user_view.local_user
 697           .default_sort_type
 698       ]
 699     : SortType.Active;
 700 }
 701
 702 export function getPageFromProps(props: any): number {
 703   return props.match.params.page ? Number(props.match.params.page) : 1;
 704 }
 705
 706 export function getRecipientIdFromProps(props: any): number {
 707   return props.match.params.recipient_id
 708     ? Number(props.match.params.recipient_id)
 709     : 1;
 710 }
 711
 712 export function getIdFromProps(props: any): number {
 713   return Number(props.match.params.id);
 714 }
 715
 716 export function getCommentIdFromProps(props: any): number {
 717   return Number(props.match.params.comment_id);
 718 }
 719
 720 export function getUsernameFromProps(props: any): string {
 721   return props.match.params.username;
 722 }
 723
 724 export function editCommentRes(data: CommentView, comments: CommentView[]) {
 725   let found = comments.find(c => c.comment.id == data.comment.id);
 726   if (found) {
 727     found.comment.content = data.comment.content;
 728     found.comment.updated = data.comment.updated;
 729     found.comment.removed = data.comment.removed;
 730     found.comment.deleted = data.comment.deleted;
 731     found.counts.upvotes = data.counts.upvotes;
 732     found.counts.downvotes = data.counts.downvotes;
 733     found.counts.score = data.counts.score;
 734   }
 735 }
 736
 737 export function saveCommentRes(data: CommentView, comments: CommentView[]) {
 738   let found = comments.find(c => c.comment.id == data.comment.id);
 739   if (found) {
 740     found.saved = data.saved;
 741   }
 742 }
 743
 744 export function updatePersonBlock(
 745   data: BlockPersonResponse
 746 ): PersonBlockView[] {
 747   if (data.blocked) {
 748     UserService.Instance.myUserInfo.person_blocks.push({
 749       person: UserService.Instance.myUserInfo.local_user_view.person,
 750       target: data.person_view.person,
 751     });
 752     toast(`${i18n.t("blocked")} ${data.person_view.person.name}`);
 753   } else {
 754     UserService.Instance.myUserInfo.person_blocks =
 755       UserService.Instance.myUserInfo.person_blocks.filter(
 756         i => i.target.id != data.person_view.person.id
 757       );
 758     toast(`${i18n.t("unblocked")} ${data.person_view.person.name}`);
 759   }
 760   return UserService.Instance.myUserInfo.person_blocks;
 761 }
 762
 763 export function updateCommunityBlock(
 764   data: BlockCommunityResponse
 765 ): CommunityBlockView[] {
 766   if (data.blocked) {
 767     UserService.Instance.myUserInfo.community_blocks.push({
 768       person: UserService.Instance.myUserInfo.local_user_view.person,
 769       community: data.community_view.community,
 770     });
 771     toast(`${i18n.t("blocked")} ${data.community_view.community.name}`);
 772   } else {
 773     UserService.Instance.myUserInfo.community_blocks =
 774       UserService.Instance.myUserInfo.community_blocks.filter(
 775         i => i.community.id != data.community_view.community.id
 776       );
 777     toast(`${i18n.t("unblocked")} ${data.community_view.community.name}`);
 778   }
 779   return UserService.Instance.myUserInfo.community_blocks;
 780 }
 781
 782 export function createCommentLikeRes(
 783   data: CommentView,
 784   comments: CommentView[]
 785 ) {
 786   let found = comments.find(c => c.comment.id === data.comment.id);
 787   if (found) {
 788     found.counts.score = data.counts.score;
 789     found.counts.upvotes = data.counts.upvotes;
 790     found.counts.downvotes = data.counts.downvotes;
 791     if (data.my_vote !== null) {
 792       found.my_vote = data.my_vote;
 793     }
 794   }
 795 }
 796
 797 export function createPostLikeFindRes(data: PostView, posts: PostView[]) {
 798   let found = posts.find(p => p.post.id == data.post.id);
 799   if (found) {
 800     createPostLikeRes(data, found);
 801   }
 802 }
 803
 804 export function createPostLikeRes(data: PostView, post_view: PostView) {
 805   if (post_view) {
 806     post_view.counts.score = data.counts.score;
 807     post_view.counts.upvotes = data.counts.upvotes;
 808     post_view.counts.downvotes = data.counts.downvotes;
 809     if (data.my_vote !== null) {
 810       post_view.my_vote = data.my_vote;
 811     }
 812   }
 813 }
 814
 815 export function editPostFindRes(data: PostView, posts: PostView[]) {
 816   let found = posts.find(p => p.post.id == data.post.id);
 817   if (found) {
 818     editPostRes(data, found);
 819   }
 820 }
 821
 822 export function editPostRes(data: PostView, post: PostView) {
 823   if (post) {
 824     post.post.url = data.post.url;
 825     post.post.name = data.post.name;
 826     post.post.nsfw = data.post.nsfw;
 827     post.post.deleted = data.post.deleted;
 828     post.post.removed = data.post.removed;
 829     post.post.stickied = data.post.stickied;
 830     post.post.body = data.post.body;
 831     post.post.locked = data.post.locked;
 832     post.saved = data.saved;
 833   }
 834 }
 835
 836 export function updatePostReportRes(
 837   data: PostReportView,
 838   reports: PostReportView[]
 839 ) {
 840   let found = reports.find(p => p.post_report.id == data.post_report.id);
 841   if (found) {
 842     found.post_report = data.post_report;
 843   }
 844 }
 845
 846 export function updateCommentReportRes(
 847   data: CommentReportView,
 848   reports: CommentReportView[]
 849 ) {
 850   let found = reports.find(c => c.comment_report.id == data.comment_report.id);
 851   if (found) {
 852     found.comment_report = data.comment_report;
 853   }
 854 }
 855
 856 export function updateRegistrationApplicationRes(
 857   data: RegistrationApplicationView,
 858   applications: RegistrationApplicationView[]
 859 ) {
 860   let found = applications.find(
 861     ra => ra.registration_application.id == data.registration_application.id
 862   );
 863   if (found) {
 864     found.registration_application = data.registration_application;
 865     found.admin = data.admin;
 866     found.creator_local_user = data.creator_local_user;
 867   }
 868 }
 869
 870 export function commentsToFlatNodes(comments: CommentView[]): CommentNodeI[] {
 871   let nodes: CommentNodeI[] = [];
 872   for (let comment of comments) {
 873     nodes.push({ comment_view: comment });
 874   }
 875   return nodes;
 876 }
 877
 878 function commentSort(tree: CommentNodeI[], sort: CommentSortType) {
 879   // First, put removed and deleted comments at the bottom, then do your other sorts
 880   if (sort == CommentSortType.Top) {
 881     tree.sort(
 882       (a, b) =>
 883         +a.comment_view.comment.removed - +b.comment_view.comment.removed ||
 884         +a.comment_view.comment.deleted - +b.comment_view.comment.deleted ||
 885         b.comment_view.counts.score - a.comment_view.counts.score
 886     );
 887   } else if (sort == CommentSortType.New) {
 888     tree.sort(
 889       (a, b) =>
 890         +a.comment_view.comment.removed - +b.comment_view.comment.removed ||
 891         +a.comment_view.comment.deleted - +b.comment_view.comment.deleted ||
 892         b.comment_view.comment.published.localeCompare(
 893           a.comment_view.comment.published
 894         )
 895     );
 896   } else if (sort == CommentSortType.Old) {
 897     tree.sort(
 898       (a, b) =>
 899         +a.comment_view.comment.removed - +b.comment_view.comment.removed ||
 900         +a.comment_view.comment.deleted - +b.comment_view.comment.deleted ||
 901         a.comment_view.comment.published.localeCompare(
 902           b.comment_view.comment.published
 903         )
 904     );
 905   } else if (sort == CommentSortType.Hot) {
 906     tree.sort(
 907       (a, b) =>
 908         +a.comment_view.comment.removed - +b.comment_view.comment.removed ||
 909         +a.comment_view.comment.deleted - +b.comment_view.comment.deleted ||
 910         hotRankComment(b.comment_view) - hotRankComment(a.comment_view)
 911     );
 912   }
 913
 914   // Go through the children recursively
 915   for (let node of tree) {
 916     if (node.children) {
 917       commentSort(node.children, sort);
 918     }
 919   }
 920 }
 921
 922 export function commentSortSortType(tree: CommentNodeI[], sort: SortType) {
 923   commentSort(tree, convertCommentSortType(sort));
 924 }
 925
 926 function convertCommentSortType(sort: SortType): CommentSortType {
 927   if (
 928     sort == SortType.TopAll ||
 929     sort == SortType.TopDay ||
 930     sort == SortType.TopWeek ||
 931     sort == SortType.TopMonth ||
 932     sort == SortType.TopYear
 933   ) {
 934     return CommentSortType.Top;
 935   } else if (sort == SortType.New) {
 936     return CommentSortType.New;
 937   } else if (sort == SortType.Hot || sort == SortType.Active) {
 938     return CommentSortType.Hot;
 939   } else {
 940     return CommentSortType.Hot;
 941   }
 942 }
 943
 944 export function buildCommentsTree(
 945   comments: CommentView[],
 946   commentSortType: CommentSortType
 947 ): CommentNodeI[] {
 948   let map = new Map<number, CommentNodeI>();
 949   for (let comment_view of comments) {
 950     let node: CommentNodeI = {
 951       comment_view: comment_view,
 952       children: [],
 953     };
 954     map.set(comment_view.comment.id, { ...node });
 955   }
 956   let tree: CommentNodeI[] = [];
 957   for (let comment_view of comments) {
 958     let child = map.get(comment_view.comment.id);
 959     let parent_id = comment_view.comment.parent_id;
 960     if (parent_id) {
 961       let parent = map.get(parent_id);
 962       // Necessary because blocked comment might not exist
 963       if (parent) {
 964         parent.children.push(child);
 965       }
 966     } else {
 967       tree.push(child);
 968     }
 969
 970     setDepth(child);
 971   }
 972
 973   commentSort(tree, commentSortType);
 974
 975   return tree;
 976 }
 977
 978 function setDepth(node: CommentNodeI, i = 0) {
 979   for (let child of node.children) {
 980     child.depth = i;
 981     setDepth(child, i + 1);
 982   }
 983 }
 984
 985 export function insertCommentIntoTree(tree: CommentNodeI[], cv: CommentView) {
 986   // Building a fake node to be used for later
 987   let node: CommentNodeI = {
 988     comment_view: cv,
 989     children: [],
 990     depth: 0,
 991   };
 992
 993   if (cv.comment.parent_id) {
 994     let parentComment = searchCommentTree(tree, cv.comment.parent_id);
 995     if (parentComment) {
 996       node.depth = parentComment.depth + 1;
 997       parentComment.children.unshift(node);
 998     }
 999   } else {
1000     tree.unshift(node);
1001   }
1002 }
1003
1004 export function searchCommentTree(
1005   tree: CommentNodeI[],
1006   id: number
1007 ): CommentNodeI {
1008   for (let node of tree) {
1009     if (node.comment_view.comment.id === id) {
1010       return node;
1011     }
1012
1013     for (const child of node.children) {
1014       const res = searchCommentTree([child], id);
1015
1016       if (res) {
1017         return res;
1018       }
1019     }
1020   }
1021   return null;
1022 }
1023
1024 export const colorList: string[] = [
1025   hsl(0),
1026   hsl(100),
1027   hsl(150),
1028   hsl(200),
1029   hsl(250),
1030   hsl(300),
1031 ];
1032
1033 function hsl(num: number) {
1034   return `hsla(${num}, 35%, 50%, 1)`;
1035 }
1036
1037 export function previewLines(
1038   text: string,
1039   maxChars = 300,
1040   maxLines = 1
1041 ): string {
1042   return (
1043     text
1044       .slice(0, maxChars)
1045       .split("\n")
1046       // Use lines * 2 because markdown requires 2 lines
1047       .slice(0, maxLines * 2)
1048       .join("\n") + "..."
1049   );
1050 }
1051
1052 export function hostname(url: string): string {
1053   let cUrl = new URL(url);
1054   return cUrl.port ? `${cUrl.hostname}:${cUrl.port}` : `${cUrl.hostname}`;
1055 }
1056
1057 export function validTitle(title?: string): boolean {
1058   // Initial title is null, minimum length is taken care of by textarea's minLength={3}
1059   if (title === null || title.length < 3) return true;
1060
1061   const regex = new RegExp(/.*\S.*/, "g");
1062
1063   return regex.test(title);
1064 }
1065
1066 export function siteBannerCss(banner: string): string {
1067   return ` \
1068     background-image: linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8) ) ,url("${banner}"); \
1069     background-attachment: fixed; \
1070     background-position: top; \
1071     background-repeat: no-repeat; \
1072     background-size: 100% cover; \
1073
1074     width: 100%; \
1075     max-height: 100vh; \
1076     `;
1077 }
1078
1079 export function isBrowser() {
1080   return typeof window !== "undefined";
1081 }
1082
1083 export function setIsoData(context: any): IsoData {
1084   let isoData: IsoData = isBrowser()
1085     ? window.isoData
1086     : context.router.staticContext;
1087   return isoData;
1088 }
1089
1090 export function wsSubscribe(parseMessage: any): Subscription {
1091   if (isBrowser()) {
1092     return WebSocketService.Instance.subject
1093       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
1094       .subscribe(
1095         msg => parseMessage(msg),
1096         err => console.error(err),
1097         () => console.log("complete")
1098       );
1099   } else {
1100     return null;
1101   }
1102 }
1103
1104 export function setOptionalAuth(obj: any, auth = UserService.Instance.auth) {
1105   if (auth) {
1106     obj.auth = auth;
1107   }
1108 }
1109
1110 export function authField(
1111   throwErr = true,
1112   auth = UserService.Instance.auth
1113 ): string {
1114   if (auth == null && throwErr) {
1115     toast(i18n.t("not_logged_in"), "danger");
1116     throw "Not logged in";
1117   } else {
1118     return auth;
1119   }
1120 }
1121
1122 moment.updateLocale("en", {
1123   relativeTime: {
1124     future: "in %s",
1125     past: "%s ago",
1126     s: "<1m",
1127     ss: "%ds",
1128     m: "1m",
1129     mm: "%dm",
1130     h: "1h",
1131     hh: "%dh",
1132     d: "1d",
1133     dd: "%dd",
1134     w: "1w",
1135     ww: "%dw",
1136     M: "1M",
1137     MM: "%dM",
1138     y: "1Y",
1139     yy: "%dY",
1140   },
1141 });
1142
1143 export function saveScrollPosition(context: any) {
1144   let path: string = context.router.route.location.pathname;
1145   let y = window.scrollY;
1146   sessionStorage.setItem(`scrollPosition_${path}`, y.toString());
1147 }
1148
1149 export function restoreScrollPosition(context: any) {
1150   let path: string = context.router.route.location.pathname;
1151   let y = Number(sessionStorage.getItem(`scrollPosition_${path}`));
1152   window.scrollTo(0, y);
1153 }
1154
1155 export function showLocal(isoData: IsoData): boolean {
1156   return isoData.site_res.federated_instances?.linked.length > 0;
1157 }
1158
1159 interface ChoicesValue {
1160   value: string;
1161   label: string;
1162 }
1163
1164 export function communityToChoice(cv: CommunityView): ChoicesValue {
1165   let choice: ChoicesValue = {
1166     value: cv.community.id.toString(),
1167     label: communitySelectName(cv),
1168   };
1169   return choice;
1170 }
1171
1172 export function personToChoice(pvs: PersonViewSafe): ChoicesValue {
1173   let choice: ChoicesValue = {
1174     value: pvs.person.id.toString(),
1175     label: personSelectName(pvs),
1176   };
1177   return choice;
1178 }
1179
1180 export async function fetchCommunities(q: string) {
1181   let form: Search = {
1182     q,
1183     type_: SearchType.Communities,
1184     sort: SortType.TopAll,
1185     listing_type: ListingType.All,
1186     page: 1,
1187     limit: fetchLimit,
1188     auth: authField(false),
1189   };
1190   let client = new LemmyHttp(httpBase);
1191   return client.search(form);
1192 }
1193
1194 export async function fetchUsers(q: string) {
1195   let form: Search = {
1196     q,
1197     type_: SearchType.Users,
1198     sort: SortType.TopAll,
1199     listing_type: ListingType.All,
1200     page: 1,
1201     limit: fetchLimit,
1202     auth: authField(false),
1203   };
1204   let client = new LemmyHttp(httpBase);
1205   return client.search(form);
1206 }
1207
1208 export const choicesConfig = {
1209   shouldSort: false,
1210   searchResultLimit: fetchLimit,
1211   classNames: {
1212     containerOuter: "choices",
1213     containerInner: "choices__inner bg-secondary border-0",
1214     input: "form-control",
1215     inputCloned: "choices__input--cloned",
1216     list: "choices__list",
1217     listItems: "choices__list--multiple",
1218     listSingle: "choices__list--single",
1219     listDropdown: "choices__list--dropdown",
1220     item: "choices__item bg-secondary",
1221     itemSelectable: "choices__item--selectable",
1222     itemDisabled: "choices__item--disabled",
1223     itemChoice: "choices__item--choice",
1224     placeholder: "choices__placeholder",
1225     group: "choices__group",
1226     groupHeading: "choices__heading",
1227     button: "choices__button",
1228     activeState: "is-active",
1229     focusState: "is-focused",
1230     openState: "is-open",
1231     disabledState: "is-disabled",
1232     highlightedState: "text-info",
1233     selectedState: "text-info",
1234     flippedState: "is-flipped",
1235     loadingState: "is-loading",
1236     noResults: "has-no-results",
1237     noChoices: "has-no-choices",
1238   },
1239 };
1240
1241 export function communitySelectName(cv: CommunityView): string {
1242   return cv.community.local
1243     ? cv.community.title
1244     : `${hostname(cv.community.actor_id)}/${cv.community.title}`;
1245 }
1246
1247 export function personSelectName(pvs: PersonViewSafe): string {
1248   let pName = pvs.person.display_name || pvs.person.name;
1249   return pvs.person.local ? pName : `${hostname(pvs.person.actor_id)}/${pName}`;
1250 }
1251
1252 export function initializeSite(site: GetSiteResponse) {
1253   UserService.Instance.myUserInfo = site.my_user;
1254   i18n.changeLanguage(getLanguages()[0]);
1255 }
1256
1257 const SHORTNUM_SI_FORMAT = new Intl.NumberFormat("en-US", {
1258   maximumSignificantDigits: 3,
1259   //@ts-ignore
1260   notation: "compact",
1261   compactDisplay: "short",
1262 });
1263
1264 export function numToSI(value: number): string {
1265   return SHORTNUM_SI_FORMAT.format(value);
1266 }
1267
1268 export function isBanned(ps: PersonSafe): boolean {
1269   // Add Z to convert from UTC date
1270   if (ps.ban_expires) {
1271     if (ps.banned && new Date(ps.ban_expires + "Z") > new Date()) {
1272       return true;
1273     } else {
1274       return false;
1275     }
1276   } else {
1277     return ps.banned;
1278   }
1279 }
1280
1281 export function pushNotNull(array: any[], new_item?: any) {
1282   if (new_item) {
1283     array.push(...new_item);
1284   }
1285 }