Merge development branch

.eslintrc.cjs

@@ -1,6 +1,6 @@
 module.exports = {
   root: true,
-  env: { node: true, es2020: true },
+  env: { node: true, browser: true, es2020: true },
   extends: [
     'eslint:recommended',
     'plugin:react/recommended',
@@ -16,5 +16,6 @@ module.exports = {
       'warn',
       { allowConstantExport: true },
     ],
+    'react/prop-types': 'off',
   },
 }

dev-app-update.yml

@@ -0,0 +1,3 @@
+owner: lambor590
+repo: Packager
+provider: github

electron/main/index.js

@@ -29,8 +29,11 @@ const indexHtml = join(process.env.DIST, 'index.html')
 
 async function createWindow() {
   win = new BrowserWindow({
-    title: 'Main window',
+    title: 'Packager',
     icon: join(process.env.VITE_PUBLIC, 'favicon.ico'),
+    width: 1200,
+    height: 720,
+    autoHideMenuBar: true,
     webPreferences: {
       preload,
       nodeIntegration: true,
@@ -46,23 +49,16 @@ async function createWindow() {
     win.loadFile(indexHtml)
   }
 
-  // Test actively push message to the Electron-Renderer
-  win.webContents.on('did-finish-load', () => {
-    win?.webContents.send('main-process-message', new Date().toLocaleString())
-  })
-
   // Make all links open with the browser, not with the application
   win.webContents.setWindowOpenHandler(({ url }) => {
     if (url.startsWith('https:')) shell.openExternal(url)
     return { action: 'deny' }
   })
-
-  // Apply electron-updater
-  update(win)
 }
 
 app.whenReady().then(createWindow)
 
+
 app.on('window-all-closed', () => {
   win = null
   if (process.platform !== 'darwin') app.quit()
@@ -85,20 +81,16 @@ app.on('activate', () => {
   }
 })
 
-// New window example arg: new windows url
-ipcMain.handle('open-win', (_, arg) => {
-  const childWindow = new BrowserWindow({
-    webPreferences: {
-      preload,
-      nodeIntegration: true,
-      contextIsolation: false,
-    },
-  })
-
-  if (process.env.VITE_DEV_SERVER_URL) {
-    childWindow.loadURL(`${url}#${arg}`)
-  } else {
-    childWindow.loadFile(indexHtml, { hash: arg })
-  }
+ipcMain.handle("get-app-version", () => {
+  return app.getVersion()
 })
 
+ipcMain.on("do-action", (event, arg, data) => {
+  switch (arg) {
+    case "initAutoUpdater":
+      update(event)
+      break
+    default:
+      break
+  }
+})

electron/main/update.js

@@ -1,66 +1,24 @@
-import { app, ipcMain } from 'electron'
 import { autoUpdater } from 'electron-updater'
 
-export function update(win) {
+export function update(event) {
 
-  // When set to false, the update download will be triggered through the API
-  autoUpdater.autoDownload = false
-  autoUpdater.disableWebInstaller = false
+  autoUpdater.autoDownload = true
   autoUpdater.allowDowngrade = false
+  autoUpdater.disableWebInstaller = true
+  autoUpdater.autoInstallOnAppQuit = true
+  autoUpdater.forceDevUpdateConfig = true
 
-  // start check
-  autoUpdater.on('checking-for-update', function () { })
-  // update available
-  autoUpdater.on('update-available', (arg) => {
-    win.webContents.send('update-can-available', { update: true, version: app.getVersion(), newVersion: arg?.version })
+  autoUpdater.on('update-available', (_event) => {
+    event.sender.send('update-available', _event)
   })
-  // update not available
-  autoUpdater.on('update-not-available', (arg) => {
-    win.webContents.send('update-can-available', { update: false, version: app.getVersion(), newVersion: arg?.version })
-  })
-
-  // Checking for updates
-  ipcMain.handle('check-update', async () => {
-    if (!app.isPackaged) {
-      const error = new Error('The update feature is only available after the package.')
-      return { message: error.message, error }
-    }
 
-    try {
-      return await autoUpdater.checkForUpdatesAndNotify()
-    } catch (error) {
-      return { message: 'Network error', error }
-    }
+  autoUpdater.on('download-progress', (_event, progressInfo) => {
+    event.sender.send('download-progress', _event, progressInfo)
   })
 
-  // Start downloading and feedback on progress
-  ipcMain.handle('start-download', (event) => {
-    startDownload(
-      (error, progressInfo) => {
-        if (error) {
-          // feedback download error message
-          event.sender.send('update-error', { message: error.message, error })
-        } else {
-          // feedback update progress message
-          event.sender.send('download-progress', progressInfo)
-        }
-      },
-      () => {
-        // feedback update downloaded message
-        event.sender.send('update-downloaded')
-      }
-    )
-  })
-
-  // Install now
-  ipcMain.handle('quit-and-install', () => {
-    autoUpdater.quitAndInstall(false, true)
-  })
-}
+  autoUpdater.on('update-downloaded', () => {
+    autoUpdater.quitAndInstall(true, true)
+  });
 
-function startDownload(callback, complete) {
-  autoUpdater.on('download-progress', info => callback(null, info))
-  autoUpdater.on('error', error => callback(error, null))
-  autoUpdater.on('update-downloaded', complete)
-  autoUpdater.downloadUpdate()
-}
+  autoUpdater.checkForUpdates()
+}

index.html

@@ -1,13 +1,16 @@
 <!doctype html>
 <html lang="es">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Packager</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>

package.json

@@ -3,7 +3,7 @@
   "productName": "Packager",
   "version": "0.0.1",
   "main": "dist-electron/main/index.js",
-  "description": "Gestor de paquetes para Parcel Shops para gestionar todo en un mismo lugar de forma rápida y sencilla.",
+  "description": "Gestor de paquetes para Parcel Shops con el objetivo de gestionar todo en un mismo lugar de forma rápida y sencilla.",
   "author": "Marc Correale",
   "license": "MIT",
   "private": true,
@@ -37,6 +37,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tailwindcss": "3.4.0",
+    "tree-kill": "^1.2.2",
     "vite": "5.0.10",
     "vite-plugin-electron": "0.15.5",
     "vite-plugin-electron-renderer": "0.14.5"

src/App.css

@@ -1,42 +1,3 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/App.jsx

@@ -1,33 +1,29 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
+import { useEffect, useState } from 'react'
+import { ipcRenderer } from 'electron'
+import UpdateModal from './components/UpdateModal'
 import './App.css'
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [appVersion, setAppVersion] = useState('')
+
+  useEffect(() => {
+    ipcRenderer.invoke('get-app-version').then(version => {
+      setAppVersion(version)
+    })
+  }, [])
 
   return (
     <>
+      <h1>Packager</h1>
       <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
+        <button className='btn btn-primary'>
+          Test Button
         </button>
         <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
+          Version {appVersion}
         </p>
       </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+      <UpdateModal />
     </>
   )
 }