use a store

Author: benmccann

src/lib/ArticleList/index.svelte

@@ -1,7 +1,7 @@
 <script>
+	import { user } from '$lib/stores';
 	import ArticlePreview from './ArticlePreview.svelte';
 
-	export let user;
 	export let articles;
 </script>
 
@@ -10,7 +10,7 @@
 {:else}
 	<div>
 		{#each articles as article (article.slug)}
-			<ArticlePreview {article} {user} />
+			<ArticlePreview {article} user={$user} />
 		{/each}
 	</div>
 {/if}

src/lib/Nav.svelte

@@ -1,7 +1,6 @@
 <script>
 	import { page } from '$app/stores';
-
-	export let user;
+	import { user } from '$lib/stores';
 </script>
 
 <nav class="navbar navbar-light">
@@ -14,7 +13,7 @@
 				>
 			</li>
 
-			{#if user}
+			{#if $user}
 				<li class="nav-item">
 					<a
 						rel="prefetch"
@@ -38,9 +37,9 @@
 				</li>
 
 				<li class="nav-item">
-					<a rel="prefetch" href="/profile/@{user.username}" class="nav-link">
+					<a rel="prefetch" href="/profile/@{$user.username}" class="nav-link">
 						<!-- <img src={$user.image} class="user-pic" alt={$user.username}> -->
-						{user.username}
+						{$user.username}
 					</a>
 				</li>
 			{:else}

src/lib/stores.js

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const user = writable();

src/routes/+layout.svelte

@@ -1,16 +1,19 @@
 <script>
 	import { navigating } from '$app/stores';
+	import { user } from '$lib/stores';
 	import Nav from '$lib/Nav.svelte';
 	import PreloadingIndicator from '$lib/PreloadingIndicator.svelte';
 
 	export let data;
+
+	$: user.set(data.user);
 </script>
 
 {#if $navigating}
 	<PreloadingIndicator />
 {/if}
 
-<Nav user={data.user} />
+<Nav />
 
 <main>
 	<slot />

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { page } from '$app/stores';
+	import { user } from '$lib/stores';
 	import ArticleList from '$lib/ArticleList/index.svelte';
 	import Pagination from '$lib/Pagination.svelte';
 
@@ -17,7 +18,7 @@
 </svelte:head>
 
 <div class="home-page">
-	{#if !data.user}
+	{#if !$user}
 		<div class="banner">
 			<div class="container">
 				<h1 class="logo-font">conduit</h1>
@@ -42,7 +43,7 @@
 							</a>
 						</li>
 
-						{#if data.user}
+						{#if $user}
 							<li class="nav-item">
 								<a href="/?tab=feed" rel="prefetch" class="nav-link" class:active={tab === 'feed'}>
 									Your Feed
@@ -65,7 +66,7 @@
 					</ul>
 				</div>
 
-				<ArticleList articles={data.articles} user={data.user} />
+				<ArticleList articles={data.articles} />
 				<Pagination pages={data.pages} {p} href={(p) => `/?${page_link_base}&page=${p}`} />
 			</div>
 

src/routes/article/[slug]/+page.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { marked } from 'marked';
 
+	import { user } from '$lib/stores';
 	import ArticleMeta from './_ArticleMeta.svelte';
 	import CommentContainer from './_CommentContainer.svelte';
 
@@ -18,7 +19,7 @@
 	<div class="banner">
 		<div class="container">
 			<h1>{data.article.title}</h1>
-			<ArticleMeta article={data.article} user={data.user} />
+			<ArticleMeta article={data.article} user={$user} />
 		</div>
 	</div>
 
@@ -42,7 +43,7 @@
 		<div class="article-actions" />
 
 		<div class="row">
-			<CommentContainer slug={data.slug} comments={data.comments} user={data.user} errors={[]} />
+			<CommentContainer slug={data.slug} comments={data.comments} user={$user} errors={[]} />
 		</div>
 	</div>
 </div>

src/routes/login/+page.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { goto } from '$app/navigation';
+	import { user } from '$lib/stores';
 	import { post } from '$lib/utils.js';
 	import ListErrors from '$lib/ListErrors.svelte';
 
@@ -14,6 +15,7 @@
 		errors = response.errors;
 
 		if (response.user) {
+			user.set(response.user);
 			goto('/');
 		}
 	}

src/routes/profile/%40[user]/+layout.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { page } from '$app/stores';
+	import { user } from '$lib/stores';
 
 	/** @type {import('./$types').PageData} */
 	export let data;
@@ -8,7 +9,7 @@
 	// https://github.com/sveltejs/kit/issues/269
 	$: segments = $page.url.pathname.split('/');
 	$: is_favorites = segments.length === 4 && segments[3] === 'favorites';
-	$: is_user = data.user && data.profile.username === data.user.username;
+	$: is_user = $user && data.profile.username === $user.username;
 
 	let current_token;
 	async function toggle_following() {
@@ -54,7 +55,7 @@
 							<i class="ion-gear-a" />
 							Edit Profile Settings
 						</a>
-					{:else if data.user}
+					{:else if $user}
 						<button
 							class="btn btn-sm action-btn {data.profile.following
 								? 'btn-secondary'

src/routes/profile/%40[user]/+page.svelte

@@ -10,4 +10,4 @@
 	export let data;
 </script>
 
-<ArticleList articles={data.articles} user={data.user} />
+<ArticleList articles={data.articles} />

src/routes/profile/%40[user]/favorites/+page.svelte

@@ -10,4 +10,4 @@
 	export let data;
 </script>
 
-<ArticleList articles={data.articles} user={data.user} />
+<ArticleList articles={data.articles} />