Berry uses fack/mock data to render some pages and actions. Mocking has been achieved with help of Axios. It helps users to do minimal changes to load live data. Users just need to change the mock API URL to the Live service URL.
How does it work?
Axios has been configured in the folder ..src\utils\axios.js
To use Axios on a page, you need to import it and make a call. After that, you need to make calls to Axios using axios.get('path') or axios.post('path') see below implementation.
axios.js
...
import axios from '../../../../utils/axios'; // 1. import axios
...
const CardListPage = () => {
const [data, setData] = React.useState([]);
...
...
// get dummy data
const getData = async () => {
const response = await axios.get('/api/chat/users'); // 2. change it to live service URL
setData(response.data.users);
return response.data.users;
};
...
...
// 3. call to get data
React.useEffect(() => {
getData();
}, []);
...
...
// use data in HTML
{Object.keys(data).map((key, index) => {
return (
<React.Fragment key={index}>
...
...
</React.Fragment>
);
...
...
})
};
};
export default SamplePage;
Berry has all dummy data in folder src\_mockApis. For API, api/chat/users, following data configured in ..\src_mockApis\chat\index.js :