Created
January 15, 2020 13:32
-
-
Save felipesere/3edbbb4c17deb4708a901d8c82cdbd39 to your computer and use it in GitHub Desktop.
'items' does not update when clicking any of the tabs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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