|
| 1 | +importReactfrom'react' |
| 2 | +import{Collapse,Icon}from'@alifd/next' |
| 3 | +importReactCSSTransitionGroupfrom'react-addons-css-transition-group' |
| 4 | +import'./transition.css' |
| 5 | + |
| 6 | +constPanel=Collapse.Panel |
| 7 | + |
| 8 | +conststyles={ |
| 9 | +container:{ |
| 10 | +position:'relative'as'relative', |
| 11 | +transition:'all .35s', |
| 12 | +}, |
| 13 | +header:{ |
| 14 | +display:'flex'as'flex', |
| 15 | +backgroundColor:'#6a67ce', |
| 16 | +color:'white', |
| 17 | +padding:'0.5rem', |
| 18 | +}, |
| 19 | +title:{ |
| 20 | +fontSize:'1rem', |
| 21 | +}, |
| 22 | +toggle:{ |
| 23 | +display:'flex'as'flex', |
| 24 | +alignItems:'center'as'center', |
| 25 | +width:'1.5rem', |
| 26 | +}, |
| 27 | +} |
| 28 | + |
| 29 | +constNewUserExperienceTutorialCollapsible=()=>{ |
| 30 | +const[expandedKeys,setExpandedKeys]=React.useState<string[]>([]) |
| 31 | +return( |
| 32 | +<CollapseonExpand={setExpandedKeys}expandedKeys={expandedKeys}> |
| 33 | +<Paneltitle="What To Do"> |
| 34 | +<div> |
| 35 | +<p>Update the editor code and press save to to complete the list of "Tasks".</p> |
| 36 | +</div> |
| 37 | +</Panel> |
| 38 | +<Paneltitle="How It Works"> |
| 39 | +<div> |
| 40 | +<p> |
| 41 | + When you press save in the editor, CodeRoad runs tests to check if you completed the current task and can |
| 42 | + continue to the next task. |
| 43 | +</p> |
| 44 | +<br/> |
| 45 | +<p> |
| 46 | + Progress is tracked and advanced by using Git in the background. On startup, CodeRoad launches a new local |
| 47 | + Git repo. New tasks are loaded as new commits, and your task solution code is automatically saved as the |
| 48 | + next Git commit. |
| 49 | +</p> |
| 50 | +</div> |
| 51 | +</Panel> |
| 52 | +<Paneltitle="How to Debug"> |
| 53 | +<p>You can debug a tutorial in a number of ways:</p> |
| 54 | +<br/> |
| 55 | +<ol> |
| 56 | +<li> |
| 57 | + 1. Press save in the editor and use the feedback from failed test messages in the console output. The output |
| 58 | + can be found by opening the integrated VSCode terminal, and selecting the tab "Output". Learn more about the |
| 59 | + integrated terminal in VSCode at {' '} |
| 60 | +<ahref="https://code.visualstudio.com/docs/editor/integrated-terminal"> |
| 61 | + https://code.visualstudio.com/docs/editor/integrated-terminal |
| 62 | +</a> |
| 63 | + . |
| 64 | +</li> |
| 65 | +<br/> |
| 66 | +<li> |
| 67 | + 2. Run the VSCode Debugger located in the left hand icon panel. To start debugging, press the green arrow |
| 68 | + button at the top labelled "RUN AND DEBUG". Learn more about debugging with the VSCode Debugger at |
| 69 | +<ahref="https://code.visualstudio.com/docs/editor/debugging"> |
| 70 | + https://code.visualstudio.com/docs/editor/debugging |
| 71 | +</a> |
| 72 | + . |
| 73 | +</li> |
| 74 | +<br/> |
| 75 | +<li> |
| 76 | + 3. Run the tests in the command line (eg. `npm run test`) and use the output from the tests to debug. Feel |
| 77 | + free to use the integrated VScode terminal noted above or another terminal with the project working |
| 78 | + directory open. . |
| 79 | +</li> |
| 80 | +</ol> |
| 81 | +</Panel> |
| 82 | +<Paneltitle="I'm Stuck"> |
| 83 | +<p>A few tips to help you if you get stuck.</p> |
| 84 | +<ol> |
| 85 | +<li> |
| 86 | + Read the tests. The tests can be found in the test directory and can be read in detail to help you |
| 87 | + understand what's failing. |
| 88 | +</li> |
| 89 | +<br/> |
| 90 | +<li> |
| 91 | + Load the solution. Each step in CodeRoad is stored as a Git commit - including the solution. Load the |
| 92 | + solution by pressing the help icon under the current task, and select the option "load solution". |
| 93 | +</li> |
| 94 | +</ol> |
| 95 | +</Panel> |
| 96 | +<Paneltitle="Contact"> |
| 97 | + We'd love to hear your comments, requests, issues, questions - reach out at{' '} |
| 98 | +<ahref="mailto:coderoadapp@gmail.com">coderoadapp@gmail.com</a>. |
| 99 | +</Panel> |
| 100 | +</Collapse> |
| 101 | +) |
| 102 | +} |
| 103 | + |
| 104 | +interfaceProps{ |
| 105 | +css?:React.CSSProperties |
| 106 | +} |
| 107 | + |
| 108 | +constNewUserExperienceTutorial=(props:Props)=>{ |
| 109 | +const[isOpen,setIsOpen]=React.useState<boolean>(false) |
| 110 | +constonToggle=()=>{ |
| 111 | +setIsOpen(!isOpen) |
| 112 | +} |
| 113 | +return( |
| 114 | +<divcss={{ ...styles.container, ...props.css}}> |
| 115 | +<divcss={styles.header}onClick={onToggle}style={{cursor:'pointer'}}> |
| 116 | +<spancss={styles.toggle}>{isOpen ?<Icontype="close"size="xs"/> :<Icontype="help"size="small"/>}</span> |
| 117 | +<spancss={styles.title}>Help</span> |
| 118 | +</div> |
| 119 | +<ReactCSSTransitionGrouptransitionName="slide"transitionEnterTimeout={500}transitionLeaveTimeout={300}> |
| 120 | +{isOpen&&<NewUserExperienceTutorialCollapsible/>} |
| 121 | +</ReactCSSTransitionGroup> |
| 122 | +</div> |
| 123 | +) |
| 124 | +} |
| 125 | + |
| 126 | +exportdefaultNewUserExperienceTutorial |