Merge pull request #21 from gary-Shen/fix/gist

update: optimize ux

src/components/Input.tsx

@@ -27,6 +27,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(function InnerInput
 const InputGroupWrapper = styled.div`
   & > * {
     white-space: nowrap;
+    align-self: stretch;
   }
 
   &:not(.nospace) > * + * {

src/hooks/useGistQuery.ts

@@ -1,10 +1,19 @@
 import { useQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
+import toast from 'react-hot-toast';
 
-import { fetchAll, fetchOne } from '@/service/gist';
+import { destroyOctokit, fetchAll, fetchOne } from '@/service/gist';
 import { gistKeys } from '@/constant/queryKeys/gist';
 import queryClient from '@/components/QueryProvider';
 
+const errHandler = (err: any) => {
+  if (err.status === 401) {
+    toast.dismiss();
+    toast.error('Unauthorized! Please check your access token.');
+    destroyOctokit();
+  }
+};
+
 export const useGistAll = (accessToken: string) => {
   useEffect(() => {
     if (!accessToken) {
@@ -17,7 +26,8 @@ export const useGistAll = (accessToken: string) => {
     placeholderData: {} as any,
     enabled: !!accessToken,
     select: (data) => data?.data,
-    onError() {
+    onError: (err) => {
+      errHandler(err);
       queryClient.setQueryData(gistKeys.lists(), []);
     },
   });
@@ -30,6 +40,7 @@ export const useGistOne = (gistId: string | undefined, options?: any) => {
     enabled: !!gistId,
     placeholderData: {} as any,
     select: (data) => data?.data,
+    onError: errHandler,
     ...options,
   });
 

src/hooks/useSettings.ts

@@ -10,7 +10,7 @@ import _ from 'lodash';
 import type { Block, Link, Setting } from '@/types/setting.type';
 import { gid } from '@/utils/gid';
 import parseGistContent from '@/utils/parseGistContent';
-import { setOctokit } from '@/service/gist';
+import { destroyOctokit, setOctokit } from '@/service/gist';
 import { calcLayout } from '@/utils/calcLayout';
 
 import { load, save } from './settings';
@@ -66,6 +66,7 @@ export default function useSettings(): [
   const mutation = useGistUpdate(settings?.gist?.id);
   useEffect(() => {
     if (!accessToken) {
+      destroyOctokit();
       return;
     }
 

src/locales/en-US.json

@@ -49,5 +49,6 @@
   "sync failed": "Synchronization failed",
   "syncing": "Synchronizing...",
   "built in color": "Built-in color",
-  "custom color": "Custom color"
+  "custom color": "Custom color",
+  "proceed": "Proceed"
 }

src/locales/zh-CN.json

@@ -50,5 +50,6 @@
   "sync failed": "同步失败",
   "syncing": "同步中...",
   "built in color": "内置颜色",
-  "custom color": "自定义颜色"
+  "custom color": "自定义颜色",
+  "proceed": "拉取 Gist"
 }

src/locales/zh-TR.json

@@ -50,5 +50,6 @@
   "sync failed": "同步失敗",
   "syncing": "同步中...",
   "built in color": "內建顏色",
-  "custom color": "自訂顏色"
+  "custom color": "自訂顏色",
+  "proceed": "繼續"
 }

src/partials/Setting/OAuth/index.tsx

@@ -13,7 +13,7 @@ import type { IGist } from '@/types/gist.type';
 import { gid } from '@/utils/gid';
 import parseGistContent from '@/utils/parseGistContent';
 import { useGistAll, useGistOne } from '@/hooks/useGistQuery';
-import Input from '@/components/Input';
+import Input, { InputGroup } from '@/components/Input';
 import TextArea from '@/components/TextArea';
 import Spin from '@/components/Spin';
 import IconText from '@/components/IconText';
@@ -335,20 +335,24 @@ export default function OAuth({ onClose }: OAuthProps) {
 
   return (
     <StyledOauth className="oauth-modal-content">
-      <Input
-        className="mb-2"
-        placeholder={t('pasteToken')}
-        autoFocus
-        onBlur={handleSave}
-        onKeyDown={(e) => {
-          if (e.which === 13) {
-            e.preventDefault();
-            handleSave();
-          }
-        }}
-        onChange={handleOnChange}
-        value={tokenValue}
-      />
+      <InputGroup className="mb-2">
+        <Input
+          placeholder={t('pasteToken')}
+          autoFocus
+          onBlur={handleSave}
+          onKeyDown={(e) => {
+            if (e.which === 13) {
+              e.preventDefault();
+              handleSave();
+            }
+          }}
+          onChange={handleOnChange}
+          value={tokenValue}
+        />
+        <Button className="!px-4" disabled={!tokenValue} onClick={handleSave}>
+          {t('proceed')}
+        </Button>
+      </InputGroup>
       <div className="flex justify-end mb-4">
         <IconText
           position="right"

src/partials/Setting/index.tsx

@@ -104,7 +104,7 @@ export default function SettingModal({ visible, onClose }: OAuthProps) {
   }, [handleClose, handleLangChange, handleThemeSolutionChange, settings, t]);
 
   return (
-    <Modal title={t('setting')} visible={visible} onClose={handleClose} width={442}>
+    <Modal title={t('setting')} visible={visible} onClose={handleClose} width={512}>
       <MyTabs items={tabItems} />
     </Modal>
   );