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

Port User functionality to TypeScript
This commit is contained in:
Karina Kwiatek 2021-12-25 22:44:26 +01:00 committed by GitHub
commit 0f654a4d7d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 94 additions and 107 deletions

View File

@ -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

View File

@ -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('DOMContentLoaded', initUser);

View File

@ -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'

View File

@ -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) {

View File

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

View File

@ -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');

View File

@ -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;
}
}
});
}

View File

@ -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);
}

View File

@ -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);
}

View File

@ -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);
}
});
}

View File

@ -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

View File

@ -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",