From 2949d101b663ccd5233ddd0ca2f610c87ac2bcb1 Mon Sep 17 00:00:00 2001
From: marcoelissa <marco.elissa@gmail.com>
Date: Wed, 14 Dec 2022 23:23:45 +0700
Subject: [PATCH] add new custom hooks

---
 src/@hooks/useLocalStorage.ts | 42 +++++++++++++++++++++++++++++++++++
 src/@hooks/usePrevious.ts     | 15 +++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 src/@hooks/useLocalStorage.ts
 create mode 100644 src/@hooks/usePrevious.ts

diff --git a/src/@hooks/useLocalStorage.ts b/src/@hooks/useLocalStorage.ts
new file mode 100644
index 000000000..6ae2bf03b
--- /dev/null
+++ b/src/@hooks/useLocalStorage.ts
@@ -0,0 +1,42 @@
+import { useState } from 'react'
+
+function useLocalStorage<T>(key: string, initialValue: T) {
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    if (typeof window === 'undefined') {
+      return initialValue
+    }
+    try {
+      // Get from local storage by key
+      const item = window.localStorage.getItem(key)
+      // Parse stored json or if none return initialValue
+      return item ? JSON.parse(item) : initialValue
+    } catch (error) {
+      // If error also return initialValue
+      console.log(error)
+      return initialValue
+    }
+  })
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue = (value: T | ((val: T) => T)) => {
+    try {
+      // Allow value to be a function so we have same API as useState
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value
+      // Save state
+      setStoredValue(valueToStore)
+      // Save to local storage
+      if (typeof window !== 'undefined') {
+        window.localStorage.setItem(key, JSON.stringify(valueToStore))
+      }
+    } catch (error) {
+      // A more advanced implementation would handle the error case
+      console.log(error)
+    }
+  }
+  return [storedValue, setValue] as const
+}
+
+export default useLocalStorage
diff --git a/src/@hooks/usePrevious.ts b/src/@hooks/usePrevious.ts
new file mode 100644
index 000000000..9b5d89fe5
--- /dev/null
+++ b/src/@hooks/usePrevious.ts
@@ -0,0 +1,15 @@
+import { useEffect, useRef } from 'react'
+
+function usePrevious<T>(value: T): T {
+  // The ref object is a generic container whose current property is mutable ...
+  // ... and can hold any value, similar to an instance property on a class
+  const ref: any = useRef<T>()
+  // Store current value in ref
+  useEffect(() => {
+    ref.current = value
+  }, [value]) // Only re-run if value changes
+  // Return previous value (happens before update in useEffect above)
+  return ref.current
+}
+
+export default usePrevious