drafish
10 months ago
committed by
yann300
parent
2af97d7f1f
commit
88eeb77272
@ -0,0 +1,58 @@ |
||||
{ |
||||
"name": "learneth", |
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json", |
||||
"sourceRoot": "apps/learneth/src", |
||||
"projectType": "application", |
||||
"implicitDependencies": [], |
||||
"targets": { |
||||
"build": { |
||||
"executor": "@nrwl/webpack:webpack", |
||||
"outputs": ["{options.outputPath}"], |
||||
"defaultConfiguration": "development", |
||||
"options": { |
||||
"compiler": "babel", |
||||
"outputPath": "dist/apps/learneth", |
||||
"index": "apps/learneth/src/index.html", |
||||
"baseHref": "./", |
||||
"main": "apps/learneth/src/main.tsx", |
||||
"polyfills": "apps/learneth/src/polyfills.ts", |
||||
"tsConfig": "apps/learneth/tsconfig.app.json", |
||||
"assets": ["apps/learneth/src/profile.json", "apps/learneth/src/assets/Font_Awesome_5_solid_book-reader.svg"], |
||||
"styles": ["apps/learneth/src/index.css"], |
||||
"scripts": [], |
||||
"webpackConfig": "apps/learneth/webpack.config.js" |
||||
}, |
||||
"configurations": { |
||||
"development": { |
||||
}, |
||||
"production": { |
||||
"fileReplacements": [ |
||||
{ |
||||
"replace": "apps/learneth/src/environments/environment.ts", |
||||
"with": "apps/learneth/src/environments/environment.prod.ts" |
||||
} |
||||
] |
||||
} |
||||
} |
||||
}, |
||||
"serve": { |
||||
"executor": "@nrwl/webpack:dev-server", |
||||
"defaultConfiguration": "development", |
||||
"options": { |
||||
"buildTarget": "learneth:build", |
||||
"hmr": true, |
||||
"baseHref": "/" |
||||
}, |
||||
"configurations": { |
||||
"development": { |
||||
"buildTarget": "learneth:build:development", |
||||
"port": 2023 |
||||
}, |
||||
"production": { |
||||
"buildTarget": "learneth:build:production" |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
"tags": [] |
||||
} |
||||
@ -0,0 +1,19 @@ |
||||
/* You can add global styles to this file, and also import other style files */ |
||||
|
||||
|
||||
h1{ |
||||
font-size: 1.2rem !important; |
||||
font-weight: 700; |
||||
} |
||||
h2{ |
||||
font-size: 1rem !important; |
||||
font-weight: 700; |
||||
} |
||||
h3{ |
||||
font-size: 1rem !important; |
||||
} |
||||
|
||||
p { |
||||
font-size: 0.9rem; |
||||
} |
||||
|
||||
@ -0,0 +1,15 @@ |
||||
import React from 'react'; |
||||
import { Provider } from 'react-redux'; |
||||
import { render, screen } from '@testing-library/react'; |
||||
import App from './App'; |
||||
import { store } from './redux/store'; |
||||
|
||||
test('renders learn react link', () => { |
||||
render( |
||||
<Provider store={store}> |
||||
<App /> |
||||
</Provider>, |
||||
); |
||||
const linkElement = screen.getByText(/learn react/i); |
||||
expect(linkElement).toBeInTheDocument(); |
||||
}); |
||||
@ -0,0 +1,51 @@ |
||||
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'; |
||||
|
||||
export const router = createBrowserRouter([ |
||||
{ |
||||
path: '/', |
||||
element: <LogoPage />, |
||||
}, |
||||
{ |
||||
path: '/home', |
||||
element: <HomePage />, |
||||
}, |
||||
{ |
||||
path: '/list', |
||||
element: <StepListPage />, |
||||
}, |
||||
{ |
||||
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" |
||||
/> |
||||
</> |
||||
); |
||||
} |
||||
|
||||
export default App; |
||||
|
After Width: | Height: | Size: 793 B |
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,55 @@ |
||||
a { |
||||
|
||||
.arrow { |
||||
display: inline-block; |
||||
opacity: 0; |
||||
transform: scale(0.5); |
||||
transition: all 0.3s; |
||||
} |
||||
span { |
||||
display: inline-block; |
||||
padding-left: 5px; |
||||
transform: translateX(-0.875em); // size of icon |
||||
transition: transform 0.3s; |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
.workshoptitle{ |
||||
text-decoration: none; |
||||
} |
||||
|
||||
a:hover { |
||||
fa-icon { |
||||
opacity: 1; |
||||
transform: scale(1); |
||||
} |
||||
span { |
||||
transform: translateX(0); |
||||
} |
||||
} |
||||
|
||||
// .btn-close{ |
||||
// --bs-btn-close-color: #000; |
||||
// --bs-btn-close-bg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E"); |
||||
// --bs-btn-close-opacity: 0.5; |
||||
// --bs-btn-close-hover-opacity: 0.75; |
||||
// --bs-btn-close-focus-shadow: 0 0 0 0.25rem #0d6efd40; |
||||
// --bs-btn-close-focus-opacity: 1; |
||||
// --bs-btn-close-disabled-opacity: 0.25; |
||||
// --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%); |
||||
// background: #0000 var(--bs-btn-close-bg) center/1em auto no-repeat; |
||||
// border: 0; |
||||
// border-radius: .375rem; |
||||
// box-sizing: initial; |
||||
// height: 1em; |
||||
// opacity: var(--bs-btn-close-opacity); |
||||
// padding: .25em; |
||||
// width: 1em |
||||
// } |
||||
|
||||
// [data-bs-theme=dark] .btn-close { |
||||
// filter: var(--bs-btn-close-white-filter); |
||||
// } |
||||
@ -0,0 +1,91 @@ |
||||
import React, {useState} from 'react' |
||||
import {Link, 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' |
||||
// import {useAppSelector} from '../../redux/hooks'
|
||||
import './index.scss' |
||||
|
||||
function BackButton({entity}: any) { |
||||
const navigate = useNavigate() |
||||
const [show, setShow] = useState(false) |
||||
// const theme = useAppSelector((state) => state.remixide.theme)
|
||||
const isDetailPage = location.pathname === '/detail' |
||||
const queryParams = new URLSearchParams(location.search) |
||||
const stepId = Number(queryParams.get('stepId')) |
||||
|
||||
return ( |
||||
<nav className="navbar navbar-light bg-light justify-content-between pt-1 pb-1 pl-1"> |
||||
<ul className="nav mr-auto"> |
||||
<li className="nav-item"> |
||||
<div |
||||
className="btn back" |
||||
onClick={() => { |
||||
setShow(true) |
||||
}} |
||||
role="button" |
||||
> |
||||
<OverlayTrigger placement="right" overlay={<Tooltip id="tooltip-right">Leave tutorial</Tooltip>}> |
||||
<FontAwesomeIcon className="pl-1" icon={faHome} /> |
||||
</OverlayTrigger> |
||||
</div> |
||||
</li> |
||||
{isDetailPage && ( |
||||
<li className="nav-item"> |
||||
<Link className="btn" to={`/list?id=${entity.id}`} title="Tutorial menu"> |
||||
<FontAwesomeIcon icon={faBars} /> |
||||
</Link> |
||||
</li> |
||||
)} |
||||
</ul> |
||||
{isDetailPage && ( |
||||
<form className="form-inline"> |
||||
{stepId > 0 && ( |
||||
<Link to={`/detail?id=${entity.id}&stepId=${stepId - 1}`}> |
||||
<FontAwesomeIcon className="pr-1" icon={faChevronLeft} /> |
||||
</Link> |
||||
)} |
||||
{stepId + 1}/{entity && <div className="">{entity.steps.length}</div>} |
||||
{stepId < entity.steps.length - 1 && ( |
||||
<Link to={`/detail?id=${entity.id}&stepId=${stepId + 1}`}> |
||||
<FontAwesomeIcon className="pl-1" icon={faChevronRight} /> |
||||
</Link> |
||||
)} |
||||
</form> |
||||
)} |
||||
<Modal |
||||
// data-bs-theme={theme}
|
||||
show={show} |
||||
onHide={() => { |
||||
setShow(false) |
||||
}} |
||||
> |
||||
<Modal.Header placeholder={''} closeButton> |
||||
<Modal.Title>Leave tutorial</Modal.Title> |
||||
</Modal.Header> |
||||
<Modal.Body>Are you sure you want to leave the tutorial?</Modal.Body> |
||||
<Modal.Footer> |
||||
<Button |
||||
variant="secondary" |
||||
onClick={() => { |
||||
setShow(false) |
||||
}} |
||||
> |
||||
No |
||||
</Button> |
||||
<Button |
||||
variant="success" |
||||
onClick={() => { |
||||
setShow(false) |
||||
navigate('/home') |
||||
}} |
||||
> |
||||
Yes |
||||
</Button> |
||||
</Modal.Footer> |
||||
</Modal> |
||||
</nav> |
||||
) |
||||
} |
||||
|
||||
export default BackButton |
||||
@ -0,0 +1,17 @@ |
||||
.spinnersOverlay { |
||||
background-color: rgba(51, 51, 51, 0.8); |
||||
z-index: 99; |
||||
opacity: 1; |
||||
height: 100%; |
||||
left: 0; |
||||
position: fixed; |
||||
top: 0; |
||||
width: 100%; |
||||
} |
||||
.spinnersLoading { |
||||
left: 50%; |
||||
margin: 0; |
||||
position: absolute; |
||||
top: 50%; |
||||
transform: translate(-50%,-50%); |
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
import React from 'react'; |
||||
import BounceLoader from 'react-spinners/BounceLoader'; |
||||
import './index.css'; |
||||
import { useAppSelector } from '../../redux/hooks'; |
||||
|
||||
const LoadingScreen: React.FC = () => { |
||||
const loading = useAppSelector((state) => state.loading.screen); |
||||
|
||||
return loading ? ( |
||||
<div className="spinnersOverlay"> |
||||
<BounceLoader color="#a7b0ae" size={100} className="spinnersLoading" /> |
||||
</div> |
||||
) : null; |
||||
}; |
||||
|
||||
export default LoadingScreen; |
||||
@ -0,0 +1,4 @@ |
||||
.arrow-icon{ |
||||
width: 3px; |
||||
display: inline-block; |
||||
} |
||||
@ -0,0 +1,165 @@ |
||||
import React, { useState, useEffect } from 'react'; |
||||
import { |
||||
Button, |
||||
Dropdown, |
||||
Form, |
||||
Tooltip, |
||||
OverlayTrigger, |
||||
} from 'react-bootstrap'; |
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; |
||||
import { |
||||
faQuestionCircle, |
||||
faInfoCircle, |
||||
faChevronRight, |
||||
faChevronDown, |
||||
} from '@fortawesome/free-solid-svg-icons'; |
||||
import { useAppDispatch } from '../../redux/hooks'; |
||||
import './index.css'; |
||||
|
||||
function RepoImporter({ list, selectedRepo }: any): JSX.Element { |
||||
const [open, setOpen] = useState(false); |
||||
const [name, setName] = useState(''); |
||||
const [branch, setBranch] = useState(''); |
||||
const dispatch = useAppDispatch(); |
||||
|
||||
useEffect(() => { |
||||
setName(selectedRepo.name); |
||||
setBranch(selectedRepo.branch); |
||||
}, [selectedRepo]); |
||||
|
||||
const panelChange = () => { |
||||
setOpen(!open); |
||||
}; |
||||
|
||||
const selectRepo = (repo: { name: string; branch: string }) => { |
||||
dispatch({ type: 'workshop/loadRepo', payload: repo }); |
||||
}; |
||||
|
||||
const importRepo = (event: { preventDefault: () => void }) => { |
||||
event.preventDefault(); |
||||
dispatch({ type: 'workshop/loadRepo', payload: { name, branch } }); |
||||
}; |
||||
|
||||
const resetAll = () => { |
||||
dispatch({ type: 'workshop/resetAll' }); |
||||
setName(''); |
||||
setBranch(''); |
||||
}; |
||||
|
||||
return ( |
||||
<> |
||||
{selectedRepo.name && ( |
||||
<div className="container-fluid mb-3 small mt-3"> |
||||
Tutorials from: |
||||
<h4 className="mb-1">{selectedRepo.name}</h4> |
||||
<span className=""> |
||||
Date modified:{' '} |
||||
{new Date(selectedRepo.datemodified).toLocaleString()} |
||||
</span> |
||||
</div> |
||||
)} |
||||
|
||||
<div |
||||
onClick={panelChange} |
||||
style={{ cursor: 'pointer' }} |
||||
className="container-fluid d-flex mb-3 small" |
||||
> |
||||
<div className="d-flex pr-2 pl-2"> |
||||
<FontAwesomeIcon |
||||
className="arrow-icon pt-1" |
||||
size="xs" |
||||
icon={open ? faChevronDown : faChevronRight} |
||||
/> |
||||
</div> |
||||
<div className="d-flex">Import another tutorial repo</div> |
||||
</div> |
||||
|
||||
{open && ( |
||||
<div className="container-fluid"> |
||||
<Dropdown className="w-100"> |
||||
<Dropdown.Toggle |
||||
className="btn btn-secondary w-100" |
||||
id="dropdownBasic1" |
||||
> |
||||
Select a repo |
||||
</Dropdown.Toggle> |
||||
<Dropdown.Menu className="w-100"> |
||||
{list.map((item: any) => ( |
||||
<Dropdown.Item |
||||
key={`${item.name}/${item.branch}`} |
||||
onClick={() => { |
||||
selectRepo(item); |
||||
}} |
||||
> |
||||
{item.name}-{item.branch} |
||||
</Dropdown.Item> |
||||
))} |
||||
</Dropdown.Menu> |
||||
</Dropdown> |
||||
<div |
||||
onClick={resetAll} |
||||
className="small mb-3" |
||||
style={{ cursor: 'pointer' }} |
||||
> |
||||
reset list |
||||
</div> |
||||
</div> |
||||
)} |
||||
|
||||
<div className="container-fluid mt-3"> |
||||
{open && ( |
||||
<Form onSubmit={importRepo}> |
||||
<Form.Group className="form-group"> |
||||
<Form.Label className="mr-2" htmlFor="name"> |
||||
REPO |
||||
</Form.Label> |
||||
<OverlayTrigger |
||||
placement="right" |
||||
overlay={ |
||||
<Tooltip id="tooltip-right">ie username/repository</Tooltip> |
||||
} |
||||
> |
||||
<FontAwesomeIcon icon={faQuestionCircle} /> |
||||
</OverlayTrigger> |
||||
<Form.Control |
||||
id="name" |
||||
required |
||||
onChange={(e) => { |
||||
setName(e.target.value); |
||||
}} |
||||
value={name} |
||||
/> |
||||
<Form.Label htmlFor="branch">BRANCH</Form.Label> |
||||
<Form.Control |
||||
id="branch" |
||||
required |
||||
onChange={(e) => { |
||||
setBranch(e.target.value); |
||||
}} |
||||
value={branch} |
||||
/> |
||||
</Form.Group> |
||||
<Button |
||||
className="btn btn-success start w-100" |
||||
type="submit" |
||||
disabled={!name || !branch} |
||||
> |
||||
Import {name} |
||||
</Button> |
||||
<a |
||||
href="https://github.com/bunsenstraat/remix-learneth-plugin/blob/master/README.md" |
||||
className="d-none" |
||||
target="_blank" |
||||
rel="noreferrer" |
||||
> |
||||
<FontAwesomeIcon icon={faInfoCircle} /> how to setup your repo |
||||
</a> |
||||
</Form> |
||||
)} |
||||
<hr /> |
||||
</div> |
||||
</> |
||||
); |
||||
} |
||||
|
||||
export default RepoImporter; |
||||
@ -0,0 +1,21 @@ |
||||
.slide-enter { |
||||
transform: translateY(100px); |
||||
opacity: 0; |
||||
} |
||||
|
||||
.slide-enter-active { |
||||
transform: translateY(0); |
||||
opacity: 1; |
||||
transition: opacity 400ms, transform 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275); |
||||
} |
||||
|
||||
.slide-exit { |
||||
transform: translateY(0); |
||||
opacity: 1; |
||||
} |
||||
|
||||
.slide-exit-active { |
||||
transform: translateY(100px); |
||||
opacity: 0; |
||||
transition: opacity 400ms, transform 400ms cubic-bezier(0.6, 0.04, 0.98, 0.335); |
||||
} |
||||
@ -0,0 +1,18 @@ |
||||
import React, { type ReactNode, useEffect, useState } from 'react'; |
||||
import { CSSTransition } from 'react-transition-group'; |
||||
import './index.css'; |
||||
|
||||
const SlideIn: React.FC<{ children: ReactNode }> = ({ children }) => { |
||||
const [show, setShow] = useState(false); |
||||
useEffect(() => { |
||||
setShow(true); |
||||
}, []); |
||||
|
||||
return ( |
||||
<CSSTransition in={show} timeout={400} classNames="slide" unmountOnExit> |
||||
{children} |
||||
</CSSTransition> |
||||
); |
||||
}; |
||||
|
||||
export default SlideIn; |
||||
@ -0,0 +1,13 @@ |
||||
body { |
||||
margin: 0; |
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', |
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', |
||||
sans-serif; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
code { |
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', |
||||
monospace; |
||||
} |
||||
@ -0,0 +1,18 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<title>Learn ETH</title> |
||||
<base href="./" /> |
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
||||
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"/> --> |
||||
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> --> |
||||
<link rel="stylesheet" integrity="ha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" |
||||
crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"> |
||||
</head> |
||||
<body> |
||||
<div id="root"></div> |
||||
<script src="https://kit.fontawesome.com/41dd021e94.js" crossorigin="anonymous"></script> |
||||
</body> |
||||
</html> |
||||
|
After Width: | Height: | Size: 2.6 KiB |
@ -0,0 +1,15 @@ |
||||
import React from 'react'; |
||||
import ReactDOM from 'react-dom/client'; |
||||
import { Provider } from 'react-redux'; |
||||
import './index.css'; |
||||
import App from './App'; |
||||
import { store } from './redux/store'; |
||||
|
||||
const root = ReactDOM.createRoot( |
||||
document.getElementById('root') as HTMLElement, |
||||
); |
||||
root.render( |
||||
<Provider store={store}> |
||||
<App /> |
||||
</Provider>, |
||||
); |
||||
@ -0,0 +1,23 @@ |
||||
.description-collapsed{ |
||||
height: 0px; |
||||
overflow: hidden; |
||||
word-wrap: break-word; |
||||
padding: 0px !important; |
||||
margin: 0px !important; |
||||
} |
||||
|
||||
.tag{ |
||||
display: inline; |
||||
} |
||||
|
||||
.arrow-icon{ |
||||
width: 12px; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.workshop-link { |
||||
text-decoration: none; |
||||
} |
||||
.workshop-link:hover { |
||||
text-decoration: underline; |
||||
} |
||||
@ -0,0 +1,136 @@ |
||||
import React, { useEffect } from 'react'; |
||||
import { Link } from 'react-router-dom'; |
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; |
||||
import { |
||||
faChevronRight, |
||||
faChevronDown, |
||||
faPlayCircle, |
||||
} from '@fortawesome/free-solid-svg-icons'; |
||||
import Markdown from 'react-markdown'; |
||||
import rehypeRaw from 'rehype-raw'; |
||||
import remarkGfm from 'remark-gfm'; |
||||
import { useAppDispatch, useAppSelector } from '../../redux/hooks'; |
||||
import RepoImporter from '../../components/RepoImporter'; |
||||
import './index.css'; |
||||
|
||||
function HomePage(): JSX.Element { |
||||
const [openKeys, setOpenKeys] = React.useState<string[]>([]); |
||||
|
||||
const isOpen = (key: string) => openKeys.includes(key); |
||||
const handleClick = (key: string) => { |
||||
setOpenKeys( |
||||
isOpen(key) |
||||
? openKeys.filter((item) => item !== key) |
||||
: [...openKeys, key], |
||||
); |
||||
}; |
||||
|
||||
const dispatch = useAppDispatch(); |
||||
const { list, detail, selectedId } = useAppSelector( |
||||
(state) => state.workshop, |
||||
); |
||||
|
||||
const selectedRepo = detail[selectedId]; |
||||
|
||||
const levelMap: any = { |
||||
1: 'Beginner', |
||||
2: 'Intermediate', |
||||
3: 'Advanced', |
||||
}; |
||||
|
||||
useEffect(() => { |
||||
dispatch({ |
||||
type: 'workshop/init', |
||||
}); |
||||
}, []); |
||||
|
||||
return ( |
||||
<div className="App"> |
||||
<RepoImporter list={list} selectedRepo={selectedRepo || {}} /> |
||||
{selectedRepo && ( |
||||
<div className="container-fluid"> |
||||
{Object.keys(selectedRepo.group).map((level) => ( |
||||
<div key={level}> |
||||
<div className="mb-2 border-bottom small">{levelMap[level]}:</div> |
||||
{selectedRepo.group[level].map((item: any) => ( |
||||
<div key={item.id}> |
||||
<div> |
||||
<a |
||||
href="#" |
||||
className="arrow-icon" |
||||
onClick={() => { |
||||
handleClick(item.id); |
||||
}} |
||||
> |
||||
<FontAwesomeIcon |
||||
size="xs" |
||||
icon={isOpen(item.id) ? faChevronDown : faChevronRight} |
||||
/> |
||||
</a> |
||||
<a |
||||
href="#" |
||||
className="workshop-link" |
||||
onClick={() => { |
||||
handleClick(item.id); |
||||
}} |
||||
> |
||||
{selectedRepo.entities[item.id].name} |
||||
</a> |
||||
<Link |
||||
to={`/list?id=${item.id}`} |
||||
className="text-decoration-none float-right" |
||||
> |
||||
<FontAwesomeIcon icon={faPlayCircle} size="lg" /> |
||||
</Link> |
||||
</div> |
||||
<div |
||||
className={`container-fluid bg-light pt-3 mt-2 ${ |
||||
isOpen(item.id) ? '' : 'description-collapsed' |
||||
}`}
|
||||
> |
||||
{levelMap[level] && ( |
||||
<p className="tag pt-2 pr-1 font-weight-bold small text-uppercase"> |
||||
{levelMap[level]} |
||||
</p> |
||||
)} |
||||
|
||||
{selectedRepo.entities[item.id].metadata.data.tags?.map( |
||||
(tag: string) => ( |
||||
<p |
||||
key={tag} |
||||
className="tag pr-1 font-weight-bold small text-uppercase" |
||||
> |
||||
{tag} |
||||
</p> |
||||
), |
||||
)} |
||||
|
||||
{selectedRepo.entities[item.id].steps && ( |
||||
<div className="d-none"> |
||||
{selectedRepo.entities[item.id].steps.length} step(s) |
||||
</div> |
||||
)} |
||||
|
||||
<div className="workshop-list_description pb-3 pt-3"> |
||||
<Markdown |
||||
rehypePlugins={[rehypeRaw]} |
||||
remarkPlugins={[remarkGfm]} |
||||
> |
||||
{selectedRepo.entities[item.id].description?.content} |
||||
</Markdown> |
||||
</div> |
||||
|
||||
<div className="actions"></div> |
||||
</div> |
||||
<div className="mb-3"></div> |
||||
</div> |
||||
))} |
||||
</div> |
||||
))} |
||||
</div> |
||||
)} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default HomePage; |
||||
@ -0,0 +1,5 @@ |
||||
.remixLogo { |
||||
position: absolute; |
||||
left: 0px; |
||||
right: 0px; |
||||
} |
||||
@ -0,0 +1,26 @@ |
||||
import React, {useEffect} from 'react' |
||||
// import remixClient from '../../remix-client';
|
||||
import {useAppDispatch} from '../../redux/hooks' |
||||
import logo from '../../assets/logo-background.svg' |
||||
import './index.css' |
||||
|
||||
const LogoPage: React.FC = () => { |
||||
const dispatch = useAppDispatch() |
||||
|
||||
useEffect(() => { |
||||
dispatch({type: 'remixide/connect'}) |
||||
// remixClient.on('theme', 'themeChanged', (theme: any) => {
|
||||
// dispatch({ type: 'remixide/save', payload: { theme: theme.quality } });
|
||||
// });
|
||||
}, []) |
||||
|
||||
return ( |
||||
<div> |
||||
<div className="remixLogo"> |
||||
<img src={logo} /> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default LogoPage |
||||
@ -0,0 +1,59 @@ |
||||
step-view { |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
header, footer { |
||||
padding: 10px 5px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
|
||||
.menuspacer{ |
||||
// padding-top: 48px; |
||||
|
||||
} |
||||
|
||||
.errorloadingspacer{ |
||||
padding-top: 44px; |
||||
|
||||
} |
||||
|
||||
.title{ |
||||
pointer-events: none; |
||||
} |
||||
|
||||
h1 { |
||||
text-align: left; |
||||
font-size: 1.2rem !important; |
||||
word-break: break-word; |
||||
} |
||||
|
||||
markdown { |
||||
display: block; |
||||
flex: 1; |
||||
overflow: auto; |
||||
padding: 0px; |
||||
|
||||
h1 { |
||||
font-size: 1.2rem !important; |
||||
} |
||||
|
||||
h2 { |
||||
font-size: 1rem; |
||||
} |
||||
|
||||
h3 { |
||||
font-size: 1rem; |
||||
} |
||||
|
||||
h4 { |
||||
font-size: 1rem; |
||||
} |
||||
} |
||||
|
||||
|
||||
@ -0,0 +1,246 @@ |
||||
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'; |
||||
|
||||
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 { |
||||
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); |
||||
|
||||
useEffect(() => { |
||||
dispatch({ |
||||
type: 'remixide/displayFile', |
||||
payload: step, |
||||
}); |
||||
dispatch({ |
||||
type: 'remixide/save', |
||||
payload: { errors: [], success: false }, |
||||
}); |
||||
window.scrollTo(0, 0); |
||||
}, [step]); |
||||
|
||||
useEffect(() => { |
||||
if (errors.length > 0 || success) { |
||||
window.scrollTo(0, document.documentElement.scrollHeight); |
||||
} |
||||
}, [errors, success]); |
||||
|
||||
return ( |
||||
<> |
||||
<div className="fixed-top"> |
||||
<div className="bg-light"> |
||||
<BackButton entity={entity} /> |
||||
</div> |
||||
</div> |
||||
<div id="top"></div> |
||||
{errorLoadingFile ? ( |
||||
<> |
||||
<div className="errorloadingspacer"></div> |
||||
<h1 className="pl-3 pr-3 pt-3 pb-1">{step.name}</h1> |
||||
<button |
||||
className="w-100nav-item rounded-0 nav-link btn btn-success test" |
||||
onClick={() => { |
||||
dispatch({ |
||||
type: 'remixide/displayFile', |
||||
payload: step, |
||||
}); |
||||
}} |
||||
> |
||||
Load the file |
||||
</button> |
||||
<div className="mb-4"></div> |
||||
</> |
||||
) : ( |
||||
<> |
||||
<div className="menuspacer"></div> |
||||
<h1 className="pr-3 pl-3 pt-3 pb-1">{step.name}</h1> |
||||
</> |
||||
)} |
||||
<div className="container-fluid"> |
||||
<Markdown rehypePlugins={[rehypeRaw]}> |
||||
{step.markdown?.content} |
||||
</Markdown> |
||||
</div> |
||||
{step.test?.content ? ( |
||||
<> |
||||
<nav className="nav nav-pills nav-fill"> |
||||
{errorLoadingFile ? ( |
||||
<button |
||||
className="nav-item rounded-0 nav-link btn btn-warning test" |
||||
onClick={() => { |
||||
dispatch({ |
||||
type: 'remixide/displayFile', |
||||
payload: step, |
||||
}); |
||||
}} |
||||
> |
||||
Load the file |
||||
</button> |
||||
) : ( |
||||
<> |
||||
{!errorLoadingFile ? ( |
||||
<> |
||||
<button |
||||
className="nav-item rounded-0 nav-link btn btn-info test" |
||||
onClick={() => { |
||||
dispatch({ |
||||
type: 'remixide/testStep', |
||||
payload: step, |
||||
}); |
||||
}} |
||||
> |
||||
Check Answer |
||||
</button> |
||||
{step.answer?.content && ( |
||||
<button |
||||
className="nav-item rounded-0 nav-link btn btn-warning test" |
||||
onClick={() => { |
||||
dispatch({ |
||||
type: 'remixide/showAnswer', |
||||
payload: step, |
||||
}); |
||||
}} |
||||
> |
||||
Show answer |
||||
</button> |
||||
)} |
||||
</> |
||||
) : ( |
||||
<> |
||||
{!errorLoadingFile && ( |
||||
<> |
||||
<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}`, |
||||
); |
||||
}} |
||||
> |
||||
Next |
||||
</button> |
||||
{step.answer?.content && ( |
||||
<button |
||||
className="nav-item rounded-0 nav-link btn btn-warning test" |
||||
onClick={() => { |
||||
dispatch({ |
||||
type: 'remixide/showAnswer', |
||||
payload: step, |
||||
}); |
||||
}} |
||||
> |
||||
Show answer |
||||
</button> |
||||
)} |
||||
</> |
||||
)} |
||||
</> |
||||
)} |
||||
</> |
||||
)} |
||||
</nav> |
||||
{success && ( |
||||
<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}`, |
||||
); |
||||
}} |
||||
> |
||||
Next |
||||
</button> |
||||
)} |
||||
<div id="errors"> |
||||
{success && ( |
||||
<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" |
||||
> |
||||
Errors |
||||
</div> |
||||
)} |
||||
{errors.map((error: string, index: number) => ( |
||||
<div |
||||
key={index} |
||||
className="alert rounded-0 alert-warning mb-0 mt-0" |
||||
> |
||||
{error} |
||||
</div> |
||||
))} |
||||
</> |
||||
)} |
||||
</div> |
||||
</> |
||||
) : ( |
||||
<> |
||||
<nav className="nav nav-pills nav-fill"> |
||||
{!errorLoadingFile && step.answer?.content && ( |
||||
<button |
||||
className="nav-item rounded-0 nav-link btn btn-warning test" |
||||
onClick={() => { |
||||
dispatch({ |
||||
type: 'remixide/showAnswer', |
||||
payload: step, |
||||
}); |
||||
}} |
||||
> |
||||
Show answer |
||||
</button> |
||||
)} |
||||
</nav> |
||||
{stepId < steps.length - 1 && ( |
||||
<button |
||||
className="w-100 btn btn-success" |
||||
onClick={() => { |
||||
navigate(`/detail?id=${id}&stepId=${stepId + 1}`); |
||||
}} |
||||
> |
||||
Next |
||||
</button> |
||||
)} |
||||
{stepId === steps.length - 1 && ( |
||||
<button |
||||
className="w-100 btn btn-success" |
||||
onClick={() => { |
||||
navigate(`/list?id=${id}`); |
||||
}} |
||||
> |
||||
Finish tutorial |
||||
</button> |
||||
)} |
||||
</> |
||||
)} |
||||
</> |
||||
); |
||||
} |
||||
|
||||
export default StepDetailPage; |
||||
@ -0,0 +1,152 @@ |
||||
:host { |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
header { |
||||
padding: 10px 5px; |
||||
} |
||||
|
||||
.menuspacer{ |
||||
margin-top: 52px; |
||||
|
||||
} |
||||
|
||||
.steplink { |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.title{ |
||||
pointer-events: none; |
||||
} |
||||
|
||||
h1 { |
||||
text-align: left; |
||||
font-size: 1.2rem !important; |
||||
word-break: break-word; |
||||
} |
||||
section { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.start { |
||||
padding: 5px 25px; |
||||
animation: jittery 2s 0.5s infinite; |
||||
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5); |
||||
color: white; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
footer { |
||||
padding: 10px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
|
||||
@keyframes jittery { |
||||
5%, |
||||
50% { |
||||
transform: scale(1); |
||||
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5); |
||||
} |
||||
10% { |
||||
transform: scale(0.9); |
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); |
||||
} |
||||
15% { |
||||
transform: scale(1.15); |
||||
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); |
||||
} |
||||
20% { |
||||
transform: scale(1.15) rotate(-5deg); |
||||
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); |
||||
} |
||||
25% { |
||||
transform: scale(1.15) rotate(5deg); |
||||
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); |
||||
} |
||||
30% { |
||||
transform: scale(1.15) rotate(-3deg); |
||||
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); |
||||
} |
||||
35% { |
||||
transform: scale(1.15) rotate(2deg); |
||||
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); |
||||
} |
||||
40% { |
||||
transform: scale(1.15) rotate(0); |
||||
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); |
||||
} |
||||
} |
||||
|
||||
.slide-in { |
||||
animation: slideIn 0.5s forwards; |
||||
visibility: hidden; |
||||
} |
||||
|
||||
@keyframes slideIn { |
||||
0% { |
||||
transform: translateY(-100%); |
||||
visibility: visible; |
||||
} |
||||
100% { |
||||
transform: translateY(0); |
||||
visibility: visible; |
||||
} |
||||
} |
||||
|
||||
@-moz-keyframes slideIn { |
||||
0% { |
||||
transform: translateY(-100%); |
||||
visibility: visible; |
||||
} |
||||
100% { |
||||
transform: translateY(0); |
||||
visibility: visible; |
||||
} |
||||
} |
||||
|
||||
@-webkit-keyframes slideIn { |
||||
0% { |
||||
transform: translateY(-100%); |
||||
visibility: visible; |
||||
} |
||||
100% { |
||||
transform: translateY(0); |
||||
visibility: visible; |
||||
} |
||||
} |
||||
|
||||
@-o-keyframes slideIn { |
||||
0% { |
||||
transform: translateY(-100%); |
||||
visibility: visible; |
||||
} |
||||
100% { |
||||
transform: translateY(0); |
||||
visibility: visible; |
||||
} |
||||
} |
||||
|
||||
@-ms-keyframes slideIn { |
||||
0% { |
||||
transform: translateY(-100%); |
||||
visibility: visible; |
||||
} |
||||
100% { |
||||
transform: translateY(0); |
||||
visibility: visible; |
||||
} |
||||
} |
||||
@ -0,0 +1,44 @@ |
||||
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'; |
||||
|
||||
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]; |
||||
|
||||
return ( |
||||
<> |
||||
<div className="fixed-top"> |
||||
<div className="bg-light"> |
||||
<BackButton /> |
||||
</div> |
||||
</div> |
||||
<div id="top"></div> |
||||
<h1 className="pl-3 pr-3 pt-2 pb-1 menuspacer">{entity.name}</h1> |
||||
<div className="container-fluid"> |
||||
<Markdown>{entity.text}</Markdown> |
||||
</div> |
||||
<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" |
||||
> |
||||
{step.name} » |
||||
</Link> |
||||
))} |
||||
</article> |
||||
</SlideIn> |
||||
</> |
||||
); |
||||
} |
||||
|
||||
export default StepListPage; |
||||
@ -0,0 +1,7 @@ |
||||
/** |
||||
* Polyfill stable language features. These imports will be optimized by `@babel/preset-env`. |
||||
* |
||||
* See: https://github.com/zloirock/core-js#babel
|
||||
*/ |
||||
import 'core-js/stable' |
||||
import 'regenerator-runtime/runtime' |
||||
@ -0,0 +1,21 @@ |
||||
{ |
||||
"name": "LearnEth", |
||||
"displayName": "LearnEth", |
||||
"description": "Learn Ethereum with Remix!", |
||||
"documentation": "https://remix-learneth-plugin.readthedocs.io/en/latest/index.html", |
||||
"version": "0.1.0", |
||||
"methods": [ |
||||
"startTutorial", |
||||
"addRepository" |
||||
], |
||||
"kind": "none", |
||||
"icon": "/plugins/learneth/assets/Font_Awesome_5_solid_book-reader.svg", |
||||
"location": "sidePanel", |
||||
"url": "/plugins/learneth", |
||||
"repo": "https://github.com/ethereum/remix-project/tree/master/apps/learneth", |
||||
"maintainedBy": "Remix", |
||||
"authorContact": "", |
||||
"targets": [ |
||||
"remix" |
||||
] |
||||
} |
||||
@ -0,0 +1 @@ |
||||
import 'react-scripts'; |
||||
@ -0,0 +1,5 @@ |
||||
import { useDispatch, type TypedUseSelectorHook, useSelector } from 'react-redux'; |
||||
import { type AppDispatch, type RootState } from './store'; |
||||
|
||||
export const useAppDispatch: () => AppDispatch = useDispatch; |
||||
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector; |
||||
@ -0,0 +1,14 @@ |
||||
import { type ModelType } from '../store'; |
||||
|
||||
const Model: ModelType = { |
||||
namespace: 'loading', |
||||
state: { screen: true }, |
||||
reducers: { |
||||
save(state, { payload }) { |
||||
return { ...state, ...payload }; |
||||
}, |
||||
}, |
||||
effects: {}, |
||||
}; |
||||
|
||||
export default Model; |
||||
@ -0,0 +1,233 @@ |
||||
import {toast} from 'react-toastify' |
||||
import {type ModelType} from '../store' |
||||
import remixClient from '../../remix-client' |
||||
import {router} from '../../App' |
||||
|
||||
function getFilePath(file: string): string { |
||||
const name = file.split('/') |
||||
return name.length > 1 ? `${name[name.length - 1]}` : '' |
||||
} |
||||
|
||||
const Model: ModelType = { |
||||
namespace: 'remixide', |
||||
state: { |
||||
errors: [], |
||||
success: false, |
||||
errorLoadingFile: false, |
||||
// theme: '',
|
||||
}, |
||||
reducers: { |
||||
save(state, {payload}) { |
||||
return {...state, ...payload} |
||||
}, |
||||
}, |
||||
effects: { |
||||
*connect(_, {put}) { |
||||
toast.info('connecting to the REMIX IDE') |
||||
|
||||
yield put({ |
||||
type: 'loading/save', |
||||
payload: { |
||||
screen: true, |
||||
}, |
||||
}) |
||||
|
||||
yield remixClient.onload() |
||||
|
||||
// const theme = yield remixClient.call('theme', 'currentTheme');
|
||||
|
||||
// yield put({ type: 'remixide/save', payload: { theme: theme.quality } });
|
||||
|
||||
toast.dismiss() |
||||
|
||||
yield put({ |
||||
type: 'loading/save', |
||||
payload: { |
||||
screen: false, |
||||
}, |
||||
}) |
||||
|
||||
yield router.navigate('/home') |
||||
}, |
||||
*displayFile({payload: step}, {select, put}) { |
||||
let content = '' |
||||
let path = '' |
||||
if (step.solidity?.file) { |
||||
content = step.solidity.content |
||||
path = getFilePath(step.solidity.file) |
||||
} |
||||
if (step.js?.file) { |
||||
content = step.js.content |
||||
path = getFilePath(step.js.file) |
||||
} |
||||
if (step.vy?.file) { |
||||
content = step.vy.content |
||||
path = getFilePath(step.vy.file) |
||||
} |
||||
|
||||
if (!content) { |
||||
return |
||||
} |
||||
|
||||
toast.info(`loading ${path} into IDE`) |
||||
yield put({ |
||||
type: 'loading/save', |
||||
payload: { |
||||
screen: true, |
||||
}, |
||||
}) |
||||
|
||||
const {detail, selectedId} = yield select((state) => state.workshop) |
||||
|
||||
const workshop = detail[selectedId] |
||||
console.log('loading ', step, workshop) |
||||
|
||||
path = `.learneth/${workshop.name}/${step.name}/${path}` |
||||
try { |
||||
const isExist = yield remixClient.call('fileManager', 'exists' as any, path) |
||||
if (!isExist) { |
||||
yield remixClient.call('fileManager', 'setFile', path, content) |
||||
} |
||||
yield remixClient.call('fileManager', 'switchFile', `${path}`) |
||||
yield put({ |
||||
type: 'remixide/save', |
||||
payload: {errorLoadingFile: false}, |
||||
}) |
||||
toast.dismiss() |
||||
} catch (error) { |
||||
toast.dismiss() |
||||
toast.error('File could not be loaded. Please try again.') |
||||
yield put({ |
||||
type: 'remixide/save', |
||||
payload: {errorLoadingFile: true}, |
||||
}) |
||||
} |
||||
yield put({ |
||||
type: 'loading/save', |
||||
payload: { |
||||
screen: false, |
||||
}, |
||||
}) |
||||
}, |
||||
*testStep({payload: step}, {select, put}) { |
||||
yield put({ |
||||
type: 'loading/save', |
||||
payload: { |
||||
screen: true, |
||||
}, |
||||
}) |
||||
|
||||
try { |
||||
yield put({ |
||||
type: 'remixide/save', |
||||
payload: {success: false}, |
||||
}) |
||||
const {detail, selectedId} = yield select((state) => state.workshop) |
||||
|
||||
const workshop = detail[selectedId] |
||||
|
||||
let path: string |
||||
if (step.solidity.file) { |
||||
path = getFilePath(step.solidity.file) |
||||
path = `.learneth/${workshop.name}/${step.name}/${path}` |
||||
yield remixClient.call('fileManager', 'switchFile', `${path}`) |
||||
} |
||||
|
||||
console.log('testing ', step.test.content) |
||||
|
||||
path = getFilePath(step.test.file) |
||||
path = `.learneth/${workshop.name}/${step.name}/${path}` |
||||
yield remixClient.call('fileManager', 'setFile', path, step.test.content) |
||||
|
||||
const result = yield remixClient.call('solidityUnitTesting', 'testFromPath', path) |
||||
console.log('result ', result) |
||||
|
||||
if (!result) { |
||||
yield put({ |
||||
type: 'remixide/save', |
||||
payload: {errors: ['Compiler failed to test this file']}, |
||||
}) |
||||
} else { |
||||
const success = result.totalFailing === 0 |
||||
|
||||
if (success) { |
||||
yield put({ |
||||
type: 'remixide/save', |
||||
payload: {errors: [], success: true}, |
||||
}) |
||||
} else { |
||||
yield put({ |
||||
type: 'remixide/save', |
||||
payload: { |
||||
errors: result.errors.map((error: {message: any}) => error.message), |
||||
}, |
||||
}) |
||||
} |
||||
} |
||||
} catch (err) { |
||||
console.log('TESTING ERROR', err) |
||||
yield put({ |
||||
type: 'remixide/save', |
||||
payload: {errors: [String(err)]}, |
||||
}) |
||||
} |
||||
yield put({ |
||||
type: 'loading/save', |
||||
payload: { |
||||
screen: false, |
||||
}, |
||||
}) |
||||
}, |
||||
*showAnswer({payload: step}, {select, put}) { |
||||
yield put({ |
||||
type: 'loading/save', |
||||
payload: { |
||||
screen: true, |
||||
}, |
||||
}) |
||||
|
||||
toast.info('loading answer into IDE') |
||||
|
||||
try { |
||||
console.log('loading ', step) |
||||
const content = step.answer.content |
||||
let path = getFilePath(step.answer.file) |
||||
|
||||
const {detail, selectedId} = yield select((state) => state.workshop) |
||||
|
||||
const workshop = detail[selectedId] |
||||
path = `.learneth/${workshop.name}/${step.name}/${path}` |
||||
yield remixClient.call('fileManager', 'setFile', path, content) |
||||
yield remixClient.call('fileManager', 'switchFile', `${path}`) |
||||
} catch (err) { |
||||
yield put({ |
||||
type: 'remixide/save', |
||||
payload: {errors: [String(err)]}, |
||||
}) |
||||
} |
||||
|
||||
toast.dismiss() |
||||
yield put({ |
||||
type: 'loading/save', |
||||
payload: { |
||||
screen: false, |
||||
}, |
||||
}) |
||||
}, |
||||
*testSolidityCompiler(_, {put, select}) { |
||||
try { |
||||
yield remixClient.call('solidity', 'getCompilationResult') |
||||
} catch (err) { |
||||
const errors = yield select((state) => state.remixide.errors) |
||||
yield put({ |
||||
type: 'remixide/save', |
||||
payload: { |
||||
errors: [...errors, "The `Solidity Compiler` is not yet activated.<br>Please activate it using the `SOLIDITY` button in the `Featured Plugins` section of the homepage.<img class='img-thumbnail mt-3' src='assets/activatesolidity.png'>"], |
||||
}, |
||||
}) |
||||
} |
||||
}, |
||||
}, |
||||
} |
||||
|
||||
export default Model |
||||
@ -0,0 +1,179 @@ |
||||
import axios from 'axios'; |
||||
import { toast } from 'react-toastify'; |
||||
import groupBy from 'lodash/groupBy'; |
||||
import pick from 'lodash/pick'; |
||||
import { type ModelType } from '../store'; |
||||
import remixClient from '../../remix-client'; |
||||
import { router } from '../../App'; |
||||
|
||||
// const apiUrl = 'http://localhost:3001';
|
||||
const apiUrl = 'https://static.220.14.12.49.clients.your-server.de:3000'; |
||||
|
||||
const Model: ModelType = { |
||||
namespace: 'workshop', |
||||
state: { |
||||
list: [], |
||||
detail: {}, |
||||
selectedId: '', |
||||
}, |
||||
reducers: { |
||||
save(state, { payload }) { |
||||
return { ...state, ...payload }; |
||||
}, |
||||
}, |
||||
effects: { |
||||
*init(_, { put }) { |
||||
const cache = localStorage.getItem('workshop.state'); |
||||
|
||||
if (cache) { |
||||
const workshopState = JSON.parse(cache); |
||||
yield put({ |
||||
type: 'workshop/save', |
||||
payload: workshopState, |
||||
}); |
||||
} else { |
||||
yield put({ |
||||
type: 'workshop/loadRepo', |
||||
payload: { |
||||
name: 'ethereum/remix-workshops', |
||||
branch: 'master', |
||||
}, |
||||
}); |
||||
} |
||||
}, |
||||
*loadRepo({ payload }, { put, select }) { |
||||
toast.info(`loading ${payload.name}/${payload.branch}`); |
||||
|
||||
yield put({ |
||||
type: 'loading/save', |
||||
payload: { |
||||
screen: true, |
||||
}, |
||||
}); |
||||
|
||||
const { list, detail } = yield select((state) => state.workshop); |
||||
|
||||
const url = `${apiUrl}/clone/${encodeURIComponent(payload.name)}/${ |
||||
payload.branch |
||||
}?${Math.random()}`;
|
||||
console.log('loading ', url); |
||||
const { data } = yield axios.get(url); |
||||
console.log(data); |
||||
const repoId = `${payload.name}-${payload.branch}`; |
||||
|
||||
for (let i = 0; i < data.ids.length; i++) { |
||||
const { |
||||
steps, |
||||
metadata: { |
||||
data: { steps: metadataSteps }, |
||||
}, |
||||
} = data.entities[data.ids[i]]; |
||||
|
||||
let newSteps = []; |
||||
|
||||
if (metadataSteps) { |
||||
newSteps = metadataSteps.map((step: any) => { |
||||
return { |
||||
...steps.find((item: any) => item.name === step.path), |
||||
name: step.name, |
||||
}; |
||||
}); |
||||
} else { |
||||
newSteps = steps.map((step: any) => ({ |
||||
...step, |
||||
name: step.name.replace('_', ' '), |
||||
})); |
||||
} |
||||
|
||||
const stepKeysWithFile = [ |
||||
'markdown', |
||||
'solidity', |
||||
'test', |
||||
'answer', |
||||
'js', |
||||
'vy', |
||||
]; |
||||
|
||||
for (let j = 0; j < newSteps.length; j++) { |
||||
const step = newSteps[j]; |
||||
for (let k = 0; k < stepKeysWithFile.length; k++) { |
||||
const key = stepKeysWithFile[k]; |
||||
if (step[key]) { |
||||
try { |
||||
step[key].content = (yield remixClient.call( |
||||
'contentImport', |
||||
'resolve', |
||||
step[key].file, |
||||
)).content; |
||||
} catch (error) { |
||||
console.error(error); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
data.entities[data.ids[i]].steps = newSteps; |
||||
} |
||||
|
||||
const workshopState = { |
||||
detail: { |
||||
...detail, |
||||
[repoId]: { |
||||
...data, |
||||
group: groupBy( |
||||
data.ids.map((id: string) => |
||||
pick(data.entities[id], ['level', 'id']), |
||||
), |
||||
(item: any) => item.level, |
||||
), |
||||
...payload, |
||||
}, |
||||
}, |
||||
list: detail[repoId] ? list : [...list, payload], |
||||
selectedId: repoId, |
||||
}; |
||||
yield put({ |
||||
type: 'workshop/save', |
||||
payload: workshopState, |
||||
}); |
||||
localStorage.setItem('workshop.state', JSON.stringify(workshopState)); |
||||
|
||||
toast.dismiss(); |
||||
yield put({ |
||||
type: 'loading/save', |
||||
payload: { |
||||
screen: false, |
||||
}, |
||||
}); |
||||
|
||||
if (payload.id) { |
||||
const { detail, selectedId } = workshopState; |
||||
const { ids, entities } = detail[selectedId]; |
||||
for (let i = 0; i < ids.length; i++) { |
||||
const entity = entities[ids[i]]; |
||||
if (entity.metadata.data.id === payload.id || i + 1 === payload.id) { |
||||
yield router.navigate(`/list?id=${ids[i]}`); |
||||
break; |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
*resetAll(_, { put }) { |
||||
yield put({ |
||||
type: 'workshop/save', |
||||
payload: { |
||||
list: [], |
||||
detail: {}, |
||||
selectedId: '', |
||||
}, |
||||
}); |
||||
|
||||
localStorage.removeItem('workshop.state'); |
||||
|
||||
yield put({ |
||||
type: 'workshop/init', |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
|
||||
export default Model; |
||||
@ -0,0 +1,117 @@ |
||||
import { |
||||
configureStore, |
||||
createSlice, |
||||
type PayloadAction, |
||||
type Reducer, |
||||
} from '@reduxjs/toolkit'; |
||||
import createSagaMiddleware from 'redux-saga'; |
||||
import { |
||||
call, |
||||
put, |
||||
takeEvery, |
||||
delay, |
||||
select, |
||||
all, |
||||
fork, |
||||
type ForkEffect, |
||||
} from 'redux-saga/effects'; |
||||
|
||||
// @ts-expect-error
|
||||
const context = require.context('./models', false, /\.ts$/); |
||||
const models = context.keys().map((key: any) => context(key).default); |
||||
|
||||
export type StateType = Record<string, any>; |
||||
export interface ModelType { |
||||
namespace: string; |
||||
state: StateType; |
||||
reducers: Record< |
||||
string, |
||||
(state: StateType, action: PayloadAction<any>) => StateType |
||||
>; |
||||
effects: Record< |
||||
string, |
||||
( |
||||
action: PayloadAction<any>, |
||||
effects: { |
||||
call: typeof call; |
||||
put: typeof put; |
||||
delay: typeof delay; |
||||
select: typeof select; |
||||
}, |
||||
) => Generator<any, void, any> |
||||
>; |
||||
} |
||||
|
||||
function createReducer(model: ModelType): Reducer { |
||||
const reducers = model.reducers; |
||||
Object.keys(model.effects).forEach((key) => { |
||||
reducers[key] = (state: StateType, action: PayloadAction<any>) => state; |
||||
}); |
||||
const slice = createSlice({ |
||||
name: model.namespace, |
||||
initialState: model.state, |
||||
reducers, |
||||
}); |
||||
return slice.reducer; |
||||
} |
||||
|
||||
const rootReducer = models.reduce((prev: any, model: ModelType) => { |
||||
return { ...prev, [model.namespace]: createReducer(model) }; |
||||
}, {}); |
||||
|
||||
function watchEffects(model: ModelType): ForkEffect { |
||||
return fork(function* () { |
||||
for (const key in model.effects) { |
||||
const effect = model.effects[key]; |
||||
yield takeEvery( |
||||
`${model.namespace}/${key}`, |
||||
function* (action: PayloadAction) { |
||||
yield put({ |
||||
type: 'loading/save', |
||||
payload: { |
||||
[`${model.namespace}/${key}`]: true, |
||||
}, |
||||
}); |
||||
yield effect(action, { |
||||
call, |
||||
put, |
||||
delay, |
||||
select, |
||||
}); |
||||
yield put({ |
||||
type: 'loading/save', |
||||
payload: { |
||||
[`${model.namespace}/${key}`]: false, |
||||
}, |
||||
}); |
||||
}, |
||||
); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
function* rootSaga(): Generator { |
||||
yield all(models.map((model: ModelType) => watchEffects(model))); |
||||
} |
||||
|
||||
const configureAppStore = (initialState = {}) => { |
||||
const reduxSagaMonitorOptions = {}; |
||||
const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions); |
||||
|
||||
const middleware = [sagaMiddleware]; |
||||
|
||||
const store = configureStore({ |
||||
reducer: rootReducer, |
||||
middleware: (gDM) => gDM().concat([...middleware]), |
||||
preloadedState: initialState, |
||||
devTools: process.env.NODE_ENV !== 'production', |
||||
}); |
||||
|
||||
sagaMiddleware.run(rootSaga); |
||||
return store; |
||||
}; |
||||
|
||||
export const store = configureAppStore(); |
||||
|
||||
export type AppDispatch = typeof store.dispatch; |
||||
export type RootState = ReturnType<typeof store.getState>; |
||||
@ -0,0 +1,38 @@ |
||||
import { PluginClient } from '@remixproject/plugin'; |
||||
import { createClient } from '@remixproject/plugin-webview'; |
||||
import { store } from './redux/store'; |
||||
import { router } from './App'; |
||||
|
||||
class RemixClient extends PluginClient { |
||||
constructor() { |
||||
super(); |
||||
createClient(this); |
||||
} |
||||
|
||||
startTutorial(name: any, branch: any, id: any): void { |
||||
console.log('start tutorial', name, branch, id); |
||||
void router.navigate('/home'); |
||||
store.dispatch({ |
||||
type: 'workshop/loadRepo', |
||||
payload: { |
||||
name, |
||||
branch, |
||||
id, |
||||
}, |
||||
}); |
||||
} |
||||
|
||||
addRepository(name: any, branch: any) { |
||||
console.log('add repo', name, branch); |
||||
void router.navigate('/home'); |
||||
store.dispatch({ |
||||
type: 'workshop/loadRepo', |
||||
payload: { |
||||
name, |
||||
branch, |
||||
}, |
||||
}); |
||||
} |
||||
} |
||||
|
||||
export default new RemixClient(); |
||||
@ -0,0 +1,5 @@ |
||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom'; |
||||
@ -0,0 +1,23 @@ |
||||
{ |
||||
"extends": "./tsconfig.json", |
||||
"compilerOptions": { |
||||
"outDir": "../../dist/out-tsc", |
||||
"types": ["node"] |
||||
}, |
||||
"files": [ |
||||
"../../node_modules/@nrwl/react/typings/cssmodule.d.ts", |
||||
"../../node_modules/@nrwl/react/typings/image.d.ts" |
||||
], |
||||
"exclude": [ |
||||
"jest.config.ts", |
||||
"**/*.spec.ts", |
||||
"**/*.test.ts", |
||||
"**/*.spec.tsx", |
||||
"**/*.test.tsx", |
||||
"**/*.spec.js", |
||||
"**/*.test.js", |
||||
"**/*.spec.jsx", |
||||
"**/*.test.jsx" |
||||
], |
||||
"include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"] |
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
{ |
||||
"extends": "../../tsconfig.base.json", |
||||
"compilerOptions": { |
||||
"jsx": "react-jsx", |
||||
"allowJs": true, |
||||
"esModuleInterop": true, |
||||
"allowSyntheticDefaultImports": true |
||||
}, |
||||
"files": [], |
||||
"include": [], |
||||
"references": [ |
||||
{ |
||||
"path": "./tsconfig.app.json" |
||||
} |
||||
] |
||||
} |
||||
@ -0,0 +1,92 @@ |
||||
const { composePlugins, withNx } = require('@nrwl/webpack') |
||||
const webpack = require('webpack') |
||||
const TerserPlugin = require("terser-webpack-plugin") |
||||
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin") |
||||
|
||||
// Nx plugins for webpack.
|
||||
module.exports = composePlugins(withNx(), (config) => { |
||||
// Update the webpack config as needed here.
|
||||
// e.g. `config.plugins.push(new MyPlugin())`
|
||||
// add fallback for node modules
|
||||
config.resolve.fallback = { |
||||
...config.resolve.fallback, |
||||
"crypto": require.resolve("crypto-browserify"), |
||||
"stream": require.resolve("stream-browserify"), |
||||
"path": require.resolve("path-browserify"), |
||||
"http": require.resolve("stream-http"), |
||||
"https": require.resolve("https-browserify"), |
||||
"constants": require.resolve("constants-browserify"), |
||||
"os": false, //require.resolve("os-browserify/browser"),
|
||||
"timers": false, // require.resolve("timers-browserify"),
|
||||
"zlib": require.resolve("browserify-zlib"), |
||||
"fs": false, |
||||
"module": false, |
||||
"tls": false, |
||||
"net": false, |
||||
"readline": false, |
||||
"child_process": false, |
||||
"buffer": require.resolve("buffer/"), |
||||
"vm": require.resolve('vm-browserify'), |
||||
} |
||||
|
||||
|
||||
// add externals
|
||||
config.externals = { |
||||
...config.externals, |
||||
solc: 'solc', |
||||
} |
||||
|
||||
// add public path
|
||||
config.output.publicPath = './' |
||||
|
||||
// add copy & provide plugin
|
||||
config.plugins.push( |
||||
new webpack.ProvidePlugin({ |
||||
Buffer: ['buffer', 'Buffer'], |
||||
url: ['url', 'URL'], |
||||
process: 'process/browser', |
||||
}) |
||||
) |
||||
|
||||
// set the define plugin to load the WALLET_CONNECT_PROJECT_ID
|
||||
config.plugins.push( |
||||
new webpack.DefinePlugin({ |
||||
WALLET_CONNECT_PROJECT_ID: JSON.stringify(process.env.WALLET_CONNECT_PROJECT_ID), |
||||
}) |
||||
) |
||||
|
||||
// souce-map loader
|
||||
config.module.rules.push({ |
||||
test: /\.js$/, |
||||
use: ["source-map-loader"], |
||||
enforce: "pre" |
||||
}) |
||||
|
||||
config.ignoreWarnings = [/Failed to parse source map/] // ignore source-map-loader warnings
|
||||
|
||||
|
||||
// set minimizer
|
||||
config.optimization.minimizer = [ |
||||
new TerserPlugin({ |
||||
parallel: true, |
||||
terserOptions: { |
||||
ecma: 2015, |
||||
compress: false, |
||||
mangle: false, |
||||
format: { |
||||
comments: false, |
||||
}, |
||||
}, |
||||
extractComments: false, |
||||
}), |
||||
new CssMinimizerPlugin(), |
||||
]; |
||||
|
||||
config.watchOptions = { |
||||
ignored: /node_modules/ |
||||
} |
||||
|
||||
config.experiments.syncWebAssembly = true |
||||
|
||||
return config; |
||||
}); |
||||
Loading…
Reference in new issue