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