From 80d3f3f0ebfadf80aa12e7c4fbd6b065e5133045 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Thu, 9 Mar 2023 15:30:08 +0100 Subject: [PATCH 1/4] refactor: reduce size of WebhookList function --- src/WebhookDisplay/WebhookList.component.tsx | 63 ++++++++++---------- 1 file changed, 33 insertions(+), 30 deletions(-) diff --git a/src/WebhookDisplay/WebhookList.component.tsx b/src/WebhookDisplay/WebhookList.component.tsx index cd765cc..909f221 100644 --- a/src/WebhookDisplay/WebhookList.component.tsx +++ b/src/WebhookDisplay/WebhookList.component.tsx @@ -45,6 +45,38 @@ type QueryWebhook = { webhooks: Array | null; }; +const useBuildColumns = (data: QueryWebhook | undefined) => + React.useMemo[]>( + () => [ + { + Header: "Id", + accessor: (webhook: Webhook) => webhook.id.substring(0, 11), + title: "Id", + style: { minWidth: "140px" }, + }, + { + Header: "Path", + accessor: (webhook: Webhook) => webhook.path, + title: "Path", + style: largePayloadCellStyle, + }, + { + Header: "Body", + accessor: (webhook: Webhook) => webhook.body, + title: "Body", + style: largePayloadCellStyle, + }, + { + Header: "Received at", + accessor: (webhook: Webhook) => + new Date(webhook.receivedAt).toLocaleString(), + title: "Received at", + style: { minWidth: "180px" }, + }, + ], + [data] + ); + const COMMENTS_SUBSCRIPTION = gql` subscription WebhookAdded { webhookAdded { @@ -100,36 +132,7 @@ const WebhookList: React.FC = () => { }; }, [subscribeToMore]); - const columns = React.useMemo[]>( - () => [ - { - Header: "Id", - accessor: (webhook: Webhook) => webhook.id.substring(0, 11), - title: "Id", - style: { minWidth: "140px" }, - }, - { - Header: "Path", - accessor: (webhook: Webhook) => webhook.path, - title: "Path", - style: largePayloadCellStyle, - }, - { - Header: "Body", - accessor: (webhook: Webhook) => webhook.body, - title: "Body", - style: largePayloadCellStyle, - }, - { - Header: "Received at", - accessor: (webhook: Webhook) => - new Date(webhook.receivedAt).toLocaleString(), - title: "Received at", - style: { minWidth: "180px" }, - }, - ], - [data] - ); + const columns = useBuildColumns(data); const orderedWebhooks = useMemo(() => { return ( From 5e7949123eee596171aa3c3335dd60a2cdcabff1 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Thu, 9 Mar 2023 15:36:24 +0100 Subject: [PATCH 2/4] refactor: reduce size of WebhookList function --- src/WebhookDisplay/WebhookList.component.tsx | 42 +++++++++++--------- 1 file changed, 23 insertions(+), 19 deletions(-) diff --git a/src/WebhookDisplay/WebhookList.component.tsx b/src/WebhookDisplay/WebhookList.component.tsx index 909f221..050b249 100644 --- a/src/WebhookDisplay/WebhookList.component.tsx +++ b/src/WebhookDisplay/WebhookList.component.tsx @@ -12,6 +12,7 @@ import { import { forwardWebhookToLocalhost } from "../forward-to-localhost"; import posthog from "posthog-js"; import { WebhookStoreUrlContext } from "../WebhookStoreUrl/WebhookStoreUrl.context"; +import { UpdateQueryFn } from "@apollo/client/core/watchQueryOptions"; const largePayloadCellStyle: React.CSSProperties = { minWidth: 200, @@ -77,6 +78,27 @@ const useBuildColumns = (data: QueryWebhook | undefined) => [data] ); +const subscribeToMoreUpdateQuery = + (path: string | undefined): UpdateQueryFn => + (prev, { subscriptionData }): QueryWebhook => { + const baseUrl = "http://localhost:8010/proxy"; + if (!subscriptionData.data) { + return prev; + } + if (path && subscriptionData.data.webhookAdded.path != path) { + return prev; + } + const newWebhook = subscriptionData.data.webhookAdded; + try { + void forwardWebhookToLocalhost(baseUrl, newWebhook); + } catch (err) { + console.error(err); + } + posthog.capture("New webhook received", { webhookId: newWebhook.id }); + return Object.assign({}, prev, { + webhooks: [newWebhook, ...(prev.webhooks || [])], + }); + }; const COMMENTS_SUBSCRIPTION = gql` subscription WebhookAdded { webhookAdded { @@ -102,30 +124,12 @@ const WebhookList: React.FC = () => { const { data, subscribeToMore } = useQuery(QUERY_WEBHOOKS, { variables: { first: 100, path }, }); - const baseUrl = "http://localhost:8010/proxy"; const { value: webhookStoreUrl } = useContext(WebhookStoreUrlContext); useEffect(() => { const unsuscribe = subscribeToMore({ document: COMMENTS_SUBSCRIPTION, - updateQuery: (prev, { subscriptionData }): QueryWebhook => { - if (!subscriptionData.data) { - return prev; - } - if (path && subscriptionData.data.webhookAdded.path != path) { - return prev; - } - const newWebhook = subscriptionData.data.webhookAdded; - try { - void forwardWebhookToLocalhost(baseUrl, newWebhook); - } catch (err) { - console.error(err); - } - posthog.capture("New webhook received", { webhookId: newWebhook.id }); - return Object.assign({}, prev, { - webhooks: [newWebhook, ...(prev.webhooks || [])], - }); - }, + updateQuery: subscribeToMoreUpdateQuery(path), }); return () => { unsuscribe(); From 1791ba216720efb269574069ab0d4bd867ea881c Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Thu, 9 Mar 2023 15:39:51 +0100 Subject: [PATCH 3/4] refactor: reduce size of WebhookList function --- src/WebhookDisplay/WebhookList.component.tsx | 54 +++++++++++--------- 1 file changed, 30 insertions(+), 24 deletions(-) diff --git a/src/WebhookDisplay/WebhookList.component.tsx b/src/WebhookDisplay/WebhookList.component.tsx index 050b249..87f6a84 100644 --- a/src/WebhookDisplay/WebhookList.component.tsx +++ b/src/WebhookDisplay/WebhookList.component.tsx @@ -78,6 +78,35 @@ const useBuildColumns = (data: QueryWebhook | undefined) => [data] ); +const useBuildTable = (data: QueryWebhook | undefined) => { + const columns = useBuildColumns(data); + + const orderedWebhooks = useMemo(() => { + return ( + data?.webhooks?.slice().sort((a, b) => { + return Number(b.id) - Number(a.id); + }) || [] + ); + }, [data]); + + const initialState: UsePaginationState = { + pageSize: 15, + pageIndex: 0, + }; + + const table = useTable( + { + columns, + data: orderedWebhooks, + // @ts-ignore + initialState, + }, + usePagination + ); + + return { table, orderedWebhooks }; +}; + const subscribeToMoreUpdateQuery = (path: string | undefined): UpdateQueryFn => (prev, { subscriptionData }): QueryWebhook => { @@ -136,30 +165,7 @@ const WebhookList: React.FC = () => { }; }, [subscribeToMore]); - const columns = useBuildColumns(data); - - const orderedWebhooks = useMemo(() => { - return ( - data?.webhooks?.slice().sort((a, b) => { - return Number(b.id) - Number(a.id); - }) || [] - ); - }, [data]); - - const initialState: UsePaginationState = { - pageSize: 15, - pageIndex: 0, - }; - - const table = useTable( - { - columns, - data: orderedWebhooks, - // @ts-ignore - initialState, - }, - usePagination - ); + const { table, orderedWebhooks } = useBuildTable(data); return orderedWebhooks && orderedWebhooks.length > 0 ? ( From a633e7c65d3fdf1ea3adf1f3fb2a577f64851298 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Thu, 9 Mar 2023 15:41:18 +0100 Subject: [PATCH 4/4] refactor: WebhookList is less than 25 lines --- src/WebhookDisplay/WebhookList.component.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/WebhookDisplay/WebhookList.component.tsx b/src/WebhookDisplay/WebhookList.component.tsx index 87f6a84..6227def 100644 --- a/src/WebhookDisplay/WebhookList.component.tsx +++ b/src/WebhookDisplay/WebhookList.component.tsx @@ -154,7 +154,6 @@ const WebhookList: React.FC = () => { variables: { first: 100, path }, }); const { value: webhookStoreUrl } = useContext(WebhookStoreUrlContext); - useEffect(() => { const unsuscribe = subscribeToMore({ document: COMMENTS_SUBSCRIPTION, @@ -164,9 +163,7 @@ const WebhookList: React.FC = () => { unsuscribe(); }; }, [subscribeToMore]); - const { table, orderedWebhooks } = useBuildTable(data); - return orderedWebhooks && orderedWebhooks.length > 0 ? ( ) : (