Merge pull request #107 from teaxyz/finalize-reviews

#53 finalize reviews layout

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}

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++) {

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;
 }
 

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) {
+		if (!reviews && pkg) {
-		// 	packagesReviewStore.subscribe(pkg.full_name, (updatedReviews) => {
+			packagesReviewStore.subscribe(pkg.full_name, (updatedReviews) => {
-		// 		reviews = 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>