11import React , { useState , useEffect } from 'react' ;
22import API from '../API/api' ;
3- import { Link } from 'react-router-dom' ;
3+ import { Link , useParams } from 'react-router-dom' ;
44import { ArrowLeftCircle } from 'react-bootstrap-icons' ;
55import { Card , Button , Row , Col , Container } from 'react-bootstrap'
66import EditNameDescModal from '../Home/EditNameDescModal'
@@ -10,28 +10,21 @@ import StepsCard from './StepsCard'
1010import { SimInfo } from '../API/SimInfo' ;
1111import { Step } from '../API/Step' ;
1212
13- type SimulationProps = {
14- match : {
15- params : {
16- id : string ;
17- }
18- }
19- }
20-
21- const Simulation = ( props :SimulationProps ) => {
13+ const Simulation = ( ) => {
14+ const { id = '' } = useParams < { id : string } > ( ) ;
2215 const [ sim , setSim ] = useState < SimInfo > ( API . emptySim ( ) ) ;
2316 const [ simsteps , setSimsteps ] = useState < Array < Step > > ( [ ] ) ;
2417 const [ showsimeditmodal , setShowsimeditmodal ] = useState < boolean > ( false ) ;
2518
2619 useEffect ( ( ) => {
27- readsim ( props . match . params . id ) ;
28- } , [ props . match . params . id ] ) ;
20+ readsim ( id ) ;
21+ } , [ id ] ) ;
2922
3023 const handlesimeditshow = ( ) => setShowsimeditmodal ( true ) ;
3124 const handlesimeditclose = ( ) => setShowsimeditmodal ( false ) ;
3225
33- const readsim = ( id :string ) => {
34- API . get ( id ) . then ( sresp => {
26+ const readsim = ( simid :string ) => {
27+ API . get ( simid ) . then ( sresp => {
3528 setSim ( sresp ) ;
3629 API . getSteps ( sresp ) . then ( steps => {
3730 setSimsteps ( steps ) ;
0 commit comments