monacard2.js

import React, { useState, useEffect } from "react"
import ReactAudioPlayer from 'react-audio-player'

export default function Monacard2(props) {
  const [url, setUrl] = useState(null);
  const [audiourl, setAudiourl] = useState(''); // TODO
  const name = props.name;
  const gateway = props.gateway || 'https://ipfs.io/';
  useEffect(() => {
    const api = 'https://monapa.electrum-mona.org/_api'
    const data = {
      "jsonrpc": "2.0",
      "id": 0,
      "method": "get_assets_info",
      "params": {
        "assetsList": [
          name
        ]
      }
    };
    fetch(api, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data),
      })
      .then(res => res.json())
      .then(
        result => {
          const asset = result.result[0]
          const desc = asset.description
          const descobj = JSON.parse(desc);
          const monacard = descobj['monacard'];
          const cid = monacard.cid;
          const url2 = gateway + 'ipfs/' + cid;
          setUrl(url2);
          const monamusic = descobj['monamusic'] || {}; // TODO
          if (monamusic) {
            const acid = descobj['cid'] || ''; // TODO
            let aurl = gateway + 'ipfs/' + acid;
            aurl = '/1297595792.mp3'; // TODO
            setAudiourl(aurl);
          }
        },
        error => {
          console.log(error) // TODO
        });
  }, [gateway, name]);
  let audiotag = <div />;
  if (audiourl !== '') {
    audiotag = <ReactAudioPlayer controls src={audiourl} />
  }
  return (
    <div>
      <img src={url} alt={name} width='224' height='320' />
      <br />
      {audiotag}
    </div>
  );
}