mirror of
https://github.com/strapi/strapi.git
synced 2025-09-16 12:02:41 +00:00
Retrieve webhooks from API with datamanager and display list from context
This commit is contained in:
parent
a2a0efeb4e
commit
ad8d8c5361
@ -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>
|
||||||
|
@ -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);
|
||||||
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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",
|
||||||
|
Loading…
x
Reference in New Issue
Block a user