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

Port User functionality to TypeScript

app/javascript/packs/application.ts

@@ -1,7 +1,9 @@
-import start from '../retrospring/common';
-import initAnswerbox from '../retrospring/features/answerbox/index';
-import initInbox from '../retrospring/features/inbox/index';
+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';
 
 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 {createShareEvent} from "./share";
+import registerEvents from 'utilities/registerEvents';
+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 {reportEventHandler} from "./report";
+import registerEvents from 'utilities/registerEvents';
+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",