Moved reusable components to lib. Made reusable appdetails like insta…

…lls and rating
ddxv · Oct 22, 2023 · 75c0f9e · 75c0f9e
1 parent e628154
commit 75c0f9e
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 43 deletions.
diff --git a/backend/dbcon/queries.py b/backend/dbcon/queries.py
@@ -30,7 +30,6 @@ def query_recent_apps(period: str = "weekly", limit=20):
             "tablet_image_url_1",
         ]
     )
-
     sel_query = f"""
                 (
                     SELECT 
@@ -51,6 +50,7 @@ def query_recent_apps(period: str = "weekly", limit=20):
                 );
                 """
     df = pd.read_sql(sel_query, con=DBCON.engine)
+
     df = clean_app_df(df)
     return df
 
@@ -373,13 +373,11 @@ def get_single_app(app_id: str) -> pd.DataFrame:
 
 def clean_app_df(df: pd.DataFrame) -> pd.DataFrame:
     df["store"] = df["store"].replace({1: "Google Play", 2: "Apple App Store"})
-    df["installs"] = df["installs"].apply(lambda x: "{:,.0f}".format(x) if x else "N/A")
-    df["review_count"] = df["review_count"].apply(
-        lambda x: "{:,.0f}".format(x) if x else "N/A"
-    )
-    df["rating_count"] = df["rating_count"].apply(
-        lambda x: "{:,.0f}".format(x) if x else "N/A"
-    )
+    string_nums = ["installs", "review_count", "rating_count"]
+    for col in string_nums:
+        df[col] = df[col].apply(
+            lambda x: "{:,.0f}".format(x) if not np.isnan(x) else "N/A"
+        )
     df["rating"] = df["rating"].apply(lambda x: round(x, 2) if x else 0)
     ios_link = "https://apps.apple.com/us/app/-/id"
     play_link = "https://play.google.com/store/apps/details?id="
@@ -396,7 +394,6 @@ def clean_app_df(df: pd.DataFrame) -> pd.DataFrame:
             + df["developer_id"]
         )
 
-    df["rating_percent"] = (1 - (df["rating"] / 5)) * 100
     date_cols = ["created_at", "store_last_updated", "updated_at"]
     for x in date_cols:
         if x not in df.columns:

diff --git a/frontend/src/routes/ExternalLinkSVG.svelte → frontend/src/lib/ExternalLinkSVG.svelte b/frontend/src/routes/ExternalLinkSVG.svelte → frontend/src/lib/ExternalLinkSVG.svelte
diff --git a/frontend/src/routes/Rating.svelte → frontend/src/lib/Rating.svelte b/frontend/src/routes/Rating.svelte → frontend/src/lib/Rating.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Star from './Star.svelte';
 	// import { twMerge } from 'tailwind-merge';
-	import generateId from '../lib/utils/generateIds.js';
+	import generateId from './utils/generateIds.js';
 	import type { ComponentType } from 'svelte';
 
 	// export let divClass: string = 'flex items-center';

diff --git a/frontend/src/lib/RatingInstalls.svelte b/frontend/src/lib/RatingInstalls.svelte
@@ -0,0 +1,25 @@
+<script>
+	import Rating from '$lib/Rating.svelte';
+	import IconDownload from '$lib/IconDownload.svelte';
+	export let app; // Accept the app object as a prop
+</script>
+
+<div class="inline-block">
+	<h5 class="h5 p-2">{app.name}</h5>
+	<!-- Ratings: STARS (123) -->
+	{#if app.rating_count != 0 && app.rating_count != 'N/A'}
+		<div class="inline-flex p-1">
+			<Rating total={5} size={20} rating={app.rating} />
+			({app.rating_count})
+		</div>
+	{/if}
+	<!-- Installs DownloadIcon 123-->
+	{#if app.installs != 0 && app.installs != 'N/A'}
+		<div class="block p-0">
+			<div class="inline-flex">
+				<IconDownload />
+				{app.installs}
+			</div>
+		</div>
+	{/if}
+</div>
diff --git a/frontend/src/routes/Star.svelte → frontend/src/lib/Star.svelte b/frontend/src/routes/Star.svelte → frontend/src/lib/Star.svelte
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
@@ -14,7 +14,7 @@
 		<!-- App Bar -->
 		<AppBar>
 			<svelte:fragment slot="lead">
-				<strong class="text-xl uppercase">App Store Data</strong>
+				<a href="/" class="text-xl uppercase"><strong>App Store Data</strong></a>
 			</svelte:fragment>
 			<TabGroup
 				justify="justify-start"

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
@@ -1,7 +1,6 @@
 <script>
 	export let data;
-	import IconDownload from '$lib/IconDownload.svelte';
-	import Rating from './Rating.svelte';
+	import AppDetails from '$lib/RatingInstalls.svelte';
 	function getClass(app) {
 		return app.featured_image_url && app.featured_image_url !== 'null' ? 'col-span-2' : '';
 	}
@@ -23,6 +22,7 @@
 								<div class="app-item">
 									<header>
 										<div>
+											<!-- Show Featured Image (spans 2 cols) -->
 											{#if app.featured_image_url && app.featured_image_url != 'null'}
 												<div class="justify-center">
 													<img
@@ -37,24 +37,9 @@
 														src={app.icon_url_512}
 														alt={app.name}
 													/>
-													<div class="inline-block">
-														<h5 class="h5 p-3">{app.name}</h5>
-														{#if app.rating_count != 0 && app.rating_count != 'N/A'}
-															<div class="inline-flex p-2">
-																<Rating total={5} size={20} rating={app.rating} />
-																({app.rating_count})
-															</div>
-														{/if}
-														{#if app.installs != 0 && app.installs != 'N/A'}
-															<div class="block p-2">
-																<div class="inline-flex">
-																	<IconDownload />
-																	{app.installs}
-																</div>
-															</div>
-														{/if}
-													</div>
+													<AppDetails {app} />
 												</div>
+												<!-- Show Icon Only (smaller) -->
 											{:else if app.tablet_image_url && app.tablet_image_url != 'null'}
 												<div>
 													<img
@@ -74,15 +59,7 @@
 													src={app.icon_url_512}
 													alt={app.name}
 												/>
-												<div class="card-footer p-2">
-													<h5 class="h5">{app.name}</h5>
-													{#if app.rating_count != 0 && app.rating_count != 'N/A'}
-														<div class="inline-flex">
-															<Rating total={5} size={20} rating={app.rating} />
-															({app.rating_count})
-														</div>
-													{/if}
-												</div>
+												<AppDetails {app} />
 											{/if}
 										</div>
 									</header>

diff --git a/frontend/src/routes/apps/[id]/+page.svelte b/frontend/src/routes/apps/[id]/+page.svelte
@@ -1,8 +1,8 @@
 <script>
-	import ExternalLinkSvg from '../../ExternalLinkSVG.svelte';
+	import ExternalLinkSvg from '$lib/ExternalLinkSVG.svelte';
 	/** @type {import('../[id]/$types').PageData} */
 	export let data;
-	import Rating from '../../Rating.svelte';
+	import Rating from '$lib/Rating.svelte';
 </script>
 
 <!-- Navbar component inclusion should be done here, I assume it's a Svelte component -->
@@ -23,8 +23,6 @@
 				<img src={data.myapp.featured_image} alt={data.myapp.name} class="app-icon" />
 			{/if}
 		</div>
-		<!-- If app_rating is another Svelte component -->
-		<!-- <AppRating app={data.myapp} /> -->
 
 		<div class="card-footer important-info">
 			<p>Store: {data.myapp.store}</p>