Merge pull request #47 from BacPacNet/zustand-implementation

Zustand implementation and useCookie hook

package.json

@@ -61,7 +61,8 @@
     "storybook-addon-apollo-client": "^5.0.0",
     "swiper": "^11.0.7",
     "tailwindcss": "3.3.3",
-    "ts-node": "^10.9.2"
+    "ts-node": "^10.9.2",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",

src/app/page.tsx

@@ -12,10 +12,13 @@ import { motion } from 'framer-motion'
 import StarIcon from '../assets/stars.svg'
 import Image from 'next/image'
 import DiscordIcon from '@assets/discord.svg'
+import useCookie from '@/hooks/useCookie'
 export default function Home() {
   const [searchOpen, setSearchOpen] = useState(false)
 
   const LANDING_PAGE_TEXT = ' Search universities worldwide and become part of their online communities'.split(' ')
+  const [cookieValue] = useCookie('uni_user_token')
+  console.log(cookieValue)
 
   return (
     <div className="home">

src/hooks/useCookie.ts

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react'
+
+const useCookie = (cookieName: string): [string, (value: string, expirationDate: string) => void, () => void] => {
+  const [cookieValue, setCookieValue] = useState<string>('')
+
+  useEffect(() => {
+    const cookie = document.cookie.split('; ').find((row) => row.startsWith(`${cookieName}=`))
+
+    setCookieValue(cookie ? cookie.split('=')[1] : '')
+  }, [cookieName])
+
+  const setCookie = (value: string, expirationDate: string): void => {
+    document.cookie = `${cookieName}=${value}; expires=${new Date(expirationDate).toUTCString()}; path=/`
+  }
+
+  const deleteCookie = (): void => {
+    document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`
+  }
+
+  return [cookieValue, setCookie, deleteCookie]
+}
+
+export default useCookie

src/models/auth.ts

@@ -8,6 +8,15 @@ export interface UserResponseType {
   tokens: Tokens
 }
 
+interface verifiedInterface {
+  communityId: string
+  communityName: string
+}
+interface unverifiedInterface {
+  communityId: string
+  communityName: string
+}
+
 export interface User {
   firstName: string
   lastName: string
@@ -17,6 +26,8 @@ export interface User {
   role: string
   isEmailVerified: boolean
   id: string
+  userVerifiedCommunities: verifiedInterface[]
+  userUnVerifiedCommunities: unverifiedInterface[]
 }
 
 export interface Tokens {

src/services/auth.ts

@@ -1,16 +1,30 @@
 import { LoginForm, UserResponseType } from '@/models/auth'
 import { useMutation } from '@tanstack/react-query'
 import { client } from './api-Client'
+import { useUniStore } from '@/store/store'
+import useCookie from '@/hooks/useCookie'
 
 const login = async (data: LoginForm): Promise<UserResponseType> => {
   const result = await client<UserResponseType, LoginForm>('auth/login', { data })
   return result
 }
 
-export const useHandleLogin = () =>
-  useMutation({
+export const useHandleLogin = () => {
+  const setUserData = useUniStore((state) => state.setUserData)
+  // const setToken = useUniStore((state) => state.setToken)
+  const [_, setCookieValue] = useCookie('uni_user_token')
+  const [__, setRefreshCookieValue] = useCookie('uni_user_refresh_token')
+
+  return useMutation({
     mutationFn: (data: LoginForm) => login(data),
     onSuccess: (response) => {
       console.log(response, 'response')
+      console.log(_, __)
+
+      setUserData(response.user)
+      // setToken(response.tokens)
+      setCookieValue(response.tokens.access.token, response.tokens.access.expires)
+      setRefreshCookieValue(response.tokens.refresh.token, response.tokens.refresh.expires)
     },
   })
+}

src/store/store.ts

@@ -0,0 +1,19 @@
+import { create } from 'zustand'
+import { devtools, persist } from 'zustand/middleware'
+import { createUserSlice } from './userSlice/userSlice'
+import { storeType } from './storeType'
+
+export const useUniStore = create<storeType>()(
+  devtools(
+    persist(
+      (...a) => ({
+        ...createUserSlice(...a),
+      }),
+      {
+        name: 'UniStore',
+        // partialize: (state) => ({ products: state.products,userName:state.userName }),
+        // skipHydration: true
+      }
+    )
+  )
+)

src/store/storeType.ts

@@ -0,0 +1,3 @@
+import { userSlice } from './userSlice/userSlice'
+
+export type storeType = userSlice

src/store/userSlice/userSlice.ts

@@ -0,0 +1,35 @@
+import { StateCreator } from 'zustand'
+import { userType } from './userType'
+
+type userState = {
+  userData: userType
+}
+
+type userAction = {
+  setUserData: (userData: userType) => void
+  resetUserData: () => void
+}
+
+const initialState: userState = {
+  userData: {
+    firstName: '',
+    lastName: '',
+    email: '',
+    // password: '',
+    gender: '',
+    dob: '',
+    role: '',
+    isEmailVerified: false,
+    // createdAt: '',
+    userVerifiedCommunities: [],
+    userUnVerifiedCommunities: [],
+  },
+}
+
+export type userSlice = userState & userAction
+
+export const createUserSlice: StateCreator<userSlice> = (set) => ({
+  userData: initialState.userData,
+  setUserData: (userData: userType) => set({ userData }),
+  resetUserData: () => set(initialState),
+})

src/store/userSlice/userType.ts

@@ -0,0 +1,22 @@
+interface verifiedInterface {
+  communityId: string
+  communityName: string
+}
+interface unverifiedInterface {
+  communityId: string
+  communityName: string
+}
+
+export interface userType {
+  firstName: string
+  lastName: string
+  email: string
+  // password: string
+  gender: string
+  dob: string
+  role: string
+  isEmailVerified: boolean
+  // createdAt: Date | string
+  userVerifiedCommunities: verifiedInterface[]
+  userUnVerifiedCommunities: unverifiedInterface[]
+}

tsconfig.json

@@ -38,7 +38,7 @@
     "jest.config.ts",
     "jest.setup.js",
     "src/app/components/Slider/Slider.js"
-    ],
+, "src/store/userSlice"    ],
   "exclude": [
     "node_modules"
   ]