DEV Community: Bishal Shrestha

@Controller vs. @RestController

Bishal Shrestha — Wed, 15 May 2024 18:17:18 +0000

In the realm of Spring framework development, distinguishing between traditional Spring MVC controllers and RESTful web service controllers is pivotal, particularly in their approach to handling HTTP response bodies.

Traditional Spring MVC Controller:

In the conventional Spring MVC paradigm, controllers rely on view technology, necessitating a distinct approach to managing HTTP response bodies compared to the more modern RESTful web service controllers.

RESTful Web Service Controller:

Conversely, RESTful web service controllers are designed to return objects directly, with their data serialized into the HTTP response, typically formatted as JSON or XML. The introduction of the @RestController annotation in Spring 4.0 streamlined the creation of RESTful web services by combining the functionalities of @Controller and @ResponseBody annotations.

Understanding Annotations:

`@ResponseBody`

To grasp the distinction between @Controller and @RestController, it's crucial to comprehend the role of the @ResponseBody annotation. This annotation signifies that the return value of a method should be bound to the web response body, facilitating automatic serialization of the returned object into the HTTP response.

`@Controller`

The @Controller annotation, a specialization of the @Component annotation, enables automatic detection of implementations through classpath scanning. When employing @Controller, it's imperative to include @ResponseBody in each @RequestMapping method to serialize the return value properly.

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("/v1/api")
public class GreetingController {

    @GetMapping("/greet")
    @ResponseBody
    public String greet() {
        return "Hello, World!";
    }
}

`@RestController`

Introduced to simplify the development of RESTful web services, the @RestController annotation serves as a specialized form of @Controller. It eliminates the need for manually adding @ResponseBody to each @RequestMapping method, as it inherently combines the functionalities of both @Controller and @ResponseBody.

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/v1/api")
public class GreetingRestController {

    @GetMapping("/greet")
    public String greet() {
        return "Hello, World!";
    }
}

Key Takeaways:

While both @Controller and @RestController can be used together, they cater to different needs – @Controller for rendering views and @RestController for returning domain objects as JSON or XML.

Original post appeared here.

How to sort this list of strings along with the strings and output the result as expected?

Bishal Shrestha — Fri, 29 Mar 2024 04:35:27 +0000

Mar 28 '24 Comments: 15 Answers: 1

When the input is:

["xL01(F]J","2pn5Mm","-5)8gF{","KWq0P]*%Q","n@,:\u003eAm@","\u003cRN_qCa7","8Qx\u0026RAON","gT~s!1s?4i{K","w\"r^d_#l$Mmp"]

Expected output should be:

["(01FJL]x","25Mmnp",")-58Fg{","%*0KPQW]q",",:\u003e@@Amn","7\u003cCNR_aq","\u00268ANOQRx","!14?KTgiss{~","\"#$M^_dlmprw"]

There are specific Unicode characters (\u003e, \u003c, \u0026) that were being sorted and replaced in a specific way. How to create a solution that could handle these Unicode characters dynamically without explicitly checking for each one individually. By identifying the…

Open Full Question

HTTP GET & POST Request in NextJS Stable App Router

Bishal Shrestha — Wed, 02 Aug 2023 08:53:09 +0000

When the app router was released in NextJS 13.2 , being a frontend developer, I was stuck with building API's for my project. But NextJS solved it finally by letting us create API endpoints for our application. Personally, I think building something with this in large scale is still a no-time-soon for now, but for small projects & frontend developers, this was a dream come true.

In this tutorial, I am not going to cover detail topics on how to use route handlers and all. I hope you know the basics. One thing I was stuck with was handling form data for POST request. So, I am going to explain that in a second. But let's start with the installation and other stuffs.

Prerequisite

Latest version of NodeJS must be installed.
Basic knowledge of HTTP requests will be added benefit.
Understanding of useState() hook in react.

Installation

After installing NodeJS, open a terminal and navigate to a directory of your choice using cd path/to/project/directory.
Then start a next app using npx create-next-app@latest usingapidirectory, you can name your project name anything you want, I have named it usingapidirectory.
Get inside the project directory using cd usingapidirectory
Then, let's get the app running by using npm run dev in your project directory in the terminal.
Open http://localhost:3000/ in your browser and see the result.

Code Editing

Open your project in the code editor.
Inside the app directory, open the page.js file and replace everything with:

"use client"
import { useState,useEffect } from "react"

export default function Home() {
  return (
    // Your code goes here
  )
}

Also, for clarity, delete everything from globals.css and replace it with:

@tailwind base;
@tailwind components;
@tailwind utilities;

Defining our state and form layout

We will be building a simple form that accepts to fields: name and age. So let's define a state for that.
Inside the app/page.js:

"use client"
import { useState, useEffect } from "react"

export default function Home() {
  const [name, setName] = useState('')
  const [age, setAge] = useState('')
  return (
    // Your code goes here
    <div className=" flex flex-col justify-center items-center w-full p-8 ">
      <h1 className=" w-full text-center m-4 font-semibold text-lg ">GET & POST Request in NextJS Stable App Router</h1>
      <form className=" flex w-full flex-col justify-center items-center ">
        <div className=" flex w-1/2 justify-center items-center gap-4 ">
          <input
            type="text"
            name="name"
            placeholder="Enter the name"
            onChange={e => setName(e.target.name)}
            className=" border p-2 px-4 rounded outline-none "
          />
          <input
            type="number"
            name="age"
            placeholder="Enter the age"
            onChange={e => setAge(e.target.name)}
            className=" border p-2 px-4 rounded outline-none "
          />
          <button 
          type="submit" 
          className=" border-blue-500 bg-blue-500 text-white p-2 px-4 rounded-md " 
          >Submit</button>
        </div>
      </form>
    </div>
  )
}

It's a basic layout of our form that we are going to use. Styling is just to make it beautiful, don't bother if you don't want to.

Creating API

First, create a folder named api inside the app directory. This is a must and if you are like "What?", "Why?", "How?", then I am pretty sure you should not read below this, first see the NextJS documentation on app routes.
Inside the api directory, create a folder named handleform.
Now this is how you basically create an API endpoint in your NextJS application.
Your api is available at /api/handleform. Sorry, not now. Wait!!!

Let's go.

Disclaimer! Did somebody said GET this.

Handling GET request is extremely easy. For this project we are not going to use GET request since we want to handle form data using POST request. But here's a code that goes that will create an api get request

import { NextResponse } from "next/server";

export async function GET(){
    const data = {
        name: 'Bishal Shrestha',
        age: '27'
    }

    return NextResponse.json({data})
}

Now you can check in postman or any other api testing tool and see for yourself. http:localhost:3000/api/handleform

Handling POST request

I told you earlier, this is what we are for in this tutorial. When I was learning NextJS, I got stuck here for like forever. Don't worry, you are not going to because I am here.

Questions:

Have you never ever used POST request in Next app?
Are you stuck in POST request handling request.body?
Do you like Twitter over Threads? You are in. Let's go.

Boom!!!

export async function POST(req,res){
    const data  =await req.json()
    console.log(data)

    return NextResponse.json(data)
}

This is it. Yoooooooooho.
Hold on! What is this?
Let me answer, this is how you handle POST request using req.json(), and not req.body

Let's see how this works.

Let's create a handleSubmit method in our app/page.js file.

 const handleSubmit = async (e) => {
    e.preventDefault()
    const submitData = {name,age}

    try {
      const res = await fetch('http://localhost:3000/api/handleform',{
        method: 'POST',
        body: JSON.stringify(submitData),
        headers: {
          'content-type': 'application/json'
        }
      })
      console.log(res)
      if(res.ok){
        console.log("Yeai!")
      }else{
        console.log("Oops! Something is wrong.")
      }
    } catch (error) {
        console.log(error)
    }
    setName('')
    setAge('')
  }

Make sure to pass this method in the form tag.
<form onSubmit={handleSubmit} ............. />

I hope I helped. Peace.
Full code available here in GitHub.

Next Auth for Stable App Router

Bishal Shrestha — Fri, 07 Jul 2023 12:07:07 +0000

Please go to the Live Demo deployed url & check if everything is working as expected. Create issue if any bug/issue found. Thank you in advance.

Github
Live Demo

Detailed post on how to build this step by step is coming soon.

Getting Started with Redux | React Tutorial

Bishal Shrestha — Tue, 04 Jul 2023 17:29:09 +0000

What is Redux?

Redux is a predictable state container for JavaScript applications, not limited to React, you see? It provides a centralized and predictable way to manage the state of an application, making it easier to track and update data as it flows through different components. Redux follows the principles of a Flux architecture, emphasizing a single source of truth and immutability. By maintaining a global store and using reducers to handle state changes, Redux helps simplify complex data flows, improve debugging capabilities, and facilitate efficient application development.

Learning by building

What are we going to build?

A simple counter app that displays the count value & a functionality to update the value of the count.

We are going to learn how to access the state value stored by redux (where we will see how selector work in action) in the first section & then move on to some state updating section (where we will increase or decrease the value of count using a button where we will see dispatch in action).

Requirements:

JavaScript: A solid understanding of JavaScript fundamentals, including variables, functions, objects, arrays, and ES6 features.
React: Familiarity with React basics, such as components, state, props, and lifecycle methods.
State Management: Understanding the basics of managing application state, including the concept of unidirectional data flow.
Flux Architecture: A high-level understanding of the Flux architecture pattern, which Redux is based on. (Not really required for this tutorial, but nice to have)
Asynchronous JavaScript: Knowledge of asynchronous JavaScript concepts, such as Promises and async/await. (Not really required for this tutorial)

Installation

Open command prompt & navigate to a directory where you want to create the project
Starting a react app with create react app

npx create-react-app counterapp

cd counterapp

Now let’s install the redux packages required

npm install @reduxjs/toolkit

npm install react-redux

That’s it. Now you are ready to use redux in your react app.
Just type npm start in command prompt

Section I: Store, Slice, Accessing the state value

Let’s start right away.

I don’t know about you, but I like to clear the src folder altogether since most of them are not required.

Creating the index.js & app.js file

Create a file called index.js inside src folder & paste the following

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux';
import store from './app/store';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store} >
    <App />
  </Provider>
);

Explanation: The Provider component wraps the App component, enabling access to the Redux store throughout the application. It takes a store prop, which should be the Redux store instance.

Create another file called App.js inside src folder & insert

import Counter from "./components/Counter";

export default function App() {
  return (
      <Counter />
  );
}

Here onward, things get a little bit tricky, if you are new to redux. Concepts like store, slice, selector & dispatch might confuse you. It takes time, you should really see how everything is working at each and every step.

Creating the store

In Redux, the store is a core concept that serves as a centralized container for holding the application state. It is the single source of truth for the entire application's data. The store manages the state and provides methods to interact with and update it.

Create a folder called app inside the src directory & inside the app directory, create a file called store.js & insert

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../components/counterSlice'

export default configureStore({
    reducer: {
        counter : counterReducer
    }
})

Explanation: We are creating and exporting a Redux store using the configureStore function from the @reduxjs/toolkit library. The reducer ‘counterReducer’ is not exported yet from the slice, but we will get to that soon.

Creating a slice

In Redux, a slice is a concept introduced by Redux Toolkit (a set of utilities for Redux) that helps organize and encapsulate related parts of the state, along with the corresponding reducers and actions.

Create a folder called components inside the src directory & inside that, create a file called counterSlice.js & insert

import { createSlice } from '@reduxjs/toolkit'

export const counterSlice =  createSlice({
    name: 'counter',
    initialState: {
        value: 0
    }
})

export default counterSlice.reducer

Explanation: A slice requires a unique name in string in order to identify them. We can set the initial state value and reducers inside the slice, but here, we haven’t set any reducers which we will set soon while updating the count.

Creating our component to see the result

Create another file called Counter.js inside the component folder & insert

import React from 'react'
import { useSelector } from 'react-redux'

const Counter = () => {
    const count = useSelector(state => state.counter.value)
  return (
    <div>
        <p>Count:  {count}</p>
    </div>
  )
}

export default Counter

Explanation: The useSelector hook is used to select and extract the value property from the counter slice of the Redux store state. It subscribes the component to updates of that specific state slice.

Output

Count: 0

Section II: Reducers & useDispatch

Now that we have understood how to access the state value stored in the redux store, let’s move onto how to update the state with the use of reducers & useDispatch hook.

Defining the reducers

Modify counterSlice.js to look like this

import { createSlice } from '@reduxjs/toolkit'

export const counterSlice =  createSlice({
    name: 'counter',
    initialState: {
        value: 0
    },
    reducers: {
        increment: state => {state.value += 1},
        decrement: state => {state.value -= 1},
    }
})

export const {increment, decrement} = counterSlice.actions

export default counterSlice.reducer

Explanation: Here, we declared two reducers ‘increment’ & ‘decrement’ that simply returns the updated state value by increasing or decreasing the past state. Also, see that the reducers are exported as actions, because they are the actions that the useDispatch hook requires in order to update the state.

Using useDispatch() hook

Also, modify the Counter.js file

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'
import './counter.css'
const Counter = () => {
    const count = useSelector(state => state.counter.value)
    const dispatch = useDispatch()
    return (
        <div className='box' >
            <p className='count'><span>Count: </span>{count}</p>
            <div className=' btn ' >
                <button onClick={() => dispatch(increment())} >Add</button>
                <button onClick={() => dispatch(decrement())} >Subtract</button>
            </div>
        </div>
    )
}

export default Counter

Explanation: Here, we used useDispatch hook to handle the event. And also, I have put on some basic styles. All the code till now along with the style file can be found in my GitHub repo here.

The result should look like this.

Conclusion

By following this step-by-step guide, you should have gained a solid understanding of Redux concepts, including the store, slices, actions, reducers, and connecting Redux with React components. You should be able to apply this knowledge to build more complex Redux-powered applications and efficiently manage state across their projects.

Remember, Redux is a powerful tool for state management, providing predictability, centralized state, and powerful developer tools. It may introduce some additional complexity initially, but once mastered, it can greatly enhance the maintainability and scalability of JavaScript applications.

Original post