DEV Community: GlopGeek

Enhancing UX: Leveraging Nextjs Router Events for Form Manipulation

Vuong Nguyen — Sat, 18 Nov 2023 08:55:33 +0000

Scenario 💻

When manipulating form data with a considerable number of input fields
whether it be five, ten, or even more than twenty or thirty field and it can be quite frustrating for users.

Imagine a scenario where a user has filled out 12 out of 20 fields, and then, unintentionally, they click on another link or navigate to a different page, resulting in the loss of all the entered data.

"Consider a scenario where you manipulate a form, and then, when you attempt to click on a different item in the left menu navbar, a custom popup should appear to prevent you from leaving the current page."

In the example below, I'll demonstrate a simple layout created using Mantine and Next.js. To address this issue, we'll implement a solution that displays a custom popup when attempting to leave the current page with unsaved form data.



"next": "13.4.13",
"@mantine/modals": "^6.0.15",
"@mantine/next": "^6.0.15",
"@mantine/notifications": "^6.0.15",`
```

## **Manipulate** 💻
**We will use the router event to manipulate, so you might want to conduct some research on 'Router events' in Next.js.**
> You can listen to different events happening inside the Nextjs Router and subscribe to router events on any component in your application.

as mentioned in the [Next.js router documentation.
](https://nextjs.org/docs/pages/api-reference/functions/use-router)

For example, to listen to the router event routeChangeStart, open or create pages/_app.js and subscribe to the event, like so:

```javascript
import { useEffect } from 'react'
import { useRouter } from 'next/router'

export default function MyApp({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = (url, { shallow }) => {
      console.log(
        `App is changing to ${url} ${
          shallow ? 'with' : 'without'
        } shallow routing`
      )
    }

    router.events.on('routeChangeStart', handleRouteChange)

    // If the component is unmounted, unsubscribe
    // from the event with the `off` method:
    return () => {
      router.events.off('routeChangeStart', handleRouteChange)
    }
  }, [router])

  return <Component {...pageProps} />
}
```

Now, let's apply this technique to our source code:

```javascript
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import { modals } from '@mantine/notifications';

const YourComponent = () => {
  const router = useRouter();
  const [isSubmitSuccess, setIsSubmitSuccess] = useState(false);

  const handleSubmitForm = (params) => {
    // Process params and call the API
    // After success, redirect to the homepage
    setIsSubmitSuccess(true);
    router.push('/');
  };

  const exitingFunction = (nextPath) => {
    // If the submission is successful, 
    // No need to prevent the router
    if (isSubmitSuccess) {
      return;
    }

    // Display a confirmation popup before discarding changes
    modals.openContextModal({
      modal: 'confirm',
      withCloseButton: false,
      innerProps: {
        title: 'Discard changes',
        message: 'Are you sure you want to discard changes?',
        onOk: () => {
          removeListener();
          modals.closeAll();
          router.push(nextPath);
        },
      },
    });

    // Throw an error to prevent the router change
    throw 'cancelRouteChange';
  };

  const removeListener = () => {
    setIsSubmitSuccess(false);
    router.events.off('routeChangeStart', exitingFunction);
  };

  useEffect(() => {
    router.events.on('routeChangeStart', exitingFunction);
    return removeListener;
  }, [isSubmitSuccess, router]);

  return (
    <form onSubmit={handleSubmitForm}>
      {/* Your form fields go here */}
      <button type="submit">Submit</button>
    </form>
  );
};

export default YourComponent;
```

## **The Route Cancellation Mechanism**💻

The line `throw 'cancelRouteChange'; `is used as a mechanism to prevent the router change. In the context of the provided code, this line is employed when the user attempts to leave the current page without submitting the form. 

By throwing an error with the message 'cancelRouteChange', the application signals that the route change should be canceled.

This approach aligns with how Next.js handles route changes. When an error is thrown during a route change, Next.js interprets it as a signal to stop the navigation process. 

In conclusion, we've explored the powerful combination of Next.js Router Events and custom popups to create a more secure and user-friendly form interaction experience. By intercepting page transitions and providing users with the option to confirm or cancel, we've added an extra layer of protection against inadvertent data loss.

Thank you for joining me on this exploration! This marks my first attempt at sharing knowledge, and I look forward to many more opportunities to learn and grow together.🙋‍♂️ 
Happy coding!💻

Best practices writing Clean Code with Flutter 💻 🧑🏻‍💻

Holmes — Mon, 30 Oct 2023 14:22:38 +0000

📖 Flutter is an open-source mobile application development SDK created by Google, facilitates cross-platform app creation for Android and iOS. Writing clean code with Flutter can be tricky, particularly for novices in the framework or Dart. In this article, we'll share tips for crafting clear, maintainable, and scalable Flutter code.

Why clean code with Flutter ?

To improves code readability and maintainability, making it easier for other devs to understand the purpose and functionality of our code

Use meaningful and easy pronounceable variable names

Clear and meaningful variable names make your code more readable and understandable. Facilitating comprehension for both yourself and others who may read it later


//! BAD 

final yyyyMMddstring = DateFormat('yyyy/MM/dd').format(DateTime.now());

//* GOOD 

final currentDate = DateFormat('yyyy/MM/dd').format(DateTime.now());

Use Future.wait to make concurrent API calls

By using Future.wait, you can initiate multiple async tasks at the same time. Thereby reducing the overall execution time


//! BAD 

Future callMultipleApis() async { 
  await getUserInfo(); 
  await getLocations();
} 

//* GOOD 

Future callMultipleApis() async { 
  await Future.wait([
    getUserInfo(), 
    getLocations(), 
  ]);
}

Use searchable names


//! BAD 

Future.delayed(const Duration(minutes: 30), () { 
  debugPrint('some logic here');
}); 

//* GOOD 

const MINUTES_DURATION = 30;

Future.delayed(const Duration(minutes: MINUTES_DURATION), () { 
  debugPrint('some logic');
}); 

//----OR---- 

const HALF_AN_HOUR = Duration(minutes: 30);

Future.delayed(HALF_AN_HOUR, () { 
  debugPrint('some logic');
});

Use explanatory variables

First, we have class Person and saveInfo() in that class:


class Person { 
  Person({ 
    required this.fullName, 
    required this.age, 
    required this.email, 
  }); 

  final String fullName; 
  final String age; 
  final String email; 

  void saveInfo() { 
    final fullName = this.fullName; 
    final age = this.age; 
    final email = this.email; 

    debugPrint(''' 
      'Fullname': $fullName 
      'Age': $age 
      'Email': $email 
    ''')};
}

and


const info = ['John', '31', 'john@dev.to'];

how to use explanatory variables:


//! BAD 

final infoPerson = Person(fullName: info[0], age: info[1], email: info[2]);

infoPerson.saveInfo(); 

//* GOOD 

final fullName = info[0];
final age = info[1];
final email = info[2];
final infoPerson = Person(fullName: fullName, age: age, email: email)
..saveInfo();

Avoid mental mapping

We have a list that contains staff names


const staffs = ['Holmes', 'Dane', 'Dyno', 'Maker'];

and we perform some actions with this list


//! BAD 

for (final n in staffs) { 
  doSomething(); 
  //... 
  //... 
  //... 
  //... 
  //... 
  //... 
  //"n" is defined as what? 
  doStuff(n);
} 

//* GOOD 

for (final staffName in staffs) { 
  doSomething(); 
  //... 
  //... 
  //... 
  //... 
  //... 
  //... 
  doStuff(staffName);
}

Prefer default parameters over short-circuiting or conditionals

Default arguments are generally preferable to short-circuiting. However, it's important to note that using default arguments means that your function will only assign default values to undefined arguments.


//! BAD

void logErrorWithDefaultInternal({String? errorText}) { 
  print(errorText ?? 'Internal Server Error');
} 

//* GOOD

void logErrorWithDefaultInternal({String errorText = 'Internal Server Error'}){
   print(errorText);
}

Single responsibility principle

We have:


const numbers = [33, 10, 99, 275, -100, 9000, -300];

We create the function that return a list contains number is odd and positive:


//!BAD 

List getGenericNumbers() { 
  final result = numbers.where((number) { 
    if (number.isOdd && number > 0) { 
      return true; 
    } 
    return false; 
  }).toList(); 
  return result;
} 

//!GOOD 

bool checkNumberIsOddAndPositive(int number) { 
  return number.isOdd && number > 0;
} 

List getListPositiveOddNumbers() { 
  final result = numbers.where(checkNumberIsOddAndPositive).toList();
  return result;
}

Don't make duplicate code

Avoid duplicate code as much as possible. Duplications can complicate maintenance and updates, leading to inconsistencies. Instead, create a solid abstraction that can handle multiple scenarios with a single function or module. However, ensure that the abstraction is well-designed and follows the SOLID principles.

First, we have 3 classes Person, Student, Teacher. Student and Teacher both extend Person


class Person {}

class Student extends Person {
  //properties...
}

class Teacher extends Person {
  //properties...
}

and then, how does duplicate code occur


//! BAD

Widget _buildAvatarStudent() {
  return Image.asset('assets/images/student.png');
}

Widget _buildAvatarTeacher() {
  return Image.asset('assets/images/teacher.png');
}

//! GOOD

Widget _buildAvatar(Person person) {
  String image = 'assets/images/placeholder.png';
  if (person is Student) {
    image = 'assets/images/student.png';
  } else if (person is Teacher) {
    image = 'assets/iamges/teacher.png';
  }
  return Image.asset(image);
}

//----------DART 3------------

Widget _buildAvatar(Person person) {
  String image = switch(person) => {
    Student() => 'assets/images/student.png',
    Teacher() => 'assets/images/teacher.png',
    _ =>  'assets/images/placeholder.png'
  };

  return Image.asset(image);
}

Hope y'all enjoyed :)

Basic logging in Echo Golang

Phung Chi Huy — Sun, 29 Oct 2023 15:08:42 +0000

As we know, Echo has a JSON-format logging. That mean every line of logs is formatted as JSON. This is convenient for other services to read the log. However, in a standalone server, this is not readable because it’s hard for developer to debug.

In this blog, I will setup a project with a basic logger as a reference. If you have any better approach, please feel free to discuss with me. Thank you in advance.

Installation

Golang 1.21.1
Zerolog — A logging library of Go
Echo — A Golang web framework

Folder tree

Your root
├── common
│   ├── middlewares.go
│   └── logging.go
├── go.mod
├── go.sum
└── main.go

1. Getting started

First of all, we need to initialize a go module for our project by under command.

$ go mod init <name>

Then, we add some libraries in the installation section.

go get github.com/labstack/echo/v4
go get github.com/rs/zerolog/log

Create a main.go with below code.

package main

import (
 "net/http"

 "github.com/labstack/echo/v4"
)

func main() {
 e := echo.New()

 e.GET("/", func(c echo.Context) error {
  return c.String(http.StatusOK, "Hello, World!")
 })

 common.Logger.LogInfo().Msg(e.Start(":9000").Error())
}

Run the command: go run main.go

Then, we open a browser and go to http://localhost:9000. The output is:

Hello, World!

2. Create a logger

Create file common/logging.go

package common

import (
 "fmt"
 "os"
 "strings"
 "time"

 "github.com/rs/zerolog"
)

type MyLogger struct {
 zerolog.Logger
}

var Logger MyLogger

func NewLogger() MyLogger {
  // create output configuration
  output := zerolog.ConsoleWriter{Out: os.Stdout, TimeFormat: time.RFC3339}

  // Format level: fatal, error, debug, info, warn
  output.FormatLevel = func(i interface{}) string {
    return strings.ToUpper(fmt.Sprintf("| %-6s|", i))
  }
  output.FormatFieldName = func(i interface{}) string {
    return fmt.Sprintf("%s:", i)
  }
  output.FormatFieldValue = func(i interface{}) string {
    return fmt.Sprintf("%s", i)
  }

  // format error
  output.FormatErrFieldName = func(i interface{}) string {
    return fmt.Sprintf("%s: ", i)
  }

  zerolog := zerolog.New(output).With().Caller().Timestamp().Logger()
  Logger = MyLogger{zerolog}
  return Logger
}

func (l *MyLogger) LogInfo() *zerolog.Event {
 return l.Logger.Info()
}

func (l *MyLogger) LogError() *zerolog.Event {
 return l.Logger.Error()
}

func (l *MyLogger) LogDebug() *zerolog.Event {
 return l.Logger.Debug()
}

func (l *MyLogger) LogWarn() *zerolog.Event {
 return l.Logger.Warn()
}

func (l *MyLogger) LogFatal() *zerolog.Event {
 return l.Logger.Fatal()
}

3. Create a middleware to log requests

Create a file common/middlewares.go

package common

import (
 "github.com/labstack/echo/v4"
)

func LoggingMiddleware(next echo.HandlerFunc) echo.HandlerFunc {
 return func(c echo.Context) error {
  // log the request
  Logger.LogInfo().Fields(map[string]interface{}{
   "method": c.Request().Method,
   "uri":    c.Request().URL.Path,
   "query":  c.Request().URL.RawQuery,
  }).Msg("Request")

  // call the next middleware/handler
  err := next(c)
  if err != nil {
   Logger.LogError().Fields(map[string]interface{}{
    "error": err.Error(),
   }).Msg("Response")
   return err
  }

  return nil
 }
}

4. Add the LoggingMiddleware to the main function

package main

import (
 "net/http"

 "github.com/labstack/echo/v4"
 "huy.me/common"
)

func main() {
 e := echo.New()

 // logger
 common.NewLogger() // new
 e.Use(common.LoggingMiddleware) // new

 e.GET("/", func(c echo.Context) error {
  return c.String(http.StatusOK, "Hello, World!")
 })

 common.Logger.LogInfo().Msg(e.Start(":9000").Error())
}

5. Re-run your app

After step 4, re-run your project by the command:

go run main.go

Go to the browser and access the old URL http://localhost:9000. Then check your terminal, the log will be the same with the below image.

Add a mock authentication middleware to see log

In common/middlewares.go

package common

import (
 "github.com/labstack/echo/v4"
 "golang.org/x/exp/slices"
)

func LoggingMiddleware(next echo.HandlerFunc) echo.HandlerFunc {
 return func(c echo.Context) error {
  Logger.LogInfo().Fields(map[string]interface{}{
   "method": c.Request().Method,
   "uri":    c.Request().URL.Path,
   "query":  c.Request().URL.RawQuery,
  }).Msg("Request")

  err := next(c)
  if err != nil {
   Logger.LogError().Fields(map[string]interface{}{
    "error": err.Error(),
   }).Msg("Response")
   return err
  }

  return nil
 }
}

// new code here
func AuthMiddleware(next echo.HandlerFunc) echo.HandlerFunc {
 return func(c echo.Context) error {
  Logger.LogInfo().Msg("Authenticating...")
  // Add authentication logic here

  // after process authentication logic, 
  // call next(c) to pass to the next middleware
  return next(c)
 }
}

Then, register AuthMiddleware function to the Echo instance.

package main

import (
 "net/http"

 "github.com/labstack/echo/v4"
 "huy.me/common"
)

func main() {
 e := echo.New()

 // logger
 common.NewLogger()
 e.Use(common.LoggingMiddleware, common.AuthMiddleware) // new

 e.GET("/", func(c echo.Context) error {
  return c.String(http.StatusOK, "Hello, World!")
 })

 common.Logger.LogInfo().Msg(e.Start(":9000").Error())
}

Notice: The order of middlewares will affect the log. In the above code, the LoggingMiddleware will come first, then AuthMiddleware.

Now the log will something like below.

Thank you for reading :)