test.

nomideusz · Mar 27, 2024 · 3356339 · 3356339
1 parent 38d010a
commit 3356339
Show file tree

Hide file tree

Showing 6 changed files with 202 additions and 72 deletions.
diff --git a/src/routes/(app)/rental/+page.svelte b/src/routes/(app)/rental/+page.svelte
@@ -1,19 +1,93 @@
 <script lang="ts">
   import { WebsiteName } from "../../../config"
-  import { useQueryClient } from "@tanstack/svelte-query"
-  const client = useQueryClient()
-  const cachedData = client.getQueryData(["ads"])
-  console.log(cachedData)
+  import { createQuery } from "@tanstack/svelte-query"
+
+  const rentQuery = createQuery({
+    queryKey: ["ads_combined"],
+    queryFn: async () => (await fetch("api")).json(),
+    select: (data) => data.rent,
+  })
 </script>
 
 <svelte:head>
   <title>Rental</title>
   <meta name="description" content="Rental ads for {WebsiteName}" />
 </svelte:head>
-{#if cachedData}
-  {#each cachedData as ad}
-    <p>{ad.title}</p>
-  {/each}
-{:else}
-  <p>Dane nie są dostępne w cache.</p>
-{/if}
+
+<div class="min-h-[70vh] pb-8 overflow-x-auto">
+  <table class="table">
+    <!-- head -->
+    <thead>
+      <tr>
+        <th>
+          <label>
+            <input type="checkbox" class="checkbox" />
+          </label>
+        </th>
+        <th>Tytuł</th>
+        <th>Dzielnica</th>
+        <th>Data</th>
+        <th>Cena</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      {#if $rentQuery.data && Array.isArray($rentQuery.data)}
+        {#each $rentQuery.data as ad}
+          <tr>
+            <th>
+              <label>
+                <input type="checkbox" class="checkbox" />
+              </label>
+            </th>
+            <td>
+              <div class="flex items-center gap-3">
+                <div class="avatar">
+                  <div class="mask mask-squircle w-12 h-12">
+                    <img
+                      src={ad.image_url}
+                      alt="Avatar Tailwind CSS Component"
+                    />
+                  </div>
+                </div>
+                <div>
+                  <div class="font-bold">{ad.title}</div>
+                  <div class="text-sm opacity-50">{ad.city}</div>
+                </div>
+              </div>
+            </td>
+            <td>
+              <div class="flex items-center gap-3">
+                <div>
+                  <div class="font-bold">{ad.district}</div>
+                  <div class="text-sm opacity-50">{ad.region_name}</div>
+                </div>
+              </div>
+            </td>
+            <td>
+              {ad.date}
+              <br />
+              <span class="badge badge-ghost badge-sm">{ad.created_at}</span>
+            </td>
+            <td>{ad.price}</td>
+            <th>
+              <button class="btn btn-ghost btn-xs">details</button>
+            </th>
+          </tr>
+        {/each}
+      {:else}
+        <p>Dane nie są dostępne w cache.</p>
+      {/if}
+    </tbody>
+    <!-- foot -->
+    <tfoot>
+      <tr>
+        <th></th>
+        <th>Name</th>
+        <th>Job</th>
+        <th>Favorite Color</th>
+        <th></th>
+      </tr>
+    </tfoot>
+  </table>
+</div>
diff --git a/src/routes/(app)/sales/+page.svelte b/src/routes/(app)/sales/+page.svelte
@@ -1,19 +1,84 @@
 <script lang="ts">
   import { WebsiteName } from "../../../config"
-  import { useQueryClient } from "@tanstack/svelte-query"
-  const client = useQueryClient()
-  const cachedData = client.getQueryData(["ads"])
-  console.log(cachedData)
+  import { createQuery } from "@tanstack/svelte-query"
+
+  const sellQuery = createQuery({
+    queryKey: ["ads_combined"],
+    queryFn: async () => (await fetch("api")).json(),
+    select: (data) => data.sell,
+  })
 </script>
 
 <svelte:head>
-  <title>Sales</title>
+  <title>Salling</title>
   <meta name="description" content="Rental ads for {WebsiteName}" />
 </svelte:head>
-{#if cachedData}
-  {#each cachedData as ad}
-    <p>{ad.region_name}</p>
-  {/each}
-{:else}
-  <p>Dane nie są dostępne w cache.</p>
-{/if}
+
+<div class="min-h-[70vh] pb-8 overflow-x-auto">
+  <table class="table">
+    <!-- head -->
+    <thead>
+      <tr>
+        <th>
+          <label>
+            <input type="checkbox" class="checkbox" />
+          </label>
+        </th>
+        <th>Name</th>
+        <th>Job</th>
+        <th>Favorite Color</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      {#if $sellQuery.data && Array.isArray($sellQuery.data)}
+        {#each $sellQuery.data as ad}
+          <tr>
+            <th>
+              <label>
+                <input type="checkbox" class="checkbox" />
+              </label>
+            </th>
+            <td>
+              <div class="flex items-center gap-3">
+                <div class="avatar">
+                  <div class="mask mask-squircle w-12 h-12">
+                    <img
+                      src={ad.image_url}
+                      alt="Avatar Tailwind CSS Component"
+                    />
+                  </div>
+                </div>
+                <div>
+                  <div class="font-bold">{ad.title}</div>
+                  <div class="text-sm opacity-50">{ad.city}</div>
+                </div>
+              </div>
+            </td>
+            <td>
+              {ad.city}
+              <br />
+              <span class="badge badge-ghost badge-sm">{ad.date}</span>
+            </td>
+            <td>{ad.price}</td>
+            <th>
+              <button class="btn btn-ghost btn-xs">details</button>
+            </th>
+          </tr>
+        {/each}
+      {:else}
+        <p>Dane nie są dostępne w cache.</p>
+      {/if}
+    </tbody>
+    <!-- foot -->
+    <tfoot>
+      <tr>
+        <th></th>
+        <th>Name</th>
+        <th>Job</th>
+        <th>Favorite Color</th>
+        <th></th>
+      </tr>
+    </tfoot>
+  </table>
+</div>
diff --git a/src/routes/(marketing)/pricing/+page.svelte b/src/routes/(marketing)/pricing/+page.svelte
@@ -1,24 +1,12 @@
 <script lang="ts">
   import PricingModule from "./pricing_module.svelte"
   import { WebsiteName } from "./../../../config"
-  import { useQueryClient } from "@tanstack/svelte-query"
-
-  const client = useQueryClient()
-  const cachedData = client.getQueryData(["ads"])
-  console.log(cachedData)
 </script>
 
 <svelte:head>
   <title>Pricing</title>
   <meta name="description" content="Pricing details for {WebsiteName}" />
 </svelte:head>
-{#if cachedData}
-  {#each cachedData as ad}
-    <p>{ad.title}</p>
-  {/each}
-{:else}
-  <p>Dane nie są dostępne w cache.</p>
-{/if}
 
 <div class="min-h-[70vh] pb-8 pt-[5vh] px-4">
   <h1 class="text-3xl font-bold text-center">Pricing</h1>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
   import { WebsiteName } from "../config"
   import logo from "$lib/img/zaur.png?enhanced&w=373"
-  import { createQuery } from "@tanstack/svelte-query"
-  const query = createQuery({
-    queryKey: ["ads"],
-    queryFn: async () => (await fetch("../api")).json(),
-  })
+  // import { createQuery } from "@tanstack/svelte-query"
+  // const query = createQuery({
+  //   queryKey: ["ads_combined"],
+  //   queryFn: async () => (await fetch("api")).json(),
+  // })
+
   const features = [
     {
       name: "Billing Portal",
@@ -26,17 +27,15 @@
   <meta name="description" content="{WebsiteName} Home Page" />
 </svelte:head>
 
-<div>
-  {#if $query.isFetching}
-    <p>Loading...</p>
-  {:else if $query.isError}
-    <p>Error: {$query.error.message}</p>
-  {:else if $query.isSuccess}
-    {#each $query.data as ad}
+<!-- <div>
+  {#if $query.data && Array.isArray($query.data.combined)}
+    {#each $query.data.combined as ad}
       <p>{ad.price}</p>
     {/each}
+  {:else}
+    <p>Ładowanie danych lub brak danych.</p>
   {/if}
-</div>
+</div> -->
 
 <div class="hero min-h-[60vh]">
   <div class="hero-content text-center py-12">

diff --git a/src/routes/+page.ts b/src/routes/+page.ts
@@ -1,17 +1,15 @@
 export const prerender = false
-export async function load({ parent, fetch }) {
-    const { queryClient } = await parent();
-
-    await queryClient.prefetchQuery({
-      queryKey: ['ads'],
-      queryFn: async () => {
-        const response = await fetch('api');
-        const ads = await response.json();
-        return ads;
-      },
-    });
+// W pliku +page.ts lub __layout.ts na stronie głównej
+export async function load({ fetch, parent }) {
+  const { queryClient } = await parent();
 
-    const cachedData = queryClient.getQueryData(["ads"])
-    console.log(cachedData)
-    return {};
-  }
+  await queryClient.prefetchQuery({
+    queryKey: ['ads_combined'],
+    queryFn: async () => {
+      const response = await fetch('api');
+      if (!response.ok) throw new Error('Network response was not ok');
+      return response.json();
+    },
+  });
+  return {};
+}
diff --git a/src/routes/api/+server.ts b/src/routes/api/+server.ts
@@ -5,13 +5,19 @@ import { json } from '@sveltejs/kit';
 const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);
 
 export async function GET() {
-    let { data, error } = await supabase
-    .from('ads_rent')
-    .select()
-    .order('created_at', { ascending: false })
-    .limit(200);
-
-    data = data.map(ad => ({ ...ad, section: 'rental' }));
+    try {
+        const [rentResponse, sellResponse] = await Promise.all([
+            supabase.from('ads_rent').select().order('created_at', { ascending: false }).limit(10),
+            supabase.from('ads_sell').select().order('created_at', { ascending: false }).limit(10)
+        ]);
 
-    return json(data);
-}
+        const adsRent = rentResponse.data.map(ad => ({ ...ad, section: 'rental' }));
+        const adsSell = sellResponse.data.map(ad => ({ ...ad, section: 'sales' }));
+
+        const combinedData = [...adsRent, ...adsSell];
+
+        return json({combined: combinedData, rent: adsRent, sell: adsSell});
+    } catch (error) {
+        return json({ error: error.message }, { status: 500 });
+    }
+}