WIP Financial statements.

client/src/components/FinancialSheet.js

@@ -1,40 +1,59 @@
-import React, { Children } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import moment from 'moment';
 import classnames from 'classnames';
 import LoadingIndicator from 'components/LoadingIndicator';
 
 export default function FinancialSheet({
-  companyTitle,
+  companyName,
   sheetType,
-  date,
+  fromDate,
+  toDate,
   children,
   accountingBasis,
   name,
   loading,
   className,
+  basis,
 }) {
-  const formattedDate = moment(date).format('DD MMMM YYYY')
+  const formattedFromDate = moment(fromDate).format('DD MMMM YYYY');
+  const formattedToDate = moment(toDate).format('DD MMMM YYYY');
   const nameModifer = name ? `financial-sheet--${name}` : '';
 
+  const methodsLabels = useMemo(() => ({
+    'cash': 'Cash',
+    'accural': 'Accural',
+  }), []);
+  const getBasisLabel = useCallback((b) => methodsLabels[b], [methodsLabels]);
+  const basisLabel = useMemo(() => getBasisLabel(basis), [getBasisLabel, basis]);
+
   return (
     <div className={classnames('financial-sheet', nameModifer, className)}>
-      <LoadingIndicator loading={loading}>
-        <h1 class="financial-sheet__title">{ companyTitle }</h1>
+      <LoadingIndicator loading={loading} spinnerSize={34} />
+
+      <div className={classnames('financial-sheet__inner', {
+        'is-loading': loading,
+      })}>
+        <h1 class="financial-sheet__title">
+          { companyName }
+        </h1>
         <h6 class="financial-sheet__sheet-type">{ sheetType }</h6>
-        <div class="financial-sheet__date">From { formattedDate } | To { formattedDate }</div>
+        <div class="financial-sheet__date">
+          From { formattedFromDate } | To { formattedToDate }
+        </div>
 
         <div class="financial-sheet__table">
           { children }
         </div>
-
         <div class="financial-sheet__accounting-basis">
           { accountingBasis }
         </div>
 
-        <div class="financial-sheet__basis">
-          Accounting Basis: Accural
-        </div>
-      </LoadingIndicator>
+        { (basisLabel) && (
+          <div class="financial-sheet__basis">
+            Accounting Basis: { basisLabel }
+          </div>
+        )}        
+      </div>
     </div>
   );
 }