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