#70 use airtable data by GET /posts?tag=news/course

packages/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import '$appcss';
-	import { getAllPosts } from '$libs/api/mock';
+	import { getAllPosts } from '@api';
 	import type { AirtablePost } from '@tea/ui/types';
 	import Posts from '@tea/ui/Posts/Posts.svelte';
 	import PanelHeader from '@tea/ui/PanelHeader/PanelHeader.svelte';
+	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
 	import { onMount } from 'svelte';
 
 	let courses: AirtablePost[] = [];
@@ -14,4 +15,10 @@
 </script>
 
 <PanelHeader title="Essential Workshops" ctaLabel="View all" ctaLink="/" />
+{#if courses.length}
 	<Posts posts={courses} />
+{:else}
+	<section class="h-64 border border-gray p-4">
+		<Preloader />
+	</section>
+{/if}

packages/gui/src/components/News/News.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import '$appcss';
-	import { getAllPosts } from '$libs/api/mock';
+	import { getAllPosts } from '@api';
 	import type { AirtablePost } from '@tea/ui/types';
 	import Posts from '@tea/ui/Posts/Posts.svelte';
 	import PanelHeader from '@tea/ui/PanelHeader/PanelHeader.svelte';
+	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
 	import { onMount } from 'svelte';
 
 	let news: AirtablePost[] = [];
@@ -14,4 +15,10 @@
 </script>
 
 <PanelHeader title="Open-source News" ctaLabel="Read more articles >" ctaLink="/" />
+{#if news.length}
 	<Posts posts={news} />
+{:else}
+	<section class="h-64 border border-gray p-4">
+		<Preloader />
+	</section>
+{/if}

packages/gui/src/libs/api/tauri.ts

@@ -14,26 +14,21 @@ import { getClient } from '@tauri-apps/api/http';
 // import { invoke } from '@tauri-apps/api';
 import { Command } from '@tauri-apps/api/shell';
 import { readDir, BaseDirectory } from '@tauri-apps/api/fs';
-import { Buffer } from 'buffer';
-import type { Package, Review } from '@tea/ui/types';
+import type { Package, Review, AirtablePost } from '@tea/ui/types';
 import type { GUIPackage, Course } from '../types';
 import * as mock from './mock';
 import { PackageStates } from '../types';
-import { AirtablePost } from '../../../../ui/src/types';
-
-const username = 'user';
-const password = 'password';
-const auth = 'Basic ' + Buffer.from(username + ':' + password).toString('base64');
 
 const base = 'https://api.tea.xyz/v1';
 
-async function get<T>(path: string) {
+async function get<T>(path: string, query?: { [key: string]: any }) {
 	const client = await getClient();
 	const uri = join(base, path);
 	const { data } = await client.get<T>(uri.toString(), {
 		headers: {
-			Authorization: auth
-		}
+			Authorization: 'public' // TODO: figure out why req w/o Authorization does not work
+		},
+		query: query || {}
 	});
 	return data;
 }
@@ -149,8 +144,8 @@ export async function getTopPackages(): Promise<GUIPackage[]> {
 	return packages;
 }
 
-export async function getAllPosts(type: string): Promise<AirtablePost[]> {
-	// add filter here someday: type = news | course
-	const posts = await mock.getAllPosts(type);
+export async function getAllPosts(tag: string): Promise<AirtablePost[]> {
+	// add filter here someday: tag = news | course
+	const posts = await get<AirtablePost[]>('posts', { tag });
 	return posts;
 }

packages/ui/src/Posts/Posts.svelte

@@ -12,9 +12,9 @@
 				<figure class="w-1/3">
 					<img src={article.thumb_image_url} alt={article.title} />
 				</figure>
-				<section class="p-4 font-sono">
+				<section class="w-2/3 p-4 font-sono">
 					<h1 class="text-xl text-primary">{article.title}</h1>
-					<p class="my-4 text-sm">{article.short_description}</p>
+					<p class="my-4 text-sm line-clamp-4">{article.short_description}</p>
 					<a href={article.link} class="text-sm text-primary underline">Read more ...</a>
 				</section>
 			</article>