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