CODEWITHSUNDEEP
javascriptreactjstypescript
zadders
zadders

Reputation: 438

Type '() => Promise<AxiosResponse<any>>' cannot be used as an index type [ReactJs]

I currently am working on a control panel for a page that loads up a list of cards.

I have two different routes from an API that are as follows:

const apiVideoUrl = "http://localhost:3000/videos/";
const apiManualUrl = "http://localhost:3000/manuals/";

They both return sets of data that are displayed as cards, and they both contain Id, Title, URL and ThumbnailUrl. I've been successful with just loading either videos or manuals seperately, but I Cannot seem to get them to load up together.

my componentDidMount() is as follows and is where the error is arrising from:

async componentDidMount() {
    const apiVideoUrl = "http://localhost:3000/videos/";
    const apiManualUrl = "http://localhost:3000/manuals/";

    const getVideos = async () => {
      return await axios.get(apiVideoUrl);
    };

    const getManuals = async () => {
      return await axios.get(apiManualUrl);
    };

    try {
      const [videos, manuals] = await Promise.all[(getVideos, getManuals)];

      // render to state setState({ prop: ? })
    } catch (error) {
      this.setState({ error });
    }
  }

The error:

Type '() => Promise<AxiosResponse<any>>' cannot be used as an index type.ts(2538)

is given from:

  const [videos, manuals] = await Promise.all[(getVideos, getManuals)];

The code for the rest of the page is as follows (just incase it's needed):

import React, { Component } from "react";
import HelpCard from "./HelpCard";
import "../help/HelpCard.css";
import axios from "axios";
import InfiniteScroll from "react-infinite-scroller";

interface State {
  url: string;
  title: string;
  adminhelpcard: SingleAdminHelpCard[];
  error: null;
  response: {};
  thumbnail: string;
}

interface SingleAdminHelpCard {
  id: string;
  url: string;
  title: string;
  thumbnail: string;
}

interface Props {}

export default class HelpList extends Component<Props, State> {
  state = {
    title: "",
    thumbnail: "",
    id: "",
    url: "http://localhost:3000/videos/",
    adminhelpcard: [],
    itemsCountPerPage: 1,
    activePage: 1,
    error: null,
    response: {}
  };

  loadAdminHelpCard = () => {
    axios
      .get(this.state.url)
      .then((res) => {
        this.setState((prevState) => {
          const adminhelpcard = prevState.adminhelpcard;
          return {
            adminhelpcard: [...prevState.adminhelpcard, ...res.data],
            url: res.data.next
          };
        });
      })
      .catch(function(error) {
        // handle error
        console.log(error);
      });
  };
  static props: any;

  async componentDidMount() {
    const apiVideoUrl = "http://localhost:3000/videos/";
    const apiManualUrl = "http://localhost:3000/manuals/";

    const getVideos = async () => {
      return await axios.get(apiVideoUrl);
    };

    const getManuals = async () => {
      return await axios.get(apiManualUrl);
    };

    try {
      const [videos, manuals] = await Promise.all[(getVideos, getManuals)];

      // render to state setState({ prop: ? })
    } catch (error) {
      this.setState({ error });
    }
  }

  deleteProduct(id: any) {
    const { adminhelpcard } = this.state;

    const apiVideoUrl = `http://localhost:3000/videos/${id}`;
    const apiManualUrl = `http://localhost:3000/manuals/${id}`;

    const options = {
      method: "DELETE"
    };

    fetch(apiVideoUrl, options)
      .then((res) => res.json())
      .then(
        (result) => {
          this.setState({
            response: result,
            adminhelpcard: adminhelpcard.filter((adminhelpcard: SingleAdminHelpCard) => adminhelpcard.id !== id)
          });
        },
        (error) => {
          this.setState({ error });
        }
      );
    fetch(apiManualUrl, options)
      .then((res) => res.json())
      .then(
        (result) => {
          this.setState({
            response: result,
            adminhelpcard: adminhelpcard.filter((adminhelpcard: SingleAdminHelpCard) => adminhelpcard.id !== id)
          });
        },
        (error) => {
          this.setState({ error });
        }
      );

    console.log(this.state.id);
  }

  editProduct(id: any, title: string, url: string, thumbnail: string) {
    const { adminhelpcard } = this.state;
    const apiVideoUrl = `http://localhost:3000/videos/${id}`;
    const apiManualUrl = `http://localhost:3000/manuals/${id}`;

    const options = {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        title,
        url,
        thumbnail
      })
    };

    fetch(apiVideoUrl, options)
      .then((res) => res.json())
      .then(
        (result) => {
          this.setState({
            response: result,
            adminhelpcard: adminhelpcard.filter((adminhelpcard: SingleAdminHelpCard) => adminhelpcard.id !== id)
          });
        },
        (error) => {
          this.setState({ error });
        }
      );
    fetch(apiManualUrl, options)
      .then((res) => res.json())
      .then(
        (result) => {
          this.setState({
            response: result,
            adminhelpcard: adminhelpcard.filter((adminhelpcard: SingleAdminHelpCard) => adminhelpcard.id !== id)
          });
        },
        (error) => {
          this.setState({ error });
        }
      );
  }

  render() {
    console.log(this.state.adminhelpcard);
    return (
      <div>
        <React.Fragment>
          {this.state.adminhelpcard ? (
            <div className="row">
              <InfiniteScroll
                pageStart={1}
                loadMore={this.loadAdminHelpCard}
                hasMore={this.state.url ? true : false}
                threshold={0}
                loader={
                  <div className="loader" key={0}>
                    Loading ...
                  </div>
                }>
                {this.state.adminhelpcard.map((adminhelpcard: SingleAdminHelpCard, i) => (
                  <HelpCard
                    id={adminhelpcard.id}
                    key={adminhelpcard.id + i}
                    title={adminhelpcard.title}
                    url={adminhelpcard.url}
                    thumbnail={adminhelpcard.thumbnail}
                    deleteProduct={this.deleteProduct.bind(this)}
                    editProduct={this.editProduct.bind(this)}
                  />
                ))}
              </InfiniteScroll>
            </div>
          ) : (
            <h1>Loading Cards</h1>
          )}
        </React.Fragment>
      </div>
    );
  }
}

What is triggering this error and for what reason?

--------------------------EDIT---------------------------------- This is the return of the console.log

[
  {
    "data": [
      {
        "id": 1,
        "url": "https://s3.eu-west-2.amazonaws.com/ts-ui.e.mp4",
        "title": "How to train your dragon video",
        "thumbnail": "https://i.ytimg.com/vi/l3uyjXJl2Fw/hqdefault.jpg"
      },
      {
        "title": "Guide - Web",
        "url": "https://s3.eu-west-2.amazonaws.com/ts-ui.e-6928.mp4",
        "thumbnail": "https://i.ytimg.com/vi/Um3BhY0oS2c/hqdefault.jpg",
        "id": 2
      },
      {
        "title": "Reports - Non-Supervisors",
        "url": "https://s3.eu-west-2.amazonaws.com/ts-ui.e-Videos+1263198.mp4",
        "thumbnail": "",
        "id": 3
      },
      {
        "id": 4,
        "url": "https://s3.eu-west-2.amazonaws.com/ts-ui.e-Videos+1263198.mp4",
        "title": " - Non-Supervisors",
        "thumbnail": ""
      },
      {
        "id": 5,
        "url": "https://s3.eu-west-2.amazonaws.com/ts-ui.e-Videos+1263198.mp4",
        "title": " - Non-Supervisors",
        "thumbnail": ""
      },
      {
        "id": 6,
        "url": "https://s3.eu-west-2.amazonaws.com/ts-ui.e-198.mp4",
        "title": "Supervisors",
        "thumbnail": ""
      },
      {
        "id": 7,
        "url": "https://s3.eu-west-2.amazonaws.com/ts-ui.e-deos+1263198.mp4",
        "title": "Supervisors",
        "thumbnail": ""
      }
    ],
    "status": 200,
    "statusText": "OK",
    "headers": {
      "pragma": "no-cache",
      "content-type": "application/json; charset=utf-8",
      "cache-control": "no-cache",
      "expires": "-1"
    },
    "config": {
      "transformRequest": {},
      "transformResponse": {},
      "timeout": 0,
      "xsrfCookieName": "XSRF-TOKEN",
      "xsrfHeaderName": "X-XSRF-TOKEN",
      "maxContentLength": -1,
      "headers": {
        "Accept": "application/json, text/plain, */*"
      },
      "method": "get",
      "url": "http://localhost:3000/videos/"
    },
    "request": {}
  },
  {
    "data": [
      {
        "id": 1,
        "url": "https://s3.eu-west-2.amazonaws.com/ts-ui.e-ite.pdf",
        "title": "How to train your dragon",
        "thumbnail": ""
      },
      {
        "id": 2,
        "url": "https://onaws.com/ts-ui.e-s.pdf",
        "title": "How to train your dragon test3",
        "thumbnail": ""
      },
      {
        "id": 3,
        "url": "https://sm/ts-ui.e-ide.pdf",
        "title": "Resume full guide",
        "thumbnail": ""
      }
    ],
    "status": 200,
    "statusText": "OK",
    "headers": {
      "pragma": "no-cache",
      "content-type": "application/json; charset=utf-8",
      "cache-control": "no-cache",
      "content-length": "634",
      "expires": "-1"
    },
    "config": {
      "transformRequest": {},
      "transformResponse": {},
      "timeout": 0,
      "xsrfCookieName": "XSRF-TOKEN",
      "xsrfHeaderName": "X-XSRF-TOKEN",
      "maxContentLength": -1,
      "headers": {
        "Accept": "application/json, text/plain, */*"
      },
      "method": "get",
      "url": "http://localhost:3000/manuals/"
    },
    "request": {}
  }
]

Upvotes: 2

Views: 6709

Answers (2)

Nimtar
Nimtar

Reputation: 196

You seem to just misspell brackets.

const [videos, manuals] = await Promise.all[(getVideos, getManuals)];

If you want to wait getVideos and getManuals resolved, you should call method Promise.all (with parenthesis) and pass Iteralbe as an argument (with square brackets):

const [videos, manuals] = await Promise.all([getVideos(), getManuals()]);

If you want to use values of promises right here, you can write code like:

Promise.all([getVideos(), getManuals()]).then(([videos, manuals]) => { /* do stuff */ });

See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Upvotes: 3

Marco Quintella
Marco Quintella

Reputation: 106

In:

const [videos, manuals] = await Promise.all[(getVideos, getManuals)];

There is an Error on Promise. The syntax is Promise.All([])

You can use: const [videos, manuals] = await Promise.All([getVideos(), getManuals()])

Read if you don't get it: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Upvotes: 8

Related Questions