Unique CSS class for Group pages?

المشكلة كانت أنني لم أستطع معرفة كيفية تمرير متغير من getGroupInfo() إلى api.onPageChange(() =>{

الكود أدناه يحقق ذلك باستخدام ملف تعريف ارتباط (cookie) ويجب أن يضيف ويحذف تلقائيًا الفئة "name-of-current-group" من/إلى div بمعرف main لأي مجموعة تنتمي إليها.

<script type="text/discourse-plugin" version="0.8">
        function getGroupInfo() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var myObj = JSON.parse(this.responseText);
                var groupName = myObj.group.name;
                if (groupName) {
                    document.getElementById("main").classList.add(groupName);
                    $.cookie('groupCookie', groupName, { expires: 7, path: '/' });
                }
            }
        };
        var url = window.location.href;
        xmlhttp.open("GET", url + ".json", true);
        xmlhttp.send();                			
    }
    api.onPageChange(() =>{
        var group = $.cookie('groupCookie');
        document.getElementById("main").classList.remove(group);
        $.cookie('groupCookie', 'false', { expires: -1, path: '/' })
        getGroupInfo();
    });
</script>