eslint 检查结果修改

src/app/(checkout)/checkout/_components/ContinueToPay/PaymentMethodContinueTpPay.tsx

@@ -10,12 +10,6 @@ import PaypalButton from "../PaymentButton/PaypalButton";
 import { overlayLoading } from "@/components/theme/ui/kernel/loading/api";
 import { confirmDialog } from "@/components/theme/ui/kernel/confirm/api";
 
-interface PaymentReplayResult {
-    orderId: string;
-    webOrderId: string;
-    error: boolean;
-    msg: string;
-}
 export function PaymentMethodContinueTpPay({
     paymentMethodsDataPromise,
     defaultPaymentMethod,
@@ -45,7 +39,7 @@ export function PaymentMethodContinueTpPay({
     // 参考 https://github.com/react-hook-form/error-message/blob/master/src/ErrorMessage.tsx
     const paymentMethodError = get(errors, "paymentMethod");
     const selectedPaymentMethod = watch("paymentMethod");
-    console.log('selectedPaymentMethod -------- ',selectedPaymentMethod);
+
     const handleCreateOrder = async () => {
         return await paymentRepay({
             orderId: Number(orderId),
@@ -64,8 +58,6 @@ export function PaymentMethodContinueTpPay({
             paymentSuccessUrl: window.location.origin + '/paymentresult/result'
         });
         
-        console.log("airwallexPlaceOrder res ---- ", res);
-        
         if(!res.error && res.orderId) {
             // 创建订单成功了，跳转支付页面
             window.location.href = res.orderId;

src/app/(checkout)/checkout/_components/ContinueToPay/ProductsModalPendingOrder.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { useState } from "react";
 import Image from "next/image";
 import CommonModal from "@/components/theme/ui/CommonModal";
 import {ProductsInOrderDetails, ProductItemAdditional} from "@/types/customer/type";

src/app/(checkout)/checkout/_components/PromotionsDetails.tsx

@@ -1,13 +1,11 @@
 "use client";
 
-import { useAppSelector,useAppDispatch } from "@/store/hooks";
+
 
 
 // 金额明细
 export default function PromotionsDetails() { 
 
-    const cartDetail = useAppSelector((state) => state.cartDetail);
-    const {cart, loading, error} = cartDetail;
 
     return (
         <div className="">

src/app/(public)/paymentresult/_components/OrderDetailWrapper.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import {use, useEffect} from "react";
+import {use} from "react";
 import Link from "next/link";
 import Image from "next/image";
 import {GraphqlRequestResult} from "@/types/graphqlFetch/type";
 import { OrderDetailsData,ProductItemAdditional } from "@/types/customer/type";
 import { useCurrencyList } from "@utils/hooks/useCurrencyList";
 import Faqs from "./Faqs";
-import { useAppDispatch } from "@/store/hooks";
-import { clearCart, fetchCartDetail } from "@/store/slices/cart-slice";
+
+
 
 function getProductAdditionalInfo(productItem: ProductItemAdditional) { 
     const attributeKeys = Object.keys(productItem.attributes);
@@ -31,19 +31,17 @@ function getProductAdditionalInfo(productItem: ProductItemAdditional) {
 
 export default function OrderDetailWrapper({
     orderDetailPromise,
-    isGuest
 }: {
     orderDetailPromise: Promise<GraphqlRequestResult<OrderDetailsData>>,
-    isGuest: boolean
 }) { 
-    const dispatch = useAppDispatch(); 
+
     const {currencies} = useCurrencyList();
     const promiseRes = use(orderDetailPromise);
     const orderDetailRes = promiseRes.data?.customerOrder ?? null;
     const shippingAddress = orderDetailRes?.addresses?.edges.find(item => item.node.addressType === "order_shipping");
     let orderCreatedAt = 'Can\'t get order date';
     if(orderDetailRes?.createdAt) {
-        let localDate = new Date(orderDetailRes.createdAt);
+        const localDate = new Date(orderDetailRes.createdAt);
         orderCreatedAt = localDate.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
     }
     const productItems = orderDetailRes?.items?.edges.map(item => {
@@ -51,13 +49,6 @@ export default function OrderDetailWrapper({
     }) || [];
     const currency = currencies?.find(item => item.code === orderDetailRes?.orderCurrencyCode) || null;
 
-    // useEffect(() => {
-    //     // const isGuest = getCookie(IS_GUEST);
-    //     if(isGuest) {
-    //         deleteCookie(GUEST_CART_TOKEN);
-    //         deleteCookie(GUEST_CART_ID);
-    //     }
-    // }, []);
 
     return (
         <>

src/app/(public)/paymentresult/result/page.tsx

@@ -47,7 +47,7 @@ export default async function SuccessPage({searchParams}: {
         <div className="w-full">
             {paymentResult === 'success' && 
                 <Suspense fallback={<SuccessPageSkeleton />}>
-                    <OrderDetailWrapper isGuest={isGuest} orderDetailPromise={orderDetailPromise} />
+                    <OrderDetailWrapper orderDetailPromise={orderDetailPromise} />
                 </Suspense>
 
             }

src/app/api/graphql/route.ts

@@ -61,7 +61,7 @@ function authorizationOperations(body: Record<string, any>,req:NextRequest): Fet
     const { operationName, variables } = body;
     const guestToken = getAuthToken(req);
     const query = ALLOWED_OPERATIONS[operationName];
-    let finalVariables = variables;
+    const finalVariables = variables;
 
     /*if (operationName === 'CheckoutPaymentMethods' || operationName === 'CheckoutShippingRates') {
         finalVariables = { ...variables };

src/components/cart/CartModal.tsx

@@ -4,7 +4,6 @@ import { useDisclosure } from "@heroui/use-disclosure";
 import { AnimatePresence, motion } from "framer-motion";
 import { ShoppingCartIcon } from "@heroicons/react/24/outline";
 import { DEFAULT_OPTION } from "@/utils/constants";
-import { useAppSelector } from "@/store/hooks";
 import OpenCart from "./OpenCart";
 import { Price } from "../theme/ui/Price";
 import CloseCart from "../common/icons/cart/CloseCart";

src/components/common/ConfirmModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import {useState} from "react";
+
 import { AnimatePresence , motion } from "framer-motion";
 
 export interface ConfirmModalProps { 

src/components/common/portal/Portal.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+
+import dynamic from 'next/dynamic'
+
+
+const Portal = dynamic(() => import("./PortalBox"), {
+  ssr: false,
+});
+export default Portal;

src/components/Portal.tsx

@@ -27,23 +27,18 @@ export default function Portal({ children }: { children: React.ReactNode }) {
 但是在react v19 中 认为mounted是一个「派生状态（derived state）」，
 完全可以在 render 时计算出来(使用document 来判断)，不需要专门声明一个state在副作用里更改状态（引起二次渲染），所以eslint报错。
 */
-import {useRef, useEffect} from 'react';
+
 import { createPortal } from 'react-dom';
 
-export default function Portal({
+export default function PortalBox({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const mountedRef = useRef(false);
-
-  useEffect(() => {
-    mountedRef.current = true;
-    // 无需任何清理 (cleanup) 函数
-  }, []); // 依赖数组完全为空
+  
 
   // 服务端和客户端首次渲染时都返回 null
-  if (!mountedRef.current) {
+  if (typeof window === "undefined") {
     return null;
   }
 
@@ -54,4 +49,5 @@ export default function Portal({
   }
 
   return createPortal(children, portalRoot);
-}
+}
+

src/components/theme/ui/CommonModal.tsx

@@ -2,7 +2,7 @@
 
 import clsx from "clsx";
 import { useState, useLayoutEffect, useRef } from "react";
-import Portal from "@/components/Portal";
+import Portal from "@/components/common/portal/Portal";
 
 /**
  * 为了弹窗里的表单校验开发整个组件：
@@ -51,11 +51,13 @@ export default function CommonModal({
         } else {
             document.documentElement.style.overflow = "";
         }
-
+        // intent: 为了实现关闭时也有动画效果，告诉eslint忽略这个错误
         if(isOpen) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
             setRootVisible('show');
         } else {
             if(cssInit.current) {
+                // eslint-disable-next-line react-hooks/set-state-in-effect
                 setRootVisible('outing');
             }
             

src/lib/ApolloErrorHandler.ts

@@ -9,7 +9,7 @@ import {
 
 // about apollo client error handle https://www.apollographql.com/docs/react/data/error-handling
 // Comprehensive error handling example.
-function handleError(error: unknown) {
+export function handleError(error: unknown) {
   if (CombinedGraphQLErrors.is(error)) {
     // Handle GraphQL errors
   } else if (CombinedProtocolErrors.is(error)) {

src/providers/ReduxProvider.tsx

@@ -4,9 +4,9 @@ import { Provider } from "react-redux";
 
 // import { store } from "@/store/store";
 
-import { useRef } from 'react'
+import { useState } from 'react'
 
-import { makeStore, AppStore,PreloadedStateType } from '@/store/store'
+import { makeStore, PreloadedStateType } from '@/store/store'
 
 export const ReduxProvider = ({ 
   children,
@@ -16,12 +16,16 @@ export const ReduxProvider = ({
   preloadedState: PreloadedStateType
 }) => {
   // return <Provider store={store}>{children}</Provider>;
+  
+  // const storeRef = useRef<AppStore>(undefined)
+  // if (!storeRef.current) {
+  //   // Create the store instance the first time this renders
+  //   storeRef.current = makeStore(preloadedState)
+  // }
 
-  const storeRef = useRef<AppStore>(undefined)
-  if (!storeRef.current) {
-    // Create the store instance the first time this renders
-    storeRef.current = makeStore(preloadedState)
-  }
+  // return <Provider store={storeRef.current}>{children}</Provider>
 
-  return <Provider store={storeRef.current}>{children}</Provider>
+  const [store] = useState(() => makeStore(preloadedState));
+
+  return <Provider store={store}>{children}</Provider>
 }

src/utils/hooks/useCheckoutAddress.ts

@@ -3,7 +3,7 @@
 import { GET_CHECKOUT_ADDRESSES, CREATE_CHECKOUT_ADDRESS } from "@/graphql";
 import {useApolloClient} from "@apollo/client/react";
 import { 
-    CheckoutAddressNode, 
+    CheckoutAddressNode,
     ShipAddressFormData,
     BillAddressFormData,
     CreateCheckoutAddressVariables

src/utils/hooks/useCheckoutPaymentMethod.ts

@@ -17,10 +17,7 @@ export function useCheckoutPaymentMethod() {
     const [error, setError] = useState<string|null>(null);
     const isIntRef = useRef(true);
 
-    const getPaymentMethod = (
-        resolveCallback: (res:PaymentMethodsResult) => void = () => {}, 
-        rejectCallback: (res: PaymentMethodsResult) => void = ()=> {}
-    ) => {
+    const getPaymentMethod = () => {
         if(!isIntRef.current) {
             setLoading(true);
         }
@@ -48,7 +45,7 @@ export function useCheckoutPaymentMethod() {
             setLoading(false);
             
             console.log('GET_CHECKOUT_paymentmethod res ---- ',paymentMethods);
-            resolveCallback(resData);
+            
             return resData;
         
         }).catch((err) => {
@@ -63,7 +60,7 @@ export function useCheckoutPaymentMethod() {
             };
             setError(resData.msg);
             setLoading(false);
-            rejectCallback(resData);
+            
             return resData;
         });
     };

src/utils/hooks/useCheckoutShippingMethod.ts

@@ -17,10 +17,7 @@ export function useCheckoutShippingMethod() {
     const [error, setError] = useState<string|null>(null);
     const isIntRef = useRef(true);
 
-    const getShippingMethod = (
-        resolveCallback: (res:ShippingMethodsResult) => void = () => {}, 
-        rejectCallback: (res: ShippingMethodsResult) => void = ()=> {}
-    ) => {
+    const getShippingMethod = () => {
         if(!isIntRef.current) {
             setLoading(true);
         }
@@ -46,7 +43,7 @@ export function useCheckoutShippingMethod() {
             setData(resData.data);
             setLoading(false);
             console.log('GET_CHECKOUT_shippingmethod res ---- ',shippingMethods);
-            resolveCallback(resData);
+            // resolveCallback(resData);
             return resData;
         
         }).catch((err) => {
@@ -61,7 +58,7 @@ export function useCheckoutShippingMethod() {
             };
             setError(resData.msg);
             setLoading(false);
-            rejectCallback(resData);
+            // rejectCallback(resData);
             return resData;
         });
     };