ivabus/gui
1
0
Fork 0
mirror of https://github.com/ivabus/gui synced 2025-06-07 15:50:27 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #107 from teaxyz/finalize-reviews

Browse source 
#53 finalize reviews layout
This commit is contained in:
Neil 2022-12-23 12:02:25 +08:00 committed by GitHub
commit 4717c17f56
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 27 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
modules/gui/src/components/PackageReviews/PackageReviews.svelte
View file

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

2
modules/gui/src/libs/api/mock.ts
View file

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

5
modules/gui/src/libs/api/tauri.ts
View file

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

22
modules/gui/src/routes/packages/[slug]/+page.svelte
View file

@ -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>