DEV Community: Rifky Alfarez

Vue.js Fetch API | Search Vue.js | Sort Vue.js | Pagination Vue.js | Filter Vue.js

Rifky Alfarez — Tue, 24 Dec 2024 01:38:07 +0000

How to Fetch API and Implement Filtering, Sorting, and Pagination in Vue.js

Rifky Alfarez ・ Dec 24

How to Fetch API and Implement Filtering, Sorting, and Pagination in Vue.js

Rifky Alfarez — Tue, 24 Dec 2024 01:36:55 +0000

In this article, I want to share how you can fetch data from an API and implement useful features like filtering, sorting, and pagination in a Vue.js application. These features are especially handy when working on projects like product listings or content libraries where users need an easy way to navigate through data. I'll walk you through the process step by step, from fetching the data to adding interactive controls, so you can apply these techniques in your own projects. Let’s dive in!

Fetch Data

<template>
  <main class="min-h-screen bg-neutral-200 py-4">
    <section class="w-[1280px] mx-auto">
      <ul class="mt-1">
        <li v-for="product in products" :key="product.id">
          {{ product.id }}. {{ product.title }} - ${{ product.price }} -
          {{ product.category }}
        </li>
      </ul>
      <p v-if="!loading && products.length === 0">Nothing to see here</p>
      <p v-if="loading">Loading ...</p>
      <p v-if="error">{{ error }}</p>
    </section>
  </main>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

interface Product {
  id: number;
  title: string;
  price: number;
  description: string;
  category: string;
  image: string;
  rating: {
    rate: number;
    count: number;
  };
}

const BASE_URL = 'https://fakestoreapi.com/products';

const products = ref<Product[]>([]);
const loading = ref<boolean>(false);
const error = ref<string | null>(null);

const fetchProducts = async () => {
  loading.value = true;
  try {
    const response = await fetch(BASE_URL);
    if (!response.ok) {
      throw new Error(`HTTP error! status ${response.status}`);
    }
    products.value = await response.json();
  } catch (err) {
    error.value = err instanceof Error ? err.message : 'Unknown error occurred';
  } finally {
    loading.value = false;
  }
};

onMounted(() => fetchProducts());
</script>

onMounted:
In Vue.js, onMounted is one of the lifecycle hooks that is executed after a component has been mounted to the DOM. In simpler terms, the code inside onMounted runs once the component is fully ready and displayed on the screen.

In the example above, onMounted is used to call the fetchProducts function when the component loads. This function retrieves product data from an external API and stores it in the products variable. This ensures that the data is available when users view the page. It's especially useful for initializing data, such as fetching a list of products, articles, or any dynamic information required for the page.

v-for:
v-for is a directive in Vue.js used to dynamically render elements based on data from an array or object. In the example above, v-for is used to automatically generate a list of products based on the data fetched from the API.

Implement Filtering, Sorting, and Pagination

<template>
  <main class="min-h-screen bg-neutral-200 py-4">
    <section class="w-[1280px] mx-auto">
      <div class="flex gap-x-4 items-center">
        <input v-model="searchTerm" type="search" placeholder="search..." />
        <select v-model="category">
          <option value="" selected>Category:</option>
          <option value="men's clothing">Men's Clothing</option>
          <option value="women's clothing">Women's Clothing</option>
          <option value="jewelery">Jewelery</option>
          <option value="electronics">Electronics</option>
        </select>
        <select v-model="sortBy">
          <option value="" selected>Sort By:</option>
          <option value="title">Title</option>
          <option value="price">Price</option>
        </select>
        <select v-model="orderBy">
          <option value="" selected>Order by:</option>
          <option value="asc">Ascending</option>
          <option value="desc">Descending</option>
        </select>
        <select v-model="limit">
          <option value="" selected>Limit:</option>
          <option v-for="index in 20" :value="index">{{ index }}</option>
        </select>
      </div>
      <div class="flex gap-x-4 items-center mt-4">
        <button
          :disabled="page === 1"
          @click="page > 1 && page--"
          class="disabled:cursor-not-allowed"
        >
          Prev
        </button>
        <span>Page {{ page }} of {{ totalPage }}</span>
        <button
          :disabled="page === totalPage"
          @click="page < totalPage && page++"
          class="disabled:cursor-not-allowed"
        >
          Next
        </button>
      </div>
      <ul class="mt-1">
        <li v-for="product in limitedProducts" :key="product.id">
          {{ product.id }}. {{ product.title }} - ${{ product.price }} -
          {{ product.category }}
        </li>
      </ul>
      <p v-if="!loading && searchedProducts.length === 0">
        Nothing to see here
      </p>
      <p v-if="loading">Loading ...</p>
      <p v-if="error">{{ error }}</p>
    </section>
  </main>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';

interface Product {
  id: number;
  title: string;
  price: number;
  description: string;
  category: string;
  image: string;
  rating: {
    rate: number;
    count: number;
  };
}

const BASE_URL = 'https://fakestoreapi.com/products';

const products = ref<Product[]>([]);
const loading = ref<boolean>(false);
const error = ref<string | null>(null);
const orderBy = ref<string>('');
const category = ref<string>('');
const sortBy = ref<string>('');
const searchTerm = ref<string>('');
const limit = ref<string>('');
const page = ref<number>(1);

const totalPage = computed(() => {
  const itemsPerPage = limit.value ? Number(limit.value) : 10;
  return Math.ceil(searchedProducts.value.length / itemsPerPage);
});

const fetchProducts = async () => {
  loading.value = true;
  try {
    const response = await fetch(BASE_URL);
    if (!response.ok) {
      throw new Error(`HTTP error! status ${response.status}`);
    }
    products.value = await response.json();
  } catch (err) {
    error.value = err instanceof Error ? err.message : 'Unknown error occurred';
  } finally {
    loading.value = false;
  }
};

const orderByProducts = computed(() => {
  const sortedProducts = [...products.value];

  if (sortBy.value === 'title') {
    return orderBy.value === 'desc'
      ? sortedProducts.sort((a, b) => b.title.localeCompare(a.title))
      : sortedProducts.sort((a, b) => a.title.localeCompare(b.title));
  } else if (sortBy.value === 'price') {
    return orderBy.value === 'desc'
      ? sortedProducts.sort((a, b) => b.price - a.price)
      : sortedProducts.sort((a, b) => a.price - b.price);
  } else if (orderBy.value === 'desc') {
    return sortedProducts.sort((a, b) => b.id - a.id);
  }

  return sortedProducts;
});

const filteredProducts = computed(() => {
  if (category.value) {
    return orderByProducts.value.filter(
      (product) => product.category === category.value
    );
  }

  return orderByProducts.value;
});

const searchedProducts = computed(() => {
  if (searchTerm.value) {
    return filteredProducts.value.filter((product) =>
      product.title
        .toLocaleLowerCase()
        .includes(searchTerm.value.toLocaleLowerCase())
    );
  }

  return filteredProducts.value;
});

const limitedProducts = computed(() => {
  const itemsPerPage = limit.value ? Number(limit.value) : 10;
  return searchedProducts.value.slice(
    (page.value - 1) * itemsPerPage,
    page.value * itemsPerPage
  );
});

onMounted(() => fetchProducts());
</script>

v-model:
The v-model directive in Vue enables two-way data binding between form inputs and their associated reactive variables. This means that any change in the input field immediately updates the linked variable, and changes to the variable programmatically reflect in the input field. For instance, in this implementation, v-model is used with the searchTerm, category, sortBy, orderBy, and limit inputs, ensuring that the user’s selections or entries dynamically update the application state.

computed:
The computed properties are used to perform reactive calculations based on the state of the application. They allow for efficient updates as they are only re-evaluated when their dependencies change. In this implementation, computed properties like orderByProducts, filteredProducts, searchedProducts, and limitedProducts enable seamless filtering, sorting, and pagination of the product list. Each computed property builds on the result of the previous one, ensuring that all operations are applied consistently and dynamically as the state changes.

Filtering:

const filteredProducts = computed(() => {
  if (category.value) {
    return orderByProducts.value.filter(
      (product) => product.category === category.value
    );
  }
  return orderByProducts.value;
});

The filtering process checks if a category is selected. If it is, only products belonging to that category are included.

Sorting:

const orderByProducts = computed(() => {
  const sortedProducts = [...products.value];
  if (sortBy.value === 'title') {
    return orderBy.value === 'desc'
      ? sortedProducts.sort((a, b) => b.title.localeCompare(a.title))
      : sortedProducts.sort((a, b) => a.title.localeCompare(b.title));
  } else if (sortBy.value === 'price') {
    return orderBy.value === 'desc'
      ? sortedProducts.sort((a, b) => b.price - a.price)
      : sortedProducts.sort((a, b) => a.price - b.price);
  }
  return sortedProducts;
});

The sorting logic uses JavaScript's sort method:

For title, it uses localeCompare to handle string comparison.
For price, it performs numerical sorting.

Pagination:

const limitedProducts = computed(() => {
  const itemsPerPage = limit.value ? Number(limit.value) : 10;
  return searchedProducts.value.slice(
    (page.value - 1) * itemsPerPage,
    page.value * itemsPerPage
  );
});

The slice method determines which products are shown based on the current page and selected limit. Example: If limit = 5 and page = 2, it displays products with indices 5–9.

Conclusion

Thank you for taking the time to read this article. I hope the explanation provided a clear understanding of how filtering, sorting, and pagination can be implemented effectively in Vue.js. By combining the power of v-model for data binding and computed properties for reactive updates, this approach ensures an efficient and dynamic user experience.

If you have any suggestions, questions, or feedback, feel free to share them! I’m always open to discussions and happy to help.
GitHub: https://github.com/rfkyalf/vue-api-handling.git

I’m always excited to connect and collaborate on web development projects. You can learn more about my work and past projects by visiting my portfolio website: https://www.rifkyalfarez.my.id.

React.js API Handling: Managing Search, Pagination, Sort, and Filter Without Libraries

Rifky Alfarez — Tue, 17 Dec 2024 03:35:30 +0000

React.js API Handling

Rifky Alfarez ・ Dec 17

#webdev #react #api #typescript

React.js API Handling

Rifky Alfarez — Tue, 17 Dec 2024 03:35:03 +0000

In this article, I’d like to share my experience handling API requests in React.js without using any external libraries. It includes working with HTTP methods like GET, POST, PATCH, and DELETE while implementing features such as search, pagination, sorting, and filtering. This approach helped me better understand the core concepts of React.js and API handling. I hope my insights can be useful for anyone exploring similar implementations.

I won’t be giving any explanations—just the code itself. So, let the code speak for itself!

App.tsx

import { useEffect, useState } from 'react';
import AddProduct from './components/AddProduct';
import DeleteProduct from './components/DeleteProduct';
import EditProduct from './components/EditProduct';

interface Product {
  id: number;
  title: string;
  description: string;
  category: string;
  price: number;
  image: string;
}

export const BASE_URL = 'https://fakestoreapi.com/products';

export default function App() {
  const [products, setProducts] = useState<Product[]>([]);
  const [query, setQuery] = useState<string>('');
  const [category, setCategory] = useState<string>('');
  const [sortBy, setSortBy] = useState<string>('');
  const [orderBy, setOrderBy] = useState<string>('');
  const [limit, setLimit] = useState<number>(10);
  const [currentPage, setCurrentPage] = useState<number>(1);

  const totalPages = Math.ceil(products.length / limit);

  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    const term = e.target.value;
    if (!term.startsWith(' ')) setQuery(term);
  };

  const handlePrev = () => {
    if (currentPage > 1) setCurrentPage(currentPage - 1);
  };

  const handleNext = () => {
    if (currentPage < totalPages) setCurrentPage(currentPage + 1);
  };

  useEffect(() => {
    const fetchProducts = async () => {
      const response = await fetch(BASE_URL);
      const result = (await response.json()) as Product[];
      const filteredProducts = result
        .filter((product) =>
          product.title.toLocaleLowerCase().includes(query.toLocaleLowerCase())
        )
        .filter((product) => (category ? product.category === category : true))
        .sort((a, b) => {
          if (sortBy === 'title') {
            return orderBy === 'des'
              ? b.title.localeCompare(a.title)
              : a.title.localeCompare(b.title);
          }
          if (sortBy === 'price') {
            return orderBy === 'des' ? b.price - a.price : a.price - b.price;
          }
          return orderBy === 'des' ? b.id - a.id : a.id - b.id;
        });

      setProducts(filteredProducts);
      setCurrentPage(1);
    };

    fetchProducts();
  }, [category, query, sortBy, orderBy]);

  const paginatedProducts = products.slice(
    (currentPage - 1) * limit,
    currentPage * limit
  );

  return (
    <div className="p-4">
      <div className="flex items-center gap-x-4">
        <input
          type="search"
          className="border border-neutral-700"
          placeholder="Search..."
          onChange={handleSearch}
          value={query}
        />
        <select
          defaultValue=""
          onChange={(e) => setCategory(e.target.value)}
          className="border border-neutral-700"
        >
          <option value="">Select Category:</option>
          <option value="jewelery">Jewelery</option>
          <option value="electronics">Electronics</option>
          <option value="men's clothing">Men's clothing</option>
          <option value="women's clothing">Women's clothing</option>
        </select>
        <select
          defaultValue=""
          onChange={(e) => setSortBy(e.target.value)}
          className="border border-neutral-700"
        >
          <option value="">Sort By:</option>
          <option value="title">Title</option>
          <option value="price">Price</option>
        </select>
        <select
          defaultValue=""
          onChange={(e) => setOrderBy(e.target.value)}
          className="border border-neutral-700"
        >
          <option value="">Order By:</option>
          <option value="asc">Ascending</option>
          <option value="des">Descending</option>
        </select>
        <select
          className="border border-neutral-700"
          defaultValue=""
          onChange={(e) => setLimit(Number(e.target.value))}
        >
          <option value={10} defaultValue={10}>
            Limit:
          </option>
          {Array.from({ length: 20 }).map((_, i) => (
            <option key={i} value={i + 1}>
              {i + 1}
            </option>
          ))}
        </select>
      </div>

      <div className="flex items-center gap-x-2 mt-4">
        <button
          onClick={handlePrev}
          disabled={currentPage === 1}
          className="border border-neutral-700 disabled:opacity-50"
        >
          Prev
        </button>
        <span>
          page {currentPage} of {totalPages || 1}
        </span>
        <button
          onClick={handleNext}
          disabled={currentPage === totalPages}
          className="border border-neutral-700 disabled:opacity-50"
        >
          Next
        </button>
      </div>

      <div className="grid grid-cols-4 gap-4 mt-4">
        {paginatedProducts.map((product) => (
          <div key={product.id} className="border border-neutral-700 p-4">
            <p>{product.title}</p>
            <p>{product.category}</p>
            <p>${product.price}</p>
            <DeleteProduct id={product.id} />
            <span>&nbsp;|&nbsp;</span>
            <EditProduct
              id={product.id}
              prevTitle={product.title}
              prevDescription={product.description}
              prevPrice={product.price}
              prevImage={product.image}
              prevCategory={product.category}
            />
          </div>
        ))}
      </div>
      <AddProduct />
    </div>
  );
}

AddProduct.tsx

import { useState } from 'react';
import { BASE_URL } from '../App';

export default function AddProduct() {
  const [title, setTitle] = useState<string>('');
  const [price, setPrice] = useState<number | ''>('');
  const [description, setDescription] = useState<string>('');
  const [image, setImage] = useState<string>('');
  const [category, setCategory] = useState<string>('jewelery');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!title || !price || !description || !image || !category) {
      alert('Please fill out all fields');
      return;
    }

    try {
      const response = await fetch(`${BASE_URL}`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          title,
          price,
          description,
          image,
          category,
        }),
      });

      const result = await response.json();
      console.log('Product created:', result);

      setTitle('');
      setPrice('');
      setDescription('');
      setImage('');
      setCategory('jewelery');
      alert('Product added successfully!');
    } catch (error) {
      console.log('Error creating product', error);
      alert('Failed create product');
    }
  };

  return (
    <form
      onSubmit={handleSubmit}
      className="flex flex-col gap-y-2 w-[300px] mt-4"
    >
      <input
        type="text"
        placeholder="Title"
        className="border border-neutral-700"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
      />
      <input
        type="number"
        placeholder="Price"
        className="border border-neutral-700"
        value={price}
        onChange={(e) => setPrice(Number(e.target.value))}
      />
      <textarea
        placeholder="Description"
        className="border border-neutral-700"
        value={description}
        onChange={(e) => setDescription(e.target.value)}
      />
      <input
        type="url"
        placeholder="Image"
        className="border border-neutral-700"
        value={image}
        onChange={(e) => setImage(e.target.value)}
      />
      <select
        className="border border-neutral-700"
        onChange={(e) => setCategory(e.target.value)}
        value={category}
      >
        <option value="jewelery">Jewelery</option>
        <option value="electronics">Electronics</option>
        <option value="men's clothing">Men's clothing</option>
        <option value="women's clothing">Women's clothing</option>
      </select>
      <button type="submit" className="bg-neutral-800 text-white">
        Create
      </button>
    </form>
  );
}

DeleteProduct.tsx

import { BASE_URL } from '../App';

export default function DeleteProduct({ id }: { id: number }) {
  const handleDelete = async () => {
    try {
      const response = await fetch(`${BASE_URL}/${id}`, {
        method: 'DELETE',
      });

      const result = await response.json();

      console.log('Product Deleted Succesfully', result);
      alert('Product has been delete');
    } catch (error) {
      console.log('Failed Delete Product', error);
      alert('Failed Delete Product');
    }
  };
  return <button onClick={handleDelete}>Delete</button>;
}

EditProduct.tsx

import { useState } from 'react';
import { BASE_URL } from '../App';

export default function EditProduct({
  id,
  prevTitle,
  prevPrice,
  prevDescription,
  prevImage,
  prevCategory,
}: {
  id: number;
  prevTitle: string;
  prevPrice: number;
  prevDescription: string;
  prevImage: string;
  prevCategory: string;
}) {
  const [title, setTitle] = useState<string>(prevTitle);
  const [price, setPrice] = useState<number | ''>(prevPrice);
  const [description, setDescription] = useState<string>(prevDescription);
  const [image, setImage] = useState<string>(prevImage);
  const [category, setCategory] = useState<string>(prevCategory);
  const [open, setOpen] = useState<boolean>(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!title || !price || !description || !image || !category) {
      alert('Please fill out all fields');
      return;
    }

    try {
      const response = await fetch(`${BASE_URL}/${id}`, {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          title,
          price,
          description,
          image,
          category,
        }),
      });

      const result = await response.json();
      console.log('Product edited:', result);

      alert('Product edited successfully!');
    } catch (error) {
      console.log('Error editing product', error);
      alert('Failed edit product');
    }
  };

  return (
    <>
      <button
        onClick={() => {
          setOpen(!open);
        }}
      >
        Edit
      </button>
      <form
        onSubmit={handleSubmit}
        className={`flex flex-col gap-y-2 w-[300px] mt-4 ${
          open ? '' : 'hidden'
        }`}
      >
        <input
          type="text"
          placeholder="Title"
          className="border border-neutral-700"
          value={title}
          defaultValue={title}
          onChange={(e) => setTitle(e.target.value)}
        />
        <input
          type="number"
          placeholder="Price"
          className="border border-neutral-700"
          value={price}
          defaultValue={price}
          onChange={(e) => setPrice(Number(e.target.value))}
        />
        <textarea
          placeholder="Description"
          className="border border-neutral-700"
          defaultValue={description}
          value={description}
          onChange={(e) => setDescription(e.target.value)}
        />
        <input
          type="url"
          placeholder="Image"
          className="border border-neutral-700"
          defaultValue={image}
          value={image}
          onChange={(e) => setImage(e.target.value)}
        />
        <select
          className="border border-neutral-700"
          onChange={(e) => setCategory(e.target.value)}
          value={category}
          defaultValue={category}
        >
          <option value="jewelery">Jewelery</option>
          <option value="electronics">Electronics</option>
          <option value="men's clothing">Men's clothing</option>
          <option value="women's clothing">Women's clothing</option>
        </select>
        <button type="submit" className="bg-neutral-800 text-white">
          Edit
        </button>
      </form>
    </>
  );
}

Conclusion

Thank you for taking the time to check out this article. I hope the code examples provided some useful insights into handling APIs in React.js without external libraries. If you’re interested in exploring the complete project, feel free to visit the code repository: https://github.com/rfkyalf/reactjs-api-handling.

If you have any suggestions or questions, feel free to share them in the comments section. I’m always open to feedback and discussions!

I’m always excited to connect and collaborate on web development projects. You can learn more about my work and past projects by visiting my portfolio website: https://www.rifkyalfarez.my.id.

Redux Toolkit - createAsyncThunk()

Rifky Alfarez — Sun, 15 Dec 2024 01:06:59 +0000

createAsyncThunk() is a function in the Redux Toolkit that is used to handle async operations such as API calls. This function automatically handles three main phases:

Pending: When the API request is initiated.
Fulfilled: When the request succeeds and data is received.
Rejected: When the request fails.

This article is a continuation of the previous article which you can read here.

Create postSlice

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import axios from 'axios';

interface Post {
  id: number;
  title: string;
  body: string;
}

interface PostState {
  posts: Post[];
  loading: boolean;
  error: string | null;
}

const initialState: PostState = {
  posts: [],
  loading: false,
  error: null,
};

// Create a thunk to fetch data
export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const response = await axios.get(
    'https://jsonplaceholder.typicode.com/posts'
  );

  return response.data;
});

// Create slice
const postSlice = createSlice({
  name: 'posts',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchPosts.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.loading = false;
        state.posts = action.payload;
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message || 'Failed to fetch posts';
      });
  },
});

export default postSlice.reducer;

posts/fetchPosts

'posts/fetchPosts' is the type for the action generated by createAsyncThunk.

General Format: '<sliceName>/<actionName>'

Why use this format?

To avoid action name conflicts in large applications.
This name is used by Redux DevTools for debugging.

Difference between reducers and extraReducers

reducer	extraReducer
To make a regular reducer.	To handle external actions such as createAsyncThunk.
Can create actions automatically.	Does not create actions automatically.
Action must be defined in the slice.	Action comes from outside the slice.

What is builder and addCase

builder is a special API of Redux Toolkit used in extraReducers to add action handlers in an organized manner. The main method is addCase, which is used to handle a specific action by specifying the action type and corresponding reducer function.

Update store.ts

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './slice/counterSlice';
import storage from 'redux-persist/lib/storage';
import { persistReducer, persistStore } from 'redux-persist';
import postsReducer from './slice/postSlice';

const persistConfig = {
  key: 'root',
  storage,
};

const persistedCounterReducer = persistReducer(persistConfig, counterReducer);

export const store = configureStore({
  reducer: {
    counter: persistedCounterReducer,
    posts: postsReducer,
  },
});

export const persistor = persistStore(store);
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Use in component

import { useDispatch, useSelector } from 'react-redux';
import { AppDispatch, RootState } from './state/store';
import {
  decrement,
  increment,
  incrementByAmount,
} from './state/slice/counterSlice';
import { useEffect } from 'react';
import { fetchPosts } from './state/slice/postSlice';

export default function App() {
  const count = useSelector((state: RootState) => state.counter.value);
  const { posts, error, loading } = useSelector(
    (state: RootState) => state.posts
  );
  const dispatch: AppDispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  return (
    <div className="min-h-screen w-full flex flex-col items-center justify-center gap-4 p-4">
      <div className="flex items-center gap-x-4">
        <button
          onClick={() => dispatch(decrement())}
          disabled={count === 0}
          className="bg-neutral-800 text-neutral-100 text-base px-2 py-1 rounded-md"
        >
          Decrement
        </button>
        <span className="text-neutral-900 text-base border border-neutral-800 rounded-md px-2 py-1">
          {count}
        </span>
        <button
          onClick={() => dispatch(increment())}
          className="bg-neutral-800 text-neutral-100 text-base px-2 py-1 rounded-md"
        >
          Increment
        </button>
        <button
          onClick={() => dispatch(incrementByAmount(10))}
          className="bg-neutral-800 text-neutral-100 text-base px-2 py-1 rounded-md"
        >
          Increment by Amount
        </button>
      </div>
      <div>
        {loading ? (
          <p>Loading...</p>
        ) : error ? (
          <p>Error: {error}</p>
        ) : (
          <ul className="grid grid-cols-4 gap-4">
            {posts.map((post) => {
              return (
                <li key={post.id} className="flex flex-col gap-y-1">
                  <h3 className="text-neutral-800 font-medium text-base">
                    {post.title.length > 20
                      ? post.title.slice(0, 20) + '...'
                      : post.title}
                  </h3>
                  <p className="text-neutral-700 text-sm">
                    {post.body.length > 150 ? post.body + '...' : post.body}
                  </p>
                </li>
              );
            })}
          </ul>
        )}
      </div>
    </div>
  );
}

Result

If you get this error, update store.ts and add middleware.

Add middleware

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './slice/counterSlice';
import storage from 'redux-persist/lib/storage';
import { persistReducer, persistStore } from 'redux-persist';
import postsReducer from './slice/postSlice';

const persistConfig = {
  key: 'root',
  storage,
};

const persistedCounterReducer = persistReducer(persistConfig, counterReducer);

export const store = configureStore({
  reducer: {
    counter: persistedCounterReducer,
    posts: postsReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: ['persist/PERSIST'],
      },
    }),
});

export const persistor = persistStore(store);
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Conclusion

By using createAsyncThunk() in Redux Toolkit, managing asynchronous operations like API calls becomes easier and more organized. This approach simplifies data fetching while ensuring a clean and scalable Redux state management structure.

I hope this guide helps you better understand Redux Toolkit, especially its async handling capabilities. If you have any questions or feedback, feel free to leave a comment!

GitHub Repo: https://github.com/rfkyalf/redux-toolkit-learn

Also, if you’re interested, feel free to visit my Portfolio Website www.rifkyalfarez.my.id to explore more of my projects. Thank you for reading.

Redux Toolkit Tutorial || React Redux || TypeScript

Rifky Alfarez — Sat, 14 Dec 2024 11:55:07 +0000

Learn Redux Toolkit - React (TypeScript)

Rifky Alfarez ・ Dec 14

#react #webdev #redux #typescript

Learn Redux Toolkit - React (TypeScript)

Rifky Alfarez — Sat, 14 Dec 2024 11:54:23 +0000

What is Redux and Redux Toolkit

Redux is a state management library that helps manage state in React applications. Redux Toolkit is the official library for managing global state in React apps in a simpler and more structured way than regular Redux.

Redux Key Concepts

Store: Where the application state is stored.
Action: An object that describes what you want to do. Usually has a type and payload.
Reducer: A function that determines how the state is changed based on the action received.
Dispatch: The method to send the action to the store.
Selector: The function to retrieve data from the store.

Redux Toolkit (RTK) Simplification

RTK makes Redux setup easy with features like:

configureStore(): Creates a store with default settings.
createSlice(): Combines action and reducer in one place.
createAsyncThunk(): Manages async data like an API call.

Set Up Project

Install react with vite

npm create vite@latest

Install react redux and redux tool kit

npm install @reduxjs/toolkit react-redux

Project Structure

Basic Steps

Setup store

// store.ts

import { configureStore } from '@reduxjs/toolkit';

export const store = configureStore({
  reducer: {},
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Integration to app

// main.tsx

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import App from './App.tsx';
import './index.css';
import { store } from './state/store.ts';

const root = createRoot(document.getElementById('root')!);

root.render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>
);

Create slice

// counterSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface CounterState {
  value: number;
}

const initialState: CounterState = {
  value: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

Update store.ts

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

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Use redux in components

// App.tsx

import { useDispatch, useSelector } from 'react-redux';
import { AppDispatch, RootState } from './state/store';
import {
  decrement,
  increment,
  incrementByAmount,
} from './state/slice/counterSlice';

export default function App() {
  const count = useSelector((state: RootState) => state.counter.value);
  const dispatch: AppDispatch = useDispatch();

  return (
    <div className="min-h-screen w-full flex items-center justify-center gap-x-4">
      <button
        onClick={() => dispatch(decrement())}
        disabled={count === 0}
        className="bg-neutral-800 text-neutral-100 text-base px-2 py-1 rounded-md"
      >
        Decrement
      </button>
      <span className="text-neutral-900 text-base border border-neutral-800 rounded-md px-2 py-1">
        {count}
      </span>
      <button
        onClick={() => dispatch(increment())}
        className="bg-neutral-800 text-neutral-100 text-base px-2 py-1 rounded-md"
      >
        Increment
      </button>
      <button
        onClick={() => dispatch(incrementByAmount(10))}
        className="bg-neutral-800 text-neutral-100 text-base px-2 py-1 rounded-md"
      >
        Increment by Amount
      </button>
    </div>
  );
}

Implement Redux Persist

Persist in Redux is used to save application state to local storage (localStorage or sessionStorage), so that data is not lost when the user refreshes the page. The Redux Toolkit supports this with the help of the redux-persist library.

Install redux persist

npm install redux-persist

Update store.ts

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './slice/counterSlice';
import storage from 'redux-persist/lib/storage';
import { persistReducer, persistStore } from 'redux-persist';

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, counterReducer);

export const store = configureStore({
  reducer: {
    counter: persistedReducer,
  },
});

export const persistor = persistStore(store);
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Update main.tsx

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.tsx';
import { Provider } from 'react-redux';
import { persistor, store } from './state/store.ts';
import { PersistGate } from 'redux-persist/integration/react';

const root = createRoot(document.getElementById('root')!);

root.render(
  <StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </StrictMode>
);

Final Output

Conclusion

I hope this guide helps you understand how to set up and use Redux Toolkit with TypeScript and implement Redux Persist in your React project. Thank you for following along!

Github repository: https://github.com/rfkyalf/redux-toolkit-learn

If you found this helpful, feel free to check out my portfolio for more exciting projects www.rifkyalfarez.my.id

References:
https://redux.js.org/introduction/getting-started
https://redux-toolkit.js.org/introduction/getting-started

Create Chart in React Using Chart.js || Chart JS Tutorial React

Rifky Alfarez — Fri, 13 Dec 2024 00:09:28 +0000

Data Visualisation in React Using Chart.js

Rifky Alfarez ・ Dec 13

#react #webdev #chartjs

Data Visualisation in React Using Chart.js

Rifky Alfarez — Fri, 13 Dec 2024 00:08:38 +0000

Creating interactive and visually appealing charts is an essential skill for developers working on modern web applications. Chart.js, a popular JavaScript library for data visualization, provides a simple yet powerful way to create various types of charts, such as bar, line, pie, and more. When combined with React, a widely-used JavaScript library for building user interfaces, it becomes an efficient tool for crafting dynamic and responsive visualizations. In this article, we’ll explore how to integrate Chart.js into a React project and create stunning charts step by step.

Install Dependencies

Install react using vite

npm create vite@latest

at the prompt in the terminal enter the project name, then select react, and adjust whether to use javascript or typescript according to your preference.

Install chart.js and react chart js 2

npm i chart.js react-chartjs-2

The react-chartjs-2 library acts as a React wrapper for the Chart.js library. It simplifies the process of integrating Chart.js into React applications by providing pre-built React components for various types of charts (e.g., Line, Bar, Pie).

Folder Structure

Delete unnecessary files and folders and create a components folder.

Create Chart Components

Inside the components folder, create a file to create the chart.

Bar Chart

Import the required libraries At this stage you can use 2 ways, lazy way and tree-shakable way.

Lazy way

import 'chart.js/auto';
import { Chart } from 'react-chartjs-2';

Tree-shakable way

import { Chart } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

Both approaches to integrating Chart.js with React (Lazy way and Tree-shakable way) have their own advantages and trade-offs.

The Lazy way, which uses import 'chart.js/auto', is quick and simple to implement. It automatically registers all necessary Chart.js components, making it an excellent choice for small projects or quick prototypes. However, this approach can result in larger bundle sizes because it imports and registers all Chart.js components, even those you may not use in your application.

On the other hand, the Tree-shakable way provides better optimization by allowing you to import and register only the Chart.js components you need. This leads to smaller bundle sizes, improving application performance, especially in larger or production-grade projects. However, it requires more setup and manual management of registered components, which might be more complex or tedious for beginners or simple use cases.

In conclusion, the Lazy way is ideal for simplicity and speed in development, while the Tree-shakable way is preferred for production environments where performance and bundle size are critical.

But in this article we will use the lazy way for simplicity.

Create Chart

import 'chart.js/auto';
import { Chart } from 'react-chartjs-2';

export default function BarChart() {
  const options = {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Steps taken per day',
      },
    },
  };

  const data = {
    labels: [
      'Sunday',
      'Monday',
      'Tuesday',
      'Wednesday',
      'Thursday',
      'Friday',
      'Saturday',
    ],
    datasets: [
      {
        label: 'John',
        data: [10200, 8212, 9435, 10032, 8756, 10324, 9021],
        backgroundColor: '#ef4444',
      },
      {
        label: 'Jane',
        data: [8010, 9432, 9401, 8790, 10431, 9110, 8833],
        backgroundColor: '#3b82f6',
      },
    ],
  };

  return (
    <div>
      <Chart type="bar" data={data} options={options} />
    </div>
  );
}

The Chart component in react-chartjs-2 requires three main properties: type, data, and options.

type: Specifies the type of chart to render, such as bar, line, pie, and more. This determines the overall appearance and structure of the chart.

data: Contains the labels and datasets that define what the chart displays. For example, in a bar chart, data includes the categories on the x-axis and the values for each dataset.

options: Configures additional settings for the chart, such as responsiveness, plugins (e.g., title and tooltip), and layout adjustments. This property allows you to customize the chart's behavior and appearance.

These three properties work together to create a fully functional and interactive chart in React.

Doughnut Chart

import 'chart.js/auto';
import { Chart } from 'react-chartjs-2';

export default function DoughnutChart() {
  const options = {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Gender of students in a class',
      },
    },
  };

  const data = {
    labels: ['Man', 'Woman', 'Other'],
    datasets: [
      {
        label: 'Total',
        data: [45, 50, 5],
        backgroundColor: ['#ef4444', '#3b82f6', '#22c55e'],
      },
    ],
  };

  return (
    <div className="h-[400px] flex items-center justify-center">
      <Chart type="doughnut" data={data} options={options} />
    </div>
  );
}

Line Chart

import 'chart.js/auto';
import { Chart } from 'react-chartjs-2';

export default function LineChart() {
  const options = {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Steps taken per day',
      },
    },
  };

  const data = {
    labels: [
      'Sunday',
      'Monday',
      'Tuesday',
      'Wednesday',
      'Thursday',
      'Friday',
      'Saturday',
    ],
    datasets: [
      {
        label: 'John',
        data: [10200, 8212, 9435, 10032, 8756, 10324, 9021],
        fill: true,
        backgroundColor: '#ef444450',
        borderColor: '#ef4444',
        tension: 0.5,
      },
      {
        label: 'Jane',
        data: [8010, 9432, 9401, 8790, 10431, 9110, 8833],
        fill: true,
        backgroundColor: '#3b82f650',
        borderColor: '#3b82f6',
        tension: 0.5,
      },
    ],
  };

  return (
    <div>
      <Chart type="line" data={data} options={options} />
    </div>
  );
}

Pie Chart

import 'chart.js/auto';
import { Chart } from 'react-chartjs-2';

export default function PieChart() {
  const options = {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Gender of students in a class',
      },
    },
  };

  const data = {
    labels: ['Man', 'Woman', 'Other'],
    datasets: [
      {
        label: 'Total',
        data: [45, 50, 5],
        backgroundColor: ['#ef4444', '#3b82f6', '#22c55e'],
      },
    ],
  };

  return (
    <div className="h-[400px] flex items-center justify-center">
      <Chart type="pie" data={data} options={options} />
    </div>
  );
}

Refactoring

You can also move the data into a new file and display the data using mapping.

//data.ts

export const stepsData = [
  {
    name: 'John',
    steps: [
      {
        day: 'Sunday',
        value: 10200,
      },
      {
        day: 'Monday',
        value: 8212,
      },
      {
        day: 'Tuesday',
        value: 9435,
      },
      {
        day: 'Wednesday',
        value: 10032,
      },
      {
        day: 'Thursday',
        value: 8756,
      },
      {
        day: 'Friday',
        value: 10324,
      },
      {
        day: 'Saturday',
        value: 9021,
      },
    ],
  },
  {
    name: 'Jane',
    steps: [
      {
        day: 'Sunday',
        value: 8010,
      },
      {
        day: 'Monday',
        value: 9432,
      },
      {
        day: 'Tuesday',
        value: 9401,
      },
      {
        day: 'Wednesday',
        value: 8790,
      },
      {
        day: 'Thursday',
        value: 10431,
      },
      {
        day: 'Friday',
        value: 9110,
      },
      {
        day: 'Saturday',
        value: 8833,
      },
    ],
  },
];

import 'chart.js/auto';
import { Chart } from 'react-chartjs-2';
import { stepsData } from '../utils/data';

export default function LineChart() {
  const options = {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Steps taken per day',
      },
    },
  };

  const labels = stepsData[0]?.steps.map((step) => step.day);

  const datasets = stepsData.map((person) => ({
    label: person.name,
    data: person.steps.map((step) => step.value),
    fill: true,
    tension: 0.5,
  }));

  const data = {
    labels,
    datasets,
  };

  return (
    <div>
      <Chart type="line" data={data} options={options} />
    </div>
  );
}

Conclusion

In this article, we explored how to integrate Chart.js with React to create visually engaging and interactive charts, including Bar, Doughnut, Line, and Pie charts. I hope this guide has helped you get started with data visualization in React. For further exploration and to access the full code, feel free to check out the project repository at the link below.

If you’d like to see more of my work or learn more about me, visit my portfolio at www.rifkyalfarez.my.id.

Thank you for reading, and happy coding!

GitHub Repository Link: https://github.com/rfkyalf/react-chartjs

References:
https://www.chartjs.org/docs/latest/
https://react-chartjs-2-two.vercel.app/

Create Cart Using Zustand

Rifky Alfarez — Mon, 02 Dec 2024 02:07:43 +0000

Cart Feature in ReactJS Using Zustand

Rifky Alfarez ・ Dec 2

#react #webdev #zustand #typescript

Cart Feature in ReactJS Using Zustand

Rifky Alfarez — Mon, 02 Dec 2024 02:06:53 +0000

In this article, I want to share my approach to building a shopping cart feature in ReactJS using Zustand. But first, what is Zustand, and why did I choose it over Redux? Zustand is a lightweight state management library that provides a simple and intuitive API for managing state in React applications. Unlike Redux, which can often feel complex with its boilerplate-heavy setup, Zustand is much easier to use and allows you to focus more on building features rather than configuring state management. Its minimalistic approach makes it an excellent choice for implementing features like a shopping cart, without the overhead that comes with more complex libraries.

Requirements

react v18.3.1
zustand v5.0.1
axios v1.7.8
tanstack/react-query v5.62.0

Additionally, ensure you’re familiar with fetching and displaying data using Axios and React Query. If you’re not sure how to do this, feel free to check out my article here.

Project Setup

Install react.js and required packages. Optionally, you can also integrate Tailwind CSS for styling.

npm create vite@latest

npm i axios zustand @tanstack/react-query

Create some files and make your folder structure look like this

Fetch and Display Data

// src/api/fakeStoreApi.ts

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://fakestoreapi.com',
});

export const getAllProducts = async () => {
  try {
    const response = await axiosInstance.get('/products');
    return response.data;
  } catch (error) {
    console.error('Error fetching products:', error);
    return null;
  }
};

// src/App.tsx

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import ProductList from './components/ProductList';
import Cart from './components/Cart';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <main className="bg-neutral-50 min-h-screen">
        <div className="w-[1280px] mx-auto py-4">
          <h1 className="text-[2rem] text-neutral-950 font-bold">
            Product List:
          </h1>
          <div className="flex gap-x-4">
            <div className="w-[80%]">
              <ProductList />
            </div>
            <Cart />
          </div>
        </div>
      </main>
    </QueryClientProvider>
  );
}

export default App;

// src/components/ProductList.tsx

import { useQuery } from '@tanstack/react-query';
import { getAllProducts } from '../api/fakeStoreApi';

type ProductProps = {
  id: number;
  title: string;
  price: number;
  category: string;
  image: string;
};

export default function ProductList() {
  const { data: products } = useQuery({
    queryKey: ['products'],
    queryFn: getAllProducts,
  });
  return (
    <div className="grid grid-cols-4 gap-4">
      {products?.map((product: ProductProps) => (
        <div
          key={product.id}
          className="bg-neutral-200 flex flex-col justify-between gap-y-2 p-2 rounded-md"
        >
          <img
            src={product.image}
            alt={product.title}
            className="w-full h-[250px] object-cover rounded-t"
          />
          <h3 className="text-[1rem] text-neutral-900 font-medium">
            {product.title.length > 20
              ? `${product.title.slice(0, 20)}...`
              : product.title}
          </h3>
          <div className="flex justify-between items-center">
            <p className="text-[0.8rem] text-neutral-600">${product.price}</p>
            <button className="bg-neutral-800 text-[0.8rem] text-neutral-100 p-1 rounded">
              add to cart
            </button>
          </div>
        </div>
      ))}
    </div>
  );
}

// src/components/Cart.tsx

export default function Cart() {
  return (
    <div className="h-fit w-[20%] bg-neutral-200 flex flex-col gap-y-2 p-2 rounded-md">
      <h3 className="text-[1rem] text-neutral-950 font-semibold border-b border-neutral-400 pb-2">
        Cart:
      </h3>
      <ul>
        <li className="text-[0.9rem] text-neutral-800 flex justify-between">
          <p>Product</p>
          <div className="flex items-center gap-x-2">
            <button>-</button>
            <p>1</p>
            <button>+</button>
          </div>
          <p>20</p>
        </li>
      </ul>
      <div className="text-[0.9rem] text-neutral-900 font-medium flex justify-between border-t border-dashed border-neutral-400 pt-2">
        <p>Total item:</p>
        <p>Total Price:</p>
      </div>
    </div>
  );
}

Run the app and it will look like this:

Store Setup

// src/store.ts

import { create } from 'zustand';

type CartItem = {
  id: number;
  title: string;
  price: number;
  quantity: number;
};

type CartState = {
  count: number;
  cart: CartItem[];
  addCart: (item: CartItem) => void;
  removeCart: (id: number) => void;
};

export const useCart = create<CartState>((set) => ({
  count: 0,
  cart: [],
   addCart: (item) =>
        set((state) => {
          const existingItem = state.cart.find(
            (cartItem) => cartItem.id === item.id
          );
          if (existingItem) {
            return {
              count: state.count + 1,
              cart: state.cart.map((cartItem) =>
                cartItem.id === item.id
                  ? { ...cartItem, quantity: cartItem.quantity + 1 }
                  : cartItem
              ),
            };
          }
          return {
            count: state.count + 1,
            cart: [...state.cart, { ...item, quantity: 1 }],
          };
        }),
  removeCart: (id) =>
        set((state) => {
          const existingItem = state.cart.find((item) => item.id === id);
          if (existingItem && existingItem.quantity > 1) {
            return {
              count: state.count - 1,
              cart: state.cart.map((cartItem) =>
                cartItem.id === id
                  ? { ...cartItem, quantity: cartItem.quantity - 1 }
                  : cartItem
              ),
            };
          }
          return {
            count: state.count - 1,
            cart: state.cart.filter((item) => item.id !== id),
          };
        }),
    }),
}));

count: 0 represents the initial total number of items in the shopping cart, starting at zero. cart: [] is an empty array that initially holds no items, intended to store the list of products added to the cart as objects.

The addCart function first checks if the item already exists in the cart by using the find method to search for an item with the same id. If the item exists, its quantity is increased by 1, and the total item count (count) is also incremented. If the item does not exist in the cart, it is added as a new item with an initial quantity of 1, and the total item count (count) is increased by 1.

On the other hand, the removeCart function first checks if the item to be removed exists in the cart using the find method. If the item exists and its quantity is greater than 1, the function reduces the quantity by 1 and decreases the total item count (count) by 1. However, if the quantity is 1, the item is completely removed from the cart using the filter method, and the total count is adjusted accordingly.

In the code, count represents the total number of items in the cart across all product types, regardless of their uniqueness. It’s used to quickly display the total item count (e.g., "Total Items: 4") without recalculating. quantity, on the other hand, is specific to each product and tracks how many units of a particular item are in the cart. Together, they allow efficient management of cart data: count for global item totals and quantity for individual item tracking.

To use the addCart function from the useCart store in the ProductList component, you need to call addCart with the appropriate product details when the "add to cart" button is clicked. Here's how you can do it:

// src/components/ProductList.tsx

import { useQuery } from '@tanstack/react-query';
import { getAllProducts } from '../api/fakeStoreApi';
import { useCart } from '../store';

type ProductProps = {
  id: number;
  title: string;
  price: number;
  category: string;
  image: string;
};

export default function ProductList() {
  const { data: products } = useQuery({
    queryKey: ['products'],
    queryFn: getAllProducts,
  });

  // add this
  const addCart = useCart((state) => state.addCart);
  const cart = useCart((state) => state.cart);

  console.log(cart);

  return (
    <div className="grid grid-cols-4 gap-4">
      {products?.map((product: ProductProps) => (
        <div
          key={product.id}
          className="bg-neutral-200 flex flex-col justify-between gap-y-2 p-2 rounded-md"
        >
          <img
            src={product.image}
            alt={product.title}
            className="w-full h-[250px] object-cover rounded-t"
          />
          <h3 className="text-[1rem] text-neutral-900 font-medium">
            {product.title.length > 20
              ? `${product.title.slice(0, 20)}...`
              : product.title}
          </h3>
          <div className="flex justify-between items-center">
            <p className="text-[0.8rem] text-neutral-600">${product.price}</p>
            <button
              // add this
              onClick={() =>
                addCart({
                  ...product,
                  price: product.price,
                  quantity: 1,
                })
              }
              className="bg-neutral-800 text-[0.8rem] text-neutral-100 p-1 rounded"
            >
              add to cart
            </button>
          </div>
        </div>
      ))}
    </div>
  );
}

const cart = useCart((state) => state.cart) console.log(cart) it is not needed and only used for debugging, you can delete it again.

Then try to reopen your application and try clicking the add to cart button then open the console.

In the image, it can be seen that the data has been stored in the array, but the problem is that when it is refreshed, the data will disappear. To solve this problem persist is needed, let's try to modify our file store.

// src/store.ts

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

type CartItem = {
  id: number;
  title: string;
  price: number;
  quantity: number;
};

type CartState = {
  count: number;
  cart: CartItem[];
  addCart: (item: CartItem) => void;
  removeCart: (id: number) => void;
};

export const useCart = create<CartState>()(
// add this
  persist(
    (set) => ({
      count: 0,
      cart: [],
      addCart: (item) =>
        set((state) => {
          const existingItem = state.cart.find(
            (cartItem) => cartItem.id === item.id
          );
          if (existingItem) {
            return {
              count: state.count + 1,
              cart: state.cart.map((cartItem) =>
                cartItem.id === item.id
                  ? { ...cartItem, quantity: cartItem.quantity + 1 }
                  : cartItem
              ),
            };
          }
          return {
            count: state.count + 1,
            cart: [...state.cart, { ...item, quantity: 1 }],
          };
        }),
      removeCart: (id) =>
        set((state) => {
          const existingItem = state.cart.find((item) => item.id === id);
          if (existingItem && existingItem.quantity > 1) {
            return {
              count: state.count - 1,
              cart: state.cart.map((cartItem) =>
                cartItem.id === id
                  ? { ...cartItem, quantity: cartItem.quantity - 1 }
                  : cartItem
              ),
            };
          }
          return {
            count: state.count - 1,
            cart: state.cart.filter((item) => item.id !== id),
          };
        }),
    }),
// add this
    { name: 'cart-storage' }
  )
);

The persist middleware in Zustand is used to automatically save the state of your store in localStorage (or another storage solution, like sessionStorage). This allows the state to persist across page reloads, meaning the user won't lose their cart data if they refresh the page or close and reopen the browser. { name: 'cart-storage' } This defines the key under which the store's state will be saved in the storage. In this case, the cart data will be stored under the key cart-storage in localStorage.

Display Cart Data

Modify cart file to display the data

// src/components/Cart.tsx

import { useShallow } from 'zustand/shallow';
import { useCart } from '../store';

export default function Cart() {
  const { count, cart, addCart, removeCart } = useCart(
    useShallow((state) => ({
      count: state.count,
      cart: state.cart,
      addCart: state.addCart,
      removeCart: state.removeCart,
    }))
  );

  // const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0); // manually calculate total items
  const totalItems = count;
  const totalPrice = cart.reduce(
    (sum, item) => sum + item.price * item.quantity,
    0
  );

  return (
    <div className="h-fit w-[20%] bg-neutral-200 flex flex-col gap-y-2 p-2 rounded-md">
      <h3 className="text-[1rem] text-neutral-950 font-semibold border-b border-neutral-400 pb-2">
        Cart:
      </h3>
      <ul>
        {cart.map((item) => (
          <li
            key={item.id + item.title}
            className="text-[0.9rem] text-neutral-800 flex justify-between"
          >
            <p>
              {item.title.length > 10
                ? `${item.title.slice(0, 10)}...`
                : item.title}
            </p>
            <div className="flex items-center gap-x-2">
              <button onClick={() => removeCart(item.id)}>-</button>
              <p>{item.quantity}</p>
              <button onClick={() => addCart(item)}>+</button>
            </div>
            <p>${(item.price * item.quantity).toFixed(2)}</p>
          </li>
        ))}
      </ul>
      <div className="text-[0.9rem] text-neutral-900 font-medium flex justify-between border-t border-dashed border-neutral-400 pt-2">
        <p>Total Items:</p>
        <p>{totalItems}</p>
      </div>
      <div className="text-[0.9rem] text-neutral-900 font-medium flex justify-between">
        <p>Total Price:</p>
        <p>${totalPrice.toFixed(2)}</p>
      </div>
    </div>
  );
}

The useCart custom hook is used to access the cart's state and actions (count, cart, addCart, and removeCart) using the useShallow selector to optimize re-renders by subscribing only to the required parts of the state. This ensures the component doesn't re-render unnecessarily when unrelated parts of the state update.

Add Item: Clicking the + button calls the addCart action, increasing the quantity of the selected item.
Remove Item: Clicking the - button calls the removeCart action, reducing the quantity. If the quantity is 1 and the button is clicked, the item is removed entirely from the cart.

The difference in calculating the total items using count versus reduce lies in efficiency and accuracy. Count is more efficient since it retrieves a pre-stored value, making it ideal for apps with frequent renders or large carts, but it depends on accurate state updates. On the other hand, reduce dynamically calculates the total from the cart data, ensuring accuracy but at the cost of slightly reduced performance for larger carts. Ultimately, the choice depends on your preference and whether you prioritize efficiency or dynamic accuracy.

Conclusion

I hope this article has been helpful and provided valuable insights for your development journey. I’m always open to suggestions and feedback, so please feel free to share your thoughts in the comments section below. You can find the full source code for this project on my GitHub repository. Thank you for taking the time to read, and I look forward to hearing from you!

References:
https://zustand.docs.pmnd.rs/

Next JS 14 API Management

Rifky Alfarez — Sun, 01 Dec 2024 01:45:08 +0000

Next.js API Management: Implement Search, Pagination, Filter, Sort, and Limit Features

Rifky Alfarez ・ Dec 1

#react #nextjs #api #webdev

DEV Community: Rifky Alfarez

Vue.js Fetch API | Search Vue.js | Sort Vue.js | Pagination Vue.js | Filter Vue.js

How to Fetch API and Implement Filtering, Sorting, and Pagination in Vue.js

Rifky Alfarez ・ Dec 24

How to Fetch API and Implement Filtering, Sorting, and Pagination in Vue.js

Fetch Data

Implement Filtering, Sorting, and Pagination

Conclusion

React.js API Handling: Managing Search, Pagination, Sort, and Filter Without Libraries

React.js API Handling

Rifky Alfarez ・ Dec 17

React.js API Handling

Conclusion

Redux Toolkit - createAsyncThunk()

Create postSlice

posts/fetchPosts

Difference between reducers and extraReducers

What is builder and addCase

Update store.ts

Use in component

Result

Add middleware

Conclusion

Redux Toolkit Tutorial || React Redux || TypeScript

Learn Redux Toolkit - React (TypeScript)

Rifky Alfarez ・ Dec 14

Learn Redux Toolkit - React (TypeScript)

What is Redux and Redux Toolkit

Redux Key Concepts

Redux Toolkit (RTK) Simplification

Set Up Project

Basic Steps

Implement Redux Persist

Final Output

Conclusion

Create Chart in React Using Chart.js || Chart JS Tutorial React

Data Visualisation in React Using Chart.js

Rifky Alfarez ・ Dec 13

Data Visualisation in React Using Chart.js

Install Dependencies

Folder Structure

Create Chart Components

Bar Chart

Doughnut Chart

Line Chart

Pie Chart

Refactoring

Conclusion

Create Cart Using Zustand

Cart Feature in ReactJS Using Zustand

Rifky Alfarez ・ Dec 2

Cart Feature in ReactJS Using Zustand

Requirements

Project Setup

Fetch and Display Data

Store Setup

Display Cart Data

Conclusion

Next JS 14 API Management

Next.js API Management: Implement Search, Pagination, Filter, Sort, and Limit Features

Rifky Alfarez ・ Dec 1

Next JS 14 API Management