diff --git a/frontend/frontend/src/components/Card/SVG.js b/frontend/frontend/src/components/Card/SVG.js
index 2191b569..320ad01f 100644
--- a/frontend/frontend/src/components/Card/SVG.js
+++ b/frontend/frontend/src/components/Card/SVG.js
@@ -12,6 +12,8 @@ import 'react-loading-skeleton/dist/skeleton.css';
import { createMockReq, createMockRes } from '../../mock-http';
import { default as router } from '../../backend/.vercel/output/functions/api.func/router.js';
import axios from 'axios';
+import { HOST } from '../../constants';
+import { DEMO_STATS_CARD } from './demoData/statsCard';
const SvgInline = (props) => {
const [svg, setSvg] = useState(null);
@@ -26,33 +28,47 @@ const SvgInline = (props) => {
process.env.PAT_1 = userToken;
setLoaded(false);
- const isAuthenticated = userId && userId.length > 0;
- if (isAuthenticated && (!userToken || userToken === 'placeholderPAT')) {
- // waiting for backend call to private-access
- return;
- }
let body;
let status;
- if (isAuthenticated) {
- const req = createMockReq({
- method: 'GET',
- url: url,
- });
- const res = createMockRes();
- await router(req, res);
- body = res._getBody();
- status = res._getStatusCode();
- } else {
- let res = await axios.get(url);
- body = res.data;
- status = res.status;
+
+ switch (url) {
+ case `https://${HOST}/api?username=anuraghazra&include_all_commits=true&client=wizard`:
+ status = 200;
+ body = DEMO_STATS_CARD;
+ break;
+
+ default:
+ const isAuthenticated = userId && userId.length > 0;
+ if (
+ isAuthenticated &&
+ (!userToken || userToken === 'placeholderPAT')
+ ) {
+ // waiting for backend call to private-access
+ return;
+ }
+
+ if (isAuthenticated) {
+ const req = createMockReq({
+ method: 'GET',
+ url: url,
+ });
+ const res = createMockRes();
+ await router(req, res);
+ body = res._getBody();
+ status = res._getStatusCode();
+ } else {
+ let res = await axios.get(url);
+ body = res.data;
+ status = res.status;
+ }
+
+ if (status >= 300) {
+ console.error('failed to fetch/generate SVG');
+ return;
+ }
}
- if (status >= 300) {
- console.error('failed to fetch/generate SVG');
- return;
- }
setSvg(body);
setLoaded(true);
};
diff --git a/frontend/frontend/src/components/Card/demoData/statsCard.js b/frontend/frontend/src/components/Card/demoData/statsCard.js
new file mode 100644
index 00000000..7c549072
--- /dev/null
+++ b/frontend/frontend/src/components/Card/demoData/statsCard.js
@@ -0,0 +1,212 @@
+export const DEMO_STATS_CARD = `
+
+ `;
diff --git a/frontend/frontend/src/pages/Home/Home.js b/frontend/frontend/src/pages/Home/Home.js
index 0f2775f8..e65ea74f 100644
--- a/frontend/frontend/src/pages/Home/Home.js
+++ b/frontend/frontend/src/pages/Home/Home.js
@@ -37,7 +37,7 @@ const HomeScreen = () => {
// for stage one
const [selectedCard, setSelectedCard] = useState('stats');
- const [imageSrc, setImageSrc] = useState(`?&username=${userId}`);
+ const [imageSrc, setImageSrc] = useState(`?username=${userId}`);
// for stage two
const [selectedStatsRank, setSelectedStatsRank] =
@@ -89,7 +89,7 @@ const HomeScreen = () => {
}, [selectedCard]);
useEffect(() => {
- setImageSrc(`?&username=${userId}`);
+ setImageSrc(`?username=${userId}`);
}, [userId]);
let fullSuffix = `${imageSrc}`;
diff --git a/frontend/frontend/src/pages/Home/stages/Login.js b/frontend/frontend/src/pages/Home/stages/Login.js
index c94f4a73..f03404c8 100644
--- a/frontend/frontend/src/pages/Home/stages/Login.js
+++ b/frontend/frontend/src/pages/Home/stages/Login.js
@@ -30,14 +30,14 @@ const LoginStage = ({ setCurrItem }) => {
{
title: 'GitHub Stats Card',
description: 'your overall GitHub statistics',
- imageSrc: `?&username=anuraghazra`,
+ imageSrc: '?username=anuraghazra',
demoCustomization: '&include_all_commits=true',
cardType: 'stats',
},
{
title: 'Top Languages Card',
description: 'your most frequently used languages',
- imageSrc: `/top-langs?&username=anuraghazra`,
+ imageSrc: '/top-langs?username=anuraghazra',
demoCustomization: '&langs_count=4',
cardType: 'top-langs',
},
@@ -270,68 +270,6 @@ const LoginStage = ({ setCurrItem }) => {
);
-
- return (
-
- {[
- {
- title: 'GitHub Stats Card',
- description: 'your overall GitHub statistics',
- imageSrc: `?&username=${userId}`,
- demoCustomization: '&include_all_commits=true',
- cardType: 'stats',
- },
- {
- title: 'Top Languages Card',
- description: 'your most frequently used languages',
- imageSrc: `/top-langs?&username=${userId}`,
- demoCustomization: '&langs_count=4',
- cardType: 'top-langs',
- },
- {
- title: 'GitHub Extra Pin',
- description:
- 'pin more than 6 repositories in your profile using a GitHub profile readme',
- imageSrc: '/pin?repo=anuraghazra/github-readme-stats',
- demoCustomization: '',
- cardType: 'pin',
- },
- {
- title: 'GitHub Gist Pin',
- description:
- 'pin gists in your GitHub profile using a GitHub profile readme',
- imageSrc: '/gist?id=bbfce31e0217a3689c8d961a356cb10d',
- demoCustomization: '',
- cardType: 'gist',
- },
- {
- title: 'WakaTime Stats Card',
- description: 'your coding activity from WakaTime',
- imageSrc: '/wakatime?username=ffflabs',
- demoCustomization: '&langs_count=6&card_width=450',
- cardType: 'wakatime',
- },
- ].map((card, index) => (
-
- ))}
-
- );
};
LoginStage.propTypes = {
diff --git a/frontend/frontend/src/pages/Home/stages/SelectCard.js b/frontend/frontend/src/pages/Home/stages/SelectCard.js
index 0117b58f..b3bb7ea5 100644
--- a/frontend/frontend/src/pages/Home/stages/SelectCard.js
+++ b/frontend/frontend/src/pages/Home/stages/SelectCard.js
@@ -14,14 +14,14 @@ const SelectCardStage = ({ selectedCard, setSelectedCard, setImageSrc }) => {
{
title: 'GitHub Stats Card',
description: 'your overall GitHub statistics',
- imageSrc: `?&username=${userId}`,
+ imageSrc: `?username=${userId}`,
demoCustomization: '&include_all_commits=true',
cardType: 'stats',
},
{
title: 'Top Languages Card',
description: 'your most frequently used languages',
- imageSrc: `/top-langs?&username=${userId}`,
+ imageSrc: `/top-langs?username=${userId}`,
demoCustomization: '&langs_count=4',
cardType: 'top-langs',
},