From 6193f0c3117090e5ba08368c75d36a506ef44e35 Mon Sep 17 00:00:00 2001
From: Chika <djchikalkin@gmail.com>
Date: Wed, 2 Sep 2020 21:33:20 +0300
Subject: [PATCH] UI refactor

---
 src/client/Components/Result.tsx              |  7 ++--
 .../Containers/Calculation/Results/index.jsx  | 15 ++++++++
 .../Containers/Calculation/Sections/index.jsx | 35 ++++++++++++++++++
 .../Sections/{index.js => list.js}            |  0
 src/client/Containers/Calculation/index.jsx   | 36 +++----------------
 src/client/Elements/Button.jsx                | 16 +++++++++
 src/client/Elements/Title.jsx                 | 11 ++++++
 7 files changed, 87 insertions(+), 33 deletions(-)
 create mode 100644 src/client/Containers/Calculation/Results/index.jsx
 create mode 100644 src/client/Containers/Calculation/Sections/index.jsx
 rename src/client/Containers/Calculation/Sections/{index.js => list.js} (100%)
 create mode 100644 src/client/Elements/Button.jsx
 create mode 100644 src/client/Elements/Title.jsx

diff --git a/src/client/Components/Result.tsx b/src/client/Components/Result.tsx
index 98d8ab0..f56f83e 100644
--- a/src/client/Components/Result.tsx
+++ b/src/client/Components/Result.tsx
@@ -1,3 +1,6 @@
-import React from "react";
+import React from 'react';
+import { Result, Button } from 'antd';
 
-export const NotFound = () => <div>404 Not Found</div>;
+export const NotFound = () => (
+  <Result status="404" title="404" subTitle="Ой! Тут ничего нет." />
+);
diff --git a/src/client/Containers/Calculation/Results/index.jsx b/src/client/Containers/Calculation/Results/index.jsx
new file mode 100644
index 0000000..3600659
--- /dev/null
+++ b/src/client/Containers/Calculation/Results/index.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Divider } from 'antd';
+import Background from 'client/Elements/Background';
+import Title from 'client/Elements/Title';
+import { Flex } from 'client/UIKit/grid';
+
+const Results = props => (
+  <Background flex="0.5 0 25em">
+    <Flex justifyContent="center">
+      <Title text="Результаты" />
+    </Flex>
+  </Background>
+);
+
+export default Results;
diff --git a/src/client/Containers/Calculation/Sections/index.jsx b/src/client/Containers/Calculation/Sections/index.jsx
new file mode 100644
index 0000000..90fc3fd
--- /dev/null
+++ b/src/client/Containers/Calculation/Sections/index.jsx
@@ -0,0 +1,35 @@
+import { Tabs } from 'antd';
+import Background from 'client/Elements/Background';
+import { Box, Flex } from 'client/UIKit/grid';
+import React from 'react';
+import styled from 'styled-components';
+import SectionsList from './list';
+
+const { TabPane } = Tabs;
+
+const InputWrapper = styled(Box)`
+  width: 200px;
+  margin-horizontal: 10px;
+`;
+
+const Sections = props => (
+  <Background flex="3 0 25em">
+    <Tabs type="line">
+      {SectionsList.map(({ title, elements }, i) => (
+        <TabPane tab={title} key={i}>
+          <Flex>
+            {elements.map(({ Component, props }, ie) => {
+              return (
+                <InputWrapper key={ie}>
+                  <Component {...props} />
+                </InputWrapper>
+              );
+            })}
+          </Flex>
+        </TabPane>
+      ))}
+    </Tabs>
+  </Background>
+);
+
+export default Sections;
diff --git a/src/client/Containers/Calculation/Sections/index.js b/src/client/Containers/Calculation/Sections/list.js
similarity index 100%
rename from src/client/Containers/Calculation/Sections/index.js
rename to src/client/Containers/Calculation/Sections/list.js
diff --git a/src/client/Containers/Calculation/index.jsx b/src/client/Containers/Calculation/index.jsx
index 80a0bca..c6dddf2 100644
--- a/src/client/Containers/Calculation/index.jsx
+++ b/src/client/Containers/Calculation/index.jsx
@@ -1,41 +1,15 @@
-import { Tabs } from 'antd';
-import Background from 'client/Elements/Background';
-import { Box, Flex } from 'client/UIKit/grid';
+import { Flex } from 'client/UIKit/grid';
 import React from 'react';
-import Sections from './Sections';
-import styled from 'styled-components';
-
-const { TabPane } = Tabs;
-
-const InputWrapper = styled(Box)`
-  width: 200px;
-  margin-horizontal: 10px;
-`;
+import Results from './Results';
+import SectionsList from './Sections';
 
 const Calculation = () => {
   return (
     <Flex flexWrap="wrap">
-      <Background flex="3 0 25em">
-        <Tabs type="line">
-          {Sections.map(({ title, elements }, i) => (
-            <TabPane tab={title} key={i}>
-              <Flex>
-                {elements.map(({ Component, props }, ie) => {
-                  return (
-                    <InputWrapper key={ie}>
-                      <Component {...props} />
-                    </InputWrapper>
-                  );
-                })}
-              </Flex>
-            </TabPane>
-          ))}
-        </Tabs>
-      </Background>
-      <Background flex="0.5 0 25em">Results</Background>
+      <SectionsList />
+      <Results />
     </Flex>
   );
 };
 
-// export default observer(Calculation);
 export default Calculation;
diff --git a/src/client/Elements/Button.jsx b/src/client/Elements/Button.jsx
new file mode 100644
index 0000000..aedea2a
--- /dev/null
+++ b/src/client/Elements/Button.jsx
@@ -0,0 +1,16 @@
+import { Button as AntButton } from 'antd';
+import { useStatus } from 'client/hooks/useStatus';
+import { Status } from 'core/types/elements';
+import React from 'react';
+
+const Button = ({ name, text, onClick }) => {
+  const { status } = useStatus(name);
+
+  return (
+    <AntButton disabled={status === Status.Disabled} onClick={onClick}>
+      {text}
+    </AntButton>
+  );
+};
+
+export default Button;
diff --git a/src/client/Elements/Title.jsx b/src/client/Elements/Title.jsx
new file mode 100644
index 0000000..b9f2216
--- /dev/null
+++ b/src/client/Elements/Title.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const TitleText = styled.div`
+  font-size: 1.3rem;
+  font-weight: 500;
+`;
+
+const Title = ({ text }) => <TitleText>{text}</TitleText>;
+
+export default Title;