#247 show UPDATE ALL button (#340)

* #247 show update all button

---------

Co-authored-by: neil molina <neil@neils-MacBook-Pro.local>

modules/desktop/src/components/packages/packages.svelte

@@ -8,9 +8,6 @@
 	import Package from "./package.svelte";
 	import { packagesStore } from '$libs/stores';
 
-	import { installPackage } from '@native';
-	import { trackInstall, trackInstallFailed } from '$libs/analytics';
-
 	const { packages: allPackages } = packagesStore;
 	export let packageFilter: SideMenuOptions = SideMenuOptions.all;
 
@@ -63,22 +60,7 @@
 					<div class={pkg.state === PackageStates.INSTALLING ? 'animate-pulse' : ''}>
 						<Package
 							{pkg}
-							onClick={async () => {
-								try {
-									pkg.state = PackageStates.INSTALLING;
-									await installPackage(pkg);
-									trackInstall(pkg.full_name);
-									pkg.state = PackageStates.INSTALLED;
-	
-									packagesStore.updatePackage(pkg.full_name, {
-										state: PackageStates.INSTALLED, // this would also mean its the latest version
-									});
-								} catch (error) {
-									let message = 'Unknown Error'
-									if (error instanceof Error) message = error.message
-									trackInstallFailed(pkg.full_name, message || "unknown");
-								}
-							}}
+							onClick={() => packagesStore.installPkg(pkg)}
 						/>
 					</div>
 				{/if}

modules/desktop/src/libs/stores/pkgs.ts

@@ -2,12 +2,19 @@ import { writable } from "svelte/store";
 import type { GUIPackage, InstalledPackage } from "../types";
 import { PackageStates } from "../types";
 import Fuse from "fuse.js";
-import { getPackage, getDistPackages, openTerminal, getInstalledPackages } from "@native";
+import {
+	getPackage,
+	getDistPackages,
+	openTerminal,
+	getInstalledPackages,
+	installPackage
+} from "@native";
 
 import { getReadme, getContributors, getRepoAsPackage } from "$libs/github";
 import { notificationStore } from "../stores";
 import { NotificationType } from "@tea/ui/types";
 import type { Package } from "@tea/ui/types";
+import { trackInstall, trackInstallFailed } from "$libs/analytics";
 
 const log = window.require("electron-log");
 
@@ -133,6 +140,19 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
 		log.info("packages store: initialized!");
 	};
 
+	const installPkg = async (pkg: GUIPackage, version?: string) => {
+		try {
+			updatePackage(pkg.full_name, { state: PackageStates.INSTALLING });
+			await installPackage(pkg, version || pkg.version);
+			trackInstall(pkg.full_name);
+			updatePackage(pkg.full_name, { state: PackageStates.INSTALLED });
+		} catch (error) {
+			let message = "Unknown Error";
+			if (error instanceof Error) message = error.message;
+			trackInstallFailed(pkg.full_name, message || "unknown");
+		}
+	};
+
 	return {
 		packages,
 		syncProgress,
@@ -154,6 +174,7 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
 			});
 		},
 		updatePackage,
-		init
+		init,
+		installPkg
 	};
 }

modules/desktop/src/libs/translations/translations.json

@@ -17,6 +17,7 @@
 			"resources": "Resources"
 		},
 		"package": {
+			"update-all": "UPDATE ALL",
 			"top-list-title": "Top packages this week",
 			"browse-cta": "Browse packages",
 			"what-title": "What are packages?",

modules/desktop/src/routes/+page.svelte

@@ -3,11 +3,14 @@
 	import { t } from '$libs/translations';
 	import { navStore, packagesStore } from '$libs/stores';
 	import Packages from '$components/packages/packages.svelte';
-	import { PackageStates, SideMenuOptions } from '$libs/types';
-	import SortingButtons from "$components/search-packages/sorting-buttons.svelte";
+	import { PackageStates, SideMenuOptions, type GUIPackage } from '$libs/types';
+	// import SortingButtons from "$components/search-packages/sorting-buttons.svelte";
 	import SideMenu from "$components/side-menu/side-menu.svelte";
 	import NotificationBar from '$components/notification-bar/notification-bar.svelte';
 	import WelcomeModal from '$components/welcome-modal/welcome-modal.svelte';
+	import Button from "@tea/ui/button/button.svelte";
+
+	const log = window.require("electron-log");
 
 	const { sideNavOpen } = navStore; // right side not left
 	const { packages } = packagesStore;
@@ -17,7 +20,25 @@
 	let sortBy: "popularity" | "most recent" = "popularity";
 	let sortDirection: "asc" | "desc" = "desc";
 
+	let updating = false;
+
+	$: pkgsToUpdate = $packages.filter((p: GUIPackage) => p.state === PackageStates.NEEDS_UPDATE);
+	async function updateAll() {
+		updating = true;
+		log.info(`updating: ${pkgsToUpdate.length} packages`);
+		for(const pkg of pkgsToUpdate) {
+			try {
+				await packagesStore.installPkg(pkg);
+			} catch (error) {
+				log.error(error);
+			}
+		}
+		updating = false;
+		sideMenuOption = SideMenuOptions.all;
+	}
+
 	$: teaPkg = $packages.find((p) => p.full_name === "tea.xyz");
+	$: needsUpdateCount = pkgsToUpdate.length;
 </script>
 
 <div id="package-container">
@@ -28,12 +49,26 @@
 	<NotificationBar />
 	<div class="flex justify-between items-center align-middle">
 		<h1 class="text-primary mt-4 pl-3 text-2xl font-bold font-mona">{$t(`side-menu-title.${sideMenuOption}`)}</h1>
+		<!-- 
 		<section class="border-gray mt-4 mr-4 h-10 w-48 border rounded-sm">
+			
+			we might bring it back?
 			<SortingButtons onSort={(prop, dir) => {
 				sortBy = prop;
 				sortDirection = dir;
 			}} />
 		</section>
+		 -->
+		{#if needsUpdateCount}
+			<Button
+				class={`w-48 h-8 text-xs mr-4 ${updating && "animate-pulse"}`}
+				type="plain"
+				color="secondary"
+				onClick={updateAll}
+			>
+					{$t(`package.update-all`)} [{needsUpdateCount}]
+			</Button> 
+		{/if}
 	</div>
 </header>