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

components/AddEditHabitModal.tsx

@@ -52,7 +52,6 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
   const [ruleText, setRuleText] = useState<string>(initialRuleText)
   const { currentUser } = useHelpers()
   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 [usersData] = useAtom(usersAtom)
   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 (
     <Dialog open={true} onOpenChange={onClose}>
       <DialogContent>
@@ -203,24 +204,9 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
               </div>
               {/* rrule input (habit) */}
               <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'}>
-                        {displayText}
+                  {errorMessage ? errorMessage : convertMachineReadableFrequencyToHumanReadable({ frequency: result, isRecurRule, timezone: settings.system.timezone })}
                 </span>
-                      {errorMessage && (
-                        <p className="text-destructive text-xs mt-1">{errorMessage}</p>
-                      )}
-                    </>
-                  );
-                })()}
               </div>
             </div>
             <div className="grid grid-cols-4 items-center gap-4">
@@ -338,7 +324,7 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
             )}
           </div>
           <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>
         </form>
       </DialogContent>

lib/client-helpers.ts

@@ -1,8 +1,9 @@
 // client helpers
 'use-client'
 
-import { useAtom } from 'jotai'
 import { useSession } from "next-auth/react"
+import { User, UserId } from './types'
+import { useAtom } from 'jotai'
 import { usersAtom } from './atoms'
 import { checkPermission } from './utils'
 
@@ -13,7 +14,7 @@ export function useHelpers() {
   const currentUser = usersData.users.find((u) => u.id === currentUserId)
   // detect iOS: https://stackoverflow.com/a/9039885
   function iOS() {
-    return typeof navigator !== "undefined" && ([
+    return [
       'iPad Simulator',
       'iPhone Simulator',
       'iPod Simulator',
@@ -22,7 +23,7 @@ export function useHelpers() {
       'iPod',
     ].includes(navigator.platform)
     // iPad on iOS 13 detection
-    || (navigator.userAgent.includes("Mac") && "ontouchend" in document))
+    || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
   }  
 
   return {