Display entity associated image (Filedescriptor) in front module with React

Support
#1

In my Cuba Platform app, I created the front module with React and I want to display, for each product entity, a image associated with it. Very simple task but its been very difficult to me…

If anyone could give me any suggestion I realy appreciate it.

Bellow follows my code:

import * as React from "react";
import { observer } from "mobx-react";
import { Produto } from "../../cuba/entities/pecnos_Produto";
import { Card } from "antd";
import { collection, MainStoreInjected, injectMainStore, getCubaREST} from "@cuba-platform/react-core";
import { addPagingParams, createPagingConfig, defaultPagingConfig, EntityProperty, Paging, setPagination,
  Spinner } from "@cuba-platform/react-ui";
import { getStringId } from "@cuba-platform/rest";
import { action, IReactionDisposer, observable, reaction } from "mobx";
import { PaginationConfig } from "antd/es/pagination";
import { RouteComponentProps } from "react-router";
import logo from "./logo.png";
import "./loja.css";

type Props = MainStoreInjected & RouteComponentProps;

@injectMainStore
@observer
export class ProdutoCards extends React.Component<Props> {

  dataCollection = collection<Produto>(Produto.NAME, {
    view: "produto-browse",
    sort: "-updateTs",
    loadImmediately: false
  });

  @observable paginationConfig: PaginationConfig = { ...defaultPagingConfig };
  reactionDisposer: IReactionDisposer;
  fields = [
    "nome",
    "unidade",
    "preco",
    "categoria",
    "compraMinima",
    "estabComercial",
    "estoque",
    "descricao",
    "conservacao"
  ];

  componentDidMount(): void {
    // to disable paging config pass 'true' as disabled param in function below
    
    this.paginationConfig = createPagingConfig(this.props.location.search);

    this.reactionDisposer = reaction(
      () => this.paginationConfig,
      paginationConfig =>
        setPagination(paginationConfig, this.dataCollection, true)
    );
    setPagination(this.paginationConfig, this.dataCollection, true);
  }

  componentWillUnmount() {
    this.reactionDisposer();
  }
  
  
  
  render() {
    
    const { status, items, count } = this.dataCollection;

    if (status === "LOADING") return <Spinner />;

    return (
      
      <div className="narrow-layout">      
    
        {items.map(e => (
          <Card
            title={e.nome}
            key={e.id ? getStringId(e.id) : undefined}
            style={{ marginBottom: "12px" }}
            >
                <div className="carddata">

                    {this.renderImage(e.image?.id!)}                    
                    <div className="dataprod">
                    <b>Nome: </b>{e.nome} <br/>
                    <b>Preço: </b> {e.preco} R$ / {e.unidade}<br/>
                </div>
            </div>
            
        </Card>
        
        ))}

        {!this.paginationConfig.disabled && (
          <div style={{ margin: "12px 0 12px 0", float: "right" }}>
            <Paging
              paginationConfig={this.paginationConfig}
              onPagingChange={this.onPagingChange}
              total={count}
            />
          </div>
        )}
      </div>
    );
  }

  async renderImage(imageId:string){

    let urlPromise = getCubaREST()?.getFile(imageId).then(function(blob:Blob){
      return(URL.createObjectURL(blob));
    });

    let url = await urlPromise;
    
    return(<img src={url} alt="not available"/>)
  }
  
  @action onPagingChange = (current: number, pageSize: number) => {
    this.props.history.push(addPagingParams("produtoCards", current, pageSize));
    this.paginationConfig = { ...this.paginationConfig, current, pageSize };
  };
  
}

[/details]

#2

I did it… I was making incorect use of state…

If someone is interested follows the correct code…

import { getCubaREST } from "@cuba-platform/react-core";
import * as React from "react";

type ImageProps= {
    imageId:string,
}

type ImageState={
    imageUrl?: string
}

export class Image extends React.Component<ImageProps, ImageState> {
    state: ImageState = {
        imageUrl: ""
    }

    render(){
        return(<img src={this.state.imageUrl} alt="indisp."/>)
    }

    componentDidMount(){
        const getUrl = async (imageId:string) => {

            let urlPromise = getCubaREST()?.getFile(this.props.imageId)
            .then(function(blob:Blob){
                return(URL.createObjectURL(blob))
           });

           let url = await urlPromise; 
           this.setState({imageUrl: url})
        }

        getUrl(this.props.imageId);
    }
}
1 Like