mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

use hash router

Browse Source
pull/4466/head
drafish 10 months ago committed by yann300
parent b7f7e1993a
commit e4543a88fb
4 changed files with 75 additions and 105 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 40
      apps/learneth/src/App.tsx
  2. 3
      apps/learneth/src/components/BackButton/index.tsx
  3. 98
      apps/learneth/src/pages/StepDetail/index.tsx
  4. 33
      apps/learneth/src/pages/StepList/index.tsx

40
apps/learneth/src/App.tsx
Unescape View File

@ -1,15 +1,15 @@
import React from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { ToastContainer } from 'react-toastify';
import LoadingScreen from './components/LoadingScreen';
import LogoPage from './pages/Logo';
import HomePage from './pages/Home';
import StepListPage from './pages/StepList';
import StepDetailPage from './pages/StepDetail';
import 'react-toastify/dist/ReactToastify.css';
import './App.css';
import React from 'react'
import {createHashRouter, RouterProvider} from 'react-router-dom'
import {ToastContainer} from 'react-toastify'
import LoadingScreen from './components/LoadingScreen'
import LogoPage from './pages/Logo'
import HomePage from './pages/Home'
import StepListPage from './pages/StepList'
import StepDetailPage from './pages/StepDetail'
import 'react-toastify/dist/ReactToastify.css'
import './App.css'
export const router = createBrowserRouter([
export const router = createHashRouter([
{
path: '/',
element: <LogoPage />,
@ -26,26 +26,16 @@ export const router = createBrowserRouter([
path: '/detail',
element: <StepDetailPage />,
},
]);
])
function App(): JSX.Element {
return (
<>
<RouterProvider router={router} />
<LoadingScreen />
<ToastContainer
position="bottom-right"
newestOnTop
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
autoClose={false}
theme="colored"
/>
<ToastContainer position="bottom-right" newestOnTop closeOnClick rtl={false} pauseOnFocusLoss draggable pauseOnHover autoClose={false} theme="colored" />
</>
);
)
}
export default App;
export default App

3
apps/learneth/src/components/BackButton/index.tsx
Unescape View File

@ -1,5 +1,5 @@
import React, {useState} from 'react'
import {Link, useNavigate} from 'react-router-dom'
import {Link, useLocation, useNavigate} from 'react-router-dom'
import {Button, Modal, Tooltip, OverlayTrigger} from 'react-bootstrap'
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import {faHome, faBars, faChevronLeft, faChevronRight} from '@fortawesome/free-solid-svg-icons'
@ -8,6 +8,7 @@ import './index.scss'
function BackButton({entity}: any) {
const navigate = useNavigate()
const location = useLocation()
const [show, setShow] = useState(false)
// const theme = useAppSelector((state) => state.remixide.theme)
const isDetailPage = location.pathname === '/detail'

98
apps/learneth/src/pages/StepDetail/index.tsx
Unescape View File

@ -1,43 +1,44 @@
import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import Markdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import BackButton from '../../components/BackButton';
import { useAppSelector, useAppDispatch } from '../../redux/hooks';
import './index.scss';
import React, {useEffect} from 'react'
import {useLocation, useNavigate} from 'react-router-dom'
import Markdown from 'react-markdown'
import rehypeRaw from 'rehype-raw'
import BackButton from '../../components/BackButton'
import {useAppSelector, useAppDispatch} from '../../redux/hooks'
import './index.scss'
function StepDetailPage() {
const navigate = useNavigate();
const dispatch = useAppDispatch();
const queryParams = new URLSearchParams(location.search);
const id = queryParams.get('id') as string;
const stepId = Number(queryParams.get('stepId'));
const navigate = useNavigate()
const location = useLocation()
const dispatch = useAppDispatch()
const queryParams = new URLSearchParams(location.search)
const id = queryParams.get('id') as string
const stepId = Number(queryParams.get('stepId'))
const {
workshop: {detail, selectedId},
remixide: {errorLoadingFile, errors, success},
} = useAppSelector((state: any) => state);
const entity = detail[selectedId].entities[id];
const steps = entity.steps;
const step = steps[stepId];
console.log(step);
} = useAppSelector((state: any) => state)
const entity = detail[selectedId].entities[id]
const steps = entity.steps
const step = steps[stepId]
console.log(step)
useEffect(() => {
dispatch({
type: 'remixide/displayFile',
payload: step,
});
})
dispatch({
type: 'remixide/save',
payload: {errors: [], success: false},
});
window.scrollTo(0, 0);
}, [step]);
})
window.scrollTo(0, 0)
}, [step])
useEffect(() => {
if (errors.length > 0 || success) {
window.scrollTo(0, document.documentElement.scrollHeight);
window.scrollTo(0, document.documentElement.scrollHeight)
}
}, [errors, success]);
}, [errors, success])
return (
<>
@ -57,7 +58,7 @@ function StepDetailPage() {
dispatch({
type: 'remixide/displayFile',
payload: step,
});
})
}}
>
Load the file
@ -71,9 +72,7 @@ function StepDetailPage() {
</>
)}
<div className="container-fluid">
<Markdown rehypePlugins={[rehypeRaw]}>
{step.markdown?.content}
</Markdown>
<Markdown rehypePlugins={[rehypeRaw]}>{step.markdown?.content}</Markdown>
</div>
{step.test?.content ? (
<>
@ -85,7 +84,7 @@ function StepDetailPage() {
dispatch({
type: 'remixide/displayFile',
payload: step,
});
})
}}
>
Load the file
@ -100,7 +99,7 @@ function StepDetailPage() {
dispatch({
type: 'remixide/testStep',
payload: step,
});
})
}}
>
Check Answer
@ -112,7 +111,7 @@ function StepDetailPage() {
dispatch({
type: 'remixide/showAnswer',
payload: step,
});
})
}}
>
Show answer
@ -126,11 +125,7 @@ function StepDetailPage() {
<button
className="nav-item rounded-0 nav-link btn btn-success test"
onClick={() => {
navigate(
stepId === steps.length - 1
? `/list?id=${id}`
: `/detail?id=${id}&stepId=${stepId + 1}`,
);
navigate(stepId === steps.length - 1 ? `/list?id=${id}` : `/detail?id=${id}&stepId=${stepId + 1}`)
}}
>
Next
@ -142,7 +137,7 @@ function StepDetailPage() {
dispatch({
type: 'remixide/showAnswer',
payload: step,
});
})
}}
>
Show answer
@ -159,11 +154,7 @@ function StepDetailPage() {
<button
className="w-100 rounded-0 nav-item nav-link btn btn-success"
onClick={() => {
navigate(
stepId === steps.length - 1
? `/list?id=${id}`
: `/detail?id=${id}&stepId=${stepId + 1}`,
);
navigate(stepId === steps.length - 1 ? `/list?id=${id}` : `/detail?id=${id}&stepId=${stepId + 1}`)
}}
>
Next
@ -171,28 +162,19 @@ function StepDetailPage() {
)}
<div id="errors">
{success && (
<div
className="alert rounded-0 alert-success mb-0 mt-0"
role="alert"
>
<div className="alert rounded-0 alert-success mb-0 mt-0" role="alert">
Well done! No errors.
</div>
)}
{errors.length > 0 && (
<>
{!success && (
<div
className="alert rounded-0 alert-danger mb-0 mt-0"
role="alert"
>
<div className="alert rounded-0 alert-danger mb-0 mt-0" role="alert">
Errors
</div>
)}
{errors.map((error: string, index: number) => (
<div
key={index}
className="alert rounded-0 alert-warning mb-0 mt-0"
>
<div key={index} className="alert rounded-0 alert-warning mb-0 mt-0">
{error}
</div>
))}
@ -210,7 +192,7 @@ function StepDetailPage() {
dispatch({
type: 'remixide/showAnswer',
payload: step,
});
})
}}
>
Show answer
@ -221,7 +203,7 @@ function StepDetailPage() {
<button
className="w-100 btn btn-success"
onClick={() => {
navigate(`/detail?id=${id}&stepId=${stepId + 1}`);
navigate(`/detail?id=${id}&stepId=${stepId + 1}`)
}}
>
Next
@ -231,7 +213,7 @@ function StepDetailPage() {
<button
className="w-100 btn btn-success"
onClick={() => {
navigate(`/list?id=${id}`);
navigate(`/list?id=${id}`)
}}
>
Finish tutorial
@ -240,7 +222,7 @@ function StepDetailPage() {
</>
)}
</>
);
)
}
export default StepDetailPage;
export default StepDetailPage

33
apps/learneth/src/pages/StepList/index.tsx
Unescape View File

@ -1,16 +1,17 @@
import React from 'react';
import { Link } from 'react-router-dom';
import Markdown from 'react-markdown';
import BackButton from '../../components/BackButton';
import SlideIn from '../../components/SlideIn';
import { useAppSelector } from '../../redux/hooks';
import './index.scss';
import React from 'react'
import {Link, useLocation} from 'react-router-dom'
import Markdown from 'react-markdown'
import BackButton from '../../components/BackButton'
import SlideIn from '../../components/SlideIn'
import {useAppSelector} from '../../redux/hooks'
import './index.scss'
function StepListPage(): JSX.Element {
const queryParams = new URLSearchParams(location.search);
const id = queryParams.get('id') as string;
const { detail, selectedId } = useAppSelector((state) => state.workshop);
const entity = detail[selectedId].entities[id];
const location = useLocation()
const queryParams = new URLSearchParams(location.search)
const id = queryParams.get('id') as string
const {detail, selectedId} = useAppSelector((state) => state.workshop)
const entity = detail[selectedId].entities[id]
return (
<>
@ -27,18 +28,14 @@ function StepListPage(): JSX.Element {
<SlideIn>
<article className="list-group m-3">
{entity.steps.map((step: any, i: number) => (
<Link
key={i}
to={`/detail?id=${id}&stepId=${i}`}
className="rounded-0 btn btn-light border-bottom text-left steplink"
>
<Link key={i} to={`/detail?id=${id}&stepId=${i}`} className="rounded-0 btn btn-light border-bottom text-left steplink">
{step.name} »
</Link>
))}
</article>
</SlideIn>
</>
);
)
}
export default StepListPage;
export default StepListPage

Write Preview
Loading…
Cancel
Save