CODEWITHSUNDEEP
javascriptreactjstypescript
zadders
zadders

Reputation: 438

How to see updated list without refreshing the page

I have created an admin control panel that allows me to create, edit and delete sets of data from a local API and then display the data as cards on the panel page.

The create, edit and delete features all work successfully. The edit and delete features allow me to use the functions and they display the updated list on the page without me having to refresh the page physically.

The code for the edit and delete features are as follows:

deleteProduct(id: any) {
    const { adminhelpcard } = this.state;
    const apiVideoUrl = `http://localhost:3000/videos/${id}`;

    axios
      .delete(apiVideoUrl, {})
      .then((response: any) => {
        this.setState({
          adminhelpcard: adminhelpcard.filter((adminhelpcard: SingleAdminHelpCard) => adminhelpcard.id !== id)
        });
      })
      .catch(function(error) {
        console.log(error);
      });
  }


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

    axios
      .put(apiVideoUrl, {
        title: title,
        url: url,
        thumbnail: thumbnail
      })
      .catch(function(error) {
        console.log(error);
      });
  }

The code for the create function is as follows:

createVideoProduct(title: string, url: string, thumbnail: string) {
    const { adminhelpcard } = this.state;
    const apiVideoUrl = `http://localhost:3000/videos/`;

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

    fetch(apiVideoUrl, options)
      .then((res) => res.json())
      .then(
        (result) => {
          this.setState(({ adminhelpcard }) => ({
            adminhelpcard: adminhelpcard.concat(result)
          }));
        },
        (error) => {
          this.setState({ error });
        }
      );
  }

I have used a event.preventDefault(); function that prevents the page from refreshing after submitting my create function. The card is successfully created as the API is updated, but the card does not display onto the list until I physically refresh the page.

The state for the cards being created is as follows:

interface State {
  url: string;
  title: string;
  adminhelpcard: SingleAdminHelpCard[];
  error: null;
  response: {};
  thumbnail: string;
  isEditProduct: boolean;
  isAddProduct: boolean;
  id: string;
  whichRadioSelected: string;
}
interface SingleAdminHelpCard {
  id: string;
  url: string;
  title: string;
  thumbnail: string;
}

As far as my knowledge goes, the code should be successfully doing what it's intending to but I can't seem to understand why it isn't working.

Thank you in advance for the support.

------------------EDIT--------------------------

I have added the loadAdminHelpCard function and tried to call this on my clickHandler and my button onClick but it didn't seem to work either.

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);
      });
  };

Upvotes: 0

Views: 107

Answers (1)

nir99
nir99

Reputation: 86

it is possible that you did not actually return the data after creating the product, or you are returning an empty array. when you refreshing the page the get method( it is not shown here) that you use to fetch the data will give you the whole query. so make sure you return a valid array after creating a videoProduct. you can valid your answer by console.log(result) and see for your self that it is returning the data.

and you can simplify just doing 

createVideoProduct(title: string, url: string, thumbnail: string) {
const { adminhelpcard } = this.state;
const apiVideoUrl = `http://localhost:3000/videos/`;

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

fetch(apiVideoUrl, options)
  .then((res) => res.json())
  .then(
    (result) => {
      this.setState({ adminhelpcard: adminhelpcard.concat(result) });
    },
    (error) => {
      this.setState({ error });
    }
  );

}

no need to wrap your setState as you did, and additional use eslint; it is a tool that helps us to understand errors.

Upvotes: 1

Related Questions