Comunicar-se com componentes em todo o aplicativo

Nota

Deseja aprender em português (Brasil)? Nesse emblema, as validações dos desafios práticos do Trailhead funcionam em inglês. As traduções são fornecidas entre parênteses como referência Copie e cole os valores em inglês e, em seguida, mude o idioma do Trailhead Playground para inglês e a localidade para Estados Unidos. Siga as instruções aqui.

Consulte o emblema Trailhead no seu idioma para saber como aproveitar a experiência traduzida do Trailhead.

Atualizar o componente de lista de ursos

Os guardas florestais têm mais uma solicitação para você. Eles gostariam de localizar os ursos em um mapa quando filtram a lista de ursos. Você precisa criar um componente de mapa de ursos e modificar sua lista de ursos para que ela envie eventos ao mapa. Vamos começar atualizando nossa lista de ursos.

Edite o arquivo bearList.js.
Adicione o seguinte código antes de import { NavigationMixin } from 'lightning/navigation';:
```
import { publish, MessageContext } from 'lightning/messageService';
import BEAR_LIST_UPDATE_MESSAGE from '@salesforce/messageChannel/BearListUpdate__c';
```
A primeira importação traz utilitários do Lightning Message Service (LMS). Esse serviço permite que você publique mensagens em componentes irmãos em uma página do Lightning por um canal de mensagens do Lightning.
A segunda importação é um canal de mensagens do Lightning que foi incluído no projeto base que você recuperou do GitHub.
Substitua essas duas linhas...
```
@wire(searchBears, {searchTerm: '$searchTerm'})
bears;
```
...pelo seguinte código:
```
bears;
@wire(MessageContext) messageContext;
@wire(searchBears, {searchTerm: '$searchTerm'})
loadBears(result) {
  this.bears = result;
  if (result.data) {
    const message = {
      bears: result.data
    };
    publish(this.messageContext, BEAR_LIST_UPDATE_MESSAGE, message);
  }
}
```
Destaques do código:
- Recuperamos o contexto da mensagem do Lightning e o armazenamos em uma propriedade messageContext.
- Usamos uma função conectada para capturar dados da lista de ursos recebidos e acionar uma mensagem do Lightning BearListUpdate__c personalizada com a lista de registros de urso.
- Transmitimos searchTerm como um parâmetro dinâmico a nosso adaptador searchBears conectado para que cada vez que searchTerm muda, loadBears seja executado novamente e uma nova mensagem seja acionada com os novos resultados da pesquisa.
- Usamos a função publish que importamos do LMS para acionar uma mensagem do Lightning BearListUpdate__c com a lista de ursos.

Criar o componente de mapa de ursos

No VS Code, clique com o botão direito do mouse na pasta lwc e clique em SFDX: Create Lightning Web Component (Criar componente Web do Lightning).
Dê ao componente o nome bearMap.
Edite o arquivo bearMap.js-meta.xml e substitua <isExposed>false</isExposed> por estas linhas.
```
<isExposed>true</isExposed>
<targets>
	<target>lightning__AppPage</target>
	<target>lightning__RecordPage</target>
	<target>lightning__HomePage</target>
</targets>
```
Isso permite que seu componente seja colocado em qualquer tipo de página.

Substitua o conteúdo de bearMap.html por:

<template>
	<article class="slds-card">
		<lightning-map
			map-markers={mapMarkers}
			zoom-level="11"
			markers-title="Bears">
		</lightning-map>
	</article>
</template>

Destaques do código:

Mostramos um componente de cartão que contém um mapa.
O mapa mostra itens de uma matriz de mapMarkers.

Substitua o conteúdo de bearMap.js por:

import { LightningElement, wire } from 'lwc';
import { subscribe, unsubscribe, MessageContext } from 'lightning/messageService';
import BEAR_LIST_UPDATE_MESSAGE from '@salesforce/messageChannel/BearListUpdate__c';
export default class BearMap extends LightningElement {
  mapMarkers = [];
  subscription = null;
  @wire(MessageContext)
  messageContext;
  connectedCallback() {
    // Subscribe to BearListUpdate__c message
    this.subscription = subscribe(
        this.messageContext,
        BEAR_LIST_UPDATE_MESSAGE,
        (message) => {
            this.handleBearListUpdate(message);
        });
  }
  disconnectedCallback() {
    // Unsubscribe from BearListUpdate__c message
    unsubscribe(this.subscription);
    this.subscription = null;
  }
  handleBearListUpdate(message) {
    this.mapMarkers = message.bears.map(bear => {
      const Latitude = bear.Location__Latitude__s;
      const Longitude = bear.Location__Longitude__s;
      return {
        location: { Latitude, Longitude },
        title: bear.Name,
        description: `Coords: ${Latitude}, ${Longitude}`,
        icon: 'utility:animal_and_nature'
      };
    });
  }
}

Destaques do código:

Implementamos duas funções de gancho de ciclo de vida de componente: connectedCallback e disconnectedCallback. Elas são chamadas automaticamente quando o componente carrega e descarrega. Usamos essas duas funções para assinar e cancelar a assinatura de nossa mensagem do Lightning BearListUpdate__c personalizada.
Assim que recebemos uma mensagem BearListUpdate__c, a função handleBearListUpdate é chamada com a lista de registros de ursos que fazem parte do filtro atualmente. handleBearListUpdate cria uma lista de marcadores de mapa que é transmitida à propriedade mapMarkers e exibida no nosso componente de mapa.

Implante o código atualizado na organização. Clique com o botão direito do mouse na pasta padrão e clique em SFDX: Deploy Source to Org (Implantar fonte na organização).

Adicionar o componente de mapa de ursos à página inicial do aplicativo

Vamos adicionar nosso novo componente à página inicial do aplicativo.

De volta à organização, no App Launcher (Iniciador de aplicativos) (), encontre e selecione Ursus Park.
Clique em Setup (Configuração) () e selecione Edit Page (Editar página).
Em Custom Components (Componentes personalizados), encontre seu componente bearMap e arraste-o para o canto superior direito da página.
Clique em Save (Salvar) e em Back (Voltar) para retornar à página inicial e verificar se o mapa se atualiza quando você filtra pela lista de ursos.

Mapa de ursos mostrando registros de ursos filtrados

Sumário do projeto

E isso é tudo, pessoal. Os guardas florestais agora podem facilmente rastrear ursos graças aos seus esforços.

Você usou todos os conceitos principais dos componentes Web do Lightning em todo este projeto: associação de dados, expressões, renderização condicional, Apex conectado e imperativo, composição de componentes e eventos intercomponentes.

Tire o melhor proveito desse conhecimento criando seus próprios aplicativos flexíveis com os Componentes Web do Lightning. Feliz código!