Bug/anson/228

components/records/Header.js

@@ -2,12 +2,12 @@ import React, { useRef, useState } from 'react';
 import toast from 'react-hot-toast';
 import moment from 'moment';
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
-import { CLOUDINARY_URL } from '@/utils/constants';
 import { Button } from '../TextComponents';
 import axiosInstance from '@/pages/api/_axiosInstance';
 import useWithLoading from '@/utils/loading';
 import CustomModal from '../CustomModal';
 import { FileForm } from './FileForm';
+import { getImageUrl } from '@/utils/helpers';
 
 export function Header({ patient, visits, handleVisitChange }) {
   const fileInputRef = useRef(null);
@@ -69,7 +69,7 @@ export function Header({ patient, visits, handleVisitChange }) {
     <div className="grid grid-cols-12 gap-4 mb-2">
       <div className="col-span-12 md:col-span-2">
         <img
-          src={`${CLOUDINARY_URL}/${patient.picture}`}
+          src={getImageUrl(patient)}
           alt="Patient"
           className="h-48 w-48 object-cover rounded-md"
         />

components/registration/PatientInfo.js

@@ -2,7 +2,7 @@ import React from 'react';
 import moment from 'moment';
 
 import { DisplayField, Button } from '@/components/TextComponents/';
-import { CLOUDINARY_URL, OFFLINE, defaultAPI_URL } from '@/utils/constants';
+import { getImageUrl } from '@/utils/helpers';
 
 export function PatientInfo({ patient, submitNewVisit }) {
   if (!patient.pk) {
@@ -25,17 +25,11 @@ export function PatientInfo({ patient, submitNewVisit }) {
     { label: 'Allergies', key: 'drug_allergy' },
   ];
 
-  const imageUrl = OFFLINE
-    ? `${defaultAPI_URL}/${patient.offline_picture}`
-    : `${CLOUDINARY_URL}/${patient.picture}`;
-
-  console.log(OFFLINE);
-
   return (
     <div>
       <div>
         <img
-          src={imageUrl}
+          src={getImageUrl(patient)}
           alt="Placeholder image"
           className="has-ratio h-48 w-48 object-cover"
         />

components/registration/RegistrationAutoSuggest.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import Autosuggest from 'react-autosuggest';
-import { CLOUDINARY_URL, OFFLINE, defaultAPI_URL } from '@/utils/constants';
+import { getImageUrl } from '@/utils/helpers';
 
 export function RegistrationAutoSuggest({ setPatient, patientsList }) {
   const [value, setValue] = useState('');
@@ -11,18 +11,14 @@ export function RegistrationAutoSuggest({ setPatient, patientsList }) {
     const id = `${suggestion.village_prefix} ${suggestion.pk
       .toString()
       .padStart(3, '0')}`;
-    const imageUrl = OFFLINE
-      ? `${defaultAPI_URL}/${suggestion.offline_picture}`
-      : `${CLOUDINARY_URL}/${suggestion.picture}`;
-
     return (
       <div
         className="card cursor-pointer grid grid-cols-2"
         onClick={() => setPatient(suggestion)}
       >
         <div className="self-center">
           <img
-            src={imageUrl}
+            src={getImageUrl(suggestion)}
             alt="Placeholder image"
             className="object-cover h-28 w-28 my-2"
           />

pages/pharmacy/orders/index.js

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import moment from 'moment';
-import { CLOUDINARY_URL } from '@/utils/constants';
 import withAuth from '@/utils/auth';
 import { Button, InputField, PageTitle } from '@/components/TextComponents';
 import axiosInstance from '@/pages/api/_axiosInstance';
 import toast from 'react-hot-toast';
 import useWithLoading from '@/utils/loading';
 import { VILLAGE_COLOR_CLASSES } from '@/utils/constants';
+import { getImageUrl } from '@/utils/helpers';
 
 const Orders = () => {
   const [orders, setOrders] = useState([]);
@@ -97,7 +97,7 @@ const Orders = () => {
           </td>
           <td className="whitespace-nowrap px-3 py-4">
             <img
-              src={`${CLOUDINARY_URL}/${visit.patient.picture}`}
+              src={getImageUrl(visit.patient)}
               alt="Patient"
               className="object-cover h-28 w-28 rounded-lg"
             />

pages/records/index.js

@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import Router from 'next/router';
 import toast from 'react-hot-toast';
-import { CLOUDINARY_URL, OFFLINE, defaultAPI_URL } from '@/utils/constants';
 import withAuth from '@/utils/auth';
 import { Button, InputField } from '@/components/TextComponents';
 import axiosInstance from '@/pages/api/_axiosInstance';
 import { VENUE_OPTIONS } from '@/utils/constants';
 import useWithLoading from '@/utils/loading';
 import { VILLAGE_COLOR_CLASSES } from '@/utils/constants';
+import { getImageUrl } from '@/utils/helpers';
 
 function VillageDropdown({ handleDropdownChangeWithStyle, PATIENT_CODE_ALL }) {
   return (
@@ -122,9 +122,6 @@ function PatientList() {
       .slice(startIndex, endIndex)
       .map(patient => {
         const patientID = patient.patient_id;
-        const imageUrl = OFFLINE
-          ? `${defaultAPI_URL}/${patient.offline_picture}`
-          : `${CLOUDINARY_URL}/${patient.picture}`;
 
         const patientVillagePrefix = patient.village_prefix;
         const fullName = patient.name;
@@ -168,7 +165,7 @@ function PatientList() {
             </td>
             <td>
               <img
-                src={imageUrl}
+                src={getImageUrl(patient)}
                 alt="Placeholder image"
                 className="object-cover h-28 w-28 my-2"
               />

utils/helpers.js

@@ -1,3 +1,5 @@
+import { CLOUDINARY_URL, defaultAPI_URL, OFFLINE } from './constants';
+
 // convert base64 url screenshot to file
 export function urltoFile(url, filename, mimeType) {
   return fetch(url)
@@ -8,3 +10,27 @@ export function urltoFile(url, filename, mimeType) {
       return new File([buf], filename, { type: mimeType });
     });
 }
+
+/**
+ * This function returns the relevant image url based on whether it is offline.
+ *
+ * @param {pictureData} data - must contain either `.offline_picture` or `.picture`
+ * @return {String} the image url
+ *
+ * @typedef {Object} pictureData
+ * @property {String|null} data.offline_picture
+ * @property {String|null} data.picture
+ */
+export function getImageUrl(data) {
+  if (data.offline_picture == null && data.picture == null) {
+    console.error(
+      `Invalid data is passed.
+      Attribute 'offline_picture'/'picture' are both null.
+      Data is:\n`,
+      data
+    );
+  }
+  return OFFLINE && data.offline_picture != null
+    ? `${defaultAPI_URL}/${data.offline_picture}`
+    : `${CLOUDINARY_URL}/${data.picture}`;
+}