Retrieve webhooks from API with datamanager and display list from context

This commit is contained in:
Virginie Ky 2019-12-15 23:53:49 +01:00
parent a2a0efeb4e
commit ad8d8c5361
5 changed files with 22 additions and 74 deletions

View File

@ -7,7 +7,6 @@
import React from 'react'; import React from 'react';
function EditView() { function EditView() {
console.log('hellooo');
return ( return (
<div> <div>
<p>Edit</p> <p>Edit</p>

View File

@ -4,7 +4,8 @@
* *
*/ */
import React from 'react'; import React, { memo } from 'react';
import { Header } from '@buffetjs/custom'; import { Header } from '@buffetjs/custom';
import { useGlobalContext } from 'strapi-helper-plugin'; import { useGlobalContext } from 'strapi-helper-plugin';
import { List } from '@buffetjs/custom'; import { List } from '@buffetjs/custom';
@ -12,60 +13,11 @@ import { List } from '@buffetjs/custom';
import ListRow from '../../components/ListRow'; import ListRow from '../../components/ListRow';
import Wrapper from './Wrapper'; import Wrapper from './Wrapper';
import useDataManager from '../../hooks/useDataManager';
function ListView() { function ListView() {
const { formatMessage } = useGlobalContext(); const { formatMessage } = useGlobalContext();
const { webhooks } = useDataManager();
// Fake data for now
const data = [
{
id: 0,
name: 'gatsby',
isEnabled: false,
url: 'http://thisisanexample.com/1234867874',
headers: {
Authorisation: 'x-secret',
},
hooks: ['createEntry', 'editEntry', 'deleteEntry', 'createMedia'],
links: [
{
icon: 'pencil',
onClick: () => {
console.log('edit');
},
},
{
icon: 'trash',
onClick: () => {
console.log('delete');
},
},
],
},
{
id: 1,
name: 'gatsby',
isEnabled: false,
url: 'http://thisisanexample.com/1234867874',
headers: {
Authorisation: 'x-secret',
},
hooks: ['createEntry', 'editEntry', 'deleteEntry', 'createMedia'],
links: [
{
icon: 'pencil',
onClick: () => {
console.log('edit');
},
},
{
icon: 'trash',
onClick: () => {
console.log('delete');
},
},
],
},
];
// Header props // Header props
const actions = [ const actions = [
@ -91,8 +43,7 @@ function ListView() {
}; };
// List props // List props
const rowsCount = webhooks.length;
const rowsCount = data.length;
const titleLabel = `${ const titleLabel = `${
rowsCount > 1 rowsCount > 1
? formatMessage({ id: `Settings.webhook.list.label.plur` }) ? formatMessage({ id: `Settings.webhook.list.label.plur` })
@ -108,7 +59,7 @@ function ListView() {
const listProps = { const listProps = {
title, title,
button: buttonProps, button: buttonProps,
items: data, items: webhooks,
}; };
return ( return (
@ -122,4 +73,4 @@ function ListView() {
); );
} }
export default ListView; export default memo(ListView);

View File

@ -8,12 +8,7 @@ import styled from 'styled-components';
const Wrapper = styled.div` const Wrapper = styled.div`
> div:first-of-type { > div:first-of-type {
margin-bottom: 31px; margin-bottom: 33px;
}
> div:last-of-type {
> div:first-of-type {
padding-bottom: 1.3rem;
}
} }
`; `;

View File

@ -6,22 +6,25 @@
import React from 'react'; import React from 'react';
import { Switch, Route, useRouteMatch } from 'react-router-dom'; import { Switch, Route, useRouteMatch } from 'react-router-dom';
import WebhooksDataManagerProvider from '../WebhooksDataManagerProvider';
import ListView from './ListView'; import ListView from './ListView';
import EditView from './EditView'; import EditView from './EditView';
function Webhooks() { function Webhooks() {
let { path } = useRouteMatch(); const { path } = useRouteMatch();
return ( return (
<Switch> <WebhooksDataManagerProvider>
<Route exact path={`${path}`}> <Switch>
<ListView /> <Route exact path={`${path}`}>
</Route> <ListView />
<Route path={`${path}/:id`}> </Route>
Edit <EditView /> <Route path={`${path}/:id`}>
</Route> <EditView />
</Switch> </Route>
</Switch>
</WebhooksDataManagerProvider>
); );
} }

View File

@ -220,7 +220,7 @@
"Settings.webhook.list.title": "Webhooks", "Settings.webhook.list.title": "Webhooks",
"Settings.webhook.list.description": "Get POST changes notifications.", "Settings.webhook.list.description": "Get POST changes notifications.",
"Settings.webhook.list.button.add": "Add new webhook", "Settings.webhook.list.button.add": "Add new webhook",
"Settings.webhook.list.button.delete": "delete", "Settings.webhook.list.button.delete": "Delete",
"Settings.webhook.list.label.sing": "webhook", "Settings.webhook.list.label.sing": "webhook",
"Settings.webhook.list.label.plur": "webhooks", "Settings.webhook.list.label.plur": "webhooks",
"app.containers.App.notification.error.init": "An error occured while requesting the API", "app.containers.App.notification.error.init": "An error occured while requesting the API",