update notifications

add skeleton on load

Author: therockerline

public/TrayNotificationIcon.svg

@@ -41,11 +41,16 @@ export class NethLinkController {
   }
 
   init(account: Account) {
-    this.loadData()
     this.show()
-    this.operatorFetchLoop()
-    //Avviso la nethWindow che l'utente è cambiato
     this.window.emit(IPC_EVENTS.ACCOUNT_CHANGE, account)
+    new Promise<void>(async (resolve) => {
+      await this.loadData()
+      this.operatorFetchLoop()
+      resolve()
+    }).then(() => {
+      this.window.emit(IPC_EVENTS.LOAD_DATA_END)
+    })
+    //Avviso la nethWindow che l'utente è cambiato
   }
 
   async loadData() {
@@ -62,4 +67,8 @@ export class NethLinkController {
   hide() {
     this.window.hide()
   }
+
+  sendUpdateNotification() {
+    this.window.emit(IPC_EVENTS.UPDATE_APP_NOTIFICATION)
+  }
 }

src/main/classes/controllers/NethLinkController.ts

@@ -3,7 +3,7 @@ import { LoginController } from '@/classes/controllers/LoginController'
 import { PhoneIslandController } from '@/classes/controllers/PhoneIslandController'
 import { IPC_EVENTS, PHONE_ISLAND_EVENTS } from '@shared/constants'
 import { Account } from '@shared/types'
-import { app, ipcMain, shell } from 'electron'
+import { Notification, NotificationConstructorOptions, app, ipcMain, shell } from 'electron'
 import { join } from 'path'
 import { log } from '@shared/utils/logger'
 import { cloneDeep } from 'lodash'
@@ -99,6 +99,10 @@ export function registerIpcEvents() {
     shell.openExternal(join(account!.host, path))
   })
 
+  ipcMain.on(IPC_EVENTS.OPEN_EXTERNAL_PAGE, async (_, path) => {
+    shell.openExternal(join(path))
+  })
+
   ipcMain.on(IPC_EVENTS.START_CALL, async (_event, phoneNumber) => {
     PhoneIslandController.instance.call(phoneNumber)
   })
@@ -131,6 +135,38 @@ export function registerIpcEvents() {
     NethLinkController.instance.window.emit(IPC_EVENTS.RECEIVE_SEARCH_RESULT, res)
   })
 
+  ipcMain.on(IPC_EVENTS.SEND_NOTIFICATION, (event, options: NotificationConstructorOptions, openUrl) => {
+    options.hasReply = false
+
+    log('RECEIVED SEND NOTIFICATION', options, openUrl)
+    if (process.platform !== 'darwin') {
+      options.icon = "../../../public/TrayNotificationIcon.svg"
+    }
+    const notification: Notification = new Notification(options)
+
+    // notification.on('click', () => {
+    //   log('RECEIVED CLICK ON NOTIFICATION', options, openUrl)
+    //   if (openUrl) {
+    //     shell.openExternal(openUrl)
+    //   }
+    // })
+    notification.once('failed', () => log('failed'))
+    notification.once('action', () => log('action'))
+    notification.once('close', () => log('close'))
+    notification.once('reply', () => log('reply'))
+    notification.once('show', () => log('show'))
+
+    notification.addListener("click", () => {
+      log('RECEIVED CLICK ON NOTIFICATION', options, openUrl)
+      if (openUrl) {
+        shell.openExternal(openUrl)
+      }
+    })
+
+    notification.show()
+
+  })
+
   //SEND BACK ALL PHONE ISLAND EVENTS
   Object.keys(PHONE_ISLAND_EVENTS).forEach((ev) => {
     ipcMain.on(ev, async (_event, ...args) => {
@@ -165,3 +201,5 @@ export function registerIpcEvents() {
     })
   })
 }
+
+

src/main/lib/ipcEvents.ts

@@ -1,4 +1,4 @@
-import { Notification, app, nativeTheme, protocol, shell, systemPreferences } from 'electron'
+import { app, nativeTheme, protocol, shell, systemPreferences } from 'electron'
 import { registerIpcEvents } from '@/lib/ipcEvents'
 import { AccountController, DevToolsController } from './classes/controllers'
 import { PhoneIslandController } from './classes/controllers/PhoneIslandController'
@@ -13,13 +13,13 @@ import { debouncer, delay, isDev } from '@shared/utils/utils'
 import { IPC_EVENTS } from '@shared/constants'
 import { NetworkController } from './classes/controllers/NetworkController'
 import { AppController } from './classes/controllers/AppController'
-import { t } from 'i18next'
 new AppController(app)
 new NetworkController()
 new AccountController(app)
 
 //registro tutti gli eventi che la parte frontend emette verso il backend
 registerIpcEvents()
+let isFirstStart = true
 
 //imposto che l'app si debba aprire all'avvio del sistema operativo
 app.setLoginItemSettings({
@@ -64,31 +64,14 @@ app.whenReady().then(async () => {
     NethLinkController.instance.window.addOnBuildListener(updateBuildedWindows)
     LoginController.instance.window.addOnBuildListener(updateBuildedWindows)
 
-    //aspetto che tutte le finestre siano pronte o un max di 2,5 secondi
+    //aspetto che tutte le finestre siano pronte o un max di 25 secondi
     let time = 0
     while (windowsLoaded <= 2 && time < 25) {
       await delay(100)
       time++
       //log(time, windowsLoaded)
     }
     await getPermissions()
-    const latestVersionData = await NetworkController.instance.get(`https://api.github.com/repos/nethesis/nethlink/releases/latest`)
-    log(app.getVersion())
-    if (latestVersionData.name !== app.getVersion()) {
-      // const updateLink = `https://github.com/nethesis/nethlink/releases/tag/v${latestVersionData.name}`
-      const updateLink = 'https://nethesis.github.io/nethlink/'
-      const notification = new Notification({
-        title: t('Notification.application_update_title') || 'Aggiornamento disponibile',
-        body: t('Notification.application_update_body') || 'Clicca quí per scaricare'
-      })
-
-
-      notification.on('click', (e) => {
-        // log(e)
-        shell.openExternal(updateLink)
-      })
-      notification.show()
-    }
     //log('call addOnBuildListener ')
     nativeTheme.on('updated', () => {
       const updatedSystemTheme: AvailableThemes = nativeTheme.shouldUseDarkColors
@@ -136,6 +119,12 @@ const onAccountLogin = (account: Account) => {
     //inizializzo la pagina di nethLink e avvio i fetch di history, speeddials e l'interval sugli operatori
     NethLinkController.instance.init(account)
     //quando l'utente cambia devo riloggarlo sulla phone island
+
+    //controllo se ci sono aggiornamenti
+    if (isFirstStart) {
+      isFirstStart = false
+      checkForUpdate()
+    }
   } catch (e) {
     console.error(e)
   }
@@ -163,6 +152,14 @@ const onLoginFromLoginPage = (account: Account) => {
   AccountController.instance.removeEventListener('LOGIN', onLoginFromLoginPage)
 }
 
+const checkForUpdate = async () => {
+  const latestVersionData = await NetworkController.instance.get(`https://api.github.com/repos/nethesis/nethlink/releases/latest`)
+  log(app.getVersion())
+  if (latestVersionData.name !== app.getVersion()) {
+    NethLinkController.instance.sendUpdateNotification()
+  }
+}
+
 app.on('window-all-closed', () => {
   app.dock?.hide()
   //i18nextBackend.clearMainBindings(ipcMain);

src/main/main.ts

@@ -1,4 +1,4 @@
-import { contextBridge, ipcRenderer } from 'electron'
+import { NotificationConstructorOptions, contextBridge, ipcRenderer } from 'electron'
 import { electronAPI } from '@electron-toolkit/preload'
 import { IPC_EVENTS, PHONE_ISLAND_EVENTS } from '@shared/constants'
 import {
@@ -16,7 +16,6 @@ import { preloadBindings } from 'i18next-electron-fs-backend'
 import { log } from '@shared/utils/logger'
 
 export interface IElectronAPI {
-
   env: NodeJS.ProcessEnv
 
   // Use `contextBridge` APIs to expose Electron APIs to
@@ -51,9 +50,12 @@ export interface IElectronAPI {
   onThemeChange(callback: (theme: AvailableThemes) => void): void
   onOperatorsChange(callback: (updateOperators: OperatorData) => void): void
   onQueueLoaded(onQueueUpdate: (queues: { [queueId: string]: any }) => void): void
+  onUpdateAppNotification(showUpdateAppNotification: () => void): void
+  onLoadDataEnd(callback: () => void): void
 
   //EMITTER - only emit, no response
   openDevTool(hash: string): unknown
+  sendNotification(notificationoption: NotificationConstructorOptions, openUrl: string | undefined): void
   logout: () => void
   startCall(phoneNumber: string): void
   changeTheme(theme: AvailableThemes): void
@@ -63,7 +65,8 @@ export interface IElectronAPI {
   resizePhoneIsland(offsetWidth: number, offsetHeight: number): void
   sendInitializationCompleted(id: string): void
   addPhoneIslandListener: (event: PHONE_ISLAND_EVENTS, callback: (...args: any[]) => void) => void
-  openHostPage(path: string): unknown
+  openHostPage(path: string): void
+  openExternalPage(url: string): void
   hideNethLink: () => void
   exitNethLink: () => void
   showPhoneIsland: () => void
@@ -120,6 +123,7 @@ const api: IElectronAPI = {
   deviceDefaultChange: setEmitterSync<void>(IPC_EVENTS.DEVICE_DEFAULT_CHANGE),
 
   //EMITTER - only emit, no response
+  sendNotification: setEmitter(IPC_EVENTS.SEND_NOTIFICATION),
   openDevTool: setEmitter(IPC_EVENTS.OPEN_DEV_TOOLS),
   hideLoginWindow: setEmitter(IPC_EVENTS.HIDE_LOGIN_WINDOW),
   logout: setEmitter(IPC_EVENTS.LOGOUT),
@@ -130,6 +134,7 @@ const api: IElectronAPI = {
   changeTheme: setEmitter(IPC_EVENTS.CHANGE_THEME),
   sendSearchText: setEmitter(IPC_EVENTS.SEARCH_TEXT),
   openHostPage: setEmitter(IPC_EVENTS.OPEN_HOST_PAGE),
+  openExternalPage: setEmitter(IPC_EVENTS.OPEN_EXTERNAL_PAGE),
   hideNethLink: setEmitter(IPC_EVENTS.HIDE_NETH_LINK),
   exitNethLink: setEmitter(IPC_EVENTS.CLOSE_NETH_LINK),
   showPhoneIsland: setEmitter(IPC_EVENTS.SHOW_PHONE_ISLAND),
@@ -162,6 +167,8 @@ const api: IElectronAPI = {
   onThemeChange: addListener(IPC_EVENTS.ON_CHANGE_THEME),
   onOperatorsChange: addListener(IPC_EVENTS.OPERATORS_CHANGE),
   onQueueLoaded: addListener(IPC_EVENTS.QUEUE_LOADED),
+  onUpdateAppNotification: addListener(IPC_EVENTS.UPDATE_APP_NOTIFICATION),
+  onLoadDataEnd: addListener(IPC_EVENTS.LOAD_DATA_END),
 
   addPhoneIslandListener: (event, callback) => {
     const evName = `on-${event}`

src/preload/index.ts

@@ -4,6 +4,8 @@ import { MissedCall } from './MissedCall'
 import { CallData } from '@shared/types'
 import { Button } from './Nethesis/Button'
 import { t } from 'i18next'
+import { SkeletonRow } from './SkeletonRow'
+import { useSubscriber } from '@renderer/hooks/useSubscriber'
 
 export interface MissedCallsBoxProps {
   missedCalls: CallData[]
@@ -16,6 +18,8 @@ export function MissedCallsBox({
   viewAllMissedCalls,
   handleSelectedMissedCall
 }: MissedCallsBoxProps): JSX.Element {
+
+  const isDataLoaded = useSubscriber<boolean>('loadDataEnded')
   /* Oltre al fatto che sono le chiamate in entrate esse non devono aver avuto risposta */
   /* TODO modificare richiesta al server */
   const missedCallsIn = missedCalls?.filter(
@@ -45,7 +49,7 @@ export function MissedCallsBox({
           </Button>
         </div>
         <div className="flex flex-col max-h-[240px] overflow-y-auto">
-          {missedCallsIn.map((call, idx) => {
+          {isDataLoaded ? (missedCallsIn.map((call, idx) => {
             return (
               <div
                 className={`${idx === missedCallsIn.length - 1 ? `` : `border-b dark:border-borderDark border-borderLight`}`}
@@ -58,6 +62,14 @@ export function MissedCallsBox({
                 />
               </div>
             )
+          })) : Array(3).fill('').map((_, idx) => {
+            return <div
+              className={`${idx === 2 ? `` : `border-b dark:border-borderDark border-borderLight`}`}
+              key={idx}
+            >
+              <SkeletonRow />
+
+            </div>
           })}
         </div>
       </div>

src/renderer/src/components/MissedCallsBox.tsx

@@ -22,12 +22,12 @@ export interface ButtonProps
   children: ReactNode;
   size?: "small" | "base" | "large";
   variant?:
-    | "primary"
-    | "secondary"
-    | "white"
-    | "ghost"
-    | "danger"
-    | "dashboard";
+  | "primary"
+  | "secondary"
+  | "white"
+  | "ghost"
+  | "danger"
+  | "dashboard";
   fullWidth?: boolean;
   fullHeight?: boolean;
   disabled?: boolean;

src/renderer/src/components/Nethesis/Button.tsx

@@ -0,0 +1,12 @@
+export const SkeletonRow = () => {
+    return <div
+        className={`relative flex flex-row justify-between items-center min-h-[44px] p-2 px-5`}
+    >
+        <div className="flex gap-6 items-center">
+            <div className='animate-pulse rounded-full h-12 w-12 bg-gray-300 dark:bg-gray-600'></div>
+            <div className="flex flex-col gap-1">
+                <div className='animate-pulse rounded-full h-4 w-[230px] bg-gray-300 dark:bg-gray-600'></div>
+            </div>
+        </div>
+    </div>
+}

src/renderer/src/components/SkeletonRow.tsx

@@ -4,6 +4,8 @@ import { SpeedDialNumber } from './SpeedDialNumber'
 import { ContactType } from '@shared/types'
 import { Button } from './Nethesis/Button'
 import { t } from 'i18next'
+import { useSubscriber } from '@renderer/hooks/useSubscriber'
+import { SkeletonRow } from './SkeletonRow'
 
 export interface SpeedDialsBoxProps {
   speeddials: ContactType[] | undefined
@@ -20,6 +22,8 @@ export function SpeedDialsBox({
   handleSelectedSpeedDial,
   handleDeleteSpeedDial
 }: SpeedDialsBoxProps): JSX.Element {
+
+  const isDataLoaded = useSubscriber<boolean>('loadDataEnded')
   return (
     <div className="flex flex-col h-full">
       <div className="flex justify-between items-center pb-4 border border-t-0 border-r-0 border-l-0 dark:border-borderDark border-borderLight max-h-[28px] px-5 mt-3">
@@ -41,7 +45,7 @@ export function SpeedDialsBox({
         </Button>
       </div>
       <div className="flex flex-col min-h-[120px] max-h-[240px] overflow-y-auto">
-        {speeddials && speeddials.length > 0 ? (
+        {isDataLoaded ? (speeddials && speeddials.length > 0 ? (
           speeddials?.map((e, idx) => {
             return (
               <div
@@ -63,7 +67,14 @@ export function SpeedDialsBox({
           <div className="dark:text-titleDark text-titleLight dark:bg-bgDark bg-bgLight px-5 py-2">
             {t('SpeedDial.No speed dials')}
           </div>
-        )}
+        )) : Array(3).fill('').map((_, idx) => {
+          return <div
+            className={`${idx === 2 ? `` : `border-b dark:border-borderDark border-borderLight`}`}
+            key={idx}
+          >
+            <SkeletonRow />
+          </div>
+        })}
       </div>
     </div>
   )