IP Address Tracker built with HTML | CSS | REACT - MikDra1

Community feedback

• 

  P

  markus•2,250

  @markuslewinPosted 2 months ago

  Hi!

  Wrapping the inputs in a form is a good approach, because it can be progressively enhanced when you're using a server-side framework (like Next and Remix):

  <form
    className={styles.form}
    onSubmit={(e) => {
      e.preventDefault();
      handleFetch();
    }}
  >
    <input
      type="text"
      value={ipInput}
      onChange={(e) => setIpInput(e.target.value)}
      placeholder="Search for any IP address or domain"
    />
    <button type="submit">
      <img src="./images/icon-arrow.svg" alt="Submit" />
    </button>
  </form>
  

  You could also listen for key presses on the input:

  <input
    type="text"
    value={ipInput}
    onChange={(e) => setIpInput(e.target.value)}
    onKeyDown={(e) => {
      if (e.key === "Enter") {
        handleFetch();
      }
    }}
    placeholder="Search for any IP address or domain"
  />
  

  Marked as helpful

  0

  ---

  

  MikDra1•6,980

  @MikDra1Posted 2 months ago

  @markuslewin

  Thank's for your comment! I really appreciate your help. 😀 I also have one more question. How to make the API work when it is running on HTTP and site is running on HTTPS. Here on live site I get an error which is cause of CORS. I know there is a way with creating a proxy server but I have no idea how to do it.

  0

  

  P

  markus•2,250

  @markuslewinPosted 2 months ago

  @MikDra1 No problem! 🙂

  Yeah, some APIs aren't configured to be requested from the browser, and so you need to first make a request to your own server, which in-turn makes a request to the API.

  Since you're using Netlify, I think the easiest way to set up a "proxy server" would be to use Netlify Functions. You essentially create a file netlify/functions/hello.mts containing a function that calls the API and returns the response of the API. Then, you can call that function with fetch("./netlify/functions/hello").

  I did this for another challenge. The function ended up looking like this:

  export default async (req: Request) => {
    const body = await req.formData();
    const response = await fetch("https://cleanuri.com/api/v1/shorten", {
      method: req.method,
      body,
    });
    const json = await response.json();
    return Response.json(json);
  };
  

  And the caller:

  export async function getShortenedUrl(link) {
    const body = new FormData();
    body.set("url", link);
    const response = await fetch("/.netlify/functions/shorten", {
      method: "post",
      body,
    });
    const json = await response.json();
    return json;
  }
  

  Marked as helpful

  0

  

  MikDra1•6,980

  @MikDra1Posted 2 months ago

  @markuslewin

  Thanks I've implemented some of the code but I still get some errors would you mind looking at those issues one more time, please 😍🤗

  0

  

  P

  markus•2,250

  @markuslewinPosted 2 months ago

  @MikDra1 Cool! What errors are you getting? It looks like the deployed version is working. If you want to test the function locally, you'll have to use Netlify Dev to host the function. Vite is only responsible for hosting the actual app!

  Marked as helpful

  0