Renderizando as musicas na tela

Após importarmos nossas musicas, agora precisamos renderizar elas na tela do nosso aplicativo, e é o que faremos utilizando o IPC do Electron novamente.

Vamos agora mostrar todas as musicas importadas na tela principal

export default function MusicList() {
    const [musicList, setMusicList] = useState([])

    const fetchMusicList = async () => {
        try {
            await window.electronAPI.SendToElectron('music-get')
            await window.electronAPI.ReciveFromElectron("music:list", (event, arg) => {
                setMusicList(arg);
            });
            
        } catch (error) {
            console.error('Erro ao obter a lista de músicas:', error);
        }
    };

    useEffect(() => {
        fetchMusicList()
    }, []);
    return (
        Music List
            {musicList.length === 0 ? Empty : musicList.map((music, index) => {
                return 
            })}
        
    )
}

Aqui nos adicionamos 2 conexoes com nosso backend do electron, onde a gente envia um evento pedindo a lista de musicas e outro evento onde a gente recebe essa lista, dentro o useeEffect, esse evento eh solicitado sempre que o componente renderiza, devemos adicionar esses eventos no arquivo main tambem.

ipcMain.on('music-get', async () => {
  sendUpdateList()
});


async function sendUpdateList() {
  const files = await fs.promises.readdir(musicDir);
  mainWindow.webContents.send("music:list", files);
}

Vale notar que criamos uma funcao onde acontece o envio da lista de musicas atravez do evento music:list

e vamos reutilizar essa funcao para, quando nosso aplicativo iniciar, ele envie uma lista atualizada com as musicas que cosntam no nosso aplicativo também.

app.whenReady().then(async () => {
  createWindow();
  await sendUpdateList();
})

e dentro de cada MusicInList, vamos adicionar o componente

export default function MusicInList({ music }) {
  function handleDeleteMusic (music){
    window.electronAPI.SendToElectron('music-delete', music)
  }
  function handleAdicionarMusica (music){
    window.electronAPI.SendToElectron('music-to-play', music);
  }
  return (
    Nome{music}
             handleAdicionarMusica(music)}/>
             handleDeleteMusic(music)}/>
        
      
    
  );
}

e vamos adicionar os eventos dentro do main do electron novamente

ipcMain.on('music-delete', async (event, file) => {
  const filePath = path.join(musicDir, file);
  fs.unlink(filePath, async (err) => {
    if (err) {
      mainWindow.webContents.send("toast:recive", err)
    } else {
      sendUpdateList();
      mainWindow.webContents.send("toast:recive", "File deleted successfully");
    }
  });
});

ipcMain.on('music-to-play', (event, fileName) => {
  mainWindow.webContents.send("music-playable", fileName)
});