feat: implement custom axios client with caching and authentication...

feat: implement custom axios client with caching and authentication interceptors and add layout footer and header components

src/api/mutator/custom-client.ts

@@ -198,8 +198,8 @@ const useCustomClient = <T>(url: string, options?: RequestInit): Promise<T> => {
     method,
     headers: convertHeaders(options?.headers),
     data: options?.body,
-    signal: options?.signal || undefined,
-    cancelToken: source.token,
+    signal: shouldCacheGet ? undefined : (options?.signal || undefined),
+    cancelToken: shouldCacheGet ? undefined : source.token,
   };
 
   const promise = AXIOS_INSTANCE(axiosConfig)

src/app/(main)/_lib/layout/footer.tsx

@@ -31,6 +31,34 @@ type SocialItem = {
   icon: React.ReactNode;
 };
 
+const ZaloIcon = ({ size = 20, className = "" }: { size?: number; className?: string }) => (
+  <svg
+    viewBox="0 0 24 24"
+    width={size}
+    height={size}
+    fill="currentColor"
+    className={className}
+  >
+    <path
+      d="M12.49 10.2722v-.4496h1.3467v6.3218h-.7704a.576.576 0 01-.5763-.5729l-.0006.0005a3.273 3.273 0 01-1.9372.6321c-1.8138 0-3.2844-1.4697-3.2844-3.2823 0-1.8125 1.4706-3.2822 3.2844-3.2822a3.273 3.273 0 011.9372.6321l.0006.0005zM6.9188 7.7896v.205c0 .3823-.051.6944-.2995 1.0605l-.03.0343c-.0542.0615-.1815.206-.2421.2843L2.024 14.8h4.8948v.7682a.5764.5764 0 01-.5767.5761H0v-.3622c0-.4436.1102-.6414.2495-.8476L4.8582 9.23H.1922V7.7896h6.7266zm8.5513 8.3548a.4805.4805 0 01-.4803-.4798v-7.875h1.4416v8.3548H15.47zM20.6934 9.6C22.52 9.6 24 11.0807 24 12.9044c0 1.8252-1.4801 3.306-3.3066 3.306-1.8264 0-3.3066-1.4808-3.3066-3.306 0-1.8237 1.4802-3.3044 3.3066-3.3044zm-10.1412 5.253c1.0675 0 1.9324-.8645 1.9324-1.9312 0-1.065-.865-1.9295-1.9324-1.9295s-1.9324.8644-1.9324 1.9295c0 1.0667.865 1.9312 1.9324 1.9312zm10.1412-.0033c1.0737 0 1.945-.8707 1.945-1.9453 0-1.073-.8713-1.9436-1.945-1.9436-1.0753 0-1.945.8706-1.945 1.9436 0 1.0746.8697 1.9453 1.945 1.9453z"
+    />
+  </svg>
+);
+
+const TiktokIcon = ({ size = 20, className = "" }: { size?: number; className?: string }) => (
+  <svg
+    viewBox="0 0 24 24"
+    width={size}
+    height={size}
+    fill="currentColor"
+    className={className}
+  >
+    <path
+      d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"
+    />
+  </svg>
+);
+
 const fallbackSocials: SocialItem[] = [
   {
     key: "facebook",
@@ -65,6 +93,8 @@ const getSocialIcon = (key: string): React.ReactNode => {
   }
   if (normalized.includes("youtube")) return <Youtube className="h-5 w-5" />;
   if (normalized.includes("linkedin")) return <Linkedin className="h-5 w-5" />;
+  if (normalized.includes("zalo")) return <ZaloIcon className="h-5 w-5" />;
+  if (normalized.includes("tiktok")) return <TiktokIcon className="h-5 w-5" />;
   return null;
 };
 

src/app/(main)/_lib/layout/header.tsx

@@ -58,40 +58,74 @@ type SocialItem = {
 const getEnvelopeData = <T,>(payload?: ApiEnvelope<T> | null) =>
   payload?.responseData ?? payload?.data?.responseData;
 
+const ZaloIcon = ({ size = 12, className = "" }: { size?: number; className?: string }) => (
+  <svg
+    viewBox="0 0 24 24"
+    width={size}
+    height={size}
+    fill="currentColor"
+    className={className}
+  >
+    <path
+      d="M12.49 10.2722v-.4496h1.3467v6.3218h-.7704a.576.576 0 01-.5763-.5729l-.0006.0005a3.273 3.273 0 01-1.9372.6321c-1.8138 0-3.2844-1.4697-3.2844-3.2823 0-1.8125 1.4706-3.2822 3.2844-3.2822a3.273 3.273 0 011.9372.6321l.0006.0005zM6.9188 7.7896v.205c0 .3823-.051.6944-.2995 1.0605l-.03.0343c-.0542.0615-.1815.206-.2421.2843L2.024 14.8h4.8948v.7682a.5764.5764 0 01-.5767.5761H0v-.3622c0-.4436.1102-.6414.2495-.8476L4.8582 9.23H.1922V7.7896h6.7266zm8.5513 8.3548a.4805.4805 0 01-.4803-.4798v-7.875h1.4416v8.3548H15.47zM20.6934 9.6C22.52 9.6 24 11.0807 24 12.9044c0 1.8252-1.4801 3.306-3.3066 3.306-1.8264 0-3.3066-1.4808-3.3066-3.306 0-1.8237 1.4802-3.3044 3.3066-3.3044zm-10.1412 5.253c1.0675 0 1.9324-.8645 1.9324-1.9312 0-1.065-.865-1.9295-1.9324-1.9295s-1.9324.8644-1.9324 1.9295c0 1.0667.865 1.9312 1.9324 1.9312zm10.1412-.0033c1.0737 0 1.945-.8707 1.945-1.9453 0-1.073-.8713-1.9436-1.945-1.9436-1.0753 0-1.945.8706-1.945 1.9436 0 1.0746.8697 1.9453 1.945 1.9453z"
+    />
+  </svg>
+);
+
+const TiktokIcon = ({ size = 12, className = "" }: { size?: number; className?: string }) => (
+  <svg
+    viewBox="0 0 24 24"
+    width={size}
+    height={size}
+    fill="currentColor"
+    className={className}
+  >
+    <path
+      d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"
+    />
+  </svg>
+);
+
 const fallbackSocials: SocialItem[] = [
   {
     key: "facebook",
     url: "https://www.facebook.com/VCCIHCMC/",
-    icon: <Facebook size={12} fill="currentColor" />,
+    icon: <Facebook size={13} />,
   },
   {
     key: "twitter",
     url: "https://twitter.com/VCCI_HCM",
-    icon: <Twitter size={12} fill="currentColor" />,
+    icon: <Twitter size={13} />,
   },
   {
     key: "youtube",
     url: "https://www.youtube.com/user/VCCIHCMC",
-    icon: <Youtube size={12} fill="currentColor" />,
+    icon: <Youtube size={13} />,
   },
   {
     key: "linkedin",
     url: "https://www.linkedin.com/company/vietnam-chamber-of-commerce-and-industry-ho-chi-minh-city-branch-vcci-hcm-?trk=biz-companies-cym",
-    icon: <Linkedin size={12} fill="currentColor" />,
+    icon: <Linkedin size={13} />,
   },
 ];
 
 const getSocialIcon = (key: string) => {
   const normalized = key.toLowerCase();
   if (normalized.includes("facebook"))
-    return <Facebook size={12} fill="currentColor" />;
+    return <Facebook size={13} />;
   if (normalized.includes("twitter") || normalized === "x") {
-    return <Twitter size={12} fill="currentColor" />;
+    return <Twitter size={13} />;
   }
   if (normalized.includes("youtube"))
-    return <Youtube size={12} fill="currentColor" />;
+    return <Youtube size={13} />;
   if (normalized.includes("linkedin"))
-    return <Linkedin size={12} fill="currentColor" />;
+    return <Linkedin size={13} />;
+  if (normalized.includes("zalo")) {
+    return <ZaloIcon size={13} />;
+  }
+  if (normalized.includes("tiktok")) {
+    return <TiktokIcon size={13} />;
+  }
   return null;
 };