refactor: forwards api

schema.gql

@@ -2,6 +2,48 @@
 # THIS FILE WAS AUTOMATICALLY GENERATED (DO NOT MODIFY)
 # ------------------------------------------------------
 
+type AggregatedChannelForwards {
+  channel: String
+  channel_info: ChannelInfo
+  id: String!
+  incoming: AggregatedSideStats!
+  outgoing: AggregatedSideStats!
+}
+
+type AggregatedChannelSideForwards {
+  channel: String
+  channel_info: ChannelInfo
+  count: Float!
+  fee: Float!
+  fee_mtokens: String!
+  id: String!
+  mtokens: String!
+  tokens: Float!
+}
+
+type AggregatedRouteForwards {
+  count: Float!
+  fee: Float!
+  fee_mtokens: String!
+  id: String!
+  incoming_channel: String!
+  incoming_channel_info: ChannelInfo
+  mtokens: String!
+  outgoing_channel: String!
+  outgoing_channel_info: ChannelInfo
+  route: String!
+  tokens: Float!
+}
+
+type AggregatedSideStats {
+  count: Float!
+  fee: Float!
+  fee_mtokens: String!
+  id: String!
+  mtokens: String!
+  tokens: Float!
+}
+
 type AmbossSubscription {
   end_date: String!
   subscribed: Boolean!
@@ -319,14 +361,21 @@ type Forward {
   created_at: String!
   fee: Float!
   fee_mtokens: String!
+  id: String!
   incoming_channel: String!
-  incoming_channel_info: ChannelInfo
   mtokens: String!
   outgoing_channel: String!
-  outgoing_channel_info: ChannelInfo
   tokens: Float!
 }
 
+type GetForwards {
+  by_channel: [AggregatedChannelForwards!]!
+  by_incoming: [AggregatedChannelSideForwards!]!
+  by_outgoing: [AggregatedChannelSideForwards!]!
+  by_route: [AggregatedRouteForwards!]!
+  list: [Forward!]!
+}
+
 type GetInvoicesType {
   invoices: [InvoiceType!]!
   next: String
@@ -711,7 +760,7 @@ type Query {
   getClosedChannels: [ClosedChannel!]!
   getConfigState: ConfigState!
   getFeeHealth: ChannelsFeeHealth!
-  getForwards(days: Float!): [Forward!]!
+  getForwards(days: Float!): GetForwards!
   getHello: String!
   getInvoiceStatusChange(id: String!): String!
   getInvoices(token: String): GetInvoicesType!

src/client/pages/forwards.tsx

@@ -3,7 +3,7 @@ import { NextPageContext } from 'next';
 import { getProps } from '../src/utils/ssr';
 import { ForwardsList } from '../src/views/forwards';
 import { ForwardChannelsReport } from '../src/views/home/reports/forwardReport/ForwardChannelReport';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { ForwardTable } from '../src/views/forwards/ForwardTable';
 import { options, typeOptions } from '../src/views/home/reports/forwardReport';
 import { ForwardsGraph } from '../src/views/home/reports/forwardReport/ForwardsGraph';
@@ -15,11 +15,13 @@ import {
   Card,
   CardWithTitle,
   CardTitle,
-  Separation,
 } from '../src/components/generic/Styled';
 import { ForwardSankey } from '../src/views/forwards/forwardSankey';
 import { ChannelCart } from '../src/components/chart/ChannelChart';
 import { useGetChannelsQuery } from '../src/graphql/queries/__generated__/getChannels.generated';
+import { useGetForwardsListQuery } from '../src/graphql/queries/__generated__/getForwards.generated';
+import { toast } from 'react-toastify';
+import { getErrorContent } from '../src/utils/error';
 
 const S = {
   header: styled.div`
@@ -56,6 +58,16 @@ const ForwardsView = () => {
   });
   const [channel, setChannel] = useState(emptyChannel);
 
+  const { data, loading } = useGetForwardsListQuery({
+    variables: { days: days.value },
+    onError: error => toast.error(getErrorContent(error)),
+  });
+
+  const amountForwards = useMemo(() => {
+    if (loading || !data?.getForwards.list.length) return 0;
+    return data.getForwards.list.length;
+  }, [data, loading]);
+
   return (
     <>
       <CardWithTitle>
@@ -110,23 +122,26 @@ const ForwardsView = () => {
         {view.value === 'graph' && (
           <>
             <Card mobileCardPadding={'0'} mobileNoBackground={true}>
-              <ForwardsGraph days={days} type={type} />
-              <Separation />
               <ForwardResume type={type} />
-              <Separation />
-              <ForwardChannelsReport days={days.value} order={type.value} />
             </Card>
-            <SubTitle>Grouped by Channel</SubTitle>
             <Card>
-              <ForwardTable days={days.value} order={type.value} />
-            </Card>
-            <SubTitle>Sankey</SubTitle>
-            <Card>
-              <ForwardSankey
-                days={days.value}
-                type={type.value as 'amount' | 'fee' | 'tokens'}
-              />
+              <ForwardsGraph days={days} type={type} />
             </Card>
+            {amountForwards ? (
+              <>
+                <Card>
+                  <ForwardChannelsReport days={days.value} />
+                </Card>
+                <SubTitle>Grouped by Channel</SubTitle>
+                <Card>
+                  <ForwardTable days={days.value} />
+                </Card>
+                <SubTitle>Sankey</SubTitle>
+                <Card>
+                  <ForwardSankey days={days.value} type={type.value} />
+                </Card>
+              </>
+            ) : null}
           </>
         )}
         {view.value === 'byChannel' && (

src/client/src/components/chart/ChannelChart.tsx

@@ -30,7 +30,7 @@ export const ChannelCart = ({ channelId, days }: ChannelCartProps) => {
     onError: error => toast.error(getErrorContent(error)),
   });
   const filteredData = data
-    ? data.getForwards.filter(it =>
+    ? data.getForwards.list.filter(it =>
         channelId
           ? it.incoming_channel === channelId ||
             it.outgoing_channel === channelId