Merge pull request #10 from Mojtaba-NA/refactor-storage-ts

refactor: storage types

Author: sajjadmrx

biome.json

@@ -1,46 +1,46 @@
 {
-	"$schema": "https://biomejs.dev/schemas/1.9.2/schema.json",
-	"vcs": {
-		"enabled": false,
-		"clientKind": "git",
-		"useIgnoreFile": false
-	},
-	"files": {
-		"ignoreUnknown": false,
-		"ignore": []
-	},
-	"formatter": {
-		"enabled": true,
-		"indentStyle": "tab",
-		"lineWidth": 90
-	},
-	"organizeImports": {
-		"enabled": true
-	},
-	"linter": {
-		"enabled": true,
-		"rules": {
-			"recommended": true,
-			"a11y": {
-				"useAltText": "off",
-				"useButtonType": "off",
-				"useKeyWithClickEvents": "off",
-				"noSvgWithoutTitle": "off",
-				"noLabelWithoutControl": "off"
-			},
-			"style": {
-				"useSelfClosingElements": "off"
-			},
-			"suspicious": {
-				"noExplicitAny": "off",
-				"noArrayIndexKey": "off"
-			}
-		}
-	},
-	"javascript": {
-		"formatter": {
-			"quoteStyle": "single",
-			"semicolons": "asNeeded"
-		}
-	}
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": false
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "ignore": []
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "tab",
+    "lineWidth": 90
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "a11y": {
+        "useAltText": "off",
+        "useButtonType": "off",
+        "useKeyWithClickEvents": "off",
+        "noSvgWithoutTitle": "off",
+        "noLabelWithoutControl": "off"
+      },
+      "style": {
+        "useSelfClosingElements": "off"
+      },
+      "suspicious": {
+        "noExplicitAny": "off",
+        "noArrayIndexKey": "off"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "semicolons": "asNeeded"
+    }
+  }
 }

package.json

@@ -1,56 +1,57 @@
 {
-	"name": "widgetify-webapp",
-	"private": true,
-	"version": "1.0.0",
-	"type": "module",
-	"scripts": {
-		"dev": "vite",
-		"build": "tsc -b && vite build",
-		"tsbuild": "tsc -b && vite build",
-		"lint": "eslint .",
-		"preview": "vite preview",
-		"test": "npx tailwindcss init"
-	},
-	"dependencies": {
-		"@hello-pangea/dnd": "^18.0.1",
-		"@tanstack/react-query": "5.66.0",
-		"add": "2.0.6",
-		"axios": "1.7.9",
-		"chart.js": "^4.4.7",
-		"jalali-moment": "3.3.11",
-		"moment": "^2.30.1",
-		"moment-hijri": "^3.0.0",
-		"motion": "12.3.1",
-		"ms": "2.1.3",
-		"react": "18.3.1",
-		"react-chartjs-2": "^5.3.0",
-		"react-daisyui": "5.0.5",
-		"react-dom": "18.3.1",
-		"react-hot-toast": "2.5.1",
-		"react-icons": "5.4.0",
-		"react-router-dom": "7.1.5",
-		"react-select": "^5.10.0",
-		"vite-plugin-pwa": "0.21.1"
-	},
-	"devDependencies": {
-		"@biomejs/biome": "1.9.4",
-		"@eslint/js": "9.17.0",
-		"@tailwindcss/vite": "4.0.0",
-		"@types/moment-hijri": "^2.1.4",
-		"@types/ms": "2.1.0",
-		"@types/node": "22.13.1",
-		"@types/react": "18.2.19",
-		"@types/react-dom": "18.3.5",
-		"@vitejs/plugin-react": "4.3.4",
-		"autoprefixer": "10.4.20",
-		"eslint": "9.17.0",
-		"eslint-plugin-react-hooks": "5.0.0",
-		"eslint-plugin-react-refresh": "0.4.16",
-		"globals": "15.14.0",
-		"postcss": "8.5.1",
-		"tailwindcss": "4.0.0",
-		"typescript": "~5.6.3",
-		"typescript-eslint": "8.18.2",
-		"vite": "6.0.5"
-	}
+  "name": "widgetify-webapp",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "tsbuild": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "test": "npx tailwindcss init",
+    "tcw": "tsc --project tsconfig.app.json -w"
+  },
+  "dependencies": {
+    "@hello-pangea/dnd": "^18.0.1",
+    "@tanstack/react-query": "5.66.0",
+    "add": "2.0.6",
+    "axios": "1.7.9",
+    "chart.js": "^4.4.7",
+    "jalali-moment": "3.3.11",
+    "moment": "^2.30.1",
+    "moment-hijri": "^3.0.0",
+    "motion": "12.3.1",
+    "ms": "2.1.3",
+    "react": "18.3.1",
+    "react-chartjs-2": "^5.3.0",
+    "react-daisyui": "5.0.5",
+    "react-dom": "18.3.1",
+    "react-hot-toast": "2.5.1",
+    "react-icons": "5.4.0",
+    "react-router-dom": "7.1.5",
+    "react-select": "^5.10.0",
+    "vite-plugin-pwa": "0.21.1"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.9.4",
+    "@eslint/js": "9.17.0",
+    "@tailwindcss/vite": "4.0.0",
+    "@types/moment-hijri": "^2.1.4",
+    "@types/ms": "2.1.0",
+    "@types/node": "22.13.1",
+    "@types/react": "18.2.19",
+    "@types/react-dom": "18.3.5",
+    "@vitejs/plugin-react": "4.3.4",
+    "autoprefixer": "10.4.20",
+    "eslint": "9.17.0",
+    "eslint-plugin-react-hooks": "5.0.0",
+    "eslint-plugin-react-refresh": "0.4.16",
+    "globals": "15.14.0",
+    "postcss": "8.5.1",
+    "tailwindcss": "4.0.0",
+    "typescript": "~5.6.3",
+    "typescript-eslint": "8.18.2",
+    "vite": "6.0.5"
+  }
 }

src/common/constant/store.key.ts

@@ -1,10 +1,15 @@
-export enum StoreKey {
-	CURRENCIES = 'CURRENCIES',
-	hasShownPwaModal = 'hasShownPwaModal',
-	CURRENCY_UPDATED_AT = 'CURRENCY_UPDATED_AT',
-	SELECTED_CITY = 'SELECTED_CITY',
-	CURRENT_WEATHER = 'CURRENT_WEATHER',
-	LAYOUT_ORDER = 'LAYOUT_ORDER',
-	Todos = 'Todos',
+import type { SelectedCity } from '../../context/setting.context'
+import type { Todo } from '../../layouts/calendar/interface/todo.interface'
+import type { FetchedCurrency } from '../../services/getMethodHooks/getCurrencyByCode.hook'
+import type { FetchedWeather } from '../../services/getMethodHooks/weather/weather.interface'
+
+export interface StorageKV {
+  CURRENCIES: string[]
+  hasShownPwaModal: boolean
+  CURRENCY_UPDATED_AT: string
+  SELECTED_CITY: SelectedCity
+  CURRENT_WEATHER: FetchedWeather
+  LAYOUT_ORDER: string[]
+  Todos: Todo[]
+  [key: `currency:${string}`]: FetchedCurrency
 }
-export type StoreKeyType = StoreKey | `currency:${string}`

src/common/storage.ts

@@ -1,15 +1,15 @@
-import type { StoreKeyType } from './constant/store.key'
+import type { StorageKV } from './constant/store.key'
 
-export function setToStorage<T>(key: StoreKeyType, value: T) {
-	localStorage.setItem(key, JSON.stringify(value))
+export function setToStorage<K extends keyof StorageKV>(key: K, value: StorageKV[K]) {
+  localStorage.setItem(key, JSON.stringify(value))
 }
 
-export function getFromStorage<T>(key: StoreKeyType): T | null {
-	const value = localStorage.getItem(key)
-	if (!value) return null
-	try {
-		return JSON.parse(value) as T
-	} catch {
-		return value as T
-	}
+export function getFromStorage<K extends keyof StorageKV>(key: K): StorageKV[K] | null {
+  const value = localStorage.getItem(key)
+  if (!value) return null
+  try {
+    return JSON.parse(value)
+  } catch {
+    return null
+  }
 }

src/context/todo.context.tsx

@@ -1,61 +1,56 @@
 import { type ReactNode, createContext, useContext, useEffect, useState } from 'react'
-import { StoreKey } from '../common/constant/store.key'
 import { getFromStorage, setToStorage } from '../common/storage'
 import type { Todo } from '../layouts/calendar/interface/todo.interface'
 
 interface TodoContextType {
-	todos: Todo[]
-	addTodo: (text: string, date: string) => void
-	removeTodo: (id: string) => void
-	toggleTodo: (id: string) => void
-	setTodos: (todos: Todo[]) => void
+  todos: Todo[]
+  addTodo: (text: string, date: string) => void
+  removeTodo: (id: string) => void
+  toggleTodo: (id: string) => void
+  setTodos: (todos: Todo[]) => void
 }
 
 const TodoContext = createContext<TodoContextType | undefined>(undefined)
 export function TodoProvider({ children }: { children: ReactNode }) {
-	const [todos, setTodos] = useState<Todo[]>([])
-
-	useEffect(() => {
-		const todosFromStorage = getFromStorage(StoreKey.Todos)
-		if (todosFromStorage) {
-			setTodos(todosFromStorage as Todo[])
-		}
-	}, [])
-
-	const addTodo = (text: string, date: string) => {
-		const todoList = [
-			...todos,
-			{ id: Math.random().toString(36).slice(2), text, completed: false, date },
-		]
-
-		setTodos(todoList)
-
-		setToStorage(StoreKey.Todos, todoList)
-	}
-
-	const removeTodo = (id: string) => {
-		setTodos(todos.filter((todo) => todo.id !== id))
-	}
-
-	const toggleTodo = (id: string) => {
-		setTodos(
-			todos.map((todo) =>
-				todo.id === id ? { ...todo, completed: !todo.completed } : todo,
-			),
-		)
-	}
-
-	return (
-		<TodoContext.Provider value={{ todos, addTodo, removeTodo, toggleTodo, setTodos }}>
-			{children}
-		</TodoContext.Provider>
-	)
+  const [todos, setTodos] = useState<Todo[]>([])
+
+  useEffect(() => {
+    const todosFromStorage = getFromStorage('Todos')
+    if (todosFromStorage) {
+      setTodos(todosFromStorage)
+    }
+  }, [])
+
+  const addTodo = (text: string, date: string) => {
+    const todoList = [
+      ...todos,
+      { id: Math.random().toString(36).slice(2), text, completed: false, date }
+    ]
+
+    setTodos(todoList)
+
+    setToStorage('Todos', todoList)
+  }
+
+  const removeTodo = (id: string) => {
+    setTodos(todos.filter(todo => todo.id !== id))
+  }
+
+  const toggleTodo = (id: string) => {
+    setTodos(todos.map(todo => (todo.id === id ? { ...todo, completed: !todo.completed } : todo)))
+  }
+
+  return (
+    <TodoContext.Provider value={{ todos, addTodo, removeTodo, toggleTodo, setTodos }}>
+      {children}
+    </TodoContext.Provider>
+  )
 }
 
 export function useTodo() {
-	const context = useContext(TodoContext)
-	if (context === undefined) {
-		throw new Error('useTodo must be used within a TodoProvider')
-	}
-	return context
+  const context = useContext(TodoContext)
+  if (context === undefined) {
+    throw new Error('useTodo must be used within a TodoProvider')
+  }
+  return context
 }