forward API Integration

The files related to API integrations can be found in the src/api folder. This folder contains multiple ModuleAPI.js files, and the AxiosConfig.js file, which contains the setup for axios to call server API(s), including the get, put, post, etc methods, interceptors, and token set methods. The src/api/Socket.js file contains all of the module's Socket io functions, which are used to send, receive messages.

forward Integrate new API endpoints.

In order to get a new custom endpoint working, you can follow the below steps: Say you want to add a new endpoint with the following url /users/get-profile-image/{userPk}.

  1. First, we have to create a new method for this url in a separate NewModuleAPI.js file. And, we will end up with a function like the following:
    export const getProfileImage = (userPk) => { return (dispatch) => { // this funtions tells redux that a new endpoint is being called. dispatch(fetchStart()); // set the token, that is retrieved from the local storage, in the request // headers because the enpoint doesn't allow unauthorized users. axJson.defaults.headers.common["Authorization"] = "Bearer " + localStorage.getItem("token"); // We are using axJson which is an axios instance that sends data as json format. axJson.get("/users/get-profile-image/{userPk}", { params: { user_pk: userPk } }) .then((data) => { if (data.status_code === 200) { dispatch(fetchSuccess()); // set the profile image for that user. dispatch(setProfileImage(data.result)); } else { dispatch(fetchError("Something went wrong")); } }) .catch(function (error) { dispatch(fetchError("")); }); }; };

  2. Now, We need to setup a new redux's action. To do so, hope over the src/redux/moduleReducer/actions/index.js and create a new action called setProfileImage :
    import SET_USER_PROFILE_IMAGE from "../../../constants/ActionTypes" export const setProfileImage = (data) => { return (dispatch) => { dispatch({ type: SET_USER_PROFILE_IMAGE, payload: data, }); }; };
    Note: You need to define a new string in the constants/ActionTypes.js like so: export const SET_USER_PROFILE_IMAGE = "SET_USER_PROFILE_IMAGE";

  3. Now, We need to bind our new action to the reducer. Open the src/redux/moduleReducer/index.js file and add the following code:
    import { setProfileImage } from "./actions" import SET_USER_PROFILE_IMAGE from "../../constants/ActionTypes" const INIT_STATE : UsersState = { profileImage: null, } const moduleReducer = (state = INIT_STATE, action) => { switch (action.type) { case SET_USER_PROFILE_IMAGE: { return { ...state, profileImage: action.payload, }; } default: return { ...state } } } export default moduleReducer

    4. Note: You can create a separate reducer and combine it with the rest under redux/rootReducer like the following:
    import { combineReducers } from "redux"; import moduleReducer from "./moduleReducer"; import userReducer from "./userReducer"; const rootReducer = combineReducers({ moduleName: moduleReducer, user: userReducer, }); export default rootReducer;

  4. And that's basically it! Now you can call the new action from your component:
    import React, { useEffect, useState } from "react"; // redux import { useSelector, useDispatch } from "react-redux"; // Your action import { setProfileImage } from "../../../redux/moduleReducer/actions"; const NewComponent = (props) => { const dispatch = useDispatch(); const { userDetails } = useSelector((state) => ({ state.moduleName.profileImage })); // submit a new profile image useEffect(() => { dispatch(setProfileImage(formData)) },[dispatch]); return ( <> </> ); } export default NewComponent;

forward Integrate new socket.

TODO: