Jackie/rentall-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

payouts

Browse Source
This commit is contained in:
jackiettran
2025-09-02 16:15:09 -04:00
parent b52104c3fa
commit b59fc07fc3
23 changed files with 1080 additions and 417 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
frontend/src/pages/CreateItemRequest.tsx
View File

@@ -1,45 +1,49 @@
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import { itemRequestAPI } from '../services/api';
import AddressAutocomplete from '../components/AddressAutocomplete';
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { useAuth } from "../contexts/AuthContext";
import { itemRequestAPI } from "../services/api";
import AddressAutocomplete from "../components/AddressAutocomplete";
const CreateItemRequest: React.FC = () => {
const navigate = useNavigate();
const { user } = useAuth();
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [formData, setFormData] = useState({
title: '',
description: '',
address1: '',
address2: '',
city: '',
state: '',
zipCode: '',
country: 'US',
title: "",
description: "",
address1: "",
address2: "",
city: "",
state: "",
zipCode: "",
country: "US",
latitude: undefined as number | undefined,
longitude: undefined as number | undefined,
maxPricePerHour: '',
maxPricePerDay: '',
preferredStartDate: '',
preferredEndDate: '',
isFlexibleDates: true
maxPricePerHour: "",
maxPricePerDay: "",
preferredStartDate: "",
preferredEndDate: "",
isFlexibleDates: true,
});
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
const handleChange = (
e: React.ChangeEvent<
HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
>
) => {
const { name, value, type } = e.target;
if (type === 'checkbox') {
if (type === "checkbox") {
const checked = (e.target as HTMLInputElement).checked;
setFormData(prev => ({ ...prev, [name]: checked }));
setFormData((prev) => ({ ...prev, [name]: checked }));
} else {
setFormData(prev => ({ ...prev, [name]: value }));
setFormData((prev) => ({ ...prev, [name]: value }));
}
};
const handleAddressChange = (value: string, lat?: number, lon?: number) => {
setFormData(prev => ({
setFormData((prev) => ({
...prev,
address1: value,
latitude: lat,
@@ -47,7 +51,7 @@ const CreateItemRequest: React.FC = () => {
city: prev.city,
state: prev.state,
zipCode: prev.zipCode,
country: prev.country
country: prev.country,
}));
};
@@ -61,16 +65,20 @@ const CreateItemRequest: React.FC = () => {
try {
const requestData = {
...formData,
maxPricePerHour: formData.maxPricePerHour ? parseFloat(formData.maxPricePerHour) : null,
maxPricePerDay: formData.maxPricePerDay ? parseFloat(formData.maxPricePerDay) : null,
maxPricePerHour: formData.maxPricePerHour
? parseFloat(formData.maxPricePerHour)
: null,
maxPricePerDay: formData.maxPricePerDay
? parseFloat(formData.maxPricePerDay)
: null,
preferredStartDate: formData.preferredStartDate || null,
preferredEndDate: formData.preferredEndDate || null
preferredEndDate: formData.preferredEndDate || null,
};
await itemRequestAPI.createItemRequest(requestData);
navigate('/my-requests');
navigate("/my-requests");
} catch (err: any) {
setError(err.response?.data?.error || 'Failed to create item request');
setError(err.response?.data?.error || "Failed to create item request");
setLoading(false);
}
};
@@ -92,7 +100,9 @@ const CreateItemRequest: React.FC = () => {
<div className="card">
<div className="card-header">
<h2 className="mb-0">Request an Item</h2>
<p className="text-muted mb-0">Can't find what you need? Request it and let others know!</p>
<p className="text-muted mb-0">
Can't find what you need? Request it and let others know!
</p>
</div>
<div className="card-body">
{error && (
@@ -103,7 +113,9 @@ const CreateItemRequest: React.FC = () => {
<form onSubmit={handleSubmit}>
<div className="mb-3">
<label htmlFor="title" className="form-label">What are you looking for? *</label>
<label htmlFor="title" className="form-label">
What are you looking for? *
</label>
<input
type="text"
className="form-control"
@@ -117,7 +129,9 @@ const CreateItemRequest: React.FC = () => {
</div>
<div className="mb-3">
<label htmlFor="description" className="form-label">Description *</label>
<label htmlFor="description" className="form-label">
Description *
</label>
<textarea
className="form-control"
id="description"
@@ -132,7 +146,9 @@ const CreateItemRequest: React.FC = () => {
<div className="row mb-3">
<div className="col-md-6">
<label htmlFor="maxPricePerDay" className="form-label">Max Price per Day</label>
<label htmlFor="maxPricePerDay" className="form-label">
Max Price per Day
</label>
<div className="input-group">
<span className="input-group-text">$</span>
<input
@@ -149,7 +165,9 @@ const CreateItemRequest: React.FC = () => {
</div>
</div>
<div className="col-md-6">
<label htmlFor="maxPricePerHour" className="form-label">Max Price per Hour</label>
<label htmlFor="maxPricePerHour" className="form-label">
Max Price per Hour
</label>
<div className="input-group">
<span className="input-group-text">$</span>
<input
@@ -178,7 +196,9 @@ const CreateItemRequest: React.FC = () => {
<div className="row mb-3">
<div className="col-md-6">
<label htmlFor="address2" className="form-label">Apartment, suite, etc.</label>
<label htmlFor="address2" className="form-label">
Apartment, suite, etc.
</label>
<input
type="text"
className="form-control"
@@ -190,7 +210,9 @@ const CreateItemRequest: React.FC = () => {
/>
</div>
<div className="col-md-6">
<label htmlFor="city" className="form-label">City</label>
<label htmlFor="city" className="form-label">
City
</label>
<input
type="text"
className="form-control"
@@ -205,7 +227,9 @@ const CreateItemRequest: React.FC = () => {
<div className="row mb-3">
<div className="col-md-6">
<label htmlFor="state" className="form-label">State</label>
<label htmlFor="state" className="form-label">
State
</label>
<input
type="text"
className="form-control"
@@ -217,7 +241,9 @@ const CreateItemRequest: React.FC = () => {
/>
</div>
<div className="col-md-6">
<label htmlFor="zipCode" className="form-label">ZIP Code</label>
<label htmlFor="zipCode" className="form-label">
ZIP Code
</label>
<input
type="text"
className="form-control"
@@ -240,7 +266,10 @@ const CreateItemRequest: React.FC = () => {
checked={formData.isFlexibleDates}
onChange={handleChange}
/>
<label className="form-check-label" htmlFor="isFlexibleDates">
<label
className="form-check-label"
htmlFor="isFlexibleDates"
>
I'm flexible with dates
</label>
</div>
@@ -249,7 +278,12 @@ const CreateItemRequest: React.FC = () => {
{!formData.isFlexibleDates && (
<div className="row mb-3">
<div className="col-md-6">
<label htmlFor="preferredStartDate" className="form-label">Preferred Start Date</label>
<label
htmlFor="preferredStartDate"
className="form-label"
>
Preferred Start Date
</label>
<input
type="date"
className="form-control"
@@ -257,11 +291,13 @@ const CreateItemRequest: React.FC = () => {
name="preferredStartDate"
value={formData.preferredStartDate}
onChange={handleChange}
min={new Date().toISOString().split('T')[0]}
min={new Date().toLocaleDateString()}
/>
</div>
<div className="col-md-6">
<label htmlFor="preferredEndDate" className="form-label">Preferred End Date</label>
<label htmlFor="preferredEndDate" className="form-label">
Preferred End Date
</label>
<input
type="date"
className="form-control"
@@ -269,7 +305,10 @@ const CreateItemRequest: React.FC = () => {
name="preferredEndDate"
value={formData.preferredEndDate}
onChange={handleChange}
min={formData.preferredStartDate || new Date().toISOString().split('T')[0]}
min={
formData.preferredStartDate ||
new Date().toLocaleDateString()
}
/>
</div>
</div>
@@ -281,7 +320,7 @@ const CreateItemRequest: React.FC = () => {
className="btn btn-primary"
disabled={loading}
>
{loading ? 'Creating Request...' : 'Create Request'}
{loading ? "Creating Request..." : "Create Request"}
</button>
<button
type="button"
@@ -300,4 +339,4 @@ const CreateItemRequest: React.FC = () => {
);
};
export default CreateItemRequest;
export default CreateItemRequest;