Search code examples
javascriptnext.jsserver-sideclient-side

How to change Server side variables in the client side nextjs

So I have this code in api/scraper.js

const request = require("request-promise");
const cheerio = require("cheerio");

let url = "https://crese.org/distintivo-azul/";

let result;

request(url, (err, response, html) => {
    if (!err && response.statusCode == 200) {
        const $ = cheerio.load(html);

        const allText = $("html *").contents().filter(function () {return this.type === "text"}).text();
        
        const texts = ["respeto a la dignidad de las personas", "respect for the dignity of people"]
        result = allText.includes("respeto a la dignidad de las personas")

    }
})

export default function handler(req, res) {
    res.status(200).json({result: result})
}

It works all, but the let url variable, it need to change. I have a form to handle this change, so the user can put the url in the input form from the client side... how can it be change when the user send the url from the client "input form" and change that let url var iable in server side.

In simple words "Modifying the url varible that is in api/scraper.js" with the form tag that is in the client side.

Any idea to handle this?

EDIT The client side looks like this

    // Automate steps process
const handleSubmit = async (event) => {
    event.preventDefault();
    const response = await fetch("/api/scraper");

    if (!response.ok) {
        throw new Error(`Error: ${response.status}`);
    }

    const result = await response.json();
    console.log(Object.values(result))
    return setData(result)
    //console.log(event.target.url.value);
  };

// get results from backend
const [results, setData] = useState([])


return (
    <div>
        <Head>
            <title>Blue Token | Steps</title>
            <meta name="description" content="Generated by create next app" />
            <link rel="icon" href="/logo.png" />
        </Head>

        <div className={styles.minting}>
            <form onSubmit={handleSubmit}>
                <h1>Enter Your website URL</h1>
                <label>We are going to check if you have the requesits</label><br /><br />  
                <input type="url" name="url" placeholder="url" />
                <input type="submit" />
            </form>
Solution

  • You can do something like this. You will have to pass in url from client inside body of http request

    
function startScrape(req, res) {
  request(req.body, (err, response, html) => {
    if (!err && response.statusCode == 200) {
      const $ = cheerio.load(html);

      const allText = $("html *")
        .contents()
        .filter(function () {
          return this.type === "text";
        })
        .text();

      const texts = [
        "respeto a la dignidad de las personas",
        "respect for the dignity of people"
      ];
      let result = allText.includes("respeto a la dignidad de las personas");

      res.status(200).json({ result: result });
    }
  });
}

export default function handler(req, res) {
if(req.method==='POST')
  startScrape(req, res);
}

    Client

    const [results, setData] = useState([]);
  const [url, setUrl] = useState("");

  const handleSubmit = async (event) => {
    event.preventDefault();
    
    // Here we're passing url inside body of the request which will 
    // be received on the backend

    const response = await fetch("/api/scraper", { method: "POST", body: url });

    if (!response.ok) {
      throw new Error(`Error: ${response.status}`);
    }

    const result = await response.json();
    console.log(Object.values(result));
    return setData(result);
    //console.log(event.target.url.value);
  };

  return (
    <div>
      <div>
        <form onSubmit={handleSubmit}>
          <h1>Enter Your website URL</h1>
          <label>We are going to check if you have the requesits</label>
          <br />
          <br />
          <input
            type="url"
            name="url"
            placeholder="url"
            value={url}
            onChange={(e) => setUrl(e.target.value)}
          />
          <input type="submit" />
        </form>
      </div>
    </div>
  );