사용자 프로필을 볼 때 렌더링되는 테마 컴포넌트를 만들었습니다. 이 컴포넌트는 별도의 웹사이트(내가 관리하는 사이트)로 ajax 요청을 보내 해당 discourse 사용자가 그 사이트에 계정이 있는지 확인합니다(요청 URL에 discourse 사용자 ID를 전달). 계정이 있으면 해당 사이트의 사용자 계정 링크를 렌더링합니다.
동작은 하지만, 이 방식이 discourse 개발자들을 경악하게 할 만큼 엉성한 해킹 코드일 것이라고 확신합니다. 그래서 더 나은 방법이 있는지 여쭤보고 싶었습니다. 저는 JavaScript와 ruby 개발자이지만, Ember는 사용해 본 적이 없습니다(Vue, Backbone, React는 사용해 봤습니다).
<script type="text/discourse-plugin" version="0.8.7">
const {ajax} = require('discourse/lib/ajax')
api.registerConnectorClass('user-profile-primary', 'custom-profile-link', {
setupComponent(args, component) {
args.model.get('fetchPersonnelMember')
}
})
api.modifyClass('model:user', {
fetchPersonnelMember: function () {
console.log('running!', ajax)
const urlTemplate = settings.personnel_lookup_url // 예: "https://api.29th.org/members?discourse_id=%s"
const url = urlTemplate.replace(/%s/, this.id)
return ajax(url).then((result) => {
if (result.status == true && result.member.id) {
this.setProperties({personnelMember: result.member})
}
})
}.property('id'),
personnelLinkUrl: function () {
if (this.personnelMember) {
const viewUrlTemplate = settings.personnel_view_url // 예: "https://personnel.29th.org/#members/%s"
return viewUrlTemplate.replace(/%s/, this.personnelMember.id)
}
}.property('personnelMember'),
personnelLinkName: function () {
return this.personnelMember ? this.personnelMember.short_name : ''
}.property('personnelMember')
})
</script>
<script type='text/x-handlebars' data-template-name='/connectors/user-profile-primary/custom-profile-link'>
{{#if model.personnelLinkUrl}}
<div class="public-user-fields">
<div class="public-user-field">
<span class="user-field-name">
{{theme-setting 'personnel_label'}}
</span>
<span class="user-field-value">
<a href="{{{model.personnelLinkUrl}}}">{{model.personnelLinkName}}</a>
</span>
</div>
</div>
{{/if}}
</script>
이 코드는 대부분 https://meta.discourse.org/t/link-custom-user-field-to-external-website/41218/24에서 참고했습니다. 제 추측으로는 메인 문제가 비동기 함수를 계산 속성(computed property)으로 실행하고 있다는 점인데, 이는 피해야 할 부분입니다. 대신 사용자 프로필 페이지에만 해당 비동기 요청을 실행하는 어떤 종류의 “로드 시” 훅(on load hook)을 사용해야 할 것 같습니다.
또한 변수의 템플릿 형식에서 약간 바퀴를 다시 발명하는 느낌이 듭니다. 이상적으로는 설정을 https://mysite.com/members/{{id}}와 같은 handlebars 템플릿처럼 보이도록 만들어 공유할 수 있는 구성 가능한 플러그인으로 만들고 싶습니다. 하지만 discourse 코드베이스에서 이를 위한 유틸리티나 헬퍼를 찾지 못했습니다.
피드백을 환영합니다. 시간 내어 주셔서 감사합니다.
