angular-challenges/docs/src/components/github/AnsweredUser.svelte

<script>
  import { onMount } from 'svelte';
  import { data, error, isLoaded, isLoading, totalCount } from './github-store';

  export let challengeNumber;

  let page = 1;

  async function fetchTotalCount() {
    isLoading.set(true);
    try {
      while (true) {
        const response = await fetch(`https://api.github.com/search/issues?q=repo:tomalaforge/angular-challenges+is:pr+label:"${challengeNumber}"+label:"answer"&per_page=100&page=${page}`);
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const { items: new_items, total_count } = await response.json();
        if (!new_items || new_items.length === 0) break;
        data.update(items => [...items, ...new_items]);
        totalCount.set(total_count);

        if(total_count < page * 100) break;

        page++;
      }
    } catch (e) {
      error.set(true);
    } finally {
      isLoading.set(false);
    }
  }

  onMount(() => {
    fetchTotalCount();
  });

</script>

{#if $isLoaded}
  <div class="solution-container">
    <div>Answered by</div>
    {#each $data as { user }}
      <img
        loading="lazy"
        src={user.avatar_url}
        width="30"
        height="30"
        alt=""
        class="avatar"
      />
    {/each}
  </div>
{/if}

<style>
  .solution-container {
    margin-top: 3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

  }
    .avatar {
      border-radius: 50%;
    }
</style>