first

Irulik · Nov 21, 2023 · 240be63 · 240be63
1 parent 95e78f2
commit 240be63
Show file tree

Hide file tree

Showing 33 changed files with 638 additions and 108 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,42 +2,17 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      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>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,45 @@
-import logo from './logo.svg';
-import './App.css';
+import React, {useState} from "react";
+import Costs from "./components/Costs/Costs";
+import NewCost from "./components/NewCost/NewCost";
+
+const INITIAL_COSTS = [
+    {
+      id: 'c1',
+      date: new Date(2021, 9, 19),
+      description: "Refrigerator",
+      amount: 999.99
+    },
+    {
+      id: 'c2',
+      date: new Date(2023, 8, 20),
+      description: "MacBook",
+      amount: 1250
+    },
+    {
+      id: 'c3',
+      date: new Date(2023, 4, 10),
+      description: "Keyboard",
+      amount: 50
+    }
+  ];
+
+const App = () => {
+
+  const [costs, setCosts] = useState(INITIAL_COSTS); 
+
+  const addCostHandler = (cost) => {
+    setCosts((prevCosts) => {
+      return [cost, ...prevCosts];
+    });
+  };
 
-function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div>
+      <NewCost onAddCost={addCostHandler} />
+      <Costs costs={costs} />
     </div>
   );
 }
+
 
 export default App;
diff --git a/src/App.test.js b/src/App.test.js
@@ -1,8 +1,8 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
+// import { render, screen } from '@testing-library/react';
+// import App from './App';
 
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
+// test('renders learn react link', () => {
+//   render(<App />);
+//   const linkElement = screen.getByText(/learn react/i);
+//   expect(linkElement).toBeInTheDocument();
+// });
diff --git a/src/components/Costs/CostDate.css b/src/components/Costs/CostDate.css
@@ -0,0 +1,26 @@
+.cost-date{
+    display: flex;
+    flex-direction: column;
+    width: 5.5rem;
+    height: 5.5rem;
+    border: 1px solid rgb(222, 237, 248);
+    background-color: rgb(16, 39, 243);
+    color: white;
+    border-radius: 12px;
+    align-items: center;
+    justify-content: center
+}
+
+.cost-date__month {
+    font-size: 0.75rem;
+    font-weight: bold;
+}
+
+.cost-date__year {
+    font-size: 0.75rem;
+}
+
+.cost-date__day{
+    font-size: 0.75rem;
+    font-weight: bold;
+}
diff --git a/src/components/Costs/CostDate.js b/src/components/Costs/CostDate.js
@@ -0,0 +1,17 @@
+import './CostDate.css';
+
+const CostDate = (props) => {
+  const month = props.date.toLocaleString("ua-UA", { month: "long" });
+  const year = props.date.getFullYear();
+    const day = props.date.toLocaleString("ua-UA", { day: "2-digit" });
+
+  return (
+    <div className='cost-date'>
+      <div className='cost-date__month'>{month}</div>
+      <div className='cost-date__year'>{year}</div>
+      <div className='cost-date__day'>{day}</div>
+    </div>
+  );
+}
+
+export default CostDate;
diff --git a/src/components/Costs/CostItem.css b/src/components/Costs/CostItem.css
@@ -0,0 +1,67 @@
+.cost-item {
+    max-width: 700px;    
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem;
+    margin: 1rem auto;
+    background-color: #ec8383;
+
+}
+
+.cost-item__date {
+    width: 30%;
+    font-size: 1rem;
+    color: rgb(173, 234, 157);
+    text-align: left;
+}
+
+.cost-item__description {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-end;
+    flex-flow: column-reverse;
+    justify-content: flex-start;
+    flex: 1;
+}
+
+.cost-item h2 {
+    color: aqua;
+    font-size: 1rem;
+    flex: 1;
+    margin: 0 1rem;
+    color: white;
+    text-align: center;
+
+}
+
+.cost-item__price {
+    font-size: 1rem;
+    font-weight: bold;
+    color: #c6ddf6;
+    background-color: rgb(16, 39, 243);
+    border: 1px solid rgb(222, 237, 248);
+    padding: 0.5rem;
+    border-radius: 10px;
+
+}
+
+@media (min-width: 580px) {
+    .cost-item__description {
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        flex: 1;
+    }
+
+    .cost-item__description h2 {
+        font-size: 1.25rem;
+    }
+
+    .cost-item__price {
+        font-size: 1.25rem;
+        padding: 0.5rem 1.5rem;
+    }
+}
diff --git a/src/components/Costs/CostItem.js b/src/components/Costs/CostItem.js
@@ -0,0 +1,19 @@
+import "./CostItem.css";
+import CostDate from "./CostDate";
+import Card from "../UI/Card";
+
+const CostItem = (props) => {
+    return (
+         <li>
+        <Card className="cost-item">
+            <CostDate date={props.date} />
+            <div className="cost-item__description">
+                <h2>{props.description}</h2>
+                <div className="cost-item__price">${props.amount}</div>
+            </div>            
+            </Card>
+        </li>
+    );
+}
+
+export default CostItem;
diff --git a/src/components/Costs/CostList.css b/src/components/Costs/CostList.css
@@ -0,0 +1,9 @@
+.cost-list {
+    list-style: none;
+    padding: 0;
+}
+
+.cost-list__fallback {
+    color: #f1552d;
+    text-align: center;
+}
diff --git a/src/components/Costs/CostList.js b/src/components/Costs/CostList.js
@@ -0,0 +1,22 @@
+import CostItem from "./CostItem";
+import './CostList.css';
+
+const CostList = (props) => {
+
+  if (props.costs.length === 0) {
+    return <h2 className="cost-list__fallback">There are no expenses in this year.</h2>
+  }
+
+    return <ul className="cost-list">
+        {props.costs.map((cost) => (
+            <CostItem
+                key={cost.id} //завжди додавати коли відображаю список елементів
+                date={cost.date}
+                description={cost.description}
+                amount={cost.amount}
+            />
+        ))};
+    </ul>
+}
+
+export default CostList;
diff --git a/src/components/Costs/Costs.css b/src/components/Costs/Costs.css
@@ -0,0 +1,9 @@
+.costs {
+    padding: 1rem;
+    background-color: rgb(143, 218, 245);
+    margin: 2rem auto;
+    width: 70rem;
+    max-width: 90%;
+    border-radius: 10px;
+    box-shadow: 0 1px 7px reba(0 0 0 0.25);
+}
diff --git a/src/components/Costs/Costs.js b/src/components/Costs/Costs.js
@@ -0,0 +1,32 @@
+import "./Costs.css";
+import Card from "../UI/Card";
+import CostsFilter from "./CostsFilter";
+import React, { useState } from "react";
+import CostList from "./CostList";
+import CostsDiagram from "./CostsDiagram";
+
+const Costs = (props) => {
+  const [selectedYear, setSelectedYear] = useState("2020");
+
+  const yearChangeHandler = (year) => {
+    setSelectedYear(year);
+  };
+
+  const filteredCosts = props.costs.filter((cost) => {
+    return cost.date.getFullYear().toString() === selectedYear;
+  });
+
+
+
+  return (
+    <div>
+      <Card className="costs">
+        <CostsFilter year={selectedYear} onChangeYear={yearChangeHandler} />
+        <CostsDiagram costs={filteredCosts} />
+        <CostList costs={filteredCosts} />
+      </Card>
+    </div>
+  );
+};
+
+export default Costs;
diff --git a/src/components/Costs/CostsDiagram.js b/src/components/Costs/CostsDiagram.js
@@ -0,0 +1,28 @@
+import Diagram from "../Diagram/Diagram"
+
+const CostsDiagram = (props) => {
+
+    const diagramDataSets = [
+        { label: 'Jan', value: 0 },
+        { label: 'Feb', value: 0 },
+        { label: 'Mar', value: 0 },
+        { label: 'Apr', value: 0 },
+        { label: 'May', value: 0 },
+        { label: 'Jun', value: 0 },
+        { label: 'Jul', value: 0 },
+        { label: 'Aug', value: 0 },
+        { label: 'Sep', value: 0 },
+        { label: 'Oct', value: 0 },
+        { label: 'Nov', value: 0 },
+        { label: 'Dec', value: 0 },
+    ];
+
+    for (const cost of props.costs) {
+        const costMonth = cost.date.getMonth();
+        diagramDataSets[costMonth].value += cost.amount;
+    }
+
+    return <Diagram dataSets={diagramDataSets} />
+}
+
+export default CostsDiagram;