DEV Community: Naira Gezhoyan

Unlock the Power of Angular Reactive Forms

Naira Gezhoyan — Wed, 12 Jul 2023 13:07:23 +0000

Angular's Reactive Forms module is a powerful tool for creating and managing complex form logic. It enables the application to respond to user input in a clear, predictable, and scalable manner. One of the core features of Reactive Forms is its Observable-based API, which allows us to build reactive UIs that react to changes over time.

Angular Reactive Forms consist of building blocks such as Form Control, Form Group, and Form Array. These building blocks allow you to create and organize form controls, group related inputs together, and handle multiple inputs dynamically.

Core Concepts of Reactive Forms

Angular's Reactive Forms are designed around observable streams, providing developers with full control to manage the state of forms at any given moment. Built on a model-driven approach, the structure of these forms is influenced by the underlying data model rather than the user interface (UI).

This article will guide you through the key features of Angular Reactive Forms and offer to provide Angular component code for each aspect.

Exploring the Building Blocks

1. Form Groups: The Foundation

FormGroup is a collection of FormControl objects. It aggregates the values of each child FormControl into one object, with each control name serving as the key.

Below is an example of a component utilizing a FormGroup:



import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-profile-editor',
  template: `
    <form [formGroup]="profileForm">
      <label>
        First Name:
        <input type="text" formControlName="firstName">
      </label>
      <label>
        Last Name:
        <input type="text" formControlName="lastName">
      </label>
    </form>
  `,
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });
}

2. Form Arrays: Managing Dynamic Inputs

FormArray provides an alternative to FormGroup for managing any number of unnamed controls. Unlike FormGroup's fixed, named controls, FormArrays typically manage controls that are dynamically added.

Here's a component with a FormArray:



import { Component } from '@angular/core';
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-profile-editor',
  template: `
    <form [formGroup]="profileForm">
      <div formArrayName="aliases">
        <div *ngFor="let alias of aliases.controls; let i=index">
          <input [formControlName]="i">
        </div>
      </div>
      <button (click)="addAlias()">Add Alias</button>
    </form>
  `,
})
export class ProfileEditorComponent {
  profileForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.profileForm = this.fb.group({
      aliases: this.fb.array([
        this.fb.control('')
      ])
    });
  }

  get aliases() {
    return this.profileForm.get('aliases') as FormArray;
  }

  addAlias() {
    this.aliases.push(this.fb.control(''));
  }
}

3. Form Validation: Ensuring Input Quality

Angular provides a set of built-in validators, and you can also write your own custom validators. Validators are functions that process a FormControl or collection of controls and return an error or null.

Here's how you add validation to a FormControl:



import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-example',
  template: `
    <input [formControl]="name" placeholder="Enter name">
    <p *ngIf="name.invalid && (name.dirty || name.touched)" class="error">
      Name is required.
    </p>
  `,
})
export class ExampleComponent {
  name = new FormControl('', Validators.required);
}

4. Leveraging Observables in Reactive Forms

Each FormControl, FormGroup, and FormArray instance has a valueChanges observable. You can subscribe to this observable to react whenever the control's value changes.



this.profileForm.get('firstName').valueChanges.subscribe(value => {
  console.log('First name has changed to:', value);
});

Observables form the backbone of Angular's Reactive Forms. They provide a mechanism to handle a wide array of scenarios including handling user events, managing asynchronous operations, and maintaining state.

One of the major advantages of using observables in Reactive Forms is their capability to offer a broad range of operators like map, filter, debounceTime, etc., which simplifies handling complex scenarios.

Let's implement a reactive transformation to monitor changes to the firstName field:



import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { User } from './user.model';
import { UserService } from './user.service';
import { Subject } from 'rxjs';
import { debounceTime, filter, switchMap, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-user-form',
  template: `
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <input formControlName="firstName" placeholder="First Name">
  <input formControlName="lastName" placeholder="Last Name">
  <input formControlName="email" placeholder="Email">
  <input formControlName="age" placeholder="Age">
  <button type="submit">Submit</button>
</form>`
})

export class UserFormComponent implements OnInit, OnDestroy {
  userForm = new FormGroup<User>({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    email: new FormControl(''),
    age: new FormControl(null),
  });

  userSearchResults = [];
  private destroy$ = new Subject<void>();

  constructor(private userService: UserService) {}

  ngOnInit(): void {
    this.userForm.get('firstName').valueChanges.pipe(
      debounceTime(400),
      filter(value => value.length > 2),
      switchMap(value => this.userService.search(value)),
      takeUntil(this.destroy$)
    ).subscribe(results => {
      this.userSearchResults = results;
    });
  }

  onSubmit(): void {
    if (this.userForm.valid) {
      this.userService.addUser(this.userForm.value);
    }
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

In this component, we subscribe to changes in the firstName field of the form in the ngOnInit lifecycle method. We use the debounceTime, filter, and switchMap operators to control how often we search based on the user input.

We also use the takeUntil operator to unsubscribe from the valueChanges Observable when the component is destroyed, preventing potential memory leaks.

When the form is submitted, we use the onSubmit method to check the form validity and, if valid, we call userService.addUser with the form value.

Best Practices

When working with Angular Reactive Forms, adhering to certain best practices can lead to more efficient and maintainable code:

Immutability: Consider your form's value as if it were immutable. Rather than modifying an existing value, create a new one. This approach allows Angular to efficiently track changes and update the UI.



this.userForm.setValue({...this.userForm.value, firstName: 'New name'});

Reactive transformations: Leverage RxJS operators for transforming values reactively. This practice keeps your component code clean, enhances readability, and facilitates complex transformations with simplicity. Here's an example using the map operator to transform the input stream:



this.userForm.get('age').valueChanges.pipe(
  map(value => Math.max(0, value))
).subscribe(value => {
  console.log(value);
});

Component-based design: Structure your forms as compositions of components, with each component encapsulating a section of your form. This organization method contributes to a more maintainable and organized codebase.

Break down your form into smaller, manageable components. For example, create a distinct component for the user's personal information:



@Component({
  selector: 'app-personal-info',
  inputs: ['parentForm: formGroup'],
  templateUrl: './personal-info.component.html'
})
export class PersonalInfoComponent {
  @Input()
  parentForm: FormGroup;
}

Then, use it in the parent form like this:



<form [formGroup]="userForm">
  <app-personal-info [parentForm]="userForm"></app-personal-info>
  <!-- Other form components -->
</form>

Error handling: Monitor the validation status of your form or individual form controls using the statusChanges Observable. This technique allows for reactive display of error messages in your UI.



this.userForm.get('firstName').statusChanges.pipe(
  filter(status => status === 'INVALID')
).subscribe(() => {
  console.log('First name is invalid');
});

Avoiding memory leaks: Always remember to unsubscribe from observables when the component is destroyed to prevent memory leaks. The takeUntil operator offers an easy way to do this.

Don't forget to unsubscribe from the valueChanges Observable when the component is destroyed:



private destroy$ = new Subject<void>();

ngOnInit(): void {
  this.userForm.get('firstName').valueChanges.pipe(
    takeUntil(this.destroy$)
  ).subscribe(value => {
    console.log(value);
  });
}

ngOnDestroy(): void {
  this.destroy$.next();
  this.destroy$.complete();
}

Asynchronous validation: Conduct asynchronous validation by returning a Promise or an Observable in your validator function. This allows for the validation of form input against server-side resources.

An example of asynchronous validation, where we check whether a username is taken:



this.userForm.get('username').setAsyncValidators(this.usernameValidator.validate.bind(this.usernameValidator));

The UsernameValidator service might look like this:



@Injectable({ providedIn: 'root' })
export class UsernameValidator {
  constructor(private userService: UserService) {}

  validate(control: AbstractControl): Promise<ValidationErrors|null> | Observable<ValidationErrors|null> {
    return this.userService.isUsernameTaken(control.value).pipe(
      map(isTaken => isTaken ? { usernameTaken: true } : null),
      catchError(() => null)
    );
  }
}

In this validator service, a backend query is made to check if the username is taken, and if it is, a validation error is returned.

Reactive Form Controls in Angular Templates

Angular's Reactive Forms provide a set of directives to link form controls in your templates. Here's how you can link them:

formControlName: The directive links a standalone FormControl instance to a form control element.
formGroupName: This directive links a FormGroup instance to a DOM element.
formArrayName: The directive links a FormArray instance to a DOM element.

FormArray in Angular is a class used when you want to create a dynamic form that permits the user to add or remove inputs or groups of inputs. This feature becomes particularly useful when the exact number of inputs or groups of inputs isn't known in advance.

Consider a form scenario where a user can enter personal details and multiple addresses (home, office, etc.). In this case, the addresses can be represented as a FormArray of FormGroup instances, where each FormGroup represents an address.

Here is a demonstration of how this can be implemented in user-form.component.ts:



import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html',
})
export class UserFormComponent implements OnInit {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.userForm = this.fb.group({
      personalDetails: this.fb.group({
        firstName: ['', Validators.required],
        lastName: ['', Validators.required],
        email: ['', [Validators.required, Validators.email]],
        age: [''],
      }),
      addresses: this.fb.array([
        this.createAddressFormGroup()
      ])
    });
  }

  createAddressFormGroup(): FormGroup {
    return this.fb.group({
      street: ['', Validators.required],
      city: ['', Validators.required],
      state: ['', Validators.required],
      zip: ['', Validators.required],
    });
  }

  get addresses(): FormArray {
    return this.userForm.get('addresses') as FormArray;
  }

  addAddress() {
    this.addresses.push(this.createAddressFormGroup());
  }

  removeAddress(index: number) {
    this.addresses.removeAt(index);
  }

  onSubmit() {
    if (this.userForm.valid) {
      console.log(this.userForm.value);
    } else {
      alert("Form is invalid, please review your information");
    }
  }
}

In the above example, addresses is a FormArray that starts with one FormGroup instance for an address. The createAddressFormGroup method constructs a FormGroup for an address. The addresses getter method returns the addresses FormArray. The addAddress and removeAddress methods are used to add and remove FormGroup instances for addresses from the addresses FormArray.

Now, you can modify your form template (user-form.component.html) to display the dynamic addresses form:



<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <div formArrayName="addresses">
    <div *ngFor="let address of addresses.controls; let i = index" [formGroupName]="i" class="form-group">
      <h3>Address {{i + 1}}</h3>

      <label>Street:</label>
      <input formControlName="street" class="form-control" placeholder="Street">
      <div *ngIf="address.get('street').errors?.required" class="alert alert-danger">
        Street is required.
      </div>

      <label>City:</label>
      <input formControlName="city" class="form-control" placeholder="City">
      <div *ngIf="address.get('city').errors?.required" class="alert alert-danger">
        City is required.
      </div>

      <label>State:</label>
      <input formControlName="state" class="form-control" placeholder="State">
      <div *ngIf="address.get('state').errors?.required" class="alert alert-danger">
        State is required.
      </div>

      <label>Zip:</label>
      <input formControlName="zip" class="form-control" placeholder="Zip">
      <div *ngIf="address.get('zip').errors?.required" class="alert alert-danger">
        Zip is required.
      </div>

      <button (click)="removeAddress(i)">Remove Address</button>
    </div>

    <button (click)="addAddress()">Add Address</button>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

In the HTML snippet above, the *ngFor directive is used to loop over the FormGroup instances within the addresses FormArray. The formGroupName directive is used to bind each FormGroup instance to a div element. When the "Remove Address" button is clicked, it triggers the removeAddress method, and the addAddress method is called when the "Add Address" button is clicked.

Note that for each field in the address FormGroup, the error messages use address.get('<field>').errors?.required to check for required validation errors. The address variable here refers to each FormGroup instance within the addresses FormArray.

Conclusion

Leveraging the capabilities of Angular Reactive Forms enables the creation of dynamic, intuitive, and user-friendly web applications. Angular's Reactive Forms module, with its flexibility and efficiency, stands as an indispensable tool for constructing and handling forms in Angular applications. Utilizing features like FormArray and nested FormGroup, you can manage and validate complex, dynamic forms with ease.
Enjoy coding!

React 18 Suspense fetch data from a headless CMS

Naira Gezhoyan — Fri, 19 Aug 2022 15:46:00 +0000

To deliver a great website user experience, we need to optimize the first initial page load time and the page's responsiveness to interaction. The faster your page responds to user input – the better.

React 18 was designed to help improve interactivity with features like selective hydration with Suspense to make hydration non-blocking and provide us with more transparency about how our architectural choices will affect our app's UX and performance. React 18 makes major performance improvements and adds support for Suspense on server-side rendering (SSR) allowing serving parts of an app asynchronously possible, you can wrap a slow part of your app within the Suspense component, telling React to delay the loading of the slow component.

Server-side rendering lets you generate HTML from React components on the server, and send that HTML to your users. SSR lets your users see the page’s content before your JavaScript bundle loads and runs, after which the JavaScript code loads and merges with the HTML, attaching event handlers - which is hydration. Unlike traditional HTML streaming, it doesn’t have to happen in the top-down order.

With Suspense, you can tell React to send HTML for other components first along with the HTML for the placeholder, like a loading spinner. It significantly improves the user experience and user-perceived latency.

There are two major SSR features in React 18 unlocked by Suspense:

Streaming HTML on the server.
Selective Hydration on the client.

Let’s explore React Data fetching approaches with useEffect and Suspense try to compare backend data fetching practical solutions, in our case we choose a fast and intuitive headless CMS Cosmic. Our code examples you can check by a link StackBlitz.

Integration Cosmic Headless CMS

For fetching data we use Cosmic headless CMS is a back-end-only content management system (CMS), which is built from the ground up a content repository that makes content accessible. To integrate and get values from Cosmic, we need to install the Cosmic module in your project.

npm i cosmicjs
# or
yarn add cosmicjs

Then create a free Cosmic account and go to Cosmic Dashboard Your Bucket > Settings > API Access and find your Bucket slug and API read key and add them to creating Cosmic fetch function fetchDataByType request to your Cosmic bucket and fetch created Categories content by Cosmic query type categories.

// cosmic.js
import Cosmic from 'cosmicjs';

const bucket = Cosmic().bucket({
  slug: 'your_cosmic_slug',
  read_key: 'your_cosmic_read_key',
});

export async function fetchDataByType(objectType = 'categories') {
  const params = {
    query: {
      type: objectType,
    },
    props: 'title,slug,id,metadata',
    sort: '-created_at',
  };

  try {
    const data = await bucket.getObjects(params);
    return data.objects;
  } catch (error) {
    return { error };
  }
}

Cosmic also provide powerful content modeling features that let you create any kind of content super-fast and multi-channel publishing, for realizing create once and publish everywhere.

Data fetching approaches

Fetch-on-render

Fetch-on-render approach the network request is triggered in the component itself after mounting, the request isn’t triggered until the component renders. If you don't write a cleanup function that ignores stale responses, you'll notice a race condition (in React) bug when two slightly different requests for data have been made, and the application displays a different result depending on which request completes first. In fact on React 18, if you enable StrictMode in your application, in development mode you will find out that using useEffect will be invoked twice, because now React will mount your component, dismount, and then mount it again, to check if your code is working properly.

Let's fix a data fetching race condition by taking advantage of the useEffect clean-up function. If we're okay with making several requests, but only rendering the last result, we can use a boolean flag isMount:

// FetchWithUseEffect/App.js
import React, { useEffect, useState } from 'react';
import Category from './components/Category';
import { fetchDataByType } from './cosmic.js';

const App = () => {
  const [categories, setCategories] = useState([]);

  const getCategories = async () => {
    const result = await fetchDataByType('categories');
    if (result.length) {
      setCategories(result);
    }
  };

  useEffect(() => {
    let isMount = true;

    if (isMount) {
      getCategories();
    }

    //useEffect clean-up function
    return () => {
      isMount = false;
    };
  }, []);

  return (
    <div className={cn('container', styles.container)}>
     <div className={styles.sidebar}>
      <div className={styles.collections}>
       {categories?.map((category) => (
         <Category key={category.id} info={category} />
        ))}
       </div>
      </div>
     </div>
  );
};

export default App;

Additionally, if a component renders multiple times (as they typically do), the previous effect is cleaned up before executing the next effect.

In this case, we still have a race condition in the sense that multiple requests to Cosmic will be in-flight, but only the results from the last one will be used.

Also as Dan Abramov explains, Fetch-on-render provides slow navigation between screens. If you have parent and child components both doing fetching in useEffects, then the child component can't even start fetching until the parent component finishes fetching. These types of performance problems are very common in single-page apps and cause a lot more slowness than "excessive re-rendering" and if we have a complex application with multiple parallel requests, we would see different parts of the application load in random order. The more natural behavior for an application is to render things from top to bottom.

Render-as-you-fetch

Render-as-you-fetch approach lets us begin rendering our component immediately after triggering the network request and we start rendering pretty much immediately after kicking off the network request.

Suspense for Data Fetching

With Suspense, we don’t wait for the response to come back before we start rendering and reduce the Total Blocking Time (TBT) of our example from 106ms to 56ms.

The React core team set of concurrent features to make data fetching in React easier. Suspense is among these, and it aims to simplify managing loading states in React components. It’s a feature for managing asynchronous operations in a React app and lets you use <Suspense> to declaratively “wait” for anything else, including data, and no longer have to wait for it all the JavaScript to load to start hydrating parts of the page.

First, we trigger the network request before rendering any components on line one. In the main App component, we wrap both Category and Cards, Main components in separate Suspense components with their fallbacks.

When App mounts for the first time, it tries to render Category, which triggers the resourseCategories.read() line. If the data isn’t ready yet (i.e., the request hasn’t been resolved), it is communicated back to Suspense, which then renders <p>Loading…</p>. The same thing happens for Cards and Main

// App.js
import React, { Suspense } from 'react';

const App = () => {
  return (
    <main>
      <Suspense fallback={<p>Loading.....</p>}>
        <Cards />
      </Suspense>
      <div>
        <Suspense fallback={<p>Loading.....</p>}>
          <Category />
        </Suspense>
      </div>
    </main>
  );
};

export default App;

Suspense it is not a new interface to fetch data, as that job is still delegated to libraries like fetch or Axios, and Suspense real job is to just say "show this code while is loading, and show that when it's done", nothing more than that.

Wrap your fetching logic `wrapPromise.js`

We also need wrap fetching logic, to throw an exception when our components are loading the data or it failed, but then simply return the response once the Promise is resolved successfully and if it is still pending, it throws back the Promise.

// wrapPromise.js
//Wraps a promise so it can be used with React Suspense

function wrapPromise(promise) {
  let status = 'pending';
  let response;

  const suspender = promise.then(
    res => {
      status = 'success';
      response = res.objects;
    },
    err => {
      status = 'error';
      response = err;
    },
  );

  const handler = {
    pending: () => {
      throw suspender;
    },
    error: () => {
      throw response;
    },
    default: () => response,
  };

  const read = () => {
    const result = handler[status] ? handler[status]() :
    handler.default();
    return result;
  };

  return { read };
}

export default wrapPromise;

At the end of the wrapPromise function will check our promise's state, then return an object containing the read function as a method, and this is what our React components will interact with to retrieve the value of the Promise.

Now we'll need to wrap the Cosmic call functions to wrapPromise:

// cosmic.js

export function fetchDataByType(objectType = 'categories') {
  const params = {
    query: {
      type: objectType,
    },
    props: 'title,slug,id,metadata',
    sort: '-created_at',
  };

  const data = bucket.getObjects(params);
  return wrapPromise(data);
}

The above is just an abstraction for Cosmic fetching functions with Suspense and fetch one time.

Read the data in the component

Once everything is wrapped up on the fetching side of things, we want to use it in our component. So what is happening when we call the component, the read() function will start to throw exceptions until it's fully resolved, and when that happens it will continue with the rest of the code, in our case to render it.

//components/Category
import React from 'react';
import { fetchDataByType } from '../../cosmic.js';
import styles from '../../styles/Collection.module.scss';

const resourseCategories = fetchDataByType();

const Category = () => {
  const categories = resourseCategories.read();

  const renderCategories = categories?.map((info) => (
    <div key={info?.id} className={styles.user}>
      <div className={styles.avatar}>
        <img
          className={styles.image}
          src={info?.metadata?.image?.imgix_url}
          alt="Avatar"
        />
      </div>
      <div className={styles.description}>
        <div className={styles.name}>{info?.metadata?.title}</div>
        <div
          className={styles.money}
          dangerouslySetInnerHTML={{ __html: info?.content }}
        />
      </div>
    </div>
  ));

  return <div className={styles.collections}>{renderCategories}</div>;
};

export default Category;

The parent component

Suspense gives React access to pending states in our applications and thats why React knows that a network call is happening, this allows us to render a fallback component declaratively while waiting.

// App.js
import React, { Suspense } from 'react';
import Cards from './components/Cards';
import Category from './components/Category';
import Main from './components/Main';
import styles from './styles/Collection.module.scss';

const App = () => {
  return (
    <div className={styles.wrapper}>
      <div className={cn('section-pb', styles.section)}>
        <div className={cn('container', styles.container)}>
          <div className={styles.row}>
            <Suspense fallback={<p>Loading.....</p>}>
              <Main />
              <Cards />
            </Suspense>
          </div>
          <div className={styles.sidebar}>
            <div className={styles.info}>
              Collections
              <span className={styles.smile} role="img" aria-label="fire">
                🔥
              </span>
            </div>
            <Suspense fallback={<p>Loading.....</p>}>
              <Category />
            </Suspense>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;

Conclusion

Now, with Suspense, you can break your app into small, stand-alone units that can be rendered on their own without the rest of the app, allowing content to be available to your user even much faster than before. We explored the various data fetching approaches for comparison.

Try it in your own project and give us your feedback. You can get started with Cosmic for a quick CMS to test data fetching with Suspense for websites and apps.

Search and filter data using React Hooks and a headless CMS

Naira Gezhoyan — Thu, 04 Aug 2022 15:39:00 +0000

Searching and filtering data is a common feature for websites and apps, especially e-commerce. In this article, we will discuss how to build a search and filter feature for products using React. The product data will be queried from a headless CMS (Cosmic) with the UI updated instantly. We will also talk about how the debounce technique handles state management using Hooks and API usage optimization.

Install template demo content

To get started with this example, install the uNFT Marketplace template which includes the demo content that we will use for the search and filter functionality. Or you can skip this step and just follow along with the code.

Log in to your Cosmic account.
Go to the uNFT Marketplace and click “Select Template”.
Follow the steps to create a new Project and Bucket and import the demo content.
See the demo content now installed in your Bucket.
Go to Products and note the Metafields which contain the data that we will use for our React search / filter feature.

Create the search / filter React app

To make things easier, we’ve already built a small app with the search / filter feature available on StackBlitz.

Using the Cosmic API we can filter the product results by search criteria. Now let’s see how it works.

Create the search / filter query

To filter the products in our feature, we will need to send a request to the Cosmic API to get only the products that match the search criteria. We will use Cosmic Queries to do this.

To create the query, we create an object query with properties that match up with the Object Metadata values that we are searching for like color, price, and categories.

Here is an example with comments to explain what each query property does.

const query = {
  // Find Objects in products Object Type
  "type":"products"
  // Find products with a price greater than or equal to 10 and less than or equal to 100
  "metadata.price":{
    "$gte":10,
    "$lte":100
  },
  // Find products that have the color Blue
  "metadata.color":"Blue",
  // Find products that have the category Sale (uses category Object id)
  "metadata.categories":"627e23f18bb13a000911ea55",
}

After we build our query, we send the query to the Cosmic NPM module using the getObjects method. We use props to limit the response to only the properties we need. Here's an example of what the implementation looks like.

import Cosmic from 'cosmicjs';

const bucket = Cosmic().bucket({
  slug: "YOUR_COSMIC_BUCKET_SLUG",
  read_key: "YOUR_COSMIC_BUCKET_READ_KEY",
});

const params = {
  query,
  props: 'title,slug,metadata,created_at'
}
const data = await bucket.getObjects(params);

Now let’s get into the details about how React handles the UI state updates using Hooks.

React Hooks

React uses one-way data flow, passing data down the component hierarchy from parent to child components and Hooks allow function components to have access to state. For every search and filter update to the input fields, we are adding state to the React application using the state hook useState.

// App.js
const [search, setSearch] = useState('');
const [{ min, max }, setRangeValues] = useState({ min: '', max: '' });

To display the filtered data on the webpage, we map over the filterResult
array and display the appropriate list of products.

// App.js
<div className={styles.list}>
  {filterResult?.length ? (
    filterResult?.map(product => (
      <Card className={styles.card} item={product} key={product.slug} />
    ))
  ) : (
    <p className={styles.inform}>Try another category!</p>
  )}
</div>

React Custom Hook useDebounce

When the user types something in the input field, the state of the search variable will be updated. To improve the search and filter experience we will create a React Custom Hook useDebounce.

This hook enables a debounce that clears any fast-changing value. The debounced value will only reflect the latest value when the useDebounce hook has not been called for the specified time period. When used in conjunction with useEffect, you can ensure that expensive operations like API calls are not executed too frequently.

// utils/hooks/useDebounce.js
import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {
    // Update debounced value after delay
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // Cancel the timeout if value changes (also on delay change or unmount)
    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]); // Only re-call effect if value or delay changes

  return debouncedValue;
}

export default useDebounce;

The example below allows you to search the Cosmic API and uses useDebounce to prevent API calls from being fired on every keystroke. The goal is only to have the API call fire when the user stops typing, so we aren't hitting the Cosmic API rapidly.

// App.js
const [search, setSearch] = useState('');

// Debounce search term so that it only gives us latest value
// If search has not been updated within last 500ms, query the Cosmic API
const debouncedSearchTerm = useDebounce(search, 500);

useEffect(() => {
  let isMount = true;

  if (isMount && debouncedSearchTerm?.length) {
    handleFilterDataByParams({
      search: debouncedSearchTerm,
    });
  }

  return () => {
    isMount = false;
  };

}, [debouncedSearchTerm]);

Conclusion

Searching and filtering is a common feature for many websites and apps which can prove challenging to build. But by using the right tools and techniques, building this feature can be made easier and more enjoyable for the end user.

In this article, we showed you how you can use Cosmic Queries, React Hooks, and debounce to create a great search and filter experience. The examples explained in this article are all part of the uNFT Marketplace app template. You can view the full demo here, install the app template in your Cosmic dashboard, or clone the GitHub repository. To learn more about Cosmic Queries go to the Cosmic documentation.

If you have any questions about Cosmic integration and features, you can reach out to them on Twitter, Slack or follow to YouTube channel.

Build an uNFT marketplace with Next.js, Cosmic and Stripe integration

Naira Gezhoyan — Tue, 12 Jul 2022 20:44:00 +0000

For this tutorial, I will show you how to build a marketplace app using Next.js, Cosmic, and Stripe. After we are done, you will be equipped with a foundation to build your own projects using these powerful tools. Let’s get started.

Bonus features include deploying to Vercel, dark and light mode and using Lighthouse to measure the performance of the website’s core web vitals metrics, which dramatically increases the user's experience and website visibility in SEO search results (this app's Lighthouse score displayed below).

Guys, if you like it please upvote in Product Hunt.

Tools we’ll be using

Next.js - scalable and high-performance React.js framework for modern web development. Provides a large set of features, such as hybrid rendering, route prefetching, automatic image optimization, and internationalization, out of the box.
Cosmic - fast, fully managed headless CMS that enables us to quickly manage and create website content including UGC (user-generated content).
Stripe - payments infrastructure that provides API tools to receive one-time and subscription payments.

TL;DR

Check out the code
View the live demo
Install the app template

First, we need to provide architecture and design

Designing is fundamentally about taking things apart, in such a way that they can be put back together. Separating things into things that can be composed that's what design is. — Rich Hickey.

MVC stands for model-view-controller software design pattern

Here's what each of those components means:

Model: The backend that contains all the data logic. Cosmic Object Types (Multiple or Singleton) help us create dynamic, scalable data structures and the essence of their transformations is independent of the outer world.
View (UI): The frontend or graphical user interface (GUI). For it, we use React, which is described as the “V” layer in the MVC.
Controller: The brains of the application control how data is displayed. We use React’s Context API to decouple the state from the presentation View and facilitate business logic re-use.

MVC pattern is used for modern web applications because it allows the application to be scalable, maintainable, and easy to expand.

Setting up a project with Next.js

Next.js sets out to improve two things: developer and user experiences and is a complete toolkit to build blazing fast React apps. Next.js offers an abstraction that solves the most common, mundane, and complex tasks like routing, internalization, and image optimization. By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript. Pre-rendering can result in better performance and SEO.
Next.js has two forms of pre-rendering: Static Generation (SSG) and Server-side Rendering (SSR).

Static Generation is the pre-rendering method that generates the HTML at build time. The pre-rendered HTML is then reused on each request.
Server-side Rendering is the pre-rendering method that generates the HTML on each request.

In our project, we use Server-side Rendering for dynamic data and pre-render pages that will always be up-to-date.

To get started, we'll create a Next.js app that includes tooling and configurations. For this tutorial, you'll need Node.js 12.22.0 or a later version. Open the terminal, paste or type

npx create-next-app@latest unft-marketplace
# or
yarn create next-app unft-marketplace

Change into the new directory and install the dependencies using a package manager like npm, yarn, or pnpm and then start the app in the development mode:

cd unft-marketplace
npm install cosmicjs stripe @stripe/stripe-js sass

npm run dev
# or
yarn dev

To use the template UI you need to clone it on GitHub. Open the terminal, paste or type this code to install all dependencies, and run it.

git clone https://github.com/cosmicjs/unft-marketplace
cd unft-marketplace

yarn install
yarn dev

Open http://localhost:3000 in your browser to see the ascetic home page.

Managing API keys/secrets with Next.js

When working with API keys and secrets, we need to make sure we keep them secret and out of version control, while conveniently making them available as .env variables. You'll need to create a .env file at the root of the project. Log in to Cosmic and from Bucket Settings > API Access takes the following values:

NEXT_PUBLIC_COSMIC_BUCKET_SLUG=your_cosmic_slug
NEXT_PUBLIC_COSMIC_READ_KEY=your_cosmic_read_key
COSMIC_WRITE_KEY=your_cosmic_write_key

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_key
STRIPE_SECRET_KEY=your_stripe_secret_key

The NEXT_PUBLIC_prefix automatically exposes this variable to the browser. Next.js will insert the value for these into the publicly viewable source code at build/render time. Therefore make sure to not use this prefix for secret values! The same way log in to Stripe and for developers section take your keys.

Next.js API routes

Next.js API Routes to create API endpoints inside the Next.js app. They will be deployed as Serverless Functions (also known as Lambdas). In our case, for filtering Cosmic content by parameters we’ll create a file called filter.js in pages/api directory that has the following format:

//pages/api/filter
import Cosmic from 'cosmicjs';

const bucket = Cosmic().bucket({
// Set these values, found in Bucket > Settings after logging in at https://app.cosmicjs.com/login
  slug: '',
  read_key: '',
} )

export default async function filterHandler(req, res) {
  const { query: {min, max, color, category, search} } = req;

  let queryParam = {};

  if(typeof min !== 'undefined' || typeof max !== 'undefined') {
    queryParam = { ...queryParam, "metadata.price": {"$gte": typeof min !== 'undefined' ? Number(min) : 1, "$lte": typeof max !== 'undefined' ? Number(max) : 1000000000 },}
  }

  if(typeof color !== 'undefined') {
    queryParam = { ...queryParam, "metadata.color": color,}
  }

  if(typeof category !== 'undefined') {
    queryParam = { ...queryParam, "metadata.categories": category,}
  }

  if(typeof search !== 'undefined') {
    queryParam = { ...queryParam, "title": { "$regex": search, "$options": "i" },}
  }

  const params = {
    query: {
      ...queryParam,
      type: 'products',
    },
    props: 'title,slug,metadata,created_at',
  }

  try {
    const data = await bucket.getObjects(params);
    res.status(200).json(data);
  } catch (error) {
    res.status(404).json(error);
  }
}

Note that:

req is an instance of http.IncomingMessage, plus some pre-built middlewares.
res is an instance of http.ServerResponse, plus some helper functions.

Cosmic features overview and integration

Cosmic is a great headless CMS that enables us to model, manage, and store our content and media in a convenient hosted dashboard, then fetch our content using available API tools. The API provides search and filtering capabilities out of the box which makes building search and filter features in our app easy. Cosmic provides full modern functionality and features for creating interactive, independent, and dynamic websites.

Customizable API - Build out the schema, models, and controllers for the API from the admin dashboard. Cosmic offers both a REST and GraphQL API for our convenience.
Webhooks - Call back anywhere you need, to get the functionality you want, out of the box.
Queries - allow you to find the correct asset with your data by searching, filtering, and sorting. You can use some advanced queries to create more granular search capabilities.
Add Media and Object - You can enable user generated content in your app using the Cosmic API. Users can upload and create interactive content within your defined data models. Cosmic is not only a fully-managed content management system, but the API can be used to create user-generated content experiences as well.

Getting started with Cosmic

The first step is creating a free Cosmic account into Cosmic Dashboard and a new Project. Let's select the "Start from scratch" option.

Cosmic Object Types (Multiple or Singleton) help us create dynamic, scalable, reusable data structures and our content model. Creating model sections, easy from scratch, defines the "Metafields" in the "Content Model". For a reusable model used across multiple Objects choose Multiple Object Type. For our project, we will create a reusable Products Object Type model using Multiple Object Relationships with Categories. This will enable us to add or remove Products to Categories and enable searching, and filtering by category.

After creating the content model for our Products, you can begin adding Products from the dashboard like this:

You can define other content models by creating Object Types following this schema design:

Singleton for a unique model,
Multiple for reusable models.

Using Cosmic queries, you can quickly find the specific content according to search, filter, and sorting criteria.

User-generated content

Using the Cosmic capabilities to Add Media and Objects, logged-in users can upload and create their own form-submitted content. For our use case, the user can create new Products to add to the marketplace for sale.

Uploading files and dynamic content to Next.js requires API Routes as we will need to store secret keys securely in server-side environment variables. Here is a brief overview of how to upload files with React and Next.js API routes using formidable, fs, and the Cosmic bucket.addMedia method.

//api/upload.js
import Cosmic from 'cosmicjs';
import formidable from 'formidable';
import fs from "fs";

const bucket = Cosmic().bucket({
  slug: process.env.NEXT_PUBLIC_COSMIC_BUCKET_SLUG,
  read_key: process.env.NEXT_PUBLIC_COSMIC_READ_KEY,
  write_key: process.env.COSMIC_WRITE_KEY,
});

export const config = {
  api: {
    bodyParser: false,
  },
};

export default async function uploadHandler( req,res ) {
  const form = new formidable.IncomingForm({ multiple: false });

  try {
    form.parse( req, async ( err, fields, files ) => {
      if (err) return reject(err);
      const cosmicRes = await saveFile(files.file);
      res.status( 200 ).json(cosmicRes);
    } );

  } catch (error) {
    res.status(404).json(error.message)
  }
}

const saveFile = async ( file ) => {
  const filedata = fs.readFileSync( file?.filepath );
  const media_object = { originalname: file.originalFilename, buffer: filedata };

  try {
    // Add media to Cosmic Bucket
    const cosmic_res = await bucket.addMedia({
      media: media_object
    } );
    await fs.unlinkSync(file?.filepath);
    return cosmic_res;
  } catch (error) {
    console.log(error);
    return;
  }
};

Stripe overview and integration

Stripe provides a way to capture payments in your application. Much like Cosmic has done all of the heavy lifting for content infrastructure, Stripe provides the ecommerce infrastructure and tools to build delightful payment experiences for your customers, irrespective of the service or product being sold.

Due to PCI compliance requirements, the Stripe.js library has to be loaded from Stripe's servers. This creates a challenge when working with server-side rendered apps, as the window object is not available on the server. To help us manage that complexity, Stripe provides a loading wrapper that allows importing Stripe.js like an ES module:

//lib/getStripe
import { loadStripe } from '@stripe/stripe-js';

let stripePromise;

const getStripe = () => {
  if(!stripePromise) {
    stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
  }

  return stripePromise;
}

export default getStripe;

Stripe.js is loaded as a side effect of the import '@stripe/stripe-js' statement.

Create the Stripe checkout session

Add an endpoint on your server that creates a Checkout Session. A Checkout Session controls what your customer sees on the payment page such as line items, the order amount and currency, and acceptable payment methods. Also, you can enable or disable payment methods directly in the Stripe Dashboard.

//api/stripe
import Stripe from 'stripe';

const stripe = new Stripe( process.env.STRIPE_SECRET_KEY );

export default async function handler(req, res) {
  if (req.method === 'POST') {
    try {
      const params = {
        submit_type: 'pay',
        mode: 'payment',
        payment_method_types: ['card'],
        billing_address_collection: 'auto',
        shipping_options: [
          { shipping_rate: 'shr_1L4pafH6oGDppJjV9MrYC7z0' },
          { shipping_rate: 'shr_1L4pn4H6oGDppJjVBL7vPTk1' },
        ],
        line_items: req.body.map((item) => {
          const img = item.metadata.image.imgix_url;

          return {
            price_data: { 
              currency: 'usd',
              product_data: { 
                name: item.title,
                images: [img],
              },
              unit_amount: item.metadata.price * 100,
            },
            adjustable_quantity: {
              enabled:true,
              minimum: 1,
            },
            quantity: item.quantity
          }
        }),
        success_url: `${req.headers.origin}/`,
        cancel_url: `${req.headers.origin}/`,
      }

      // Create Checkout Sessions from body params.
      const session = await stripe.checkout.sessions.create(params);

      res.status(200).json(session);
    } catch (err) {
      res.status(err.statusCode || 500).json(err.message);
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}

Next steps

Though this marketplace app is mainly a proof of concept to learn about these modern solutions, it is a good starter to build on. There is potential to add new features such as:

User account page to display orders
User profile page to show off purchased jpegs
Comment system to capture reviews and conversations
Bitcoin / Lightning option for making purchases

Conclusion

I hope you enjoyed this tutorial exploring how to use powerful API-first tools to build a full-featured marketplace application. This dynamic, functional, customizable, and fully integrated uNFT marketplace, powered by Next.js, Cosmic, and Stripe can be customized for other types of businesses as well. Please feel free to fork the code, and use it how you prefer!

Build Restaurant Website with Next.js and Cosmic

Naira Gezhoyan — Wed, 27 Apr 2022 18:04:15 +0000

In this tutorial, I will show you how to build a fully mobile responsive restaurant website using Next.js and Cosmic Headless CMS. The Figma template can be found on ui8.net.

Bonus features include deploying to Vercel and setting up automatic static content revalidation using Cosmic Webhooks. Let’s get started.

Tools we’ll be using

Next.js - A React framework for production that makes it easy to spin up a full-stack application.
Cosmic - A Headless CMS enables the independence of the data (content) layer and gives us the ability to quickly manage website content.
Sass - A stable, and powerful professional-grade CSS extension language.

TL;DR

Check out the code
View the live demo
Install the App Template

Quick Introduction

Next.js is a complete suite to build blazing fast React apps. It is developer-friendly and intuitive to use. With the release of Next.js 12.1, things are only going to get better with new features including performance optimization, middleware, React 18 support, on-demand ISR, expanded support for SWC, and more.
Cosmic is a great headless CMS that gives us the ability to fully manage and store our website content and media and update them quickly.

Explore 4 new killer features of Next.js and use them to template

Let's install a new Next.js app that includes tooling and configurations. For this tutorial, you'll need Node.js 12.22.0 or a later version. Open the terminal, paste or type

npx create-next-app@latest nextjs-restaurant-website-cms
# or
yarn create next-app nextjs-restaurant-website-cms

Install dependencies from the app folder:

cd nextjs-restaurant-website-cms
npm i
# or
cd nextjs-restaurant-website-cms 
yarn

You can now start the app in the development mode with:

npm run dev
# or
yarn dev

Open http://localhost:3000/ in your browser to see the ascetic home page.

1. Rust compiler

One of the key features of Next.js 12 is performance optimization. To boost performance, Next.js replaced the Babel compiler with an extensible Rust compiler and enabled it by default using Next.js 12, the compiler is built on top of — SWC — which stands up for Speedy Web Compiler. It does consume TypeScript/JavaScript and emits JavaScript code that can be executed on old browsers.

SWC is 20x faster than Babel on a single thread and 70x faster on four cores.

2. Middleware

This is one of the most exciting features. Middlewares enable us to use code over configuration. This means you can run code before a request is completed, and based on the request, you can modify the response by rewriting, redirecting, adding headers, setting cookies, etc. With middlewares, you can implement things like authentication, bot protection, redirects and rewrites, server-side analytics, logging, and handling unsupported browsers, and more.

Middleware is created in /pages/_middleware.ts and it will run on all routes within the /pages directory. What does a _middleware.js file look like? Let’s see that through our template for example.

// pages/_middleware.js

import { NextResponse } from 'next/server';

export async function middleware( request ) {
  // create an instance of the class to access the public methods.
  //This uses next(),

  let response = NextResponse.next();

  const country = request.geo.country || 'US';
  const city = request.geo.city || 'San Francisco';
  const region = request.geo.region || 'CA';

  // get the cookies from the request
  let cookieFromRequest = request.cookies['location-cookie'];

  if(!cookieFromRequest) {
    // set the `cookie`
    response.cookie('location-cookie', `${country|city|region}`);
  }

  return response;
}

3. On-demand Incremental Static Regeneration ISR

Next.js now exposes a function unstable_revalidate() allowing you to revalidate individual pages that use getStaticProps. Inside getStaticProps, you don’t need to specify revalidate to use on-demand revalidation, only revalidate the page on-demand when unstable_revalidate() is called.

// pages/api/revalidate.js

export default async function handler(req, res) {
  try {
    await res.unstable_revalidate('/menu/' + req.body.data.slug)
    return res.json({ revalidated: true })
  } catch (err) {
    // If there was an error, Next.js will continue
    // to show the last successfully generated page
    return res.status(500).send('Error revalidating')
  }
}

4. Faster Image Optimization and Smaller images using AVIF

The built-in Image Optimization API has been updated to support the same pattern as ISR pages, where images are served stale and revalidated in the background. It also supports AVIF images enabling 20 percent smaller images compared to WebP.

This feature is opt-in and can be enabled by modifying the image. format property in the next.config.js file:

// next.config.js

const nextConfig = {
  reactStrictMode: true,
  images: {
        formats: ['image/avif', 'image/webp'],
        domains: ['imgix.cosmicjs.com'],
    },
}

module.exports = nextConfig

Cosmic Features overview

Customizable API: Build out the schema, models, and controllers for API from the editor. Cosmic offers both a REST and GraphQL API for our convenience.
Globally fast and secure content management system and API toolkit.
Webhooks Call back anywhere you need, to get the functionality you want, out of the box with Cosmic API.
Imgix Integration is included which allows you to do powerful image processing for dynamic apps optimized for cross-platform experiences.

Cosmic integration

The first step making a free Cosmic account. Let's select the "Start from scratch" option.

Great! Now let's organize our content into groups, that share the same content model using Object Types. For example, you have sections with similar properties like section name, title, introduction, and picture and want to reuse this module to create content for different sections.

Create Section Object Type and add section properties to define the "Metafields" in the "Content Model".

Now you could create an Object Type model for sections and you can fill content like this.

In a similar way, you can define modules and creates Object Type following the current data model, schema design

Singleton for a unique model,
Multiple reusable models.

Time to get values for the Next.js app

Install the Cosmic module to your Next.js app.

npm i cosmicjs
# or
yarn add cosmicjs

Then go to Cosmic Dashboard Your Bucket > Settings > API Access and find your Bucket slug and API read key.

Awesome! Add this Bucket slug and API read key into your Next.js app .env

//.env
COSMIC_BUCKET_SLUG=your_cosmic_slug
COSMIC_READ_KEY=your_cosmic_read_key

To use the template UI you need to clone it in GitHub. Open the terminal, paste or type this code to install all dependencies, and run it.

git clone https://github.com/cosmicjs/nextjs-restaurant-website-cms.git
cd nextjs-restaurant-website-cms

npm install
#or
yarn install

npm run dev
#or
yarn dev

Function getDataFromBucket request to the bucket that we create earlier in Cosmic Dashboard and get our created content from the Cosmic by the params type.

// src/lib/api.js

import Cosmic from 'cosmicjs';

const BUCKET_SLUG = process.env.COSMIC_BUCKET_SLUG
const READ_KEY = process.env.COSMIC_READ_KEY

const bucket = Cosmic().bucket({
  slug: BUCKET_SLUG,
  read_key: READ_KEY,
});

export async function getDataFromBucket(preview) {
  const params = {
    type: 'header',
    props: 'title,slug,metadata,created_at',
    sort: '-created_at',
    ...(preview && { status: 'all' }),
  }
  const data = await bucket.getObjects(params)
  return data.objects
}

Let's display our content, integrate it with our UI, and render some elements to the home page. For that, you need to add this to index.js.

// pages/index.js

import Head from 'next/head';
import Home from 'components/Home';
import Layout from 'components/Layout';
import Footer from 'components/Footer';
import AboutUs from 'components/AboutUs';
import SpacialMenu from 'components/Menu';
import Introduction from 'components/Introduction';
import VideoIntro from 'components/VideoIntro';
import Gallery from 'components/Gallery';
import Contacts from 'components/Contact';

import { getDataFromBucket } from 'lib/api';
import chooseByType from 'utils/chooseValueByType';

function Template({ data }) {
  return (
    <>
      <Head>
        <title>Next.js Restaurant CMS</title>
        <meta name="description" content="Create template using cosmic.js CMS" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Layout navbar={chooseByType(data, 'navigation')}>
        <Home info={chooseByType(data, 'header')}/>
        <AboutUs info={chooseByType(data, 'about')}/>
        <SpacialMenu info={[chooseByType(data, 'drink'), chooseByType(data, 'food')]}/>
        <Introduction info={chooseByType(data, 'history')}/>
        <Gallery info={[chooseByType(data, 'gallery'), chooseByType(data, 'food')]}/>
      </Layout>
      <Footer>
        <VideoIntro url={chooseByType(data, 'video')}/>
        <Contacts info={chooseByType(data, 'contact')}/>
      </Footer>
    </>
  )
}

export async function getStaticProps({ preview }) {
  const data = (await getDataFromBucket(preview)) || [];
  return {
    props: { data },
  }
}

export default Template;

The chooseByType function filters data by Object Type slug, which we created in the Cosmic Dashboard.

// src/utils/chooseValueByType.js

const chooseByType = (data, slugName) => {
  if( data && slugName ) {
    const chooseBySlug = data?.filter(content => Object.values(content).includes(slugName));
    return chooseBySlug ? chooseBySlug[0] : [];
  }
}

export default chooseByType;

Congrats you're almost there!

Making Menu Item Page

In Next.js you can create a dynamic route. For creating individual menu item page and dynamic route, consider the following page pages/menu/[slug].js:

// pages/menu/[slug].js

import Head from 'next/head';
import { useRouter } from 'next/router';

import Layout from 'components/Layout';
import Footer from 'components/Footer';
import Contacts from 'components/Contact';
import MenuIntro from 'components/MenuIntro';
import VideoIntro from 'components/VideoIntro';
import Gallery from 'components/Gallery';

import { getAllDataWithSlug,getDataFromBucket } from 'lib/api';
import chooseByType from 'utils/chooseValueByType';

function Menu({ data }) {
  const {
    query: {slug},
  } = useRouter();

  return (
    <>
      <Head>
        <title>Next.js Restaurant CMS</title>
        <meta name="description" content="Create template using cosmic.js CMS" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Layout navbar={chooseByType(data, 'navigation')}>
        <MenuIntro info={[chooseByType(data, 'food'), chooseByType(data, 'drink')]} slug={slug} />
        <Gallery info={[chooseByType(data, 'gallery'), chooseByType(data, 'food')]}/>
      </Layout>
      <Footer>
        <VideoIntro url={chooseByType(data, 'sushi')}/>
        <Contacts info={chooseByType(data, 'contact')}/>
      </Footer>
    </>
  )
}

export async function getStaticProps({ params, preview = null }) {
  const data = (await getDataFromBucket(preview)) || [];
  return {
    props: { data },
  }
}

export async function getStaticPaths() {
  const dataWithSlug = (await getAllDataWithSlug()) || [];

  return {
    paths: dataWithSlug.map((menu) => `/menu/${menu.slug}`),
    fallback: true,
  }
}

export default Menu;

getServerSideProps function is used to get the data from Cosmic each time this route is called. In pages/api/revalidate.js we use unstable_revalidate function to revalidate the page on-demand when unstable_revalidate() is called and if there was an error, Next.js will continue to show the last successfully generated page.

After deploying your codebase on Vercel you can enable the revalidation of content updates by going to the Cosmic Dashboard and navigating to Bucket Settings > Webhooks. The event to be triggered when editing content is object.edited.published . The Webhook URL endpoint will look like ${YOUR_VERCEL_DEPLOYMENT_URL}/api/revalidate.

This also makes it easier to update your site when content from your headless CMS is created or updated.

Time to test it out, edit your content in Cosmic Dashboard, and see the static content updated instantly!

Conclusion

Congrats! Now you have a dynamic, customizable, and fully integrated template with new Next.js and Cosmic features, you can customize it for other types of businesses and use it how you prefer.

Build a Production Ready Restaurant Website with Next.js 12.1 and Cosmic

Naira Gezhoyan — Tue, 26 Apr 2022 17:01:48 +0000

In this tutorial, I will show you how to build a fully mobile responsive restaurant website template using Next.js and Cosmic Headless CMS. The Figma template can be found on ui8.net.

Bonus features include deploying to Vercel and setting up automatic static content revalidation using Cosmic Webhooks. Let’s get started.

Tools we’ll be using

TL;DR

Check out the code
View the live demo
Install the App Template

Quick Introduction

Explore 4 new killer features of Next.js and use them to template

Let's install a new Next.js app that includes tooling and configurations. For this tutorial, you'll need Node.js 12.22.0 or a later version. Open the terminal, paste or type

npx create-next-app@latest nextjs-restaurant-website-cms
# or
yarn create next-app nextjs-restaurant-website-cms

Install dependencies from the app folder:

cd nextjs-restaurant-website-cms
npm i
# or
cd nextjs-restaurant-website-cms 
yarn

You can now start the app in the development mode with:

npm run dev
# or
yarn dev

Open http://localhost:3000/ in your browser to see the ascetic home page.

1. Rust compiler

SWC is 20x faster than Babel on a single thread and 70x faster on four cores.

2. Middleware

// pages/_middleware.js

import { NextResponse } from 'next/server';

export async function middleware( request ) {
  // create an instance of the class to access the public methods.
  //This uses next(),

  let response = NextResponse.next();

  const country = request.geo.country || 'US';
  const city = request.geo.city || 'San Francisco';
  const region = request.geo.region || 'CA';

  // get the cookies from the request
  let cookieFromRequest = request.cookies['location-cookie'];

  if(!cookieFromRequest) {
    // set the `cookie`
    response.cookie('location-cookie', `${country|city|region}`);
  }

  return response;
}

3. On-demand Incremental Static Regeneration ISR

// pages/api/revalidate.js

export default async function handler(req, res) {
  try {
    await res.unstable_revalidate('/menu/' + req.body.data.slug)
    return res.json({ revalidated: true })
  } catch (err) {
    // If there was an error, Next.js will continue
    // to show the last successfully generated page
    return res.status(500).send('Error revalidating')
  }
}

4. Faster Image Optimization and Smaller images using AVIF

This feature is opt-in and can be enabled by modifying the image. format property in the next.config.js file:

// next.config.js

const nextConfig = {
  reactStrictMode: true,
  images: {
        formats: ['image/avif', 'image/webp'],
        domains: ['imgix.cosmicjs.com'],
    },
}

module.exports = nextConfig

Cosmic Features overview

Customizable API: Build out the schema, models, and controllers for API from the editor. Cosmic offers both a REST and GraphQL API for our convenience.
Globally fast and secure content management system and API toolkit.
Webhooks Call back anywhere you need, to get the functionality you want, out of the box with Cosmic API.
Imgix Integration is included which allows you to do powerful image processing for dynamic apps optimized for cross-platform experiences.

Cosmic integration

The first step making a free Cosmic account. Let's select the "Start from scratch" option.

Create Section Object Type and add section properties to define the "Metafields" in the "Content Model".

Now you could create an Object Type model for sections and you can fill content like this.

In a similar way, you can define modules and creates Object Type following the current data model, schema design

Singleton for a unique model,
Multiple reusable models.

Time to get values for the Next.js app

Install the Cosmic module to your Next.js app.

npm i cosmicjs
# or
yarn add cosmicjs

Then go to Cosmic Dashboard Your Bucket > Settings > API Access and find your Bucket slug and API read key.

Awesome! Add this Bucket slug and API read key into your Next.js app .env

//.env
COSMIC_BUCKET_SLUG=your_cosmic_slug
COSMIC_READ_KEY=your_cosmic_read_key

To use the template UI you need to clone it in GitHub. Open the terminal, paste or type this code to install all dependencies, and run it.

git clone https://github.com/cosmicjs/nextjs-restaurant-website-cms.git
cd nextjs-restaurant-website-cms

npm install
#or
yarn install

npm run dev
#or
yarn dev

Function getDataFromBucket request to the bucket that we create earlier in Cosmic Dashboard and get our created content from the Cosmic by the params type.

// src/lib/api.js

import Cosmic from 'cosmicjs';

const BUCKET_SLUG = process.env.COSMIC_BUCKET_SLUG
const READ_KEY = process.env.COSMIC_READ_KEY

const bucket = Cosmic().bucket({
  slug: BUCKET_SLUG,
  read_key: READ_KEY,
});

export async function getDataFromBucket(preview) {
  const params = {
    type: 'header',
    props: 'title,slug,metadata,created_at',
    sort: '-created_at',
    ...(preview && { status: 'all' }),
  }
  const data = await bucket.getObjects(params)
  return data.objects
}

Let's display our content, integrate it with our UI, and render some elements to the home page. For that, you need to add this to index.js.

// pages/index.js

import Head from 'next/head';
import Home from 'components/Home';
import Layout from 'components/Layout';
import Footer from 'components/Footer';
import AboutUs from 'components/AboutUs';
import SpacialMenu from 'components/Menu';
import Introduction from 'components/Introduction';
import VideoIntro from 'components/VideoIntro';
import Gallery from 'components/Gallery';
import Contacts from 'components/Contact';

import { getDataFromBucket } from 'lib/api';
import chooseByType from 'utils/chooseValueByType';

function Template({ data }) {
  return (
    <>
      <Head>
        <title>Next.js Restaurant CMS</title>
        <meta name="description" content="Create template using cosmic.js CMS" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Layout navbar={chooseByType(data, 'navigation')}>
        <Home info={chooseByType(data, 'header')}/>
        <AboutUs info={chooseByType(data, 'about')}/>
        <SpacialMenu info={[chooseByType(data, 'drink'), chooseByType(data, 'food')]}/>
        <Introduction info={chooseByType(data, 'history')}/>
        <Gallery info={[chooseByType(data, 'gallery'), chooseByType(data, 'food')]}/>
      </Layout>
      <Footer>
        <VideoIntro url={chooseByType(data, 'video')}/>
        <Contacts info={chooseByType(data, 'contact')}/>
      </Footer>
    </>
  )
}

export async function getStaticProps({ preview }) {
  const data = (await getDataFromBucket(preview)) || [];
  return {
    props: { data },
  }
}

export default Template;

The chooseByType function filters data by Object Type slug, which we created in the Cosmic Dashboard.

// src/utils/chooseValueByType.js

const chooseByType = (data, slugName) => {
  if( data && slugName ) {
    const chooseBySlug = data?.filter(content => Object.values(content).includes(slugName));
    return chooseBySlug ? chooseBySlug[0] : [];
  }
}

export default chooseByType;

Congrats you're almost there!

Making Menu Item Page

In Next.js you can create a dynamic route. For creating individual menu item page and dynamic route, consider the following page pages/menu/[slug].js:

// pages/menu/[slug].js

import Head from 'next/head';
import { useRouter } from 'next/router';

import Layout from 'components/Layout';
import Footer from 'components/Footer';
import Contacts from 'components/Contact';
import MenuIntro from 'components/MenuIntro';
import VideoIntro from 'components/VideoIntro';
import Gallery from 'components/Gallery';

import { getAllDataWithSlug,getDataFromBucket } from 'lib/api';
import chooseByType from 'utils/chooseValueByType';

function Menu({ data }) {
  const {
    query: {slug},
  } = useRouter();

  return (
    <>
      <Head>
        <title>Next.js Restaurant CMS</title>
        <meta name="description" content="Create template using cosmic.js CMS" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Layout navbar={chooseByType(data, 'navigation')}>
        <MenuIntro info={[chooseByType(data, 'food'), chooseByType(data, 'drink')]} slug={slug} />
        <Gallery info={[chooseByType(data, 'gallery'), chooseByType(data, 'food')]}/>
      </Layout>
      <Footer>
        <VideoIntro url={chooseByType(data, 'sushi')}/>
        <Contacts info={chooseByType(data, 'contact')}/>
      </Footer>
    </>
  )
}

export async function getStaticProps({ params, preview = null }) {
  const data = (await getDataFromBucket(preview)) || [];
  return {
    props: { data },
  }
}

export async function getStaticPaths() {
  const dataWithSlug = (await getAllDataWithSlug()) || [];

  return {
    paths: dataWithSlug.map((menu) => `/menu/${menu.slug}`),
    fallback: true,
  }
}

export default Menu;

This also makes it easier to update your site when content from your headless CMS is created or updated.

Time to test it out, edit your content in Cosmic Dashboard, and see the static content updated instantly!

Conclusion

Congrats! Now you have a dynamic, customizable, and fully integrated template with new Next.js and Cosmic features, you can customize it for other types of businesses and use it how you prefer.

Tips & Tricks that will make you a better React Developer

Naira Gezhoyan — Sun, 20 Feb 2022 20:21:54 +0000

Coding, as a profession, requires constant and continuous learning, problem-solving, and staying up-to-date on the various helpful tools that are available out there. Developers need to always be on the lookout for easy wins. I appreciate developers who share their knowledge and I want to share some tricks that help me in React projects development.

React only takes care of the view layer of an application, it doesn’t enforce any specific architecture (such as MVC or MVVM). This can make it difficult to keep your codebase organized as your React project grows. So, here are useful and time-saving tricks that you can use while developing.

Good architecture makes the system easy to understand, easy to develop, easy to maintain, and easy to deploy. The ultimate goal is to minimize the lifetime cost of the system and to maximize programmer productivity. - Robert C. Martin

Component Imports

Using absolute imports, you can alias folders like below:

import { MyComponent } from 'components/MyComponent';
import useFetchData from 'hooks/useFetchData';

To set up absolute imports in your application add/update your tsconfig.json file if you use Typescript and jsconfig.json if you use JavaScript, in the root directory of the project. Then you need to update the compiler option baseUrl in the file.

{
  "compilerOptions": {
    "baseUrl": "./src"
  },
  "include": ["src"]
}

Custom Hooks

If you want to become a better React programmer, the best thing you can do is take the time to fully understand hooks.

Need to perform side effects? useEffect is for your friend. Examples of side effects are : data fetching, setting up a subscription, and manually changing the DOM React components.
Need to keep track of state between renders, and rerender when that state changes? useState has your back. Need to store and update a value between renders, without rendering? Or need to look up the height or width of a DOM element? useRef is your friend.

Keeping state business logic separate from UI. Rather than writing the logic for placement of the state inside a component, better to follow the Don't Repeat Yourself (DRY) principles, write code once and extract it into a hook of its own and related logic can be tightly coupled in a custom hook.

Let's create a custom useFetch hook for API calls.

import { useEffect, useState } from "react";

const useFetch = (url, method='GET', body={}) => {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState([]);
  const [isError, setIsError] = useState(false);

  useEffect(() => {
    if (!url) {
      return;
    }

    let isMounted = true;
    setIsLoading(true);

    const fetchData = async () => {
      try {
        const response = await fetch(url, {
          headers: { 'Content-Type': 'application/json' }, 
          method,
          body: JSON.stringify(body), 
        });

        const data = await response.json();
        setData(data);
      } catch (error) {
        setIsError(error);
      } finally {
        setIsLoading(false);
      }
    };

   if(isMounted ){
    fetchData();
   };

// cleanup function
   return () => {
    isMounted = false;
   };

  }, [url, method, body]);

  return { isLoading, data, isError };
};

export default useFetch;

By the way, useEffect cleanup function triggers an early return or short-circuiting the state update and helps fix the React memory leak warning. Because Promises cannot be canceled, the solution is to prevent the fetchData function call, if the component has been unmounted and using lexical scoping, we can share isMounted variable between the callback function and the cleanup function.

Fetching data in component using useFetch custom Hook

const { isLoading, data, isError } = useFetch(
    "GET",
    "https://jsonplaceholder.typicode.com/posts"
  );

Single Responsibility of React Components

To make your code as reusable as possible, it’s important to make your components as reusable as possible. The motto is the reduction of the complexity of the components.

Components in React have two forms stateful or stateless. The best move, in this case, is that you can have one stateful component to load data and another stateless component that can help in displaying the data. The stateless component general rule is that they can just receive props (inputs) from the parent component and return u JSX elements. Such components become scalable and reusable and similar to the pure function in JavaScript.

Abstract away the purely presentational parts. We end up with two components, our List component, and our Item component.

import useFetch from 'hooks/useFetch';

const List = () => {
 const { isLoading, data, isError } =
useFetch("https://jsonplaceholder.typicode.com/posts");

return (
    <>
      {isLoading && <p>Loading...</p>}
       <ul>
        {data.length > 0 && data?.map((info) => (
          <Post key={info.id} {...{info}} />
        ))}
      </ul>
    </>
  );
};

const Post = ({ img, name, author }) => {
  return (
    <li>
      <img src={img} alt={name}/>
      <div className="name">{name}</div>
      <div className="author">{author}</div>
    </li>
  );
};

When to use Global vs Local State

For React state management you can choose many different solutions like a Redux, mobx, recoil, context API, etc. No hard and fast rule tells you when you should keep things in local versus global state.

Some rules for when to use global state

Do other unrelated components in the application need access to this data? (example: username, display it in the navbar and on the welcome screen).
Should the data be persisted as you move between pages?
Is the same data being used in multiple components?

If the answer is yes to any of these questions, you may want to use a global state. But don’t put the open state of your menu inside of the global state. Try to reason about needs to be shared across your application, and what can live inside of a local component.

A CMS enables you to add dynamic content to your React components in minutes

A modern content management system (CMS) enables content creators to manage content using a friendly dashboard while giving developers tools to deliver content to any website or app. The commonly used term, headless CMS, uses APIs (either RESTful or GraphQL) to allow developers to deliver content across various channels such as Websites, Android or IOS apps, etc. In this way, headless CMS gives teams of content creators and developers the tools each need to harness creativity quickly in a highly collaborative way. With this API-first method, a headless CMS is perfectly suited for adding dynamic content to your React application development workflow.

Try it out with Cosmic it's easy and fast.

Let's integrate this with our previous example using Cosmic CMS and SWR React Hook for Data Fetching. Run the following command in a terminal npm i cosmicjs swr. Now create a file titled index.js with the following code:

import React from 'react';
import useSWR from 'swr';
import Cosmic from 'cosmicjs';
import Post from 'components/Post';

const api = Cosmic();

// Set these values, found in Bucket > Settings after logging in at https://app.cosmicjs.com/login
const bucket = api.bucket({
  slug: 'YOUR_BUCKET_SLUG',
  read_key: 'YOUR_BUCKET_READ_KEY'
});

const fetchPosts = async () => {
  const data = await bucket.getObjects({
    query: {
      type: 'posts'
    },
    props: 'slug,title,metadata' 
  })
  return data
};

const List = () => {
 //For data fetching use SWR hook
  const { data, error } = useSWR('fetch-posts', fetchPosts);

  if (error) return <p>Failed to load</p>
  if (!data) return <p>Loading...</p>

  const posts = data.objects;

  return (
    <ul>
      {posts?.map(post => (
         <Post key={post.slug} {...{post}} />
      ))}
    </ul>
  )
};

In this article, we went over tips that will help you become a better react developer: Component imports, custom hooks, component reusability, state management and using a headless CMS, like Cosmic, will make the hand off to your content team members much easier. I add some usefule links:

for more information on how to use Cosmic in your React apps Sign up for Cosmic,
for more info on React: Using Hooks,
Making Sense of React Hooks, Sharing State Between Components

Thank you for reading, you can reach me out at Twitter and find me on LinkedIn. I'd love to hear your thoughts on how to improve as a React developer!

DEV Community: Naira Gezhoyan

Unlock the Power of Angular Reactive Forms

Core Concepts of Reactive Forms

Exploring the Building Blocks

1. Form Groups: The Foundation

2. Form Arrays: Managing Dynamic Inputs

3. Form Validation: Ensuring Input Quality

4. Leveraging Observables in Reactive Forms

Best Practices

Reactive Form Controls in Angular Templates

Conclusion

React 18 Suspense fetch data from a headless CMS

Integration Cosmic Headless CMS

Data fetching approaches

Fetch-on-render

Render-as-you-fetch

Suspense for Data Fetching

Wrap your fetching logic wrapPromise.js

Read the data in the component

The parent component

Conclusion

Search and filter data using React Hooks and a headless CMS

Install template demo content

Create the search / filter React app

Create the search / filter query

React Hooks

React Custom Hook useDebounce

Conclusion

Build an uNFT marketplace with Next.js, Cosmic and Stripe integration

Tools we’ll be using

TL;DR

First, we need to provide architecture and design

MVC stands for model-view-controller software design pattern

Setting up a project with Next.js

Managing API keys/secrets with Next.js

Next.js API routes

Cosmic features overview and integration

Getting started with Cosmic

User-generated content

Stripe overview and integration

Next steps

Conclusion

Build Restaurant Website with Next.js and Cosmic

Tools we’ll be using

TL;DR

Quick Introduction

Explore 4 new killer features of Next.js and use them to template

1. Rust compiler

2. Middleware

3. On-demand Incremental Static Regeneration ISR

4. Faster Image Optimization and Smaller images using AVIF

Cosmic Features overview

Cosmic integration

Time to get values for the Next.js app

Making Menu Item Page

Conclusion

Build a Production Ready Restaurant Website with Next.js 12.1 and Cosmic

Tools we’ll be using

TL;DR

Quick Introduction

Explore 4 new killer features of Next.js and use them to template

1. Rust compiler

2. Middleware

3. On-demand Incremental Static Regeneration ISR

4. Faster Image Optimization and Smaller images using AVIF

Cosmic Features overview

Cosmic integration

Time to get values for the Next.js app

Making Menu Item Page

Conclusion

Tips & Tricks that will make you a better React Developer

Component Imports

Custom Hooks

Single Responsibility of React Components

When to use Global vs Local State

A CMS enables you to add dynamic content to your React components in minutes

Wrap your fetching logic `wrapPromise.js`