DEV Community: Sai Avinash Duddupudi

Python requests_html is throwing error There is no current event loop in thread 'ThreadPoolExecutor-0_0'

Sai Avinash Duddupudi — Fri, 04 Jun 2021 13:40:20 +0000

I am trying to run a JS script using python requests_html module for a given url but was getting few errors.

Can some please help me out where I am doing wrong?

Code :-

from requests_html import HTMLSession
def rrr(request):
    session = HTMLSession()
    url = 'https://careers.microsoft.com/'
    response = session.get(url)
    script = """
                () => {
                    return {
                        ans: window.location.href,
                    }
                }
            """
    ans = response.html.render(script=script)
    return JsonResponse(ans, safe=False)

Error :-

  File "/home/mahesh/anaconda3/lib/python3.7/site-packages/rest_framework/views.py", line 476, in raise_uncaught_exception
    raise exc
  File "/home/mahesh/anaconda3/lib/python3.7/site-packages/rest_framework/views.py", line 502, in dispatch
    response = handler(request, *args, **kwargs)
  File "/home/mahesh/anaconda3/lib/python3.7/site-packages/rest_framework/decorators.py", line 50, in handler
    return func(*args, **kwargs)
  File "/home/mahesh/Documents/dojo/dojo/dojo/tenants/api.py", line 242, in rrr
    ans = response.html.render(script=script)
  File "/home/mahesh/anaconda3/lib/python3.7/site-packages/requests_html.py", line 586, in render
    self.browser = self.session.browser  # Automatically create a event loop and browser
  File "/home/mahesh/anaconda3/lib/python3.7/site-packages/requests_html.py", line 727, in browser
    self.loop = asyncio.get_event_loop()
  File "/home/mahesh/anaconda3/lib/python3.7/asyncio/events.py", line 644, in get_event_loop
    % threading.current_thread().name)
RuntimeError: There is no current event loop in thread 'ThreadPoolExecutor-0_0'.

When ran in terminal, it worked fine as follows

Cannot launch puppeteer browser instance in docker image

Sai Avinash Duddupudi — Thu, 22 Apr 2021 20:38:03 +0000

Hi all,

I am trying a launch a headless chrome and perform some actions using puppeteer in my Nodejs code.

This works great(with npm start) but when I try to build Docker image from Docker file and run the image and execute the function, I get the following error.

(node:18) UnhandledPromiseRejectionWarning: Error: Unable to launch browser, error message: Failed to launch the browser process!
[0422/194052.772673:FATAL:zygote_host_impl_linux.cc(117)] No usable sandbox! Update your kernel or see https://chromium.googlesource.com/chromium/src/+/master/docs/linux/suid_sandbox_development.md for more information on developing with the SUID sandbox. If you want to live dangerously and need an immediate workaround, you can try using --no-sandbox.

So, after some search, I found that adding args: ["--no-sandbox"] during browser launch will solve the problem but still the same error keeps coming.

Here is my Dockerfile.
https://slack-files.com/T04MYU6C6-F01V3C7NQTX-6b82740d91

Please suggest a workaround

Unable to fix Antd Modal Height

Sai Avinash Duddupudi — Thu, 18 Feb 2021 22:36:18 +0000

I am trying to set Antd Modal height to 1000px by default but its not getting applied. Please suggest where I might be doing wrong. Below is my code for the Modal.

<Modal style={{ height: "1000px" }} className="pm" width={600} title="Select" visible={isModalVisible3} footer={null} onCancel={() =>setIsModalVisible3(false)}>
    <span>Sample Text</span>
</Modal>

I even added .pm{height: 1000px;} in my base.css file but no luck

Please suggest a workaround.

Property 'maxCount' does not exist on type 'IntrinsicAttributes

Sai Avinash Duddupudi — Fri, 29 Jan 2021 15:36:15 +0000

I am trying to implement antd upload button functionality in tsx file but for some reason I am getting the following Typescript error.

I have also created an interface for the same but no luck. Please suggest me where I am doing it wrong. Thanks

Type '{ children: Element; maxCount: number; }' is not assignable to type 'IntrinsicAttributes & UploadProps<any> & { children?: ReactNode; } & RefAttributes<any>'.
      Property 'maxCount' does not exist on type 'IntrinsicAttributes & UploadProps<any> & { children?: ReactNode; } & RefAttributes<any>'

Here is the code

interface IMyProps {
    maxCount: number,
    }

const AdminPage: React.FC<IMyProps> = ({maxCount}) => {
      const [isModalVisible, setIsModalVisible] = useState(false);

        const onFinish = (values:any) => {
          console.log(values)
         };
        return (
            <React.Fragment>
            <div>
                <Modal title="Create" visible={isModalVisible} footer={null} onCancel={()=>setIsModalVisible(false)}>
                    <Form layout="vertical" onFinish={onFinish}>
                        <Form.Item label="Upload" name="uploading" >
                            <Upload  maxCount={1}> <---------------- GETTING ERROR HERE
                                <Button icon={<UploadOutlined />}>Click to Upload</Button>
                            </Upload>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">
                                Submit
                            </Button>
                            </Form.Item>
                    </Form>
                </Modal>
            </div>
          </React.Fragment>
          )
    }

    export default AdminPage;

saga fetch || Invalid boundary in multipart during uploading files

Sai Avinash Duddupudi — Tue, 26 Jan 2021 18:46:35 +0000

I am trying to upload a file and send it to the backend API in saga worker but for some reason, the file is not getting fetched at the API side.

Invalid boundary in multipart: None

is the error (https://i.stack.imgur.com/dwkPR.png)

Through POSTMAN, able to get the files and it's working fine. all the uploaded files are captured in fileList and I am capturing only the first file by doing action.data.uploading.fileList[0]

Please suggest where I am doing wrong.

React component

const Ticket = () => {

        const [isModalVisible, setIsModalVisible] = useState(false);
        const dispatch = useDispatch();

        const onFinish = (values) => {
          console.log(values)
          console.log(values['uploading']['fileList'])
          dispatch(getUser(values));
         };
        return (
            <React.Fragment>
            <div className="top-section">
             asd
             <Button type="primary" style={{ float: 'right' }} onClick={()=>setIsModalVisible(true)}>Create Test Suite</Button>
             <Modal title="Create" visible={isModalVisible} footer={null} onCancel={()=>setIsModalVisible(false)}>
                    <Form layout="vertical" onFinish={onFinish}>
                        <Form.Item label="Upload" name="uploading">
                          <Upload>
                              <Button icon={<UploadOutlined />}>Click to Upload</Button>
                          </Upload>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">
                              Submit
                            </Button>
                          </Form.Item>
                    </Form>
              </Modal>
            </div>
          </React.Fragment>
          )
    }

Saga Code

function* handleGetUser(action) {
        try {
            debugger
            var formdata = new FormData();
            formdata.append("file_name", action.data.uploading.fileList[0]);
            const customer_fetch = yield call(fetch,
                'http://localhost:8000/api',
                {
                    method: "POST",
                    headers: {'Content-Type' : 'multipart/form-data',},
                    body : formdata
                });
        } catch (error) {
            console.log(error);
        }
    }

POST request in redux-saga not working

Sai Avinash Duddupudi — Thu, 21 Jan 2021 09:39:45 +0000

I would like to make post request in redux-saga. My code looks like:

var formdata = new FormData();
    formdata.append("points", "a,b");
    formdata.append("pid", "someid");
    formdata.append("tions", "cses");
    formdata.append("exp", "cx");
const ans = yield call(fetch,
'http://localhost:8000/api',
{
    method: "POST",
    headers: { 'Authorization': 'Token tokenid',
                "Content-Type": "application/json",},
    body : formdata
});

In Postman it is working fine(selected form-data in body) but in saga, the POST request is giving error as the server responded with a status of 400 (Bad Request)

Please suggest where I am doing wrong as the API is working fine and all the parameters are correct?

Fetch in react js returns 401 (unauthorized) while passing access token

Sai Avinash Duddupudi — Wed, 23 Dec 2020 17:53:53 +0000

Hello everyone,

I am trying to pass access token to an API that returns data through fetch from DATA_API but I am getting 401 unauthorized error.

When I opened Network Tab, I observed that the auth headers did not injected and hence the 401 error is coming. The token is also getting fetched from ACCESS_TOKEN_API and its getting logged in the console.

Here is my code. Please suggest a workaround.

import React, { useState, useEffect } from "react";
import {Col } from 'antd';
import { Link } from "react-router-dom";
import AntDTable from '../shared/AntDTable';
import iInnerLoader from '../shared/iInnerLoader';
const columns = [
  {
    title: 'Account Name',
    dataIndex: 'name',
    render: (text, record) => (
      <Link to={`/all-customers/tenants/?tenant_id=${record.id}&customer=${record.name}`}>{record.name.toUpperCase()}</Link>
    ),
  },
  {
    title: 'Total Tenants',
    dataIndex: 'tenantCount',
  }
];
const useFetch = (url, headers) => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
    useEffect(async () => {
      const response = await fetch(url,headers)
      const data = await response.json()
      // console.log(data)
      setData(data)
      setLoading(false)
    },[]);
    return {data, loading};
}

export default function CreateTestcaseStep2() {
  const [token, setToken] = useState([]);
    useEffect(async () => {
      const response = await fetch('ACCESS_TOKEN_API',{
        method : 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body : 'body_part'
      })
      const data = await response.json()
      // console.log(data)
      setToken(data)
    },[]);

console.log("token is ", token.access_token) // TOKEN IS GETTING PRINTED HERE
var api_headers={ method: 'GET',
  headers: {'Authorization': `Bearer ${token.access_token}`,
  "Access-Control-Allow-Origin" : "*", 
  "Access-Control-Allow-Credentials" : true },
}
console.log("headers ", api_headers)
  const {data, loading} = useFetch('DATA_API', api_headers)
  return (
    <>
      <Col md={24} sm={24} className="p-0">
        <div className="customer-list">
            <div className="customer-list-header">
              Customer Accounts
            </div>
            <br/>
            <div className="customer-list-content">
            {loading? <iInnerLoader isDisplayLabel={true} label={"Loading Customers"} /> :
             <AntDTable columns={columns} data={data.data} pagination={true} height={390}/>}
            </div>
        </div>
    </Col>
    </>
  );
}

Unable to pass access_token to endpoint in Reactjs

Sai Avinash Duddupudi — Wed, 23 Dec 2020 10:25:50 +0000

I am trying to fetch data from an API which requires access_token. There is another API for fetching access_token. So, I am first trying to fetch acess_token and then pass it to the API which returns data.

I observed that the token API is getting hit but by the time it is passed to the data API, token is undefined

Here is my code

const useFetch = (url, headers) => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);
      useEffect(async () => {
        const response = await fetch(url, headers)
        const data = await response.json()
        console.log(data)
        setData(data)
        setLoading(false)
      },[]);
      return {data, loading};
  }
export default function CreateTestcaseStep2() {
    var access_token_headers={
        method : 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body : 'grant_type=something&client_id=something-test&client_secret=something&scope=something'
      }
    const {token, loading_token} = useFetch('ACCESS_TOKEN_API', access_token_headers)
    console.log("token is ", token) // TOKEN IS PRINTED AS UNDEFINED HERE
    var api_headers={ method: 'GET',
      headers: {'Authorization': `Bearer ${token.access_token}`},
    }
    const {data, loading} = useFetch('DATA_API', api_headers)
}

Please suggest how to get access_token first and then pass it to data_api.

setState in Reactjs is not a function

Sai Avinash Duddupudi — Tue, 22 Dec 2020 17:32:22 +0000

I'm new to react and I am trying to hit an API using fetch and then setState to a state variable but it is throwing the error as

Unhandled Rejection (TypeError): Object(...) is not a function

CodeSandboxLink
Below is the code

import React from "react";
import { useState, useEffect, setState } from "react";
import "./styles.css";

export default function App() {
  const [person, setPerson] = useState([]);
  fetch("https://jsonplaceholder.typicode.com/users")
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      setState(data);
    });
  console.log("dasdasd", person);
  return <div className="App">{JSON.stringify(person)}</div>;
}

Please suggest where I am doing wrong.

Reactjs fetch API request getting blocked by CORS policy

Sai Avinash Duddupudi — Sun, 20 Dec 2020 14:35:07 +0000

I am able to hit an sample endpoint via fetch and display the data in the UI. But for some endpoints, the request is getting blocked by CORS policy

I also tried to add "proxy" : "endpoint_link" in package.json and also tried to add allow Access Origin in the headers section but the issue still persists

Here is the code which is working fine

This is the console log I am getting

Access to fetch at 'http://localhost:8000/header' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Please suggest how to overcome this during development as I have tried all possible ways.