Components: rename Output, Results

Components/Output/Results/config.ts

@@ -1,7 +1,7 @@
 /* eslint-disable object-curly-newline */
 
 import type { Values } from 'stores/results/types';
-import { formatMoney, formatPercent } from 'tools/format';
+import { formatMoney, formatNumber, formatPercent } from 'tools/format';
 import { pipe } from 'tools/function';
 import { round } from 'tools/number';
 
@@ -58,7 +58,7 @@ const percentFormatters = Object.fromEntries(
 );
 
 const defaultFormatters = {
-  resultTerm: (value: number) => value,
+  resultTerm: (value: number) => formatNumber(value),
 };
 
 export const formatters = Object.assign(moneyFormatters, percentFormatters, defaultFormatters);

Components/Output/Results/index.jsx

@@ -17,9 +17,9 @@ const Grid = styled(Box)`
   }
 `;
 
-const Output = observer(() => {
+const Results = observer(() => {
   const { $results } = useStore();
-  const values = toJS($results.output);
+  const values = toJS($results.values);
 
   return (
     <Grid>
@@ -42,5 +42,5 @@ const Output = observer(() => {
 export default {
   id,
   title,
-  Component: Output,
+  Component: Results,
 };

Components/Output/index.jsx

@@ -2,11 +2,11 @@ import Background from 'Elements/layout/Background';
 import Tabs from 'Elements/layout/Tabs';
 import styled from 'styled-components';
 import { min } from 'UIKit/mq';
-import Output from './Output';
 import PaymentsTable from './PaymentsTable';
+import Results from './Results';
 import Validation from './Validation';
 
-const resultsTabs = [PaymentsTable, Output, Validation];
+const outputTabs = [PaymentsTable, Results, Validation];
 
 const Wrapper = styled(Background)`
   padding: 4px 10px;
@@ -18,11 +18,11 @@ const Wrapper = styled(Background)`
   }
 `;
 
-function Results() {
+function Output() {
   return (
     <Wrapper>
       <Tabs>
-        {resultsTabs.map(({ id, title, Component }) => (
+        {outputTabs.map(({ id, title, Component }) => (
           <Tabs.TabPane tab={title} key={id}>
             <Component />
           </Tabs.TabPane>
@@ -32,4 +32,4 @@ function Results() {
   );
 }
 
-export default Results;
+export default Output;

pages/index.tsx

@@ -1,6 +1,6 @@
 import initializeApollo from 'apollo/client';
 import * as Calculation from 'Components/Calculation';
-import Results from 'Components/Results';
+import Output from 'Components/Output';
 import type { GetServerSideProps } from 'next';
 import Head from 'next/head';
 import { fetchUser } from 'services/user';
@@ -38,7 +38,7 @@ function Home() {
       </Head>
       <Calculation.Form />
       <Calculation.Settings />
-      <Results />
+      <Output />
     </Grid>
   );
 }

stores/results/default-values.ts

@@ -1,8 +1,7 @@
 /* eslint-disable import/prefer-default-export */
+import type { ResultsValues } from './types';
 
-import type { OutputValues } from './types';
-
-export const defaultOutputValues: OutputValues = {
+export const defaultResultsValues: ResultsValues = {
   resultTotalGraphwithNDS: 0,
   resultPlPrice: 0,
   resultPriceUpPr: 0,

stores/results/index.ts

@@ -1,19 +1,19 @@
-import type { Payment } from 'Components/Results/PaymentsTable/types';
+import type { Payment } from 'Components/Output/PaymentsTable/types';
 import type { IObservableArray } from 'mobx';
 import { makeAutoObservable, observable } from 'mobx';
 
 import type RootStore from 'stores/root';
-import { defaultOutputValues } from './default-values';
-import type { OutputValues } from './types';
+import { defaultResultsValues } from './default-values';
+import type { ResultsValues } from './types';
 
 export default class Results {
   root: RootStore;
   payments: IObservableArray<Payment>;
-  output: OutputValues;
+  values: ResultsValues;
 
   constructor(rootStore: RootStore) {
     this.payments = observable<Payment>([]);
-    this.output = defaultOutputValues;
+    this.values = defaultResultsValues;
     makeAutoObservable(this);
 
     this.root = rootStore;
@@ -23,12 +23,12 @@ export default class Results {
     this.payments.replace(payments);
   };
 
-  setOutput = (output: OutputValues) => {
-    this.output = output;
+  setValues = (values: ResultsValues) => {
+    this.values = values;
   };
 
   clear = () => {
     this.payments.clear();
-    this.output = defaultOutputValues;
+    this.values = defaultResultsValues;
   };
 }

stores/results/types.ts

@@ -1,4 +1,4 @@
-export type OutputValues = {
+export type ResultsValues = {
   resultTotalGraphwithNDS: number;
   resultPlPrice: number;
   resultPriceUpPr: number;
@@ -19,4 +19,4 @@ export type OutputValues = {
   resultFirstPaymentRiskPolicy: number;
 };
 
-export type Values = keyof OutputValues;
+export type Values = keyof ResultsValues;