Merge pull request #117 from luminous-devs/feat/optional-updater

Make auto update is optional

src/app/settings/about.tsx

@@ -1,9 +1,24 @@
 import { getVersion } from '@tauri-apps/api/app';
+import { relaunch } from '@tauri-apps/plugin-process';
+import { Update, check } from '@tauri-apps/plugin-updater';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
+import { toast } from 'sonner';
 
 export function AboutScreen() {
   const [version, setVersion] = useState('');
+  const [newUpdate, setNewUpdate] = useState<Update>(null);
+
+  const checkUpdate = async () => {
+    const update = await check();
+    if (!update) toast.info('There is no update available');
+    setNewUpdate(update);
+  };
+
+  const installUpdate = async () => {
+    await newUpdate.downloadAndInstall();
+    await relaunch();
+  };
 
   useEffect(() => {
     async function loadVersion() {
@@ -20,19 +35,38 @@ export function AboutScreen() {
         <img src="/icon.png" alt="Lume's logo" className="w-16 shrink-0" />
         <div>
           <h1 className="text-xl font-semibold">Lume</h1>
-          <p className="text-neutral-700 dark:text-neutral-300">Version {version}</p>
+          <p className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+            Version {version}
+          </p>
         </div>
       </div>
       <div className="mx-auto mt-4 flex w-full max-w-xs flex-col gap-2">
+        {!newUpdate ? (
+          <button
+            type="button"
+            onClick={() => checkUpdate()}
+            className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-blue-500 text-sm font-medium text-white hover:bg-blue-600"
+          >
+            Check for update
+          </button>
+        ) : (
+          <button
+            type="button"
+            onClick={() => installUpdate()}
+            className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-blue-500 text-sm font-medium text-white hover:bg-blue-600"
+          >
+            Install {newUpdate.version}
+          </button>
+        )}
         <Link
           to="https://lume.nu"
-          className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+          className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-neutral-100 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
         >
           Website
         </Link>
         <Link
           to="https://github.com/luminous-devs/lume/issues"
-          className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+          className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-neutral-100 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
         >
           Report a issue
         </Link>

src/app/settings/general.tsx

@@ -13,6 +13,7 @@ import { DarkIcon, LightIcon, SystemModeIcon } from '@shared/icons';
 export function GeneralSettingScreen() {
   const { db } = useStorage();
   const [settings, setSettings] = useState({
+    autoupdate: false,
     autolaunch: false,
     outbox: false,
     media: true,
@@ -59,6 +60,13 @@ export function GeneralSettingScreen() {
     setSettings((prev) => ({ ...prev, hashtag: !settings.hashtag }));
   };
 
+  const toggleAutoupdate = async () => {
+    await db.createSetting('autoupdate', String(+!settings.autoupdate));
+    db.settings.autoupdate = !settings.autoupdate;
+    // update state
+    setSettings((prev) => ({ ...prev, autoupdate: !settings.autoupdate }));
+  };
+
   const toggleNofitication = async () => {
     if (settings.notification) return;
 
@@ -82,6 +90,12 @@ export function GeneralSettingScreen() {
       if (!data) return;
 
       data.forEach((item) => {
+        if (item.key === 'autoupdate')
+          setSettings((prev) => ({
+            ...prev,
+            autoupdate: !!parseInt(item.value),
+          }));
+
         if (item.key === 'outbox')
           setSettings((prev) => ({
             ...prev,
@@ -114,6 +128,19 @@ export function GeneralSettingScreen() {
   return (
     <div className="mx-auto w-full max-w-lg">
       <div className="flex flex-col gap-6">
+        <div className="flex w-full items-center justify-between">
+          <div className="flex items-center gap-8">
+            <div className="w-24 shrink-0 text-end text-sm font-semibold">Updater</div>
+            <div className="text-sm">Auto download new update at Login</div>
+          </div>
+          <Switch.Root
+            checked={settings.autoupdate}
+            onClick={() => toggleAutoupdate()}
+            className="relative h-7 w-12 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+          >
+            <Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+          </Switch.Root>
+        </div>
         <div className="flex w-full items-center justify-between">
           <div className="flex items-center gap-8">
             <div className="w-24 shrink-0 text-end text-sm font-semibold">Startup</div>

src/libs/storage/instance.ts

@@ -20,13 +20,18 @@ export class LumeStorage {
   public db: Database;
   public account: Account | null;
   public platform: Platform | null;
-  public settings: { outbox: boolean; media: boolean; hashtag: boolean };
+  public settings: {
+    autoupdate: boolean;
+    outbox: boolean;
+    media: boolean;
+    hashtag: boolean;
+  };
 
   constructor(sqlite: Database, platform: Platform) {
     this.db = sqlite;
     this.account = null;
     this.platform = platform;
-    this.settings = { outbox: false, media: true, hashtag: true };
+    this.settings = { autoupdate: false, outbox: false, media: true, hashtag: true };
   }
 
   public async secureSave(key: string, value: string) {

src/libs/storage/provider.tsx

@@ -20,7 +20,7 @@ const StorageContext = createContext<StorageContext>({
   db: undefined,
 });
 
-const StorageProvider = ({ children }: PropsWithChildren<object>) => {
+const StorageInstance = () => {
   const [db, setDB] = useState<LumeStorage>(undefined);
   const [isNewVersion, setIsNewVersion] = useState(false);
 
@@ -33,6 +33,8 @@ const StorageProvider = ({ children }: PropsWithChildren<object>) => {
       if (!lumeStorage.account) await lumeStorage.getActiveAccount();
 
       const settings = await lumeStorage.getAllSettings();
+      let autoUpdater = false;
+
       if (settings) {
         settings.forEach((item) => {
           if (item.key === 'outbox') lumeStorage.settings.outbox = !!parseInt(item.value);
@@ -41,16 +43,23 @@ const StorageProvider = ({ children }: PropsWithChildren<object>) => {
 
           if (item.key === 'hashtag')
             lumeStorage.settings.hashtag = !!parseInt(item.value);
+
+          if (item.key === 'autoupdate') {
+            if (parseInt(item.value)) autoUpdater = true;
+          }
         });
       }
 
-      // check update
-      const update = await check();
-      if (update) {
-        setIsNewVersion(true);
+      if (autoUpdater) {
+        // check update
+        const update = await check();
+        // install new version
+        if (update) {
+          setIsNewVersion(true);
 
-        await update.downloadAndInstall();
-        await relaunch();
+          await update.downloadAndInstall();
+          await relaunch();
+        }
       }
 
       setDB(lumeStorage);
@@ -66,6 +75,12 @@ const StorageProvider = ({ children }: PropsWithChildren<object>) => {
     if (!db) initLumeStorage();
   }, []);
 
+  return { db, isNewVersion };
+};
+
+const StorageProvider = ({ children }: PropsWithChildren<object>) => {
+  const { db, isNewVersion } = StorageInstance();
+
   if (!db)
     return (
       <div
@@ -93,7 +108,7 @@ const StorageProvider = ({ children }: PropsWithChildren<object>) => {
         <div className="absolute bottom-5 right-5 inline-flex items-center gap-2.5">
           <LoaderIcon className="h-6 w-6 animate-spin text-blue-500" />
           <p className="font-semibold">
-            {isNewVersion ? 'Found a new version, updating' : 'Checking for updates...'}
+            {isNewVersion ? 'Found a new version, updating...' : 'Starting...'}
           </p>
         </div>
       </div>