Welcome to Monetizr Documentation!

Here you will find a comprehensive technical guide
to help you get started with Monetizr SDKs, Plugins,
API reference guide and Console.

Get Started    API Reference

Creating offers detail view

The next step after React.js Tutorial and creating offers list view is to fetch offers details and show information to end user.

Creating offers detail component

To create a new router you will need to install react router:

npm install react-router-dom
# or
yarn add react-router-dom

After installing router, you will need to create a new file that we will use to show offers detail view and we will need to create a route for this detail view. We will create a file called reward.js and add following content:

import React from 'react';
import Container from '@material-ui/core/Container';

export default function Reward(props) {

  return (
    <Container maxWidth={false}>
        <div>
           Detail content
        </div>
    </Container>
    );
}

We will need a way to navigate to the newly created reward view.

Adding navigation

We will add a navigation from previously created offers list to the reward view. To add navigation, we will need to make changes to the App.js:

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route
} from 'react-router-dom';
import './App.css';
import NavigationAppBar from './app-bar.js';
import Reward from './reward.js';

function App() {
  return (
    <div className="App">
      <Router>
          <NavigationAppBar />
          <div>
            <Switch>
              <Route path="/reward">
                <Reward />
              </Route>
              <Route path="/">
                This is home screen
              </Route>
            </Switch>
          </div>
        </Router>
    </div>
  );
}

export default App;

After making changes to the App.js file we do have a route called /reward that renders our Reward component. You can see the route by typing http://localhost:3000/reward in your browser.

Navigation from offers list to the offers detail

Next step in our goal to create offer detail view is to add navigation from the offers list view to the offers detail view. We will need to add onClick functionality to our offers list item and navigate to the detailed view when user clicks on the offer. We will pass additional information with offer tag and API key to the offers detail view.

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import Avatar from '@material-ui/core/Avatar';
import Typography from '@material-ui/core/Typography';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Box from '@material-ui/core/Box';
import PropTypes from 'prop-types';
import FavoriteIcon from '@material-ui/icons/Favorite';
import PersonPinIcon from '@material-ui/icons/PersonPin';
import HelpIcon from '@material-ui/icons/Help';
import { Redirect } from 'react-router-dom';
import history from './history.js';

const styles = theme => ({
  listRoot: {
    width: '100%',
    maxWidth: '100%',
  },
  inline: {
    display: 'inline',
    color: '#f2a535'
  },
  item: {
      backgroundColor: '#1e181e',
      marginTop: '8px',
      borderRadius: '15px',
      padding: '0px',
      cursor: 'pointer',
  },
  avatarContainer: {
      width: '33%',
      height: '100%',
      marginTop: '0px'
  },
  avatar: {
      borderRadius: 0,
      borderTopLeftRadius: '15px',
      borderBottomLeftRadius: '15px',
      width: '100%',
      height: '100%'
  },
  itemtext: {
      marginLeft: '8px'
  }
});

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box p={3}>
          {children}
        </Box>
      )}
    </div>
  );
}

TabPanel.propTypes = {
  children: PropTypes.node,
  index: PropTypes.any.isRequired,
  value: PropTypes.any.isRequired,
};

function a11yProps(index) {
  return {
    id: `simple-tab-${index}`,
    'aria-controls': `simple-tabpanel-${index}`,
  };
}

class OfferList extends React.Component {
    constructor(props){
        super(props);

        this.state = {
          error: null,
          apikey: '0EC739B6CA9AC49961216F280FB8BE7MHASGGYWER',
          isLoaded: false,
          items: [],
          redirect: null,
          offertag: null,
          value: 1,
          onClose: props.onClose
        };
    }

    componentDidMount() {
        fetch("https://api3.themonetizr.com/api/offers?is_active=true", {
            headers: {
                accept: 'application/json',
                authorization: 'Bearer ' + this.state.apikey
            }
        })
          .then(res => {
              if (!res.ok) {
                  throw new Error('Invalid API request, check access parameters');
              }
              return res.json();
          })
          .then(
            (offers) => {
                this.setState({
                    isLoaded: true,
                    items: offers.results
                });
            },
            (error) => {
              this.setState({
                isLoaded: true,
                error
              });
            }
      );
    }

    componentDidUpdate() {
        if (this.state.redirect) {
            // Close the modal box
            this.state.onClose();
        }
    }

  handleChange(event, newValue) {
      this.setState({value: newValue});
  }

  render() {
      const { classes } = this.props;

      if (this.state.redirect) {
          history.push('/');
          return <Redirect to={{'pathname': this.state.redirect, state: {apikey: this.state.apikey, offertag: this.state.offertag}}} />
      }

      if (this.state.error) {
          return <div>Error: {this.state.error.message}</div>;
      } else if (!this.state.isLoaded) {
          return <div>Loading...</div>;
      } else {
          const items = this.state.items;
          return (
              <>
              <Tabs value={this.state.value} variant="fullWidth" onChange={(event, newValue) => this.handleChange(event, newValue)} aria-label="simple tabs example">
                  <Tab icon={<PersonPinIcon />} label="Friends" {...a11yProps(0)} />
                  <Tab icon={<FavoriteIcon />} label="Redeem" {...a11yProps(1)} />
                  <Tab icon={<HelpIcon />} label="Close" {...a11yProps(2)} />
              </Tabs>
              <TabPanel value={this.state.value} index={0}>
              </TabPanel>
              <TabPanel value={this.state.value} index={1}>
                  <div className="modal-offer-list">
                      <List className={classes.listRoot} >
                      {items.map(item => (
                          <ListItem
                          alignItems="center"
                          key={item.id}
                          className={classes.item}
                          onClick={() => {
                              this.setState({ redirect: "/reward", offertag: item.offer_tag});
                          }}
                          >
                          <ListItemAvatar className={classes.avatarContainer}>
                          <Avatar alt="MT" src={item.offer_thumbnail} className={classes.avatar}/>
                          </ListItemAvatar>
                          <ListItemText
                          primary={item.name}
                          className={classes.itemtext}
                          secondary={
                              <React.Fragment>
                              <Typography
                              component="span"
                              variant="body2"
                              className={classes.inline}
                              >

                              </Typography>
                              </React.Fragment>
                          }
                          />
                          </ListItem>
                      ))}
                      </List>
                  </div>
              </TabPanel>
              <TabPanel value={this.state.value} index={2}>
              </TabPanel>
            </>
            );
        }
    }
};

OfferList.propTypes = {
  classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(OfferList);

While adding navigation from offers list vie to the offers detail view, we added helper file to handle browser history. This helper allows to push state to the browser history when we navigate away from the home screen.

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

We still might require additional changes configuring navigation from offers list to the details view. For now we will implement next task - fetch offers details from API.

Fetching offer details

To fetch offer details, we need to use offers details API endpoint. This endpoint requires offers tag and api key in order to acquire data from API. The API key can be acquired in Monetizr console . We already have acquired API key for our tutorial and we have sent necessary information from offers list view to the offers detail view. To make a fetch request we will add following changes to the reward.js file

import React, {useEffect, useState} from 'react';
import Container from '@material-ui/core/Container';
import { useHistory } from "react-router-dom";

export default function Reward(props) {
  let history = useHistory();
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [reward, setReward] = useState([]);

  useEffect(() => {
    fetch("https://api3.themonetizr.com/api/products/" + history.location.state.offertag, {
        headers: {
            accept: 'application/json',
            authorization: 'Bearer ' + history.location.state.apikey
        }
    })
      .then(res => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setReward(result);
        },
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
    );
}, [history.location.state.offertag, history.location.state.apikey])

  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
      return (
          <Container maxWidth={false}>
          <div>
            {JSON.stringify(reward)}
          </div>
          </Container>
      );
  }
}

Now we have offers detail view and the necessary information for the details view. The next step is to display this information in useful way and then complete purchase.

Updated about a month ago


Creating offers detail view


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.