Front End Setup

1. Set up user action & action type to solidify the sequence of actions

src/actions/actionTypes.ts

export const REGISTER = 'API:REGISTER';

src/actions/userActions.ts

// async function that forwards the registration parameters to the
// apiService to complete user registration, waits for the registration
// to complete, then dispatches the new state to Redux store
async function registerWithDispatchAsync( 
    dispatchType: any, 
    dispatch: Dispatch<Action>, 
    firstName: string, 
    lastName: string, 
    username: string, 
    email: string, 
    password: string
): Promise<void> { 
    var user = await apiService.register( 
    firstName, 
    lastName, 
    username, 
    email, 
    password 
    ); 
    localStorage.setItem('user', JSON.stringify(user)); 
    dispatch({ type: dispatchType, data: user });
}


// we will need to reference the function type in 
// numerous react component Prop interfaces.
export type register_fntype = ( 
    firstName: string, 
    lastName: string, 
    username: string, 
    email: string, 
    password: string
) => Promise<void>;


// returns a dispatch function that returns a promise that
// represents the asynchronous completion of the dispatch work
export function register( 
    firstName: string, 
    lastName: string, 
    username: string, 
    email: string, 
    password: string
): (dispatch: Dispatch<UserAction>) => Promise<void> { 
    return dispatch => { 
        return registerWithDispatchAsync( 
            REGISTER, 
            dispatch, 
            firstName, 
            lastName, 
            username, 
            email, 
            password 
        ); 
    };
}

2. Set up User and UserAction types file

src/types/User.d.ts

export interface User { 
    _id: string; 
    firstName: string; 
    lastName: string; 
    email: string; 
    username: string; 
    profileImage: string; 
    password: string; 
    googleId: string; 
    location: string; 
    roles: string[]; 
    description: string; 
    techstack: string[]; 
    projects: string[]; 
    bookmarked: string[]; 
    linkedInLink: string; 
    githubLink: string; 
    portfolioLink: string; 
    websiteLink: string; 
    twitterLink: string; 
    blogLink: string;
}

3. Set up apiService function to handle request / response to server

src/utils/apiService.ts

import config from '../.config';
import { User } from '../types/User.d';

function register( 
  firstName: string, 
  lastName: string, 
  username: string, 
  email: string, 
  password: string
): Promise<User | Error> { 
   return new Promise((resolve, reject) => { 
     const endpoint = config.host.name + '/api/signup';
     var data: object = { 
       body: JSON.stringify({ 
         firstName: firstName, 
         lastName: lastName, 
         email: email, 
         password: password, 
         username: username 
       }), 
       headers: { 'Content-Type': 'application/json' }, 
       method: 'POST', 
       credentials: 'include' 
     };
     
   fetch(endpoint, data) 
     .then(function(res: any) { return res.json(); }) 
     .then(function(res: any) { 
       JSON.stringify(res); 
       if (res.message === 'User Registration Succesful') { 
         var user = res.user; 
         resolve({ 
           _id: user._id, 
           firstName: user.firstName, 
           lastName: user.lastName, 
           email: user.email,
           username: user.username 
         }); 
       } else { 
         reject(res.error); 
       } 
     }); 
   });
 }
 
 var apiService = { register };
 
 export default apiService;

4. Set up Redux reducer to receive the returned response and save to Redux store

src/reducers/userReducer.ts

import { REGISTER } from '../actions/actionTypes';
import { User } from '../types/User';
import { UserState, UserAction } from '../types/Redux';

function userReducer(state: UserState = {}, action: UserAction): UserState { 
    switch (action.type) { 
        case REGISTER: return action.data as User; 
        default: return state; 
    }}
    
export default userReducer;

src/reducers/index.ts

import { combineReducers } from 'redux';
import userReducer from './userReducer';

export default combineReducers({ 
    user: userReducer
});