From aaad607d93ce13c54af4b4e6242de75ac58f00ad Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Fri, 9 Dec 2022 12:54:47 +0800
Subject: [PATCH] #75 list package categories in home/discover page

---
 .../CategorizedPackages.svelte                | 30 +++++++++++++++++++
 .../InstalledPackages.svelte                  |  1 -
 packages/gui/src/libs/api/mock.ts             | 26 +++++++++++++++-
 packages/gui/src/libs/api/tauri.ts            |  7 ++++-
 packages/gui/src/libs/types.ts                |  6 ++++
 packages/gui/src/routes/+page.svelte          |  4 +++
 6 files changed, 71 insertions(+), 3 deletions(-)
 create mode 100644 packages/gui/src/components/CategorizedPackages/CategorizedPackages.svelte

diff --git a/packages/gui/src/components/CategorizedPackages/CategorizedPackages.svelte b/packages/gui/src/components/CategorizedPackages/CategorizedPackages.svelte
new file mode 100644
index 0000000..8ff82c8
--- /dev/null
+++ b/packages/gui/src/components/CategorizedPackages/CategorizedPackages.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import PanelHeader from '@tea/ui/PanelHeader/PanelHeader.svelte';
+	import MiniPackageCard from '@tea/ui/MiniPackageCard/MiniPackageCard.svelte';
+	import type { Category } from '$libs/types';
+	import { onMount } from 'svelte';
+	import { getCategorizedPackages } from '@api';
+
+	let categories: Category[] = [];
+
+	onMount(async () => {
+		categories = await getCategorizedPackages();
+	});
+</script>
+
+{#each categories as category}
+	<PanelHeader ctaLabel={category.cta_label} ctaLink={'#'} title={category.label} />
+	<ul class="grid grid-cols-3 border border-r-0 border-gray bg-black">
+		{#each category.packages as pkg}
+			<div class="border border-t-0 border-l-0 border-gray p-4">
+				<MiniPackageCard
+					{pkg}
+					ctaLabel="DETAILS"
+					onClickCTA={async () => {
+						console.log('do something with:', pkg.full_name);
+					}}
+				/>
+			</div>
+		{/each}
+	</ul>
+{/each}
diff --git a/packages/gui/src/components/InstalledPackages/InstalledPackages.svelte b/packages/gui/src/components/InstalledPackages/InstalledPackages.svelte
index 76b1709..76a8393 100644
--- a/packages/gui/src/components/InstalledPackages/InstalledPackages.svelte
+++ b/packages/gui/src/components/InstalledPackages/InstalledPackages.svelte
@@ -21,7 +21,6 @@
 			<div class="border border-t-0 border-l-0 border-gray p-4">
 				<MiniPackageCard
 					{pkg}
-					link={`/packages/${pkg.slug}`}
 					ctaLabel="DETAILS"
 					onClickCTA={async () => {
 						console.log('do something with:', pkg.full_name);
diff --git a/packages/gui/src/libs/api/mock.ts b/packages/gui/src/libs/api/mock.ts
index b96ed7f..ac91c9e 100644
--- a/packages/gui/src/libs/api/mock.ts
+++ b/packages/gui/src/libs/api/mock.ts
@@ -6,7 +6,7 @@
  *  * make cors work with api.tea.xyz/v1
  */
 import type { Package, Review, AirtablePost } from '@tea/ui/types';
-import type { GUIPackage, Course } from '../types';
+import type { GUIPackage, Course, Category } from '../types';
 import { PackageStates } from '../types';
 import { loremIpsum } from 'lorem-ipsum';
 import _ from 'lodash';
@@ -298,3 +298,27 @@ export async function getAllPosts(type: string): Promise<AirtablePost[]> {
 
 	return posts;
 }
+
+export async function getCategorizedPackages(): Promise<Category[]> {
+	const mockPackages = packages.slice(0, 9).map((pkg) => ({
+		...pkg,
+		state: PackageStates.AVAILABLE
+	}));
+	return [
+		{
+			label: 'framework essentials',
+			cta_label: 'View all essentials >',
+			packages: mockPackages
+		},
+		{
+			label: 'star-struck heavyweights',
+			cta_label: 'View all star-strucks >',
+			packages: mockPackages
+		},
+		{
+			label: 'simply delightful',
+			cta_label: 'View all delightful packages >',
+			packages: mockPackages
+		}
+	];
+}
diff --git a/packages/gui/src/libs/api/tauri.ts b/packages/gui/src/libs/api/tauri.ts
index de0ac21..753180f 100644
--- a/packages/gui/src/libs/api/tauri.ts
+++ b/packages/gui/src/libs/api/tauri.ts
@@ -15,7 +15,7 @@ import { getClient } from '@tauri-apps/api/http';
 import { Command } from '@tauri-apps/api/shell';
 import { readDir, BaseDirectory } from '@tauri-apps/api/fs';
 import type { Package, Review, AirtablePost } from '@tea/ui/types';
-import type { GUIPackage, Course } from '../types';
+import type { GUIPackage, Course, Category } from '../types';
 import * as mock from './mock';
 import { PackageStates } from '../types';
 
@@ -156,3 +156,8 @@ export async function getAllPosts(tag: string): Promise<AirtablePost[]> {
 	const posts = await get<AirtablePost[]>('posts', { tag });
 	return posts;
 }
+
+export async function getCategorizedPackages(): Promise<Category[]> {
+	const cats = await mock.getCategorizedPackages();
+	return cats;
+}
diff --git a/packages/gui/src/libs/types.ts b/packages/gui/src/libs/types.ts
index e7bde39..b4617f4 100644
--- a/packages/gui/src/libs/types.ts
+++ b/packages/gui/src/libs/types.ts
@@ -23,3 +23,9 @@ export type Course = {
 	banner_image_url: string;
 	link: string;
 };
+
+export type Category = {
+	label: string;
+	cta_label: string;
+	packages: GUIPackage[];
+};
diff --git a/packages/gui/src/routes/+page.svelte b/packages/gui/src/routes/+page.svelte
index b7b8a6d..091d638 100644
--- a/packages/gui/src/routes/+page.svelte
+++ b/packages/gui/src/routes/+page.svelte
@@ -7,6 +7,7 @@
 	import GettingStarted from '$components/GettingStarted/GettingStarted.svelte';
 	import TopPackages from '$components/TopPackages/TopPackages.svelte';
 	import News from '$components/News/News.svelte';
+	import CategorizedPackages from '$components/CategorizedPackages/CategorizedPackages.svelte';
 	backLink.set('');
 </script>
 
@@ -21,6 +22,9 @@
 	<section class="mt-8">
 		<TopPackages />
 	</section>
+	<section class="mt-8">
+		<CategorizedPackages />
+	</section>
 	<section class="mt-8">
 		<News />
 	</section>