try fix double-computed image src

frontend/frontend/src/pages/Home/Home.js

@@ -14,7 +14,7 @@ import {
 
 import { authenticate } from '../../api';
 import { login as _login } from '../../redux/actions/userActions';
-import { HOST, DEMO_USER } from '../../constants';
+import { HOST, DEMO_USER, DEMO_WAKATIME_USER } from '../../constants';
 import { CardTypes } from '../../utils';
 import { DEFAULT_OPTION as STATS_DEFAULT_RANK } from '../../components/Home/StatsRankSection';
 import { DEFAULT_OPTION as LANGUAGES_DEFAULT_LAYOUT } from '../../components/Home/LanguagesLayoutSection';
@@ -25,14 +25,6 @@ import {
   usePrivateAccess,
 } from '../../redux/selectors/userSelectors';
 
-const computeUserName = (selectedCard, myUserId, myWakatimeUser) => {
-  if (selectedCard === CardTypes.WAKATIME) {
-    return myWakatimeUser;
-  } else {
-    return myUserId;
-  }
-};
-
 const HomeScreen = ({ stage, setStage }) => {
   const [isLoading, setIsLoading] = useState(false);
 
@@ -48,9 +40,6 @@ const HomeScreen = ({ stage, setStage }) => {
   const [wakatimeUser, setWakatimeUser] = useState();
 
   const [selectedCard, setSelectedCard] = useState('stats');
-  const [imageSrc, setImageSrc] = useState(
-    `?username=${computeUserName(selectedCard, userId, wakatimeUser)}`,
-  );
 
   // for stage three
   const [selectedStatsRank, setSelectedStatsRank] =
@@ -101,13 +90,22 @@ const HomeScreen = ({ stage, setStage }) => {
     resetCustomization();
   }, [selectedCard]);
 
-  useEffect(() => {
-    setImageSrc(
-      `?username=${computeUserName(selectedCard, userId, wakatimeUser)}`,
-    );
-  }, [selectedCard, userId, wakatimeUser]);
+  let fullSuffix = `${selectedCard === CardTypes.STATS ? '' : '/' + selectedCard}?`;
 
-  let fullSuffix = `${imageSrc}`;
+  switch (selectedCard) {
+    case CardTypes.STATS:
+    case CardTypes.TOP_LANGS:
+      fullSuffix += `username=${useUserId(DEMO_USER)}`;
+      break;
+    case CardTypes.PIN:
+      fullSuffix += `repo=anuraghazra/github-readme-stats`;
+      break;
+    case CardTypes.GIST:
+      fullSuffix += `id=bbfce31e0217a3689c8d961a356cb10d`;
+      break;
+    case CardTypes.WAKATIME:
+      fullSuffix += `username=${useUserId(DEMO_WAKATIME_USER)}`;
+  }
 
   if (
     selectedStatsRank !== STATS_DEFAULT_RANK &&
@@ -320,13 +318,11 @@ const HomeScreen = ({ stage, setStage }) => {
               selectedCard={selectedCard}
               setSelectedCard={setSelectedCard}
               setStage={setStage}
-              setImageSrc={setImageSrc}
             />
           )}
           {stage === 2 && (
             <CustomizeStage
               selectedCard={selectedCard || CardTypes.STATS}
-              imageSrc={imageSrc}
               selectedStatsRank={selectedStatsRank}
               setSelectedStatsRank={setSelectedStatsRank}
               selectedLanguagesLayout={selectedLanguagesLayout}
@@ -368,7 +364,9 @@ const HomeScreen = ({ stage, setStage }) => {
           )}
           {stage === 4 && (
             <DisplayStage
-              userId={computeUserName(selectedCard, userId, wakatimeUser)}
+              userId={
+                selectedCard === CardTypes.WAKATIME ? wakatimeUser : userId
+              }
               themeSuffix={themeSuffix}
             />
           )}

frontend/frontend/src/pages/Home/stages/SelectCard.js

@@ -6,52 +6,43 @@ import PropTypes from 'prop-types';
 import { Card } from '../../../components';
 import { useUserId } from '../../../redux/selectors/userSelectors';
 import { DEMO_USER, DEMO_WAKATIME_USER } from '../../../constants';
+import { CardTypes } from '../../../utils';
 
-const SelectCardStage = ({
-  selectedCard,
-  setSelectedCard,
-  setStage,
-  setImageSrc,
-}) => {
+const SelectCardStage = ({ selectedCard, setSelectedCard, setStage }) => {
   return (
     <div className="w-full flex flex-wrap">
       {[
         {
           title: 'GitHub Stats Card',
           description: 'your overall GitHub statistics',
-          imageSrc: `?username=${useUserId(DEMO_USER)}`,
-          demoCustomization: '&include_all_commits=true',
-          cardType: 'stats',
+          demoImageSrc: `?username=${useUserId(DEMO_USER)}&include_all_commits=true`,
+          cardType: CardTypes.STATS,
         },
         {
           title: 'Top Languages Card',
           description: 'your most frequently used languages',
-          imageSrc: `/top-langs?username=${useUserId(DEMO_USER)}`,
-          demoCustomization: '&langs_count=4',
-          cardType: 'top-langs',
+          demoImageSrc: `/top-langs?username=${useUserId(DEMO_USER)}&langs_count=4`,
+          cardType: CardTypes.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',
+          demoImageSrc: '/pin?repo=anuraghazra/github-readme-stats',
+          cardType: CardTypes.PIN,
         },
         {
           title: 'GitHub Gist Pin',
           description:
             'pin gists in your GitHub profile using a GitHub profile readme',
-          imageSrc: '/gist?id=bbfce31e0217a3689c8d961a356cb10d',
-          demoCustomization: '',
-          cardType: 'gist',
+          demoImageSrc: '/gist?id=bbfce31e0217a3689c8d961a356cb10d',
+          cardType: CardTypes.GIST,
         },
         {
           title: 'WakaTime Stats Card',
           description: 'your coding activity from WakaTime',
-          imageSrc: `/wakatime?username=${useUserId(DEMO_WAKATIME_USER)}`,
-          demoCustomization: '&langs_count=6&card_width=450',
-          cardType: 'wakatime',
+          demoImageSrc: `/wakatime?username=${useUserId(DEMO_WAKATIME_USER)}&langs_count=6&card_width=450`,
+          cardType: CardTypes.WAKATIME,
         },
       ].map((card, index) => (
         <button
@@ -61,13 +52,12 @@ const SelectCardStage = ({
           onClick={() => {
             setSelectedCard(card.cardType);
             setStage(2);
-            setImageSrc(card.imageSrc);
           }}
         >
           <Card
             title={card.title}
             description={card.description}
-            imageSrc={card.imageSrc + card.demoCustomization}
+            imageSrc={card.demoImageSrc}
             selected={selectedCard === card.cardType}
             fixedSize="true"
           />
@@ -81,7 +71,6 @@ SelectCardStage.propTypes = {
   selectedCard: PropTypes.string,
   setSelectedCard: PropTypes.func.isRequired,
   setStage: PropTypes.func.isRequired,
-  setImageSrc: PropTypes.func.isRequired,
 };
 
 SelectCardStage.defaultProps = {