Implement Edit Listing page with update, pause, delete, and cancel operations

.gitignore

@@ -1,4 +1,11 @@
+# Dependencies
 /node_modules
+**/node_modules
+
+# Build outputs
+**/dist
+**/.tsbuildinfo
+
 .DS_Store
 **/coverage
 # .gitignore template - https://github.com/github/gitignore/blob/main/Node.gitignore

apps/ui-sharethrift/package.json

@@ -49,6 +49,7 @@
 		"@vitejs/plugin-react": "^4.7.0",
 		"@vitest/browser": "3.2.4",
 		"@vitest/coverage-v8": "^3.2.4",
+		"@vitest/runner": "^3.2.4",
 		"eslint": "^9.30.1",
 		"eslint-plugin-react-hooks": "^5.2.0",
 		"eslint-plugin-react-refresh": "^0.4.20",

apps/ui-sharethrift/src/components/layouts/home/components/create-listing/create-listing-form.tsx

@@ -1,9 +1,7 @@
-import { Row, Col, Button, Form, Input, Select, DatePicker, Space } from 'antd';
+import { Row, Col, Button } from 'antd';
 import type { ConfigType } from 'dayjs';
 import dayjs from 'dayjs';
-
-const { TextArea } = Input;
-const { RangePicker } = DatePicker;
+import { ListingFormFields } from '../shared/listing-form-fields.tsx';
 
 interface ListingFormProps {
 	categories: string[];
@@ -34,80 +32,11 @@ export const ListingForm: React.FC<ListingFormProps> = ({
 	};
 
 	return (
-		<div className="create-listing-form-responsive">
-			<Space direction="vertical" size="large" style={{ width: '100%' }}>
-				<Form.Item
-					label="Title"
-					name="title"
-					rules={[
-						{ required: true, message: 'Title is required' },
-						{ max: 200, message: 'Title cannot exceed 200 characters' },
-					]}
-				>
-					<Input placeholder="Enter item title" />
-				</Form.Item>
-
-				<Form.Item
-					label="Location"
-					name="location"
-					rules={[
-						{ required: true, message: 'Location is required' },
-						{ max: 255, message: 'Location cannot exceed 255 characters' },
-					]}
-				>
-					<Input placeholder="Enter location" />
-				</Form.Item>
-
-				<Form.Item
-					label="Category"
-					name="category"
-					rules={[{ required: true, message: 'Category is required' }]}
-				>
-					<Select placeholder="Select a category">
-						{categories.map((category) => (
-							<Select.Option key={category} value={category}>
-								{category}
-							</Select.Option>
-						))}
-					</Select>
-				</Form.Item>
-
-				<Form.Item
-					label="Reservation Period"
-					name="sharingPeriod"
-					rules={[
-						{ required: true, message: 'Reservation period is required' },
-					]}
-				>
-					<RangePicker
-						style={{ width: '100%' }}
-						placeholder={['Start date', 'End date']}
-						disabledDate={disabledDate}
-					/>
-				</Form.Item>
-
-				<Form.Item
-					label="Description"
-					name="description"
-					rules={[
-						{ required: true, message: 'Description is required' },
-						{
-							max: maxCharacters,
-							message: `Description cannot exceed ${maxCharacters} characters`,
-						},
-					]}
-				>
-					<TextArea
-						placeholder="Describe your item"
-						rows={6}
-						showCount={{
-							formatter: ({ count }: { count: number }) =>
-								`${count}/${maxCharacters}`,
-						}}
-					/>
-				</Form.Item>
-
-				{/* Action Buttons */}
+		<ListingFormFields
+			categories={categories}
+			maxCharacters={maxCharacters}
+			disabledDate={disabledDate}
+			actions={
 				<Row
 					gutter={16}
 					style={{ marginTop: '24px' }}
@@ -143,8 +72,8 @@ export const ListingForm: React.FC<ListingFormProps> = ({
 						</Button>
 					</Col>
 				</Row>
-			</Space>
-		</div>
+			}
+		/>
 	);
 };
 

apps/ui-sharethrift/src/components/layouts/home/components/create-listing/create-listing.container.tsx

@@ -1,16 +1,21 @@
 import type React from 'react';
 import { useState, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useMutation } from "@apollo/client/react";
+import { useMutation } from '@apollo/client/react';
 import { message } from 'antd';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
 import {
 	CreateListing,
 	type CreateListingFormData,
 } from './create-listing.tsx';
+
+dayjs.extend(utc);
 import {
 	HomeCreateListingContainerCreateItemListingDocument,
 	type HomeCreateListingContainerCreateItemListingMutation,
 	type HomeCreateListingContainerCreateItemListingMutationVariables,
+	ListingsPageContainerGetListingsDocument,
 } from '../../../../../generated.tsx';
 
 interface CreateListingContainerProps {
@@ -55,16 +60,23 @@ export const CreateListingContainer: React.FC<CreateListingContainerProps> = (
 						: 'Listing published successfully!',
 				);
 
-				// Don't navigate automatically - let user choose from modal
-			},
-			onError: (error) => {
-				console.error('Error creating listing:', error);
-				message.error('Failed to create listing. Please try again.');
-			},
-			// Refetch listings to update the cache
-			refetchQueries: ['GetListings'],
+			// Don't navigate automatically - let user choose from modal
 		},
-	);
+		onError: (error) => {
+			console.error('Error creating listing:', error);
+			message.error('Failed to create listing. Please try again.');
+		},
+		// Refetch listings to update the cache
+		refetchQueries: [{ query: ListingsPageContainerGetListingsDocument }],
+	});
+
+	const toUtcMidnight = (value: string): Date => {
+		const date = dayjs(value).utc().startOf('day');
+		if (!date.isValid()) {
+			throw new TypeError('Invalid date string provided for reservation period');
+		}
+		return date.toDate();
+	};
 
 	const handleSubmit = async (
 		formData: CreateListingFormData,
@@ -82,8 +94,8 @@ export const CreateListingContainer: React.FC<CreateListingContainerProps> = (
 			description: formData.description,
 			category: formData.category,
 			location: formData.location,
-			sharingPeriodStart: new Date(formData.sharingPeriod[0]),
-			sharingPeriodEnd: new Date(formData.sharingPeriod[1]),
+			sharingPeriodStart: toUtcMidnight(formData.sharingPeriod[0]),
+			sharingPeriodEnd: toUtcMidnight(formData.sharingPeriod[1]),
 			images: formData.images,
 			isDraft,
 		};

apps/ui-sharethrift/src/components/layouts/home/components/create-listing/create-listing.overrides.css

@@ -8,7 +8,7 @@
 	}
 	.create-listing-main-responsive {
 		flex-direction: column !important;
-		gap: 16px !important;
+		gap: 0 !important;
 		align-items: center !important;
 		margin-bottom: 0 !important;
 		padding-bottom: 24px !important;
@@ -17,6 +17,7 @@
 		display: block !important;
 		justify-content: flex-start !important;
 		align-items: stretch !important;
+		margin-bottom: 32px !important;
 	}
 	.create-listing-images-responsive,
 	.create-listing-form-responsive {
@@ -31,21 +32,33 @@
 		aspect-ratio: auto !important;
 		height: auto !important;
 		min-height: 300px !important;
-		margin-bottom: 16px !important;
+		margin-bottom: 0 !important;
 		margin-top: 24px !important;
-		padding-bottom: 32px !important;
+		padding-bottom: 16px !important;
 	}
 	.create-listing-form-responsive {
 		width: 100% !important;
 		max-width: none !important;
 		margin-left: auto !important;
 		margin-right: auto !important;
-		margin-top: 0 !important;
+		margin-top: 24px !important;
 		position: relative !important;
 		z-index: 1 !important;
-		padding-top: 40px !important;
+		padding-top: 0 !important;
 		margin-bottom: 32px !important;
 	}
+	/* Ensure form labels and inputs are properly spaced */
+	.create-listing-form-responsive .ant-form-item {
+		margin-bottom: 20px !important;
+	}
+	.create-listing-form-responsive .ant-form-item-label {
+		padding-bottom: 4px !important;
+	}
+	.create-listing-form-responsive .ant-input,
+	.create-listing-form-responsive .ant-select,
+	.create-listing-form-responsive .ant-picker {
+		font-size: 16px !important; /* Prevent zoom on iOS */
+	}
 	.listing-gallery-responsive .slick-arrow {
 		color: var(--color-secondary, #3f8176) !important;
 	}
@@ -83,16 +96,47 @@
 }
 
 /* Add vertical spacing between buttons when they wrap */
-.create-listing-buttons .ant-col {
-	margin-bottom: 8px !important;
+.create-listing-buttons {
+	display: flex !important;
+	flex-wrap: wrap !important;
+	gap: 12px !important;
 }
-.create-listing-buttons .ant-col:last-child {
+
+.create-listing-buttons .ant-col {
 	margin-bottom: 0 !important;
+	padding: 0 !important;
+}
+
+/* Mobile button stacking */
+@media (max-width: 768px) {
+	.create-listing-buttons {
+		flex-direction: column !important;
+		gap: 12px !important;
+	}
+	.create-listing-buttons .ant-col {
+		width: 100% !important;
+		max-width: 100% !important;
+	}
+	.create-listing-buttons .ant-col .ant-btn {
+		width: 100% !important;
+	}
 }
 
+/* Tablet layout - wrap buttons */
+@media (min-width: 769px) and (max-width: 1024px) {
+	.create-listing-buttons {
+		gap: 8px !important;
+	}
+	.create-listing-buttons .ant-col .ant-btn {
+		padding-left: 12px !important;
+		padding-right: 12px !important;
+		font-size: 14px !important;
+	}
+}
+
+.listing-gallery-responsive label,
 .listing-gallery-responsive .slick-slide img,
-.listing-gallery-responsive .slick-slide label,
-.listing-gallery-responsive label {
+.listing-gallery-responsive .slick-slide label {
 	max-width: none !important;
 	max-height: none !important;
 	width: 100% !important;
@@ -134,18 +178,41 @@
 	transform: scale(1.1) !important;
 }
 
-@media (max-width: 600px) {
+/* Desktop layout - add padding between columns */
+@media (min-width: 769px) {
 	.image-col {
-		margin-left: -16px !important;
-		margin-right: -16px !important;
-		width: calc(100% + 32px) !important;
+		padding-right: 32px !important;
+	}
+	.form-col {
+		padding-left: 32px !important;
 	}
 }
 
-@media (max-width: 600px) {
+/* Tablet layout - add spacing */
+@media (min-width: 601px) and (max-width: 768px) {
+	.image-col {
+		padding-right: 24px !important;
+		margin-bottom: 24px !important;
+	}
 	.form-col {
+		padding-left: 24px !important;
+	}
+}
+
+/* Mobile layout */
+@media (max-width: 600px) {
+	.image-col {
 		margin-left: -16px !important;
 		margin-right: -16px !important;
 		width: calc(100% + 32px) !important;
+		margin-bottom: 32px !important;
+		padding-bottom: 0 !important;
+	}
+	.form-col {
+		margin-left: 0 !important;
+		margin-right: 0 !important;
+		width: 100% !important;
+		padding-left: 0 !important;
+		padding-right: 0 !important;
 	}
 }