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