Unable to receive POST data unless I refresh client. why? How can I wait for post data to be received before page loads?

BIBISUFA

New member
My app starts with a simple html form. the inputs are PIN# and Date Of Birth.

My express server runs on the same port 3000, when the user submits their data, puppeteer starts and logs into a specific webpage. Then I scrape the image on that webpage. Google Api takes the text from that image and saves it in an array. I then post that array string to src/results.html. But as soon as the user hits submit, they are redirected to /resuts route right immediately and the page says cannot post the data. but when I see in the console (roughly a minute later) that the post was successful, I refresh the page and I get the array of text I wanted to see.

How can I await for the data to finish being posted to the route before the page loads the data? Im using react for client side. below is my server side code. client side is just a basic react page login and a static /results page meant for the data.

Code:
const puppeteer = require("puppeteer");
const express = require("express");
const app = express();
const morgan = require("morgan");
const fs = require("fs");
const cors = require("cors");
const request = require("request-promise-native").defaults({ Jar: true });
const poll = require("promise-poller").default;

app.use(morgan("combined"));
const port = 3000;
// Imports the Google Cloud client library
const vision = require("@google-cloud/vision");
require("dotenv").config();

app.use(cors());

const textArray = [];

const App = (pinNum, dateOfB) => {
  const config = {
    sitekey: process.env.SITEKEY,
    pageurl: process.env.PAGEURL,
    apiKey: process.env.APIKEY,
    apiSubmitUrl: "http://2captcha.com/in.php",
    apiRetrieveUrl: "http://2captcha.com/res.php",
  };

  const chromeOptions = {
    executablePath: "/Program Files/Google/Chrome/Application/chrome.exe",
    headless: true,
    slowMo: 60,
    defaultViewport: null,
  };