TRUCK DETAILS WITH ACCORDIAN START

PHOTO EMBED

Mon Mar 22 2021 21:07:25 GMT+0000 (UTC)

Saved by @stephanieraymos

import React, { useState, useEffect } from "react";
import { FaAngleDoubleLeft, FaTimes, FaEdit } from "react-icons/fa";
import Navigation from "./Navigation";
// import { useTruck } from "../truckContext";
import { useParams, Link } from "react-router-dom";
import Loading from "./Loading";
import logo from "../img/logo-blue.svg";
import { Card, Accordion } from "react-bootstrap";

const url = "http://143.110.225.28/api/v1/inventory/?id=";

const TruckDetails = () => {
  const { id } = useParams();
  const [loading, setLoading] = useState(false);
  const [truck, setTruck] = useState(null);
  const [truckFile, setTruckFile] = useState([]);

  // const {
  //   trucks,
  //   truckName,
  //   truckPrice,
  //   truckContents,
  //   truckManifest,
  //   truckId,
  // } = useTruck();
  document.title = "Truck Details";

  //^ GET MANIFEST REQUEST //
  const getManifest = (truckManifestId) => {
    try {
      const data = new FormData();
      truckManifestId.map((id) => data.append("truckManifestId", id));
      fetch("http://143.110.225.28/api/v1/inventory/manifest/", {
        method: "POST",
        body: data,
      })
        .then((response) => response.json())
        .then((manifest) => setTruckFile(manifest));
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    setLoading(true);
    async function getTruck() {
      try {
        const response = await fetch(`${url}${id}`);
        const data = await response.json();
        if (data) {
          const {
            truckName: truckName,
            truckPrice: truckPrice,
            truckContents: truckContents,
            truckManifestId: truckManifestId,
          } = data[0];

          getManifest(truckManifestId);

          const newTruck = {
            truckName,
            truckPrice,
            truckContents,
            truckManifestId,
          };
          setTruck(newTruck);
        } else {
          setTruck(null);
        }
        setLoading(false);
        console.log(data);
      } catch (err) {
        console.log(err);
        setLoading(false);
      }
    }
    getTruck();
  }, [id]);
  if (loading) {
    return <Loading />;
  }
  if (!truck) {
    return <h2>No truck to display</h2>;
  }
  const { truckName, truckPrice, truckContents, truckManifestId } = truck;

  return (
    <>
      <div>
        <Navigation />
      </div>
      <div className="back-to-link-container">
        <FaAngleDoubleLeft />
        <Link to="/InventoryAllTrucks" className="back-to-link">
          Back to inventory
        </Link>
      </div>

      <section className="truck-section">
        <h2 className="truck-details-header">{truckName}</h2>
        <div className="truck">
          <img src={logo} alt={truckName} />
          <div className="truck-info">
            <p className="data-wrapper">
              <span className="truck-data-title">Name: </span>
              {truckName}
            </p>
            <p className="data-wrapper">
              <span className="truck-data-title">Price: </span>
              <span className="truck-data">{truckPrice}</span>
            </p>

            <p className="data-wrapper">
              <span className="truck-data-title">Contents: </span>
              {truckContents.map((truck, index) => {
                return truck ? <span key={index}>{truck},</span> : null;
              })}
            </p>

            <Accordion defaultActiveKey="0">
              <Card>
                <Accordion.Toggle as={Card.Header} eventKey="0">
                  Click me!
                </Accordion.Toggle>
                <Accordion.Collapse eventKey="0">
                  <Card.Body>Hello! I'm the body</Card.Body>
                </Accordion.Collapse>
              </Card>
              <Card>
                <Accordion.Toggle as={Card.Header} eventKey="1">
                  Click me!
                </Accordion.Toggle>
                <Accordion.Collapse eventKey="1">
                  <Card.Body>Hello! I'm another body</Card.Body>
                </Accordion.Collapse>
              </Card>
            </Accordion>

            {truckFile.map((manifest, index) => {
              const { truckManifest, truckManifestName } = manifest;
              return (
                <ul>
                  <li
                    key={truckManifestId[index]}
                    onClick={
                      () =>
                        window.open(truckManifest, "_blank") ||
                        window.location.replace(truckManifest) //Opens in new tab || Opens in same tab if pop ups are blocked
                    }
                  >
                    <p className="data-wrapper">
                      {index == 0 && (
                        <span className="truck-data-title">Files: </span>
                      )}
                      {/* {index != 0 && (
                        <span
                          style={{ paddingLeft: "3.7rem" }}
                        ></span> //Putting padding to left of child files
                      )} */}
                      {index != 0 && <p style={{ margin: "-20rem" }}></p>}
                      <span style={{ cursor: "pointer", color: "black" }}>
                        {truckManifestName}
                      </span>
                    </p>
                  </li>
                </ul>
              );
            })}

            <p className="data-wrapper">
              <span className="truck-data-delete">Delete: </span>
              <button className="delete-truck-btn">
                <FaTimes /> Delete this truck
              </button>
            </p>
            <p className="data-wrapper">
              <span className="truck-data-edit">Edit: </span>
              <button className="edit-truck-btn">
                <FaEdit /> Edit this truck
              </button>
            </p>
          </div>
        </div>
      </section>
    </>
  );
};

export default TruckDetails;

// TP-52
content_copyCOPY