Python + React: Live Debugging

A few months ago I was presented with a surprise live debugging session in an interview that covered Python and React items. Both challenges were recorded and expected that I would handle with out any assistance.

I did both, then they never responded after asking me if I had responded to their scheduled follow-up which they didn't send. They were working through two layers of recruiters and that resulted in continuous miscommunication, repetitive tasks I kept doing for them, and chaos.

Python

Python link - https://python-fiddle.com/saved/9cb2d6f4-39e6-4055-920e-cad7cdb57784?checkpoint=1762966442

"""
BASIC LEVEL DEBUGGING EXERCISE

This code has several syntax errors preventing it from running.
Your task:
1. Fix all syntax errors so the code runs without errors
2. Test the code to ensure all methods work correctly
3. Add basic input validation where appropriate

Expected time: 5 minutes
"""

class AppointmentManager:
    def __init__(self):
        self.appointments = [
            {"id": 1, "patient": "Alice Brown", "doctor": "Dr. Smith", "date": "2024-01-15", "duration": 30},
            {"id": 2, "patient": "Bob Wilson", "doctor": "Dr. Jones", "date": "2024-01-16", "duration": 45}
        ]

    def get_appointment(self, appointment_id):
        for appointment in self.appointments:
            if appointment["id"] == appointment_id:
                return appointment
        return None

    def add_appointment(self, appointment):
        for appt in self.appointments:
            if appt["id"] == appointment["id"]:
                raise ValueError("Appointment ID already exists")

        self.appointments.append(appointment)
        return appointment

    def get_by_doctor(self, doctor_name) -> list:
        results = []
        for appointment in self.appointments:
            if appointment["doctor"] == doctor_name:
                results.append(appointment)
        return results

    def update_duration(self, appointment_id: int, duration: int) -> dict:
        for appointment in self.appointments:
            if appointment["id"] == appointment_id:
                appointment["duration"] = duration
                return appointment

        raise ValueError("Appointment not found")

    def total_time(self):
        total = 0
        for appointment in self.appointments:
            total += appointment["duration"]

        return {"total_minutes": total, "total_hours": total / 60}


if __name__ == "__main__":
    manager = AppointmentManager()

    appt = manager.get_appointment(1)
    print(manager.get_appointment(1))
    print(manager.get_by_doctor("Dr. Smith"))
    print(manager.total_time())
    print(manager.add_appointment({"id": 3, "patient": "Bob Wilson", "doctor": "Dr. Jones", "date": "2024-01-16", "duration": 45}))
    updated_appt = manager.update_duration(2, 120)
    print(updated_appt)

Here there is an expectation to be able to get and set values in the AppointmentManager the question is really that ids are how appointments get managed so create a new one and or find an existing one by id and then modify. Also add type hints everywhere and make the parameters for methods consistent and correct.

React

React link - https://codepen.io/timdavila/pen/raxZJGg?editors=0010

import React, { useState } from 'react';

const UserForm = () => {
  const [formData, setFormData] = useState();
  const [name, setName] = useState(null);
  
  const handleNameChange = (e) => {
    const currentAge = formData["age"];
    setFormData({ name: e.target.value, age: currentAge });
    setName(e.target.value);
  };

  const handleAgeChange = (e) => {
    const currentName = formData["name"];
    setFormData({ age: e.target.value, name: currentName });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    
    const result = Object.assign({}, { age: null, name: null}, ...formData);
    console.log('Submitted:', result);
    //console.log('Submitted:', formData);
  };

  return (
    <form>
      <div>
        <label>Name:</label>
        <input type="text" value={name} onChange={handleNameChange} />
      </div>
      <div>
        <label>Age:</label>
        <input type="text" value={age} onChange={handleAgeChange} />
      </div>
      <button type="submit">Submit onClick={handleSubmit}</button>
    </form>
  );
};

export default UserForm;

In this case there are a couple of things that are expected to be fixed. There is no age context hook so it is simply left out to nowhere. The formData value is overwriting any changes, therefor you should set the complete object data on changes. The handleSubmit was unattached to the form button and needed to set it to capture the input and submit on behalf the correct data.

Overall both questions you are expected to answer in about 1 minute or less and then explain the concepts and changes in the remaining 4 minutes as thoroughly as you can. I did both, but this company had a chaotic process for identification and vetting of candidates. It took months to get them to this interview part and I had to already pass 3 online assessments to even get to this point and it was all for nothing. Immensely frustrating, but consistent with everyone's current interviewing experience in my opinion.