From 2537d35b1e309f8ffd6982b07656bd4bd78eabec Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Fri, 23 Dec 2022 11:55:53 +0800
Subject: [PATCH] #53 finalize reviews layout

---
 .../PackageReviews/PackageReviews.svelte      | 17 ++++++++++----
 modules/gui/src/libs/api/mock.ts              |  2 +-
 modules/gui/src/libs/api/tauri.ts             |  5 +++--
 .../src/routes/packages/[slug]/+page.svelte   | 22 +++++++++----------
 4 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/modules/gui/src/components/PackageReviews/PackageReviews.svelte b/modules/gui/src/components/PackageReviews/PackageReviews.svelte
index bf765b7..d7d6a11 100644
--- a/modules/gui/src/components/PackageReviews/PackageReviews.svelte
+++ b/modules/gui/src/components/PackageReviews/PackageReviews.svelte
@@ -6,8 +6,12 @@
 	import type { Review } from '@tea/ui/types';
 	export let reviews: Review[];
 
+	export let showLimit = 9;
+	let showMore = false;
+
 	const getColReviews = (n: number) => {
-		return reviews.filter((_item, i) => (i - n) % 3 === 0);
+		const showReviews = reviews.filter((_item, i) => (i - n) % 3 === 0);
+		return showMore ? showReviews : showReviews.slice(0, showLimit / 3);
 	};
 
 	let col1: Review[] = [];
@@ -26,22 +30,27 @@
 
 <header class="border border-gray bg-black p-4 text-primary">REVIEWS ({reviews.length})</header>
 <section class="flex flex-row flex-wrap bg-black font-machina">
-	<div class="w-1/3 border-0 border-l-2 border-gray p-4">
+	<div class="w-1/3 border-0 border-l-2 border-b-2 border-gray p-4">
 		{#each col1 as review}
 			<ReviewCard {review} />
 			<div class="mt-4" />
 		{/each}
 	</div>
-	<div class="w-1/3 border-0 border-l-2 border-gray p-4">
+	<div class="w-1/3 border-0 border-l-2 border-b-2 border-gray p-4">
 		{#each col2 as review}
 			<ReviewCard {review} />
 			<div class="mt-4" />
 		{/each}
 	</div>
-	<div class="w-1/3 border-0 border-x-2 border-gray p-4">
+	<div class="w-1/3 border-0 border-x-2 border-b-2 border-gray p-4">
 		{#each col3 as review}
 			<ReviewCard {review} />
 			<div class="mt-4" />
 		{/each}
 	</div>
 </section>
+{#if showLimit <= reviews.length && showMore === false}
+	<footer class="border border-gray bg-black p-4">
+		<button on:click={() => (showMore = true)}>SHOW MORE</button>
+	</footer>
+{/if}
diff --git a/modules/gui/src/libs/api/mock.ts b/modules/gui/src/libs/api/mock.ts
index ac91c9e..89f2c1b 100644
--- a/modules/gui/src/libs/api/mock.ts
+++ b/modules/gui/src/libs/api/mock.ts
@@ -172,7 +172,7 @@ export async function getFeaturedPackages(): Promise<Package[]> {
 export async function getPackageReviews(full_name: string): Promise<Review[]> {
 	console.log(`generating reviews for ${full_name}`);
 
-	const reviewCount = _.random(7, 21);
+	const reviewCount = _.random(9, 21);
 	const reviews: Review[] = [];
 
 	for (let i = 0; i < reviewCount; i++) {
diff --git a/modules/gui/src/libs/api/tauri.ts b/modules/gui/src/libs/api/tauri.ts
index af8e6d3..e94c21d 100644
--- a/modules/gui/src/libs/api/tauri.ts
+++ b/modules/gui/src/libs/api/tauri.ts
@@ -71,8 +71,9 @@ export async function getFeaturedPackages(): Promise<Package[]> {
 
 export async function getPackageReviews(full_name: string): Promise<Review[]> {
 	console.log(`getting reviews for ${full_name}`);
-	const reviews: Review[] = await mock.getPackageReviews(full_name);
-
+	const reviews: Review[] = await get<Review[]>(
+		`packages/${full_name.replaceAll('/', ':')}/reviews`
+	);
 	return reviews;
 }
 
diff --git a/modules/gui/src/routes/packages/[slug]/+page.svelte b/modules/gui/src/routes/packages/[slug]/+page.svelte
index d6bc051..ee5eacb 100644
--- a/modules/gui/src/routes/packages/[slug]/+page.svelte
+++ b/modules/gui/src/routes/packages/[slug]/+page.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import '$appcss';
 	import PageHeader from '$components/PageHeader/PageHeader.svelte';
-	import { backLink } from '$libs/stores';
+	import { backLink, packagesReviewStore } from '$libs/stores';
 	import PackageBanner from '$components/PackageBanner/PackageBanner.svelte';
-	// import PackageReviews from '$components/PackageReviews/PackageReviews.svelte';
+	import PackageReviews from '$components/PackageReviews/PackageReviews.svelte';
+	import type { Review } from '@tea/ui/types';
 	backLink.set('/packages');
 
 	/** @type {import('./$types').PageData} */
@@ -15,19 +16,19 @@
 
 	let pkg: Package;
 
-	// let reviews: Review[];
+	let reviews: Review[];
 
 	const setPkg = (pkgs: Package[]) => {
 		const foundPackage = pkgs.find(({ slug }) => slug === data?.slug) as Package;
 		if (!pkg && foundPackage) {
 			pkg = foundPackage;
 		}
-		// TODO: uncomment when api is ready
-		// if (!reviews && pkg) {
-		// 	packagesReviewStore.subscribe(pkg.full_name, (updatedReviews) => {
-		// 		reviews = updatedReviews;
-		// 	});
-		// }
+
+		if (!reviews && pkg) {
+			packagesReviewStore.subscribe(pkg.full_name, (updatedReviews) => {
+				reviews = updatedReviews;
+			});
+		}
 	};
 
 	packagesStore.subscribe(setPkg);
@@ -39,10 +40,7 @@
 	<section>
 		<PackageBanner {pkg} />
 	</section>
-	<!-- 
-	TODO: uncomment when api is ready	
 	<section class="mt-8">
 		<PackageReviews reviews={reviews || []} />
 	</section>
-	-->
 </div>