Skip to content

Instantly share code, notes, and snippets.

@felipesere
Created January 15, 2020 13:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save felipesere/3edbbb4c17deb4708a901d8c82cdbd39 to your computer and use it in GitHub Desktop.
Save felipesere/3edbbb4c17deb4708a901d8c82cdbd39 to your computer and use it in GitHub Desktop.
'items' does not update when clicking any of the tabs
<script>
import { fade } from 'svelte/transition';
import Github from './Github.svelte';
import GlowBox from '../GlowBox.svelte';
import Indicator, {Recency} from './Indicator.svelte';
import Settings from '../settings/Settings.svelte';
import Content from './Content.svelte';
export let repo
let showSettings = false;
let items = filterItems(repo, 'all');
let currentTab = 'all';
function filterItems(theRepo, tab) {
if (tab === 'all') {
return [...theRepo.activity.prs, ...theRepo.activity.issues]
}
if (tab === 'prs') {
return[...theRepo.activity.prs]
}
if (tab === 'issues') {
return [...theRepo.activity.issues]
}
};
$: items = filterItems(repo, currentTab); items = items;
const tabs = [
{value: 'all', text: 'All', icon: false },
{value: 'prs', text: 'PRs', icon: 'git-pull-request' },
{value: 'issues', text: 'Issues', icon: 'issue-opened' },
]
</script>
<article transition:fade="{{duration: 500}}" class="card vertical-flex">
<header class="card-header">
<div class="card-header-title">
<p class="grow">{repo.title}</p>
<a href="#" on:click|preventDefault={() => showSettings = !showSettings}>
<i class="icon ion-md-settings" data-testid="settings" />
</a>
</div>
</header>
<div class="card-content grow">
{#if showSettings }
<Settings repoId={repo.id} on:repo-deleted/>
{:else}
<div class="content stack">
<div class="tabs is-boxed">
<ul>
{#each tabs as tab}
<li class:is-active={currentTab === tab.value}>
<a on:click|preventDefault={() => currentTab = tab.value}>
<Github icon={tab.icon} />
<span>{tab.text}</span>
</a>
</li>
{/each}
</ul>
</div>
<Content items={items} />
</div>
{/if}
</div>
<footer class="card-footer">
<p class="is-size-7 card-footer-item">Last update 2min ago</p>
</footer>
</article>
<style>
ul {
margin-left: 0;
}
<style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment