Forem: Agw-a

React counter component two different ways - useReducer and customHooks.

Agw-a — Sun, 08 Jan 2023 19:52:58 +0000

Whenever we need to implement custom logic into a react application, useReducer is the way to go. For this simple counter component, we would want to give the user freedom to add custom input values to increase or decrease a number. customHooks also enable expanding and sharing custom logic across a react application. We shall see in this tutorial how both hooks can be used to build a simple counter component.

useReducer

useReducer is used to manage state in a react application i.e it handles multiple states across a single react application in a simple and clean way. For the purose of this tutorial we shall use reducer to implement three features in the counter;

Increase count
Decrease count
Reset count
Add a preset value

First import useReducer function from react library

import React, {useReducer} from 'react'

Then we shall create a single object that will contain all definitions of the application's initial state.

const  initialState = {count:0}

Then with javascript array destructuring, define the useReducer function that takes into consideration state and dispatch. state returns the current state while dispatch updates the current state.

const  [state, dispatch] = useReducer(reducer, initialState);

The next step is to define the reducer function that takes tow parameters state and action. The first parameter state that defines the current state of the application while action is the current action to perform to update state.

const reducer = (state, action) => {
    switch(action.type) {

      case 'Increase':
        return {count: state.count + 1}

      case 'Decrease':
        return {count: state.count - 1}

          case 'Plus10':
        return {count: state.count + 10}

      case 'Minus10':
        return {count: state.count - 10} 

      case 'BackToZero':
        return {count: state.count * 0} 
      default:
        return state
    }

Next we will call each function in the main react component using the dispatch function, for instance in the increase function that increses the value of the count by 1, increase function is called as follows:

const reducer = (state, action) => {
    switch(action.type) {

      case 'Increase':
        return {count: state.count + 1}

    }

    const IncreaseCount = () => {
    dispatch({type: 'Increase'})
  }

Putting it all together

import React, {useReducer} from 'react'

const reducer = (state, action) => {
    switch(action.type) {

      case 'Increase':
        return {count: state.count + 1}

      case 'Decrease':
        return {count: state.count - 1}

          case 'Plus10':
        return {count: state.count + 10}

      case 'Minus10':
        return {count: state.count - 10} 

      case 'BackToZero':
        return {count: state.count * 0} 
      default:
        return state
    }

  }
  const  initialState = {count:0}


const Counter = () => {

    const  [state, dispatch] = useReducer(reducer, initialState);

  const IncreaseCount = () => {
    dispatch({type: 'Increase'})
  }
    const DecreaseCount = () => {
    dispatch({type: 'Decrease'})
  }
    const IncreaseBy10 = () => {
    dispatch({type: 'Plus10'})
  }
    const DecreaseBy10 = () => {
    dispatch({type: 'Minus10'})
  }
  const ResetValue = () => {
    dispatch({type: 'BackToZero'})
  }

  return (

          <div className='counter'>

    <div className='count-label'>
    <p>Count: {state.count}</p>
    </div>
      <div className='count-buttons'>
      <button onClick={DecreaseCount}>-</button>
      <button onClick={IncreaseBy10}>+10</button>
      <button onClick={ ResetValue} >reset</button>
      <button onClick={DecreaseBy10}>-10</button>
      <button onClick={IncreaseCount}>+</button>
      </div>

    </div>

  )
}

export default Counter;

customHooks

We will build the custom counter hook with useState , the first requirement therefore is to import it from the react library as below.

import  {useState} from 'react'

We will use a single function to create the component. First call useState and define the to parameters that will handle the current state and hold the state as it updates.

import  {useState} from 'react'

const CounterCustomHook = () => {
    const [state, setState] = useState(0);

Next we'll create functions that will handle the increase, decrease, reset and custom values. Here you are free to expand the function logic to fit the needs of your application. The customHook return statements will return an array of all the defined states and the state variable.
The updated function should look as below;

import  {useState} from 'react'

const CounterCustomHook = () => {
    const [state, setState] = useState(0);

  const increament = () => {
  setState(state => state + 1)
}
  const decreament = () => {
    setState(state => state - 1)
  }
  const addTen = () => {
    setState(state => state + 2)
  }
  const resetValue = () => {
    setState(0)
  }
  const removeTen =() =>{
    setState(state => state - 10)
  }
  return(
    [state, increament, decreament, addTen,resetValue, removeTen]
  )

}

export default CounterCustomHook;

Rendering the custom Hook

To render the custom hook, create a react component and import the previous hook created. The import statement depends on your folder structure.

import React from 'react'


import CounterCustomHook from '../hooks/counterCustomHook'

const UseCounterHook = () => {
  const [state, increament, decreament, addTen,resetValue] = CounterCustomHook()
  return (
<div className='card-holder'>
  <div id='custom-hookcard'>


    <div className='counter'>

    <div id='count-label'>
    <h4>Custom Service queue</h4>
    <p>Secure a spot in the queue!</p>
    <h4>Count: {state}</h4>
    </div>
      <div className='count-buttons' id='single-buttons'>
      <button onClick={increament}>+</button>
      <button onClick={addTen}> Get +2 </button>
      <button onClick={resetValue}>reset</button>
      {/* <button onClick={removeTen}>-10</button> */}
      <button onClick={decreament} >-</button>

      </div>

    </div>
    </div>
    </div> 
    )
}

export default UseCounterHook;

Kita-Book: A react Book library app with context API

Agw-a — Mon, 12 Dec 2022 07:34:32 +0000

This Project helps any one who wants to search for a book online and build an online library. It provides information details on the author, pages and description for each book. The main focus was the front-end interface of the application.

What I used in my project

Front-End

It is built with react JavaScript framework, react hooks for state management, react-router-dom or client-side routing, Axios to fetch Api and CSS to style the UI.

Back-End

Books in the library were populated with Draftbit books API.

App Features

Enables user manually browse through the book library
Enables the user to read more about the book when the cover image is clicked.
Enable users add books to a favorite list

Project Overview

I created a web library application. It lets you browse through a collection of books and add books to favorite, the favorite tab acts as the user's library.

Setting up the application

The Landing page and setting up the routes

Routing


          <Route path="/" element={<LandingPage />}/>
          {/* <Route path="/About" element={<About />}/> */}
          <Route path="/Library" element={<GeneralLibrary />}>

            <Route index element={<Booklist />}/>
            <Route path="Favorite-Books" element={<Favorites />}/>
          </Route>
          <Route path="Favorite-Books" element={<Favorites />}/>
          <Route path="/books/:id" element={<BookDetails />} />

Defining context

The context defines add to favorite and remove books from favorite functions.

import React, { useContext, useState, createContext } from "react";

const AppContext = createContext(null);

export const useAppContext = () => {
  const context = useContext(AppContext);

  if (context === undefined) {
    throw new Error("AppContext must be within contextprovider");
  }
  return context;
};

const AppContextProvider = ({ children }) => {
  const [fav, setFavs] = useState([]);

  const addToFavorites = (book) => {
    const oldFavs = [...fav];
    const newFavs = oldFavs.concat(book);

    setFavs(newFavs);
  };

  const removeFromFavorites = (id) => {
    const oldFavs = [...fav];
    const newFavs = oldFavs.filter((book) => book.id !== id);
    setFavs(newFavs);
  };

  return (
    <AppContext.Provider value={{ fav, addToFavorites, removeFromFavorites }}>
      {children}
    </AppContext.Provider>
  );
};

export default AppContextProvider;

The Library

Books in the library were populated with Draftbit books API.

import React, { useState, useEffect } from "react";
import { LIBRARY_URL } from "./LibraryApi/LibraryApi";
import axios from "axios";
import { useAppContext } from "../context/Context";
import { useNavigate } from "react-router-dom";
import "../styles/App.css";
import Loader from "./Loader";
import Pagnation from "./Pagnation";
import AddFavorite from "./interactions/add";
import RemoveFavorite from "./interactions/remove";

const Booklist = () => {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);

  const [books, setBooks] = useState([]);

  const [postPerPage, setPostPerPage] = useState([12]);
  const [currentPage, setcurrentPage] = useState([1]);

  const { fav, addToFavorites, removeFromFavorites } = useAppContext();

  const checkFavoriteBooks = (id) => {
    const Checker = fav.some((book) => book.id === id);

    return Checker;
  };

  const lastPostIndex = currentPage * postPerPage;
  const firstpostIndex = lastPostIndex - postPerPage;

  const currentPost = books.slice(firstpostIndex, lastPostIndex);

  useEffect(() => {
    setLoading(true);
    axios
      .get(LIBRARY_URL)
      .then((response) => {
        setBooks(response.data);
        setLoading(false);
      })
      .catch((err) => console.log(err));
  }, []);

  return (
    <section>
      <div className="Book-list">
        {loading ? (
          <Loader />
        ) : (
          currentPost.map((book) => {
            return (
              <div key={book.id} className="book-cover">
                <div>
                  <img
                    className="individual-cover"
                    onClick={() => navigate(`/books/${book.id}`)}
                    src={book.image_url}
                    alt={`Cover of ${book.title}`}
                  />
                </div>

                <div className="display-book-details">
                  <div className="book-title">
                    <h4> {book.title}</h4>
                  </div>

                  <div className="author-display">
                    <span>{book.num_pages}</span> <span>|</span>{" "}
                    <span>{book.format}</span>
                  </div>

                  <div className="author-display">
                    {checkFavoriteBooks(book.id) ? (
                      <button onClick={() => removeFromFavorites(book.id)}>
                        {<RemoveFavorite />}
                      </button>
                    ) : (
                      <button onClick={() => addToFavorites(book)}>
                        {<AddFavorite />}
                      </button>
                    )}
                  </div>
                </div>
              </div>
            );
          })
        )}
      </div>

      <div className="paginate">
        <Pagnation
          totalPosts={books.length}
          postsPerPage={postPerPage}
          setCurrentPage={setcurrentPage}
          currentPage={currentPage}
        />
      </div>
    </section>
  );
};

export default Booklist;

Defining the user library-Favorite books

import React from "react";
import { useAppContext } from "../context/Context";

import AddFavorite from "./interactions/add";
import RemoveFavorite from "./interactions/remove";

const FavoriteBooks = () => {
  const { fav, addToFavorites, removeFromFavorites } = useAppContext();

  const checkFavoriteBooks = (id) => {
    const Checker = fav.some((book) => book.id === id);

    return Checker;
  };
  return (
    <div className="fav-page">
      <span className="for-you-title">Your Library</span>

      <div className="fav-books-container">
        {fav.length > 0 ? (
          fav.map((book) => {
            return (
              <div key={book.id} className="fav-books">
                <div>
                  <img
                    className="fav-book-img"
                    src={book.image_url}
                    alt={`Cover of ${book.title}`}
                  />
                </div>

                <div>
                  <div className="fav-book-title">
                    <span> {book.title}</span>
                  </div>

                  <div className="fav-button">
                    {checkFavoriteBooks(book.id) ? (
                      <button onClick={() => removeFromFavorites(book.id)}>
                        {<RemoveFavorite />}
                      </button>
                    ) : (
                      <button onClick={() => addToFavorites(book)}>
                        {<AddFavorite />}
                      </button>
                    )}
                  </div>
                </div>
              </div>
            );
          })
        ) : (
          <div className="favorite-books-empty"></div>
        )}
      </div>
    </div>
  );
};

export default FavoriteBooks;

Getting details to each book

import React from "react";
import "../styles/App.css";
import "../styles/smallScreens.css";
import { useParams, useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";
import axios from "axios";
import { Book_Details_Url } from "./LibraryApi/LibraryApi";
import NavBar from "./NavBar";
import Footer from "./Footer";

const BookDetails = () => {
  const navigate = useNavigate();

  const goBack = () => {
    navigate("/Library");
  };

  const { id } = useParams();
  const [book, setBook] = useState({});

  useEffect(() => {
    axios
      .get(`${Book_Details_Url}/${id}`)
      .then((response) => {
        setBook(response.data);
      })
      .catch((err) => console.log(err));
  }, [id]);
  return (
    <>
      <NavBar />
      <main className="detail-background">
        <button className="detail-button" onClick={goBack}>
          {" "}
          ↖ Go back
        </button>

        <div className="detail-container">
          <div className="detail-card">
            <div className="detail-img">
              <img src={book?.image_url} alt={book?.title} />
            </div>
            <div className="detail-text">
              <p className="detail-book-titles">{book?.title}</p>
              <p className="detail-titles-author">Author | {book?.authors}</p>
              <div className="detail-description">
                <p className="description-text">{book?.description}</p>
                <p className="description-pages">Pages | {book?.num_pages} </p>

                <p className="description-genres">
                  Genres | {book?.genre_list}
                </p>
              </div>
              <div className="detail-quote">
                <blockquote>
                  <p>{book?.Quote1}</p>
                  <cite>{book?.authors}</cite>
                </blockquote>
              </div>
            </div>
          </div>
        </div>
      </main>

      <Footer />
    </>
  );
};

export default BookDetails;

Some challenges Challenges I faced

During the planning phase of the project, I planned to add a search feature to the app which would have enabled users to search for a book based on the book title or author, this was meant to be done with the goodreads API. I however plan on working on the project further to include the search feature and more book ordering categories.

Find full code in here