Strategy Design Pattern - SENG-350-2024-fall/Team-1 GitHub Wiki

Source: app/frontend/src/components/dashboard/patient-virtual-triage.jsx, Lines 56-92.

The handleChange function acts as the strategy for handling any changes in selected symptoms, which updates selectedSymptoms based on the user input.

const handleChange = (event) => {
    const {
      target: { value },
    } = event;
    setSelectedSymptoms(
      typeof value === "string" ? value.split(",") : value
    );
  };

The Select component along with children components MenuItem and Checkbox render the options for selecting patient symptoms, which dynamically applies the strategy we defined in handleChange and updates the state based on the user's input.

<Select ... >
            {symptoms.map((symptom) => (
              <MenuItem key={symptom} value={symptom}>
                <Checkbox checked={selectedSymptoms.includes(symptom)} />
                <ListItemText primary={symptom} />
              </MenuItem>
            ))}
          </Select>

The Strategy Pattern is well-suited here because it allows flexible, interchangeable handling of user input. This approach helps maintain clean, modular code by keeping the state update logic (via handleChange) separate from the rendering logic, making it easier to add new selection options or change the way symptoms are managed without altering the core component structure. This addition of the Strategy Pattern demonstrates how the code uses modular design to handle dynamic behaviors efficiently.