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(
 668   props: any,
 669   defaultListingType: ListingType
 670 ): ListingType {
 671   return props.match.params.listing_type
 672     ? routeListingTypeToEnum(props.match.params.listing_type)
 673     : UserService.Instance.myUserInfo
 674     ? Object.values(ListingType)[
 675         UserService.Instance.myUserInfo.local_user_view.local_user
 676           .default_listing_type
 677       ]
 678     : defaultListingType;
 679 }
 680
 681 export function getListingTypeFromPropsNoDefault(props: any): ListingType {
 682   return props.match.params.listing_type
 683     ? routeListingTypeToEnum(props.match.params.listing_type)
 684     : ListingType.Local;
 685 }
 686
 687 // TODO might need to add a user setting for this too
 688 export function getDataTypeFromProps(props: any): DataType {
 689   return props.match.params.data_type
 690     ? routeDataTypeToEnum(props.match.params.data_type)
 691     : DataType.Post;
 692 }
 693
 694 export function getSortTypeFromProps(props: any): SortType {
 695   return props.match.params.sort
 696     ? routeSortTypeToEnum(props.match.params.sort)
 697     : UserService.Instance.myUserInfo
 698     ? Object.values(SortType)[
 699         UserService.Instance.myUserInfo.local_user_view.local_user
 700           .default_sort_type
 701       ]
 702     : SortType.Active;
 703 }
 704
 705 export function getPageFromProps(props: any): number {
 706   return props.match.params.page ? Number(props.match.params.page) : 1;
 707 }
 708
 709 export function getRecipientIdFromProps(props: any): number {
 710   return props.match.params.recipient_id
 711     ? Number(props.match.params.recipient_id)
 712     : 1;
 713 }
 714
 715 export function getIdFromProps(props: any): number {
 716   return Number(props.match.params.id);
 717 }
 718
 719 export function getCommentIdFromProps(props: any): number {
 720   return Number(props.match.params.comment_id);
 721 }
 722
 723 export function getUsernameFromProps(props: any): string {
 724   return props.match.params.username;
 725 }
 726
 727 export function editCommentRes(data: CommentView, comments: CommentView[]) {
 728   let found = comments.find(c => c.comment.id == data.comment.id);
 729   if (found) {
 730     found.comment.content = data.comment.content;
 731     found.comment.updated = data.comment.updated;
 732     found.comment.removed = data.comment.removed;
 733     found.comment.deleted = data.comment.deleted;
 734     found.counts.upvotes = data.counts.upvotes;
 735     found.counts.downvotes = data.counts.downvotes;
 736     found.counts.score = data.counts.score;
 737   }
 738 }
 739
 740 export function saveCommentRes(data: CommentView, comments: CommentView[]) {
 741   let found = comments.find(c => c.comment.id == data.comment.id);
 742   if (found) {
 743     found.saved = data.saved;
 744   }
 745 }
 746
 747 export function updatePersonBlock(
 748   data: BlockPersonResponse
 749 ): PersonBlockView[] {
 750   if (data.blocked) {
 751     UserService.Instance.myUserInfo.person_blocks.push({
 752       person: UserService.Instance.myUserInfo.local_user_view.person,
 753       target: data.person_view.person,
 754     });
 755     toast(`${i18n.t("blocked")} ${data.person_view.person.name}`);
 756   } else {
 757     UserService.Instance.myUserInfo.person_blocks =
 758       UserService.Instance.myUserInfo.person_blocks.filter(
 759         i => i.target.id != data.person_view.person.id
 760       );
 761     toast(`${i18n.t("unblocked")} ${data.person_view.person.name}`);
 762   }
 763   return UserService.Instance.myUserInfo.person_blocks;
 764 }
 765
 766 export function updateCommunityBlock(
 767   data: BlockCommunityResponse
 768 ): CommunityBlockView[] {
 769   if (data.blocked) {
 770     UserService.Instance.myUserInfo.community_blocks.push({
 771       person: UserService.Instance.myUserInfo.local_user_view.person,
 772       community: data.community_view.community,
 773     });
 774     toast(`${i18n.t("blocked")} ${data.community_view.community.name}`);
 775   } else {
 776     UserService.Instance.myUserInfo.community_blocks =
 777       UserService.Instance.myUserInfo.community_blocks.filter(
 778         i => i.community.id != data.community_view.community.id
 779       );
 780     toast(`${i18n.t("unblocked")} ${data.community_view.community.name}`);
 781   }
 782   return UserService.Instance.myUserInfo.community_blocks;
 783 }
 784
 785 export function createCommentLikeRes(
 786   data: CommentView,
 787   comments: CommentView[]
 788 ) {
 789   let found = comments.find(c => c.comment.id === data.comment.id);
 790   if (found) {
 791     found.counts.score = data.counts.score;
 792     found.counts.upvotes = data.counts.upvotes;
 793     found.counts.downvotes = data.counts.downvotes;
 794     if (data.my_vote !== null) {
 795       found.my_vote = data.my_vote;
 796     }
 797   }
 798 }
 799
 800 export function createPostLikeFindRes(data: PostView, posts: PostView[]) {
 801   let found = posts.find(p => p.post.id == data.post.id);
 802   if (found) {
 803     createPostLikeRes(data, found);
 804   }
 805 }
 806
 807 export function createPostLikeRes(data: PostView, post_view: PostView) {
 808   if (post_view) {
 809     post_view.counts.score = data.counts.score;
 810     post_view.counts.upvotes = data.counts.upvotes;
 811     post_view.counts.downvotes = data.counts.downvotes;
 812     if (data.my_vote !== null) {
 813       post_view.my_vote = data.my_vote;
 814     }
 815   }
 816 }
 817
 818 export function editPostFindRes(data: PostView, posts: PostView[]) {
 819   let found = posts.find(p => p.post.id == data.post.id);
 820   if (found) {
 821     editPostRes(data, found);
 822   }
 823 }
 824
 825 export function editPostRes(data: PostView, post: PostView) {
 826   if (post) {
 827     post.post.url = data.post.url;
 828     post.post.name = data.post.name;
 829     post.post.nsfw = data.post.nsfw;
 830     post.post.deleted = data.post.deleted;
 831     post.post.removed = data.post.removed;
 832     post.post.stickied = data.post.stickied;
 833     post.post.body = data.post.body;
 834     post.post.locked = data.post.locked;
 835     post.saved = data.saved;
 836   }
 837 }
 838
 839 export function updatePostReportRes(
 840   data: PostReportView,
 841   reports: PostReportView[]
 842 ) {
 843   let found = reports.find(p => p.post_report.id == data.post_report.id);
 844   if (found) {
 845     found.post_report = data.post_report;
 846   }
 847 }
 848
 849 export function updateCommentReportRes(
 850   data: CommentReportView,
 851   reports: CommentReportView[]
 852 ) {
 853   let found = reports.find(c => c.comment_report.id == data.comment_report.id);
 854   if (found) {
 855     found.comment_report = data.comment_report;
 856   }
 857 }
 858
 859 export function updateRegistrationApplicationRes(
 860   data: RegistrationApplicationView,
 861   applications: RegistrationApplicationView[]
 862 ) {
 863   let found = applications.find(
 864     ra => ra.registration_application.id == data.registration_application.id
 865   );
 866   if (found) {
 867     found.registration_application = data.registration_application;
 868     found.admin = data.admin;
 869     found.creator_local_user = data.creator_local_user;
 870   }
 871 }
 872
 873 export function commentsToFlatNodes(comments: CommentView[]): CommentNodeI[] {
 874   let nodes: CommentNodeI[] = [];
 875   for (let comment of comments) {
 876     nodes.push({ comment_view: comment });
 877   }
 878   return nodes;
 879 }
 880
 881 function commentSort(tree: CommentNodeI[], sort: CommentSortType) {
 882   // First, put removed and deleted comments at the bottom, then do your other sorts
 883   if (sort == CommentSortType.Top) {
 884     tree.sort(
 885       (a, b) =>
 886         +a.comment_view.comment.removed - +b.comment_view.comment.removed ||
 887         +a.comment_view.comment.deleted - +b.comment_view.comment.deleted ||
 888         b.comment_view.counts.score - a.comment_view.counts.score
 889     );
 890   } else if (sort == CommentSortType.New) {
 891     tree.sort(
 892       (a, b) =>
 893         +a.comment_view.comment.removed - +b.comment_view.comment.removed ||
 894         +a.comment_view.comment.deleted - +b.comment_view.comment.deleted ||
 895         b.comment_view.comment.published.localeCompare(
 896           a.comment_view.comment.published
 897         )
 898     );
 899   } else if (sort == CommentSortType.Old) {
 900     tree.sort(
 901       (a, b) =>
 902         +a.comment_view.comment.removed - +b.comment_view.comment.removed ||
 903         +a.comment_view.comment.deleted - +b.comment_view.comment.deleted ||
 904         a.comment_view.comment.published.localeCompare(
 905           b.comment_view.comment.published
 906         )
 907     );
 908   } else if (sort == CommentSortType.Hot) {
 909     tree.sort(
 910       (a, b) =>
 911         +a.comment_view.comment.removed - +b.comment_view.comment.removed ||
 912         +a.comment_view.comment.deleted - +b.comment_view.comment.deleted ||
 913         hotRankComment(b.comment_view) - hotRankComment(a.comment_view)
 914     );
 915   }
 916
 917   // Go through the children recursively
 918   for (let node of tree) {
 919     if (node.children) {
 920       commentSort(node.children, sort);
 921     }
 922   }
 923 }
 924
 925 export function commentSortSortType(tree: CommentNodeI[], sort: SortType) {
 926   commentSort(tree, convertCommentSortType(sort));
 927 }
 928
 929 function convertCommentSortType(sort: SortType): CommentSortType {
 930   if (
 931     sort == SortType.TopAll ||
 932     sort == SortType.TopDay ||
 933     sort == SortType.TopWeek ||
 934     sort == SortType.TopMonth ||
 935     sort == SortType.TopYear
 936   ) {
 937     return CommentSortType.Top;
 938   } else if (sort == SortType.New) {
 939     return CommentSortType.New;
 940   } else if (sort == SortType.Hot || sort == SortType.Active) {
 941     return CommentSortType.Hot;
 942   } else {
 943     return CommentSortType.Hot;
 944   }
 945 }
 946
 947 export function buildCommentsTree(
 948   comments: CommentView[],
 949   commentSortType: CommentSortType
 950 ): CommentNodeI[] {
 951   let map = new Map<number, CommentNodeI>();
 952   for (let comment_view of comments) {
 953     let node: CommentNodeI = {
 954       comment_view: comment_view,
 955       children: [],
 956     };
 957     map.set(comment_view.comment.id, { ...node });
 958   }
 959   let tree: CommentNodeI[] = [];
 960   for (let comment_view of comments) {
 961     let child = map.get(comment_view.comment.id);
 962     let parent_id = comment_view.comment.parent_id;
 963     if (parent_id) {
 964       let parent = map.get(parent_id);
 965       // Necessary because blocked comment might not exist
 966       if (parent) {
 967         parent.children.push(child);
 968       }
 969     } else {
 970       tree.push(child);
 971     }
 972
 973     setDepth(child);
 974   }
 975
 976   commentSort(tree, commentSortType);
 977
 978   return tree;
 979 }
 980
 981 function setDepth(node: CommentNodeI, i = 0) {
 982   for (let child of node.children) {
 983     child.depth = i;
 984     setDepth(child, i + 1);
 985   }
 986 }
 987
 988 export function insertCommentIntoTree(tree: CommentNodeI[], cv: CommentView) {
 989   // Building a fake node to be used for later
 990   let node: CommentNodeI = {
 991     comment_view: cv,
 992     children: [],
 993     depth: 0,
 994   };
 995
 996   if (cv.comment.parent_id) {
 997     let parentComment = searchCommentTree(tree, cv.comment.parent_id);
 998     if (parentComment) {
 999       node.depth = parentComment.depth + 1;
1000       parentComment.children.unshift(node);
1001     }
1002   } else {
1003     tree.unshift(node);
1004   }
1005 }
1006
1007 export function searchCommentTree(
1008   tree: CommentNodeI[],
1009   id: number
1010 ): CommentNodeI {
1011   for (let node of tree) {
1012     if (node.comment_view.comment.id === id) {
1013       return node;
1014     }
1015
1016     for (const child of node.children) {
1017       const res = searchCommentTree([child], id);
1018
1019       if (res) {
1020         return res;
1021       }
1022     }
1023   }
1024   return null;
1025 }
1026
1027 export const colorList: string[] = [
1028   hsl(0),
1029   hsl(100),
1030   hsl(150),
1031   hsl(200),
1032   hsl(250),
1033   hsl(300),
1034 ];
1035
1036 function hsl(num: number) {
1037   return `hsla(${num}, 35%, 50%, 1)`;
1038 }
1039
1040 export function hostname(url: string): string {
1041   let cUrl = new URL(url);
1042   return cUrl.port ? `${cUrl.hostname}:${cUrl.port}` : `${cUrl.hostname}`;
1043 }
1044
1045 export function validTitle(title?: string): boolean {
1046   // Initial title is null, minimum length is taken care of by textarea's minLength={3}
1047   if (title === null || title.length < 3) return true;
1048
1049   const regex = new RegExp(/.*\S.*/, "g");
1050
1051   return regex.test(title);
1052 }
1053
1054 export function siteBannerCss(banner: string): string {
1055   return ` \
1056     background-image: linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8) ) ,url("${banner}"); \
1057     background-attachment: fixed; \
1058     background-position: top; \
1059     background-repeat: no-repeat; \
1060     background-size: 100% cover; \
1061
1062     width: 100%; \
1063     max-height: 100vh; \
1064     `;
1065 }
1066
1067 export function isBrowser() {
1068   return typeof window !== "undefined";
1069 }
1070
1071 export function setIsoData(context: any): IsoData {
1072   let isoData: IsoData = isBrowser()
1073     ? window.isoData
1074     : context.router.staticContext;
1075   return isoData;
1076 }
1077
1078 export function wsSubscribe(parseMessage: any): Subscription {
1079   if (isBrowser()) {
1080     return WebSocketService.Instance.subject
1081       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
1082       .subscribe(
1083         msg => parseMessage(msg),
1084         err => console.error(err),
1085         () => console.log("complete")
1086       );
1087   } else {
1088     return null;
1089   }
1090 }
1091
1092 export function setOptionalAuth(obj: any, auth = UserService.Instance.auth) {
1093   if (auth) {
1094     obj.auth = auth;
1095   }
1096 }
1097
1098 export function authField(
1099   throwErr = true,
1100   auth = UserService.Instance.auth
1101 ): string {
1102   if (auth == null && throwErr) {
1103     toast(i18n.t("not_logged_in"), "danger");
1104     throw "Not logged in";
1105   } else {
1106     return auth;
1107   }
1108 }
1109
1110 moment.updateLocale("en", {
1111   relativeTime: {
1112     future: "in %s",
1113     past: "%s ago",
1114     s: "<1m",
1115     ss: "%ds",
1116     m: "1m",
1117     mm: "%dm",
1118     h: "1h",
1119     hh: "%dh",
1120     d: "1d",
1121     dd: "%dd",
1122     w: "1w",
1123     ww: "%dw",
1124     M: "1M",
1125     MM: "%dM",
1126     y: "1Y",
1127     yy: "%dY",
1128   },
1129 });
1130
1131 export function saveScrollPosition(context: any) {
1132   let path: string = context.router.route.location.pathname;
1133   let y = window.scrollY;
1134   sessionStorage.setItem(`scrollPosition_${path}`, y.toString());
1135 }
1136
1137 export function restoreScrollPosition(context: any) {
1138   let path: string = context.router.route.location.pathname;
1139   let y = Number(sessionStorage.getItem(`scrollPosition_${path}`));
1140   window.scrollTo(0, y);
1141 }
1142
1143 export function showLocal(isoData: IsoData): boolean {
1144   return isoData.site_res.federated_instances?.linked.length > 0;
1145 }
1146
1147 interface ChoicesValue {
1148   value: string;
1149   label: string;
1150 }
1151
1152 export function communityToChoice(cv: CommunityView): ChoicesValue {
1153   let choice: ChoicesValue = {
1154     value: cv.community.id.toString(),
1155     label: communitySelectName(cv),
1156   };
1157   return choice;
1158 }
1159
1160 export function personToChoice(pvs: PersonViewSafe): ChoicesValue {
1161   let choice: ChoicesValue = {
1162     value: pvs.person.id.toString(),
1163     label: personSelectName(pvs),
1164   };
1165   return choice;
1166 }
1167
1168 export async function fetchCommunities(q: string) {
1169   let form: Search = {
1170     q,
1171     type_: SearchType.Communities,
1172     sort: SortType.TopAll,
1173     listing_type: ListingType.All,
1174     page: 1,
1175     limit: fetchLimit,
1176     auth: authField(false),
1177   };
1178   let client = new LemmyHttp(httpBase);
1179   return client.search(form);
1180 }
1181
1182 export async function fetchUsers(q: string) {
1183   let form: Search = {
1184     q,
1185     type_: SearchType.Users,
1186     sort: SortType.TopAll,
1187     listing_type: ListingType.All,
1188     page: 1,
1189     limit: fetchLimit,
1190     auth: authField(false),
1191   };
1192   let client = new LemmyHttp(httpBase);
1193   return client.search(form);
1194 }
1195
1196 export const choicesConfig = {
1197   shouldSort: false,
1198   searchResultLimit: fetchLimit,
1199   classNames: {
1200     containerOuter: "choices",
1201     containerInner: "choices__inner bg-secondary border-0",
1202     input: "form-control",
1203     inputCloned: "choices__input--cloned",
1204     list: "choices__list",
1205     listItems: "choices__list--multiple",
1206     listSingle: "choices__list--single",
1207     listDropdown: "choices__list--dropdown",
1208     item: "choices__item bg-secondary",
1209     itemSelectable: "choices__item--selectable",
1210     itemDisabled: "choices__item--disabled",
1211     itemChoice: "choices__item--choice",
1212     placeholder: "choices__placeholder",
1213     group: "choices__group",
1214     groupHeading: "choices__heading",
1215     button: "choices__button",
1216     activeState: "is-active",
1217     focusState: "is-focused",
1218     openState: "is-open",
1219     disabledState: "is-disabled",
1220     highlightedState: "text-info",
1221     selectedState: "text-info",
1222     flippedState: "is-flipped",
1223     loadingState: "is-loading",
1224     noResults: "has-no-results",
1225     noChoices: "has-no-choices",
1226   },
1227 };
1228
1229 export function communitySelectName(cv: CommunityView): string {
1230   return cv.community.local
1231     ? cv.community.title
1232     : `${hostname(cv.community.actor_id)}/${cv.community.title}`;
1233 }
1234
1235 export function personSelectName(pvs: PersonViewSafe): string {
1236   let pName = pvs.person.display_name || pvs.person.name;
1237   return pvs.person.local ? pName : `${hostname(pvs.person.actor_id)}/${pName}`;
1238 }
1239
1240 export function initializeSite(site: GetSiteResponse) {
1241   UserService.Instance.myUserInfo = site.my_user;
1242   i18n.changeLanguage(getLanguages()[0]);
1243 }
1244
1245 const SHORTNUM_SI_FORMAT = new Intl.NumberFormat("en-US", {
1246   maximumSignificantDigits: 3,
1247   //@ts-ignore
1248   notation: "compact",
1249   compactDisplay: "short",
1250 });
1251
1252 export function numToSI(value: number): string {
1253   return SHORTNUM_SI_FORMAT.format(value);
1254 }
1255
1256 export function isBanned(ps: PersonSafe): boolean {
1257   // Add Z to convert from UTC date
1258   if (ps.ban_expires) {
1259     if (ps.banned && new Date(ps.ban_expires + "Z") > new Date()) {
1260       return true;
1261     } else {
1262       return false;
1263     }
1264   } else {
1265     return ps.banned;
1266   }
1267 }
1268
1269 export function pushNotNull(array: any[], new_item?: any) {
1270   if (new_item) {
1271     array.push(...new_item);
1272   }
1273 }