DEV Community: Subho Karmakar

Axios unable to fetch API data after deploying the React App Build.

Subho Karmakar — Mon, 28 Oct 2019 19:33:25 +0000

Axios calls are working perfectly while the react app functioning on localhost, But the calls are unable to fetch any data while the build is uploaded to the cpanel file manager directory. I even tested the same on Netlify.
Is there any solution to this? Please help!!!!

Package.JSON

{
  "name": "admin_panel",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@react-pdf/renderer": "^1.6.7",
    "@stardust-ui/docs-components": "^0.40.0",
    "@stardust-ui/react": "^0.40.0",
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "history": "^4.10.1",
    "prop-types": "^15.7.2",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-filter-search": "^1.0.8",
    "react-lazyload": "^2.6.2",
    "react-redux": "^7.1.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0",
    "react-to-pdf": "0.0.8",
    "redux": "^4.0.4",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.88.1",
    "uuid": "^3.3.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint": "^6.5.1",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-config-prettier": "^6.4.0",
    "eslint-config-react": "^1.1.7",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-react": "^7.16.0",
    "eslint-plugin-react-hooks": "^2.1.2",
    "prettier": "^1.18.2"
  }
}

Actions.JS

import axios from "axios"

import {
  PRODUCT_ERROR,
  GET_PRODUCTS,
} from "./types"

// Get Products
export const getProducts = () => async dispatch => {
  try {
    const res = await axios.get(`http://hostServer/product/all`)

    dispatch({
      type: GET_PRODUCTS,
      payload: res.data,
    })
    // console.log(res.data)
  } catch (err) {
    dispatch({
      type: PRODUCT_ERROR,

      payload: { msg: err.response.statusText, status: err.response.status },
    })
    // console.error(err.response)
  }
}

How do I use this "react-filter-search" library with REDUX Actions in REACT?

Subho Karmakar — Mon, 14 Oct 2019 07:45:05 +0000

How do I use this library with Redux Actions in React App?
react-filter-search

//
/*-Other Imports-*/
//
import FilterResults from 'react-filter-search';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      value: ''
    };
  }
  componentWillMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(json => this.setState({ data: json }));
  }
  handleChange = event => {
    const { value } = event.target;
    this.setState({ value });
  };
  render() {
    const { data, value } = this.state;
    return (
      <div>
        <input type="text" value={value} onChange={this.handleChange} />
        <SearchResults
          value={value}
          data={data}
          renderResults={results => (
            <div>
              {results.map(el => (
                <div>
                  <span>{el.name}</span>
                  <span>{el.email}</span>
                </div>
              ))}
            </div>
          )}
        />
      </div>
    );
  }
}

Help me solve this CORS Policy Issue - React App

Subho Karmakar — Mon, 23 Sep 2019 12:21:44 +0000

I'm trying to delete a user by id from server, accessing the api with axios http client on react app and receiving this message in developer/ console ->

Access to XMLHttpRequest at 'host:8082/user/delete/6' from origin 'localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Here's my code -

import React from "react"
import axios from "axios"

export default class PersonList extends React.Component {
  state = {
    id: "",
  }

  handleChange = event => {
    this.setState({ id: event.target.value })
  }

  handleSubmit = event => {
    event.preventDefault()

    axios
      .delete(`http://host:8082/user/delete/${this.state.id}`)
      .then(res => {
        console.log(res)
        console.log(res.data)
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit} crossOrigin="anonymous">
          <label>
            User ID:
            <input type="text" name="id" onChange={this.handleChange} />
          </label>
          <button type="submit">Delete</button>
        </form>
      </div>
    )
  }
}

Please help me to resolve this cors issue.

How to filter-search using a single search-bar component through all data types in an Array of Objects in React?

Subho Karmakar — Fri, 20 Sep 2019 19:48:04 +0000

I called an array of objects and rendered the data in table format. I need to implement filter-search using a single search-bar component that can filter through all data types like - strings, contact numbers, email addresses, address and many more I'm fetching from the API.

[
{
id: 4,
accountDetail: {
accountStatus: "ACTIVE",
referralCode: "X1DNO8GW",
signUpRemarks: "",
adminRemarks: "",
accountStatusRemarks: "",
signUpTime: {
date: {
year: 2019,
month: 3,
day: 20
},
time: {
hour: 21,
minute: 32,
second: 2,
nano: 0
}
},
lastUpdationTime: {
date: {
year: 2019,
month: 3,
day: 20
},
time: {
hour: 21,
minute: 32,
second: 2,
nano: 0
}
}
},
name: "Narendra Modi",
phone: {
countryCode: "91",
number: 9876543210,
verified: true
},
emailId: {
address: "modi@gmail.com",
verified: false
},
address: {
street: "abc",
locality: {
id: 2,
name: "ABC",
pincode: 123021,
latLong: {
latitude: 0,
longitude: 0
},
city: {
id: 1683,
district: {
id: 55,
state: {
id: "IND-MH",
code: "MH",
name: "Maharshtra",
tin: 18,
type: "S"
},
code: "",
name: "Hinjewadi"
},
name: "Pune"
}
},
latLong: {
latitude: 0,
longitude: 0
}
},
password: "9876543210",
type: "RETAILER",
businessDetail: {
gstRegistered: false,
gstin: "",
businessName: "BJP Group",
CODLimit: 0,
creditLimit: 0
},
walletBalance: 0
},
{}
]

Here's the code I used to search through all the names in the array of objects,

let filteredData = this.state.users.filter(user => {
      return (
        user.name
          .toLowerCase()
          .indexOf(this.state.filterUsers.toLowerCase()) !== -1
      )
    })

I need to filter through data like contact number, name, business name, email id, address and every field in the objects. How do I do this?

How do we declare multiple values to the same variable?

Subho Karmakar — Tue, 17 Sep 2019 09:31:24 +0000

Here's the code -

import axios from "axios"

import { put, takeLatest } from "redux-saga/effects"

import { actions, t } from "./actions"

const baseUrl = "http://host:8082/user/phone"

function* loadUserData(action) {

const response = yield axios.get(`${baseUrl}/${action.name}`)

yield put(actions.loadUserDataSuccess(response.data))

}

export function* watchLoadUserData() {

yield takeLatest(t.LOAD_USER_DATA, loadUserData)

}

Here inline 8 in the response variable, I want to pass for both email and phone URL so that I can search for the result through one search box at once.

Please help!!