Moved all files to typescript so we can also run svelte check before …

…push

.pre-commit-config.yaml

@@ -46,3 +46,12 @@ repos:
           - "@typescript-eslint/eslint-plugin"
           - "@typescript-eslint/parser"
           - svelte-eslint-parser
+  - repo: local
+    hooks:
+      - id: svelte-check
+        name: Svelte check
+        language: system
+        entry: npx svelte-check --fail-on-warnings
+        always_run: true
+        pass_filenames: false
+        require_serial: true

frontend/package.json

@@ -29,7 +29,7 @@
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
 		"svelte": "^4.2.2",
-		"svelte-check": "^3.4.3",
+		"svelte-check": "^3.5.2",
 		"tailwindcss": "^3.3.2",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",

frontend/src/lib/RatingInstalls.svelte

@@ -1,20 +1,21 @@
-<script>
+<script lang="ts">
 	import Rating from '$lib/Rating.svelte';
 	import IconDownload from '$lib/IconDownload.svelte';
-	export let app; // Accept the app object as a prop
+	import type { AppFullDetail } from '../types';
+	export let app: AppFullDetail; // 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'}
+	{#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'}
+	{#if app.installs != '0' && app.installs != 'N/A'}
 		<div class="block p-0">
 			<div class="inline-flex">
 				<IconDownload />

frontend/src/lib/RatingInstallsLarge.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import Rating from '$lib/Rating.svelte';
+	import IconDownload from '$lib/IconDownload.svelte';
+	import type { AppFullDetail } from '../types';
+	export let app: AppFullDetail; // Accept the app object as a prop
+</script>
+
+<div class="inline-block">
+	<h5 class="h2 p-2">{app.name}</h5>
+	<!-- Installs DownloadIcon 123-->
+	{#if app.installs != '0' && app.installs != 'N/A'}
+		<div class="block p-2 h3">
+			<div class="inline-flex">
+				<IconDownload />
+				{app.installs}
+			</div>
+		</div>
+	{/if}
+
+	<!-- Ratings: STARS (123) -->
+	<Rating total={5} size={50} rating={app.rating} />
+	{#if app.rating_count != '0' && app.rating_count != 'N/A'}
+		<div>
+			Ratings: {app.rating_count}
+			<br />
+			Reviews: {app.review_count}
+		</div>
+	{:else}
+		Ratings not yet available
+	{/if}
+</div>

frontend/src/routes/+layout.server.ts

@@ -1,11 +1,7 @@
 export const ssr = true;
 export const csr = false;
 
-export interface Categories {
-	mycats: any;
-	status?: number;
-	error?: string;
-}
+import type { Categories, MyCats } from '../types';
 
 /** @type {import('./$types').PageServerLoad} */
 export async function load(): Promise<Categories> {
@@ -17,14 +13,14 @@ export async function load(): Promise<Categories> {
 			throw new Error(`Failed to fetch categories with status ${res.status}`);
 		}
 
-		const categories = await res.json();
+		const categories: MyCats = await res.json();
 
 		console.log(`load categories len: ${Object.keys(categories).length}`);
 		return { mycats: categories };
 	} catch (error) {
 		console.error('Failed to load layout categories data:', error);
 		return {
-			mycats: null,
+			mycats: { categories: {} },
 			status: 500,
 			error: 'Failed to load categories'
 		};

frontend/src/routes/+layout.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import '../app.postcss';
 	import { AppShell, AppBar, TabGroup, TabAnchor } from '@skeletonlabs/skeleton';
 	import { page } from '$app/stores';
@@ -18,14 +18,15 @@
 	let localCategories = $myCategorySelection;
 	$: myCategorySelection.set(localCategories);
 
-	$: classesActive = (href) => (href === $page.url.pathname ? '!bg-primary-500' : '');
+	$: classesActive = (href: string) => (href === $page.url.pathname ? '!bg-primary-500' : '');
 
-	export let data;
+	export let data: Categories;
 
 	import { myCategoryMap } from '../stores';
+	import type { Categories } from '../types';
 	myCategoryMap.set(data);
 
-	function setCategorySelection(id) {
+	function setCategorySelection(id: string) {
 		localCategories = id;
 	}
 </script>

frontend/src/routes/apps/[id]/+page.server.ts

@@ -1,8 +1,10 @@
 export const ssr = true;
 export const csr = true;
 
+import type { AppFullDetails } from '../../../types.js';
+
 /** @type {import('../[id]/$types').PageServerLoad} */
-export async function load({ params }) {
+export async function load({ params }): Promise<AppFullDetails> {
 	console.log('load app started');
 	try {
 		const id = params.id;

frontend/src/routes/apps/[id]/+page.svelte

@@ -1,11 +1,12 @@
-<script>
+<script lang="ts">
 	import ExternalLinkSvg from '$lib/ExternalLinkSVG.svelte';
+	import type { AppFullDetails } from '../../../types';
 	/** @type {import('../[id]/$types').PageData} */
-	export let data;
+	export let data: AppFullDetails;
 	import AppDetails from '$lib/RatingInstallsLarge.svelte';
 </script>
 
-{#if data}
+{#if data.myapp}
 	<!-- App Icon Title & Info -->
 	<section class="grid grid-cols-1 md:grid-cols-2 gap-4">
 		<div class="card p-8">
@@ -20,7 +21,7 @@
 						/>
 					{/if}
 					<div class="p-4">
-						{#if data.myapp.installs && data.myapp.installs != 0}
+						{#if data.myapp.installs && data.myapp.installs != '0'}
 							<AppDetails app={data.myapp} />
 						{/if}
 					</div>
@@ -157,10 +158,4 @@
 		border-radius: 10px; /* Rounded corners */
 		/* flex-grow: 1; Allow the bar to grow and take available space */
 	}
-
-	.label,
-	.count {
-		margin: 0 10px;
-		font-size: 14px;
-	}
 </style>

frontend/src/routes/collections/[collection]/+page.server.ts

@@ -1,16 +1,12 @@
 export const ssr: boolean = true;
 export const csr: boolean = true;
 
-console.log('Script executed');
+import type { Collection, Collections } from '../../../types.js';
 
-interface LoadResponse {
-	myapps: any;
-	status?: number;
-	error?: string;
-}
+console.log('Script executed');
 
 /** @type {import('../[collection]/$types').PageServerLoad} */
-export async function load({ params }): Promise<LoadResponse> {
+export async function load({ params }): Promise<Collections> {
 	const collectionValue = params.collection;
 	console.log(`load started collection=${collectionValue}`);
 	try {
@@ -21,13 +17,12 @@ export async function load({ params }): Promise<LoadResponse> {
 			throw new Error(`Failed to fetch collections status ${res.status} ${text}`);
 		}
 
-		const app_collections: any = await res.json();
+		const app_collections: Collection = await res.json();
 		console.log(`loaded collections with len: ${Object.keys(app_collections).length}`);
 		return { myapps: app_collections };
 	} catch (error) {
 		console.error('Failed to load data:', error);
 		return {
-			myapps: {},
 			status: 500,
 			error: 'Failed to load trending apps'
 		};

frontend/src/routes/collections/[collection]/+page.svelte

@@ -1,8 +1,9 @@
-<script>
+<script lang="ts">
+	import type { AppFullDetail, Categories, Collections } from '../../../types';
 	/** @type {import('../[collection]/$types').PageData} */
-	export let data;
+	export let data: Collections;
 	import AppDetails from '$lib/RatingInstalls.svelte';
-	function getClass(app) {
+	function getClass(app: AppFullDetail) {
 		return (app.featured_image_url && app.featured_image_url !== 'null') ||
 			(app.tablet_image_url_1 && app.tablet_image_url_1 !== 'null')
 			? 'col-span-2'
@@ -18,7 +19,7 @@
 <h1 class="h1 p-4">Welcome!</h1>
 
 <div>
-	{#if data}
+	{#if data.myapps}
 		<h1 class="h1 p-2">{data.myapps.title}</h1>
 		{#each Object.entries(data.myapps.categories) as [_key, cat]}
 			{#if cat.key == $myCategorySelection}

frontend/src/stores.ts

@@ -1,7 +1,8 @@
 import { writable } from 'svelte/store';
+import type { Categories } from './types';
 
 export const myCollectionStore = writable('new_weekly');
 export const myStoreSelection = writable('google');
 export const myCategorySelection = writable('overall');
 
-export const myCategoryMap = writable();
+export const myCategoryMap = writable<Categories>({ mycats: { categories: {} } });

frontend/src/types.ts

@@ -0,0 +1,78 @@
+export interface AppGroup {
+	apps: AppFullDetail[];
+	title: string;
+}
+
+export interface Collection {
+	categories: AppGroup;
+	title: string;
+}
+
+export interface Collections {
+	myapps?: Collection;
+	status?: number;
+	error?: string;
+}
+
+export interface Category {
+	id: string;
+	name: string;
+	android: string;
+	ios: string;
+}
+
+export interface MyCats {
+	categories: Record<string, Category>;
+}
+
+export interface Categories {
+	mycats: MyCats;
+	status?: number;
+	error?: string;
+}
+
+export interface AppFullDetails {
+	myapp?: AppFullDetail;
+	status?: number;
+	error?: string;
+}
+
+export interface AppFullDetail {
+	icon_url_512?: string;
+	name: string;
+	installs?: string;
+	store_id: string;
+	developer_id?: string;
+	developer_name: string;
+	store_link: string;
+	store_developer_link?: string;
+	developer_url?: string;
+	updated_at: string;
+	rating: number;
+	rating_count: string;
+	review_count: string;
+	histogram: number[];
+	rating_count_num: number;
+	category: string;
+	free: string;
+	price: string;
+	size?: string;
+	minimum_android?: string;
+	developer_email?: string;
+	content_rating?: string;
+	ad_supported?: string;
+	in_app_purchases?: string;
+	editors_choice?: string;
+	crawl_result: string;
+	release_date: string;
+	store_last_updated: string;
+	created_at: string;
+	history_table: string;
+	featured_image_url?: string;
+	phone_image_url_1?: string;
+	phone_image_url_2?: string;
+	phone_image_url_3?: string;
+	tablet_image_url_1?: string;
+	tablet_image_url_2?: string;
+	tablet_image_url_3?: string;
+}