common/xhr for ui/lobby

ui/lobby/src/boot.ts

@@ -1,6 +1,7 @@
 import { LobbyOpts } from './interfaces';
 import main from './main';
 import modal from 'common/modal';
+import * as xhr from 'common/xhr';
 
 export default function LichessLobby(opts: LobbyOpts) {
 
@@ -40,12 +41,9 @@ export default function LichessLobby(opts: LobbyOpts) {
         setTimeout(() => nbRoundSpread(msg.r), li.socket.pingInterval() / 2);
       },
       reload_timeline() {
-        $.ajax({
-          url: '/timeline',
-          success: function(html) {
-            $('.timeline').html(html);
-            li.pubsub.emit('content_loaded');
-          }
+        xhr.text('/timeline').then(html => {
+          $('.timeline').html(html);
+          li.pubsub.emit('content_loaded');
         });
       },
       featured(o: { html: string }) {
@@ -63,9 +61,11 @@ export default function LichessLobby(opts: LobbyOpts) {
     }
   });
   li.StrongSocket.firstConnect.then(() => {
-    var gameId = getParameterByName('hook_like');
+    const gameId = getParameterByName('hook_like');
     if (!gameId) return;
-    $.post(`/setup/hook/${li.sri}/like/${gameId}?rr=${lobby.setup.ratingRange() || ''}`);
+    xhr.text(
+      `/setup/hook/${li.sri}/like/${gameId}?rr=${lobby.setup.ratingRange() || ''}`,
+      { method: 'post' });
     lobby.setTab('real_time');
     history.replaceState(null, '', '/');
   });
@@ -78,27 +78,20 @@ export default function LichessLobby(opts: LobbyOpts) {
   const $startButtons = $('.lobby__start'),
     clickEvent = opts.blindMode ? 'click' : 'mousedown';
 
-  $startButtons.find('a:not(.disabled)').on(clickEvent, function(this: HTMLElement) {
+  $startButtons.find('a:not(.disabled)').on(clickEvent, function(this: HTMLAnchorElement) {
     $(this).addClass('active').siblings().removeClass('active');
     li.loadCssPath('lobby.setup');
     lobby.leavePool();
-    $.ajax({
-      url: $(this).attr('href'),
-      success: function(html) {
+    xhr.text(this.href)
+      .then(html => {
         lobby.setup.prepareForm(modal(html, 'game-setup', () => {
           $startButtons.find('.active').removeClass('active');
         }));
         li.pubsub.emit('content_loaded');
-      },
-      error: function(res) {
-        if (res.status == 400) alert(res.responseText);
-        li.reload();
-      }
-    });
+      })
+      .catch(li.reload);
     return false;
-  }).on('click', function() {
-    return false;
-  });
+  }).on('click', () => false);
 
   if (['#ai', '#friend', '#hook'].includes(location.hash)) {
     $startButtons

ui/lobby/src/ctrl.ts

@@ -153,9 +153,7 @@ export default class LobbyController {
 
   clickPool = (id: string) => {
     if (!this.data.me) {
-      xhr.anonPoolSeek(this.pools.find(function(p) {
-        return p.id === id;
-      }));
+      xhr.anonPoolSeek(this.pools.find(p => p.id == id)!);
       this.setTab('real_time');
     } else if (this.poolMember && this.poolMember.id === id) this.leavePool();
     else {

ui/lobby/src/setup.ts

@@ -1,6 +1,7 @@
 import { FormStore, toFormLines, makeStore } from './form';
 import modal from 'common/modal';
 import debounce from 'common/debounce';
+import * as xhr from 'common/xhr';
 import LobbyController from './ctrl';
 
 const li = window.lichess;
@@ -206,11 +207,17 @@ export default class Setup {
           this.root.redraw();
         } else {
           this.root.setTab($timeModeSelect.val() === '1' ? 'real_time' : 'seeks');
-          $.ajax({
-            url: $form.attr('action').replace(/sri-placeholder/, li.sri),
-            data: $form.serialize() + "&color=" + color,
-            type: 'post'
-          });
+          xhr.text(
+            $form.attr('action').replace(/sri-placeholder/, li.sri),
+            {
+              method: 'post',
+              body: (() => {
+                const data = new FormData($form[0] as HTMLFormElement)
+                data.append('color', color);
+                console.log(data);
+                return data;
+              })()
+            });
         }
         return false;
       };
@@ -310,28 +317,21 @@ export default class Setup {
     var validateFen = debounce(() => {
       $fenInput.removeClass("success failure");
       var fen = $fenInput.val();
-      if (fen) {
-        $.ajax({
-          url: $fenInput.parent().data('validate-url'),
-          data: {
-            fen: fen
-          },
-          success: function(data) {
-            $fenInput.addClass("success");
-            $fenPosition.find('.preview').html(data);
-            $fenPosition.find('a.board_editor').each(function(this: HTMLElement) {
-              $(this).attr('href', $(this).attr('href').replace(/editor\/.+$/, "editor/" + fen));
-            });
-            $submits.removeClass('nope');
-            li.pubsub.emit('content_loaded');
-          },
-          error: function() {
-            $fenInput.addClass("failure");
-            $fenPosition.find('.preview').html("");
-            $submits.addClass('nope');
-          }
-        });
-      }
+      if (fen) xhr.text(xhr.url($fenInput.parent().data('validate-url'), { fen }))
+        .then(data => {
+          $fenInput.addClass("success");
+          $fenPosition.find('.preview').html(data);
+          $fenPosition.find('a.board_editor').each(function(this: HTMLElement) {
+            $(this).attr('href', $(this).attr('href').replace(/editor\/.+$/, "editor/" + fen));
+          });
+          $submits.removeClass('nope');
+          li.pubsub.emit('content_loaded');
+        })
+        .catch(() => {
+          $fenInput.addClass("failure");
+          $fenPosition.find('.preview').html("");
+          $submits.addClass('nope');
+        })
     }, 200);
     $fenInput.on('keyup', validateFen);
 

ui/lobby/src/view/realTime/filter.ts

@@ -1,4 +1,5 @@
 import { h } from 'snabbdom';
+import * as xhr from 'common/xhr';
 import { bind } from '../util';
 import LobbyController from '../../ctrl';
 
@@ -71,21 +72,18 @@ export interface FilterNode extends HTMLElement {
   filterLoaded?: boolean;
 }
 
-export function render(ctrl: LobbyController) {
-  return h('div.hook__filters', {
+export const render = (ctrl: LobbyController) =>
+  h('div.hook__filters', {
     hook: {
       insert(vnode) {
         const el = vnode.elm as FilterNode;
         if (el.filterLoaded) return;
-        $.ajax({
-          url: '/setup/filter',
-          success(html) {
+        xhr.text('/setup/filter')
+          .then(html => {
             el.innerHTML = html;
             el.filterLoaded = true;
             initialize(ctrl, el);
-          }
-        });
+          });
       }
     }
   });
-}

ui/lobby/src/xhr.ts

@@ -1,32 +1,19 @@
-const headers = {
-  'Accept': 'application/vnd.lichess.v3+json'
-};
+import * as xhr from 'common/xhr';
+import { Pool } from './interfaces';
 
-export function seeks() {
-  return $.ajax({
-    url: '/lobby/seeks',
-    headers: headers
-  });
-}
+export const seeks = () => xhr.json('/lobby/seeks');
 
-export function nowPlaying() {
-  return $.ajax({
-    url: '/account/now-playing',
-    headers: headers
-  }).then(o => o.nowPlaying);
-}
+export const nowPlaying = () => xhr.json('/account/now-playing').then(o => o.nowPlaying);
 
-export function anonPoolSeek(pool) {
-  return $.ajax({
+export const anonPoolSeek = (pool: Pool) =>
+  xhr.json('/setup/hook/' + window.lichess.sri, {
     method: 'POST',
-    url: '/setup/hook/' + window.lichess.sri,
-    data: {
+    body: xhr.form({
       variant: 1,
       timeMode: 1,
       time: pool.lim,
       increment: pool.inc,
       days: 1,
       color: 'random'
-    }
+    })
   });
-}