ManInDark/HabitTrove
1
0
Fork 0
mirror of https://github.com/ManInDark/HabitTrove.git synced 2026-01-21 06:34:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: refactored error display in add habit modal & disables button if invalid

Browse Source
This commit is contained in:
ManInDark
2025-05-12 18:00:04 +02:00
parent 95197e216c
commit e4a52657af
1 changed files with 6 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/AddEditHabitModal.tsx
View File

@@ -52,7 +52,6 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
const [ruleText, setRuleText] = useState<string>(initialRuleText) const [ruleText, setRuleText] = useState<string>(initialRuleText)
const { currentUser } = useHelpers() const { currentUser } = useHelpers()
const [isQuickDatesOpen, setIsQuickDatesOpen] = useState(false) const [isQuickDatesOpen, setIsQuickDatesOpen] = useState(false)
const [ruleError, setRuleError] = useState<string | null>(null); // State for validation message
const [selectedUserIds, setSelectedUserIds] = useState<string[]>((habit?.userIds || []).filter(id => id !== currentUser?.id)) const [selectedUserIds, setSelectedUserIds] = useState<string[]>((habit?.userIds || []).filter(id => id !== currentUser?.id))
const [usersData] = useAtom(usersAtom) const [usersData] = useAtom(usersAtom)
const users = usersData.users const users = usersData.users
@@ -94,6 +93,8 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
}) })
} }
const { result, message: errorMessage } = convertHumanReadableFrequencyToMachineReadable({ text: ruleText, timezone: settings.system.timezone, isRecurring: isRecurRule });
return ( return (
<Dialog open={true} onOpenChange={onClose}> <Dialog open={true} onOpenChange={onClose}>
<DialogContent> <DialogContent>
@@ -203,24 +204,9 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
</div> </div>
{/* rrule input (habit) */} {/* rrule input (habit) */}
<div className="col-start-2 col-span-3 text-sm"> <div className="col-start-2 col-span-3 text-sm">
{(() => {
let displayText = '';
let errorMessage: string | null = null;
const { result, message } = convertHumanReadableFrequencyToMachineReadable({ text: ruleText, timezone: settings.system.timezone, isRecurring: isRecurRule });
errorMessage = message;
displayText = convertMachineReadableFrequencyToHumanReadable({ frequency: result, isRecurRule, timezone: settings.system.timezone })
return (
<>
<span className={errorMessage ? 'text-destructive' : 'text-muted-foreground'}> <span className={errorMessage ? 'text-destructive' : 'text-muted-foreground'}>
{displayText} {errorMessage ? errorMessage : convertMachineReadableFrequencyToHumanReadable({ frequency: result, isRecurRule, timezone: settings.system.timezone })}
</span> </span>
{errorMessage && (
<p className="text-destructive text-xs mt-1">{errorMessage}</p>
)}
</>
);
})()}
</div> </div>
</div> </div>
<div className="grid grid-cols-4 items-center gap-4"> <div className="grid grid-cols-4 items-center gap-4">
@@ -338,7 +324,7 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
)} )}
</div> </div>
<DialogFooter> <DialogFooter>
<Button type="submit">{habit ? 'Save Changes' : `Add ${isTask ? 'Task' : 'Habit'}`}</Button> <Button type="submit" disabled={errorMessage !== null}>{habit ? 'Save Changes' : `Add ${isTask ? 'Task' : 'Habit'}`}</Button>
</DialogFooter> </DialogFooter>
</form> </form>
</DialogContent> </DialogContent>