add: zustand fundamentals

This commit is contained in:
Mahyar Khanbolooki
2025-06-30 22:53:02 +03:30
parent 09d1093253
commit 5b58b1e6ba
6 changed files with 100 additions and 4 deletions
+33 -3
View File
@@ -12,7 +12,8 @@
"framer-motion": "^12.20.1",
"next": "15.3.4",
"react": "^19.0.0",
"react-dom": "^19.0.0"
"react-dom": "^19.0.0",
"zustand": "^5.0.6"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
@@ -1310,7 +1311,7 @@
"version": "19.1.8",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
"integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
"dev": true,
"devOptional": true,
"license": "MIT",
"dependencies": {
"csstype": "^3.0.2"
@@ -2394,7 +2395,7 @@
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
"dev": true,
"devOptional": true,
"license": "MIT"
},
"node_modules/damerau-levenshtein": {
@@ -6208,6 +6209,35 @@
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/zustand": {
"version": "5.0.6",
"resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.6.tgz",
"integrity": "sha512-ihAqNeUVhe0MAD+X8M5UzqyZ9k3FFZLBTtqo6JLPwV53cbRB/mJwBI0PxcIgqhBBHlEs8G45OTDTMq3gNcLq3A==",
"license": "MIT",
"engines": {
"node": ">=12.20.0"
},
"peerDependencies": {
"@types/react": ">=18.0.0",
"immer": ">=9.0.6",
"react": ">=18.0.0",
"use-sync-external-store": ">=1.2.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"immer": {
"optional": true
},
"react": {
"optional": true
},
"use-sync-external-store": {
"optional": true
}
}
}
}
}
+2 -1
View File
@@ -13,7 +13,8 @@
"framer-motion": "^12.20.1",
"next": "15.3.4",
"react": "^19.0.0",
"react-dom": "^19.0.0"
"react-dom": "^19.0.0",
"zustand": "^5.0.6"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
+2
View File
@@ -1,9 +1,11 @@
import Image from "next/image";
import Link from "next/link";
export default function Home() {
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
<Link href={"/auth"}>Login</Link>
<Image
className="dark:invert"
src="/next.svg"
+24
View File
@@ -0,0 +1,24 @@
// features/auth/actions/loginUser.ts
import { useAuthStore } from '@/zustand/userStore'
// Simulated API login
export async function loginUser(number: string, password: string) {
// Simulate API call - replace with real one
const response = await new Promise<{ user: any }>((resolve) =>
setTimeout(() => {
resolve({
user: {
id: '123',
name: 'John Doe',
number,
token: 'mock-jwt-token',
},
})
}, 1000)
)
const { login } = useAuthStore.getState()
login(response.user)
return true;
}
+39
View File
@@ -0,0 +1,39 @@
// zustand/userStore.ts
import { create } from 'zustand'
import { persist } from 'zustand/middleware'
type User = {
id: string
name: string
number: string
token: string
}
type AuthStore = {
user: User | null
isAuthenticated: boolean
login: (userData: User) => void
logout: () => void
}
export const useAuthStore = create<AuthStore>()(
persist(
(set) => ({
user: null,
isAuthenticated: false,
login: (userData) =>
set(() => ({
user: userData,
isAuthenticated: true,
})),
logout: () =>
set(() => ({
user: null,
isAuthenticated: false,
})),
}),
{
name: 'auth-storage', // Key in localStorage
}
)
)