JavaScriptで汎用的なユーザー請求ページURLが機能しない

開発
1

すでに /my/billing/subscriptions が、現在のユーザーを自身のユーザープロフィール（特に Discourse Subscriptions に付属する請求セクション）にリンクする方法であることを理解しています。しかし、以下のコード内の if 文の式では、これが機能していないようです。具体的には、ユーザーの請求ページでのみボタンが表示されるようにしようとしています。実際、/my で始まる URL（billing、preferences、activity など、どのようなものでも）に対して、すべて機能していないように見えます。何か間違えているのでしょうか？何をすべきでしょうか？（ただし、if 文内でのみ機能していない点に注意してください。それ以外では /my を使用することは問題なく機能しています。）

<script type="text/discourse-plugin" version="0.8">
api.registerConnectorClass("above-user-profile", "back-button", {
    setupComponent(args, component) {
    api.onPageChange((url) => {

        if (url === "/my/billing/subscriptions" ){ 
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          document.querySelector("html").classList.remove("custom-homepage"); 
          component.set("displayCustomHomepage", false); 
        }
    });
    }
});
</script>

<script type="text/x-handlebars" data-template-name="/connectors/above-user-profile/back-button">
  {{#if displayCustomHomepage}} 
    <a href="https://mathbymiles.com/my/preferences" class="btn btn-default">
        <span class="d-button-label">
            設定に戻る！
        </span>
    </a>
  {{/if}}
</script>
「いいね！」 1
2

それは、ユーザーが /my/* の URL に到達しないからではないでしょうか？これは単なるスマートなリダイレクトだからです。

例えば、/my/preferences は /u/falco/preferences にリダイレクトされるため、あなたのコードにある if 文がトリガーされるような /my/preferences ページには、私は決して到達しません。

「いいね！」 2
3

なるほど、おっしゃる通りですね。if 文ではその条件が決して真にならないため、適切ではない理由もわかりました。では、どうすればよいのでしょうか？

私は代わりに if 内で以下を試してみました。

url === "/u/" + user.username + "/billing/subscriptions"

ただし、

const user = api.getCurrentUser()

としましたが、これもうまくいかないようです…

編集：console.log を使って調査したところ、このアプローチ自体は一般的には問題なく機能することがわかりました。例えば、スクリプト内で以下のコードを実行すれば、

const user = api.getCurrentUser()
console.log("/u/" + user.username + "/billing/subscriptions")

期待通り /u/Miles/billing/subscriptions が出力されます。

しかし、これを setupComponent(args, component) {} の中に組み込もうとすると問題が発生します。そうすると console.log が何も表示されなくなります。まだ何が間違っているのか見当がつかないままです…

4

setupComponent メソッド内で api オブジェクトにアクセスできますか？それが問題の原因ではないかと疑っています。

5

そう思ったのは、すでに api.onPageChange(url) が正常に実行されているからです。なお、私は こちら のコードを適応しているため、setupComponent メソッド内で api オブジェクトにアクセスできることは間違いありません。

さらに明確にするために、現時点での状況を以下に示します。

次のコードでは、

<script type="text/discourse-plugin" version="0.8">
    const user = api.getCurrentUser();
    console.log("/u/" + user.username + "/billing/subscriptions");

    api.registerConnectorClass("above-user-profile", "back-button", {
    setupComponent(args, component) {

    api.onPageChange((url) => {

        if (url === "/u/" + user.username + "/billing/subscriptions" ){ 
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          document.querySelector("html").classList.remove("custom-homepage"); 
          component.set("displayCustomHomepage", false); 
        }
    });
    }
});

コンソールから正しい出力 /u/Miles/billing/subscriptions が得られます。しかし、以下のようにすると、

<script type="text/discourse-plugin" version="0.8">
    

    api.registerConnectorClass("above-user-profile", "back-button", {
    setupComponent(args, component) {

    const user = api.getCurrentUser();
    console.log("/u/" + user.username + "/billing/subscriptions");

    api.onPageChange((url) => {

        if (url === "/u/" + user.username + "/billing/subscriptions" ){ 
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          document.querySelector("html").classList.remove("custom-homepage"); 
          component.set("displayCustomHomepage", false); 
        }
    });
    }
});

出力は何も得られません。