Scenario - submit the record

[skorphil]

What is the most appropriate way of submitting the data?

react-hook-form provides internal mechanisms for that:

• Form
• handleSubmit
• Integrating with services

They use either action or onSubmit. onSubmit fires before action is performed – form-submission-algorithm

1. Validation is passed useForm({resolver: yupResolver(schema)})
2. onSubmit is fired
3. action is performed

• [ ] What is the difference between using action and onSubmit? https://www.reddit.com/r/nextjs/comments/19djmty/what_is_the_difference_between_action_vs_onsubmit/

// Use action prop to make post submission with formData
      <Form
        action="/api"
        control={control}
        onSuccess={() => {
          alert("Success")
        }}
        onError={() => {
          alert("error")
        }}
      >
        {" "}
        <input {...register("name")} />
        {isSubmitSuccessful && <p>Form submit successful.</p>}
        {errors?.root?.server && <p>Form submit failed.</p>} <button>submit</button>
      </Form>
      // Manual form submission
      <Form
        onSubmit={async ({ formData, data, formDataJson, event }) => {
          await fetch("api", {
            method: "post",

            body: formData,
          })
        }}
      >

[skorphil]

action described on 2:00 https://www.youtube.com/watch?v=dDpZfOQBMaU

[skorphil]

For this scenario it is needed to use db instead of a temporary json file.

looking for suggestion on simple DB https://www.reddit.com/r/nextjs/comments/1b4qnqg/suggestion_on_simple_database_as_an_alternative/

Mongo with nodejs https://www.mongodb.com/nodejs-database Moongose claims to simplife forking with mongodb

Small databases:

• https://github.com/typicode/lowdb

[skorphil]

Task intercects with

• 63

  Maybe to explore firestore if will be deployed on google firebase later

[skorphil]

ORM tools help to map oop app to relational db

https://www.prisma.io/nextjs

Mongoose is mapper to MongoDb

[skorphil]

Related materials

Use server actions with react-hook-form https://brockherion.dev/blog/posts/using-react-hook-form-with-nextjs-13-server-actions/ https://nehalist.io/react-hook-form-with-nextjs-server-actions/ https://medium.com/@danielmdob/using-next-js-server-actions-with-react-hook-form-4eadbd7f1c67

Nextjs fetching https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating

[skorphil]

We can invoke server Action via handleSubmit:

// servrerAction.js

'use server'

export async function getFullName({firstName, lastName}: FullName) {
  const loggedContent = `entered name: ${firstName} ${lastName}`;
  console.log(loggedContent);
  return loggedContent;
}

//form.jsx

import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { getFullName } from './api';

const NameForm = () => {
  const [serverResponse, setServerResponse] = useState(null);
  const { register, handleSubmit } = useForm();

  const onSubmit = async (data) => {
    const response = await getFullName(data);
    setServerResponse(response);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col items-center space-y-2">
      <Input placeholder="First Name" {...register('firstName')} />
      <Input placeholder="Last Name" {...register('lastName')} />
...

• [x] can i use handleSubmit outside of a <form> yes, it's inside useForm()

  const { register, handleSubmit } = useForm()

handleSubmit() returns same as getValues() - nested object in my case onClick={formMethods.handleSubmit((data) => console.log(data) )} can invoke server action

[skorphil]

Server action can be invoked via <form action{getFullName}, like here: https://nehalist.io/react-hook-form-with-nextjs-server-actions/#:~:text=we%20should%20use%20the%20action%20prop

But [here](https://brockherion.dev/blog/posts/using-react-hook-form-with-nextjs-13-server-actions/#:~:text=(%0A%20%20%20%20%3Cform-,onSubmit,-%3D%7Bform) used <form onSubmit={form.handleSubmit((data) => onMyFormSubmit(data))}> IDK why but since first example reference nextjs docs i will stick to action

[skorphil]

Decomposition

• 66

• 68

• 69

• 70