After pressing “Proceed” button it is not moving further in mobile phone browsers.

import React, { useEffect, useState } from 'react';
import { db } from '../../firebaseconfig';
import {
collection,
addDoc,
onSnapshot,
doc,
query,
where,
orderBy,
limit,
getDocs
} from 'firebase/firestore';
import soundA from './path_to_sound_A.mp3';
import domtoimage from 'dom-to-image';
import { saveAs } from 'file-saver';
import "./screenP.css";

const ScreenP = () => {
const [mobileNumber, setMobileNumber] = useState('');
const [existingMobileNumber, setExistingMobileNumber] = useState('');
const [name, setName] = useState('');
const [status, setStatus] = useState('');
const [patientId, setPatientId] = useState(null);
const [patientDetails, setPatientDetails] = useState(null);
const [nowServingToken, setNowServingToken] = useState('');
const [isProcessing, setIsProcessing] = useState(false);
const [proceedClicked, setProceedClicked] = useState(false);

useEffect(() => {
if (patientId) {
const unsubscribe = onSnapshot(doc(db, 'patients', patientId), (doc) => {
const patientData = doc.data();
setPatientDetails(patientData);

    if (patientData.status !== status) {
      setStatus(patientData.status);
      vibrateAndPlaySound();
    }

    if (patientData.doctorAssigned && ['C', 'D', 'E', 'F'].includes(patientData.status)) {
      const servingTokenQuery = query(collection(db, 'patients'), where('status', '==', 'D'), where('doctorAssigned', '==', patientData.doctorAssigned));
      const unsubscribeServingToken = onSnapshot(servingTokenQuery, (snapshot) => {
        const serving = snapshot.docs.map(doc => doc.data()).find(p => p.doctorAssigned === patientData.doctorAssigned);
        if (serving) {
          setNowServingToken(serving.tokenNumber);
        } else {
          setNowServingToken('');
        }
      });

      return () => unsubscribeServingToken();
    }
  });

  return () => unsubscribe();
}

}, [patientId, status]);

const vibrateAndPlaySound = () => {
if ('vibrate' in navigator) {
navigator.vibrate(500);
}
const audio = new Audio(soundA);
audio.play().catch((error) => console.error('Audio playback failed:', error));
};

const fetchLatestToken = async () => {
const today = new Date();
today.setHours(0, 0, 0, 0);
const patientsQuery = query(
collection(db, 'patients'),
where('mobileNumber', '==', existingMobileNumber),
where('requestTime', '>=', today),
orderBy('requestTime', 'desc'),
limit(1)
);

const querySnapshot = await getDocs(patientsQuery);
const latestPatient = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }))[0];

if (latestPatient) {
  setPatientDetails(latestPatient);
  setPatientId(latestPatient.id);
  setStatus(latestPatient.status);
  setName(latestPatient.name);
  setMobileNumber(latestPatient.mobileNumber);
} else {
  alert('No token found for the given mobile number today.');
}

};

const displayMessage = () => {
if (!patientDetails) return null;

let messageClass = 'message ' + 'status-' + patientDetails.status;
switch (patientDetails.status) {
  case 'A':
    return <div className={messageClass}>Kindly wait. <br/>We are processing your request</div>;
  case 'B':
    return <div className={messageClass}>Kindly go to the Reception to make the payment.</div>;
  case 'C':
    return (
      <div className={messageClass}>
        <span className="token-number">Your Token Number: {patientDetails.tokenNumber}</span><br />
        Doctor Assigned: {patientDetails.doctorAssigned}<br />
        Doctor's Room: {patientDetails.doctorRoom}<br />
        <div>Wait for your Token Number</div>
        <button onClick={takeScreenshot}>Take Screenshot</button>
        <div className='nowServingToken'>Now Serving Token: {nowServingToken}</div>
      </div>
    );
    case 'D':
      return (
          <div className={messageClass}>
             <span className="token-number">Your Token Number: {patientDetails.tokenNumber}</span><br />
              <p>The doctor has called you.</p>
              <p>Please go to the Doctor's room now</p>

              <p>

                  Doctor Assigned: {patientDetails.doctorAssigned}<br />
                  Doctor's Room: {patientDetails.doctorRoom}
              </p>

              <div className='nowServingToken'>
                  Now Serving Token: {nowServingToken}
              </div>
          </div>
      );

  case 'E':
    return <div className={messageClass}>
      <span className="token-number">Your Token Number: {patientDetails.tokenNumber}</span><br />

      Consultation Completed. Thank you for visiting us!</div>;
  case 'F':
    return <div className={messageClass}>You didn't show up for the consultation. Please contact the Reception.</div>;
  default:
    return <div className={messageClass}>Status not recognized.</div>;
}

};

return (

{patientId ? (

Please find the details below

Your Name: {name}

Your Mobile Number: {mobileNumber}

{displayMessage()}

) : (

className="input-field"
type="text"
value={mobileNumber}
onChange={(e) => setMobileNumber(e.target.value)}
placeholder="Mobile Number without country code"
required
/>
className="input-field"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Name of the patient"
required
/>
{!proceedClicked && (
className="proceed-button"
type="submit"
disabled={isProcessing} // Disable the button if processing
>
{isProcessing ? 'Processing' : 'Proceed'}

)}

{proceedClicked && isProcessing && Processing...}

Already have a token?
Enter your mobile number to check the latest status.

className="ALRDYinput-field"
type="text"
value={existingMobileNumber}
onChange={(e) => setExistingMobileNumber(e.target.value)}
placeholder="Enter your Mobile Number without country code"
/>
Check Status

)}

);
};

export default ScreenP;

DEV Community

After pressing “Proceed” button it is not moving further in mobile phone browsers.

Please find the details below

Top comments (0)