feat: add share button

Author: ZLY201

config/i18n.json

@@ -58,5 +58,21 @@
   "no_question": {
     "en": "No Result",
     "zh-CN": "暂无数据"
+  },
+  "compilation_error": {
+    "en": "Compilation Error",
+    "zh-CN": "编译失败"
+  },
+  "compilation_success": {
+    "en": "Compilation Successful",
+    "zh-CN": "编译成功"
+  },
+  "compilation_success_info": {
+    "en": "\uD83C\uDF89 Yay! You have finished this challenge.",
+    "zh-CN": "\uD83C\uDF89 恭喜你完成了这个挑战！"
+  },
+  "share_solution": {
+    "en": "Share your Solution",
+    "zh-CN": "分享你的解答"
   }
 }

src/modules/Question/Solution.tsx

@@ -28,7 +28,7 @@ const Solution = function () {
 
   return (
     <div className={styles['solution-container']}>
-      <Skeleton loading={loading} style={{ marginTop: 20 }}>
+      <Skeleton loading={loading} style={{ marginTop: 20 }} animation={true}>
         <Markdown content={solution} theme={theme} />
       </Skeleton>
     </div>

src/modules/Results/index.module.less

@@ -31,6 +31,9 @@
       border-radius: 8px;
       font-size: 16px;
     }
+    .result-accept-btns {
+      margin-top: 24px;
+    }
   }
   .result-accept {
     .result-accept-title {

src/modules/Results/index.tsx

@@ -1,12 +1,14 @@
 import type { editor } from 'monaco-editor';
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { Skeleton } from '@arco-design/web-react';
+import { Button, Skeleton } from '@arco-design/web-react';
 import localCache, { QUESTION_STATUS } from '@src/utils/local-cache';
 import emitter from '@src/utils/emit';
 import Context from '@src/utils/context';
 import { monacoEditorLoaded, monacoInstance } from '@src/utils/monaco';
 import { QuestionFiles } from '@src/utils/type-challenges';
 import SubmitStatus from '@src/components/SubmitStatus';
+import i18n from '@config/i18n.json';
+import { Setting } from '@src/utils/setting';
 import styles from './index.module.less';
 
 function formatErrorFromMarkers(markers: editor.IMarker[]) {
@@ -17,12 +19,12 @@ function formatErrorFromMarkers(markers: editor.IMarker[]) {
   });
 }
 
-function createResultError(status: string[]) {
+function createResultError(status: string[], language: Setting['language']) {
   return (
     <div className={styles['result-errors']}>
       <div className={styles['result-error-title']}>
         <SubmitStatus status={QUESTION_STATUS.unAccepted} />
-        <span style={{ marginLeft: 8 }}>Compilation Error</span>
+        <span style={{ marginLeft: 8 }}>{i18n['compilation_error'][language]}</span>
       </div>
       <div className={styles['result-error-info']}>
         {status.map(function (error) {
@@ -38,29 +40,45 @@ function createResultError(status: string[]) {
 }
 
 const Results = function () {
-  const [{ currentQuestion }] = useContext(Context);
+  const [{ currentQuestion, setting: { language } }] = useContext(Context);
   const [loading, setLoading] = useState(true);
   const [status, setStatus] = useState<string[]>([]);
 
+  const shareSolutionHref = useMemo(function () {
+    const questionNum = currentQuestion.match(/[0-9]+(?=-)/)?.[0];
+    return `https://tsch.js.org/${Number(questionNum)}/answer/${language === 'en' ? '' : language}`;
+  }, [currentQuestion, language]);
+
   const resultContent = useMemo(
     function () {
       if (status.length === 0) {
         return (
           <div className={styles['result-accept']}>
             <div className={styles['result-accept-title']}>
               <SubmitStatus status={QUESTION_STATUS.accepted} />
-              <span style={{ marginLeft: 8 }}>Compilation Successful</span>
+              <span style={{ marginLeft: 8 }}>{i18n['compilation_success'][language]}</span>
             </div>
             <div className={styles['result-accept-info']}>
-              🎉 Yay! You have finished this challenge.
+              {i18n['compilation_success_info'][language]}
+            </div>
+            <div className={styles['result-accept-btns']}>
+              <Button
+                type={'primary'}
+                status={'success'}
+                target={'_blank'}
+                href={shareSolutionHref}
+                style={{ borderRadius: 4 }}
+              >
+                {i18n['share_solution'][language]}
+              </Button>
             </div>
           </div>
         );
       } else {
-        return createResultError(status);
+        return createResultError(status, language);
       }
     },
-    [status],
+    [status, language],
   );
 
   const validate = useCallback(

src/utils/type-challenges.ts

@@ -131,32 +131,39 @@ class TypeChallenges {
     }
     return this.info || {};
   }
-  async getSolution(cnt: number = 0): Promise<string> {
+  async getSolution(cnt: number = 3): Promise<string> {
     if (this.solution) {
       return this.solution;
     }
-    if (cnt === 3) {
+    if (cnt === 0) {
       return 'Get solution failed!';
     }
-    cnt += 1;
     const id = this.id;
     const index = id.match(/[0-9]+(?=-)/)?.[0];
     if (!index) {
       return 'Get solution failed!';
     }
+    const controller = new AbortController();
     const res = await fetch(
       // eslint-disable-next-line max-len
       'https://api.github.com/repos/type-challenges/type-challenges/issues?&sort=reactions-+1-desc&per_page=1&labels=answer,' +
-        String(Number(index)),
+        String(Number(index)),{
+        headers: {
+          Accept: 'application/vnd.github+json',
+          'X-GitHub-Api-Version': '2022-11-28'
+        },
+        signal: controller.signal,
+      }
     );
+    setTimeout(() => controller.abort(), 5000);
     try {
       const solutions = await res.json();
       const solution = solutions?.[0];
       const { body, html_url } = solution;
       this.solution = `<a href='${html_url}' target='_blank'>${html_url}</a>\n${body}`;
       return this.solution;
     } catch {
-      return await this.getSolution(cnt);
+      return await this.getSolution(cnt - 1);
     }
   }
 }