Skip to content

V
VCCI-News
Commit 0e293688 authored by Lê Đức Huy's avatar Lê Đức Huy
Browse files
Options

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
parent 764fca75
Show whitespace changes
Inline Side-by-side
Showing with 74 additions and 10 deletions
src/api/mutator/custom-client.ts
View file @ 0e293688
......@@ -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
View file @ 0e293688
......@@ -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
View file @ 0e293688
......@@ -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;
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment