feat: Complete User Profile Forms Integration

[DevonGifford]

Comprehensive Form Refactoring and Enhancements

closes #18

Overview

This pull request introduces refinements across multiple form components in the dashboard application. It sequentially combines improvements in UI/UX refinement, synchronization between frontend and backend, alignment of form schemas with Firebase, and functional enhancements in user account and goals settings.

Details

1. UI/UX Refinement

(design: refine UI/UX of user profile forms)

• Removed the AppearanceForm and restructured form components for better clarity.
• Updated the GoalsForm for improved representation and functionality.
• Reorganized userProfileForms in UserFormHandler.tsx for clarity and consistency.

2. Firestore Utility Optimization and Data Synchronization

(backend: optimize firestore utils & synch types between FE/BE)

• Updated fields and form controls in notification-form.tsx and profile-form.tsx for data synchronization.
• Synchronized types between frontend and backend in UserProfile.ts for better data handling.
• Enhanced userCollectionUtils.ts for improved Firestore synchronization and error handling.

3. Firebase Schema Alignment

(chore: align firebase schema with user form schemas and validation)

• Aligned various form components with updated Firebase schemas for consistent validation.
• Ensured alignment in account-form.tsx, goals-form.tsx, notification-form.tsx, profile-form.tsx.

4. Skill List and Goal Settings Refinement

(fix: updated skills list selection in user-account-form) (fix: rectified goal settings functionalities in user-goal-form)

• Improved skills list selection and handling in account-form.tsx and goals-form.tsx for better interaction.
• Streamlined goal settings functionalities for enhanced user experience.

5. Refactor User Form's

Focuses on optimizing form submissions, managing loading states, and improving user experience by enhancing success/error handling and clearer form messages.

1. Goals Form (user-goals-form):

   • Implemented useState hooks for state management.
   • Updated goal_title schema to allow up to 45 characters.
   • Improved date handling using Timestamp for accuracy.
   • Conducted code cleanup for better maintenance.

2. Notification Form (user-notifs-form):

   • Revised notifications preferences handling.
   • Improved loading states and form submission messages.

3. Profile Form (user-profile-form):

   • Enhanced form submission handling for profile updates.
   • Streamlined loading state management.
   • Adjusted form structure for best practices.

4. Account Form (user-account-form):

   • Refined form elements and descriptions for clarity.
   • Enhanced loading state management.
   • Improved error handling and success messages.

---

Goals Achieved

Enhanced Functionality

• Improved state management using useState across forms.
• Updated form schemas and data handling for accuracy and validation.
• Enhanced user feedback with clearer success/error messages.

Code Maintenance

• Conducted code cleanup for better maintenance and readability.
• Removed redundant code blocks for a cleaner codebase.

Summary

This pull request collectively refactors form components, introducing better state management, UI enhancements, and improved user feedback mechanisms across various forms within the dashboard application. The details are presented in chronological order of their arrival.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ztm-ready-portfolio-project	✅ Ready (Inspect)	Visit Preview	Dec 5, 2023 9:22pm

[DevonGifford]

⚠Please note :

Expect the Playwright CI/CD checks to fail until the following ticket has been resolved.

• 14