Retrieve webhooks from API with datamanager and display list from context

packages/strapi-admin/admin/src/containers/Webhooks/EditView.js

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

packages/strapi-admin/admin/src/containers/Webhooks/ListView.js

@@ -4,7 +4,8 @@
  *
  */
 
-import React from 'react';
+import React, { memo } from 'react';
+
 import { Header } from '@buffetjs/custom';
 import { useGlobalContext } from 'strapi-helper-plugin';
 import { List } from '@buffetjs/custom';
@@ -12,60 +13,11 @@ import { List } from '@buffetjs/custom';
 import ListRow from '../../components/ListRow';
 import Wrapper from './Wrapper';
 
+import useDataManager from '../../hooks/useDataManager';
+
 function ListView() {
   const { formatMessage } = useGlobalContext();
-
-  // 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');
-          },
-        },
-      ],
-    },
-  ];
+  const { webhooks } = useDataManager();
 
   // Header props
   const actions = [
@@ -91,8 +43,7 @@ function ListView() {
   };
 
   // List props
-
-  const rowsCount = data.length;
+  const rowsCount = webhooks.length;
   const titleLabel = `${
     rowsCount > 1
       ? formatMessage({ id: `Settings.webhook.list.label.plur` })
@@ -108,7 +59,7 @@ function ListView() {
   const listProps = {
     title,
     button: buttonProps,
-    items: data,
+    items: webhooks,
   };
 
   return (
@@ -122,4 +73,4 @@ function ListView() {
   );
 }
 
-export default ListView;
+export default memo(ListView);

packages/strapi-admin/admin/src/containers/Webhooks/Wrapper.js

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

packages/strapi-admin/admin/src/containers/Webhooks/index.js

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

packages/strapi-admin/admin/src/translations/en.json

@@ -220,7 +220,7 @@
   "Settings.webhook.list.title": "Webhooks",
   "Settings.webhook.list.description": "Get POST changes notifications.",
   "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.plur": "webhooks",
   "app.containers.App.notification.error.init": "An error occured while requesting the API",