Merge pull request #226 from Retrospring/refactor/user-typescript

Port User functionality to TypeScript

app/javascript/legacy/user.coffee

@@ -1,95 +0,0 @@
-$(document).on "click", "button[name=user-action]", ->
-  btn = $(this)
-  btn.button "loading"
-  type = btn[0].dataset.type
-  target = btn[0].dataset.target
-  action = btn[0].dataset.action
-  if type in ['follower', 'friend']
-    count = Number $("h4.entry-text##{type}-count").html()
-
-  target_url = switch action
-    when 'follow'
-      count++
-      '/ajax/create_friend'
-    when 'unfollow'
-      count--
-      '/ajax/destroy_friend'
-
-  success = false
-
-  $.ajax
-    url: target_url
-    type: 'POST'
-    data:
-      screen_name: target
-    success: (data, status, jqxhr) ->
-      success = data.success
-      if data.success
-        if type in ['follower', 'friend']
-          $("h4.entry-text##{type}-count").html(count)
-      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"
-      if success
-        switch action
-          when 'follow'
-            btn[0].dataset.action = 'unfollow'
-            btn.attr 'class', 'btn btn-default btn-block profile--follow-btn'
-            btn.html translate('views.actions.unfollow')
-          when 'unfollow'
-            btn[0].dataset.action = 'follow'
-            btn.attr 'class', 'btn btn-primary btn-block profile--follow-btn'
-            btn.html translate('views.actions.follow')
-
-
-# report user
-$(document).on "click", "a[data-action=report-user]", (ev) ->
-  ev.preventDefault()
-  btn = $(this)
-  target = btn[0].dataset.target
-  reportDialog "user", target, -> btn.button "reset"
-
-# parallax
-PARALLAX_PREFIX = null
-if typeof document.documentElement.style.webkitTransform == "string"
-  PARALLAX_PREFIX = "webkit"
-if typeof document.documentElement.style.mozTransform == "string"
-  PARALLAX_PREFIX = "moz"
-if typeof document.documentElement.style.oTransform == "string"
-  PARALLAX_PREFIX = "o"
-if typeof document.documentElement.style.msTransform == "string"
-  PARALLAX_PREFIX = "ms"
-if typeof document.documentElement.style.khtmlTransform == "string"
-  PARALLAX_PREFIX = "khtml"
-if typeof document.documentElement.style.transform == "string"
-  PARALLAX_PREFIX = ""
-
-HEADER_PARALLAX = null
-
-if PARALLAX_PREFIX?
-  PARALLAX_CSS = "transform"
-  if PARALLAX_PREFIX.length
-    PARALLAX_CSS = PARALLAX_PREFIX + PARALLAX_CSS.charAt(0).toUpperCase() + PARALLAX_CSS.slice(1)
-
-  window.HEADER_PARALLAX_INERTIA = 0.4;
-
-  HEADER_PARALLAX = ->
-    header = $("#profile--header:not(.profile--no-header) img")[0]
-    if header?
-      headerOffset = Math.max(window.pageYOffset, window.scrollY, document.documentElement.scrollTop) * HEADER_PARALLAX_INERTIA
-      header.style[PARALLAX_CSS] = "translate3d(0px, #{headerOffset}px, 0px)";
-    return # coffee doesn't have !-> to prevent returning like LiveScript has, god I miss livescript ;-;
-    # also no := to set global variables :-(
-    # or var-iables = varIables :-((
-    # or fun! = fun() :-(((
-
-  $(window).on "scroll", (event) ->
-    HEADER_PARALLAX()
-    return
-
-$(document).ready ->
-  HEADER_PARALLAX() if HEADER_PARALLAX?
-  return

app/javascript/packs/application.ts

@@ -1,7 +1,9 @@
-import start from '../retrospring/common';
+import start from 'retrospring/common';
-import initAnswerbox from '../retrospring/features/answerbox/index';
+import initAnswerbox from 'retrospring/features/answerbox/index';
-import initInbox from '../retrospring/features/inbox/index';
+import initInbox from 'retrospring/features/inbox/index';
+import initUser from 'retrospring/features/user';
 
 start();
 document.addEventListener('turbolinks:load', initAnswerbox);
-document.addEventListener('turbolinks:load', initInbox);
+document.addEventListener('turbolinks:load', initInbox);
+document.addEventListener('DOMContentLoaded', initUser);

app/javascript/packs/legacy.coffee

@@ -31,7 +31,6 @@ import '../legacy/notifications'
 import '../legacy/pagination'
 import '../legacy/question'
 import '../legacy/settings'
-import '../legacy/user'
 import '../legacy/report'
 import '../legacy/locale-box'
 import '../legacy/util'

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

@@ -1,5 +1,5 @@
-import registerEvents from "retrospring/utilities/registerEvents";
+import registerEvents from 'utilities/registerEvents';
-import {createShareEvent} from "./share";
+import { createShareEvent } from './share';
 
 export default (): void => {
   if ('share' in navigator) {

app/javascript/retrospring/features/answerbox/share.ts

@@ -1,4 +1,4 @@
-import noop from 'retrospring/utilities/noop';
+import noop from 'utilities/noop';
 
 export function createShareEvent(answerbox: HTMLElement): () => void {
   return function (): void {

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

@@ -1,12 +1,12 @@
-import registerEvents from "retrospring/utilities/registerEvents";
+import registerEvents from 'utilities/registerEvents';
-import {reportEventHandler} from "./report";
+import { reportEventHandler } from './report';
 
 export default (): void => {
   const entries: NodeList = document.querySelectorAll('.inbox-entry:not(.js-initialized)');
 
   entries.forEach((element: HTMLElement) => {
     registerEvents([
-      {type: 'click', target: element.querySelector('[name=ib-report]'), handler: reportEventHandler}
+      { type: 'click', target: element.querySelector('[name=ib-report]'), handler: reportEventHandler }
     ]);
 
     element.classList.add('js-initialized');

app/javascript/retrospring/features/user/action.ts

@@ -0,0 +1,45 @@
+import Rails from '@rails/ujs';
+import I18n from '../../../legacy/i18n';
+
+export function userActionHandler(event: Event): void {
+  const button: HTMLButtonElement = event.target as HTMLButtonElement;
+  const target = button.dataset.target;
+  const action = button.dataset.action;
+
+  const targetURL = action === 'follow' ? '/ajax/create_friend' : '/ajax/destroy_friend';
+  let success = false;
+
+  Rails.ajax({
+    url: targetURL,
+    type: 'POST',
+    data: new URLSearchParams({
+      screen_name: target
+    }).toString(),
+    success: (data) => {
+      success = data.success;
+      window['showNotification'](data.message, data.success);
+    },
+    error: (data, status, xhr) => {
+      console.log(data, status, xhr);
+      window['showNotification'](I18n.translate('frontend.error.message'), false);
+    },
+    complete: () => {
+      if (!success) return;
+
+      switch (action) {
+        case 'follow':
+          button.dataset.action = 'unfollow';
+          button.innerText = I18n.translate('views.actions.unfollow');
+          button.classList.remove('btn-primary');
+          button.classList.add('btn-default');
+          break;
+        case 'unfollow':
+          button.dataset.action = 'follow';
+          button.innerText = I18n.translate('views.actions.follow');
+          button.classList.remove('btn-default');
+          button.classList.add('btn-primary');
+          break;
+      }
+     }
+  });
+}

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

@@ -0,0 +1,8 @@
+import { userActionHandler } from './action';
+import { userReportHandler } from './report';
+import { on } from 'utilities/on';
+
+export default (): void => {
+  on('click', 'button[name=user-action]', userActionHandler);
+  on('click', 'a[data-action=report-user]', userReportHandler);
+}

app/javascript/retrospring/features/user/report.ts

@@ -0,0 +1,6 @@
+export function userReportHandler(event: Event): void {
+  event.preventDefault();
+  const button: HTMLButtonElement = event.target as HTMLButtonElement;
+
+  window['reportDialog']('user', button.dataset.target);
+}

app/javascript/retrospring/utilities/on.ts

@@ -0,0 +1,9 @@
+type OnCallbackFunction = (event: Event) => void;
+
+export function on(type: string, selector: string, callback: OnCallbackFunction): void {
+  document.addEventListener(type, (event: Event) => {
+    if ((event.target as HTMLElement).matches(selector)) {
+      callback(event);
+    }
+  });
+}

config/webpack/environment.js

@@ -1,5 +1,16 @@
+const path = require('path')
 const { environment } = require('@rails/webpacker')
 const coffee =  require('./loaders/coffee')
 
 environment.loaders.prepend('coffee', coffee)
+
+environment.config.merge({
+  resolve: {
+    alias: {
+      retrospring: path.resolve(__dirname, '..', '..', 'app/javascript/retrospring'),
+      utilities: path.resolve(__dirname, '..', '..', 'app/javascript/retrospring/utilities')
+    }
+  }
+})
+
 module.exports = environment

tsconfig.json

@@ -8,7 +8,9 @@
     "moduleResolution": "node",
     "baseUrl": ".",
     "paths": {
-        "*": ["node_modules/*", "app/javascript/*"]
+        "*": ["node_modules/*", "app/javascript/*"],
+        "retrospring/*": ["app/javascript/retrospring/*"],
+        "utilities/*": ["app/javascript/retrospring/utilities/*"]
     },
     "sourceMap": true,
     "target": "es5",