better links in markdown, step 2: adapt pasted values

frontend/frontend/src/axios-override.js

@@ -6,7 +6,8 @@ import additionalUserStars from './mockData/additional_user_stars.json' with { t
 import commentedIssues from './mockData/commented_issues.json' with { type: 'json' };
 import commentedPrs from './mockData/commented_prs.json' with { type: 'json' };
 import commits from './mockData/commits.json' with { type: 'json' };
-import gist from './mockData/gist.json' with { type: 'json' };
+import gist_graphql from './mockData/gist-graphql.json' with { type: 'json' };
+import gist_rest from './mockData/gist-rest.json' with { type: 'json' };
 import repository from './mockData/repository.json' with { type: 'json' };
 import reviewedPrs from './mockData/reviewed_prs.json' with { type: 'json' };
 import topLanguages from './mockData/top_languages.json' with { type: 'json' };
@@ -92,10 +93,12 @@ axios.defaults.adapter = async (config) => {
     params.query?.includes('query gistInfo(') &&
     params.variables?.gistName === 'bbfce31e0217a3689c8d961a356cb10d'
   ) {
-    return createMockResponse(gist, config);
+    return createMockResponse(gist_graphql, config);
   }
 
   switch (config.url) {
+    case 'https://api.github.com/gists/bbfce31e0217a3689c8d961a356cb10d':
+      return createMockResponse(gist_rest, config);
     case 'https://api.github.com/search/commits?per_page=1&q=author:anuraghazra':
       return createMockResponse(commits, config);
     case 'https://api.github.com/search/issues?per_page=1&q=commenter:anuraghazra+-author:anuraghazra+type:pr':

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

@@ -30,6 +30,7 @@ import {
   useIsAuthenticated,
   usePrivateAccess,
 } from '../../redux/selectors/userSelectors';
+import axios from 'axios';
 
 const HomeScreen = ({ stage, setStage }) => {
   const [isLoading, setIsLoading] = useState(false);
@@ -214,6 +215,24 @@ const HomeScreen = ({ stage, setStage }) => {
     themeSuffix += `&theme=${theme}`;
   }
 
+  // for stage five
+  const [gistUrl, setGistUrl] = useState('');
+
+  useEffect(() => {
+    const fetchGistUrl = async (gistId) => {
+      try {
+        const fullUrl = `https://api.github.com/gists/${gistId}`;
+        const result = await axios.get(fullUrl);
+        return result.data.html_url;
+      } catch (error) {
+        console.error(error);
+        return '';
+      }
+    };
+
+    fetchGistUrl(gist).then(setGistUrl);
+  }, [gist]);
+
   const contentSectionRef = useRef(null);
 
   useEffect(() => {
@@ -391,6 +410,23 @@ const HomeScreen = ({ stage, setStage }) => {
                     return `${wakatimeUser}_card`;
                 }
               })()}
+              link={(() => {
+                switch (selectedCard) {
+                  case CardTypes.STATS:
+                  case CardTypes.TOP_LANGS:
+                    return `https://${HOST}/api${themeSuffix}`;
+                  case CardTypes.PIN:
+                    let myRepo = repo;
+                    if (!myRepo.includes('/')) {
+                      myRepo = `${userId}/${myRepo}`;
+                    }
+                    return `https://github.com/${myRepo}`;
+                  case CardTypes.GIST:
+                    return gistUrl;
+                  case CardTypes.WAKATIME:
+                    return `https://wakatime.com/@${wakatimeUser}`;
+                }
+              })()}
               themeSuffix={themeSuffix}
             />
           )}

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

@@ -120,17 +120,20 @@ const CustomizeStage = ({
             }
             placeholder={`e.g. "${DEMO_REPO}"`}
             value={repo}
-            setValue={
-              setRepo
-              /*(newValue) => {
+            setValue={setRepo}
+            onPaste={(e) => {
+              e.preventDefault();
+              let newValue = e.clipboardData.getData('text');
+              // if the user pasted a full GitHub URL, extract owner/repo
               if (newValue.endsWith('/')) {
                 newValue = newValue.slice(0, -1);
               }
-              setRepo(
-                newValue.includes('/') ? newValue.split('/')[1] : newValue,
-              );
-            }*/
-            }
+              let parts = newValue.split('/');
+              if (parts.length > 2) {
+                newValue = parts.slice(-2).join('/');
+              }
+              setRepo(newValue);
+            }}
             disabled={!isAuthenticated}
           />
         )}
@@ -162,6 +165,19 @@ const CustomizeStage = ({
             placeholder={`e.g. "${DEMO_GIST}"`}
             value={gist}
             setValue={setGist}
+            onPaste={(e) => {
+              e.preventDefault();
+              let newValue = e.clipboardData.getData('text');
+              // if the user pasted a full GitHub URL, extract Gist ID
+              if (newValue.endsWith('/')) {
+                newValue = newValue.slice(0, -1);
+              }
+              let parts = newValue.split('/');
+              if (parts.length > 1) {
+                newValue = parts.slice(-1).join('/');
+              }
+              setRepo(newValue);
+            }}
             disabled={!isAuthenticated}
           />
         )}

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

@@ -12,7 +12,7 @@ import { Button, Image } from '../../../components';
 import { classnames } from '../../../utils';
 import { HOST } from '../../../constants';
 
-const DisplayStage = ({ filename, themeSuffix }) => {
+const DisplayStage = ({ filename, link, themeSuffix }) => {
   const card = themeSuffix.split('?')[0];
 
   const downloadPNG = () => {
@@ -29,7 +29,7 @@ const DisplayStage = ({ filename, themeSuffix }) => {
 
   const copyMarkdown = () => {
     navigator.clipboard.writeText(
-      `[![GitHub Stats](https://${HOST}/api${themeSuffix})](https://${HOST}/api${themeSuffix})`,
+      `[![GitHub Stats](https://${HOST}/api${themeSuffix})](${link})`,
     );
     toast.info('Copied to Clipboard!', {
       position: 'bottom-right',
@@ -97,6 +97,7 @@ const DisplayStage = ({ filename, themeSuffix }) => {
 
 DisplayStage.propTypes = {
   filename: PropTypes.string.isRequired,
+  link: PropTypes.string.isRequired,
   themeSuffix: PropTypes.string.isRequired,
 };