make formatting a bit more idiomatic/consistent

Extiriority · Jun 15, 2019 · e2a999c · e2a999c
1 parent 043309a
commit e2a999c
Show file tree

Hide file tree

Showing 30 changed files with 570 additions and 632 deletions.
diff --git a/src/routes/[page].svelte b/src/routes/[page].svelte
@@ -1,9 +1,9 @@
+<script>
+	import Index from './_Index.svelte';
+</script>
+
 <svelte:head>
 	<title>Conduit</title>
 </svelte:head>
 
-<Index />
-
-<script>
-	import Index from './_Index.svelte';
-</script>
+<Index />
diff --git a/src/routes/_Index.svelte b/src/routes/_Index.svelte
@@ -1,41 +1,41 @@
-<div class="home-page">
-  <div class="banner">
-    <div class="container">
-      <h1 class="logo-font">conduit</h1>
-      <p>A place to share your knowledge.</p>
-    </div>
-  </div>
+<script>
+	import { onMount } from 'svelte';
+	import MainView from './_components/MainView/index.svelte';
+	import Tags from './_components/Tags.svelte';
+	import * as api from './_api.js';
 
-  <div class="container page">
-    <div class="row">
-      <MainView {tag} bind:tab />
+	let tab;
+	let tag;
+	let tags;
 
-      <div class="col-md-3">
-        <div class="sidebar">
-          <p>Popular Tags</p>
-          <Tags {tags} on:select='{setTags}' />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+	function setTags({ detail }) {
+		tag = detail.tag;
+		tab = "tag";
+	}
 
-<script>
-  import { onMount } from 'svelte'; 
-  import MainView from './_components/MainView/index.svelte';
-  import Tags from './_components/Tags.svelte';
-  import * as api from './_api.js';
+	onMount(async () => {
+		({ tags } = await api.get('tags'));
+	});
+</script>
 
-  let tab, tag, tags;
+<div class="home-page">
+	<div class="banner">
+		<div class="container">
+			<h1 class="logo-font">conduit</h1>
+			<p>A place to share your knowledge.</p>
+		</div>
+	</div>
 
-  function setTags({ detail }) {
-    tag = detail.tag; 
-    tab = "tag";
-  }
+	<div class="container page">
+		<div class="row">
+			<MainView {tag} bind:tab />
 
-  onMount(() => {
-    api.get('tags').then((response) => {
-      tags = response.tags
-    });
-  })
-</script>
+			<div class="col-md-3">
+				<div class="sidebar">
+					<p>Popular Tags</p>
+					<Tags {tags} on:select='{setTags}' />
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/src/routes/_components/ArticleList/ArticlePreview.svelte b/src/routes/_components/ArticleList/ArticlePreview.svelte
@@ -1,3 +1,25 @@
+<script>
+	import * as api from '../../_api.js';
+
+	export let article;
+	export let user;
+
+	async function toggleFavorite() {
+		// optimistic UI
+		if (article.favorited) {
+			article.favoritesCount -= 1;
+			article.favorited = false;
+		} else {
+			article.favoritesCount += 1;
+			article.favorited = true;
+		}
+
+		({ article } = await article.favorited
+			? api.post(`articles/${article.slug}/favorite`, null, user && user.token)
+			: api.del(`articles/${article.slug}/favorite`, user && user.token));
+	}
+</script>
+
 <div class="article-preview">
 	<div class="article-meta">
 		<a href='/@{article.author.username}'>
@@ -33,30 +55,4 @@
 			{/each}
 		</ul>
 	</a>
-</div>
-
-<script>
-	import * as api from '../../_api.js';
-
-	export let article, user;
-
-	function toggleFavorite() {
-		const promise = article.favorited ?
-			api.del(`articles/${article.slug}/favorite`, user && user.token) :
-			api.post(`articles/${article.slug}/favorite`, null, user && user.token);
-
-		promise.then(response => {
-			article = response.article;
-		});
-
-		// optimistic UI
-		if (article.favorited) {
-			article.favoritesCount -= 1;
-			article.favorited = false;
-		} else {
-			article.favoritesCount += 1;
-			article.favorited = true;
-		}
-	}
-	
-</script>
+</div>
diff --git a/src/routes/_components/ArticleList/ListPagination.svelte b/src/routes/_components/ArticleList/ListPagination.svelte
@@ -1,3 +1,20 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	export let articlesCount;
+	export let page;
+
+	let range;
+	const dispatch = createEventDispatcher();
+
+	$: {
+		range = [];
+		for (let i = 0; i < Math.ceil(articlesCount / 10); ++i) {
+			range.push(i);
+		}
+	}
+</script>
+
 {#if articlesCount > 10}
 	<nav>
 		<ul class="pagination">
@@ -9,21 +26,4 @@
 			{/each}
 		</ul>
 	</nav>
-{/if}
-
-<script>
-	import { createEventDispatcher } from 'svelte';
-	
-	export let articlesCount, page;
-	let range;
-	const dispatch = createEventDispatcher();
-
-	$:  {
-		const rangeArr = [];
-		for (let i = 0; i < Math.ceil(articlesCount / 10); ++i) {
-			rangeArr.push(i);
-		}
-		range = rangeArr;
-	}
-			
-</script>
+{/if}
diff --git a/src/routes/_components/ArticleList/index.svelte b/src/routes/_components/ArticleList/index.svelte
@@ -1,30 +1,18 @@
-{#if articles}
-	{#if articles.length === 0}
-		<div class="article-preview">
-			No articles are here... yet.
-		</div>
-	{:else}
-		<div>
-			{#each articles as article (article.slug)}
-				<ArticlePreview {article} user={$session.user}/>
-			{/each}
-
-			<ListPagination {articlesCount} page={parseInt($page.params.user, 10)}  />
-		</div>
-	{/if}
-{:else}
-	<div class="article-preview">Loading...</div>
-{/if}
-
 <script>
 	import { stores } from '@sapper/app';
 	import ArticlePreview from './ArticlePreview.svelte';
 	import ListPagination from './ListPagination.svelte';
 	import * as api from '../../_api.js';
 
-	export let tab, username = false, favorites = false, tag;
+	export let tab, username = false;
+	export let favorites = false;
+	export let tag;
+
 	const { session, page } = stores();
-	let query, articles, articlesCount;
+
+	let query;
+	let articles;
+	let articlesCount;
 
 	$: currentPage = $page.params && $page.params.page ? +$page.params.page - 1 : 0
 	$: {
@@ -40,14 +28,28 @@
 
 	$: query && getData();
 
-	function getData() {
+	async function getData() {
 		articles = null;
 
-		api.get(query, $session.user && $session.user.token)
-			.then(data => {
-				// TODO do we need some error handling here?
-				articles = data.articles;
-				articlesCount = data.articlesCount
-			});
+		// TODO do we need some error handling here?
+		({ articles, articlesCount } = await api.get(query, $session.user && $session.user.token));
 	}
-</script>
+</script>
+
+{#if articles}
+	{#if articles.length === 0}
+		<div class="article-preview">
+			No articles are here... yet.
+		</div>
+	{:else}
+		<div>
+			{#each articles as article (article.slug)}
+				<ArticlePreview {article} user={$session.user}/>
+			{/each}
+
+			<ListPagination {articlesCount} page={parseInt($page.params.user, 10)}  />
+		</div>
+	{/if}
+{:else}
+	<div class="article-preview">Loading...</div>
+{/if}
diff --git a/src/routes/_components/ListErrors.svelte b/src/routes/_components/ListErrors.svelte
@@ -1,11 +1,11 @@
+<script>
+	export let errors;
+</script>
+
 {#if errors}
 	<ul class="error-messages">
 		{#each Object.keys(errors) as key}
 			<li>{key} {errors[key]}</li>
 		{/each}
 	</ul>
-{/if}
-
-<script>
-	export let errors;
-</script>
+{/if}
diff --git a/src/routes/_components/MainView/index.svelte b/src/routes/_components/MainView/index.svelte
@@ -1,3 +1,23 @@
+<script>
+	import { stores } from '@sapper/app';
+	import ArticleList from '../ArticleList/index.svelte';
+
+	export let tab = 'all';
+	export let tag = null;
+
+	const { session } = stores();
+
+	function yourFeed() {
+		tab = "feed";
+		tag = null;
+	}
+
+	function globalfeed() {
+		tab = "all";
+		tag = null;
+	}
+</script>
+
 <div class="col-md-9">
 	<div class="feed-toggle">
 		<ul class="nav nav-pills outline-active">
@@ -32,22 +52,4 @@
 	</div>
 
 	<ArticleList {tab} {tag}/>
-</div>
-
-<script>
-	import { stores } from '@sapper/app';
-	import ArticleList from '../ArticleList/index.svelte';
-
-	export let tab = 'all', tag = null;
-	const { session } = stores();
-
-	function yourFeed() {
-		tab = "feed";
-		tag = null;
-	}
-
-	function globalfeed() {
-		tab = "all";
-		tag = null;
-	}
-</script>
+</div>