From a8fa81ef5c89cb8889bc0b21a5c94b650d26410c Mon Sep 17 00:00:00 2001
From: Majd Al Mnayer <majd.mounayer@gmail.com>
Date: Tue, 15 Oct 2024 10:24:46 -0400
Subject: [PATCH] feat: displayed QR error in same QR img modal

---
 .../routes/App/FileTransfer/FileTransfer.js   | 50 ++++++++-----------
 1 file changed, 22 insertions(+), 28 deletions(-)

diff --git a/client/src/routes/App/FileTransfer/FileTransfer.js b/client/src/routes/App/FileTransfer/FileTransfer.js
index e9a1a3a..53e73f3 100644
--- a/client/src/routes/App/FileTransfer/FileTransfer.js
+++ b/client/src/routes/App/FileTransfer/FileTransfer.js
@@ -447,16 +447,6 @@ class FileTransfer extends PureComponent {
             </button>
           </>
         );
-      case constants.QR_CODE_LOAD_FAILED:
-        return (
-          <>
-            <h2>Connection Error!</h2>
-            <p class="message">Unable to load QR code, try refreshing this page</p>
-            <button class="btn wide" onClick={() => window.location.reload()}>
-              Refresh page
-            </button>
-          </>
-        );
       case constants.ERR_CONN_CLOSED:
       default:
         return (
@@ -598,24 +588,28 @@ class FileTransfer extends PureComponent {
         <Modal isOpen={showQRCodeModal} onClose={() => this.toggleQRCodeModal(false)}>
           <div class="qrcode-modal">
             <h2>Room QR code</h2>
-            <p>Scan this QR code to join "{this.client.room}" file sharing room.</p>
-
-            <img
-              src={`${urls.SERVER_HOST}/rooms/qrcode?room=${this.props.room}`}
-              loading="lazy"
-              alt={`QR code to join "${this.client.room}" room`}
-              onError={() => {
-                this.setState({
-                  errorModal: {
-                    isOpen: true,
-                    type: constants.QR_CODE_LOAD_FAILED
-                  },
-                });
-
-                this.toggleQRCodeModal(false);
-              }}
-            />
-
+            {
+              this.state.errorModal.type === constants.QR_CODE_LOAD_FAILED ? (
+                <p>Could not load QR code</p>
+              ) : (
+                <>
+                  <p>Scan this QR code to join "{this.client.room}" file sharing room.</p>
+                  <img
+                    src={`${urls.SERVER_HOST}/rooms/qrcode?room=${this.props.room}`}
+                    loading="lazy"
+                    alt={`QR code to join "${this.client.room}" room`}
+                    onError={() => {
+                      this.setState({
+                        errorModal: {
+                          isOpen: true,
+                          type: constants.QR_CODE_LOAD_FAILED
+                        },
+                      });
+                    }}
+                  />
+                </>
+              )
+            }
             <button class="btn outlined wide" onClick={() => this.toggleQRCodeModal(false)}>
               Close popup
             </button>