DEV Community: Jinto Jose

Creating FullStack Todo App - ReactJS+MaterialUI+FireBase+GithubAction+UnitTest

Jinto Jose — Tue, 04 Oct 2022 21:36:38 +0000

Before we start

If you prefer to watch instead of reading..

Also, if you want to read about creating the exact same application in Angular, you can read here.

What are we building

I saw this challenge in FrontendMentor for a todo application. I thought to make it a bit more interesting by adding user login and also, store the data on Backend.

We will use ReactJS and Material UI for the Frontend and Firebase for storing the data and Authentication.

We will also add CI/CD with Github Actions and host the application on Firebase.

This is what the final version looks like.

ReactJS setup

We will use Create React App for creating a basic React application setup. We will also use Typescript.

npx create-react-app react-firebase-todo --template typescript cd react-firebase-todo npm start

Application will open on http://localhost:3000

Material Setup

Material UI has two style engine options. By default it uses Emotion as the style engine. We will follow the same.

npm install @mui/material @emotion/react @emotion/styled

This is enough to use any of the Material components. But, if we want to customise themes, we need to use ThemeProvider. We need to also add base Material styles.

In our application, we have Dark and Light theme and we should be able to switch between themes.

Whenever the theme is changed, we need to inform the same across the application. For all these, we will create a custom Theme Provider on top of Material UI's theme provider.

First, we will create two themes. To create theme, we can use createTheme from Material. We will create two themes.

src/theme.ts

import { createTheme } from '@mui/material/styles';
import { green, purple, pink } from '@mui/material/colors';

export enum Theme {
    DARK = 'dark',
    LIGHT = 'light',
}

const lightTheme = createTheme({
    palette: {
        primary: {
            main: purple[500],
        },
        secondary: {
            main: green[500],
        },
    },
});

const darkTheme = createTheme({
    palette: {
        mode: 'dark',
        primary: {
            main: 'hsl(235, 24%, 19%)',
        },
        secondary: {
            main: pink[500],
        },
    },
});

const themes = {
    [Theme.DARK]: darkTheme,
    [Theme.LIGHT]: lightTheme,
};

export const getTheme = (theme: Theme) => {
    return themes[theme];
};

Here, for the dark theme, we are giving mode as dark, so that, the dark mode styles will be applied.

Now, we will create the custom theme provider. We will also save the theme name to sessionStorage so that, we can persist the selected theme on page refresh. By default, we are setting the theme as Light.

src/providers/theme.tsx

import React, { createContext, FC, ReactNode, useState } from 'react';
import { ThemeProvider } from '@mui/material/styles';

import { Theme, getTheme } from '../theme';

type ThemeContextType = {
    currentTheme: Theme;
    setTheme: ((theme: Theme) => void) | null;
};

export const AppThemeContext = createContext<ThemeContextType>({
    currentTheme: Theme.LIGHT,
    setTheme: null,
});

type Props = {
    children: ReactNode;
};

export const AppThemeProvider: FC<Props> = ({ children }) => {
    const addOrRemoveBodyClass = (theme: Theme) => {
        if (theme === Theme.DARK) {
            document.body.classList.add('dark-theme');
        } else {
            document.body.classList.remove('dark-theme');
        }
    };

    const getCurrentTheme = () => {
        const currentTheme = sessionStorage.getItem('theme')
            ? (sessionStorage.getItem('theme') as Theme)
            : Theme.LIGHT;
        addOrRemoveBodyClass(currentTheme);
        return currentTheme;
    };

    const currentTheme = getCurrentTheme();

    const [theme, _setCurrentTheme] = useState<Theme>(currentTheme);

    const setTheme = (theme: Theme) => {
        sessionStorage.setItem('theme', theme);
        addOrRemoveBodyClass(theme);
        _setCurrentTheme(theme);
    };

    const value = {
        currentTheme: theme,
        setTheme,
    };

    return (
        <AppThemeContext.Provider value={value}>
            <ThemeProvider theme={getTheme(theme)}>{children}</ThemeProvider>
        </AppThemeContext.Provider>
    );
};

Here, we are also adding a class to document body, if the theme is dark. This is because, we want to give a different background image on dark theme.

Lets add the style in index.css

#root {
    background-image: url('./images/bg-desktop-light.jpg');
    background-repeat: no-repeat;
}

@media screen and (max-width: 375px) {
    #root {
        background-image: url('./images/bg-mobile-light.jpg');
    }
    .dark-theme #root {
        background-image: url('./images/bg-mobile-dark.jpg');
    }
}

.dark-theme #root {
    background-image: url('./images/bg-desktop-dark.jpg');
    background-repeat: no-repeat;
}

root is the id of the root element for our React application.

And, for the material basic styles, we will add the CssBaseLine

src/index.tsx

import CssBaseline from '@mui/material/CssBaseline';
const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);
root.render(
    <React.StrictMode>
            <AppThemeProvider>
                <CssBaseline />
                <App />
        </AuthProvider>
    </React.StrictMode>
);

React Router Setup

First, we need to install React Router

npm install react-router-dom

We need two pages. One for Login and one for Home page to display the todo items.

Lets create two simple React components and we will create a custom provider for this also.

We can keep the header same in both pages. Only the content area need to change based on the route. So, we can keep one parent component for the layout and we will render the route component inside the layout component. We will keep App component as the Layout component.

src/providers/route.tsx

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import App from '../App';
import { HomePage } from '../components/home-page';
import { LoginPage } from '../components/login-page';


const router = createBrowserRouter([
    {
        path: '/',
        element: <App />,
        children: [
            {
                path: '/',
                element: <HomePage />,
            },
            {
                path: '/login',
                element: <LoginPage />,
            },
        ],
    },
]);

export const AppRouterProvider = () => {
    return <RouterProvider router={router} />;
};

Instead of App component, we will render AppRouterProvider in root level.

src/index.tsx

root.render(
    <React.StrictMode>
            <AppThemeProvider>
                <CssBaseline />
                <AppRouterProvider />
            </AppThemeProvider>
    </React.StrictMode>
);

And, how do we tell React Router where to render the child component inside App component? Using the Outlet.

src/App.tsx

import { Outlet } from 'react-router-dom';
function App() {
    return (
        <div>
            <header>
            </header>
            <main>
                <Outlet />
            </main>
        </div>
    );
}

export default App;

Firebase Setup

We will go to Firebase Console and add a new project.

Copy the Firebase config. Create firebase.ts file in src folder and copy the firebase config to that.

Also, We will need to enable Authentication and FireStore. In Authentication, we will enable both Google and Email/Password based Login.

In FireStore, we will create a collection "todos". For a Todo, we will need a title, and a status to know if its completed or not, and also, we need to associate with a user.

Lets create a document under the collection.

Now, we can try to try to use the same in our application.

First, we will install Firebase package.

npm install firebase

We will need to get the Firestore database instance. And, this database instance is needed in all components which need the data. So, we will export from where we create.

src/firebase.ts

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
   ...
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

Now, in our HomePage component, we can read the collection to get the todos.

src/components/home-page/home-page.tsx

import React, { FC, useContext, useEffect, useState } from 'react';
import { db } from '../../firebase';
import {
    collection,
    onSnapshot,
    doc,
    where,
    query,
} from 'firebase/firestore';

export const HomePage = () => {
   const [todos, setTodos] = useState<Todo[] | null>(null);
   useEffect(() => {
            const q = query(
                collection(db, 'todos')
            );

            const subscribeToTodos = () => {
                return onSnapshot(q, (querySnapshot) => {
                    const todos: Todo[] = [];
                    querySnapshot.forEach((doc) => {
                        const todoItem = {
                            id: doc.id,
                            ...doc.data(),
                        };
                        todos.push(todoItem as Todo);
                    });
                    setTodos(todos);
                });
            };

            const unsub = subscribeToTodos();

            return unsub;
        }
    }, []);
}

onSnapshot callback will be triggered whenever there is a data change.

Now, we need to setup the Authentication also. We need the authentication information also to be available across the application. So, we will create Auth Provider and read/write user data with sessionStorage.

And, we will use the AuthProvider on top level so that, all the components will have access to logged in user.

Now, in LoginPage component, we need to do both Google and Email/Password login. First we will get the Google provider and also the auth instance.

src/components/login-page/login-page.tsx

import {
    GoogleAuthProvider,
    getAuth,
    signInWithPopup,
    createUserWithEmailAndPassword,
    signInWithEmailAndPassword,
} from 'firebase/auth';

const provider = new GoogleAuthProvider();
const auth = getAuth();

export const LoginPage = () => {
  const signInWithGoogle = () => {
        signInWithPopup(auth, provider)
            .then((result) => {
                // set user to context
            })
    };

  const signUp = () => {
        createUserWithEmailAndPassword(auth, email, password)
            .then((userCredential) => {
                // set user to context
            });
    };

  const loginWithEmailAndPassword = () => {
        signInWithEmailAndPassword(auth, email, password)
            .then((userCredential) => {
                // set user to context
            });
    };

}

Now, we can change query in home component to get only the todos of the logged in user.

We will change the query like the following

src/components/home-page/home-page.tsx

const q = query(
                collection(db, 'todos'),
                where('userId', '==', user.uid)
            );

Delete Todo

To delete a todo, we can use the deleteDoc method. We will add a Delete button for each todo, and on click of the button, we will call the deleteTodo method.

src/components/home-page/home-page.tsx

import {
    doc,
    deleteDoc,
} from 'firebase/firestore';

export const HomePage = () => {
  const deleteTodo = (todo: Todo) => {
        if (todo.id) {
            deleteDoc(doc(db, 'todos', todo.id));
        }
  };
}

Set Todo as Completed

This is an update operation. We need to change the value of isCompleted property of Todo to true.

We will be adding RadioButton on each Todo item and on press of the radio button, we will call handleRadioCheck method.

src/components/home-page/home-page.tsx

import {
    updateDoc,
    doc,
} from 'firebase/firestore';

const handleRadioCheck = (todo: Todo) => {
        if (todo.id) {
            const docReference = doc(db, 'todos', todo.id);
            updateDoc(docReference, {
                isCompleted: true,
            });
        }
    };

Filter Todo Items

We want to filter Todo items based on status, All, Active, or Completed. We will create a FilterState and use the useState to set the active filter state. We can. use this value to filter the todo items.

src/components/home-page/home-page.tsx

enum FilterState {
    ALL = 'All',
    ACTIVE = 'Active',
    COMPLETED = 'Completed',
}

export const HomePage = () => {
  const [activeFilter, setActiveFilter] = useState<FilterState>(
        FilterState.ALL
    );

const filteredTodos =
        activeFilter === FilterState.ALL
            ? todos
            : todos?.filter((todo) => {
                  const filterCondition =
                      activeFilter === FilterState.ACTIVE ? false : true;

                  return todo.isCompleted === filterCondition;
              });

}

And, we will be rendering the filteredTodos instead of todos.

Add Todo

We will create an AddTodo Component. We just need a text field. On Enter Key Press, we want to create a new Todo item.

src/components/add-todo/add-todo.tsx

import { collection, addDoc } from 'firebase/firestore';
import TextField from '@mui/material/TextField';
import { db } from '../../firebase';

export const AddTodo = () => {
   const onKeyPress = (event: KeyboardEvent<HTMLInputElement>) => {
        if (event.key === 'Enter') {
            const inputValue = (event.target as HTMLInputElement).value;
            if (inputValue) {
                addDoc(collection(db, 'todos'), {
                    title: inputValue,
                    isCompleted: false,
                    userId: user?.uid,
                });
            }
        }
    };
return (
   ...
    <TextField
                        id="input-with-sx"
                        fullWidth
                        label="Add Todo"
                        variant="standard"
                        onKeyPress={onKeyPress}
                    />
   ...
)

}

Protected Routes

Since we are showing todo items of the logged in user, we don't want the home page to be accessible to user who is not logged in. We want to check if user is available in Auth Context. If not, redirect back to login page. We will make it a generic component as this is a common feature.

We will create a ProtectedRoute component for adding the above check.

src/components/protected-route/protected-route.tsx

import React, { FC, ReactNode, useContext } from 'react';
import { Navigate } from 'react-router-dom';
import { AuthContext } from '../../providers/auth';

type Props = {
    children: ReactNode;
};

export const ProtectedRoute: FC<Props> = ({ children }) => {
    const { user } = useContext(AuthContext);

    if (!user) {
        return <Navigate to="/login" replace={true} />;
    }

    return <>{children}</>;
};

And, our Router will be updated to use this ProtectedRoute component.

src/providers/route.tsx

import { ProtectedRoute } from '../components/protected-route';

const router = createBrowserRouter([
    {
        path: '/',
        element: <App />,
        children: [
            {
                path: '/',
                element: (
                    <ProtectedRoute>
                        <HomePage />
                    </ProtectedRoute>
                ),
            },
            {
                path: '/login',
                element: <LoginPage />,
            },
        ],
    },
]);

Firebase Hosting

To deploy to Firebase from the command prompt, we need Firebase CLI.

npm install -g firebase-tools

After that, we can initialise a Firebase project, by running

firebase init

It will ask some questions.

We can select Github Actions also. So, Firebase will generate two files under .github/workflows directory. This is the default path for Github Actions. Github will automatically detect the workflow files and create the Actions.

Now, we can deploy using firebase deploy

Github Code Actions - CI/CD

Firebase has generated two Action workflows. One for deploying to Firebase App whenever code is pushed to main branch. Other one is two run whenever a pull request is created.

Now, if we push to main branch, build and deploy action will be triggered automatically.

Same way, if we create a pull request, build and preview action will be triggered.

Firebase will also create a preview url and comment on Pull Request. This way, we can preview our changes before merging to the main branch.

Unit Test

We are using React Testing Library and Jest for Unit Testing React components. These are already setup in Create React App.

Since App component needs to be aware of Outlet in the testing, we will create a dummy Routing setup in the test file.

src/App.test.tsx

import React from 'react';
import { render, screen } from '@testing-library/react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import App from './App';

const DummyComp = () => <span>Hello</span>;

const router = createBrowserRouter([
    {
        path: '/',
        element: <App />,
        children: [
            {
                path: '/',
                element: <DummyComp />,
            },
        ],
    },
]);

const renderApp = () => {
    render(<RouterProvider router={router} />);
};

test('renders learn react link', () => {
    renderApp();
    const loginButton = screen.getByText('Login');
    expect(loginButton).toBeInTheDocument();
    expect(screen.getByText('Hello')).toBeInTheDocument();
});

We can use different selectors. Here, we are trying to get a button by Text and checking its presence.

Now, let's look into how to test a user event. We will add a test for AddTodo component.

We can use userEvent from React Testing Library

src/components/add-todo/add-todo.test.tsx

import React, { ReactElement, ReactNode } from 'react';
import { render, screen } from '@testing-library/react';
import { collection, addDoc } from 'firebase/firestore';

import { AddTodo } from './add-todo';
import userEvent from '@testing-library/user-event';

const setup = (jsx: ReactElement) => {
    return {
        user: userEvent,
        ...render(jsx),
    };
};

jest.mock('firebase/firestore');

describe('<AddTodo />', () => {
    (addDoc as jest.Mock).mockImplementation(jest.fn());


    it('should trigger addDoc on enter keypress', async () => {
        const { user } = setup(<AddTodo />);
        const inputEl = screen.getByLabelText('Add Todo');
        await user.type(inputEl, 'hello{Enter}');
        expect(addDoc).toHaveBeenCalledWith(undefined, {
            title: 'hello',
            isCompleted: false,
            userId: undefined,
        });
    });
});

We are also mocking addDoc method using jest.mock as we don't want to make the real Firebase addDoc call. Instead, we just want to know if the addDoc is called with expected values.

Conclusion

With this, we are able to Login, Add Todo, Delete Todo, Mark Todo as Completed, Filter Todos, Logout and also setup CI/CD and added Unit Tests.

You can get full code here.

Please let me know your thoughts on this.

Creating FullStack Todo App - Angular+Material+FireBase+GithubAction+UnitTest+ESLint

Jinto Jose — Fri, 23 Sep 2022 15:31:50 +0000

Why another TODO Application

Todo Application don't need any explanation for the Product requirements. So, we can focus on learning about the technologies used for building the application.

What we are building

I saw this challenge in FrontendMentor for a todo application. I thought to make it a bit more interesting by adding user login and also, store the data on Backend.

We will use Angular and Angular Material for the Frontend and Firebase for storing the data and Authentication.

We will also add CI/CD with Github Actions and host the application on Firebase.

This is what the final version looks like.

Angular + Material Setup

Let's install Angular CLI and create the basic skeleton of the app.

npm install -g @angular/cli
ng new angular-firebase-todo

I selected scss as we need to create our own themes. We also need routing for login and home page.

Now, we will setup Angular Material. Angular Material has Angular CLI's installation schematic. We can use that

ng add @angular/material

This command will install the necessary packages and add some initial styles.

Firebase Setup

We will go to Firebase Console and then create a new Project.

We can add apps ( Android / IOS / We ) to the project. We will add a Web App.

A firebase config will be generated. We will copy that and put it inside our src/environments file so that, we can use this to initialise Firebase.

For storing the data, we can use FireStore. We will

For using Firebase in Angular, we can use FireStore. It's a Document based Database. Let's create a collection. A collection is the list of documents.

Each Todo will be a Document. So, we will create a collection todos and add a document. Each todo will have an id ( auto generated ), title, isCompleted and also we will need a userId field to associate with user.

We will also enable two providers ( Google and Email/Password ) in Firebase Authentication from the Firebase console.

Initial Layout

We will need two pages. One for login and one to display the todo items.

We will create the components and add routes with those components.

ng g c components/home
ng g c components/login

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent    
  },
  {
    path: '',
    pathMatch: 'full',
    component: HomeComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Now, if we look at the page layout we need to create, we need mainly a Header component, also, an AddTodo component

Lets create the components
ng g c components/addTodo
ng g c components/header

app.component.html we will change to have only header and the router-outlet ( which will load the route components )

<div class="container">
  <app-header></app-header>
  <main>
    <router-outlet></router-outlet>
  </main>
</div>

Authentication

For implementing the Authentication, I followed the documentation on AngularFire

AngularFireAuth provider has different methods, for signIn, signOut. We can sign in with different providers.

We will add the Google login and Email&Password Login.

We will need an Email and Password field, and to capture value from the inputs and to add validation, we will add FormControl. FormControl is from ReactiveFormsModule. We will import that to app.module.ts.

import {FormControl, Validators} from '@angular/forms';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import firebase from 'firebase/compat/app';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent {
   email = new FormControl('', [Validators.required, Validators.email]);
  password = new FormControl('', [Validators.required]);
  constructor(private auth: AngularFireAuth) {
  }

  login() {
    if(this.email.value && this.password.value){
      this.auth.signInWithEmailPassword(this.email.value, this.password.value);
    }
  }

  signup(){
    if(this.email.value && this.password.value){
      this.auth.createUserWithEmailAndPassword(this.email.value, this.password.value);
    }
  }

  loginWithGoogle(){
    this.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());

  }

  getErrorMessage() {
    if (this.email.hasError('required')) {
      return 'You must enter a value';
    }

    return this.email.hasError('email') ? 'Not a valid email' : '';
  }


}

 <mat-card>
    <mat-card-content>
        <mat-form-field appearance="fill">
            <mat-label>Enter your email</mat-label>
            <input matInput [formControl]="email" required>
            <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
        </mat-form-field>
        <mat-form-field appearance="fill">
            <mat-label>Enter your Password</mat-label>
            <input matInput type="password" [formControl]="password" required>
            <mat-error *ngIf="password.invalid">
                Password is required
            </mat-error>
        </mat-form-field>
    </mat-card-content>
    <mat-card-actions>
        <button mat-raised-button color="primary" (click)="login()">Login</button>
        <button mat-raised-button color="accent" (click)="signup()">Signup</button>
        <button mat-raised-button color="warn" (click)="loginWithGoogle()">Google Login</button>
    </mat-card-actions>
</mat-card>

Display Todos

We will use AngularFire for connecting with Firebase.

ng add @angular/fire

If we look at the QuickStart Guide, we need to import the AngularFireModule.

And, we will initialise AngularFireModule with the firebase config which we stored earlier in environment.ts file.

We also need to import AngularFirestoreModule to get the data.

In our home component, we will import AngularFireStore and read from the todos collection.

We can use the onAuthStateChanged method from AngularFireAuth to get the current user. The callback function will be executed whenever user is logged in or logged out.

import { AngularFirestore } from '@angular/fire/compat/firestore';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {
  items$?: Observable<any[]>;

  constructor(
    private firestore: AngularFirestore
  ) {
this.auth.onAuthStateChanged(user => {
      if(user){
                 this.items$ = firestore.collection('todos', ref => ref.where('userId', '==', user.uid))
                      .valueChanges({idField: 'id'});

      }

});
}

By default, Firestore collection wont return the id. So, we can add the idField property so that, id will be returned.
We are adding the where condition so that, only the todos of the logged in user are returned.

valueChanges returns an Observable.

We can use items$ in home.component.html. To give some basic styling, we will use the Card and List components from Material.

For Each Todo item, we will add a radio button, so that, we can mark the Todo as completed.

<mat-card> 
  <mat-card-content>
    <mat-list role="list" *ngIf="items$">
      <mat-list-item role="listitem"  *ngFor="let item of items$ | async">                  
            <mat-radio-button>
              {{item.title}}
            </mat-radio-button>          
      </mat-list-item>
    </mat-list>    
  </mat-card-content>   
</mat-card>

Add Todo

For Adding the Todo Item, we just need a text field. To match it with the design provided, we will add a RadioButton also.
We need to wrap the Input inside a FormField to the proper styles and to have Form Control associated to it.

     <mat-card>    
         <mat-card-content>
              <mat-form-field class="full-width-form" appearance="fill">
                 <mat-label></mat-label>
                 <mat-radio-button matPrefix disabled></mat-radio-button>
                 <input type="text" matInput #addTodoInput (keyup.enter)="addTodo(addTodoInput.value)">
             </mat-form-field>
          </mat-card-content>
     </mat-card>

I added a reference addTodoInput to the input element so that, we can pass the value of input to the addTodo function.

  addTodo(inputValue:string){
    if(inputValue && this.user){
      this.todosCollection.add({
        isCompleted: false,
        title: inputValue,
        userId: this.user.uid
      });
    }

  }

todosCollection is the AngularFireStore collection.

Filter Todos

Now, we need to filter the todos items based on the isCompleted flag.

We will create a FilterState enum to represent the different filter states.

enum FilterState {
  ALL = 'All',
  ACTIVE = 'Active',
  COMPLETED = 'Completed'
}

Lets update the template of HomeComponent

<mat-card-footer>
    <span>{{totalActiveTodos}} items left</span>    
    <div class="filter-container">
      <button mat-flat-button [ngClass]="{'active-filter': isFilterActive(FilterState.ALL)}"  (click)="setFilterState(FilterState.ALL)">All</button>
      <button mat-flat-button [ngClass]="{'active-filter': isFilterActive(FilterState.ACTIVE)}" (click)="setFilterState(FilterState.ACTIVE)">Active</button>
      <button mat-flat-button [ngClass]="{'active-filter': isFilterActive(FilterState.COMPLETED)}" (click)="setFilterState(FilterState.COMPLETED)">Completed</button>      
    </div>    
  </mat-card-footer>

We are adding the ngClass to dynamically set active-filter class to the button when active.

Now, we have two sources of changes. Whenever FireStore collection value changes, we need to display the updated value. And, whenever the filter state is changed, we need to change the todo items displayed on the page.

We will create a property to store the active filter state, and we will make it as a RxJS Subject so that, it can be combined with FireStore valueChanges observable.

activeFilter: BehaviorSubject<FilterState> = new BehaviorSubject<FilterState>(FilterState.ALL);

setFilterState(filterState: FilterState){
    this.activeFilter.next(filterState);
}

Now, we can combine these two Observables ( activeFilter & items$ ) to create a new Observable. For that, we can use combineLatest operator.

filteredTodos$?: Observable<any[]>;

getTodos(){
     if(!this.items$){
       return;
     }

    this.filteredTodos$ = combineLatest(this.items$, this.activeFilter)
      .pipe(
        map(([todos, currentFilter]: [Todo[], FilterState]) => {
          if(currentFilter === FilterState.ALL){
            return todos;
          }
          return todos.filter((todo: Todo) => {
            const filterCondition = currentFilter === FilterState.COMPLETED ? true : false;
            return todo.isCompleted === filterCondition;
          });
        })
      );
   }

Now, when any of the value changes, it will pipe through the map operator and get the updated list of todos.

In home.component.html, we will use filteredTodos$ instead of items$ for displaying the Todo items.

Delete Todo/s

We have two delete functionalities. One is to delete a single Todo item. Other is the Clear Completed button on footer on clicking of which we will delete all the completed Todo items.

In home.component.html, we will add the following to the mat-card-footer

<button mat-flat-button (click)="clearCompleted()">Clear Completed</button>

Also, for each list item ( inside ngFor ), we will add the delete button

<button class="delete-todo-btn" mat-icon-button aria-label="Deleting Todo" (click)="deleteTodo(item)">
Delete          </button>

Deleting a single Todo is a simple. We have to get the FireStore Document and it has delete method

  deleteTodo(todo:Todo){
    const todoDoc = this.firestore.doc(`todos/${todo.id}`);
    todoDoc.delete();
  }

For deleting all the todos which are completed, we need to query FireStore collection again as the original query is returning all the Todo items of the user.

import { AngularFirestore, QuerySnapshot, QueryDocumentSnapshot } from '@angular/fire/compat/firestore';

clearCompleted(){
    if(this.user && this.items$){
      this.firestore
        .collection<Todo>('todos', ref => ref
          .where('userId', '==', this.user?.uid)
          .where('isCompleted', '==', true)
      )
      .get()
      .pipe(
        map((qs: QuerySnapshot<Todo>) => {
          return qs.docs;
        })
      )
      .subscribe((docs: QueryDocumentSnapshot<Todo>[]) => {
        docs.forEach((doc: QueryDocumentSnapshot<Todo>) => {
          doc.ref.delete();
        });
      });
    }
  }

Here, we are using collection().get() instead of .valueChanges() which will provide QuerySnapshot and we can go through each QueryDocumentSnapshot and delete the Document.

Set Todo as Completed

To set a Todo as completed, we need to set isCompleted property of the Todo item to true. FireStore document provides an update method.

We will update the radio button in home.component.html

<mat-radio-button (change)="setAsCompleted(item)" [checked]="item.isCompleted" [disabled]="item.isCompleted">
              {{item.title}}
            </mat-radio-button>

Same like how we deleted the document, we can get the document using id and then update.

setAsCompleted(todo: Todo){
    const todoDoc = this.firestore.doc(`todos/${todo.id}`);
    todoDoc.update({
      isCompleted: true
    });
  }

Custom Icon

We have some custom icons as per the design for Delete, Checkbox, and Theme switch.

To add custom icon, I followed this tutorial

I copied all the images from the design to the assets/images folder.

And, added the following to app.component.ts

import { MatIconRegistry } from "@angular/material/icon";
import { DomSanitizer } from "@angular/platform-browser";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ){
    this.matIconRegistry.addSvgIcon(
      'icon-check',
      this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/images/icon-check.svg')
    );
    this.matIconRegistry.addSvgIcon(
      'icon-cross',
      this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/images/icon-cross.svg')
    );
    this.matIconRegistry.addSvgIcon(
      'icon-moon',
      this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/images/icon-moon.svg')
    );
    this.matIconRegistry.addSvgIcon(
      'icon-sun',
      this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/images/icon-sun.svg')
    );
  }
}

Theme Switch

We need a dark theme and a light theme.

Angular Material added a custom theme on setup. We will move the theme related styles to scss/_theme.scss

We also have to create another theme.

$angular-firebase-todo-light-theme: mat.define-light-theme((
  color: (
    primary: $angular-firebase-todo-primary,
    accent: $angular-firebase-todo-accent,
    warn: $angular-firebase-todo-warn,
  )
));

$angular-firebase-todo-dark-theme: mat.define-dark-theme((
  color: (
    primary: $angular-firebase-todo-primary,
    accent: $angular-firebase-todo-accent,
    warn: $angular-firebase-todo-warn,
  )
));


@include mat.all-component-themes($angular-firebase-todo-light-theme);

.dark-theme {
    @include mat.all-component-colors($angular-firebase-todo-dark-theme);
}

mat.define-light-theme is used for creating light theme and
mat.define-dark-theme is used for creating dark theme.

We added dark theme inside a class selector ( .dark-theme ). So, the dark theme will be applied only when dark-theme class is added to the root element.

We will inject Renderer2 from Angular to add or remove the dark-theme class to the body element.

We will also store the current theme in sessionStorage so that, even on refresh, we will persist the theme selection.

Lets add the theme switcher button on header component.

<button mat-icon-button aria-label="Change Theme" (click)="changeTheme()">
            <mat-icon class="icon-theme" [svgIcon]="currentThemeIcon"></mat-icon>
        </button>

icon name is stored in a property so that, we can change it based on theme selection.

import { Renderer2 } from '@angular/core';
changeTheme(){
    if(this.currentTheme === Theme.LIGHT){
      sessionStorage.setItem('theme', Theme.DARK);
      this.currentTheme = Theme.DARK;
      this.currentThemeIcon = 'icon-sun';
      this.renderer.addClass(document.body, 'dark-theme');
    }
    else {
      sessionStorage.setItem('theme', Theme.LIGHT);
      this.currentTheme = Theme.LIGHT;
      this.currentThemeIcon = 'icon-moon';
      this.renderer.removeClass(document.body, 'dark-theme');
    }
  }

Header

We want to show different page header for Login and Home Page. In AppComponent, we have the RouterOutlet which has Router activate event. We can rely on that, to know when the route is changed.

And, the updated title can be passed to the Header component.

<app-header [pageTitle]="pageTitle"></app-header>
<router-outlet (activate)="changePageHeader()"></router-outlet>

changePageHeader(){
    this.pageTitle = this.router.url === '/login' ? 'Login' : 'Todo';
  }

And, in Header component, we will get the value as Input and will display the page header accordingly.

@Input()
pageTitle = '';

Material CDK For Mobile Layout

Layout is different between Mobile view and Desktop view. On Mobile view, we need to show the Filter buttons on a separate box.

To achieve this using style can be more tricky. Instead, we can utilise the Material CDK to check if the current screen is a mobile view or not.

On HomeComponent,

import { BreakpointObserver } from '@angular/cdk/layout';
constructor(
    private breakpointObserver: BreakpointObserver
  ) {
     this.isSmallScreen = breakpointObserver.isMatched('(max-width: 375px)');
}

Now, we can display, different template based on isSmallScreen property.

Auth Guard

Home page should not be accessible to a Guest user as we are showing Todos of a user. So, we want to restrict the entry to Home page. For that, we can use AuthGuard of RouterModule.
Route has canActivate guard which we can use to add some restricted entry.

AngularFire provides the route guard. So, we can use that instead of adding custom logic.

import { AngularFireAuthGuard, redirectUnauthorizedTo } from '@angular/fire/compat/auth-guard';

const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent    
  },
  {
    path: '',
    pathMatch: 'full',
    component: HomeComponent,
    canActivate: [AngularFireAuthGuard],
    data: { authGuardPipe: redirectUnauthorizedToLogin }
  }
];

Unit Test

All the tests are failing mainly because of the Dependency Injection. We will mock the dependencies of component we are testing.

Lets take an example.For AddTodo Component, there is dependency for AngularFireStore. So, we will create a Mock instance of AngularFireStore and replace the original with the mock one.

So, in add-todo.component.spec.ts

import { AngularFirestore } from '@angular/fire/compat/firestore';

const MockAngularFireStore = {
  collection: () => ({valueChanges: () => of([]), get: () => of([])}),
  doc: () => ({update: jasmine.createSpy(), delete: jasmine.createSpy()})
};

describe('AddTodoComponent', () => {
  let component: AddTodoComponent;
  let fixture: ComponentFixture<AddTodoComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ AddTodoComponent ],
      providers: [
        {provide: AngularFirestore, useValue: MockAngularFireStore}
      ]
    })
    .compileComponents();

    fixture = TestBed.createComponent(AddTodoComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

We are replacing AngularFireStore using useValue. There is another option of useClass as well.

ESLint

ESLint setup is not enabled by default in Angular. if we run
ng lint
Angular CLI will ask whether to add the ESLint setup or not.

This will add the packages required and .eslintrc.json file will be added which contains all the ESLint rules.

We will also add ESLint for typescript as documented here.

I updated .eslintrc.json to include the new rules

"extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "parser": "@typescript-eslint/parser",
      "plugins": ["@typescript-eslint"],

Firebase Hosting

Now that the functionality is completed, lets deploy the application to Firebase.

We need Firebase CLI to be able to deploy from the terminal

npm install -g firebase-tools

And, then, we will initialise Firebase

firebase init

which will ask what all features we will need

We will select Hosting.

It will also ask whether to setup automatic code deployment. On selecting yes, Github Action will be generated under .github/workflows

Github Actions

Github Actions are used to run some scripts on any event on the Repository. For eg. I can run a build script on every push to the main branch.

Here, Firebase created two Github Actions. One to run on every push to main branch, and another to run on every pull request.

As soon as we push the changes to the main branch, build will happen and firebase will deploy the latest changes.

Branch Protection

Since any push to main branch will be automatically deployed, we don't want to allow direct push to main branch, especially when multiple people are working on the project.

Instead, every developer can work on a feature, create a feature branch and then raise Pull Request to main branch.

How do we enforce this? We can use the Branch protection in Github.

We will block the direct push to main branch and also, we will set in such a way that, Pull Request can be merged only if the Github Action is passing.

Now, we can see that, on creating PR, we cant merge immediately.

Once the Github Action is completed successfully, we can merge.

Firebase also generates a preview link on the PR. We can see the changes on the PR in this link and only if all good, we need to merge this.

Final

You can see the full code here

If you prefer to watch the whole process, video given below.

Creating a countdown timer RxJS vs Vanilla JS

Jinto Jose — Mon, 13 Sep 2021 15:35:06 +0000

Let's see our requirements.

Create a Countdown timer
start button which will start the timer from the current stage
pause button which will pause the timer, so that, we can resume the timer on clicking start again
stop button which will stop the timer, and reset the timer number.

Let's see how we can do with Vanilla JS.



<h3 id="result"></h3>
<button id="startBtn">Start</button>
<button id="pauseBtn">Pause</button>
<button id="stopBtn">Stop</button>

Let's first select the elements and add click listeners



const startBtn = document.querySelector('#startBtn');
const stopBtn = document.querySelector('#stopBtn');
const pauseBtn = document.querySelector('#pauseBtn');
const result = document.querySelector('#result');

startBtn.addEventListener('click', () => {
  //start the interval
});

stopBtn.addEventListener('click', () => {
  //stop the interval and reset value in HTML
});

pauseBtn.addEventListener('click', () => {
  // pause the interval
});

We will have to create few variables.

to store the current value
to store the initial value
to store the interval ( Since we want to do an action continuously on a specific interval, we will use setInterval )



let interval;
const initialValue = 10;
let currentValue = initialValue;

We will also set the current value to the HTML



result.innerHTML = `${currentValue}`;

Now, we will create the function to start the timer and call this function on click of start button



const startInterval = () => {
  clearInterval(interval);

  interval = setInterval(() => {
    currentValue -= 1;
    if (currentValue <= 0) {
      currentValue = initialValue;
      clearInterval(interval);
    }
    result.innerHTML = `${currentValue}`;
  }, 1000);
};

startBtn.addEventListener('click', () => {
  startInterval();
});

On click of stop button, we will clear the interval, and also reset the value.



stopBtn.addEventListener('click', () => {
  currentValue = initialValue;
  clearInterval(interval);
  result.innerHTML = `${currentValue}`;
});

On click of Pause button, we are just clearing the interval, and not resetting the value.



pauseBtn.addEventListener('click', () => {
  clearInterval(interval);
});

Here is the whole code.

Now, lets try the same with RxJS

First, same selectors again



const startBtn = document.querySelector('#startBtn');
const stopBtn = document.querySelector('#stopBtn');
const pauseBtn = document.querySelector('#pauseBtn');
const counterDisplayHeader = document.querySelector('h3');

Now, lets create event streams for the button clicks



const startClick$ = fromEvent(startBtn, 'click');
const stopClick$ = fromEvent(stopBtn, 'click');
const pauseBtn$ = fromEvent(pauseBtn, 'click');

Let's define a starting value, so that, countdown can start from any number defined.



const startValue = 10;

Now, the RxJS magic



merge(startClick$.pipe(mapTo(true)), pauseBtn$.pipe(mapTo(false)))
  .pipe(
    switchMap(shouldStart => (shouldStart ? interval(1000) : EMPTY)),
    mapTo(-1),
    scan((acc: number, curr: number) => acc + curr, startValue),
    takeWhile(val => val >= 0),
    startWith(startValue),
    takeUntil(stopClick$),
    repeat()
  )
  .subscribe(val => {
    counterDisplayHeader.innerHTML = val.toString();
  });

Let's try to breakdown

First, we will just try only the start. On click of start, we want to start an interval.



startClick$
  .pipe(
    switchMapTo(interval(1000)),

and, we want to decrement the value by 1 and start the value from the starting value. so, we will use two operators here



startClick$
  .pipe(
    switchMapTo(interval(1000)),
    mapTo(-1),
    scan((acc: number, curr: number) => acc + curr, startValue)

Now, we need to have option to stop the timer. We want to stop the timer on two scenarios.

When the value reaches 0
When user press stop button



startClick$
  .pipe(
    switchMapTo(interval(1000)),
    mapTo(-1),
    scan((acc: number, curr: number) => acc + curr, startValue),
    takeWhile(val => val >= 0),
    takeUntil(stopClick$)

We want to start with a value of startValue



startClick$
  .pipe(
    switchMapTo(interval(1000)),
    mapTo(-1),
    scan((acc: number, curr: number) => acc + curr, startValue),
    takeWhile(val => val >= 0),
    startWith(startValue),
    takeUntil(stopClick$)
  )

Now, in case of pause button click, we just want to emit an empty observable.



pauseBtn$
    .pipe(
      switchMapTo(EMPTY))
    )

Finally, we want to combine both start and pause button clicks. We are not really interested in event details. instead, we just want to decide between interval or EMPTY observable based on click. So, we will just map the button clicks to true or false. if start button is clicked, map the value to true and if pause button is clicked, we map the value to false, so that, we can check on switchMap.



merge(startClick$.pipe(mapTo(true)), pauseBtn$.pipe(mapTo(false)))
  .pipe(
    switchMap(shouldStart => (shouldStart ? interval(1000) : EMPTY))

And, we want to start again once the timer is stopped. For that, we are using repeat() operator

And, you can see and play around with the whole code here,

So, with RxJS, I didn't have to create any extra external variables, intervals etc. Also, no need to add separate logic for start, stop, pause. Whole logic is added in a single chain of commands.

Isn't it neat? What do you think of this? Is there any better way to do this?

Let me know in comments.

RxJS - Promise vs Observable

Jinto Jose — Sun, 12 Sep 2021 14:29:48 +0000

One basic question which first comes to mind when we have been using Promises and then, trying to move to Observables... is why to use Observable instead of Promise.

Since Angular started utilizing RxJS everywhere, Observables became more and more popular. But, confusion comes when we are just making an api call using HttpClient and this returns Observable. We wonder, I can do the same in promise.

I am trying to answer that with an example.

Let's first try to create a Promise and an Observable which just finishes with one value.


const s = new Observable(observer => {
   setTimeout(() => {
     observer.next('hi');
   }, 100);
});

s.subscribe(value => {
   console.log(value);
});

const p = new Promise((resolve, reject) => {

setTimeout(() => {
  resolve('hi');
}, 100);

});

p.then((value) => {
  console.log(value);
});

In this scenario, there is not much difference between Observable and Promise except that, we are using .subscribe instead of .then.

But, what if there are two values. Let's see the code for that.

const s = new Observable(observer => {
  setTimeout(() => {
    observer.next('hi');
  }, 100);
  setTimeout(() => {
    observer.next('hello');
  }, 200);
});

s.subscribe(value => {
  console.log('observable:', value);
});

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('hi');
  }, 100);

  setTimeout(() => {
    resolve('hello');
  }, 200);
});

p.then(value => {
  console.log('promise: ', value);
});

In this scenario, there are two values being emitted, and you can see that, promise is not considering the second value which is resolved. For a promise, it is one asynchronous operation, and that is completed at the first resolve execution itself.

But, in case of Observable, subscriber keeps listening for the new data, until the observer says completed.

Hope the difference is clear now.