hzhang/HangmanLab.Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix render issue

Browse Source
This commit is contained in:
h z
2024-12-03 16:36:32 +00:00
parent 22da3bc90d
commit 18a84123d3
8 changed files with 38 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
public/index.html
View File

@@ -3,9 +3,10 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Project</title> <title>React x Project</title>
</head> </head>
<body> <body>
<h2>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</h2>
<div id="root"></div> <div id="root"></div>
</body> </body>
</html> </html>

22
src/App.js
View File

@@ -1,7 +1,27 @@
import React from "react"; import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import MainNavigation from "./components/MainNavigation";
import SideNavigation from "./components/SideNavigation";
import MarkdownContent from "./components/MarkdownContent";
import "./App.css";
const App = () => { const App = () => {
return <h1>Welcome to My React Project</h1>; return (
<Router>
<div className="app-container">
<MainNavigation />
<div className="content-container">
<SideNavigation />
<main className="main-content">
<Routes>
<Route path="/" element={<h1>Welcome to My React Project</h1>} />
<Route path="/markdown/:id" element={<MarkdownContent />} />
</Routes>
</main>
</div>
</div>
</Router>
);
}; };
export default App; export default App;

6
src/AuthProvider.js
View File

@@ -3,7 +3,11 @@ import { UserManager } from "oidc-client-ts";
import {oidcConfig} from "./oicdConfig"; import {oidcConfig} from "./oicdConfig";
export const AuthContext = createContext(); export const AuthContext = createContext({
user: null,
login: () => {},
logout: () => {},
});
const AuthProvider = ({ children }) => { const AuthProvider = ({ children }) => {
const [user, setUser] = useState(null); const [user, setUser] = useState(null);

2
src/components/MainNavigation.js
View File

@@ -13,7 +13,7 @@ const MainNavigation = () => {
<li> <li>
<Link to="/">Home</Link> <Link to="/">Home</Link>
</li> </li>
{user ? ( { user && user.profile ? (
<div> <div>
<h1>{user.profile.name}</h1> <h1>{user.profile.name}</h1>
<button onClick={logout}>Logout</button> <button onClick={logout}>Logout</button>

2
src/components/MarkdownContent.js
View File

@@ -3,7 +3,7 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import {fetchWithCache} from "../utils/fetchWIthCache"; import {fetchWithCache} from "../utils/fetchWithCache";
const MarkdownContent = () => { const MarkdownContent = () => {
const { id } = useParams(); const { id } = useParams();

6
src/components/SideNavigation.js
View File

@@ -3,14 +3,14 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import "./SideNavigation.css"; import "./SideNavigation.css";
import { fetchWithCache } from "../utils/fetchWithCache"; import {fetchWithCache} from "../utils/fetchWithCache";
const SideNavigation = () => { const SideNavigation = () => {
const [markdowns, setMarkdowns] = useState([]); const [markdowns, setMarkdowns] = useState([]);
const [tree, setTree] = useState(null); const [tree, setTree] = useState(null);
useEffect(() => { useEffect(() => {
fetchWithCache("/api/markdown/") fetchWithCache("http://127.0.0.1:5000/api/markdown/")
.then((data) => { .then((data) => {
setMarkdowns(data); setMarkdowns(data);
setTree(buildTree(data)); setTree(buildTree(data));
@@ -44,7 +44,7 @@ const SideNavigation = () => {
if (value.markdown) { if (value.markdown) {
return ( return (
<li key={value.markdown.id}> <li key={value.markdown.id}>
<Link to={`/markdown/${value.markdown.id}`}> <Link to={`http://127.0.0.1:5000/markdown/${value.markdown.id}`}>
{value.markdown.title} {value.markdown.title}
</Link> </Link>
</li> </li>

7
src/index.js
View File

@@ -1,5 +1,8 @@
import React from "react"; import React from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom/client";
import App from "./App"; import App from "./App";
ReactDOM.render(<App />, document.getElementById("root")); //ReactDOM.render(<App />, document.getElementById("root"));
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

0
src/utils/fetchWIthCache.js → src/utils/fetchWithCache.js
View File