From 64dfabddb4b85d30666fd045d5c58a6dde316c2d Mon Sep 17 00:00:00 2001
From: Marta <veeenling@gmail.com>
Date: Wed, 3 Jul 2024 19:55:17 +0300
Subject: [PATCH] finally hook usePrevios

---
 src/App.tsx                     | 46 +++++++++++++++++----------------
 src/hooks/UsePrevios.module.css | 43 ++++++++++++++++++++++++++++++
 src/hooks/UsePrevios.tsx        | 12 +++++++++
 3 files changed, 79 insertions(+), 22 deletions(-)
 create mode 100644 src/hooks/UsePrevios.module.css
 create mode 100644 src/hooks/UsePrevios.tsx

diff --git a/src/App.tsx b/src/App.tsx
index a53698a..cd95dbc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,26 +1,28 @@
-import React from 'react';
-import logo from './logo.svg';
+import React, { useState } from 'react';
+import {usePrevious} from './hooks/UsePrevios'
 import './App.css';
+import styles from './hooks/UsePrevios.module.css'
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+const Counter = () => {
+    const [value, setValue] = useState<number>(0);
+    const previousValue = usePrevious(value);
+
+    return (
+        <div className={styles.box}>
+            <div className={styles.flex}>
+                <h2 className={styles.current_value}>Current value: {value}</h2>
+                <h2 className={styles.previous_value}>Previous value: {previousValue}</h2>
+            </div>
+            <button
+                className={styles.increment}
+                onClick={() => {
+                    setValue((prevState) => prevState + 1);
+                }}
+            >
+                Increment
+            </button>
+        </div>
+    );
 }
 
-export default App;
+export default Counter;
diff --git a/src/hooks/UsePrevios.module.css b/src/hooks/UsePrevios.module.css
new file mode 100644
index 0000000..5195f2b
--- /dev/null
+++ b/src/hooks/UsePrevios.module.css
@@ -0,0 +1,43 @@
+.increment{
+    width: 140px;
+    height: 60px;
+    border-radius: 10px;
+    border: none;
+    background-color: darksalmon;
+    font-size: 20px;
+    font-weight: 600;
+    color: #25140f;
+    transition: 0.5s;
+
+}
+.increment:hover{
+    background-color: #985e4b;
+    color: #b6b1b1;
+}
+.current_value{
+
+}
+.previous_value{
+
+}
+.box{
+    width: 45vw;
+    height: 45vh;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    flex-direction: column;
+    background-color: bisque;
+    margin-top: 180px;
+    margin-left: 390px;
+    border-radius: 17px;
+}
+.flex{
+    width: 48vw;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    margin-top: 15px;
+    font-size: 21px;
+    color: #3a2119;
+}
\ No newline at end of file
diff --git a/src/hooks/UsePrevios.tsx b/src/hooks/UsePrevios.tsx
new file mode 100644
index 0000000..6876942
--- /dev/null
+++ b/src/hooks/UsePrevios.tsx
@@ -0,0 +1,12 @@
+import { useEffect, useRef } from 'react';
+
+export const usePrevious = (value: number) => {
+    const ref = useRef<number>();
+
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+
+    return ref.current;
+};
+