Skip to content

Commit 93ff2ea

Browse files
aashishvanandaashishvanand
committed
Fixed BankCards
1 parent fea0b9b commit 93ff2ea

File tree

4 files changed

+147
-100
lines changed

4 files changed

+147
-100
lines changed

‎next.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const nextConfig = {
99
exclude:["error"]
1010
}
1111
},
12+
trailingSlash: false,
1213
serverExternalPackages: ['sharp'], // Previously serverComponentsExternalPackages
1314
bundlePagesRouterDependencies: true, // Previously bundlePagesExternals
1415
typescript: {

‎src/features/bank/components/BankPage.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
"use client";
2+
13
import { useState, useEffect } from "react";
24
import { useRouter } from "next/navigation";
35
import {

‎src/features/landing/components/sections/StatsSection.jsx

+10-1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,11 @@ const StatsSection = () => {
1414
return rounded;
1515
};
1616

17+
const roundToNearestTen = (num) => {
18+
const rounded = Math.floor(num / 10) * 10;
19+
return rounded;
20+
};
21+
1722
// Data fetching effect
1823
useEffect(() => {
1924
const fetchStats = async () => {
@@ -163,7 +168,11 @@ const StatsSection = () => {
163168
justifyContent: "center",
164169
}}
165170
>
166-
<Counter value={stats.banks} animate={hasAnimated} suffix="+" />
171+
<Counter
172+
value={roundToNearestTen(stats.banks)}
173+
animate={hasAnimated}
174+
suffix="+"
175+
/>
167176
</Typography>
168177
<Typography
169178
variant="h6"

‎src/pages/bank/[bankId].js

+134-99
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,158 @@
1+
'use client';
2+
13
import dynamic from 'next/dynamic';
2-
import { generateMetadata } from '../../shared/components/seo';
34
import { ThemeRegistry } from '../../core/providers/ThemeRegistry';
45
import { AuthProvider } from '../../core/providers/AuthContext';
6+
import { useRouter } from 'next/navigation';
7+
import { useEffect, useState } from 'react';
8+
import { Box, CircularProgress } from '@mui/material';
59

610
const BankPage = dynamic(() => import('../../features/bank/components/BankPage'), { ssr: false });
711

812
const CACHE_KEY = 'cardsData';
9-
const CACHE_DURATION = 7 * 24 * 60 * 60 * 1000; // 7 days in milliseconds
13+
const CACHE_DURATION = 7 * 24 * 60 * 60 * 1000;
1014

1115
const BANK_NAME_MAPPING = {
12-
'amex': 'AMEX',
13-
'au': 'AU',
14-
'axis': 'Axis',
15-
'bob': 'BOB',
16-
'canara': 'Canara',
17-
'dbs': 'DBS',
18-
'federal': 'Federal',
19-
'hdfc': 'HDFC',
20-
'hsbc': 'HSBC',
21-
'icici': 'ICICI',
22-
'idbi': 'IDBI',
23-
'idfcfirst': 'IDFCFirst',
24-
'indusind': 'IndusInd',
25-
'kotak': 'Kotak',
26-
'onecard': 'OneCard',
27-
'pnb': 'PNB',
28-
'rbl': 'RBL',
29-
'sbi': 'SBI',
30-
'sc': 'SC',
31-
'yesbank': 'YesBank'
16+
'amex': 'AMEX',
17+
'au': 'AU',
18+
'axis': 'Axis',
19+
'bob': 'BOB',
20+
'canara': 'Canara',
21+
'dbs': 'DBS',
22+
'federal': 'Federal',
23+
'hdfc': 'HDFC',
24+
'hsbc': 'HSBC',
25+
'icici': 'ICICI',
26+
'idbi': 'IDBI',
27+
'idfcfirst': 'IDFCFirst',
28+
'indusind': 'IndusInd',
29+
'kotak': 'Kotak',
30+
'onecard': 'OneCard',
31+
'pnb': 'PNB',
32+
'rbl': 'RBL',
33+
'sbi': 'SBI',
34+
'sc': 'SC',
35+
'yesbank': 'YesBank'
36+
};
37+
38+
const getFromCache = () => {
39+
if (typeof window === 'undefined') return null;
40+
41+
try {
42+
const cachedData = localStorage.getItem(CACHE_KEY);
43+
if (cachedData) {
44+
const { data, timestamp } = JSON.parse(cachedData);
45+
if (Date.now() - timestamp < CACHE_DURATION) {
46+
return data;
47+
}
48+
}
49+
} catch (error) {
50+
console.error('Error reading from cache:', error);
51+
}
52+
return null;
3253
};
3354

34-
async function getCardsData() {
35-
// Check cache first
36-
if (typeof window !== 'undefined') {
37-
const cachedData = localStorage.getItem(CACHE_KEY);
55+
const setToCache = (data) => {
56+
if (typeof window === 'undefined') return;
57+
58+
try {
59+
localStorage.setItem(CACHE_KEY, JSON.stringify({
60+
data,
61+
timestamp: Date.now()
62+
}));
63+
} catch (error) {
64+
console.error('Error writing to cache:', error);
65+
}
66+
};
67+
68+
const fetchCardsData = async () => {
69+
const cachedData = getFromCache();
3870
if (cachedData) {
39-
const { data, timestamp } = JSON.parse(cachedData);
40-
if (Date.now() - timestamp < CACHE_DURATION) {
41-
return data;
42-
}
71+
return cachedData;
4372
}
44-
}
4573

46-
// Fetch fresh data if cache is expired or missing
47-
const response = await fetch('https://files.ccreward.app/cards.json');
48-
const data = await response.json();
74+
const response = await fetch('https://files.ccreward.app/cards.json');
75+
const data = await response.json();
76+
77+
setToCache(data);
78+
79+
return data;
80+
};
4981

50-
// Update cache
51-
if (typeof window !== 'undefined') {
52-
localStorage.setItem(CACHE_KEY, JSON.stringify({
53-
data,
54-
timestamp: Date.now()
55-
}));
56-
}
82+
function BankRoute() {
83+
const router = useRouter();
84+
const [bankData, setBankData] = useState(null);
85+
const [isLoading, setIsLoading] = useState(true);
5786

58-
return data;
59-
}
87+
useEffect(() => {
88+
async function fetchData() {
89+
try {
90+
// Get bankId from URL
91+
const bankId = window.location.pathname.split('/').pop();
92+
if (!bankId) {
93+
router.push('/');
94+
return;
95+
}
6096

61-
export async function getStaticPaths() {
62-
try {
63-
// Get paths from our known bank mappings
64-
const paths = Object.keys(BANK_NAME_MAPPING).map((bank) => ({
65-
params: { bankId: bank.toLowerCase() },
66-
}));
67-
68-
return {
69-
paths,
70-
fallback: false,
71-
};
72-
} catch (error) {
73-
console.error('Error fetching banks:', error);
74-
return {
75-
paths: [],
76-
fallback: false,
77-
};
78-
}
79-
}
97+
const mappedBankName = BANK_NAME_MAPPING[bankId.toLowerCase()];
98+
if (!mappedBankName) {
99+
router.push('/');
100+
return;
101+
}
80102

81-
export async function getStaticProps({ params }) {
82-
try {
83-
const data = await getCardsData();
84-
const bankId = params.bankId.toLowerCase();
85-
const mappedBankName = BANK_NAME_MAPPING[bankId];
86-
87-
if (!mappedBankName) {
88-
return {
89-
notFound: true,
90-
};
103+
const data = await fetchCardsData();
104+
const cards = data.issuers[mappedBankName]?.cards || [];
105+
106+
if (!cards.length) {
107+
router.push('/');
108+
return;
109+
}
110+
111+
setBankData({
112+
bank: mappedBankName,
113+
cards
114+
});
115+
} catch (error) {
116+
console.error('Error fetching bank data:', error);
117+
router.push('/');
118+
} finally {
119+
setIsLoading(false);
120+
}
121+
}
122+
123+
fetchData();
124+
}, [router]);
125+
126+
if (isLoading) {
127+
return (
128+
<ThemeRegistry>
129+
<Box
130+
sx={{
131+
display: 'flex',
132+
justifyContent: 'center',
133+
alignItems: 'center',
134+
minHeight: '100vh'
135+
}}
136+
>
137+
<CircularProgress />
138+
</Box>
139+
</ThemeRegistry>
140+
);
91141
}
92142

93-
const cards = data.issuers[mappedBankName]?.cards || [];
94-
95-
if (!cards.length) {
96-
return {
97-
notFound: true,
98-
};
143+
if (!bankData) {
144+
return null;
99145
}
100146

101-
return {
102-
props: {
103-
bank: mappedBankName,
104-
cards,
105-
},
106-
};
107-
} catch (error) {
108-
console.error('Error fetching bank cards:', error);
109-
return {
110-
notFound: true,
111-
};
112-
}
147+
return (
148+
<ThemeRegistry>
149+
<AuthProvider>
150+
<BankPage bank={bankData.bank} cards={bankData.cards} />
151+
</AuthProvider>
152+
</ThemeRegistry>
153+
);
113154
}
114155

115-
export default function BankRoute({ bank, cards }) {
116-
return (
117-
<ThemeRegistry>
118-
<AuthProvider>
119-
<BankPage bank={bank} cards={cards} />
120-
</AuthProvider>
121-
</ThemeRegistry>
122-
);
123-
}
156+
BankRoute.displayName = 'BankRoute';
157+
158+
export default BankRoute;

0 commit comments

Comments
 (0)