ToDo application with ReactJS and FeathersJS

Friday, 03/01/2020

Tram Ho

This article shares how I create a simple ToDo application with FeathersJS on the server side and ReactJs on the Client. I will go into some main parts of how to install, and use the FeathersJS client with ReactJS, so the article will skip quite a lot of parts such as data validation, effects, …

Setting

Create folders for the project:

mkdir todo
cd todo &amp;&amp; mkdir server
cd server
feathers generate app

mkdir todo

cd todo && mkdir server

cd server

feathers generate app

Create service Tasks:

feathers generate service

1 2	feathers generate service

Edit src/models/tasks.model.js :

<span class="token keyword">const</span> schema <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Schema</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
    text <span class="token punctuation">:</span> <span class="token punctuation">{</span> type <span class="token punctuation">:</span> String <span class="token punctuation">,</span> required <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
    status <span class="token punctuation">:</span> <span class="token punctuation">{</span> type <span class="token punctuation">:</span> String <span class="token punctuation">,</span> <span class="token keyword">enum</span> <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">'unfinished'</span> <span class="token punctuation">,</span> <span class="token string">'finished'</span> <span class="token punctuation">,</span> <span class="token string">'removed'</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token keyword">default</span> <span class="token punctuation">:</span> <span class="token string">'unfinished'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
    user <span class="token punctuation">:</span> <span class="token punctuation">{</span> type <span class="token punctuation">:</span> String <span class="token punctuation">,</span> required <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> ref <span class="token punctuation">:</span> <span class="token string">'users'</span> <span class="token punctuation">,</span> index <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span>
    timestamps <span class="token punctuation">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

const schema = new Schema ( {

text : { type : String , required : true } ,

status : { type : String , enum : [ 'unfinished' , 'finished' , 'removed' ] , default : 'unfinished' } ,

user : { type : String , required : true , ref : 'users' , index : true }

} , {

timestamps : true

} ) ;

github

That’s it then server

Next to the Client, in the todo folder:

npx create-react-app client
cd client
yarn add @feathersjs/feathers @feathersjs/rest-client @feathersjs/authentication-client

npx create-react-app client

cd client

yarn add @feathersjs/feathers @feathersjs/rest-client @feathersjs/authentication-client

Install Feathers:

<span class="token comment">// src/feathers.js</span>

<span class="token keyword">import</span> feathers <span class="token keyword">from</span> <span class="token string">'@feathersjs/feathers'</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> rest <span class="token keyword">from</span> <span class="token string">'@feathersjs/rest-client'</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> authentication <span class="token keyword">from</span> <span class="token string">'@feathersjs/authentication-client'</span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">feathers</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token keyword">const</span> restClient <span class="token operator">=</span> <span class="token function">rest</span> <span class="token punctuation">(</span> <span class="token string">'http://localhost:3030'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
app <span class="token punctuation">.</span> <span class="token function">configure</span> <span class="token punctuation">(</span> restClient <span class="token punctuation">.</span> <span class="token function">fetch</span> <span class="token punctuation">(</span> window <span class="token punctuation">.</span> fetch <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
app <span class="token punctuation">.</span> <span class="token function">configure</span> <span class="token punctuation">(</span> <span class="token function">authentication</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
  storageKey <span class="token punctuation">:</span> <span class="token string">'authentication'</span>
<span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> app <span class="token punctuation">;</span>

// src/feathers.js

import feathers from '@feathersjs/feathers' ;

import rest from '@feathersjs/rest-client' ;

import authentication from '@feathersjs/authentication-client' ;

const app = feathers ( ) ;

const restClient = rest ( 'http://localhost:3030' ) ;

app . configure ( restClient . fetch ( window . fetch ) ) ;

app . configure ( authentication ( {

storageKey : 'authentication'

} ) ) ;

export default app ;

github

Done installing to be able to use Feathers on the client, now I can embark on React code

Sample interface

Write a Code

Install some additional libraries:

react-router-dom
material-ui
moment

Login and register

Registration:

<span class="token keyword">const</span> handleSubmitForm <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span> data <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">await</span> feathers <span class="token punctuation">.</span> <span class="token function">service</span> <span class="token punctuation">(</span> <span class="token string">'users'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">create</span> <span class="token punctuation">(</span> data <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token function">SignUpSuccess</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> <span class="token function-variable function">SignUpSuccess</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    history <span class="token punctuation">.</span> <span class="token function">push</span> <span class="token punctuation">(</span> <span class="token string">'/signin'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

const handleSubmitForm = async ( data ) => {

await feathers . service ( 'users' ) . create ( data ) ;

SignUpSuccess ( ) ;

}

const SignUpSuccess = ( ) => {

history . push ( '/signin' ) ;

}

github

The code below to handle the login:

<span class="token keyword">const</span> handleSubmitForm <span class="token operator">=</span> <span class="token keyword">async</span> data <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">try</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> feathers <span class="token punctuation">.</span> <span class="token function">authenticate</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
        strategy <span class="token punctuation">:</span> <span class="token string">'local'</span> <span class="token punctuation">,</span>
        <span class="token operator">...</span> data
      <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
      <span class="token function">signInSuccess</span> <span class="token punctuation">(</span> response <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">{</span>
      <span class="token function">alert</span> <span class="token punctuation">(</span> <span class="token string">'Sign In Failed!'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
      <span class="token function">setCurrentUser</span> <span class="token punctuation">(</span> undefined <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">signInSuccess</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> user <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">setCurrentUser</span> <span class="token punctuation">(</span> user <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    history <span class="token punctuation">.</span> <span class="token function">push</span> <span class="token punctuation">(</span> <span class="token string">'/'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>

const handleSubmitForm = async data => {

try {

strategy : 'local' ,

... data

} ) ;

signInSuccess ( response ) ;

} catch {

alert ( 'Sign In Failed!' ) ;

setCurrentUser ( undefined ) ;

}

} ;

const signInSuccess = ( { user } ) => {

setCurrentUser ( user ) ;

history . push ( '/' ) ;

} ;

github

<span class="token function">useEffect</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> reAuthenticate <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> feathers <span class="token punctuation">.</span> <span class="token function">reAuthenticate</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span> response <span class="token operator">&amp;&amp;</span> response <span class="token punctuation">.</span> user <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">setCurrentUser</span> <span class="token punctuation">(</span> response <span class="token punctuation">.</span> user <span class="token punctuation">)</span> <span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">const</span> authenticate <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> accessToken <span class="token operator">=</span> <span class="token keyword">await</span> feathers <span class="token punctuation">.</span> authentication <span class="token punctuation">.</span> <span class="token function">getAccessToken</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span> accessToken <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">await</span> <span class="token function">reAuthenticate</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token function">setLoading</span> <span class="token punctuation">(</span> <span class="token boolean">false</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token punctuation">;</span>

    <span class="token function">authenticate</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

useEffect ( ( ) => {

const reAuthenticate = async ( ) => {

if ( response && response . user ) {

setCurrentUser ( response . user ) ;

}

const authenticate = async ( ) => {

const accessToken = await feathers . authentication . getAccessToken ( ) ;

if ( accessToken ) {

await reAuthenticate ( ) ;

}

setLoading ( false ) ;

} ;

authenticate ( ) ;

} , [ ] ) ;

github

Put together a diagram for everyone to see:

Tasks

Get the whole task:

<span class="token function">useEffect</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> loadTasks <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> feathers <span class="token punctuation">.</span> <span class="token function">service</span> <span class="token punctuation">(</span> <span class="token string">'tasks'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">find</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
        query <span class="token punctuation">:</span> <span class="token punctuation">{</span>
            user <span class="token punctuation">:</span> user <span class="token punctuation">.</span> _id <span class="token punctuation">,</span>
            $sort <span class="token punctuation">:</span> <span class="token punctuation">{</span> status <span class="token punctuation">:</span> <span class="token operator">-</span> <span class="token number">1</span> <span class="token punctuation">,</span> updatedAt <span class="token punctuation">:</span> <span class="token operator">-</span> <span class="token number">1</span> <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

      <span class="token function">setTasks</span> <span class="token punctuation">(</span> response <span class="token punctuation">.</span> data <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token punctuation">;</span>

    <span class="token function">loadTasks</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> task <span class="token punctuation">,</span> user <span class="token punctuation">.</span> _id <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

const loadTasks = async ( ) => {

const response = await feathers . service ( 'tasks' ) . find ( {

query : {

user : user . _id ,

$sort : { status : - 1 , updatedAt : - 1 }

}

} ) ;

setTasks ( response . data ) ;

} ;

loadTasks ( ) ;

} , [ task , user . _id ] ) ;

This code [task, user._id] means that when the task changes, I will reload the entire task list, I use this method to get back the task list when adding, and edit the status of the task.

Add new task:

<span class="token keyword">const</span> addTask <span class="token operator">=</span> <span class="token keyword">async</span> data <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> feathers
      <span class="token punctuation">.</span> <span class="token function">service</span> <span class="token punctuation">(</span> <span class="token string">'tasks'</span> <span class="token punctuation">)</span>
      <span class="token punctuation">.</span> <span class="token function">create</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> user <span class="token punctuation">:</span> user <span class="token punctuation">.</span> _id <span class="token punctuation">,</span> <span class="token operator">...</span> data <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token function">setTask</span> <span class="token punctuation">(</span> response <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>

const addTask = async data => {

const response = await feathers

. service ( 'tasks' )

. create ( { user : user . _id , ... data } ) ;

setTask ( response ) ;

} ;

Change state:

<span class="token keyword">const</span> <span class="token function-variable function">getTask</span> <span class="token operator">=</span> <span class="token punctuation">(</span> id <span class="token punctuation">,</span> tasks <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> tasks <span class="token punctuation">.</span> <span class="token function">find</span> <span class="token punctuation">(</span> task <span class="token operator">=&gt;</span> id <span class="token operator">===</span> task <span class="token punctuation">.</span> _id <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> changeStatusTask <span class="token operator">=</span> <span class="token keyword">async</span> id <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> task <span class="token operator">=</span> <span class="token function">getTask</span> <span class="token punctuation">(</span> id <span class="token punctuation">,</span> tasks <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token keyword">const</span> status <span class="token operator">=</span> task <span class="token punctuation">.</span> status <span class="token operator">===</span> <span class="token string">'finished'</span> <span class="token operator">?</span> <span class="token string">'unfinished'</span> <span class="token punctuation">:</span> <span class="token string">'finished'</span> <span class="token punctuation">;</span>
    <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> feathers
      <span class="token punctuation">.</span> <span class="token function">service</span> <span class="token punctuation">(</span> <span class="token string">'tasks'</span> <span class="token punctuation">)</span>
      <span class="token punctuation">.</span> <span class="token function">patch</span> <span class="token punctuation">(</span> id <span class="token punctuation">,</span> <span class="token punctuation">{</span> status <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token function">setTask</span> <span class="token punctuation">(</span> response <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>

const getTask = ( id , tasks ) => tasks . find ( task => id === task . _id ) ;

const changeStatusTask = async id => {

const task = getTask ( id , tasks ) ;

const status = task . status === 'finished' ? 'unfinished' : 'finished' ;

const response = await feathers

. patch ( id , { status } ) ;

setTask ( response ) ;

} ;

github

Result

Repo github: https://github.com/hungkieu/Feathers-React-Todo-App

I summarized the article with the main ideas as follows:

Use the Feathers Client with ReactJS.
Authenticate user.
Add, edit, delete.

Thanks for reading my article

Share the news now

Source : Viblo

ToDo application with ReactJS and FeathersJS

Setting

Sample interface

Write a Code

Login and register

Tasks

Result

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers