diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts
index e3a6e72..1a74f74 100644
--- a/src/hooks/useLocalStorage.ts
+++ b/src/hooks/useLocalStorage.ts
@@ -1,26 +1,18 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
/**
- * Custom hook for persisting state in local storage.
+ * useLocalStorage is a custom hook that allows you to work with LocalStorage like useState.
+ * It also syncs data between tabs in real-time.
*
- * This hook works similarly to the standard `useState` hook but also stores the state in local storage,
- * allowing the state to persist across browser sessions. The state is initialized from local storage
- * if it exists; otherwise, it falls back to the provided initial value.
+ * @param {string} key - A unique identifier for the localStorage entry.
+ * @param {T} initialValue - The initial value for the localStorage entry.
*
- * @template T The type of the value to be stored.
- * @param {string} key The key under which the value is stored in local storage.
- * @param {T} initialValue The initial value to be used if there is no item in local storage with the given key.
- * @returns {[T, (value: T | ((val: T) => T)) => void]} A tuple containing:
- * - `storedValue`: the current value stored in local storage.
- * - `setValue`: a function to set the value, which updates both the local state and local storage.
- *
- * @example
- * const [name, setName] = useLocalStorage("name", "Initial Name");
- * // Use setName to update the name and it will be stored in local storage.
+ * @returns {Array} An array where the first item is the stored value and the second item is a setter function.
*/
const useLocalStorage = (
key: string,
initialValue: T,
): [T, (value: T) => void] => {
+ // Store the initial value in localStorage or return the current value
const [storedValue, setStoredValue] = useState(() => {
try {
const item = window.localStorage.getItem(key);
@@ -31,16 +23,45 @@ const useLocalStorage = (
}
});
+ // Define a setter function for the storedValue
const setValue = (value: T) => {
try {
const valueToStore = value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);
+
+ // Store the new value in localStorage
window.localStorage.setItem(key, JSON.stringify(valueToStore));
+
+ // Manually trigger a storage event
+ const storageEvent = new StorageEvent("storage", {
+ key: key,
+ oldValue: JSON.stringify(storedValue),
+ newValue: JSON.stringify(valueToStore),
+ storageArea: localStorage,
+ });
+ window.dispatchEvent(storageEvent);
} catch (error) {
console.log(error);
}
};
+ // Add an event listener for the storage event
+ useEffect(() => {
+ const handleStorageChange = (e: StorageEvent) => {
+ if (e.key === key && e.newValue !== null) {
+ setStoredValue(JSON.parse(e.newValue));
+ }
+ };
+
+ window.addEventListener("storage", handleStorageChange);
+
+ // Cleanup function
+ return () => {
+ window.removeEventListener("storage", handleStorageChange);
+ };
+ }, [key]);
+
+ // Return the stored value and the setter function
return [storedValue, setValue];
};
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
deleted file mode 100644
index 7b10178..0000000
--- a/src/pages/HomePage.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Outlet } from "react-router-dom";
-import HomePageTemplate from "../components/templates/HomePageTemplate";
-
-const HomePage = () => {
- const [counter, setCounter] = useState(0);
- const { t } = useTranslation();
-
- return (
- <>
- {
- if (counter >= 10) {
- setCounter(0);
- return;
- } else setCounter(counter + 1);
- }}
- value={counter}
- />
-
-
- );
-};
-
-export default HomePage;
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
index 0b35ead..87e2903 100644
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -7,11 +7,11 @@ const LoginPage = () => {
const navigate = useNavigate();
const handleLogin = () => {
setIsLoggedIn(true);
- navigate("/");
};
const onClickGetStarted = () => {
navigate("/more");
};
+
return (
{
+ return (
+