instagram_downloader.js

import React, { Component } from 'react';
import './App.css';

const imagesFromFeed = (feed) => feed['graphql'] ? feed['graphql']['user']['edge_owner_to_timeline_media']['edges'] : null
const imageFromNode = (node) =>  node['node']['display_url']
const idFromNode = (node) => node['node']['id']

const fetchUserFeed = (user) => 
  fetch(`https://www.instagram.com/${user}/?__a=1`)
    .then(res => res.json())
    .then(feed =>  {
      const images = imagesFromFeed(feed)
      if(!images) {
        return null
      }
      else{
        return {
          user,
          images: images.map((f) => ({ url: imageFromNode(f), id: idFromNode(f)}))  
        }
      }
    })
    
const fetchUserFeeds = (users) => users.map(fetchUserFeed)

class App extends Component {
  state = {
    users: ['iremsak'], 
    content: []
  }

  fetchUsersAndRender() {
    Promise.all(fetchUserFeeds(this.state.users))
      .then((content) => this.setState({ content }))  
  }

  componentDidMount() {
    this.fetchUsersAndRender()
  }

  addUser() {
    const user = prompt('Enter public username')
    if(user){
      const users = [...this.state.users, user]
      this.setState({ users })
    }
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    this.fetchUsersAndRender()
  }

  render() {
    return (
      <div className="App">
        <button onClick={ this.addUser.bind(this) }>Add</button>

        {this.state.content.map(c =>
          <div key={c.user}>
            <h1>{c.user}</h1>
            {c.images.map(img =>
              <a key={img.id} href={img.url} target="_blank"><img src={img.url} height="64" width="64"/></a>
            )}
          </div>
        )}
      </div>
    );
  }
}

export default App;