src/shared/utils.ts

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