STEP-5 Creating Plugin and Axios request
- 1.As an example of using Axios we going to display ScandiPWA version at Website Footer For that create FooterComponent.plugin.js file in [EXTENSION]/src/plugin folder
scandipwa/packages/@scandipwa/version/src/plugin/FooterComponent.plugin.js
import axios from 'axios';
import ContentWrapper from 'Component/ContentWrapper';
export const VERSION_ROUTE = '/scandipwa/version';
const getVersion = (instance) => {
axios.get(VERSION_ROUTE).then((response) => {
instance.setState({ version: response.data });
instance.forceUpdate();
});
};
const state = (original) => ({
...original,
version: ''
});
const componentDidMount = (args, callback, instance) => {
callback(...args);
getVersion(instance);
};
const renderCopyrightContent = (args, callback, instance) => {
const { version } = instance.state;
return (
<>
{ callback(...args) }
<ContentWrapper
mix={ { block: 'Footer', elem: 'CopyrightContentWrapper' } }
wrapperMix={ { block: 'Footer', elem: 'CopyrightContent' } }
label=""
>
<span block="Footer" elem="Copyright">
{ version }
</span>
</ContentWrapper>
</>
);
};
export default {
'Component/Footer/Component': {
'member-function': {
componentDidMount,
renderCopyrightContent
},
'member-property': {
state
}
}
};
