add option to input WakaTime username

frontend/frontend/src/constants.js

@@ -24,6 +24,9 @@ export const BACKEND_URL = PROD
 
 export const CURR_YEAR = 2024;
 
+export const DEMO_USER = 'anuraghazra';
+export const DEMO_WAKATIME_USER = 'ffflabs';
+
 window.process = {
   env: {
     FETCH_MULTI_PAGE_STARS: 'true',

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 } from '../../constants';
+import { HOST, DEMO_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,10 +25,18 @@ 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);
 
-  const userId = useUserId();
+  const userId = useUserId(DEMO_USER);
   const privateAccess = usePrivateAccess();
   const isAuthenticated = useIsAuthenticated();
 
@@ -37,8 +45,12 @@ const HomeScreen = ({ stage, setStage }) => {
   const login = (newUserId, userKey) => dispatch(_login(newUserId, userKey));
 
   // for stage two
+  const [wakatimeUser, setWakatimeUser] = useState();
+
   const [selectedCard, setSelectedCard] = useState('stats');
-  const [imageSrc, setImageSrc] = useState(`?username=${userId}`);
+  const [imageSrc, setImageSrc] = useState(
+    `?username=${computeUserName(selectedCard, userId, wakatimeUser)}`,
+  );
 
   // for stage three
   const [selectedStatsRank, setSelectedStatsRank] =
@@ -90,8 +102,10 @@ const HomeScreen = ({ stage, setStage }) => {
   }, [selectedCard]);
 
   useEffect(() => {
-    setImageSrc(`?username=${userId}`);
-  }, [userId]);
+    setImageSrc(
+      `?username=${computeUserName(selectedCard, userId, wakatimeUser)}`,
+    );
+  }, [selectedCard, userId, wakatimeUser]);
 
   let fullSuffix = `${imageSrc}`;
 
@@ -337,6 +351,8 @@ const HomeScreen = ({ stage, setStage }) => {
               setIncludeAllCommits={setIncludeAllCommits}
               enableAnimations={enableAnimations}
               setEnableAnimations={setEnableAnimations}
+              wakatimeUser={wakatimeUser}
+              setWakatimeUser={setWakatimeUser}
               usePercent={usePercent}
               setUsePercent={setUsePercent}
               fullSuffix={fullSuffix}
@@ -351,7 +367,10 @@ const HomeScreen = ({ stage, setStage }) => {
             />
           )}
           {stage === 4 && (
-            <DisplayStage userId={userId} themeSuffix={themeSuffix} />
+            <DisplayStage
+              userId={computeUserName(selectedCard, userId, wakatimeUser)}
+              themeSuffix={themeSuffix}
+            />
           )}
         </div>
       </div>

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

@@ -17,6 +17,8 @@ const CustomizeStage = ({
   setSelectedLanguagesLayout,
   selectedWakatimeLayout,
   setSelectedWakatimeLayout,
+  wakatimeUser,
+  setWakatimeUser,
   showTitle,
   setShowTitle,
   showOwner,
@@ -82,6 +84,15 @@ const CustomizeStage = ({
             setSelectedOption={setSelectedLanguagesLayout}
           />
         )}
+        {cardType === CardTypes.WAKATIME && (
+          <TextSection
+            title="WakaTime Username"
+            text='Set your <a href="https://wakatime.com/">WakaTime</a> username to fetch your stats.'
+            placeholder='e.g. "ffflabs"'
+            value={wakatimeUser}
+            setValue={setWakatimeUser}
+          />
+        )}
         {cardType === CardTypes.WAKATIME && (
           <WakatimeLayoutSection
             selectedOption={selectedWakatimeLayout}
@@ -176,6 +187,8 @@ CustomizeStage.propTypes = {
   setSelectedLanguagesLayout: PropTypes.func.isRequired,
   selectedWakatimeLayout: PropTypes.object.isRequired,
   setSelectedWakatimeLayout: PropTypes.func.isRequired,
+  wakatimeUser: PropTypes.string.isRequired,
+  setWakatimeUser: PropTypes.func.isRequired,
   showTitle: PropTypes.bool.isRequired,
   setShowTitle: PropTypes.func.isRequired,
   descriptionLines: PropTypes.number.isRequired,

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

@@ -23,7 +23,7 @@ import {
 import { deleteAccount } from '../../../api';
 
 const LoginStage = ({ setCurrItem }) => {
-  const userId = useUserId();
+  const userId = useUserId(null);
   const userKey = useUserKey();
   const privateAccess = usePrivateAccess();
   const isAuthenticated = useIsAuthenticated();

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

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 
 import { Card } from '../../../components';
 import { useUserId } from '../../../redux/selectors/userSelectors';
+import { DEMO_USER, DEMO_WAKATIME_USER } from '../../../constants';
 
 const SelectCardStage = ({
   selectedCard,
@@ -12,21 +13,20 @@ const SelectCardStage = ({
   setStage,
   setImageSrc,
 }) => {
-  const userId = useUserId();
   return (
     <div className="w-full flex flex-wrap">
       {[
         {
           title: 'GitHub Stats Card',
           description: 'your overall GitHub statistics',
-          imageSrc: `?username=${userId}`,
+          imageSrc: `?username=${useUserId(DEMO_USER)}`,
           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=${useUserId(DEMO_USER)}`,
           demoCustomization: '&langs_count=4',
           cardType: 'top-langs',
         },
@@ -49,7 +49,7 @@ const SelectCardStage = ({
         {
           title: 'WakaTime Stats Card',
           description: 'your coding activity from WakaTime',
-          imageSrc: '/wakatime?username=ffflabs',
+          imageSrc: `/wakatime?username=${useUserId(DEMO_WAKATIME_USER)}`,
           demoCustomization: '&langs_count=6&card_width=450',
           cardType: 'wakatime',
         },

frontend/frontend/src/redux/selectors/userSelectors.js

@@ -1,7 +1,7 @@
 import { useSelector } from 'react-redux';
 
-export const useUserId = () => {
-  return useSelector((state) => state.user.userId) || 'anuraghazra';
+export const useUserId = (fallbackUsername) => {
+  return useSelector((state) => state.user.userId) || fallbackUsername;
 };
 
 export const useIsAuthenticated = () => {