diff --git a/apps/learneth/src/pages/StepDetail/index.tsx b/apps/learneth/src/pages/StepDetail/index.tsx index 8ce821cf67..079d182ece 100644 --- a/apps/learneth/src/pages/StepDetail/index.tsx +++ b/apps/learneth/src/pages/StepDetail/index.tsx @@ -1,21 +1,24 @@ -import React, {useEffect} from 'react' -import {useLocation, useNavigate} from 'react-router-dom' +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 { useAppSelector, useAppDispatch } from '../../redux/hooks' import './index.scss' +import remixClient from '../../remix-client' function StepDetailPage() { const navigate = useNavigate() const location = useLocation() const dispatch = useAppDispatch() + const [clonedStep, setClonedStep] = React.useState(null) + const [loading, setLoading] = React.useState(false) 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}, + workshop: { detail, selectedId }, + remixide: { errorLoadingFile, errors, success }, } = useAppSelector((state: any) => state) const entity = detail[selectedId].entities[id] const steps = entity.steps @@ -23,15 +26,47 @@ function StepDetailPage() { console.log(step) useEffect(() => { - dispatch({ - type: 'remixide/displayFile', - payload: step, - }) - dispatch({ - type: 'remixide/save', - payload: {errors: [], success: false}, + + const clonedStep = JSON.parse(JSON.stringify(step)) + const loadFiles = async () => { + if (step.markdown && step.markdown.file && !step.markdown.content) { + console.log('loading md file', step.markdown.file) + clonedStep.markdown.content = (await remixClient.call('contentImport', 'resolve', step.markdown.file)).content + } + if (step.solidity && step.solidity.file && !step.solidity.content) { + console.log('loading sol file', step.solidity.file) + clonedStep.solidity.content = (await remixClient.call('contentImport', 'resolve', step.solidity.file)).content + } + if (step.test && step.test.file && !step.test.content) { + console.log('loading test file', step.test.file) + clonedStep.test.content = (await remixClient.call('contentImport', 'resolve', step.test.file)).content + } + if (step.answer && step.answer.file && !step.answer.content) { + console.log('loading answer file', step.answer.file) + clonedStep.answer.content = (await remixClient.call('contentImport', 'resolve', step.answer.file)).content + } + if(step.js && step.js.file && !step.js.content) { + console.log('loading js file', step.js.file) + clonedStep.js.content = (await remixClient.call('contentImport', 'resolve', step.js.file)).content + } + if(step.vy && step.vy.file && !step.vy.content) { + console.log('loading vy file', step.vy.file) + clonedStep.vy.content = (await remixClient.call('contentImport', 'resolve', step.vy.file)).content + } + } + loadFiles().then(() => { + console.log('displayFile', clonedStep) + setClonedStep(clonedStep) + dispatch({ + type: 'remixide/displayFile', + payload: clonedStep, + }) + dispatch({ + type: 'remixide/save', + payload: { errors: [], success: false }, + }) + window.scrollTo(0, 0) }) - window.scrollTo(0, 0) }, [step]) useEffect(() => { @@ -40,6 +75,10 @@ function StepDetailPage() { } }, [errors, success]) + if(!clonedStep) { + return null + } + return (
@@ -51,13 +90,13 @@ function StepDetailPage() { {errorLoadingFile ? ( <>
-

{step.name}

+

{clonedStep.name}

- {step.answer?.content && ( + {clonedStep.answer?.content && ( - {step.answer?.content && ( + {clonedStep.answer?.content && (