Forem: Kelechi Ogbonna

Fixing UI Update Issues with Custom Hooks in React

Kelechi Ogbonna — Tue, 26 Nov 2024 23:50:14 +0000

Identifying UI Update Problem

If you’ve been working with state management in React, you’ve likely encountered this frustrating scenario: your state updates correctly ( as seen in the React DevTools or console logs), but your UI doesn’t reflect those changes.

I recently encountered this challenge while working with a React custom hook, and I'd like to share how I resolved it.

The code snippet below shows the project structure I was working with.

// useCustomHook.jsx
function useCustomHook() {
  const [data, setData] = useState(stateData);
  const [location, setLocation] = useState("state");

  const handleLocationChange = (selectedLocation) => {
    if (selectedLocation === "state") {
      setLocation("state");
      setData(stateData);
    } else if (selectedLocation === "country") {
      setLocation("country");
      setData(countryData);
    }
  };
  return { data, location, handleLocationChange };
}

export default useCustomHook;

// App.jsx

import useCustomHook from "./useCustomHook";
import LocationFilter from "./LocationFilter";
import Table from "./Table";
import "./App.css";

export function App() {
  const { data } = useCustomHook();

  return (
    <div className="App">
      <LocationFilter />
      <Table data={data} />
    </div>
  );
}

export default App;

// LocationFilter.jsx

import useCustomHook from "./useCustomHook";

function LocationFilter() {
  const { location, handleLocationChange } = useCustomHook();

  const handleFilterByState = () => {
    handleLocationChange("state");
  };

  const handleFilterByCountry = () => {
    handleLocationChange("country");
  };

  return (
    <div>
      <button onClick={handleFilterByState}>View State Data</button>
      <button onClick={handleFilterByCountry}>View Country Data</button>
    </div>
  );
}

export default LocationFilter;

I created a custom hook to manage state changes when users click the button to view either state-specific or country-wide data.

In App.jsx, which serves as the parent component, the custom hook is called to access the data state and passes it down to the Table component (child) as props.

In LocationFilter component, I initially instantiated the custom hook directly to access the location and handleLocationChange state, which was intended to manage the data displayed in the table according to a “state” or “location” filter.”

However, when I click the view state data or view country data button, there is no change in the UI.

I checked the location state inside the LocationFilter component using the React Developer Tools, and I saw that the location and data states were updating as expected with the correct value. However, the UI did not reflect the changes to the data state when I clicked the button.

What Caused My React State Management Issues?

💡 My initial approach seemed logical: I assumed that calling the custom hook in each component would allow each to access and share the same state instance.

Flowchart: Before Lifting State Up

Independent hook Instance: Calling useCustomHook in LocationFilter created a separate instance of the hook state for that component. Each component maintains its own state, so state updates in the LocationFilter component don't affect the state in App component.
State synchronisation issue: Clicking the button does not update the App component's state, leading to a mismatch between the parent and child components. As the parent's state remains unchanged, the UI doesn't reflect updates from the child, preventing re-renders in both components.

The Solution: Lifting State Up

React does not synchronise state between components unless you pass it down via props or context. To resolve this, I removed the state hook call from LocationFilter component, fetched the state needed in the App component, and passed it down as props to the LocationFilter component. This ensures both components share the same state, changes in the App, syncing both components' data.

Flowchart: After Lifting State Up

Here’s the updated code for LocationFilter and App

// LocationFilter.jsx

function LocationFilter({ location, handleLocationChange }) {
  const handleFilterByState = () => {
    handleLocationChange("state");
  };

  const handleFilterByCountry = () => {
    handleLocationChange("country");
  };

  return (
    <div>
      <button onClick={handleFilterByState}>View State Data</button>
      <button onClick={handleFilterByCountry}>View Country Data</button>
    </div>
  );
}

export default LocationFilter;

// App.jsx

import useCustomHook from "./useCustomHook";
import LocationFilter from "./LocationFilter";
import Table from "./Table";
import "./App.css";

export function App() {
  const { data, location, handleLocationChange } = useCustomHook();

  return (
    <div className="App">
      <LocationFilter
        location={location}
        handleLocationChange={handleLocationChange}
      />
      <Table data={data} />
    </div>
  );
}

export default App;

Conclusion

This experience has reinforced my understanding of custom hooks, the importance of lifting state to a common parent component and best practices for state management in React, to ensure synchronised, consistent UI updates. While custom hooks allow you to share state logic across components, they do not let you share state.

For more detailed information, refer to the React documentation on Custom Hooks and Lifting State Up.

React Memo vs useMemo

Kelechi Ogbonna — Mon, 11 Mar 2024 22:58:10 +0000

In this article, I will share a revised version of what memo and useMemo do. I will answer the question: Should you wrap every prop with memo and useMemo? I will discuss when and when not to use memo and useMemo and how to optimize with them. Finally, I will conclude with which is better.

What is Memoization?

Memoization is a performance optimization. It is used to cache return values from expensive calculations. Unnecessary re-rendering can affect the performance of our app. React should not have to go through the render phase only to discard the output. Memoization only lets your component re-render when dependencies aren't the same.

What does `memo()` do?

While working with React components, you often pass state data as props from the parent to its child components. If the state in the parent component changes, React will re-render the parent component and its child components; it does not matter if the child component received the data as props or not; React will re-render the child components because the parent component re-rendered.

With memo, you can skip re-rending a child component when the props passed to it from the parent component did not change. So, If you change the state in the parent component that has no business with the child component, it doesn't affect the child component, and the child component does not re-render. React will reuse the render output from the previous render.

memo is a higher-order component used for optimising rendering behaviour.


export const ChildComponent = memo(function ChildComponent(){})

or 

const ChildComponent = () => {}
export const MemoizedChildComponent = memo(ChildComponent)

How It Works;

memo takes in two parameters;

Component: the component you want to memorize. React returns a new memoised component.
arePropsequal: This is optional. By default, React uses [object.is](http://object.is) to compare the previous props with the new props. You can use your own custom comparison function here if you don't want to use the default.

Memo does a shallow comparison, and passing complex data as props is not advisable. Read more about how object.is comparison work here.

For a detailed code example of how memo works, see skipping re-rendering when props are changed on the React docs.

The official docs' code sandbox example shows how the Greeting component re-renders only when the names props change. It does not re-render when the address props change because it is wrapped in memo.

//  code sample from the link to the official docs
import { memo, useState } from 'react';

export default function MyApp() {
  const [name, setName] = useState('');
  const [address, setAddress] = useState('');

  return (
      // ... code implementation
  );
}

const Greeting = memo(function Greeting({ name }) {

  console.log("Greeting was rendered at", new Date().toLocaleTimeString());

  return <h3>Hello{name && ', '}{name}!</h3>;
});

When should we use `memo`?

If the component renders often with the same exact props
if the components rendering logic is expensive
If you are working
when your child component is being asked to re-render due to changes in the parent’s state, which do not affect the child's component props anyway.

When should we not use `memo`

If your application mostly consists of static pages where changes are mostly based on navigations or replacing a page with another.
If there is no lag in your component or you do not notice any slow UI responses or glitching, then there is no need to use memo
If the props passed into the component change frequently
memoising everything could make your component less readable

What if the child component doesn't have any props

Use the same element reference technique instead bc React automatically optimises the render for you and prevents you from having to add memo over your code base. Thisis the same thing as passing JSX as children.

Incorrect Optimization with React Memo

Updating a memoised component using state or a context.

A component wrapped with memo will still be re-rendered when its own state changes or when a context it is using changes. The memoization only works on the component when you pass props into the component from the parent component.

If memo provides the optimization by comparing the props, why not wrap every single component with `memo()`?

A quote from Dan Abromov

Shallow comparisons aren't free. they are 0(prop count). and they only buy something if it bails out. All comparisons where we end up re-rendering are wasted. Why would you expect always comparing to be faster? Considering many components always get different props”

Let’s break this down further in Maths to see how it works:

normal component render time = 10ms
shallow comparison = 2ms

- Component is rendered on the screen for the first time, `memo` saves the initial render.

- Initial re-render; `memo` saves the initial render.
    render = 10ms
- second re-render; `memo` runs shallow comparison; no prop changed
    render = 2ms
- third re-render; `memo` runs shallow comparison; props changed
    render + shallow comparison = 12ms
- fourth re-render; `memo` runs shallow comparison; no props changed
    render = 2ms

If your Component keeps getting different props, your render time will look like this;

- Initial re-render; `memo` saves the initial render.
    render = 10ms
- second re-render; `memo` runs shallow comparison; prop changed
    render + shallow comparison = 12ms
- third re-render; `memo` runs shallow comparison; prop changed
    render + shallow comparison = 12m
- fourth re-render; `memo` runs shallow comparison; prop changed
    render + shallow comparison = 12m
- fifth re-render; `memo` runs shallow comparison; prop changed
    render + shallow comparison = 12m

You get the point. So, wrapping everything in memo can affect your app's performance. Therefore, only rely on memo as a performance optimization and when you really need to use it or notice the component's render time is large. It also works best for interactions that are granular, like drawing tools; then, you might find memorization helpful.

Most times you have to pair useCallback and useMemo with memo().

useMemo

memo() is a HOC while useMemo is a React Hook that stores the result of a calculation from a pure function so it can be reused without doing the calculation again between updates to the screen(re-renders).

const cachedValue = useMemo(calculateValue, dependencies)

How it Works;

It takes in 2 parameters;

calculateValue: The function calculating the value you want to cache. The function passed in should be pure, which means it takes no parameters and returns any type.

Dependencies: The list of all reactive values referenced inside the calculateValue code. React will compare each dependency with its previous value using the Object.is comparison.

💡 Note: if you forget to add the dependency array to useMemo, it will always run which defeats its purpose.

On the first render, React will return the result of calling calculateValue with no arguments.

On the next re-render, React will check if the dependency values have changed. If they haven't, it will return the previously stored value from the calculation. Otherwise, it will call the calculation again and return the current value from the calculation.

In the example below, we sort through a list and save the value in the filterList variable. This variable is passed as props to the child component profile. By default, React re-renders child components when the parent component re-renders. If there is no lag or nothing slowing your app down, then it's fine. However, if there is, consider wrapping the data mutation or heavy calculation in your component with useMemo.

function Contacts() {
  const [text, setText] = useState<string>('');
  const [list, setList] = useState<[]>([]);

  const filterList = useMemo(
    () =>
      list.filter((user) =>
        user.name.toLowerCase().includes(text.toLowerCase())
      ),
    [list, text]
  );

  return <Profile list={list} text={text} />;
}

const Profile = memo(function Profile({ list, text }) {
  // ...
});

For a detailed example of how useMemo works, see the difference between skipping re-renders and always re-rendering code example on the react official docs. Interact with the UI to see how it works.

When should we use useMemo?

If you are filtering or transforming a large array or performing an expensive calculation. If the data hasn't changed, you might want to avoid repeating the process.
If the calculation you're placing in useMemo is noticeably slow and useMemo's dependency rarely changes.
If you're passing it as props to a component wrapped in memo. You can skip re-rendering the component when the values haven't changed.
If you are depending on the value from useEffect, or you are passing the value later to another useMemo function.

When should we not use useMemo

If your application primarily consists of static pages where changes are largely based on navigation or replacing one page with another.
If there is no lag in your component or you do not notice any slow UI responses or glitches, then there is no need to optimise.
If the value passed as props will always be new.

Optimization with `memo` and useMemo

memo is often used together with useMemo to optimize React applications. They are frequently used together with useCallback as well.

Preventing Re-render when Props are Arrays or Objects

For example, in the code below, we see a person prop sent from the parent Info component to the child Profile component. Any time the parent component re-renders, the child component will re-render, even if its props didn't change and the component is wrapped with memo.

function Info() {
  const [name, setName] = useState("Kells");
  const [age, setAge] = useState(50);

  const person = { name, age };

  return <Profile person={person} />;
}

const Profile = memo(function Profile({ person }) {
  // ...
});

Why is this happening? it’s because objects are not the same in JavaScript, i.e. {} is not equal to {}. So when it does its comparison object.is({}, {}) returns false .

To fix this, You can use the useMemo hook to prevent the props from being re-created anytime the parent component re-renders.

function Info() {
  const [name, setName] = useState("Kells");
  const [age, setAge] = useState(50);

  const person = useMemo(() => ({ name, age }), [name, age]);

  return <Profile person={person} />;
}

const Profile = memo(function Profile({ person }) {
  // ...
});

Now, the person prop will no longer be recreated when the parent component re-renders because useMemo knows the object did not change and informs memo of this as well.

The example also works with arrays because arrays are objects in JavaScript. Using the same example from above, it illustrates how you can use memo and useMemo together to optimize an expensive calculation that returns an array.

function Contacts() {
  const [text, setText] = useState<string>("");
  const [list, setList] = useState<[]>[];

  const filterList = useMemo(
    () =>
      list.filter((user) =>
        user.name.toLowerCase().includes(text.toLowerCase())
      ),
    [list, text]
  );

  return <Profile list={list} text={text} />;
}

const Profile = memo(function Profile({ list, text }) {
  // ...
});

Conclusion: Memo and useMemo, which is better?

Memo and useMemo have more in common than differences, actually.

The major difference is that one is a Higher-Order Component, and the other is a React hook.

In real-life working scenarios, they're most likely used together because they complement each other, rather than choosing which one would be better to use.

To recap, if your app isn't slow, the components’ render time is within a reasonable range, and you don't notice any lag while interacting with the UI, you might not need to optimize or use any memoization technique.

References

React Render Tutorial - React memo

React Render Tutorial - Questions on Optimization

react.dev/useMemo

react.dev/skipping-re-rendering-when-props-are-unchanged

Build a CRUD Todo App with TypeScript and Fetch API

Kelechi Ogbonna — Wed, 31 Jan 2024 16:05:32 +0000

In the previous article, we discussed setting up the front end for a Golang Todo App. In this post, we will focus on building the frontend portion of a Todo App using TypeScript and Fetch API.

This tutorial will guide you on how to create a Todo app frontend with Typescript and Fetch API. We will perform CRUD operations, including;

creating a Todo,
reading a list of Todo items,
editing a Todo item from the list of displayed items,
deleting an item from the list,
and marking a Todo item as completed or not.

If you prefer to work with Vanilla JavaScript, I have created a version that focuses on simplicity and flexibility. This version is perfect for learning the fundamentals of web development. While TypeScript offers strong type-checking and safety features, Vanilla JavaScript is easier to use and adaptable. Yet still allows efficient data interaction, with fewer errors and proper coding practices.

Regardless of the technology you choose, the core concepts remain the same, and we will perform the same CRUD operations mentioned above and utilize the same technologies.

This post is perfect for anyone interested in performing CRUD operations using TypeScript and Fetch API, even without setting up a Go server. We will use HTML, CSS, TypeScript, and JavaScript for the front-end development.

You can find the Vanilla JavaScript version of this article here. Let's get started!

What we will be building

Project Setup

For instructions on setting up HTML templates and static assets (CSS, TypeScript) for a Go web server, refer to this article.

We will write the TypeScript code inside the script.ts file as we have the tsconfig setup to compile the typescript file.

You will need to re-compile the script.ts file and reload the Golang server every time you change the code to see the code changes.

HTML and CSS Boilerplate

You can download the HTML and CSS files from this GitHub repository, If you wish to use these files’ content. You can download the HTML and CSS files from this GitHub repository, If you wish to use these files’ content.

Building the Frontend CRUD Functionality

Note: localhost:9000/todo is from the local server we created in the Todo Golang Backend in the previous article. Feel free to work with any API endpoint of your choice.

Get and Display a list of todo items

Make a Get Request with the Fetch API

To make a GET request to the API endpoint, we create a function called getTodos(). This function is responsible for making the HTTP GET request to localhost:9000/todo and fetching a list of all the todos from the specified API endpoint.

const localhostAddress = "http://localhost:9000/todo";

async function getTodos() {
  try {
    const response = await fetch(localhostAddress);
    const responseData = await response.json();
    return responseData.data;

  } catch (error) {
    console.error("Error:", error);
  }
}

In the code above, we store the API endpoint in a string variable called localhostAddress for easy reuse.

The getTodos() function uses the Fetch API to send the request, await the response, and then parses the response data as JSON. We return the data object in the responseData variable because that is the server response data object we need.

To confirm that you get the response object from the fetch request, you can console.log the responseData and call the getTodos() function. Don’t forget to restart your go server if using one.

Adding Type Definitions to the `getTodos` Function

Before adding the type definition to getTodos function, Let's review some common scenarios where TypeScript types can be useful. This can help you know where you need to add type definitions in future projects and as we build.

some common places to add Types;

Function parameters: By including type definitions for function parameters, we can ensure type safety and avoid using incorrect data types. For instance, the function getTodos doesn't require any parameters, but other functions like CreateTodo, DeleteTodo, and UpdateTodo will showcase this concept.

Explicitly define the function return type:

To demonstrate this, let's examine the getTodo function. We want the getTodo function to return a Promise<Todo[]>. In this case, the Promise resolves to a data type of Todo[].

To make the getTodo function return a Promise<Todo[]>, we must create a Todo interface type. The structure of the Todo interface matches precisely with the response data we expect from the fetch call result. If you are using a different API, the structure of the Todo interface should match the response data from that API call. For more information on TypeScript interfaces, refer to the TypeScript Interfaces documentation.

One of TypeScript's core benefits is type-checking, which focuses on ensuring that your data values have the correct shape. Interfaces are used to define the shapes of data objects.

Let's define two interfaces, Todo and ResponseData, at the top of the static/script.ts file.

interface Todo {
  id: string;
  title: string;
  completed: boolean;
  createdAt: number;
}

interface ResponseData {
  message: string;
  data: Todo[];
}

In the code above, we created the Todo interface and the ResponseData data interface to match the exact data structure we received from the API response.

We assign the ResponseData interface to the responseData variable. TypeScript IntelliSense will pick up on the data type returned from the function and assign it as the function return type in the try/catch block. To see this in action, hover over getTodos to see the TypeScript inferred type.

async function getTodos() {
  try {
    ...// code
    const responseData: ResponseData = await response.json();

    return responseData.data;

  } catch (error) {
    ...// code
  }
}

To confirm that you get the response object from the fetch request, you can console.log the responseData and call the getTodos() function. Don’t forget to restart your go server if using one.

Displaying Todos in the DOM

Now that we have created an asynchronous function for fetching all the todos, let's use the getTodos() function to fetch the list of todos from the API and display the items on the DOM.

If you check the HTML structure, there's an empty div element with the ID todos. This element will serve as the container for dynamically displaying our to-do items. The goal is to dynamically update this section based on the items retrieved from the API call.

To accomplish this, we create an asynchronous function called displayTodos. This function will be responsible for dynamically rendering the todo items. Place the function below getTodos().

interface Todo {
 ... // code implementation
}

interface ResponseData {
 ... // code implementation
}

async function getTodos() {
 ... // code implementation
}

async function displayTodos() {
  const todoList = await getTodos();

  let todoListContainer = document.querySelector("#todos") as HTMLDivElement;

  if (todoList.length == 0) {
    todoListContainer.innerHTML += `
            <div class="todo">
                <span> You do not have any tasks </span>
            </div>
            `;
  } else {
    todoList.forEach((todo) => {
      todoListContainer.innerHTML += `
        <div class="todo">
            <span>${todo.title}</span>

            <div class="actions">
                <button class="edit">
                    <i class="fas fa-edit"></i>
                </button>
                 <button class="delete">
                <i class="far fa-trash-alt"></i>
                </button>
            <div>

        </div>
        `;
    });
  }
}
displayTodos();

In the code above, we call getTodos() to fetch a list of todo items and await the result.

We use the document.querySelector method to find the HTML element with ID todos and store it in the todoListContainer variable.

Remove as HTMLDivElement, and you see that TypeScript infers that this variable could possibly have a null value.

We use the as keyword in TypeScript to specify that this variable should be treated as an HTMLDivElement. TypeScript will delay instantiating this variable until the value is available in the DOM.

Next, we check if the todoList is empty. If it is, we will update todoListContainer.innerHTML with a message informing the user that there are no tasks created yet.

If the todoList is not empty, we loop through the todoList to access each todo item. We generate an HTML structure for each to-do item, including the to-do title and action buttons for editing and deleting a to-do.

Fix Type Error

The line **todoList.forEach((todo) => {** is causing a TypeScript error. This occurs because TypeScript is inferring the return type of the todoList variable as **string | Todo[]**.

To resolve this issue, we need to add a check. If todoList returns an error string type, we can log the error to the console.

async function displayTodos() {
  const todoList = await getTodos();

  if (typeof todoList === "string") {
    console.error(todoList);
    return;
  }

  let todoListContainer = document.querySelector("#todos") as HTMLDivElement;

  if (todoList.length == 0) {
    todoListContainer.innerHTML += `
            <div class="todo">
                <span> You do not have any tasks </span>
            </div>
            `;
  } else {
    todoList.forEach((todo) => {
        ...
    });
  }
}
displayTodos();

Hover over todoList in TodoList.forEach and todo in forEach((todo) to see the updated variable types.

Lastly, We call the displayTodos() function to ensure the list is displayed when the App loads. Depending on what is returned from your server, the DOM will update the screen with the HTML Todo structure list accordingly.

Run tsc static/script.ts compile the script file, and restart the Go server to see changes on the UI.

Creating a Todo

Make a Post Request with Fetch API

To add a Todo task, we must first create a function to make a POST request to the API for adding a Todo to the database.

We will create a function called createTodo to make this HTTP post request to the API endpoint using fetch API and with the user input(todo task ) as part of the request body because the API requires it.

Add this code below getTodos function and before the displayTodos function.

async function getTodos() {
  // code implementation
}

async function createTodo(data: {title: string} ) {
  try {
    // send POST request with user input as the req body
    const response = await fetch(localhostAddress, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });

    const result = await response.json();
        console.log("Success:", result.message);

  } catch (error) {
    console.error("Error:", error);
  }
}

async function displayTodos() {
  // code implementation
}

In the code above, we defined a function called createTodo. It uses the javascript fetch API to send a post request to the localhostaddress.

The createTodo function takes a data argument data, which is sent as part of the request body, and converts it to a JSON string.

Recall that earlier, we discussed adding TypeScript to function parameters. That's precisely what we do here. The function takes an object parameter called data, which should have a property named title of type string.

We set the content type of the request header to "application/json" to indicate that the response body object will be in JSON format.

To prevent the app from crashing due to an error, the code is wrapped in a try-catch block. If the response is successful, a success message is logged to the console.

Adding More Types Checking ( Optional )

We fixed the TypeScript error by explicitly defining the data parameter type. Now, if you hover over the result variable, you will see that TypeScript infers it to be of type “any”, which we don't want.

Let's create a CreateTodo Interface to define the API's returned data structure. Then, we can access the result variable properties.

Add this code at the top where you have the other interfaces defined.

interface Todo {
 ...
}

interface ResponseData {
    ...
}

interface CreateTodoResponse {
  message: string;
  dataID: string;
}

This Interface matches precisely the data structure returned from the JSON response.
Assign the createTodoResponse to the result variable. Now, when we console.log the results variable, typescript intellinsense shows us its available properties. Nice!

Create Todos From the User Interface

To allow users to add a new task from the app's user interface, we have an input box and a submit button.

const localhostAddress = "http://localhost:9000/todo";

const newTodoInput = document.querySelector("#new-todo input") as HTMLInputElement;
let submitButton = document.querySelector("#submit") as HTMLButtonElement;

We use the query selector to retrieve the input element and save it in a constant called "newTodoInput". Similarly, we save the submit button in a constant called "submitButton".

Just like we did for the todoListContainer variable, we explicitly set the type of the "newTodoInput" variable as an HTML input element using as HTMLInputElement. We do the same for the "submitButton" and explicitly set its type as an HTML button element using as HTMLButtonElement.

Next, we will define an asynchronous function called addTasks that will be responsible for adding a new task to the user interface when the user clicks the submit button.

async function createTodo(data: {title: string}) {
    // code implementation
}

async function addTask() {
  const data = { title: newTodoInput.value };
  await createTodo(data);
  displayTodos();

  newTodoInput.value = "";
}

async function displayTodos() {
 // code implementation
}
displayTodos();

submitButton.addEventListener("click", () => addTask());

When a user clicks the submit button, the addtask function is called because we attached a click event listener to the submit button.

Inside the function, we create a data object with a title key and set its value to the user's input value.

We then call the createTodo function and pass the data object as a parameter to send a POST request to the server, sending the new task data to the backend.

We await the result and call displayTodos to refresh the DOM and display the newly created Todo task if the request was successful. Finally, we clear the input field by setting newtodoinput.value to an empty string.

Remember to only access newtodoinput.value when you want to use it. Avoid adding .value at the end of the newtodoinput constant, as it will result in an empty input value.

Lastly, attach an event listener to the submitButton to call the addTasks function when clicked.

Update displayTodo function to fix duplication on the DOM

If you try adding a Task, you will notice the values are duplicated on the DOM.

To avoid duplicated values on the DOM when adding a task, clear the todoListContainer element before populating it with new data. To do this, add todoListContainer.innerHTML = ""; after the todoListContainer variable definition in displayTodos() function.

async function addTask() {
 ... // code
}

async function displayTodos() {
  ... // code 

  let todoListContainer = document.querySelector("#todos") as HTMLDivElement;
  todoListContainer.innerHTML = "";

 // rest of code implementation
}

With these additions, users can now easily add tasks from the app's user interface.

To see changes, don’t forget to compile the file tsc static/script.ts and restart the Golang Server.

Deleting a Todo

Delete Todo with Fetch API and TypeScript

When you want to delete a task from the user interface, you must send a DELETE request to the API endpoint. To create this functionality, we define a “deleteTodo” asynchronous function. This function will be responsible for sending a HTTP DELETE request to the endpoint URL, along with the ID of the task you want to delete.

Place the deleteTodo function after the createTodo function, but before the Addtask function.

async function createTodo(data: { title: string }) {
    // code implemntation..
}

async function deleteTodo(TodoID: string) {
  try {
    const response = await fetch(`${localhostAddress}/${TodoID}`, {
      method: "DELETE",
    });
    const result = await response.json();
    console.log("Success:", result.message);
  } catch (error) {
    console.error("Error:", error);
  }
}

async function addTask() {
 // code implemntation..
}

The deleteTodo function takes in a parameter TodoID of type string, which is the ID of the tasks you want to delete.

To catch any errors that occur and log them gracefully to the console, we place this function call in a try-catch block.

We use the Fetch API to send an HTTP DELETE request to localhostAdress with the ID in the URL. We then await the response from the request and parse it as JSON.

If the request was successful, we console log the success message returned from the server. In this case, we do not return the result because we don’t need it.

Delete Todo Item from the User Interface

To delete a Todo item from the user interface, we need to manipulate the DOM.

As a quick recap, When we created the todoContainer.innerHTML to display the list of Todos, we also created an action button for deleting each Todo task. We will now delve deeper into this.

To add functionality to the delete button action, we define a deleteTaskButton function below displayTodos() function.

function deleteTaskButton() {
  const deleteTodoButtons: HTMLButtonElement[] = Array.from(
    document.querySelectorAll(".delete")
  );

  for (const deleteButton of deleteTodoButtons) {

    deleteButton.onclick = async function () {
      const todoID = deleteButton.getAttribute("data-id") || "";
      await deleteTodo(todoID);
      displayTodos();
    };
  }
}

Inside the function, we use the queryselectorAll to select all the elements on the DOM with the class name "delete".

TypeScript is statically typed, and it performs type checking at compile-time. When you use document.querySelectorAll to select elements, TypeScript infers the result type as NodeListOf<Element>, a collection of DOM elements. However, NodeListOf<Element> is not an array, nor does it correctly infer the HTML element type, so you can't use array-specific methods or operations directly.

change deletTodoButton declaration to see the tsc error.

const deleteTodoButtons = document.querySelectorAll(".delete")

and you will see a Property 'onclick' does not exist on type 'Element'. ts error on deleteButton.onclick.

By using Array.from, we converted the NodeListOf<Element> into an array, and set the type as HTMLButtonElement , now TypeScript can correctly infer the type as HTMLButtonElement[]. This conversion allows you to use array methods and operations on deleteTodoButtons without TypeScript raising type errors.

We then loop through the deleteTodoButtons node list and assign an onlick evenlister to each button.

When a user clicks the delete icon button:

We create a constant todoID that we will use to access the ID for each todo item. To get the TodoID, we update the button element with a data-id attribute. We use the nullish coalescing operator (**||**) operator to set the default value of todoID to an empty string, so TypeScript will infer this variable as a string instead of string|null.

If you check the code snippet below, you will see I updated the button element with class ’delete’ to show how to add the data-id attribute.

async function displayTodos() {

  <button data-id=${todo.id} class="delete">
  // rest of code...
}

Next, we assign the todo.id as the data-id attribute value, which is one of the properties of todo in the **todolist**.

To get the todo.id saved in the data-id attribute, we use the getAttribute method and store the value in a todoID.

Next, we call the deleteTodo function and pass in the todoID as a parameter to delete the item and await the result. After the item is deleted, we refresh the Todo list to show the updated list.

Finally, we call the deleteTaskButton() function inside displayTodos() so that it is available to displayTodos when a user clicks the delete button.

async function displayTodos() {
  // code implementation ...

  deleteTaskButton();
}
displayTodos();

To view changes, compile the file tsc static/script.ts and restart the Go server if using one.

Update a Todo

To update a To-do item, we will be implementing two forms of editing.

Users will be able to edit the To-do item title.
Users will be able to mark a To-do item as completed or not.

Users will be able to edit the To-do item title

To edit the To-do item title, we will start by defining an asynchronous function that will make an API call to update the To-do item in the database.

Place the code below deletTodo and addTask function

async function updateTodo(id: string, data: {title: string, completed: boolean}) {
  try {
    const response = await fetch(`${localhostAddress}/${id}`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });
    const result = await response.json();
    console.log("Success:", result);
  } catch (error) {
    console.error("Error:", error);
  }
}

This function takes two parameters;

an id of type string. This is the ID of the todo item you want to edit.
data object with two properties;
- title to be updated. it is of type string
- completed to update the status of the task. it is of type boolean

The parameters are passed as part of the request body. After creating the updateTodo async function for updating a To-do Item HTTP Request, When a user clicks the edit button, we want to load the To-do item title into the input box.

To achieve this, we need to create a variable to track whether the user is currently editing a To-do item or not. This is necessary because we are using the same input box for both editing and adding new items to the list.

At the beginning of the file where you defined your variable, create 'isEditingTask' variable and set it to false. Also create a editButtonTodoID variable; we will use it to store the ID of the todo we want to edit.

let isEditingTask = false;
let editButtonTodoID = "";

Next, navigate to the displayTodos function and add the data-id attribute to <button class=edit>. Also, add a editTaskTitleButton below deleteTaskButton.

async function displayTodos() {
  <button data-id=${todo.id} class="edit">
  // code that lists the todo...

  deleteTaskButton();
  editTaskTitleButton();
}

Now, let’s define an editTaskTitleButton function. Place this code below deletTaskButton()

function editTaskTitleButton() {
  const editTodoTitleButtons: HTMLButtonElement[] = Array.from(
    document.querySelectorAll(".edit")
  );

  for (const editButton of editTodoTitleButtons) {
    const todoName = editButton.parentNode?.parentNode?.children[0] as HTMLSpanElement;

    editButton.onclick = async function () {
      newTodoInput.value = todoName.innerText;
      submitButton.innerHTML = "Edit";
      isEditingTask = true;

      editButtonTodoID = editButton.getAttribute("data-id") ?? '';
    };
  }
}

Notice part of the code has been updated with type assertions.

In the code above, we use the document.querySelectorAll to fetch all the button elements with class='edit' . We save the NodeList element in a variable called editTodoButtons and set the editTodoTitleButtons variable type to HTMLButtonElement[]. Check deleteTodo for a detailed explanation of why. Next, we loop through the list to access the to-do button.

To access the Todo item title, we can use the editButton.parentNode.parentNode.children[0] code. Remove the optional chaining to see the typescript error thrown to understand why it was added.

This code moves up the DOM hierarchy, allowing us to select the first child element of the second parent. We store this element in the todoName variable, which gives us access to the inner text representing the todo item title. Similar to other HTML elements, we explicitly set the type for todoName as HTMLSpanElement.

Now that we can access the todo item title in the DOM, we want to load the text into the input box. To do that, we attach an onclick event listener to the “edit” button so when a user clicks on the edit button, we:

we set the input box value to the todo item title text
change the submit button text to edit (this is optional)
set isEditingTask variable to true
get the todo ID from the data-id attribute and save it to the editButtonTodoID variable we defined at the top. Use the nullish coalescing operator ( ?? ) to provide a default value ("") in this case the result is null. So TypeScript now interprets editButtonTodoID variable as a string.

Your app should be able to load a todo title into the input box when you click on it now.

Next, let's create an edit tasks function to handle editing a Todo item on the UI. For now, we can only load the text into the input field. Place the code below addTask() function.

async function addTask() {
  // code implementation
}

async function editTask() {
  const data = { title: newTodoInput.value, completed: false };
  if (isEditingTask) await updateTodo(editButtonTodoID, data);
  displayTodos();

  newTodoInput.value = "";
  isEditingTask = false;
  submitButton.innerHTML = "Add";
}

async function displayTodos() {
  // code implementation
}

In the code above, we create a data object with the title and completed property. The title is set to the newTodoInput.value, which is whatever is in the input box when the user clicks the submit button. We set completed to false for now because the API expects a completed property to be present; later, we will update the value for the completed prop accordingly.

Next, we check to see if isEditingTask is true, which means the user is editing a task; remember, we set isEditingTask to true when a user clicks the edit button. We call the updateTodo function and pass in the TodoID and data object as arguments. We await the result and refresh the to-do item list when done. Next, clear the input field and set isEditingTask to false to indicate we are done. Finally, update the submit button text back to "Add".

Lastly, update the submit button event listener to call editTask function if isEditingTask is true.

submitButton.addEventListener('click', () => isEditingTask ? editTask() : addTask())

To view changes, compile the file tsc static/script.ts and restart the Go server if using one.

Users will be able to mark a To-do item as completed

To implement this functionality, the process involves two main steps:

Styling the to-do title text to indicate whether an item is marked as completed.
Updating the completed property within the data object to reflect the item's status on the server

Styling the to-do title text to indicate whether an item is marked as completed

First, we want to style the todo title text to visually indicate whether an item is marked as completed or not. Update the HTML structure within the displayTodos function:

<div class="todo">
  <span
    id="todoname"
    style="text-decoration:${todo.completed ? 'line-through' : ''}"
    data-iscomplete="${todo.completed}"
    data-id="${todo.id}"
  >
    ${todo.title}
  </span>
   ...
</div>

In the code above:

We use the style attribute to set the text-decoration property of the todo title span element.
If todo.completed is true, we set text-decoration: line-through to visually strike through the text, indicating that the item is completed.
If todo.completed is false, no text-decoration is applied.

We also add two custom attributes, data-iscomplete and data-id, to store the completed status and the ID for each Todo item. These attributes will help us access and update the values later.

We also added an HTML id attribute to make it easy for us to fetch the list of all the to-do titles displayed on the DOM.

Toggle Todo Item as Completed or Not

Next, we want to allow users to click on a Todo item to toggle its completion status. To achieve this, add the following code. below editTaskTitleButton() function.

Also, call the toggleTaskCompletion inside the dislayTodos function as we did for deleteTaskButton and editTaskTiltleButton.

async function displayTodos() {
  // rest of code implementation...

    deleteTaskButton();
    editTaskTitleButton();
    toggleTaskCompletion();
}

function deleteTaskButton() {
  // code implementation
}

function editTaskTitleButton() {
  // code implementation
}

function toggleTaskCompletion() {
  const editTaskCompleted: HTMLSpanElement[] = Array.from(
    document.querySelectorAll("#todoname")
  );

  for (const task of editTaskCompleted) {
    task.onclick = async function () {
      const isTaskDone = JSON.parse(task.getAttribute("data-iscomplete") as string);
      const todoID = task.getAttribute("data-id") ?? '';

      const data = { title: task.innerText, completed: !isTaskDone };
      await updateTodo(todoID, data);
      displayTodos();
    };
  }
}

In the code:

We fetch all HTML elements with ID #todoname and store them in a todoTitleEmlement variable. Array.from(...) converts the NodeList obtained from querySelectorAll into an array of HTMLSpanElement elements.
We iterate through the list of HTML elements to access to the data-iscomplete and data-id attributes for each element.

When a user clicks on a todo item title, the following actions occur:

We use JSON.parse to convert the data-iscomplete attribute from a string to a boolean value.
We use the getAttribute method to fetch the data-iscomplete and data-id values and store them in isTaskDone and todoID variables.
We create a new data object with the title property set to the text of the clicked Todo item text.
We set the completed property to !istaskDone to toggle the value of the completed status between true and false.
We call the updateTodo function with the ID and data object as arguments to update the completed status and await the result.
Finally, we call displayTodos to refresh the todo list and display the changes.

This completes the functionality of marking a Todo item as completed or not and updates the UI accordingly.

Your App should look like this;

Update the completed property when editing the To-do item title.

In our previous work, specifically within the editTask function, we focused on updating the todo title. At that time, we hardcoded the completed property to false.

We aim to improve the code by dynamically setting the completed property to the value stored in the data-iscomplete property.

Here are the steps:

Create an isComplete Variable

To store the value from the data-iscomplete property, we create an isComplete variable and set it to false:

let isEditingTask = false;
let todoID = ''
let isComplete = false

Update the editButton.onclick function inside editTaskTitleButton()

Within the editButton.onclick function, we need to set the isComplete variable to the value of the data-iscomplete property. This is done when a user clicks on the edit button:

editButton.onclick = async function () {
      ... // code implementation

      isComplete = JSON.parse(
        todoName.getAttribute("data-iscomplete") as string
      );
    };

When a user clicks the edit button, it updates the isComplete variable with the value from the data-iscomplete attribute. JSON.Parse converts it from a string to a boolean.

Lastly, In the editTask function, where we set up the data object to send to the server, update the completed property of the data object with the value of the isComplete variable.

async function editTask() {
  const data = { title: newTodoInput.value, completed: isComplete };

  ... // rest of implementation
}

This ensures that when you edit a todo item, the completed prop retains its previous value, either true or false, based on data-iscomplete attribute.

With these changes, your code effectively handles marking Todo items as done and updating the completed attribute when editing a Todo item.

</video

View the complete code on GitHub

Conclusion

In this tutorial, we've built a Todo app's Frontend using Vanilla JavaScript and the Fetch API. We've covered all the CRUD operations:

Fetched and displayed todo items from the API.
Enabled users to add new tasks and updated the UI accordingly.
Implemented the ability to delete tasks from the UI.
Enhanced the editing feature, allowing both title updates and marking tasks as completed.
Styled completed tasks by toggling the "text-decoration" CSS property.

This guide covers key Frontend development skills, including API interaction, CRUD operations, and dynamic user interface creation. Building a Todo app is an ideal starting point for web development, offering insights and skills for broader applications.

Please feel free to email me or drop a comment if you have any questions, feedback, or need help with any part of the tutorial.

I hope you found this article helpful ❤️

Recommended Reads

Build a CRUD Todo App with Vanilla JavaScript and Fetch API

Kelechi Ogbonna — Thu, 11 Jan 2024 15:16:00 +0000

In the previous article, we discussed setting up the front end for a Golang Todo App. In this post, we will focus on building the frontend portion of a Todo App using Vanilla JavaScript and Fetch API.

This tutorial will guide you on how to create a Todo app frontend with Vanilla JavaScript and Fetch API. We will perform CRUD operations, including;

creating a Todo,
reading a list of Todo items,
editing a Todo item from the list of displayed items,
deleting an item from the list,
and marking a Todo item as completed or not.

For those who prefer to work with TypeScript, I will create a TypeScript version that provides type-checking and safety toolings, preventing errors during data interaction and making the code less prone to errors. However, Vanilla JavaScript offers simplicity and a flexible experience, making it perfect for learning the fundamentals of web development.

Regardless of the technology you choose, the core concepts remain the same, and we will perform the same CRUD operations mentioned above and utilize the same technologies..

This post is perfect for anyone interested in performing CRUD operations using Vanilla JavaScript and Fetch API, even without setting up a Go server. We will use HTML, CSS, TypeScript, and JavaScript for the front-end development.

What we will be building

Project Setup

For instructions on setting up HTML templates and static assets (CSS, TypeScript) for a Go web server, refer to this article.

We will write the JavaScript code inside the script tag in the HTML template. However, you can write yours in a separate script.js file and import it into the HTML file if that works better for you.

If you are new to coding, I'd advise you to follow the instructions and type the code yourself.

HTML and CSS Boilerplate

You can download the HTML and CSS files from this GitHub repository, If you wish to use these files’ content.

Building the Frontend CRUD Functionality

Note: localhost:9000/todo is from the local server we created in the Todo Golang Backend in the previous article. Feel free to work with any API endpoint of your choice.

Get and Display a list of todo items

Make a Get Request with the Fetch API

To make a GET request to the API endpoint, we create a getTodos() function. This function is responsible for making the HTTP GET request to localhost:9000/todo and fetching a list of all the todos from the specified API endpoint.

/html/index.html

<script>
    const localhostAddress = "http://localhost:9000/todo";

  async function getTodos() {
        try {
          const response = await fetch(localhostAddress);
          const responseData = await response.json();
          return responseData.data;

        } catch (error) {
          console.error("Error:", error);
        }
      }
</script>

In the code above, we save the API endpoint in a string called localhostAddress so it can be easily reused.

To confirm that you get the response object from the fetch request, you can console.log the responseData and call the getTodos() function. Don’t forget to restart your go server if using one.

NOTE: The way we access the todo items in the response (responseData.data) is specific to this example API. If you're using a different API, the response data might be structured differently.

Displaying Todos in the DOM

Now that we have created an asynchronous function for fetching all the todos, let's use the getTodos() function to fetch the list of todos from the API and display the items on the DOM.

If you check the HTML structure, there’s an empty div element with ID todos. This element will serve as the container for dynamically displaying our todo items. The goal is to dynamically update this section based on the items retrieved from the API call.

To do this, we create an asynchronous function called displayTodos. This function will be responsible for dynamically rendering the todo items. Place the function below getTodos() .

async function displayTodos() {
  const todoList = await getTodos();
  let todoListContainer = document.querySelector("#todos");

  if (todoList.length == 0) {
    todoListContainer.innerHTML += `
            <div class="todo">
                <span> You do not have any tasks </span>
            </div>
            `;
  } else {
    todoList.forEach((todo) => {
      todoListContainer.innerHTML += `
        <div class="todo">
            <span>${todo.title}</span>

            <div class="actions">
                <button class="edit">
                    <i class="fas fa-edit"></i>
                </button>
                 <button class="delete">
                <i class="far fa-trash-alt"></i>
                </button>
            <div>

        </div>
        `;
    });
  }
}
displayTodos();

In the code above, we call getTodos() to fetch a list of todo items and await the result.

We use the document.querySelector method to find the HTML element with ID todos and store it in the todoListContainer variable.

Next, we check if the todoList is empty. If it is, we will update todoListContainer.innerHTML with a message informing the user that there are no tasks created yet.

If the todoList is not empty, we loop through the todoList to access each todo item. We generate an HTML structure for each todo item including the todo title and action buttons for editing and deleting a todo.

We call the displayTodos() function to ensure that the list is displayed when the App loads. Depending on what is returned from your server, the DOM will update the screen with the HTML Todo structure list accordingly.

Creating a Todo

Make a Post Request with Fetch API

To add a Todo task, we must first create a function to make a POST request to the API for adding a Todo to the database.

Add this code below getTodos and before displayTodos.

async function getTodos() {
  // code implementation
}

async function createTodo(data) {
  try {
    // send POST request with user input as the req body
    const response = await fetch(localhostAddress, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });

    const result = await response.json();
    console.log("Success:", result.message);
  } catch (error) {
    console.error("Error:", error);
  }
}

async function displayTodos() {
  // code implementation
}

In the code above, we defined a function called createTodo. It uses the javascript fetch API to send a post request to the localhostaddress.

The createTodo function takes a data argument which is which is sent as part of the request body and converts it to a JSON string.

We set the content type of the request header to "application/json" to indicate that the response body object will be in JSON format.

To prevent the app from crashing due to an error, the code is wrapped in a try-catch block. If the response is successful, a success message is logged to the console.

Create Todos From the User Interface

To allow users to add a new task from the app's user interface, we have an input box and a submit button.

const localhostAddress = "http://localhost:9000/todo";
const newTodoInput = document.querySelector("#new-todo input");
let submitButton = document.querySelector("#submit");

We use the query selector to get the input element and save it in a constant called "newtodoinput". Similarly, we save the submit button in a constant called "submitButton".

Next, we will define an asynchronous function called addTasks that will add a new task to the user interface when the user clicks the submit button.

Add the following code below the createTodo function.

async function createTodo() {
  // code implementation
}

async function addTask() {
  const data = { title: newTodoInput.value };
  await createTodo(data);
  displayTodos();
  newTodoInput.value = "";
}

async function displayTodos() {
  const todoList = await getTodos();
  let todoListContainer = document.querySelector("#todos");
  // rest of code implementation
}
displayTodos();

submitButton.addEventListener("click", () => addTask());

When a user clicks the submit button, the addtask function is called because we attached a click event listener to the submit button.

Inside the function, we create a data object with a title key and set its value to the user's input value.

We then call the createTodo function and pass the data object as a parameter to send a POST request to the server, sending the new task data to the backend.

We await the result and call displayTodos to refresh the DOM and display the newly created todo task if the request was successful. Finally, we clear the input field by setting newtodoinput.value to an empty string.

Remember to only access newtodoinput.value when you want to use it. Avoid adding .value at the end of the newtodoinput constant, as it will result in an empty input value.

Lastly, attach an event listener to the submitButton to call the addTasks function when clicked.

Update displayTodo function to fix duplication on the DOM

If you try adding a Task, you will notice the values are duplicated on the DOM.

async function createTodo() {
  // code implementation
}

async function addTask() {
  const data = { title: newTodoInput.value };
  await createTodo(data);
  displayTodos();
  newTodoInput.value = "";
}

async function displayTodos() {
  const todoList = await getTodos();
  let todoListContainer = document.querySelector("#todos");
  todoListContainer.innerHTML = "";
  // rest of code implementation
}
displayTodos();

submitButton.addEventListener("click", () => addTask());

With these additions, users can now easily add tasks from the app's user interface.

To view changes, compile the file tsc static/script.ts and restart the Go server if using one.

Deleting a Todo

Delete Todo with Fetch API and Vanilla JavaScript

When you want to delete a task from the user interface, you need to send a DELETE request to the API endpoint. To create this functionality, we define a “deleteTodo” asynchronous function. This function will be responsible for sending a HTTP DELETE request to the endpoint URL, along with the ID of the task you want to delete.

Place the deleteTodo function after the createTodo function but before the Addtask function.

async function createTodo() {
  // code implementation
}

async function deleteTodo(TodoID) {
  try {
    const response = await fetch(`${localhostAddress}/${TodoID}`, {
      method: "DELETE",
    });
    const result = await response.json();
    console.log("Success:", result.message);
  } catch (error) {
    console.error("Error:", error);
  }
}

async function addTask() {
  // code implementation
}

The deleteTodo function takes in a parameter TodoID, which is the ID of the tasks you want to delete.

To catch any errors that occur and log them gracefully to the console, we place this function call in a try-catch block.

We use the Fetch API to send an HTTP DELETE request to localhostAdress with the ID in the URL. We then await the response from the request and parse it as JSON.

If the request was successful, we console log the success message returned from the server. In this case, we do not return the result because we don’t need it.

Delete Todo Item from the User Interface

To delete a Todo item from the user interface, we need to manipulate the DOM.

To add functionality to the delete button action, we define a deleteTaskButton function below displayTodos() function.


function deleteTaskButton() {
  const deleteTodoButtons = document.querySelectorAll(".delete");

  for (const deleteButton of deleteTodoButtons) {

    deleteButton.onclick = async function () {
      const todoID = deleteButton.getAttribute("data-id");
      await deleteTodo(todoID);
      displayTodos();
    };
  }
}

Inside the function, we use the queryselectorAll to select all the elements on the DOM with the class name "delete". We then loop through the deleteTodoButtons node list and assign an onlick evenlister to each button.

When a user clicks the delete icon button:

We create a constant todoID that we will use to access the ID for each todo item. To get the TodoID, we update the button element with a data-id attribute.

If you check the code snippet below, I updated the button element with class ’delete’ to show how to add the data-id attribute.

async function displayTodos() {

  <button data-id=${todo.id} class="delete">
  // rest of code...
}

Next, we assign the todo.id as the data-id attribute value. which is one of the properties of a todo in the **todolist**.

To get the todo.id saved in the data-id attribute, we use the getAttribute method and store the value in a todoID.

Next, we call the deleteTodo function and pass in the todoID as a parameter to delete the item and await the result. After the item is deleted, we refresh the todo list to show the updated list.

Finally, we call the deleteTaskButton() function inside displayTodos() so that it is available to displayTodos when a user clicks the delete button.

async function displayTodos() {
  // code implementation ...

  deleteTaskButton();
}
displayTodos();

To view changes, compile the file tsc static/script.ts and restart the Go server if using one.

Update a Todo

To update a To-do item, we will be implementing two forms of editing.

users will be able to edit the To-do item title.
users will be able to mark a To-do item as completed or not.

Users will be able to edit the To-do item title.

To edit the To-do item title, we will start by defining an asynchronous function that will make an API call to update the To-do item in the database. This function will take a TodoID and the data object to be passed as the parameters and part of the request body.

Place the code below deletTodo and addTask function

async function deletTodo() {
  // code implementation
}

async function updateTodo(id, data) {
  try {
    const response = await fetch(`${localhostAddress}/${id}`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });
    const result = await response.json();
    console.log("Success:", result);
  } catch (error) {
    console.error("Error:", error);
  }
}

async function addTask() {
  // code implementation
}

After creating the updateTodo async function for updating a To-do Item HTTP Request, When a user clicks the edit button, we want to load the To-do item title into the input box. To achieve this, we need to create a variable to track whether the user is currently editing a To-do item or not. This is necessary because we use the same input box to edit and add new items to the list.

At the beginning of the file where you defined your variable, create isEditingTask and set it to false. Also create an editButtonTodoID variable, we will use it to store the id of the todo we want to edit.

const submitButton = document.querySelector("#submit");

let isEditingTask = false;
let editButtonTodoID = '';

Next, navigate to the displayTodos function and add the data-id attribute to <button class=edit>. Also, add a editTaskTitleButton below deleteTaskButton in the displayTodos function.

async function displayTodos() {
  <button data-id=${todo.id} class="edit">
  // code that lists the todo...

  deleteTaskButton();
  editTaskTitleButton();
}

Now, let’s define a editTaskTitleButton function. Place this code below deletTaskButton()

function deleteTaskButton() {
    // ...
}

function editTaskTitleButton() {
  const editTodoTitleButtons = document.querySelectorAll(".edit");

  for (const editButton of editTodoTitleButtons) {
    const todoName = editButton.parentNode.parentNode.children[0];

    editButton.onclick = async function () {
      newTodoInput.value = todoName.innerText;
      submitButton.innerHTML = "Edit";
      isEditingTask = true;

      editButtonTodoID = editButton.getAttribute("data-id");
    };
  }
}

In the code above, we use the document.querySelectorAll to fetch all the button elements with class='edit'. we save the NodeList element in a variable called editTodoTitleButtons. Next, we loop through the list to access the to-do button.

To access the todo item title, we can use the editButton.parentNode.parentNode.children[0] code. This code moves up the DOM hierarchy, allowing us to select the first child element of the second parent. We store this element in the todoName variable, giving us access to the inner text representing the title of the todo item.

Now that we can access to the todo item title in the DOM, we want to load the text into the input box. To do that, we attach an onclick event listener to the “edit” button so when a user clicks on the edit button, we:

we set the input box value to the todo item title text
change the submit button text to edit (this is optional)
set isEditingTask variable to true
get the todo ID from the data-id attribute and save it in the editButtonTodoID variable we defined at the top.

Your app should be able to load a todo title into the input box when you click on it now.

Next, let's create an edit tasks function to handle editing a todo item on the UI. For now, we can only load the text into the input field. Place the code below addTask() function.

async function addTask() {
  // code implementation
}

async function editTask() {
  const data = { title: newTodoInput.value, completed: false };

  if (isEditingTask) await updateTodo(editButtonTodoID, data);
  displayTodos();

  newTodoInput.value = "";
  isEditingTask = false;
  submitButton.innerHTML = "Add";
}

async function displayTodos() {
  // code implementation
}

In the code above, we create a data object with the title and completed property. The title is set to newTodoInput.value, which is whatever is in the input box when the user clicks the submit button. We set completed to false for now because the API expects a completed property to be present; later, we will update the value for the completed prop accordingly.

Next, we check to see if isEditingTask is true, which means the user is editing a task, remember we set isEditingTask to true when a user clicks the edit button. We call the updateTodo function and pass in the TodoID and data object as arguments. We await the result and refresh the to-do item list when done. Next, clear the input field and set isEditingTask to false to indicate we are done. Finally, update the submit button text back to "Add".

Lastly, update the submit button event listener to call editTask function if isEditingTask is true.

submitButton.addEventListener('click', () => isEditingTask ? editTask() : addTask())

To view changes, restart the Go server if using one.

Users will be able to mark a To-do item as completed.

To implement this functionality, the process involves two main steps:

Styling the to-do title text to indicate whether an item is marked as completed.
Updating the completed property within the data object to reflect the item's status on the server

Styling the to-do title text to indicate whether an item is marked as completed

First, we want to style the todo title text to visually indicate whether an item is marked as completed or not. Update the HTML structure within the displayTodos function:

<div class="todo">
  <span
    id="todoname"
    style="text-decoration:${todo.completed ? 'line-through' : ''}"
    data-iscomplete="${todo.completed}"
    data-id="${todo.id}"
  >
    ${todo.title}
  </span>
   ...
</div>

In the code above:

We use the style attribute to set the text-decoration property of the todo title span element.
If todo.completed is true, we set text-decoration: line-through to visually strike through the text, indicating that the item is completed.
If todo.completed is false, no text-decoration is applied.

We also add two custom attributes, data-iscomplete and data-id, to store the completed status and the ID for each todo item. These attributes will help us access and update the values later.

We also added an HTML id attribute to make it easy to fetch the list of all the to-do titles displayed on the DOM.

Toggle Todo Item as Completed or Not

Next, we want to allow users to click on a todo item to toggle its completion status. To achieve this, add the following code. below editTaskTitleButton() function.

Also call the toggleTaskCompletion inside the dislayTodos function like we did for deleteTaskButton and editTaskTiltleButton

async function displayTodos() {
  <button data-id=${todo.id} class="edit">
  // code that lists the todo...

    deleteTaskButton();
    editTaskTitleButton();
    toggleTaskCompletion();
}

function deleteTaskButton() {
  // code implementation
}

function editTaskTitleButton() {
  // code implementation
}

function toggleTaskCompletion() {
  const editTaskCompleted = document.querySelectorAll("#todoname");

  for (const task of editTaskCompleted) {
    task.onclick = async function () {
      const isTaskDone = JSON.parse(task.getAttribute("data-iscomplete"));
      const todoID = task.getAttribute("data-id");

      const data = { title: task.innerText, completed: !isTaskDone };
      await updateTodo(todoID, data);
      displayTodos();
    };
  }
}

In the code:

we fetch all HTML elements with ID #todoname and store them in a todoTitleEmlement variable.
We iterate through the list of HTML elements to get access to the data-iscomplete and data-id attribute for each element.

When a user clicks on a todo item title, the following actions occur:

We use JSON.parse to convert the data-iscomplete attribute from a string to a boolean value.
We use the getAttribute method to fetch the data-iscomplete and data-id values and store them in isTaskDone and todoID variable.
We create a new data object with the title property set to the text of the clicked todo item text.
we set completed property to !istaskDone to toggle the value of the completed status between true and false.
We call the updateTodo function with the ID and data object as arguments to update the completed status and await the result.
Finally, we call displayTodos to refresh the todo list and display the changes.

This completes the functionality of marking a Todo item as completed or not and updates the UI accordingly.

Your App should look like this;

Update the completed property when editing the To-do item title.

In our previous work, specifically within the editTask function, we focused on updating the todo title. At that time, we hardcoded the completed property to false.

Now, we aim to improve the code by dynamically setting the completed property to the value stored in the data-iscomplete property.

Here are the steps:

Create an isComplete Variable

To store the value from the data-iscomplete property, we create an isComplete variable and set it to false:

let isEditingTask = false;
let todoID = ''
let isComplete = false

Update the editButton.onclick function inside editTaskTitleButton()

Within the editButton.onclick function, we need to set the isComplete variable to the value of the data-iscomplete property. This is done when a user clicks on the edit button:

editButton.onclick = async function () {
  newTodoInput.value = todoName.innerText;
  submitButton.innerHTML = "Edit";
  isEditingTask = true;

  editButtonTodoID = editButton.getAttribute("data-id");
  isComplete = JSON.parse(todoName.getAttribute("data-iscomplete"));
};

Now, when a user clicks the edit button, it updates the isComplete variable with the value from the data-iscomplete attribute. JSON.Parse converts it from a string to a boolean.

async function editTask() {
  const data = { title: newTodoInput.value, completed: isComplete };

  if (isEditingTask) await updateTodo(editButtonTodoID, data);
  displayTodos();

  newTodoInput.value = "";
  isEditingTask = false;
  submitButton.innerHTML = "Add";
}

This ensures that when you edit a todo item, the completed property retains its previous value, either true or false based on data-iscomplete attribute.

With these changes, your code effectively handles marking todo items as done and updating the completed attribute when editing a todo item.

View the complete code on GitHub

Conclusion

In this tutorial, we've built a Todo app's frontend using Vanilla JavaScript and the Fetch API. We've covered all the CRUD operations:

Fetched and displayed todo items from the API.
Enabled users to add new tasks and updated the UI accordingly.
Implemented the ability to delete tasks from the UI.
Enhanced the editing feature, allowing both title updates and marking tasks as completed.
Styled completed tasks by toggling the "text-decoration" CSS property.

Stay tuned for an upcoming TypeScript version of this tutorial.

This guide covers key frontend development skills, including API interaction, CRUD operations, and dynamic user interface creation. Building a Todo app is an ideal starting point for web development, offering insights and skills for broader applications.

Please feel free to email me or drop a comment if you have any questions, feedback, or need help with any part of the tutorial.

I hope you found this article helpful ❤️

Recommended Reads

Setup HTML Templates and Static Assets in Golang

Kelechi Ogbonna — Sun, 31 Dec 2023 19:29:54 +0000

This article is a continuation of the previous one, where we built a simple Todo App backend with Golang.

If you are new to Go and would like an easy way to get your feet wet, check out my article on building a Simple Todo CRUD REST API with Go and MongoDB.

This guide focuses on generating HTML templates, serving static CSS and Javascript files in Go, setting up the Fronted app and connecting it to the backend.

As we've finished building the backend application, it's time to set up the front end, connect it to the backend, and create a full-stack web application.

This article lays the foundation for the upcoming one, where we will build a Todo Frontend App with the Fetch API and Vanilla JavaScript (with a TypeScript version available).

This Todo App has monolith architecture, indicating the Frontend and Backend share the same codebase.

We are using Go to create a simple web server service that will serve HTML, CSS and JavaScript files when you navigate to a localhost address.

Render HTML template in Go.

To render HTML templates in a Go application, we first need to parse them. Parsing means that Go can read the HTML template file we create, identify syntax and placeholder tokens, and then render the file as an HTML file.

The renderer package, which we use for handling API responses in the Golang backend todo app, provides a straightforward way to parse HTML templates. Under the hood, it uses the Go html/template package. However, you can use the default Go html/template package, depending on your preference.

ADD HTML Template

The HTML template contains code for a task input box and a submit button. The div with id "todos" is used to add todos retrieved from the backend API and display them dynamically in the todos div on the Frontend.

To add the HTML template,

Create an “html” folder in your project’s root directory.
Inside the folder, create an “index.html” file.
Copy and paste the following code into the "index.html" file, or you can download the file from GitHub.

{{define "indexPage"}}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>To Do App - with html, css and Javascript</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
    />

    <link rel="stylesheet" type="text/css" href="/static/style.css" />
  </head>

  <body>
    <div class="container">
      <div id="new-todo">
        <input type="text" placeholder="Tasks to be done" />
        <button type="button" id="submit">Add</button>
      </div>
      <div id="todos"></div>
    </div>
  </body>
</html>
{{end}}

In the code above, we define an HTML template named” indexPage”, which we will serve as the Response when a user navigates to our homepage.

We linked the CSS file to the index page, ensuring the HTML templates applied the styles correctly.

Add CSS File

To add the CSS file;

Create a Static folder in the root directory. You can name this folder “public” or “assets” if you want.
Inside the folder, create “style.css” file.
Copy and paste the following code into the "style.css" file, or you can download the file from GitHub. (link to file on GitHub).
Link the css file to “index.html” file. Make sure you have added the css link to the <head> tag in the index.html file

<head>
  ...
  <link rel="stylesheet" type="text/css" href="/static/style.css" />
</head>

This is a basic styling I created for the Todo app frontend layout. Feel free to use this or the styles of your choice.

static/style.css

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  background: linear-gradient(135deg, #8052ec, #d161ff);
}

.container{
 border: 2px solid white;
 width: 40%;
 min-width: 450px;
 position: absolute;
 transform: translate(-50%, -50%);
 top: 50%;
 left: 50%;
 padding: 30px 40px;
}

#new-todo{
background-color: #fff;
padding: 30px 20px;
border-radius: 5px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

#new-todo input{
 width: 70%;
 height: 45px;
 font-family: 'Poppins', Verdana, Geneva, Tahoma, sans-serif;
 font-size: 15px;
 border: 2px solid #d1d3d4;
 padding: 12px;
 color: #100f0f;
 position: relative;
 font-weight: 500;
 border-radius: 5px;
}

#new-todo input:focus {
 outline: none;
 border-color: #8052ec;
}

#new-todo button {
 position: relative;
 float: right;
 width: 20%;
 height: 45px;
 border-radius: 5px;
 font-family: 'Poppins', Verdana, Geneva, Tahoma, sans-serif;
 font-weight: 500;
 font-size: 16px;
 border: none;
 background-color: #8052ec;
 color: #fff;
 cursor: pointer;
}

#todos {
 background-color: #fff;
 padding: 30px 20px;
 margin-top: 10px;
 border-radius: 10px;
 width: 100%;
 box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
 position: relative;
}

.todo {
 background-color: #fff;
 height: 50px;
 padding: 5px 10px;
 margin-top: 10px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 border-bottom: 2px solid #d1d3d4;
 cursor: pointer;
}

.todo span{
 font-family: 'Poppins', Verdana, Geneva, Tahoma, sans-serif;
 font-size: 15px;
 font-weight: 400;
}
.todo .actions {
  height: 100%;
}
.todo button {
 background-color: #8052ec;
 color: #fff;
 height: 100%;
 width: 40px;
 border-radius: 5px;
 border: none;
 cursor: pointer;
 outline: none;
}

.completed{
 text-decoration: line-through;
}

Your folder structure should look like this;

You can check the code on GitHub for reference

Parse HTML template

Now we have the HJTML and CSS files set up, let’s get Golang to display them. In your main.go file, update the renderer method in func init by adding the HTML parsing option to rnd = renderer.New() .

func init() {

    rnd = renderer.New(
        renderer.Options{
            ParseGlobPattern: "html/*.html",
        },
    )
...
}

Here, we create a new renderer instance and set the ParseGlobPattern option. This option allows us to look for files inside the HTML folder with the “.html” extension and render them as templates.

Now, update the homeHandler in main.go file to return the content from the indexPage in the HTML template so that when a user makes a browser HTTP request to “localhost:9000/”, it returns the indexPage in the HTML template.

func homeHandler(rw http.ResponseWriter, r *http.Request) {
    // filePath := "./README.md"
    // err := rnd.FileView(rw, http.StatusOK, filePath, "readme.md")

    err := rnd.HTML(rw, http.StatusOK, "indexPage", nil)
}

Here, I commented out the README.md file that was being returned and replaced it with the "HTML" template renderer, as mentioned above.

Run go run main.go to view the result.

Note: If you used my Go Todo Backend API tutorial, make sure to have your database up and running, otherwise the app will crash.

Serve Static CSS and JavaScript Files in Go.

After running main.go and navigating to localhost:9000. You notice that the HTML lacks CSS, and the URL returns a 404 error for the static files.

To fix this error, we must serve the static files to Go by publishing the CSS files.

To publish the static files, update func main in main.go and add the following code after where you defined middleware.Logger and before where you specified the homehandler to ensure that the static files are available when a user sends a request to localhost:9000.

/main.go

// Serve static files
fs := http.FileServer(http.Dir("./static"))
router.Handle("/static/*", http.StripPrefix("/static/", fs))

In the code above, we use the file server handler http.fileServer to serve static files from the ‘static’ directory on the server.

The router.Handle method handles the route for serving static files. In this example, we use chi.Router,so update accordingly to whatever router you are using. This setup specifies that any URL path request starting with “/static/” should be handled by the ‘fs’ (file server ).

The http.StripPrefix removes the ‘static’ prefix from the request URL, so instead of the request URL to be domain-name/static/static/style.css, it will be domain-name/static/styles.css.

Once you complete the setup, run go run main.go and navigate to localhost:9000 in your web browser. You will see that the page has applied the styles, and the URL will return a 200 status ok for the CSS and script file( if you added one ), indicating that the server has successfully served the static files.

JavaScript File

Adding a JavaScript file is no different from adding a CSS file. The process is exactly the same. Simply create a script.js file inside the static folder (or whichever folder name you used). After restarting the server, the JavaScript file will be picked up and served, just like the CSS file.css file.

Final Result

This is what the UI looks like with the styles applied;

TypeScript Configuration and Setup

If you're using vanilla JS, you can write the JavaScript code directly in the script tag or a separate file.

But for TypeScript, It’s best to create a separate script.ts file, compile it to JavaScript using the TypeScript compiler, and then import the resulting script.js file into your HTML template.

Why? Because it was difficult to find compilers that could compile the Typescript in the <script> tag in the HTML file, and I couldn't find one that worked well enough.

To add a TypeScript file, run this npm command to install Typescript globally.

npm install -g typescript

Then, check the installed version by running tsc --version.

Create a tsconfig.json file at your project's root and paste the configuration code into it. Adding the tsconfig.json file is recommended for more precise code management and better code quality.

/tsconfig.json

{
  "compilerOptions": {
    "target": "es2017",
    "module": "ESNext",
    "sourceMap": true,
    "strict": true,
    "alwaysStrict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "allowUnreachableCode": false,
    "strictFunctionTypes": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true
  }
}

Next, add a script.ts file to the static folder.

To compile the script.ts file,

tsc static/script.ts

By default, TypeScript will output the compiled JavaScript file script.js in the same folder as the TypeScript file. If you want to change this behaviour, you can add the "outDir" option to the configuration. For example, setting "outDir": "dist" will output the compiled file to the dist folder.

Don't forget to include script.js as the script tag above </body> tag source in your HTML code.

<script  src="/static/script.js"></script>

Your folder structure should look like this;

To test, add a simple code to the script.ts file (e.g. console.log(’hello’) )and compile the ts file to test. If using a middleware logger, you should see the GET request result on the terminal.

Now, you're all set to write and compile TypeScript code.

Get the complete code for HTML template setup and asset files on GitHub.

For TypeScript configuration, check out the file on GitHub.

Conclusion

In this continuation article, we learned how to generate HTML templates and serve static CSS and JavaScript files using Golang; we set up a Typescript configuration for people who would prefer to use it. Following the steps outlined in this guide, we can now render HTML templates, parse them, and serve static files.

With this basic setup, we are ready to build the Todo App Frontend with HTML, CSS, and Vanilla JavaScript or TypeScript, using the JavaScript Fetch API to consume the Todo backend API endpoints.

Recommended Reads

Build a Golang Todo App Backend: A Step-by-Step Guide

Kelechi Ogbonna — Fri, 29 Dec 2023 06:08:15 +0000

In this tutorial, you will learn how to build a Todo app backend with Golang.

If you are new to programming or a Dev who desires to learn Golang, this is a way you can slowly introduce yourself to the language and understand the basics and how building APIs work in Go.

It is beginner-friendly, and I explain the function of each line of code so you can understand what the code does. You will learn how to build CRUD REST API endpoints, connect to a MongoDB database with Docker, create a server and shut down the server gracefully, test the APIs on Postman and consume the APIs in the Frontend using Go html/templates(HTML, CSS and JavaScript).

Prerequisite

You don’t need to know Golang, but I advise you to go through A Tour of Go to understand how variables, loops and if statements work.

To follow along,

Install Docker and Golang. Docker is for the database provision.
You have gone through the BASICS part on A Tour of Go.

What we will build

REST API endpoints: Create, Get, Update, and Delete API endpoints for the To-do App.
Use Mongo DB for the database connection and storage.
Postman to test the endpoints

Build Todo APIs in these Steps;

1. Set up the project folder and import packages needed.

To start, create a folder for the Todo App backend. Open the project folder in a terminal and run the command below.

Replace <github-username> with your GitHub username and <folder-name> with the project folder name you created.

go mod init github.com/<github-username>/<folder-name>

// e.g github.com/kellswork/golang-todo-app

The code above creates a go.mod file which is similar to a package.json file in JavaScript projects.

The main.go file will serve as the entry point to the project. In this project, we will write the whole code in the main.go file.

Download the packages we need

To download packages, open the project folder in a terminal and run the commands one after the other.

The go.mod file shows a list of all the packages downloaded.

go get "github.com/go-chi/chi/v5"

go get "github.com/thedevsaddam/renderer"

go get go.mongodb.org/mongo-driver/mongo

go get go.mongodb.org/mongo-driver/bson

go-chi: is a lightweight, idiomatic and composable router for building Go HTTP services.

thedevsaddam/render: Simple, lightweight and faster response (JSON, JSONP, XML, YAML, HTML, File) rendering package for Go

mongodb.org/mongo-driver: The MongoDB supported driver for Go.

Import downloaded packages into the main.go file

Open the project folder in VS Code or any editor of choice and create a main.go file.

Your project file structure should look like this;

Note: go.mod and go.sum files are auto-generated.

Import the downloaded packages and some in-built Go packages we require to build the todo app backend. VS Code will import other in-built Go packages we are yet to import while building the endpoints. If the package is unavailable, the linter will prompt you to download it.

package main

import (
    "context"
  "fmt"
    "time"

    "github.com/go-chi/chi/v5"
    "github.com/go-chi/chi/v5/middleware"
    "github.com/thedevsaddam/renderer"
    "go.mongodb.org/mongo-driver/bson"
    "go.mongodb.org/mongo-driver/bson/primitive"
    "go.mongodb.org/mongo-driver/mongo"
    "go.mongodb.org/mongo-driver/mongo/options"
    "go.mongodb.org/mongo-driver/mongo/readpref"
)

Note that when you save, Go editor will delete unused imports. So these imports will disappear if you save without using them.

Create variables to store values

Create a pointer variable rnd of type render.Render, client of type mongo.Client and db of type mongo.Database. Also, define const variables to store the database name and collection name.

var rnd *renderer.Render
var client *mongo.Client
var db *mongo.Database

const (
    dbName         string = "golang-todo"
    collectionName string = "todo"
)

To learn more about pointers, this Tutorial explains Pointers in Go clearly.

2. Create a Struct Type

Go is a typed language, and struct is a collection of user-defined fields.

In the code below, we created a TodoModel struct type that we will use to store the todo data in the MongoDB database.

We also created a Todo struct type that matches the TODO entries that the Frontend will display.

Why? Because MongoDB stores data in bson format, we need to convert the bson data format to JSON data format for the browser to read the data.

type (
    TodoModel struct {
        ID        primitive.ObjectID `bson:"id,omitempty"`
        Title     string             `bson:"title"`
        Completed bool               `bson:"completed"`
        CreatedAt time.Time          `bson:"created_at"`
    }

    Todo struct {
        ID        string    `json:"id"`
        Title     string    `json:"title"`
        Completed bool      `json:"completed"`
        CreatedAt time.Time `json:"created_at"`
    }
)

Struct tags like json:"id" specifies the field's name, in this case id for when the struct's contents are serialised into JSON.

3. Create an init function and connect to a database

We use the init function to set up and initialise the database and To create a new renderer, rnd. In Go,the init function always runs before any other function in a package; in this case, it will run before func main.

func init() {
    fmt.Println("init function running")

    rnd = renderer.New()
    var err error

    ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
    defer cancel()

    client, err = mongo.Connect(ctx, options.Client().ApplyURI("mongodb://localhost:27017"))
    checkError(err)

    err = client.Ping(ctx, readpref.Primary())
    checkError(err)

    db = client.Database(dbName)
}

In the code above:

We added a print line to indicate the go init function is running.

We created a database connection to a MongoDB database server and stored the result in the client variable.

If an error occurs and the database connection is unsuccessful, checkError will stop the app and log the error to the console.

If the connection is successful, we create a new database, pass in the dbName const as the database name and save the value in the db variable.

checkError is a function that has not yet been defined, so Go linter will show an undefined error.

Provision and Connect to the Database with Docker

Note you don’t have to use Docker for this step. There are other ways to create a MongoDB database, but for ease, I will do this in Docker. Docker provides a fast and easy way to have a database up and running.

Setup your database in the following steps:

Create a new folder and name it dependencies. This folder can be in the same directory as your Todo App.
Open a terminal, cd into the dependencies folder, create another folder and call it mongo.
Inside the mongo folder, create a file and name it docker-compose.yml.
open the docker-compose.yml file in your code editor and paste the code below.
don’t forget to replace the placeholder with your database name on the -MONGO_INITDB_DATABASE= environment variable.

version: '3.8'
services:
  db:
    image: mongo
    restart: always
    environment:
      - MONGO_INITDB_DATABASE=<db-name>
    ports:
      - 27017:27017
    volumes: 
      - $PWD/data/db:/data/db
volumes:
  db:
    driver: local

4. Define `checkError` function

The checkError function is used to check for errors, as seen in the init function. For this tutorial, we use log.fatal to stop the app and log the error to the console. It takes an ( err Error) parameter. When err is not empty, the function will log the error message on the console and terminate immediately.

Add this code after the init function.

func checkError(err error) {
    if err != nil {
        log.Fatal(err)
    }
}

5. Create and Connect to a Go Server

Go has an HTTP package that provides HTTP client and server implementations.

Create func main() between func init() and checkerror().

Add the code below to connect to a server.

func main() {
    server := &http.Server{
        Addr:         ":9000",
        Handler:      chi.NewRouter(),
        ReadTimeout:  60 * time.Second,
        WriteTimeout: 60 * time.Second,
    }

    // start the server
    fmt.Println("Server started on port", 9000)
    if err := server.ListenAndServe(); err != nil {
        log.Printf("listen:%s\n", err)

    }
}

In the code above, we created a server variable and assigned a &http.Server with a port number of “:9000” and a new chi router handler chi.NewRouter().
ListenAndServe starts the HTTP server with the port address and router handler.
At this point, you can build and run main.go to see that your server has been started on port:9000.

Connect to the Database and Run the Server

make sure you have the Docker Desktop app open
cd into the mongo folder we created earlier and run docker compose up in the terminal.
A MongoDB container will be created for you to use for the database storage.
Go back to the todo app project folder, open the folder in the terminal and run go build.
After it builds successfully with no errors, run go run main.go to start the server.
If no database connection error is thrown, then you should see a log message from the server.

init function running
Server started on port 9000

6. Shutdown the server gracefully

shutting down the server gracefully, while not compulsory is recommended. Shutting down the server gracefully allows the server to finish handling any active request before closing all connections. Go provides an http.Server.Shutdown function for this.

Update the func main function to include the code for shutting down the server.

func main() {
    server := &http.Server{
        Addr:         ":9000",
        Handler:      chi.NewRouter(),
        ReadTimeout:  60 * time.Second,
        WriteTimeout: 60 * time.Second,
    }

    // create a channel to receive signal
    stopChan := make(chan os.Signal, 1)
    signal.Notify(stopChan, os.Interrupt)

    // start the server in a separate go routine.
    go func() {
        fmt.Println("Server started on port", 9000)
        if err := server.ListenAndServe(); err != nil {
            log.Printf("listen:%s\n", err)
        }
    }()

    // wait for a signal to shut down the server
    sig := <-stopChan
    log.Printf("signal recieved: %v\n", sig)

    // disconnect mongo client from the database
    if err := client.Disconnect(context.Background()); err != nil {
        panic(err)
    }
    // create a context with a timeout
    ctx, cancel := context.WithTimeout(context.Background(), 30*time.Second)
    defer cancel()

    // shutdown the server gracefully
    if err := server.Shutdown(ctx); err != nil {
        log.Fatalf("Server shutdown failed: %v\n", err)
    }
    log.Println("Server shutdown gracefully")
}

We created a stopChan variable of type channel to receive only an os.Signal with 1 capacity.

signal.Notify will send an os.Interrupt signal to stopChan when it receives an interrupt signal (ie. pressing control+c).

we create a context with a timeout and call the Shutdown() method on the server.

Press control+c to see the messages printed on the console.

7. Create Router and Route Handlers for Home and Todo

An HTTP router listens for HTTP requests and forwards the request to the appropriate handler functions.

Add this code at the top of the func main , directly above the server variable.

func main() {

    router := chi.NewRouter()
    router.Use(middleware.Logger)
    router.Get("/", homeHandler)
    router.Mount("/todo", todoHandlers())

    server := &http.Server{

In the code above;

we define a new chi Router variable router.
we use middleware.Logger from chi to log the HTTP URLs Requests in the console.
router.Get to create a home router and router.Mount to create a todo sub-router.
Mount attaches another http.Handler along ./pattern/*

Replace chi.NewRouter() with router variable in the server definition as shown below.

server := &http.Server{
        Addr:         ":9000",
        Handler:      router,
        ReadTimeout:  60 * time.Second,
        WriteTimeout: 60 * time.Second,
    }

8. Create a Group Route for Todo Routers

Next, we define a todoHandlers() function that groups all the route API endpoints needed for the Todo app. It handles all HTTP requests directed at "/todo".

Place this code between the func main and the func checkError.

func todoHandlers() http.Handler {
    router := chi.NewRouter()
    router.Group(func(r chi.Router) {
        r.Get("/", getTodos)
        r.Post("/", createTodo)
        r.Put("/{id}", updateTodo)
        r.Delete("/{id}", deleteTodo)
    })
    return router
}

We are done with the database and server setup. Next, let's define all the Route Handlers for the different API endpoints.

9. Define the homeHandler Function

Create a func Handler function and place it between func init and func main in the main.go file.

Create a readme file at the root of the project to match the filePath variable.

func homeHandler(rw http.ResponseWriter, r *http.Request) {
    filePath := "./README.md"
    err := rnd.FileView(rw, http.StatusOK, filePath, "readme.md")
    checkError(err)
}

In the code above, we created a handler function called homeHandler that displays the content of the README.md file when a browser HTTP request is made to "localhost:9000/". This will serve as the home page.

A handler in Go is a function that takes 2 signature parameters (http.ResponseWriter, http.Request).

http.ResponseWriter handles the HTTP response to the client. In this example, we are sending a README.md text file as a response.
http.Request handles all incoming requests from the browser to `"localhost:9000/**"`.It contains all the information about the HTTP request including the headers and URL.
rnd.FileView renders the readme file.
http.StatusOK An 200 HTTP status code, indicates that the request was successful.
checkError will stop the app and log the error if the response failed for any reason.

Later, we will update rendered readme file with Todo App Frontend built with(HTML,CSS and javascript) Go html/Template.

10. Define the CRUD TodoHandlers Function

Get Todos

This function handles all HTTP Get requests for "localhost:9000/todo" It fetches the TODO entries from the database and sends them as a JSON response.

func getTodos(rw http.ResponseWriter, r *http.Request) {
    var todoListFromDB = []TodoModel{}
    filter := bson.D{}

    cursor, err := db.Collection(collectionName).Find(context.Background(), filter)

    if err != nil {
        log.Printf("failed to fetch todo records from the db: %v\n", err.Error())
        rnd.JSON(rw, http.StatusBadRequest, renderer.M{
            "message": "Could not fetch the todo collection",
            "error":   err.Error(),
        })

        return
    }
}

💡 import "go.mongodb.org/mongo-driver/bson" for the undefined: bson error.

In the code above, we declare a variable todoListFromDB as an empty list and of type TodoModel.

Next, we create a filter variable without any conditions, this way all data in a collection will be sent back.

db.Collection(collectionName).Find(context.Background(), filter) executes a database query to retrieve the TODO entries based on the provided filter. The retrieved data is stored in the cursor variable. If an error occurred while retrieving the TODO entries, we return a JSON response object with the error message.

After retrieving the data successfully from the database, We declare another variable todoList and assign an empty list with type Todo. todoList is created to convert and store TODO entries fetched from the DB from bson to JSON format.

    func getTodos(rw http.ResponseWriter, r *http.Request) {
    ...

    todoList := []Todo{}
    if err = cursor.All(context.Background(), &todoListFromDB); err != nil {
        checkError(err)
    }

// loop through the database list, convert TodoModel to JSON and append to the todoList array.
    for _, td := range todoListFromDB {
        todoList = append(todoList, Todo{
            ID:        td.ID.Hex(),
            Title:     td.Title,
            Completed: td.Completed,
            CreatedAt: td.CreatedAt,
        })
    }
    rnd.JSON(rw, http.StatusOK, GetTodoResponse{
        Message: "All todos retrieved",
        Data:    todoList,
    })

}

In the code above, the todoListFromDB is iterated over using a for loop with the blank identifier since we don't need the index value. The loop converts each TodoModel type TODO entry in todoListFromDB to a Todo type and appends the converted TODO entry to the todoList.

I have created a custom type called GetTodoResponse to precisely define the structure of the JSON response data returned.

To add this custom type renderer, update type to include the GetTodoResponse struct type.

Creating a JSON response struct type provides a structured way to organise the data that will be sent as a JSON response from the server.

type (
    ...

    GetTodoResponse struct {
        Message string `json:"message"`
        Data    []Todo `json:"data"`
    }
)

If the get request is successful, we return a JSON response with a message and the Todo items data as shown above.

Create(POST) Todo

This function handles all HTTP POST requests for "localhost:9000/todo" . It processes the client’s input and creates and stores a new TODO entry in the database.

Let’s create a custom struct type CreateTodo for the request body. The only field the user fills is the Title field. update type to include createTodo struct.

type (
    // ...previous structs

    CreateTodo struct {
        Title string `json:"title"`
    }
)

Create a func CreateTodo function handler. Inside the function, create a todo variable of type CreatTodo to store the user input sent through the request body.

json.NewDecoder(r.body)Decode(&todo) decodes the input sent in the request body. If an error occurrs and it fails to decode the response body, we return a JSON response with a 400(Bad Request) HTTP status code and an error message.

func createTodo(rw http.ResponseWriter, r *http.Request) {

    var todoReq CreateTodo

    if err := json.NewDecoder(r.Body).Decode(&todoRequestBody); err != nil {
        log.Printf("failed to decode json data: %v\n", err.Error())
        rnd.JSON(rw, http.StatusBadRequest, renderer.M{
            "message": "could not decode data",
        })
        return
    }

    if todoReq.Title == "" {
        log.Println("no title added to response body")
        rnd.JSON(rw, http.StatusBadRequest, renderer.M{
            "message": "please add a title",
        })
        return
    }

After decoding the response body successfully, we check if the title field data is an empty string. If true, we return a JSON response with a 400(Bad Request) HTTP status code and an error message indicating the title field cannot be empty.

Now we have validated the client is sending the correct data in the request body, create a todoModel variable of type TodoModel and set the Title field to todoRequestBo.Title. We pass the todoModel into the db.Collection(collectionName).InsertOne(r.Context(), todoModel) . This inserts the todoModel into the database.

    // create a TodoModel for adding a todo to the database
    todoModel := TodoModel{
        ID:        primitive.NewObjectID(),
        Title:     todoReq.Title,
        Completed: false,
        CreatedAt: time.Now(),
    }

    // add the todo to the database
    data, err := db.Collection(collectionName).InsertOne(r.Context(), todoModel)
    if err != nil {
        log.Printf("failed to insert data into the database: %v\n", err.Error())
        rnd.JSON(rw, http.StatusInternalServerError, renderer.M{
            "message": "Failed to insert data into the database",
            "error":   err.Error(),
        })
        return
    }
    rnd.JSON(rw, http.StatusCreated, renderer.M{
        "message": "Todo created successfully",
        "ID":      data.InsertedID,
    })
}

If inserting todoModel into the database fails, we return a JSON response with a 500(Internal Server Error) HTTP status code and an error message indicating the insertion failed due to a database error.

If the database insertion was successful, we return a JSON response with a 201(Created)HTTP status code, a success message and the newly created TODO item unique ID.

Update(PUT) Todo

This function handles all HTTP PUT requests for "localhost:9000/todo/:id". It processes the client's input request to update some TODO entry fields stored in the database for the unique ID provided. In this case, we will be updating the title and completed field.

Let’s create a custom struct type UpdateTodo for the request body. The only fields the user fills are the Title and Completedfield.

type (
    // ...previous structs

UpdateTodo struct {
        Title     string `json:"title"`
        Completed bool   `json:"completed"`
    }
)

Create a func updateTodo handler.

func updateTodo(rw http.ResponseWriter, r *http.Request) {
    // get the id from the url params
    id := strings.TrimSpace(chi.URLParam(r, "id"))

    res, err := primitive.ObjectIDFromHex(id)
    if err != nil {
        log.Printf("the id param is not a valid hex value: %v\n", err.Error())
        rnd.JSON(rw, http.StatusBadRequest, renderer.M{
            "message": "The id is invalid",
            "error":   err.Error(),
        })
        return
    }

In the code above, we get the ID parameter from the URL path using chi.URLParam(r, "id"). we check if the ID is a valid hex value because the ID in the database is stored as a hex value. Next, we use primitive.ObjectIDFromHex(id) to convert the ID from hex to primitive.ObjectID because that is how the ID is stored in the database. primitive.ObjectIDFromHex(id) returns two values res and err.

If err is not empty, log the error to the console, and return a JSON response with a 400 (bad request) HTTP status code and an error message.

If res is not empty, the conversion was successful. Next, we decode the request body and validate that the JSON data sent by the client is valid.

Next, we create a updateTodoReq variable of type UpdateTodo to store the user input sent through the request body.

 var updateTodoReq UpdateTodo

    if err := json.NewDecoder(r.Body).Decode(&updateTodoReq); err != nil {
        log.Printf("failed to decode the json response body data: %v\n", err.Error())
        rnd.JSON(rw, http.StatusBadRequest, err.Error())
    }
    if updateTodoReq.Title == "" {
        rnd.JSON(rw, http.StatusBadRequest, renderer.M{
            "message": "Title cannot be empty",
        })
        return
    }

If decoding the JSON was successful, We store the decoded JSON data in updateTodoReq .

Next, check that the title field in updateTodoReq is not empty and return a JSON response if it is.

Having validated that the client provided a valid ID and non-empty fields, we define a filter variable that takes res as the ID. it will locate the specific TODO entry in the database with that ID and update it.

// update the todo in the database
    filter := bson.M{"id": res}
    update := bson.M{"$set": bson.M{"title": updateTodoReq.Title, "completed": updateTodoReq.Completed}}
    data, err := db.Collection(collectionName).UpdateOne(r.Context(), filter, update)

    if err != nil {
        log.Printf("failed to update db collection: %v\n", err.Error())
        rnd.JSON(rw, http.StatusInternalServerError, renderer.M{
            "message": "Failed to update data in the database",
            "error":   err.Error(),
        })
        return
    }
    rnd.JSON(rw, http.StatusOK, renderer.M{
        "message": "Todo updated successfully",
        "data":    data.ModifiedCount,
    })
}

We create an update variable and set the value of the title and completed fields to the data provided by the client saved in updateTodoReq.

db.Collection(collectionName).UpdateOne(r.Context(), filter, update) will fetch the data with the given ID and update the title and completed fields data.

If an error occurs while executing the update database fields operation, return a JSON response with a 500 (bad request) HTTP status code and an error message indicating that the update failed due to a database error.

If the update operation is successful, return a JSON response with a 200 (OK) HTTP response, a success message and the number of modified documents(in this case 1) to indicate the TODO item has updated successfully.

Delete Todo

This handler function handles all DELETE HTTP requests for "localhost:9000/todo/:id". It deletes a TODO item from the database.

func deleteTodo(rw http.ResponseWriter, r *http.Request) {
    id := chi.URLParam(r, "id")
    res, err := primitive.ObjectIDFromHex(id)
    if err != nil {
        log.Printf("invalid id: %v\n", err.Error())
        rnd.JSON(rw, http.StatusBadRequest, err.Error())
        return
    }

    filter := bson.M{"id": res}
    if data, err := db.Collection(collectionName).DeleteOne(r.Context(), filter); err != nil {
        log.Printf("could not delete item from database: %v\n", err.Error())
        rnd.JSON(rw, http.StatusInternalServerError, renderer.M{
            "message": "an error occurred while deleting todo item",
            "error":   err.Error(),
        })
    } else {
        rnd.JSON(rw, http.StatusOK, renderer.M{
            "message": "item deleted successfully",
            "data":    data,
        })
    }
}

In the code above, We extract the ID from the URL path using chi.URLParam(r, "id").

we check if the ID is a valid hex value and convert the ID from hex to primitive.ObjectID using primitive.ObjectIDFromHex(id). primitive.ObjectIDFromHex(id) returns two values res and err.

if err is not empty, the ID is invalid, we return a JSON response with a 400(Bad Request)HTTP status code and an error message indicating it’s an invalid ID.

If res is not empty, create a filter variable bson.M object to store the ID saved in the res . db.Collection(collectionName).DeleteOne(r.Context(), filter) will find the TODO entry with that ID and delete it from the database.

If deleting the TODO item from the database encounters an error, we return a JSON response with a 500(Internal Server Error) and the error message indicating an error occurred while deleting the TODO item.

If the database successfully deleted the item, return a JSON response with an HTTP status code 200(OK), the success message and the number of deleted entries in the database.

With this we are done building the REST APIs we need to perform CRUD operations.

Now you can test all the API endpoints created in this tutorial with Postman.

For the complete code, view it on GitHub.

Next Steps

In the upcoming sections, we'll cover:

Connecting a Todo Frontend to the Todo Backend: Learn how to set up HTML Templates and Static Assets in Golang
Building the Todo Frontend with Fetch API and Vanilla JavaScript(TypeScript version too )
Writing Go tests for the Todo backend.
Testing API endpoints using Postman.

Conclusion

In this tutorial, you've learned to set up a Go application, connect to a server, gracefully shut down the server, and create a Home API endpoint along with CRUD Todo API endpoints. With a functional backend, you can test all API endpoints using Postman. If you need to familiarize yourself with this process, watch for my upcoming article on testing API endpoints with Postman.

As for the front end, I have an upcoming guide on how to build a Todo App with Fetch API and Vanilla JavaScript. The TypeScript version will also be available. Before starting that, check out my recent article on connecting the frontend with the backend using HTML templates and static files ( CSS and JavaScript or TypeScript). It covers how to add and host static files on your Golang server. However, if you're not interested, I can provide you with a link to download the HTML, CSS, and JavaScript code so you can test the Todo backend API endpoints with the frontend UI instead of Postman.

I also plan on publishing an article detailing how to write Golang tests for the backend APIs. If you want these tutorials sent to you, subscribe to my newsletter, and you will get them once they are published.

I hope you found this helpful ❤️.

Recommended Reads

How to Check If An Object is Empty in JavaScript

Kelechi Ogbonna — Sun, 21 Mar 2021 00:00:00 +0000

In this article, I will be sharing different ways to check if an object is empty in JavaScript.

Let's start with creating an empty object using literal syntax.

const myObject = {}

1. Object.entries()

This method returns an array containing the [key, value] pairs found in the object passed in as an argument.
To check if an object is empty, check if the length of the array is 0.

Object.entries(myObject).length === 0;
// 0

return Object.entries(myObject).length === 0 ? true: false
// true

2. Object.keys()

This method returns an array of strings that contains enumerable properties of the object passed as an argument. It returns an array of [ keys ]

Object.keys(myObject).length === 0;
// 0

return Object.keys(myObject).length === 0 ? true: false
// true

You can also create an isEmpty function and pass in the object as a parameter

function isEmpty (myObject) {

return Object.keys(myObject).length === 0 ? true: false

}

isEmpty(myObject); // true

3. Object.getOwnPropertyNames()

It returns an array of strings that corresponds to the properties found in the object passed as an argument. This method calls GetOwnPropertyKeys under the hood.

 Object.getOwnPropertyNames(myObject).length === 0;
// 0

if(Object.getOwnPropertyNames(myObject).length === 0) { // return something};

4. !myObject.key

It checks if the [key] is present in myObject. Use this when you know the properties that the object is supposed to have.

let result = '';

my.object.id // undefined

if (!myObject.id) result = 'object is empty'

console.log(result) // object is empty

Note: this won't work myObject[id], JavaScript will throw an error.

Using a JavaScript Library

5. UnderScore.js

_.isEmpty(collection) Returns true if collection has no elements. For strings and array-like objects _.isEmpty checks if the length property is 0.

_.isEmpty([1, 2, 3]);

=> false

_.isEmpty({});

=> true

6. Lodash.Js

_.isEmpty() Method Checks if the value is an empty object, collection, map, or set. Objects are considered empty if they have no own enumerable string keyed properties.

_.isEmpty({ 'a': 1 });
// => false

_.isEmpty(myObject)
// true

How to build forms with multiple input fields using React Hooks

Kelechi Ogbonna — Wed, 02 Dec 2020 09:52:13 +0000

Forms can be considered as the backbone of web applications. How would you get any information from your users without forms? Yes there are libraries available to easily build forms now ( a nice one is Formik) but having an understanding of how to create forms in React from scratch will give you a good understanding of what libraries like Formik does under the hood, It's pretty easy.

Controlled and uncontrolled input

The default action for an HTML form is to have the page refreshed which causes you to lose all your data. With react we can, we use javascript to handle the way we get access to the data entered by the users.

In HTML, form types such as <input> <textarea> generally handle their own state and update based on user input. letting the DOM handle user input for you is referred to as uncontrolled input

Controlled input is letting react handle the state for you as it is mutable. React stores this state in the state property, and it can only be updated using solid-state. Hence, the react component that renders the form is now in control for what happens to that form on subsequent user input.

for more information on controlled Input → check here

Handling multiple input fields in a form with UseState

Most scenarios, we will be needing more than one input field from users. To demonstrate this, we will be creating a Registration form

import React, { useState } from "react";

export default function Register() {
  const [user, setUser] = useState({ fullname: "", email: "", password: "" });

  const handleChange = (event) => {
    setUser({ ...user, [event.target.name]: event.target.value });
  };
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log("user created", user);
  };
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="fullname">Full Name</label>
      <input type="text" name="fullname" onChange={handleChange} />
      <label htmlFor="email">Email</label>
      <input type="email" name="email" onChange={handleChange} />
      <label htmlFor="password">Passoword</label>
      <input type="password" name="password" onChange={handleChange} />
      <button>Register</button>
    </form>
  );
}

let's start from the top

state → here we are declaring our user state using useState hook, user represents the object we inserted into useState, setUser is going to be used to update the state. if you are to familiar with React classes,

 const [user, setUser] = useState({ fullname: "", email: "", password: "" });


this.state = {
  user: {
    fullname: "",
    email: "",
    password: ""
  }
}; // setting state using react classes

handleChange → in our handleChange function, we use setUser to update our user state. I am spreading the user object in the setUser, if you don't do this, setUser is only going update the last property which is password so we have to preserve the other properties state by adding them.

we use e[event.target.name]:event.target.value to tell setUser function what property to update based on the name.

The user data which is now stored in the state can be passed down to different components as needed.

event.preventdefault() is to prevent the page from re-rending

Accessibility is Very Important

Because of its common usage, it is paramount to make sure your forms are easy to understand and interact with by all users. not paying attention to accessibility reduces the chances of having users with disabilities interacting with your site form. Little changes can make a lot of difference;

In our form, we used best practice and added accessibly by;

including labels for each input field to describe the purpose of the form control

To dig deeper into how to make your site accessible, read more on w3.org

Make Sure to Validate User input

Validation should never be skipped because you should never trust that the user would input the right information. Options are using the inbuilt HTML validation, writing one yourself or using a validation schema. Any option works fine, I recommend trying using a validation schema like Yup as it makes writing validation for the fields a breeze. Here's a Medium link to an article explaining why you need it and how to use it in validation your forms

Introduction to Yup Object Validation In React

Now that you understand how React forms are built with hooks, you can choose to use build forms using a form helper or using react hooks.

The code for the Signup form can be found here codesandbox.io

Forem: Kelechi Ogbonna

Fixing UI Update Issues with Custom Hooks in React

Identifying UI Update Problem

What Caused My React State Management Issues?

Flowchart: Before Lifting State Up

The Solution: Lifting State Up

Flowchart: After Lifting State Up

Conclusion

React Memo vs useMemo

What is Memoization?

What does memo() do?

How It Works;

When should we use memo?

When should we not use memo

What if the child component doesn't have any props

Incorrect Optimization with React Memo

If memo provides the optimization by comparing the props, why not wrap every single component with memo()?

useMemo

How it Works;

When should we use useMemo?

When should we not use useMemo

Optimization with memo and useMemo

Conclusion: Memo and useMemo, which is better?

References

Build a CRUD Todo App with TypeScript and Fetch API

What we will be building

Project Setup

Building the Frontend CRUD Functionality

Get and Display a list of todo items

Adding Type Definitions to the getTodos Function

Creating a Todo

Deleting a Todo

Update a Todo

Users will be able to edit the To-do item title

Users will be able to mark a To-do item as completed

Conclusion

Build a CRUD Todo App with Vanilla JavaScript and Fetch API

What we will be building

Project Setup

Building the Frontend CRUD Functionality

Get and Display a list of todo items

Creating a Todo

Deleting a Todo

Update a Todo

Users will be able to edit the To-do item title.

Users will be able to mark a To-do item as completed.

Conclusion

Setup HTML Templates and Static Assets in Golang

Render HTML template in Go.

ADD HTML Template

Add CSS File

Parse HTML template

Serve Static CSS and JavaScript Files in Go.

TypeScript Configuration and Setup

Conclusion

Build a Golang Todo App Backend: A Step-by-Step Guide

Prerequisite

What we will build

Build Todo APIs in these Steps;

1. Set up the project folder and import packages needed.

Download the packages we need

Import downloaded packages into the main.go file

Create variables to store values

2. Create a Struct Type

3. Create an init function and connect to a database

Provision and Connect to the Database with Docker

4. Define checkError function

5. Create and Connect to a Go Server

Connect to the Database and Run the Server

6. Shutdown the server gracefully

7. Create Router and Route Handlers for Home and Todo

8. Create a Group Route for Todo Routers

9. Define the homeHandler Function

10. Define the CRUD TodoHandlers Function

Get Todos

Create(POST) Todo

Update(PUT) Todo

Delete Todo

Next Steps

Conclusion

What does `memo()` do?

When should we use `memo`?

When should we not use `memo`

If memo provides the optimization by comparing the props, why not wrap every single component with `memo()`?

Optimization with `memo` and useMemo

Adding Type Definitions to the `getTodos` Function

4. Define `checkError` function