Merge pull request #243 from Retrospring/refactor/lists-typescript

Port List functionality to TypeScript

app/javascript/legacy/lists.coffee

@@ -1,90 +0,0 @@
-($ document).on "click", "input[type=checkbox][name=gm-list-check]", ->
-  box = $(this)
-  box.attr 'disabled', 'disabled'
-
-  listName = box[0].dataset.list
-
-  count = Number ($ "span##{listName}-members").html()
-  boxChecked = box[0].checked
-
-  count += if boxChecked then 1 else -1
-
-  $.ajax
-    url: '/ajax/list_membership'
-    type: 'POST'
-    data:
-      user: box[0].dataset.user
-      list: listName
-      add: boxChecked
-    success: (data, status, jqxhr) ->
-      if data.success
-        box[0].checked = if data.checked? then data.checked else !boxChecked
-        ($ "span##{listName}-members").html(count)
-      showNotification data.message, data.success
-    error: (jqxhr, status, error) ->
-      box[0].checked = false
-      console.log jqxhr, status, error
-      showNotification translate('frontend.error.message'), false
-    complete: (jqxhr, status) ->
-      box.removeAttr "disabled"
-
-
-$(document).on "keyup", "input#new-list-name", (evt) ->
-  if evt.which == 13  # return key
-    evt.preventDefault()
-    $("button#create-list").trigger 'click'
-
-
-($ document).on "click", "button#create-list", ->
-  btn = $(this)
-  btn.button "loading"
-  input = ($ "input#new-list-name")
-
-  $.ajax
-    url: '/ajax/create_list'
-    type: 'POST'
-    data:
-      name: input.val()
-      user: btn[0].dataset.user
-    dataType: 'json'
-    success: (data, status, jqxhr) ->
-      if data.success
-        ($ "#lists-list ul.list-group").append(data.render)
-        input.val ''
-      showNotification data.message, data.success
-    error: (jqxhr, status, error) ->
-      console.log jqxhr, status, error
-      showNotification translate('frontend.error.message'), false
-    complete: (jqxhr, status) ->
-      btn.button "reset"
-
-
-($ document).on "click", "a#delete-list", (ev) ->
-  ev.preventDefault()
-  btn = $(this)
-  list = btn[0].dataset.list
-
-  swal
-    title: translate('frontend.list.title')
-    text: translate('frontend.list.text')
-    type: "warning"
-    showCancelButton: true
-    confirmButtonColor: "#DD6B55"
-    confirmButtonText: translate('views.actions.delete')
-    cancelButtonText: translate('views.actions.cancel')
-    closeOnConfirm: true
-  , ->
-    $.ajax
-      url: '/ajax/destroy_list'
-      type: 'POST'
-      data:
-        list: list
-      dataType: 'json'
-      success: (data, status, jqxhr) ->
-        if data.success
-          ($ "li.list-group-item#list-#{list}").slideUp()
-        showNotification data.message, data.success
-      error: (jqxhr, status, error) ->
-        console.log jqxhr, status, error
-        showNotification translate('frontend.error.message'), false
-      complete: (jqxhr, status) ->

app/javascript/packs/application.ts

@@ -2,8 +2,10 @@ import start from 'retrospring/common';
 import initAnswerbox from 'retrospring/features/answerbox/index';
 import initInbox from 'retrospring/features/inbox/index';
 import initUser from 'retrospring/features/user';
+import initLists from 'retrospring/features/lists';
 
 start();
 document.addEventListener('turbolinks:load', initAnswerbox);
 document.addEventListener('turbolinks:load', initInbox);
-document.addEventListener('DOMContentLoaded', initUser);
+document.addEventListener('DOMContentLoaded', initUser);
+document.addEventListener('DOMContentLoaded', initLists);

app/javascript/packs/legacy.coffee

@@ -25,7 +25,6 @@ import I18n from '../legacy/i18n'
 import '../legacy/answerbox'
 import '../legacy/questionbox'
 import '../legacy/inbox'
-import '../legacy/lists'
 import '../legacy/memes'
 import '../legacy/notifications'
 import '../legacy/pagination'

app/javascript/retrospring/features/lists/create.ts

@@ -0,0 +1,35 @@
+import Rails from '@rails/ujs';
+import I18n from '../../../legacy/i18n';
+
+export function createListHandler(event: Event): void {
+  const button = event.target as HTMLButtonElement;
+  const input = document.querySelector<HTMLInputElement>('input#new-list-name');
+
+  Rails.ajax({
+    url: '/ajax/create_list',
+    type: 'POST',
+    data: new URLSearchParams({
+      name: input.value,
+      user: button.dataset.user
+    }).toString(),
+    success: (data) => {
+      if (data.success) {
+        document.querySelector('#lists-list ul.list-group').insertAdjacentHTML('beforeend', data.render);
+      }
+      
+      window['showNotification'](data.message, data.success);
+    },
+    error: (data, status, xhr) => {
+      console.log(data, status, xhr);
+      window['showNotification'](I18n.translate('frontend.error.message'), false);
+    }
+  });
+}
+
+export function createListInputHandler(event: KeyboardEvent): void {
+  // Return key
+  if (event.which === 13) {
+    event.preventDefault();
+    document.querySelector<HTMLButtonElement>('button#create-list').click();
+  }
+}

app/javascript/retrospring/features/lists/destroy.ts

@@ -0,0 +1,43 @@
+import Rails from '@rails/ujs';
+import swal from 'sweetalert';
+import I18n from '../../../legacy/i18n';
+
+export function destroyListHandler(event: Event): void {
+  event.preventDefault();
+  const button = event.target as HTMLButtonElement;
+  const list = button.dataset.list;
+
+  swal({
+    title: I18n.translate('frontend.list.confirm.title'),
+    text: I18n.translate('frontend.list.confirm.text'),
+    type: "warning",
+    showCancelButton: true,
+    confirmButtonColor: "#DD6B55",
+    confirmButtonText: I18n.translate('views.actions.delete'),
+    cancelButtonText: I18n.translate('views.actions.cancel'),
+    closeOnConfirm: true 
+  }, () => {
+    Rails.ajax({
+      url: '/ajax/destroy_list',
+      type: 'POST',
+      data: new URLSearchParams({
+        list: list
+      }).toString(),
+      success: (data) => {
+        if (data.success) {
+          const element = document.querySelector(`li.list-group-item#list-${list}`);
+
+          if (element) {
+            element.remove();
+          }
+        }
+        
+        window['showNotification'](data.message, data.success);
+      },
+      error: (data, status, xhr) => {
+        console.log(data, status, xhr);
+        window['showNotification'](I18n.translate('frontend.error.message'), false);
+      }
+    });
+  });
+}

app/javascript/retrospring/features/lists/index.ts

@@ -0,0 +1,11 @@
+import { on } from 'retrospring/utilities/on';
+import { createListHandler, createListInputHandler } from './create';
+import { destroyListHandler } from './destroy';
+import { listMembershipHandler } from './membership';
+
+export default (): void => {
+  on('click', 'input[type=checkbox][name=gm-list-check]', listMembershipHandler);
+  on('click', 'button#create-list', createListHandler);
+  on('click', 'a#delete-list', destroyListHandler);
+  on('keyup', 'input#new-list-name', createListInputHandler);
+}

app/javascript/retrospring/features/lists/membership.ts

@@ -0,0 +1,37 @@
+import Rails from '@rails/ujs';
+import I18n from '../../../legacy/i18n';
+
+export function listMembershipHandler(event: Event): void {
+  const checkbox = event.target as HTMLInputElement;
+  const list = checkbox.dataset.list;
+  let memberCount = Number(document.querySelector(`span#${list}-members`).innerHTML);
+
+  checkbox.setAttribute('disabled', 'disabled');
+
+  memberCount += checkbox.checked ? 1 : -1;
+
+  Rails.ajax({
+    url: '/ajax/list_membership',
+    type: 'POST',
+    data: new URLSearchParams({
+      list: list,
+      user: checkbox.dataset.user,
+      add: String(checkbox.checked)
+    }).toString(),
+    success: (data) => {
+      if (data.success) {
+        checkbox.checked = data.checked;
+        document.querySelector(`span#${list}-members`).innerHTML = memberCount.toString();
+      }
+
+      window['showNotification'](data.message, data.success);
+    },
+    error: (data, status, xhr) => {
+      console.log(data, status, xhr);
+      window['showNotification'](I18n.translate('frontend.error.message'), false);
+    },
+    complete: () => {
+      checkbox.removeAttribute('disabled');
+    }
+  });
+}