refactor: ♻️ forward report

apotdevin · Jul 12, 2020 · 5dd94af · 5dd94af
1 parent 77b597d
commit 5dd94af
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 168 deletions.
diff --git a/server/schema/widgets/resolvers/getInOut.ts b/server/schema/widgets/resolvers/getInOut.ts
@@ -29,7 +29,7 @@ export const getInOut = async (
   } else if (params.time === 'quarter_year') {
     periods = 90;
   } else if (params.time === 'month') {
-    periods = 150;
+    periods = 30;
   } else if (params.time === 'day') {
     periods = 24;
     difference = (date: string) => differenceInHours(endDate, new Date(date));

diff --git a/src/components/buttons/multiButton/MultiButton.tsx b/src/components/buttons/multiButton/MultiButton.tsx
@@ -9,6 +9,7 @@ import {
 interface StyledSingleProps {
   selected?: boolean;
   buttonColor?: string;
+  withPadding?: string;
 }
 
 const StyledSingleButton = styled.button<StyledSingleProps>`
@@ -17,7 +18,7 @@ const StyledSingleButton = styled.button<StyledSingleProps>`
   outline: none;
   border: none;
   text-decoration: none;
-  padding: 8px 16px;
+  padding: ${({ withPadding }) => (withPadding ? withPadding : '8px 16px')};
   background-color: transparent;
   color: ${multiSelectColor};
   flex-grow: 1;
@@ -35,19 +36,22 @@ const StyledSingleButton = styled.button<StyledSingleProps>`
 interface SingleButtonProps {
   selected?: boolean;
   color?: string;
+  withPadding?: string;
   onClick?: () => void;
 }
 
 export const SingleButton: React.FC<SingleButtonProps> = ({
   children,
   selected,
   color,
+  withPadding,
   onClick,
 }) => {
   return (
     <StyledSingleButton
       selected={selected}
       buttonColor={color}
+      withPadding={withPadding}
       onClick={() => {
         onClick && onClick();
       }}

diff --git a/src/views/home/reports/flow/FlowReport.tsx b/src/views/home/reports/flow/FlowReport.tsx
@@ -28,7 +28,7 @@ export const FlowReport = ({
   const format = getPrice(currency, displayValues, priceContext);
 
   let domain = 24;
-  let barWidth = 3;
+  let barWidth = 1;
   if (isTime === 'week') {
     domain = 7;
     barWidth = 15;
@@ -38,10 +38,8 @@ export const FlowReport = ({
     domain = 90;
   } else if (isTime === 'half_year') {
     domain = 180;
-    barWidth = 1;
   } else if (isTime === 'year') {
     domain = 360;
-    barWidth = 1;
   }
 
   return (

diff --git a/src/views/home/reports/forwardReport/Buttons.tsx b/src/views/home/reports/forwardReport/Buttons.tsx
@@ -8,24 +8,34 @@ import { ResponsiveSingle } from 'src/components/generic/Styled';
 interface ButtonProps {
   isTime: string;
   isType: string;
+  withFee?: boolean;
   setIsTime: (text: string) => void;
   setIsType: (text: string) => void;
 }
 
 export const ButtonRow = ({
+  withFee,
   isTime,
   setIsTime,
   isType,
   setIsType,
 }: ButtonProps) => {
   const timeButton = (time: string, title: string) => (
-    <SingleButton onClick={() => setIsTime(time)} selected={isTime === time}>
+    <SingleButton
+      withPadding={'4px 8px'}
+      onClick={() => setIsTime(time)}
+      selected={isTime === time}
+    >
       {title}
     </SingleButton>
   );
 
   const typeButton = (type: string, title: string) => (
-    <SingleButton onClick={() => setIsType(type)} selected={isType === type}>
+    <SingleButton
+      withPadding={'4px 8px'}
+      onClick={() => setIsType(type)}
+      selected={isType === type}
+    >
       {title}
     </SingleButton>
   );
@@ -43,6 +53,7 @@ export const ButtonRow = ({
       <MultiButton>
         {typeButton('amount', 'Amount')}
         {typeButton('tokens', 'Tokens')}
+        {withFee && typeButton('fee', 'Fees')}
       </MultiButton>
     </ResponsiveSingle>
   );

diff --git a/src/views/home/reports/forwardReport/ForwardChannelReport.tsx b/src/views/home/reports/forwardReport/ForwardChannelReport.tsx
@@ -1,13 +1,16 @@
 import React, { useState } from 'react';
 import { toast } from 'react-toastify';
 import { GitCommit, ArrowDown, ArrowUp } from 'react-feather';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { useAccountState } from 'src/context/AccountContext';
 import { useGetForwardChannelsReportQuery } from 'src/graphql/queries/__generated__/getForwardChannelsReport.generated';
+import {
+  MultiButton,
+  SingleButton,
+} from 'src/components/buttons/multiButton/MultiButton';
 import { getErrorContent } from '../../../../utils/error';
 import {
   DarkSubTitle,
-  SmallButton,
   SingleLine,
 } from '../../../../components/generic/Styled';
 import { LoadingCard } from '../../../../components/loading/LoadingCard';
@@ -23,36 +26,6 @@ const ChannelRow = styled.div`
   align-items: center;
 `;
 
-const ButtonRow = styled.div`
-  display: flex;
-  margin-bottom: 5px;
-`;
-
-type TriButtonProps = {
-  selected: boolean;
-};
-
-const TriButton = styled(SmallButton)<TriButtonProps>`
-  margin: 0;
-  border-radius: 0;
-
-  ${({ selected }) =>
-    selected &&
-    css`
-      color: white;
-    `}
-`;
-
-const LeftButton = styled(TriButton)`
-  border-bottom-left-radius: 5px;
-  border-top-left-radius: 5px;
-`;
-
-const RightButton = styled(TriButton)`
-  border-bottom-right-radius: 5px;
-  border-top-right-radius: 5px;
-`;
-
 const TableLine = styled.div`
   width: 35%;
   white-space: nowrap;
@@ -68,10 +41,9 @@ const LastTableLine = styled(TableLine)`
 interface Props {
   isTime: string;
   isType: string;
-  color: string;
 }
 
-export const ForwardChannelsReport = ({ isTime, isType, color }: Props) => {
+export const ForwardChannelsReport = ({ isTime, isType }: Props) => {
   const [type, setType] = useState('route');
 
   const { currency, displayValues } = useConfigState();
@@ -92,28 +64,7 @@ export const ForwardChannelsReport = ({ isTime, isType, color }: Props) => {
 
   const report = data.getForwardChannelsReport;
 
-  const fillArray = (array: {}[]) => {
-    const lengthMissing = 10 - array.length;
-    if (lengthMissing === 10) {
-      return [];
-    }
-    if (lengthMissing > 0) {
-      for (let i = 0; i < lengthMissing; i += 1) {
-        array.push({
-          aliasIn: '-',
-          aliasOut: '-',
-          alias: '-',
-          name: '-',
-          amount: '',
-          fee: '',
-          tokens: '',
-        });
-      }
-    }
-    return array;
-  };
-
-  const parsed = fillArray(JSON.parse(report));
+  const parsed = JSON.parse(report);
 
   const getFormatString = (amount: number | string) => {
     if (typeof amount === 'string') return amount;
@@ -179,29 +130,29 @@ export const ForwardChannelsReport = ({ isTime, isType, color }: Props) => {
   };
 
   const renderButtons = () => (
-    <ButtonRow>
-      <LeftButton
-        color={color}
+    <MultiButton>
+      <SingleButton
+        withPadding={'4px 8px'}
         selected={type === 'incoming'}
         onClick={() => setType('incoming')}
       >
-        <ArrowDown size={18} />
-      </LeftButton>
-      <TriButton
+        <ArrowDown size={14} />
+      </SingleButton>
+      <SingleButton
+        withPadding={'4px 8px'}
         selected={type === 'route'}
         onClick={() => setType('route')}
-        color={color}
       >
-        <GitCommit size={18} />
-      </TriButton>
-      <RightButton
+        <GitCommit size={14} />
+      </SingleButton>
+      <SingleButton
+        withPadding={'4px 8px'}
         selected={type === 'outgoing'}
-        color={color}
         onClick={() => setType('outgoing')}
       >
-        <ArrowUp size={18} />
-      </RightButton>
-    </ButtonRow>
+        <ArrowUp size={14} />
+      </SingleButton>
+    </MultiButton>
   );
 
   const renderTop = (title: string) => (