Lemmy Sort and Scroll

// ==UserScript==
// @name             Lemmy Sort and Scroll
// @description      Implements infinite scrolling and changes default sorting behavior.
// @version          0.3
// @author           [email protected]
// @run-at           document-start
// @grant            none
// @match            https://sh.itjust.works/*
// @match            https://burggit.moe/*
// @match            https://lemmy.world/*
// @match            https://lemm.ee/*
// @match            https://lemmy.ml/*
// @match            https://lemmynsfw.com/*
// ==/UserScript==

// Don't forget to add your home instance to the match list above.

const defaultSort = 'Top';

function addScript(text) {
  text = text.replaceAll(`commentSort:"Hot"`, `commentSort:"${defaultSort}"`);
  text = text.replaceAll(
    'this.state.postsRes.data.posts',
    `(window.LEAKED_HOME=this,this.state.postsRes.data.posts)`
  );
  var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  newScript.textContent = text;
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(newScript);
}

window.addEventListener('beforescriptexecute', async function (e) {
  const src = e.target.src;
  if (src.endsWith('client.js')) {
    e.preventDefault();
    e.stopPropagation();
    const response = await fetch(src);
    addScript(await response.text());
  }
});

let currentPage = 1;
let ongoingRequest = false;

let lastUrl = location.href;
const observer = new MutationObserver(() => {
  if (location.href !== lastUrl) {
    lastUrl = location.href;
    currentPage = Number(new URLSearchParams(location.search).get('page') ?? 1);
    ongoingRequest = false;
  }

  if (document.querySelector('.post-listings') && document.querySelector('.paginator button')) {
    if (document.querySelectorAll('.post-listing').length < 20) {
      showEndMessage();
    } else {
      clearPaginator();
    }
  }
});

observer.observe(document.documentElement, { childList: true, subtree: true });

window.addEventListener('scroll', async function (e) {
  const referenceBox = document.querySelector('.post-listings')?.getBoundingClientRect();

  if (scrollY == 0 || ongoingRequest || !referenceBox || !LEAKED_HOME) return;

  if (LEAKED_HOME.state.postsRes.data.posts.length < 20) {
    showEndMessage();
    return;
  }

  if (innerHeight + 300 > referenceBox.bottom) {
    ongoingRequest = true;
    currentPage += 1;

    const authToken = document.cookie.split('=')[1];
    const communityName = location.pathname.split('/')[2] ?? '';

    let { sort, listing } = getSortAndListing();

    let query = new URLSearchParams({
      page: currentPage,
      limit: 20,
      sort: sort,
      type_: listing,
      auth: authToken,
    });

    if (communityName) {
      query.set('community_name', communityName);
    }

    try {
      const curHome = LEAKED_HOME;

      showSpinner();

      const response = await fetch(`${location.origin}/api/v3/post/list?${query.toString()}`);
      const posts = (await response.json()).posts;

      if (LEAKED_HOME != curHome) {
        return;
      }

      clearPaginator();

      LEAKED_HOME.state.postsRes.data.posts.push(...posts);
      LEAKED_HOME.forceUpdate();

      if (posts.length == 20) {
        ongoingRequest = false;
      } else {
        showEndMessage();
      }
    } catch {
      ongoingRequest = false;
    }
  }
});

function getSortAndListing() {
  const queryParams = new URLSearchParams(location.search);
  const defaultSort =
    isoData?.site_res?.my_user?.local_user_view?.local_user?.default_sort_type ?? 'Active';
  const defaultListing =
    isoData?.site_res?.my_user?.local_user_view?.local_user?.default_listing_type ?? 'Local';

  return {
    sort: queryParams.get('sort') ?? defaultSort,
    listing: queryParams.get('listingType') ?? defaultListing,
  };
}

function showEndMessage() {
  let paginator = document.querySelector('.paginator');
  if (document.querySelector('.post-listing')) {
    paginator.innerHTML = 'There are no more posts!';
  } else {
    clearPaginator();
  }
}

function showSpinner() {
  let paginator = document.querySelector('.paginator');
  paginator.innerHTML =
    '<svg class="icon spin spinner-large" viewBox="0 0 32 32"><path xmlns="http://www.w3.org/2000/svg" d="M16 32c-4.274 0-8.292-1.664-11.314-4.686s-4.686-7.040-4.686-11.314c0-3.026 0.849-5.973 2.456-8.522 1.563-2.478 3.771-4.48 6.386-5.791l1.344 2.682c-2.126 1.065-3.922 2.693-5.192 4.708-1.305 2.069-1.994 4.462-1.994 6.922 0 7.168 5.832 13 13 13s13-5.832 13-13c0-2.459-0.69-4.853-1.994-6.922-1.271-2.015-3.066-3.643-5.192-4.708l1.344-2.682c2.615 1.31 4.824 3.313 6.386 5.791 1.607 2.549 2.456 5.495 2.456 8.522 0 4.274-1.664 8.292-4.686 11.314s-7.040 4.686-11.314 4.686z"/></svg>';
}

function clearPaginator() {
  let paginator = document.querySelector('.paginator');
  paginator.innerHTML = '';
}