Unique CSS class for Group pages?

문제는 getGroupInfo() 에서 api.onPageChange(() =>{ 로 변수를 전달하는 방법을 찾지 못했다는 것이었습니다.

아래 코드는 쿠키를 사용하여 이 문제를 해결하며, 사용자가 속한 모든 그룹에 대해 div ID main 에 현재 그룹 이름인 "name-of-current-group" 클래스를 자동으로 추가하고 제거합니다.

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