Gets the user's Real Estate

This commit is contained in:
Vazhin Tayeb 2021-01-17 13:27:42 +03:00
parent 4711bf105b
commit de8b920ea2
3 changed files with 13 additions and 24 deletions

View File

@ -16,7 +16,9 @@ const VehiclesMain = () => {
const history = useHistory(); const history = useHistory();
const [vehicleData, setVehicleData] = useState(null); const [vehicleData, setVehicleData] = useState([]);
console.log(vehicleData);
useEffect(() => { useEffect(() => {
getVehicles(); getVehicles();
@ -46,7 +48,7 @@ const VehiclesMain = () => {
{vehicleData ? ( {vehicleData ? (
<> <>
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<Heading3>Your Vehicles:</Heading3> <Heading3>Your Real Estate:</Heading3>
<Button <Button
text="Register" text="Register"
// classes={vehicleData && "self-start"} // classes={vehicleData && "self-start"}

View File

@ -4,27 +4,14 @@ import EditBtns from "./EditBtns";
import TableData from "./TableData"; import TableData from "./TableData";
const Table = ({ vehicleData }) => { const Table = ({ vehicleData }) => {
function getType(type) {
// eslint-disable-next-line
switch (type) {
case 1:
return "Sedan";
case 2:
return "SUV";
case 3:
return "Pickup";
}
}
return ( return (
<div className="shadow overflow-x-auto border-b border-gray-200 sm:rounded w-full"> <div className="shadow overflow-x-auto border-b border-gray-200 sm:rounded w-full">
<table className="min-w-full divide-y divide-gray-200 mb-0"> <table className="min-w-full divide-y divide-gray-200 mb-0">
<thead className="bg-gray-50"> <thead className="bg-gray-50">
<tr> <tr>
<ColumnName text={"Model"} /> <ColumnName text={"Address"} />
<ColumnName text={"License Plate"} /> <ColumnName text={"Area"} />
<ColumnName text={"Color"} /> <ColumnName text={"Citizen UPN"} />
<ColumnName text={"Type"} />
<th scope="col" className="relative px-6 py-3"> <th scope="col" className="relative px-6 py-3">
<span className="sr-only">Actions</span> <span className="sr-only">Actions</span>
</th> </th>
@ -33,10 +20,9 @@ const Table = ({ vehicleData }) => {
<tbody className="bg-white divide-y divide-gray-200"> <tbody className="bg-white divide-y divide-gray-200">
{vehicleData.map((vehicle) => ( {vehicleData.map((vehicle) => (
<tr key={vehicle.id}> <tr key={vehicle.id}>
<TableData text={vehicle.model} /> <TableData text={vehicle.address} />
<TableData text={vehicle.licensePlate} /> <TableData text={vehicle.area} />
<TableData text={vehicle.color} /> <TableData text={vehicle.citizen_upn} />
<TableData text={getType(vehicle.type)} />
<TableData Component={EditBtns} /> <TableData Component={EditBtns} />
</tr> </tr>
))} ))}

View File

@ -1,16 +1,17 @@
import axios from "axios"; import axios from "axios";
async function getVehiclesFromApi(access_token) { async function getVehiclesFromApi(access_token) {
const response = await axios.get(`https://localhost:8000/real-estate`, { const response = await axios.get(`http://localhost:8000/real-estate`, {
headers: { Authorization: `Bearer ${access_token}` }, headers: { Authorization: `Bearer ${access_token}` },
}); });
return response.data; return response.data;
} }
async function registerVehicle(vehicle, access_token) { async function registerVehicle(vehicle, access_token) {
console.log(vehicle); console.log(vehicle);
const response = await axios.post( const response = await axios.post(
`https://localhost:8000/real-estate`, `http://localhost:8000/real-estate`,
vehicle, vehicle,
{ headers: { Authorization: `Bearer ${access_token}` } } { headers: { Authorization: `Bearer ${access_token}` } }
); );