feat: add user-history page

app/(main)/(profile-layout)/profile/user-history/page.jsx

@@ -0,0 +1,55 @@
+'use client'
+
+import Link from 'next/link'
+
+import { useAppSelector } from 'hooks'
+
+import { truncate } from 'utils'
+
+import { EmptyCart, PageContainer, ResponsiveImage } from 'components'
+
+const UserHistory = () => {
+  //? Store
+  const { lastSeen } = useAppSelector(state => state.user)
+
+  //? selector
+  return (
+    <main>
+      <PageContainer title="最近访问">
+        {lastSeen.length > 0 ? (
+          <div className="px-3 space-y-4 md:py-4 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-2 lg:grid-cols-3 md:gap-y-3">
+            {lastSeen.map(item => (
+              <article
+                className="border-b md:hover:shadow-3xl md:h-64 md:border-0 "
+                key={item.productID}
+              >
+                <Link
+                  href={`/products/${item.productID}`}
+                  className="flex items-center gap-4 py-4 md:items-start md:flex-col"
+                >
+                  <ResponsiveImage
+                    dimensions="w-36 h-36"
+                    className="md:mx-auto"
+                    src={item.image.url}
+                    alt={item.title}
+                  />
+
+                  <h5 className="flex-1 px-3 text-right text-gray-800 leadiri-6 md:h-32">
+                    {truncate(item.title, 80)}
+                  </h5>
+                </Link>
+              </article>
+            ))}
+          </div>
+        ) : (
+          <section className="py-20">
+            <EmptyCart className="mx-auto h-52 w-52" />
+            <p className="text-center">您的最近访问列表为空</p>
+          </section>
+        )}
+      </PageContainer>
+    </main>
+  )
+}
+
+export default UserHistory

components/common/BoxLink.js

@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import { useRouter } from 'next/navigation'
+import { usePathname } from 'next/navigation'
 
 import { Icons } from 'components'
 
@@ -8,13 +8,13 @@ export default function BoxLink(props) {
   const { children, path, name } = props
 
   //? Assets
-  const router = useRouter()
+  const asPath = usePathname()
 
   //? Render(s)
   return (
     <div
       className={`transition-colors hover:bg-gray-200 px-3 ${
-        router.pathname === path ? 'border-r-4 border-red-600' : 'border-r-4 border-white'
+        asPath === path ? 'border-r-4 border-red-600' : 'border-r-4 border-white'
       }`}
     >
       <Link

components/product/InitialStore.jsx

@@ -3,10 +3,13 @@
 import { useAppDispatch } from '@/hooks'
 
 import { setTempColor, setTempSize, addToLastSeen } from '@/store'
+import { useEffect } from 'react'
 
 const InitialStore = props => {
   const { product } = props
+
   const dispatch = useAppDispatch()
+
   if (product.colors.length > 0) {
     dispatch(setTempColor(product?.colors[0]))
     dispatch(setTempSize(null))
@@ -17,6 +20,15 @@ const InitialStore = props => {
     dispatch(setTempColor(null))
     dispatch(setTempSize(null))
   }
+  useEffect(() => {
+    dispatch(
+      addToLastSeen({
+        productID: product._id,
+        image: product.images[0],
+        title: product.title,
+      })
+    )
+  }, [product._id])
   return null
 }
 

store/slices/user.slice.js

@@ -1,9 +1,18 @@
 import { createSlice } from '@reduxjs/toolkit'
 import Cookies from 'js-cookie'
 
+const getLastSeen = () => {
+  if (typeof window !== 'undefined') {
+    const lastSeenJSON = localStorage.getItem('lastSeen')
+    if (lastSeenJSON) return JSON.parse(lastSeenJSON)
+  }
+
+  return []
+}
+
 const token = Cookies.get('token') || ''
 
-const initialState = { token }
+const initialState = { token, lastSeen: getLastSeen() }
 
 const userSlice = createSlice({
   name: 'user',
@@ -18,9 +27,20 @@ const userSlice = createSlice({
       Cookies.set('token', action.payload, { expires: 10 })
       state.token = action.payload
     },
+    addToLastSeen: (state, action) => {
+      let isItemExist = state.lastSeen.find(item => item.productID === action.payload.productID)
+
+      if (!isItemExist) {
+        if (state.lastSeen.length === 15) {
+          state.lastSeen.splice(14, 1)
+        }
+        state.lastSeen.unshift(action.payload)
+        localStorage.setItem('lastSeen', JSON.stringify(state.lastSeen))
+      }
+    },
   },
 })
 
-export const { userLogout, userLogin } = userSlice.actions
+export const { userLogout, userLogin, addToLastSeen } = userSlice.actions
 
 export default userSlice.reducer