DEV Community: Ijeoma

FOLLOWERS SPIKE IN 7 HOURS ON DEVTO

Ijeoma — Thu, 04 Jul 2024 07:22:20 +0000

I have been on devto for a year and few months, my followers are barely up to 10, I've also written just one post. At midnight, I made a post about a cors issue I was facing and how it was resolved, nothing spectacular or serious.

I woke up this morning to make some edits to the post, I realized I gained over a 100 followers. I was excited and checked if my post got some traffic but nothing serious, less than 25 readers.

Don't get me wrong, I am happy with the followers but I'm just curious to know what happened. My followers are still rising. I checked last year's post stats and nothing much is going on too, just a surge in new followers.

Is it a spam stuff? I do not have a very active following on any social media platform also . Or did someone influential repost a link to my post? haha. Please if you read this and have any idea why, kindly leave a comment

SOLVING CORS ERROR

Ijeoma — Wed, 03 Jul 2024 23:25:36 +0000

INTRODUCTION
As a Mass Communication graduate turned software developer, my coding journey has been filled with both challenges and rewards. This article will highlight the challenge I faced solving a server-side problem related to CORS (Cross-Origin Resource Sharing). I will briefly give the step-by-step approach I took to resolve this issue and ensure my application was running smoothly.

THE PROBLEM
The issue I encountered was a CORS error when trying to sign up users through my application. I used React TypeScript for my project. The client side of my application was hosted on Netlify, while the server side was hosted on Render. Despite configuring CORS on the server side of my application, I kept receiving errors. Here is a breakdown of how I resolved this issue.

Step 1: Identifying the CORS Error. When users attempted to sign up, the browser's console showed that the server was not properly handling CORS requests. It showed this error:

 Access to XMLHttpRequest at '' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Step 2: Configuring CORS on the Server.
I had to make sure the server was correctly configured to handle CORS requests. I configured the server to allow requests from my client’s URL on Netlify.
Step 3: Rebuilding and Redeploying the Server.
After making changes to the server configuration, it was important to recompile the TypeScript files into JavaScript and redeploy the server.
tsc
Step 4: Ensuring Proper Endpoints on the Client Side.
On the client side, I updated the API endpoint to point to the correct URL. This was where the error was, I forgot to add "/api/" to my baseUrl.
Step 5: Verifying and Testing
After deploying the changes, I tested the application to ensure that the CORS errors were resolved and that the signup and login worked as expected. This involved:
Testing the signup and login from the client application.
Ensuring that the server received and processed the requests correctly.
Checking the browser console and server logs for any other errors.

Conclusion
Solving the CORS and deployment issue was a significant learning experience. The error I encountered may not look like much, but it took me hours to figure it out, lol. This points out the importance of proper server configuration and thorough testing.
If you encounter similar issue, remember to:

Check and configure your server for CORS.
Ensure your client-side API calls the correct endpoints.
Test your application after making changes.

HNG INTERNSHIP AND ME
I recently embarked on the HNG Internship, a very competitive program designed to bring out the best in software developers.
The internship offers an amazing opportunity to collaborate with experienced mentors and meet other smart interns.
Do check out the HNG Internship program, it is an incredible platform to start your career in tech! Use any of the links below:
(https://hng.tech/premium)
(https://hng.tech/internship)

A Simple React Counter with Input Value using React Hooks => UseState and UseReducer.

Ijeoma — Sun, 15 Jan 2023 01:47:15 +0000

Hello techie, In this post, you will learn two different ways to create a Counter App with input value using two React Hooks: useState and useReducer!

Counter 1: UseState Hook:
First thing to do is import React and UseState.

import React, {useState} from "react";

Set the State: After importing, declare a useState then set the default count to "0"

  const [count, setCount] = useState(0);

Declare the Functions and set the Buttons: Increment, Decrement, Reset

The increment button adds 1 to the input value
The decrement button subtracts 1 from the input value
The Reset button sets the value back to the initial state '0'

You also update the state of the count which was earlier set to '0' with setCount.

const increment = (event) => {
    event.preventDefault();
    setCount((prevCount) => prevCount + 1);
  };

 const decrement = (event) => {
    event.preventDefault();
    setCount((prevCount) => prevCount - 1);
  };

const reset = (event) => {
    event.preventDefault();
    setCount(0);
  };

Input value function: This changes the count value as you type in a value.
ParseInt returns an integer value to enable the increment

const changeValue = (value) => {
    setCount(parseInt(value));
  };

useState Code Block

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  const increment = (event) => {
    event.preventDefault();
    setCount((prevCount) => prevCount + 1);
  };

  const decrement = (event) => {
    event.preventDefault();
    setCount((prevCount) => prevCount - 1);
  };

  const reset = (event) => {
    event.preventDefault();
    setCount(0);
  };
  const changeValue = (value) => {
    setCount(parseInt(value));
  };

  return (
    <div>
      <div className="counter-container">
        <h1>Count: {count}</h1>
        <input type="number" placeholder="set value" />
        <button
          onClick={(event) => {
            if (event.key === "Enter") {
              changeValue(event.target.value);
            }
          }}
        >
          Enter
        </button>
        <div className="counter">
          <button onClick={increment} className="increment">
            Increment
          </button>
          <button onClick={decrement} className="decrement">
            Decrement
          </button>
        </div>
        <button onClick={reset} className="reset">
          Reset
        </button>
      </div>
  );
}
export default Counter;

Counter 2: Using useReducer

Import ** React and useReducer** from react.

import React from "react";
import { useReducer } from "react";

Declare a default state variable and a useReducer function
using a switch case, set the increment, decrement, setvalue and update count state

const reducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    case "reset":
      return { count: (state.count = 0) };
    case "setvalue":
      return { ...state, input: action.payload };
    case "updatecount":
      return { count: action.payload };
    default:
      return { count: state.count };
  }
};

The dispatch sends an action to the reducer to update the state.

updateTheCount function is used to update the count as you type in or change the input value.

changeCountValue function is an event that changes the value on click

function UseReducer() {
const [state, dispatch] = useReducer(reducer, initialCount);
  const updateTheCount = () => {
    dispatch({ type: "updatecount", payload: state.input - `${state.count}` });
  };
  const changeCountValue = (e) => {
    dispatch({ type: "setvalue", payload: e.target.value });
  };

useReducer Code Block

import React from "react";
import { useReducer } from "react";

const initialCount = { count: 0, input: "" };
const reducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    case "reset":
      return { count: (state.count = 0) };
    case "setvalue":
      return { ...state, input: action.payload };
    case "updatecount":
      return { count: action.payload };
    default:
      return { count: state.count };
  }
};

function UseReducer() {
const [state, dispatch] = useReducer(reducer, initialCount);
  const updateTheCount = () => {
    dispatch({ type: "updatecount", payload: state.input - `${state.count}` });
  };
  const changeCountValue = (e) => {
    dispatch({ type: "setvalue", payload: e.target.value });
  };
  return (
    <div>
      <h2 className="counter">Count: {state.count}</h2>
      <input
        type="number"
        value={state.input}
        onChange={changeCountValue}
        placeholder="set value"
      />
      <button onClick={updateTheCount}>Enter</button>
      <div className="counter">
        <button className="inc" onClick={() => dispatch({ type: "increment" })}>
          Increment
        </button>
        <button className="dec" onClick={() => dispatch({ type: "decrement" })}>
          Decrement
        </button>
      </div>
      <button className="reset" onClick={() => dispatch({ type: "reset" })}>
        Reset
      </button>
  );
}
export default UseReducer;

And that's a wrap! I hope you found this tutorial useful.
You can check the full implementation on my github link here:

DEV Community: Ijeoma

FOLLOWERS SPIKE IN 7 HOURS ON DEVTO

SOLVING CORS ERROR

A Simple React Counter with Input Value using React Hooks => UseState and UseReducer.

ijayyyy / count

Created with CodeSandbox

count