fix: login

Pleasurecruise · Jan 14, 2025 · 8dcaeb0 · 8dcaeb0
1 parent 40fd99a
commit 8dcaeb0
Show file tree

Hide file tree

Showing 13 changed files with 80 additions and 56 deletions.
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -1,6 +1,6 @@
-import { ThemeProvider } from "@/components/layout/theme-provider.tsx";
 import { HelmetProvider } from "react-helmet-async";
-import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
+import {BrowserRouter as Router, Routes, Route, Navigate} from 'react-router-dom';
+import { ThemeProvider } from "@/components/layout/theme-provider.tsx";
 import Index from "@/page";
 import ErrorPage from "@/page/500";
 import Dashboard from "@/page/dashboard";
@@ -9,17 +9,26 @@ import MailBox from "@/page/mailbox";
 import Login from "@/page/login/index";
 import Monitor from "@/page/monitor";
 import Repository from "@/page/repository";
-import Project from "@/page/repository/Project";
+import Project from "@/page/repository/project.tsx";
 import Star from "@/page/dashboard/star/index.tsx";
 import ToMe from "@/page/interaction/uni-type-tome.tsx";
 import I from "@/page/interaction/uni-type-i.tsx";
 import OAuth2RedirectHandler from "@/utils/oauthredirecthandler";
-// import {BrowserRouter as Router, Routes, Route, Navigate} from 'react-router-dom';
-// import { useAuthStore } from '@/store/tokenStore';
+
+import { useAuthStore } from '@/store/tokenStore';
+import { useEffect, useState } from 'react';
 
 function App() {
-    // const isAuthenticated = useAuthStore(state => !!state.token);
+    const isAuthenticated = useAuthStore(state => !!state.token);
+    const [authChecked, setAuthChecked] = useState(false);
 
+    useEffect(() => {
+        setAuthChecked(true);
+    }, [isAuthenticated]);
+
+    if (!authChecked) {
+        return null;
+    }
     return (
         <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
             <HelmetProvider>
@@ -29,25 +38,15 @@ function App() {
                             <Route path="/login" element={<Login />} />
                             <Route path="/oauth2/redirect" element={<OAuth2RedirectHandler />} />
                             <Route path="/500" element={<ErrorPage />} />
-                            {/*<Route path="/" element={isAuthenticated ? <Dashboard /> : <Navigate to="/login" />} />*/}
-                            {/*<Route path="/account" element={isAuthenticated ? <Account /> : <Navigate to="/login" />} />*/}
-                            {/*<Route path="/mail" element={isAuthenticated ? <MailBox /> : <Navigate to="/login" />} />*/}
-                            {/*<Route path="/monitor" element={isAuthenticated ? <Monitor /> : <Navigate to="/login" />} />*/}
-                            {/*<Route path="/repository" element={isAuthenticated ? <Repository /> : <Navigate to="/login" />} />*/}
-                            {/*<Route path="/star" element={isAuthenticated ? <Star /> : <Navigate to="/login" />} />*/}
-                            {/*<Route path="/project" element={isAuthenticated ? <Project /> : <Navigate to="/login" />} />*/}
-                            {/*<Route path="/me" element={isAuthenticated ? <ToMe /> : <Navigate to="/login" />} />*/}
-                            {/*<Route path="/my" element={isAuthenticated ? <I /> : <Navigate to="/login" />} />*/}
-
-                            <Route path="/" element={<Dashboard />} />
-                            <Route path="/account" element={<Account />} />
-                            <Route path="/mail" element={<MailBox />} />
-                            <Route path="/monitor" element={<Monitor />} />
-                            <Route path="/repository" element={<Repository />} />
-                            <Route path="/star" element={<Star />} />
-                            <Route path="/project" element={<Project />} />
-                            <Route path="/me" element={<ToMe />} />
-                            <Route path="/my" element={<I />} />
+                            <Route path="/" element={isAuthenticated ? <Dashboard /> : <Navigate to="/login" />} />
+                            <Route path="/account" element={isAuthenticated ? <Account /> : <Navigate to="/login" />} />
+                            <Route path="/mail" element={isAuthenticated ? <MailBox /> : <Navigate to="/login" />} />
+                            <Route path="/monitor" element={isAuthenticated ? <Monitor /> : <Navigate to="/login" />} />
+                            <Route path="/repository" element={isAuthenticated ? <Repository /> : <Navigate to="/login" />} />
+                            <Route path="/star" element={isAuthenticated ? <Star /> : <Navigate to="/login" />} />
+                            <Route path="/project" element={isAuthenticated ? <Project /> : <Navigate to="/login" />} />
+                            <Route path="/me" element={isAuthenticated ? <ToMe /> : <Navigate to="/login" />} />
+                            <Route path="/my" element={isAuthenticated ? <I /> : <Navigate to="/login" />} />
                             {/* 可以添加更多路由 */}
                         </Routes>
                     </Index>

diff --git a/web/src/components/layout/nav-user.tsx b/web/src/components/layout/nav-user.tsx
@@ -134,7 +134,7 @@ export function NavUser({
                     <DialogHeader>
                         <DialogTitle><Headset className={'text-sky-500 inline mr-2 mb-1'}/>技术支持</DialogTitle>
                         <DialogDescription>
-                            发送问题邮件至[email protected],备注Git Star Center
+                            发送问题邮件至[email protected], 备注Git Star Center
                         </DialogDescription>
                     </DialogHeader>
                 </DialogContent>

diff --git a/web/src/components/layout/theme-provider.tsx b/web/src/components/layout/theme-provider.tsx
@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect, useState } from "react"
+import React, {createContext, useContext, useEffect, useState} from "react"
 
 type Theme = "dark" | "light" | "system"
 
@@ -63,6 +63,7 @@ export function ThemeProvider({
     )
 }
 
+// eslint-disable-next-line react-refresh/only-export-components
 export const useTheme = () => {
     const context = useContext(ThemeProviderContext)
 

diff --git a/web/src/main.tsx b/web/src/main.tsx
@@ -1,7 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+import App from '@/App.tsx'
+import '@/index.css'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

diff --git a/web/src/page/dashboard/index.tsx b/web/src/page/dashboard/index.tsx
@@ -18,8 +18,8 @@ import { Separator } from "@/components/ui/separator";
 import { NavActions } from "@/components/layout/nav-actions.tsx";
 import { Welcome } from "@/page/dashboard/welcome/Welcome.tsx";
 import { MagicCard } from "@/components/ui/magic-card";
-import Autoplay from "embla-carousel-autoplay";
 import { useTheme } from "@/components/layout/theme-provider";
+import Autoplay from "embla-carousel-autoplay";
 
 const imageData = [
     {

diff --git a/web/src/page/dashboard/star/index.tsx b/web/src/page/dashboard/star/index.tsx
@@ -138,7 +138,7 @@ const StarComponent = () => {
                                                 starCount={repo.starCount}
                                                 forkCount={repo.forkCount}
                                                 watchCount={repo.watchCount}
-                                                followerCount={repo.followerCount} // 修改为 followerCount
+                                                followerCount={repo.followerCount}
                                             />
                                         </div>
                                     ))}
@@ -167,7 +167,7 @@ const StarComponent = () => {
                                                 starCount={repo.starCount}
                                                 forkCount={repo.forkCount}
                                                 watchCount={repo.watchCount}
-                                                followerCount={repo.followerCount} // 修改为 followerCount
+                                                followerCount={repo.followerCount}
                                             />
                                         </div>
                                     ))}
@@ -196,7 +196,7 @@ const StarComponent = () => {
                                                 starCount={repo.starCount}
                                                 forkCount={repo.forkCount}
                                                 watchCount={repo.watchCount}
-                                                followerCount={repo.followerCount} // 修改为 followerCount
+                                                followerCount={repo.followerCount}
                                             />
                                         </div>
                                     ))}

diff --git a/web/src/page/index.tsx b/web/src/page/index.tsx
@@ -5,7 +5,7 @@
  * Project: xryder
  * Description: This is a rapid development template for middle and backend UI based on vite, react, tailwindcss and shadcn.
  */
-
+import React from "react";
 import {SidebarInset, SidebarProvider} from "@/components/ui/sidebar"
 import { AppSidebar } from "@/components/layout/app-sidebar.tsx"
 import { useLocation } from 'react-router-dom';

diff --git a/web/src/page/repository/index.tsx b/web/src/page/repository/index.tsx
@@ -26,7 +26,7 @@ const Repository = () => {
     const { readmeContent, readmeError, fetchReadme } = useReadmeStore();
 
     useEffect(() => {
-        fetchReadme(account.repoAuth, account.repoName);
+        fetchReadme({ repoAuth:account.repoAuth, repoName:account.repoName});
     }, [account.repoAuth, account.repoName, fetchReadme]);
 
     return (

diff --git a/web/src/page/repository/Project.tsx → web/src/page/repository/project.tsx b/web/src/page/repository/Project.tsx → web/src/page/repository/project.tsx
@@ -25,14 +25,15 @@ import SubscribeButtons from "@/page/repository/animated-subscribe-buttons.tsx";
 const Project = () => {
     const { targetAccount } = useAccountStore();
     const { readmeContent, fetchReadme } = useReadmeStore();
-    const { interaction, getInteraction } = useInteractionStore();
+    const { interaction, syncData, getInteraction } = useInteractionStore();
 
     useEffect(() => {
         if (targetAccount.repoAuth && targetAccount.repoName) {
-            fetchReadme(targetAccount.repoAuth, targetAccount.repoName);
+            syncData({ repoAuth: targetAccount.repoAuth, repoName: targetAccount.repoName});
+            fetchReadme({ repoAuth: targetAccount.repoAuth, repoName: targetAccount.repoName});
             getInteraction({ repoAuth: targetAccount.repoAuth, repoName: targetAccount.repoName });
         }
-    }, [targetAccount.repoAuth, targetAccount.repoName, fetchReadme, getInteraction]);
+    }, [targetAccount.repoAuth, targetAccount.repoName, syncData, fetchReadme, getInteraction]);
 
     return (
         <div>

diff --git a/web/src/store/interactionStore.tsx b/web/src/store/interactionStore.tsx
@@ -23,6 +23,7 @@ interface StoreState {
     repoAuth: string;
     repoName: string;
     setInteraction: (interaction: InteractionState) => void;
+    syncData: (params: { repoAuth: string, repoName: string }) => void;
     toggleStar: () => Promise<void>;
     toggleFork: () => Promise<void>;
     toggleWatch: () => Promise<void>;
@@ -47,6 +48,24 @@ export const useInteractionStore = create<StoreState>()(
             repoAuth: "",
             repoName: "",
             setInteraction: (interaction) => set({ interaction }),
+            syncData: async (params) => {
+                try {
+                    await api.post('/repositories/sync', null,{
+                        params: {
+                            repoAuth: params.repoAuth,
+                            repoName: params.repoName,
+                        },
+
+                    });
+                } catch (error) {
+                    console.error("Error syncing interaction data:", error);
+                    if (error instanceof AxiosError) {
+                        set({ error: error.response?.data?.msg || error.message });
+                    } else if (error instanceof Error) {
+                        set({ error: error.message });
+                    }
+                }
+            },
             getInteraction: async (params) => {
                 set({ isLoading: true, error: null });
                 try {

diff --git a/web/src/store/readmeStore.tsx b/web/src/store/readmeStore.tsx
@@ -5,16 +5,16 @@ import { marked } from "marked";
 interface ReadmeState {
     readmeContent: string;
     readmeError: boolean;
-    fetchReadme: (repoAuth: string, repoName: string) => Promise<void>;
+    fetchReadme: (params: { repoAuth: string, repoName: string }) => Promise<void>;
 }
 
 export const useReadmeStore = create<ReadmeState>()(
     persist(
         (set) => ({
             readmeContent: "",
             readmeError: false,
-            fetchReadme: async (repoAuth, repoName) => {
-                const apiUrl = `https://api.github.com/repos/${repoAuth}/${repoName}/readme`;
+            fetchReadme: async (params) => {
+                const apiUrl = `https://api.github.com/repos/${params.repoAuth}/${params.repoName}/readme`;
                 try {
                     const response = await fetch(apiUrl);
                     if (!response.ok) {
@@ -23,7 +23,13 @@ export const useReadmeStore = create<ReadmeState>()(
                     const data = await response.json();
                     const content = atob(data.content);
                     const decodedContent = new TextDecoder("utf-8").decode(new Uint8Array([...content].map(char => char.charCodeAt(0))));
-                    const htmlContent = marked(decodedContent);
+                    const updatedContent = decodedContent.replace(/!\[([^\]]*)]\(([^)]+)\)/g, (match, alt, path) => {
+                        if (!path.startsWith('http')) {
+                            return `![${alt}](https://raw.githubusercontent.com/${params.repoAuth}/${params.repoName}/main/${path})`;
+                        }
+                        return match;
+                    });
+                    const htmlContent = marked(updatedContent);
                     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                     // @ts-expect-error
                     set({ readmeContent: htmlContent, readmeError: false });

diff --git a/web/src/utils/env.ts b/web/src/utils/env.ts
@@ -1,8 +1,8 @@
-// // local dev
-// export const API_BASE_URL = 'http://localhost:8080';
-// export const OAUTH2_REDIRECT_URI = 'http://localhost:5173/oauth2/redirect'
-// export const GITHUB_AUTH_URL = API_BASE_URL + '/oauth2/authorize/github?redirect_uri=' + OAUTH2_REDIRECT_URI;
-// production dev
-export const API_BASE_URL = 'https://backend.gitstar.center';
-export const OAUTH2_REDIRECT_URI = 'https://gitstar.center/oauth2/redirect'
+// local dev
+export const API_BASE_URL = 'http://localhost:8080';
+export const OAUTH2_REDIRECT_URI = 'http://localhost:5173/oauth2/redirect'
 export const GITHUB_AUTH_URL = API_BASE_URL + '/oauth2/authorize/github?redirect_uri=' + OAUTH2_REDIRECT_URI;
+// // production dev
+// export const API_BASE_URL = 'https://backend.gitstar.center';
+// export const OAUTH2_REDIRECT_URI = 'https://gitstar.center/oauth2/redirect'
+// export const GITHUB_AUTH_URL = API_BASE_URL + '/oauth2/authorize/github?redirect_uri=' + OAUTH2_REDIRECT_URI;
diff --git a/web/src/utils/oauthredirecthandler.tsx b/web/src/utils/oauthredirecthandler.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useAuthStore } from '@/store/tokenStore';
-// import { useUserInfo, useMailList } from "@/api/user";
 
 const OAuth2RedirectHandler: React.FC = () => {
     const navigate = useNavigate();
@@ -10,22 +9,21 @@ const OAuth2RedirectHandler: React.FC = () => {
 
     // 从URL中获取参数
     const getUrlParameter = (name: string): string => {
-        name = name.replace(/\[/, '\\[').replace(/[\]]/, '\\]');
+        name = name.replace(/\[/, '\\[').replace(/]/, '\\]');
         const regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
         const results = regex.exec(location.search);
         return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
     };
 
     useEffect(() => {
         const token = getUrlParameter('token');
-        const error = getUrlParameter('error');
         console.log('token:', token);
-        if (token) {
+        try {
             setToken(token);
-            navigate('/', { replace: true, state: { from: 'oauth2' } });
-        } else {
+            navigate('/', { replace: true });
+        } catch (error) {
             console.log('error:', error);
-            navigate('/login', { state: { error } });
+            navigate('/login', { state: { showErrorModal: true, error } });
         }
     }, [location, navigate, setToken]);