GSoC 2023 with OpenMRS | Coding Week 01

The coding phase has commenced and one week is already over. In this blog post, I will share the progress I made during the first week of the coding period.

I Finalized the targeted forms and got started on refactoring
I’ll specifically highlight the work done on the “Conditions Form” here

Step 1: Setting up the Project

To begin, I cloned the OpenMRS repository , navigated to the relevant section where the Conditions Form is located and created a new branch for my work. Once I had the project set up locally, I installed the required dependencies.

Step 2: Analyzing the Existing Form

Before diving into the migration process, I thoroughly studied the existing Conditions Form code. I familiarized myself with the form structure, validation requirements, and the data flow within the component.

Step 3: Installing RHF and Zod

The next step was to install React Hook Form and Zod packages. I added them as dependencies to the project by running the following commands:

npm install react-hook-form zod

These packages will enable us to leverage the capabilities of RHF for form handling and Zod for form validation.

Step 3: Refactoring the Form

With the project set up and the required packages installed, I started refactoring the Conditions Form. Here’s a breakdown of the steps I followed:

1. Importing Dependencies

In the form component file, I imported the necessary dependencies for RHF and Zod:

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

2. Defining Form Schema

I defined a Zod schema to validate the form inputs. The schema specifies the required fields, data types, and any custom validation rules. Here’s a simplified example

const conditionFormSchema = z.object({
  category: z.string(),
  condition: z.string(),
  onsetDate: z.string(),
  certainty: z.string(),
  notes: z.string().optional(),
});

3. Hooking into RHF

Next, I utilized the useForm hook from RHF to initialize the form and access its methods and state:

const { register, handleSubmit, formState: { errors } } = useForm({
  resolver: zodResolver(conditionSchema),
});

The resolver option allows us to integrate Zod validation with RHF seamlessly.

4. Rendering the Form

I replaced the existing form inputs with RHF’s register method, which automatically registers the inputs and handles their value changes

Pausing to Learn More Resources

While working on the Conditions Form migration, I encountered a few challenges that required additional knowledge. During this week, I paused my work briefly to explore additional resources and gain a deeper understanding of specific concepts. I delved into RHF and Zod documentation.

After a successful migration of the “Conditions Form” to RHF with Zod, I will then proceed to tackle other forms within OpenMRS, following the same migration process. This will involve adapting the form

Stay tuned for the next blog post
Cheers!