Fackbackend Setup

Note : Applicable in Backend Version Only.

Set REACT_APP_DEFAULTAUTH=fake in the .env file.
Remove the firebase setup code from the App.tsx file.
Now just uncomment the below fake-backend setup code in the App.tsx file.

import fakeBackend from "src/helpers/AuthType/fakeBackend.ts";
            
// Activating fake backend

fakeBackend();

It is often used for development and testing purposes, as it allows developers to test their code without having to worry about the availability of a real backend.

How to Integrate custom FakeBackend?

Please follow the below steps:

-> First you needs to create json data files, which you can put in the folder src/Common/data from where the data/json will be called.

const data = [
{
    id: "1",
    orderdate: "22 Feb, 2023",
    customer: "Deondre Fahey",
    name: "Ratke Group",
    paymethod: "COD",
},
{
    id: "2",
    orderdate: "14 Feb, 2023",
    customer: "Warren Anderson",
    name: "Zibra Fashion",
    paymethod: "Mastercard",
},
]

export { data }

-> In your React component or container, you dispatch an action to request data from the fake backend. This action triggers the thunk. For getting the data you should get data from the thunk.ts file. And we can get data in thunk as response from fakebackend_helper.ts file.

-> Reducer is also worked as middleware for react, which is placed at src/slices/data/reducer.ts folder.

import { createSlice } from "@reduxjs/toolkit";
import { getData } from "./thunk"

export const initialState ={
dataList: [],
}

const DataSlice = createSlice({
name : "Data",
initialState,
reducers: {},

extraReducers: (builder) => {
    //data
    builder.addCase(getData.fulfilled, (state: any, action: any) => {
        state.dataList = action.payload;
    });
    builder.addCase(getData.rejected, (state: any, action: any) => {
        state.error = action.payload.error || null;
    });
},
})

-> A thunk works as a middleware, which is placed at src/slices/Data/thunk.ts file.

import { createAsyncThunk } from "@reduxjs/toolkit";
import {
getData as getDataApi,
} from "src/helpers/fakebackend_helper"

export const getData = createAsyncThunk("datas/getData", async () => {
try {
    const response = getDataApi();
    return response;
} catch (error) {
    return error;
}
});

-> After exporting data from reducer.ts file there was a main file for whole reducers files that combines all the reducers into one. src/slices/index.ts here we combines the rootReducers for store.

import dataReducer from "./Data/reducer"
const rootReducer = combineReducers ({
Data: dataReducer,
})
export default rootReducer

-> Same as above all the thunks file are also imported and exported in main thunk file. src/slices/thunk.ts we use this file to get response in react component.

export { getData } from "./Data/thunk"

-> A Fakebackend is a server that is used to simulate the behavior of a real backend. src/helpers/fakebackend_helper.ts is path for fakeBackend file where you have to import "./url_helper" and "./api_helper" file for exporting the data.

import * as url from "./url_helper";
//  Api 
import { APIClient } from "./api_helper";

const api = new APIClient();

export const getData = () => api.get(url.GET_DATA, null);

-> The url_helper is a helper function that is used to generate URLs. For that we have created file src/helpers/url_helper.ts. From where we can get fake url for functionality.

export const GET_DATA = "/invoice";

-> FakeBackend through we will getdata from Common/data and with the help of axios we can pass the data, which is placed at src/helpers/AuthType/fakeBackend.ts file.

import MockAdapter from "axios-mock-adapter";                                
import * as url from "../url_helpers"
import axios from "axios";

import { data } from "Common/data";

const fakeBackend = () => {
mock.onGet(url.GET_DATA).reply(() => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (data) {
                // Passing fake JSON data as response
                resolve([200, data]);
            } else {
                reject([400, "Cannot get contact list"]);
            }
        });
    });
});
}
export default fakeBackend;

-> After following the above steps you can call data and use it in your components or pages where is needed by the dispatch data method and managing the state.

import { getData as onGetData} from "slices/thunk";  
const datasTable = createSelector(

(state : any) => state.Data,
(state) => ({
    dataList: state.dataList,
})
);

const { dataList } = useSelector(datasTable);

useEffect(() => {
dispatch(onGetData())
}, [dispatch]);