Как получить идентификатор документа и данные документа? - PullRequest
Новая
       0

Как получить идентификатор документа и данные документа?

0 голосов
/ 28 мая 2020

Итак, у меня есть список некоторых документов - это мое приложение, и когда я нажимаю на аватар, он открывает модальную страницу. На этой модальной странице будет показана информация по do c, которую я нажал. так как я могу это сделать? Я использую Cloud Firestore.

Как я получаю список из коллекции и отображаю его на экране: 

useEffect(() => {
    const fetchRequest = async () => {
      const requestCollection = await db.collection("request").get();
      setRequest(
        requestCollection.docs.map((doc) => {
          return doc.data();
        })
      );
    };
    fetchRequest();
  }, []);


  return (
    <Panel id={id}>
      <PanelHeader left={<PanelHeaderBack onClick={go} data-to="home" />}>
        Обычные скины
      </PanelHeader>
      <Group header={<Header mode="secondary">Новые скины</Header>}></Group>
      {request.map((playerID) => {
        return (
          <Cell
          onClick={(e) => {openModal}
          key={playerID.player_id}
            style={{ marginBottom: 10 }}
            expandable
            indicator={
              <Counter size="s" mode="prominent">
                Новый скин
              </Counter>
            }
            before={<Avatar size={64} src={playerID.image} />}
          >Автор: {playerID.nickname}</Cell>
        );
      })}
    </Panel>
  );

Модальная страница: 

 const modal = (
      <ModalRoot onClose={() => { setActiveModal(null)
      }}
       activeModal={activeModal}>
        <ModalPage id="skin_info"
        header={
          <ModalPageHeader
            right={<PanelHeaderButton onClick = {() => { setActiveModal(null)
            }} ><Icon24DoneOutline/></PanelHeaderButton>}
          >
            Карточка скина
          </ModalPageHeader>
        }>
           <Group title="MainInfo" header={<Header mode="secondary">Основная информация</Header>}>
           <Banner
           before={<Avatar size={48} />}
           header="Никнейм игрока:"
           subheader="ID Аккаунта:"
         />
          <SimpleCell>
          <InfoRow header="Комментарий игрока">
            Здесь расположен комментарий игрока.
          </InfoRow>
          </SimpleCell>
          <SimpleCell>
          <InfoRow header="Комментарий администратора">
            Здесь расположен комментарий администратора.
          </InfoRow>
          </SimpleCell>
          </Group>
          <Group title="Gallery" header={<Header mode="secondary">Галерея</Header>}>
          <Gallery
                slideWidth="90%"
                style={{ height: 150 }}
                bullets="dark"
              >
                <div style={{ backgroundColor: 'var(--destructive)' }} />
                <div style={{ backgroundColor: 'var(--button_commerce_background)' }} />
                <div style={{ backgroundColor: 'var(--accent)' }} />
              </Gallery>
              <Separator/>
          </Group>
        </ModalPage>
      </ModalRoot>
      )

Просто открывается модальная страница . Для этого мне нужно получить идентификатор, и все будут делать c данные, которые я нажал

1 Ответ

0 голосов
/ 28 мая 2020 
const Row = ({setActiveItem, playerID}) => (
    <Cell onClick={e => setActiveItem(playerID)}>
        Автор: {playerID.nickname}
    </Cell>
);
const List = () => {
    const [activeItem, setActiveItem] = useState(null);
    {request.map((playerID) => (
        <Row
            key={playerID.player_id}
            setActiveItem={setActiveItem}
            playerID={playerID}
        />
    )}
    <Modal activeItem={activeItem} />
}
...