App.js final version

App.js

import { AddCar, NavBar, NewCars } from "./ui-components";
import { Divider, withAuthenticator } from "@aws-amplify/ui-react";
import { DataStore } from "@aws-amplify/datastore";
import { Car } from "./models";
import { useState } from "react";
import "./App.css";

// retrieving signOut function, and user data
function App({ user, signOut }) {
  const [name, setName] = useState("");
  const [price, setPrice] = useState("");
  const [description, setDescription] = useState("");
  const [imageUrl, setImageUrl] = useState("");

  const saveCar = async () => {
    try {
      await DataStore.save(
        new Car({
          name: name,
          price: parseFloat(price),
          description: description,
          imageUrl: imageUrl,
        })
      );
    } catch (err) {
      console.log(err);
    }
  };

  const navbarOverrides = {
    "Flex.Flex[0].Image[0]": {
      src: "https://img.icons8.com/color/50/000000/car--v1.png", // app logo
    },
    "Flex.Flex[2].Image[0]": {
      src: user?.attributes?.profile, // passing profile image from user object
    },
    "Flex.Flex[2].Button[0]": {
      onClick: signOut, // passing signOut function
    },
  };

  const addCarOverrides = {
    "Flex.Flex[0].Flex[1].TextField[0]": {
      onChange: (event) => {
        setName(event.target.value);
      },
    },
    "Flex.Flex[0].Flex[1].TextField[1]": {
      onChange: (event) => {
        setPrice(event.target.value);
      },
    },
    "Flex.Flex[0].Flex[1].TextField[2]": {
      onChange: (event) => {
        setDescription(event.target.value);
      },
    },
    "Flex.Flex[0].Flex[1].TextField[3]": {
      onChange: (event) => {
        setImageUrl(event.target.value);
      },
    },
    "Flex.Flex[0].Flex[2].Button[0]": {
      onClick: saveCar,
    },
  };

  return (
    <div className="App">
      <NavBar overrides={navbarOverrides} width={"100%"} />
      <header className="App-header">
        <AddCar
          overrides={addCarOverrides}
          style={{ textAlign: "left", margin: "1rem" }}
        />
        <Divider />
        <NewCars />
      </header>
    </div>
  );
}

export default withAuthenticator(App);