feat(ui): somethink improvments

duck-finance · Apr 12, 2020 · 068660b · 068660b
1 parent 7172875
commit 068660b
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 52 deletions.
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Справедливая зарплата</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.tsx b/src/App.tsx
@@ -3,6 +3,7 @@ import { Form, FormState } from "./components/Form/Form";
 import { Chart } from "./components/Chart/Chart";
 import { Typography } from "@material-ui/core";
 import styled from "styled-components";
+import { Background } from "./components/Background/Background";
 
 const AlignContainer = styled.div`
   margin-top: 40px;
@@ -15,6 +16,7 @@ function App() {
 
   return (
     <Fragment>
+      {/* <Background /> */}
       <Typography variant="h1" align="center">
         Справедливая зарплата
       </Typography>

diff --git a/src/components/Background/Background.tsx b/src/components/Background/Background.tsx
@@ -0,0 +1,51 @@
+import styled from "styled-components";
+import React, { Fragment } from "react";
+import BackgroundUrl from "./background.jpg";
+
+const BackgroundContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: no-repeat url("${BackgroundUrl}");
+  background-size: contain;
+`;
+
+const BackgroundContainerShadow = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  background-color: black;
+  opacity: 0.9;
+`;
+
+const CreditsContainer = styled.div`
+  position: absolute;
+  bottom: 8px;
+  left: 8px;
+`;
+
+export function Background() {
+  return (
+    <Fragment>
+      <BackgroundContainer>
+        <CreditsContainer>
+          Photo by{" "}
+          <a
+            href="https://unsplash.com/photos/HJckKnwCXxQ"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Gabrielle Henderson
+          </a>{" "}
+          on Unsplash
+        </CreditsContainer>
+      </BackgroundContainer>
+      <BackgroundContainerShadow />
+    </Fragment>
+  );
+}
diff --git a/src/components/Background/background.jpg b/src/components/Background/background.jpg
diff --git a/src/components/Chart/Chart.tsx b/src/components/Chart/Chart.tsx
@@ -1,8 +1,6 @@
 import React, { Fragment } from "react";
 import ApexChart from "react-apexcharts";
 import { FormState } from "../Form/Form";
-import { EmptyState } from "./EmptyState";
-import { UnrealState } from "./UnrealState";
 import { Header } from "./Header";
 import { useChart } from "./useChartData";
 
@@ -18,12 +16,8 @@ export function Chart({ formState }: Props) {
     resultSalary,
   } = useChart(formState);
 
-  if (isEmptySalary) {
-    return <EmptyState />;
-  }
-
-  if (isUnrealSalary) {
-    return <UnrealState />;
+  if (isEmptySalary || isUnrealSalary) {
+    return null;
   }
 
   return (

diff --git a/src/components/Chart/EmptyState.tsx b/src/components/Chart/EmptyState.tsx
diff --git a/src/components/Chart/Header.tsx b/src/components/Chart/Header.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import { Typography } from "@material-ui/core";
 
 const Container = styled.div`
   display: flex;
@@ -29,10 +30,10 @@ function units(num: number, cases: any) {
 export function Header({ salary }: any) {
   return (
     <Container>
-      <h2>
+      <Typography variant="h3">
         Ваша реальная зарплата на сегодня {salary}{" "}
         {units(salary, { nom: "рубль", gen: "рубля", plu: "рублей" })}
-      </h2>
+      </Typography>
     </Container>
   );
 }
diff --git a/src/components/Chart/UnrealState.tsx b/src/components/Chart/UnrealState.tsx
diff --git a/src/components/Chart/getData.tsx → src/components/Chart/getData.ts b/src/components/Chart/getData.tsx → src/components/Chart/getData.ts
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
@@ -28,6 +28,23 @@ const InputAlign = styled.div`
   margin-bottom: 20px;
 `;
 
+function getError(salary: string): string | null {
+  if (salary === "") {
+    return null;
+  }
+  const salaryNumber = Number(salary);
+
+  if (Number.isNaN(salaryNumber)) {
+    return "Упс, кажется это не число";
+  }
+
+  if (salaryNumber < 1000) {
+    return "Упс, мы не умеем работать с суммами меньше 1000";
+  }
+
+  return null;
+}
+
 export function Form({ formState, onChange }: Props) {
   function handleChangeSalary({
     target: { value },
@@ -39,6 +56,8 @@ export function Form({ formState, onChange }: Props) {
     onChange({ ...formState, date });
   }
 
+  const error = getError(formState.salary);
+
   return (
     <Container>
       <InputContainer>
@@ -52,6 +71,8 @@ export function Form({ formState, onChange }: Props) {
             }}
             onChange={handleChangeSalary}
             value={formState.salary}
+            error={!!error}
+            helperText={error}
             fullWidth
           />
         </InputAlign>