Example view

[Josh Mandel]

function EhiView({ query }) {
  const [allergyUpdates, setAllergyUpdates] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    async function fetchAllergyUpdates() {
      setLoading(true);
      try {
        const updatesQuery = `
          SELECT 
            PAUH.ALRG_UPDT_DATE,
            PAUH.ALRG_UPDT_TIME,
            PAUH.ALRG_HX_REV_STAT_C_NAME,
            A.ALLERGEN_ID_ALLERGEN_NAME,
            AR.REACTION_C_NAME
          FROM 
            PATIENT_ALG_UPD_HX PAUH
          JOIN 
            PROBLEM_LIST_ALL PLA ON PAUH.PAT_ID = PLA.PAT_ID
          JOIN 
            ALLERGY A ON PLA.PROBLEM_LIST_ID = A.ALLERGY_ID
          JOIN 
            ALLERGY_REACTIONS AR ON A.ALLERGY_ID = AR.ALLERGY_ID
          ORDER BY 
            PAUH.ALRG_UPDT_DATE,
            PAUH.ALRG_UPDT_TIME
        `;
        const rows = await query(updatesQuery);
        if (Array.isArray(rows)) {
          setAllergyUpdates(rows);
        }
      } catch (error) {
        console.error('Failed to fetch allergy updates:', error);
      } finally {
        setLoading(false);
      }
    }

    fetchAllergyUpdates();
  }, [query]);

  if (loading) {
    return <div>Loading allergy updates...</div>;
  }

  if (allergyUpdates.length === 0) {
    return <div>No allergy updates found for this patient.</div>;
  }

  return (
    <div>
      <h2>Allergy Updates Over Time</h2>
      <table>
        <thead>
          <tr>
            <th>Update Date</th>
            <th>Update Time</th>
            <th>Review Status</th>
            <th>Allergen</th>
            <th>Reaction</th>
          </tr>
        </thead>
        <tbody>
          {allergyUpdates.map((update, index) => (
            <tr key={index}>
              <td>{update.ALRG_UPDT_DATE ? update.ALRG_UPDT_DATE.split(' ')[0] : 'N/A'}</td>
              <td>{update.ALRG_UPDT_TIME ? update.ALRG_UPDT_TIME.split(' ')[1] : 'N/A'}</td>
              <td>{update.ALRG_HX_REV_STAT_C_NAME || 'N/A'}</td>
              <td>{update.ALLERGEN_ID_ALLERGEN_NAME || 'N/A'}</td>
              <td>{update.REACTION_C_NAME || 'N/A'}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}