Web View

Here we are going to improve the hello-exchange view to display the exchange information.
In order to see the plugin's changes, we need to refresh the page after every change.
Make sure you have disabled CORS on your browser.
We are going to update the path for the hello-exchange page inside the view.json file. After updating the path you will be able to see the page under localhost:3000/hello-exchange
{
  "meta": {
    "is_page": true,
    "path": "/hello-exchange",
    "hide_from_appbar": true,
    "hide_from_sidebar": false,
    "hide_from_menulist": false,
    "string": {
      "id": "title",
      "is_global": false
    },
    "icon": {
      "id": "SIDEBAR_HELP",
      "is_global": true
    }
  }
}
Update the strings.json file under the assets folder so it looks like the following:
{
  "en": {
    "title": "Hello exchange",
    "hello": "Hello {0}"
  }
}
Update Form.js component under the view folder. This will send a request to the endpoint that we have created and display exchange information to the user.
Form.js
import React, { useEffect, useState } from 'react';
import { IconTitle, PanelInformationRow } from 'hollaex-web-lib';
import { withKit } from 'components/KitContext';
import Title from 'components/Title';
import axios from 'axios';
​
const Form = ({
  strings: STRINGS,
  icons: ICONS,
  generateId,
  plugin_url: PLUGIN_URL
}) => {
​
  const [info, setInfo] = useState();
​
  useEffect(() => {
    axios.get(`${PLUGIN_URL}/plugins/hello-exchange/info`).then(({ data: { exchange_info = {} }}) => {
      setInfo(exchange_info);
    })
  }, [])
​
  return (
    <div className="presentation_container apply_rtl verification_container">
      <IconTitle
        stringId={generateId('title')}
        text={STRINGS[generateId('title')]}
        textType="title"
        iconPath={ICONS['SIDEBAR_HELP']}
      />
      <form className="d-flex flex-column w-100 verification_content-form-wrapper">
        <div className="verification-form-panel mt-3 mb-5">
          <div className="my-4 py-4">
            <Title />
            <div className="py-4">
              {info ? Object.entries(info).map(([key, value]) => (
                <PanelInformationRow
                  key={key}
                  label={key}
                  information={value}
                  className="title-font"
                  disable
                />
              )) : (
                <div className="pt-4">Loading ...</div>
              )}
            </div>
          </div>
        </div>
      </form>
    </div>
  )
}
​
const mapContextToProps = ({ strings, activeLanguage, icons, generateId, plugin_url }) => ({
  strings,
  activeLanguage,
  icons,
  generateId,
  plugin_url
});
​
export default withKit(mapContextToProps)(Form);
Last modified 11d ago