import Table from "react-bootstrap/Table";
import axios from "axios";
import { Link } from "react-router-dom";
import { useState, useEffect } from "react";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";

const endpoint = "http://localhost:8000/api";
const endpointAccount = "http://localhost:8000/api";

const OpportunityShow = () => {
  const [opportunities, setOpportunities] = useState([]);
  const [accounts, setAccounts] = useState([]);

  useEffect(() => {
    getAllOpportunities();
  }, []);

  useEffect(() => {
    getAllAccounts();
  }, []);

  const getAllAccounts = async () => {
    const response = await axios.get(`${endpointAccount}/accounts`);
    setAccounts(response.data);
    console.log(accounts);
  };

  const getAllOpportunities = async () => {
    const response = await axios.get(`${endpoint}/opportunities`);
    setOpportunities(response.data);
  };

  const deleteOpportunity = async (id) => {
    await axios.delete(`${endpoint}/opportunity/${id}`);
    getAllOpportunities();
  };

  return (
    <div className="d-grid gap-2">
      <div className="row">
        <div className="col-8">
          <Form className="d-flex m-1">
            <Form.Control
              type="search"
              placeholder="Filtro"
              className="me-2"
              aria-label="Search"
            />
            <Button variant="outline-secondary">Search</Button>
          </Form>
        </div>
        <div className="col-4">
          <Link
            to="/opportunity/create"
            className="col-11 btn btn-outline-primary m-1 "
          >
            Create
          </Link>
        </div>
      </div>
      <Table hover className="">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Nome</th>
            <th scope="col">Conta id</th>
            <th scope="col">Conta nome</th>
            <th scope="col">Fase</th>
            <th scope="col">Data Fechamento</th>
            <th className="text-center" scope="col">
              Ações
            </th>
          </tr>
        </thead>
        <tbody>
          {opportunities.map((opportunity) => (
            <tr key={opportunity.id}>
              <th>{opportunity.id}</th>
              <td>{opportunity.nome}</td>
              <td>{opportunity.account_id}</td>
              <td value={opportunity.account_id}>{accounts.nome}</td>
              <td>{opportunity.estagioNome}</td>
              <td>{opportunity.dataApresentacao}</td>
              <td className="text-center">
                <Link
                  to={`edit/${opportunity.id}`}
                  className="btn btn-outline-warning"
                >
                  Editar
                </Link>
                <button
                  onClick={() => deleteOpportunity(opportunity.id)}
                  className="btn btn-outline-danger m-1"
                >
                  Deletar
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
};

export default OpportunityShow;

As it is, I can get the account id within opportunities, but I don't know how to relate it to the account array id and thus return its name along with the opportunity name.

Good morning, how are you? Dear I have 2 arrays 1 of opportunities and 1 of accounts, where an account can have multiple opportunities. Within opportunities I have the account ID. When displaying the opportunity I want to get the account name from the accounts table. So it is: Opportunity Name | Account name On my listing screen.

CodePudding user response：

Since, you're using laravel, you should retrieve foreign references to other tables in the the same query with their Models, instead of doing it separately and getting 2 different arrays like you are now. Assuming the following is the Model for opportunities table, add a relationship to the accounts table like so:

class Opportunity extends Model
{    
    // Assuming you've named your table opportunities 
    protected $table = 'opportunities';

    public function account() {
        // Assuming Account is your model for accounts table
        return $this->belongsTo(Account::class, 'account_id');
    }
}

Then you can do something like this to retrieve nested account instances in every opportunity instance inside the /api/opportunities GET endpoint:

// Endpoint to get opportunities
public function getOpportunities() {
    return Opportunity::with('account')->get();
}

On the frontend, your opportunities array would look something like this:

[
    {
        id: 1,
        // Other opportunity properties...
        account: {
            id: 1,
            // Other account properties...
        }
    }
    // Other opportunity instances...
]

CodePudding user response：

you can do if else condition it makes better