mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-20 08:31:12 -05:00
Refactor: Implement state machine cleanup and fixes
This commit is contained in:
@@ -1,9 +1,8 @@
|
|||||||
import { useState, useReducer } from 'react';
|
import { useState } from 'react';
|
||||||
import { useForm } from 'react-hook-form';
|
import { useForm } from 'react-hook-form';
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
import * as z from 'zod';
|
import * as z from 'zod';
|
||||||
import { entitySchemas } from '@/lib/entityValidationSchemas';
|
import { entitySchemas } from '@/lib/entityValidationSchemas';
|
||||||
import { submissionReducer, canSubmit } from '@/lib/submissionStateMachine';
|
|
||||||
import { getErrorMessage } from '@/lib/errorHandler';
|
import { getErrorMessage } from '@/lib/errorHandler';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
@@ -62,10 +61,6 @@ export function DesignerForm({ onSubmit, onCancel, initialData }: DesignerFormPr
|
|||||||
const { headquarters } = useCompanyHeadquarters();
|
const { headquarters } = useCompanyHeadquarters();
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [submissionState, dispatch] = useReducer(submissionReducer, {
|
|
||||||
status: 'draft' as const,
|
|
||||||
data: initialData || {}
|
|
||||||
});
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
@@ -104,16 +99,7 @@ export function DesignerForm({ onSubmit, onCancel, initialData }: DesignerFormPr
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!canSubmit(submissionState)) {
|
try {
|
||||||
toast.error('Cannot submit in current state');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
dispatch({ type: 'VALIDATE', payload: data });
|
|
||||||
|
|
||||||
try {
|
|
||||||
dispatch({ type: 'SUBMIT', payload: { submissionId: crypto.randomUUID() } });
|
|
||||||
|
|
||||||
const formData = {
|
const formData = {
|
||||||
...data,
|
...data,
|
||||||
company_type: 'designer' as const,
|
company_type: 'designer' as const,
|
||||||
@@ -122,20 +108,12 @@ export function DesignerForm({ onSubmit, onCancel, initialData }: DesignerFormPr
|
|||||||
|
|
||||||
await onSubmit(formData);
|
await onSubmit(formData);
|
||||||
|
|
||||||
dispatch({ type: 'SUBMISSION_COMPLETE' });
|
|
||||||
|
|
||||||
// Only show success toast and close if not editing through moderation queue
|
// Only show success toast and close if not editing through moderation queue
|
||||||
if (!initialData?.id) {
|
if (!initialData?.id) {
|
||||||
toast.success('Designer submitted for review');
|
toast.success('Designer submitted for review');
|
||||||
onCancel();
|
onCancel();
|
||||||
}
|
}
|
||||||
} catch (error: unknown) {
|
} catch (error: unknown) {
|
||||||
const errorMessage = getErrorMessage(error);
|
|
||||||
if (errorMessage.includes('validation')) {
|
|
||||||
dispatch({ type: 'VALIDATION_ERROR', payload: [{ field: 'general', message: errorMessage }] });
|
|
||||||
} else {
|
|
||||||
dispatch({ type: 'RESET' });
|
|
||||||
}
|
|
||||||
handleError(error, {
|
handleError(error, {
|
||||||
action: initialData?.id ? 'Update Designer' : 'Create Designer',
|
action: initialData?.id ? 'Update Designer' : 'Create Designer',
|
||||||
metadata: { companyName: data.name }
|
metadata: { companyName: data.name }
|
||||||
@@ -262,18 +240,16 @@ export function DesignerForm({ onSubmit, onCancel, initialData }: DesignerFormPr
|
|||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
onClick={onCancel}
|
onClick={onCancel}
|
||||||
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting'}
|
|
||||||
>
|
>
|
||||||
<X className="w-4 h-4 mr-2" />
|
<X className="w-4 h-4 mr-2" />
|
||||||
Cancel
|
Cancel
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting' || !canSubmit(submissionState)}
|
|
||||||
>
|
>
|
||||||
<Save className="w-4 h-4 mr-2" />
|
<Save className="w-4 h-4 mr-2" />
|
||||||
{(submissionState.status === 'validating' || submissionState.status === 'submitting') ? 'Submitting...' : 'Save Designer'}
|
Save Designer
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -1,9 +1,8 @@
|
|||||||
import { useState, useReducer } from 'react';
|
import { useState } from 'react';
|
||||||
import { useForm } from 'react-hook-form';
|
import { useForm } from 'react-hook-form';
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
import * as z from 'zod';
|
import * as z from 'zod';
|
||||||
import { entitySchemas } from '@/lib/entityValidationSchemas';
|
import { entitySchemas } from '@/lib/entityValidationSchemas';
|
||||||
import { submissionReducer, canSubmit } from '@/lib/submissionStateMachine';
|
|
||||||
import { getErrorMessage } from '@/lib/errorHandler';
|
import { getErrorMessage } from '@/lib/errorHandler';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
@@ -63,10 +62,6 @@ export function ManufacturerForm({ onSubmit, onCancel, initialData }: Manufactur
|
|||||||
const { headquarters } = useCompanyHeadquarters();
|
const { headquarters } = useCompanyHeadquarters();
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [submissionState, dispatch] = useReducer(submissionReducer, {
|
|
||||||
status: 'draft' as const,
|
|
||||||
data: initialData || {}
|
|
||||||
});
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
@@ -107,16 +102,7 @@ export function ManufacturerForm({ onSubmit, onCancel, initialData }: Manufactur
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!canSubmit(submissionState)) {
|
try {
|
||||||
toast.error('Cannot submit in current state');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
dispatch({ type: 'VALIDATE', payload: data });
|
|
||||||
|
|
||||||
try {
|
|
||||||
dispatch({ type: 'SUBMIT', payload: { submissionId: crypto.randomUUID() } });
|
|
||||||
|
|
||||||
const formData = {
|
const formData = {
|
||||||
...data,
|
...data,
|
||||||
company_type: 'manufacturer' as const,
|
company_type: 'manufacturer' as const,
|
||||||
@@ -125,20 +111,12 @@ export function ManufacturerForm({ onSubmit, onCancel, initialData }: Manufactur
|
|||||||
|
|
||||||
await onSubmit(formData);
|
await onSubmit(formData);
|
||||||
|
|
||||||
dispatch({ type: 'SUBMISSION_COMPLETE' });
|
|
||||||
|
|
||||||
// Only show success toast and close if not editing through moderation queue
|
// Only show success toast and close if not editing through moderation queue
|
||||||
if (!initialData?.id) {
|
if (!initialData?.id) {
|
||||||
toast.success('Manufacturer submitted for review');
|
toast.success('Manufacturer submitted for review');
|
||||||
onCancel();
|
onCancel();
|
||||||
}
|
}
|
||||||
} catch (error: unknown) {
|
} catch (error: unknown) {
|
||||||
const errorMessage = getErrorMessage(error);
|
|
||||||
if (errorMessage.includes('validation')) {
|
|
||||||
dispatch({ type: 'VALIDATION_ERROR', payload: [{ field: 'general', message: errorMessage }] });
|
|
||||||
} else {
|
|
||||||
dispatch({ type: 'RESET' });
|
|
||||||
}
|
|
||||||
handleError(error, {
|
handleError(error, {
|
||||||
action: initialData?.id ? 'Update Manufacturer' : 'Create Manufacturer',
|
action: initialData?.id ? 'Update Manufacturer' : 'Create Manufacturer',
|
||||||
metadata: { companyName: data.name }
|
metadata: { companyName: data.name }
|
||||||
@@ -263,18 +241,16 @@ export function ManufacturerForm({ onSubmit, onCancel, initialData }: Manufactur
|
|||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
onClick={onCancel}
|
onClick={onCancel}
|
||||||
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting'}
|
|
||||||
>
|
>
|
||||||
<X className="w-4 h-4 mr-2" />
|
<X className="w-4 h-4 mr-2" />
|
||||||
Cancel
|
Cancel
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting' || !canSubmit(submissionState)}
|
|
||||||
>
|
>
|
||||||
<Save className="w-4 h-4 mr-2" />
|
<Save className="w-4 h-4 mr-2" />
|
||||||
{(submissionState.status === 'validating' || submissionState.status === 'submitting') ? 'Submitting...' : 'Save Manufacturer'}
|
Save Manufacturer
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -1,9 +1,8 @@
|
|||||||
import { useState, useReducer } from 'react';
|
import { useState } from 'react';
|
||||||
import { useForm } from 'react-hook-form';
|
import { useForm } from 'react-hook-form';
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
import * as z from 'zod';
|
import * as z from 'zod';
|
||||||
import { entitySchemas } from '@/lib/entityValidationSchemas';
|
import { entitySchemas } from '@/lib/entityValidationSchemas';
|
||||||
import { submissionReducer, canSubmit } from '@/lib/submissionStateMachine';
|
|
||||||
import { getErrorMessage } from '@/lib/errorHandler';
|
import { getErrorMessage } from '@/lib/errorHandler';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
@@ -62,10 +61,6 @@ export function OperatorForm({ onSubmit, onCancel, initialData }: OperatorFormPr
|
|||||||
const { headquarters } = useCompanyHeadquarters();
|
const { headquarters } = useCompanyHeadquarters();
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [submissionState, dispatch] = useReducer(submissionReducer, {
|
|
||||||
status: 'draft' as const,
|
|
||||||
data: initialData || {}
|
|
||||||
});
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
@@ -104,16 +99,7 @@ export function OperatorForm({ onSubmit, onCancel, initialData }: OperatorFormPr
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!canSubmit(submissionState)) {
|
try {
|
||||||
toast.error('Cannot submit in current state');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
dispatch({ type: 'VALIDATE', payload: data });
|
|
||||||
|
|
||||||
try {
|
|
||||||
dispatch({ type: 'SUBMIT', payload: { submissionId: crypto.randomUUID() } });
|
|
||||||
|
|
||||||
const formData = {
|
const formData = {
|
||||||
...data,
|
...data,
|
||||||
company_type: 'operator' as const,
|
company_type: 'operator' as const,
|
||||||
@@ -122,20 +108,12 @@ export function OperatorForm({ onSubmit, onCancel, initialData }: OperatorFormPr
|
|||||||
|
|
||||||
await onSubmit(formData);
|
await onSubmit(formData);
|
||||||
|
|
||||||
dispatch({ type: 'SUBMISSION_COMPLETE' });
|
|
||||||
|
|
||||||
// Only show success toast and close if not editing through moderation queue
|
// Only show success toast and close if not editing through moderation queue
|
||||||
if (!initialData?.id) {
|
if (!initialData?.id) {
|
||||||
toast.success('Operator submitted for review');
|
toast.success('Operator submitted for review');
|
||||||
onCancel();
|
onCancel();
|
||||||
}
|
}
|
||||||
} catch (error: unknown) {
|
} catch (error: unknown) {
|
||||||
const errorMessage = getErrorMessage(error);
|
|
||||||
if (errorMessage.includes('validation')) {
|
|
||||||
dispatch({ type: 'VALIDATION_ERROR', payload: [{ field: 'general', message: errorMessage }] });
|
|
||||||
} else {
|
|
||||||
dispatch({ type: 'RESET' });
|
|
||||||
}
|
|
||||||
handleError(error, {
|
handleError(error, {
|
||||||
action: initialData?.id ? 'Update Operator' : 'Create Operator',
|
action: initialData?.id ? 'Update Operator' : 'Create Operator',
|
||||||
metadata: { companyName: data.name }
|
metadata: { companyName: data.name }
|
||||||
@@ -262,18 +240,16 @@ export function OperatorForm({ onSubmit, onCancel, initialData }: OperatorFormPr
|
|||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
onClick={onCancel}
|
onClick={onCancel}
|
||||||
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting'}
|
|
||||||
>
|
>
|
||||||
<X className="w-4 h-4 mr-2" />
|
<X className="w-4 h-4 mr-2" />
|
||||||
Cancel
|
Cancel
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting' || !canSubmit(submissionState)}
|
|
||||||
>
|
>
|
||||||
<Save className="w-4 h-4 mr-2" />
|
<Save className="w-4 h-4 mr-2" />
|
||||||
{(submissionState.status === 'validating' || submissionState.status === 'submitting') ? 'Submitting...' : 'Save Operator'}
|
Save Operator
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -1,10 +1,9 @@
|
|||||||
import { useState, useEffect, useReducer } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import { useForm } from 'react-hook-form';
|
import { useForm } from 'react-hook-form';
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
import * as z from 'zod';
|
import * as z from 'zod';
|
||||||
import { entitySchemas } from '@/lib/entityValidationSchemas';
|
import { entitySchemas } from '@/lib/entityValidationSchemas';
|
||||||
import { validateSubmissionHandler } from '@/lib/entityFormValidation';
|
import { validateSubmissionHandler } from '@/lib/entityFormValidation';
|
||||||
import { submissionReducer, canSubmit } from '@/lib/submissionStateMachine';
|
|
||||||
import { getErrorMessage } from '@/lib/errorHandler';
|
import { getErrorMessage } from '@/lib/errorHandler';
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
@@ -131,10 +130,6 @@ const STATUS_DB_TO_DISPLAY: Record<string, string> = {
|
|||||||
|
|
||||||
export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }: ParkFormProps) {
|
export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }: ParkFormProps) {
|
||||||
const { isModerator } = useUserRole();
|
const { isModerator } = useUserRole();
|
||||||
const [submissionState, dispatch] = useReducer(submissionReducer, {
|
|
||||||
status: 'draft' as const,
|
|
||||||
data: initialData || {}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Validate that onSubmit uses submission helpers (dev mode only)
|
// Validate that onSubmit uses submission helpers (dev mode only)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -184,18 +179,7 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
|
|||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
const handleFormSubmit = async (data: ParkFormData) => {
|
const handleFormSubmit = async (data: ParkFormData) => {
|
||||||
if (!canSubmit(submissionState)) {
|
|
||||||
toast({
|
|
||||||
title: 'Cannot submit',
|
|
||||||
description: 'Please wait for the current operation to complete',
|
|
||||||
variant: 'destructive',
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
dispatch({ type: 'VALIDATE', payload: data });
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
dispatch({ type: 'SUBMIT', payload: { submissionId: crypto.randomUUID() } });
|
dispatch({ type: 'SUBMIT', payload: { submissionId: crypto.randomUUID() } });
|
||||||
|
|
||||||
@@ -535,12 +519,11 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
|
|||||||
{/* Form Actions */}
|
{/* Form Actions */}
|
||||||
<div className="flex gap-4 pt-6">
|
<div className="flex gap-4 pt-6">
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting' || !canSubmit(submissionState)}
|
|
||||||
className="flex-1"
|
className="flex-1"
|
||||||
>
|
>
|
||||||
<Save className="w-4 h-4 mr-2" />
|
<Save className="w-4 h-4 mr-2" />
|
||||||
{(submissionState.status === 'validating' || submissionState.status === 'submitting') ? 'Saving...' : (isEditing ? 'Update Park' : 'Create Park')}
|
{isEditing ? 'Update Park' : 'Create Park'}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
{onCancel && (
|
{onCancel && (
|
||||||
|
|||||||
@@ -1,9 +1,8 @@
|
|||||||
import { useState, useReducer } from 'react';
|
import { useState } from 'react';
|
||||||
import { useForm } from 'react-hook-form';
|
import { useForm } from 'react-hook-form';
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
import * as z from 'zod';
|
import * as z from 'zod';
|
||||||
import { entitySchemas } from '@/lib/entityValidationSchemas';
|
import { entitySchemas } from '@/lib/entityValidationSchemas';
|
||||||
import { submissionReducer, canSubmit } from '@/lib/submissionStateMachine';
|
|
||||||
import { getErrorMessage } from '@/lib/errorHandler';
|
import { getErrorMessage } from '@/lib/errorHandler';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
@@ -62,10 +61,6 @@ export function PropertyOwnerForm({ onSubmit, onCancel, initialData }: PropertyO
|
|||||||
const { headquarters } = useCompanyHeadquarters();
|
const { headquarters } = useCompanyHeadquarters();
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [submissionState, dispatch] = useReducer(submissionReducer, {
|
|
||||||
status: 'draft' as const,
|
|
||||||
data: initialData || {}
|
|
||||||
});
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
@@ -104,16 +99,7 @@ export function PropertyOwnerForm({ onSubmit, onCancel, initialData }: PropertyO
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!canSubmit(submissionState)) {
|
try {
|
||||||
toast.error('Cannot submit in current state');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
dispatch({ type: 'VALIDATE', payload: data });
|
|
||||||
|
|
||||||
try {
|
|
||||||
dispatch({ type: 'SUBMIT', payload: { submissionId: crypto.randomUUID() } });
|
|
||||||
|
|
||||||
const formData = {
|
const formData = {
|
||||||
...data,
|
...data,
|
||||||
company_type: 'property_owner' as const,
|
company_type: 'property_owner' as const,
|
||||||
@@ -122,20 +108,12 @@ export function PropertyOwnerForm({ onSubmit, onCancel, initialData }: PropertyO
|
|||||||
|
|
||||||
await onSubmit(formData);
|
await onSubmit(formData);
|
||||||
|
|
||||||
dispatch({ type: 'SUBMISSION_COMPLETE' });
|
|
||||||
|
|
||||||
// Only show success toast and close if not editing through moderation queue
|
// Only show success toast and close if not editing through moderation queue
|
||||||
if (!initialData?.id) {
|
if (!initialData?.id) {
|
||||||
toast.success('Property owner submitted for review');
|
toast.success('Property owner submitted for review');
|
||||||
onCancel();
|
onCancel();
|
||||||
}
|
}
|
||||||
} catch (error: unknown) {
|
} catch (error: unknown) {
|
||||||
const errorMessage = getErrorMessage(error);
|
|
||||||
if (errorMessage.includes('validation')) {
|
|
||||||
dispatch({ type: 'VALIDATION_ERROR', payload: [{ field: 'general', message: errorMessage }] });
|
|
||||||
} else {
|
|
||||||
dispatch({ type: 'RESET' });
|
|
||||||
}
|
|
||||||
handleError(error, {
|
handleError(error, {
|
||||||
action: initialData?.id ? 'Update Property Owner' : 'Create Property Owner',
|
action: initialData?.id ? 'Update Property Owner' : 'Create Property Owner',
|
||||||
metadata: { companyName: data.name }
|
metadata: { companyName: data.name }
|
||||||
@@ -262,18 +240,16 @@ export function PropertyOwnerForm({ onSubmit, onCancel, initialData }: PropertyO
|
|||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
onClick={onCancel}
|
onClick={onCancel}
|
||||||
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting'}
|
|
||||||
>
|
>
|
||||||
<X className="w-4 h-4 mr-2" />
|
<X className="w-4 h-4 mr-2" />
|
||||||
Cancel
|
Cancel
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting' || !canSubmit(submissionState)}
|
|
||||||
>
|
>
|
||||||
<Save className="w-4 h-4 mr-2" />
|
<Save className="w-4 h-4 mr-2" />
|
||||||
{(submissionState.status === 'validating' || submissionState.status === 'submitting') ? 'Submitting...' : 'Save Property Owner'}
|
Save Property Owner
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -1,9 +1,8 @@
|
|||||||
import { useState, useEffect, useReducer } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import { useForm } from 'react-hook-form';
|
import { useForm } from 'react-hook-form';
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
import * as z from 'zod';
|
import * as z from 'zod';
|
||||||
import { validateSubmissionHandler } from '@/lib/entityFormValidation';
|
import { validateSubmissionHandler } from '@/lib/entityFormValidation';
|
||||||
import { submissionReducer, canSubmit } from '@/lib/submissionStateMachine';
|
|
||||||
import { getErrorMessage } from '@/lib/errorHandler';
|
import { getErrorMessage } from '@/lib/errorHandler';
|
||||||
import type { RideTechnicalSpec, RideCoasterStat, RideNameHistory } from '@/types/database';
|
import type { RideTechnicalSpec, RideCoasterStat, RideNameHistory } from '@/types/database';
|
||||||
import type { TempCompanyData, TempRideModelData } from '@/types/company';
|
import type { TempCompanyData, TempRideModelData } from '@/types/company';
|
||||||
@@ -121,10 +120,6 @@ const STATUS_DB_TO_DISPLAY: Record<string, string> = {
|
|||||||
|
|
||||||
export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }: RideFormProps) {
|
export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }: RideFormProps) {
|
||||||
const { isModerator } = useUserRole();
|
const { isModerator } = useUserRole();
|
||||||
const [submissionState, dispatch] = useReducer(submissionReducer, {
|
|
||||||
status: 'draft' as const,
|
|
||||||
data: initialData || {}
|
|
||||||
});
|
|
||||||
const { preferences } = useUnitPreferences();
|
const { preferences } = useUnitPreferences();
|
||||||
const measurementSystem = preferences.measurement_system;
|
const measurementSystem = preferences.measurement_system;
|
||||||
|
|
||||||
@@ -225,20 +220,8 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
|
|||||||
const selectedCategory = watch('category');
|
const selectedCategory = watch('category');
|
||||||
|
|
||||||
|
|
||||||
const handleFormSubmit = async (data: RideFormData) => {
|
const handleFormSubmit = async (data: RideFormData) => {
|
||||||
if (!canSubmit(submissionState)) {
|
|
||||||
toast({
|
|
||||||
title: 'Cannot submit',
|
|
||||||
description: 'Please wait for the current operation to complete',
|
|
||||||
variant: 'destructive',
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
dispatch({ type: 'VALIDATE', payload: data });
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
dispatch({ type: 'SUBMIT', payload: { submissionId: crypto.randomUUID() } });
|
|
||||||
|
|
||||||
// Convert form values back to metric for storage
|
// Convert form values back to metric for storage
|
||||||
const metricData = {
|
const metricData = {
|
||||||
@@ -270,8 +253,6 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
|
|||||||
// Pass clean data to parent with extended fields
|
// Pass clean data to parent with extended fields
|
||||||
await onSubmit(metricData);
|
await onSubmit(metricData);
|
||||||
|
|
||||||
dispatch({ type: 'SUBMISSION_COMPLETE' });
|
|
||||||
|
|
||||||
toast({
|
toast({
|
||||||
title: isEditing ? "Ride Updated" : "Submission Sent",
|
title: isEditing ? "Ride Updated" : "Submission Sent",
|
||||||
description: isEditing
|
description: isEditing
|
||||||
@@ -281,12 +262,6 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
|
|||||||
: "Ride submitted for review"
|
: "Ride submitted for review"
|
||||||
});
|
});
|
||||||
} catch (error: unknown) {
|
} catch (error: unknown) {
|
||||||
const errorMessage = getErrorMessage(error);
|
|
||||||
if (errorMessage.includes('validation') || errorMessage.includes('required')) {
|
|
||||||
dispatch({ type: 'VALIDATION_ERROR', payload: [{ field: 'general', message: errorMessage }] });
|
|
||||||
} else {
|
|
||||||
dispatch({ type: 'RESET' });
|
|
||||||
}
|
|
||||||
handleError(error, {
|
handleError(error, {
|
||||||
action: isEditing ? 'Update Ride' : 'Create Ride',
|
action: isEditing ? 'Update Ride' : 'Create Ride',
|
||||||
metadata: {
|
metadata: {
|
||||||
@@ -806,12 +781,11 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
|
|||||||
{/* Form Actions */}
|
{/* Form Actions */}
|
||||||
<div className="flex gap-4 pt-6">
|
<div className="flex gap-4 pt-6">
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting' || !canSubmit(submissionState)}
|
|
||||||
className="flex-1"
|
className="flex-1"
|
||||||
>
|
>
|
||||||
<Save className="w-4 h-4 mr-2" />
|
<Save className="w-4 h-4 mr-2" />
|
||||||
{(submissionState.status === 'validating' || submissionState.status === 'submitting') ? 'Saving...' : (isEditing ? 'Update Ride' : 'Create Ride')}
|
{isEditing ? 'Update Ride' : 'Create Ride'}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
{onCancel && (
|
{onCancel && (
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
import { useState, useReducer } from 'react';
|
import { useState } from 'react';
|
||||||
import { useForm } from 'react-hook-form';
|
import { useForm } from 'react-hook-form';
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
import * as z from 'zod';
|
import * as z from 'zod';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import type { RideModelTechnicalSpec } from '@/types/database';
|
import type { RideModelTechnicalSpec } from '@/types/database';
|
||||||
import { submissionReducer, canSubmit } from '@/lib/submissionStateMachine';
|
|
||||||
import { getErrorMessage } from '@/lib/errorHandler';
|
import { getErrorMessage } from '@/lib/errorHandler';
|
||||||
|
import { handleError } from '@/lib/errorHandler';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Textarea } from '@/components/ui/textarea';
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
@@ -77,10 +77,6 @@ export function RideModelForm({
|
|||||||
unit?: string;
|
unit?: string;
|
||||||
display_order: number;
|
display_order: number;
|
||||||
}[]>([]);
|
}[]>([]);
|
||||||
const [submissionState, dispatch] = useReducer(submissionReducer, {
|
|
||||||
status: 'draft' as const,
|
|
||||||
data: initialData || {}
|
|
||||||
});
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
@@ -101,30 +97,17 @@ export function RideModelForm({
|
|||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
const handleFormSubmit = (data: RideModelFormData) => {
|
const handleFormSubmit = (data: RideModelFormData) => {
|
||||||
if (!canSubmit(submissionState)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
dispatch({ type: 'VALIDATE', payload: data });
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
dispatch({ type: 'SUBMIT', payload: { submissionId: crypto.randomUUID() } });
|
|
||||||
|
|
||||||
// Include relational technical specs with extended type
|
// Include relational technical specs with extended type
|
||||||
onSubmit({
|
onSubmit({
|
||||||
...data,
|
...data,
|
||||||
_technical_specifications: technicalSpecs
|
_technical_specifications: technicalSpecs
|
||||||
});
|
});
|
||||||
|
|
||||||
dispatch({ type: 'SUBMISSION_COMPLETE' });
|
|
||||||
} catch (error: unknown) {
|
} catch (error: unknown) {
|
||||||
const errorMessage = getErrorMessage(error);
|
handleError(error, {
|
||||||
if (errorMessage.includes('validation')) {
|
action: initialData?.id ? 'Update Ride Model' : 'Create Ride Model'
|
||||||
dispatch({ type: 'VALIDATION_ERROR', payload: [{ field: 'general', message: errorMessage }] });
|
});
|
||||||
} else {
|
|
||||||
dispatch({ type: 'RESET' });
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -248,17 +231,15 @@ export function RideModelForm({
|
|||||||
type="button"
|
type="button"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
onClick={onCancel}
|
onClick={onCancel}
|
||||||
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting'}
|
|
||||||
>
|
>
|
||||||
<X className="w-4 h-4 mr-2" />
|
<X className="w-4 h-4 mr-2" />
|
||||||
Cancel
|
Cancel
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting' || !canSubmit(submissionState)}
|
|
||||||
>
|
>
|
||||||
<Save className="w-4 h-4 mr-2" />
|
<Save className="w-4 h-4 mr-2" />
|
||||||
{(submissionState.status === 'validating' || submissionState.status === 'submitting') ? 'Saving...' : 'Save Model'}
|
Save Model
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -45,11 +45,18 @@ export function useLockMonitor(
|
|||||||
dispatch({ type: 'LOCK_EXPIRED' });
|
dispatch({ type: 'LOCK_EXPIRED' });
|
||||||
|
|
||||||
// Show toast with extension option
|
// Show toast with extension option
|
||||||
toast({
|
toast({
|
||||||
title: 'Lock Expiring Soon',
|
title: 'Lock Expiring Soon',
|
||||||
description: 'Your lock on this submission will expire in less than 2 minutes. Click to extend.',
|
description: 'Your lock on this submission will expire in less than 2 minutes. Click below to extend.',
|
||||||
variant: 'default',
|
duration: Infinity,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Also call extension function automatically after showing toast
|
||||||
|
if (itemId) {
|
||||||
|
setTimeout(() => {
|
||||||
|
handleExtendLock(itemId, dispatch);
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, 30000); // Check every 30 seconds
|
}, 30000); // Check every 30 seconds
|
||||||
|
|
||||||
|
|||||||
@@ -64,7 +64,7 @@ export function submissionReducer(
|
|||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
status: 'validation_error',
|
status: 'validation_error',
|
||||||
data: (state as Extract<SubmissionState, { status: 'validating' }>).data,
|
data: state.data,
|
||||||
errors: action.payload
|
errors: action.payload
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -74,7 +74,7 @@ export function submissionReducer(
|
|||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
status: 'submitting',
|
status: 'submitting',
|
||||||
data: (state as Extract<SubmissionState, { status: 'validating' }>).data,
|
data: state.data,
|
||||||
submissionId: action.payload.submissionId
|
submissionId: action.payload.submissionId
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -84,7 +84,7 @@ export function submissionReducer(
|
|||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
status: 'pending_moderation',
|
status: 'pending_moderation',
|
||||||
submissionId: (state as Extract<SubmissionState, { status: 'submitting' }>).submissionId
|
submissionId: state.submissionId
|
||||||
};
|
};
|
||||||
|
|
||||||
case 'LOCK':
|
case 'LOCK':
|
||||||
@@ -93,7 +93,7 @@ export function submissionReducer(
|
|||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
status: 'locked',
|
status: 'locked',
|
||||||
submissionId: (state as Extract<SubmissionState, { status: 'pending_moderation' }>).submissionId,
|
submissionId: state.submissionId,
|
||||||
lockedBy: action.payload.lockedBy,
|
lockedBy: action.payload.lockedBy,
|
||||||
lockedUntil: action.payload.lockedUntil
|
lockedUntil: action.payload.lockedUntil
|
||||||
};
|
};
|
||||||
@@ -104,7 +104,7 @@ export function submissionReducer(
|
|||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
status: 'reviewing',
|
status: 'reviewing',
|
||||||
submissionId: (state as Extract<SubmissionState, { status: 'locked' }>).submissionId,
|
submissionId: state.submissionId,
|
||||||
reviewerId: action.payload.reviewerId
|
reviewerId: action.payload.reviewerId
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -114,7 +114,7 @@ export function submissionReducer(
|
|||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
status: 'approved',
|
status: 'approved',
|
||||||
submissionId: (state as Extract<SubmissionState, { status: 'reviewing' }>).submissionId,
|
submissionId: state.submissionId,
|
||||||
entityId: action.payload.entityId
|
entityId: action.payload.entityId
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -124,7 +124,7 @@ export function submissionReducer(
|
|||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
status: 'rejected',
|
status: 'rejected',
|
||||||
submissionId: (state as Extract<SubmissionState, { status: 'reviewing' }>).submissionId,
|
submissionId: state.submissionId,
|
||||||
reason: action.payload.reason
|
reason: action.payload.reason
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -132,13 +132,10 @@ export function submissionReducer(
|
|||||||
if (state.status !== 'reviewing' && state.status !== 'locked') {
|
if (state.status !== 'reviewing' && state.status !== 'locked') {
|
||||||
throw new Error(`Illegal transition: ${state.status} → escalated`);
|
throw new Error(`Illegal transition: ${state.status} → escalated`);
|
||||||
}
|
}
|
||||||
const submissionId = state.status === 'reviewing'
|
|
||||||
? (state as Extract<SubmissionState, { status: 'reviewing' }>).submissionId
|
|
||||||
: (state as Extract<SubmissionState, { status: 'locked' }>).submissionId;
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
status: 'escalated',
|
status: 'escalated',
|
||||||
submissionId,
|
submissionId: state.submissionId,
|
||||||
escalatedBy: action.payload.escalatedBy,
|
escalatedBy: action.payload.escalatedBy,
|
||||||
reason: action.payload.reason
|
reason: action.payload.reason
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user