From d6a59538b036c8b5ec2448b0569f564ec65134bc Mon Sep 17 00:00:00 2001
From: Nilesh <19304+nileshtrivedi@users.noreply.github.com>
Date: Sun, 22 May 2022 19:05:13 +0100
Subject: [PATCH 1/2] Fetch reviews on ItemDetail page

---
 src/ItemDetail.svelte | 57 ++++++++++---------------------------------
 1 file changed, 13 insertions(+), 44 deletions(-)

diff --git a/src/ItemDetail.svelte b/src/ItemDetail.svelte
index a97e046..480cc61 100644
--- a/src/ItemDetail.svelte
+++ b/src/ItemDetail.svelte
@@ -4,12 +4,19 @@
 
     export let itemid;
     let item;
+    let reviews = [];
 
     $: fetch(`/learn/items/${itemid}.json?_shape=object`)
         .then(r => r.json())
         .then(data => {
             item = data[itemid];
         });
+    
+    $: fetch(`/learn/reviews.json?_shape=array&item_id__exact=${itemid}`)
+      .then(r => r.json())
+      .then(data => {
+          reviews = data;
+    });
 
     function saveStatusToLocalStorage(event){
       // console.log($bookmarks)
@@ -127,55 +134,17 @@
       </div>
       
       <div class="flex flex-col md:flex-row md:overflow-x-auto md:pb-5 mt-3 gap-2">
+      {#each reviews as review}
         <article class="px-3 py-4 bg-gray-200 rounded-lg text-xs w-48 max-w-sm shrink-0">
-          <h3 class="font-semibold">About the book</h3>
-          <p class="mt-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit architecto praesentium expedita? Similique dolor iusto expedita enim, optio dignissimos eaque officiis perferendis eum ullam voluptas esse quia tenetur natus modi.</p>
+          <h3 class="font-semibold">{review.blurb.toString().slice(0,10)}...</h3>
+          <p class="mt-2">{review.blurb}</p>
           <div class="mt-3">
-            <span>★★★★★</span>
-            <span class="ml-2">Sep 22, 2021</span>
-            <span class="ml-2">Priyanka Trivedi</span>
+            <sl-rating value={review.rating}></sl-rating>
+            <span class="ml-2">...{review.by}</span>
           </div>
         </article>
+      {/each}
   
-        <article class="px-3 py-4 bg-gray-200 rounded-lg text-xs w-48 max-w-sm shrink-0">
-          <h3 class="font-semibold">About the book</h3>
-          <p class="mt-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit architecto praesentium expedita? Similique dolor iusto expedita enim, optio dignissimos eaque officiis perferendis eum ullam voluptas esse quia tenetur natus modi.</p>
-          <div class="mt-3">
-            <span>★★★★★</span>
-            <span class="ml-2">Sep 22, 2021</span>
-            <span class="ml-2">Priyanka Trivedi</span>
-          </div>
-        </article>
-
-        <article class="px-3 py-4 bg-gray-200 rounded-lg text-xs w-48 max-w-sm shrink-0">
-          <h3 class="font-semibold">About the book</h3>
-          <p class="mt-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit architecto praesentium expedita? Similique dolor iusto expedita enim, optio dignissimos eaque officiis perferendis eum ullam voluptas esse quia tenetur natus modi.</p>
-          <div class="mt-3">
-            <span>★★★★★</span>
-            <span class="ml-2">Sep 22, 2021</span>
-            <span class="ml-2">Priyanka Trivedi</span>
-          </div>
-        </article>
-
-        <article class="px-3 py-4 bg-gray-200 rounded-lg text-xs w-48 max-w-sm shrink-0">
-          <h3 class="font-semibold">About the book</h3>
-          <p class="mt-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit architecto praesentium expedita? Similique dolor iusto expedita enim, optio dignissimos eaque officiis perferendis eum ullam voluptas esse quia tenetur natus modi.</p>
-          <div class="mt-3">
-            <span>★★★★★</span>
-            <span class="ml-2">Sep 22, 2021</span>
-            <span class="ml-2">Priyanka Trivedi</span>
-          </div>
-        </article>
-
-        <article class="px-3 py-4 bg-gray-200 rounded-lg text-xs w-48 max-w-sm shrink-0">
-          <h3 class="font-semibold">About the book</h3>
-          <p class="mt-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit architecto praesentium expedita? Similique dolor iusto expedita enim, optio dignissimos eaque officiis perferendis eum ullam voluptas esse quia tenetur natus modi.</p>
-          <div class="mt-3">
-            <span>★★★★★</span>
-            <span class="ml-2">Sep 22, 2021</span>
-            <span class="ml-2">Priyanka Trivedi</span>
-          </div>
-        </article>
       </div>
     </section>
     <hr />

From 941fccd78276ad2d6997e98afd0942d7601bc06a Mon Sep 17 00:00:00 2001
From: Nilesh <19304+nileshtrivedi@users.noreply.github.com>
Date: Sun, 22 May 2022 19:40:55 +0100
Subject: [PATCH 2/2] Fix RandomItem link

---
 src/App.svelte | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 6aa1ebe..f019872 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -15,9 +15,13 @@
     import { SearchIcon } from "@rgossiaux/svelte-heroicons/outline";
 
     let currentView = "/topics";
+    let randomItemId;
 
-    function handleTabChanged(event) {
-        currentView = event.detail.tab;
+    function getRandomItemId(){
+        fetch('/learn.json?_shape=array&sql=select+rowid+from+items+order+by+random()+limit+1').then(r => r.json())
+        .then(data => {
+            randomItemId = data[0].rowid;
+        });
     }
 
 	async function hashchange() {
@@ -32,8 +36,11 @@
 		}
 	}
 
+    onMount(getRandomItemId);
 	onMount(hashchange);
     
+
+    
 </script>
 
 <svelte:window on:hashchange={hashchange}/>
@@ -56,6 +63,8 @@
             <CourseList/>
         {:else if currentView.startsWith("/item/")}
             <ItemDetail itemid={currentView.split("/")[2]}/>
+        {:else if currentView == "/random"}
+            {#if randomItemId}<ItemDetail itemid={randomItemId}/>{/if}
         {:else if currentView === "/search"}
             <AdvancedSearch/>
         {:else if currentView === "/wanttolearn"}
@@ -74,7 +83,7 @@
             <SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
             Formats
         </a>
-        <a href="#/item/1" class="text-indigo-100 hover:bg-indigo-600 w-full group flex items-center px-2 py-2 text-sm font-medium rounded-md">
+        <a href="#/random" on:click={getRandomItemId} class="text-indigo-100 hover:bg-indigo-600 w-full group flex items-center px-2 py-2 text-sm font-medium rounded-md">
             <SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
             Random Item
         </a>