Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Fix/no steps#167

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
ShMcK merged 4 commits intomasterfromfix/no-steps
Mar 28, 2020
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletionsrc/channel/index.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -70,7 +70,6 @@ class Channel implements Channel {
this.send({type:'START_NEW_TUTORIAL'})
return
}
console.log('send LOAD_STORED_TUTORIAL')
// communicate to client the tutorial & stepProgress state
this.send({type:'LOAD_STORED_TUTORIAL',payload:{ tutorial, progress, position}})

Expand Down
25 changes: 16 additions & 9 deletionssrc/channel/state/Position.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import * as G from 'typings/graphql'

constdefaultValue:CR.Position={
levelId:'',
stepId:'',
stepId:null,
}

// position
Expand DownExpand Up@@ -42,18 +42,25 @@ class Position {

// get step
constcurrentLevel:G.Level=levels[lastLevelIndex]
const{ steps}=currentLevel
constlastStepIndex:number|undefined=steps.findIndex((s:G.Step)=>!progress.steps[s.id])
if(lastStepIndex>=steps.length){
thrownewError('Error setting progress step')
letcurrentStepId:string|null
if(!currentLevel.steps.length){
// no steps available for level
currentStepId=null
}else{
// find current step id
const{ steps}=currentLevel
constlastStepIndex:number|undefined=steps.findIndex((s:G.Step)=>!progress.steps[s.id])
if(lastStepIndex>=steps.length){
thrownewError('Error setting progress step')
}
// handle position when last step is complete but "continue" not yet selected
constadjustedLastStepIndex=lastStepIndex===-1 ?steps.length-1 :lastStepIndex
currentStepId=steps[adjustedLastStepIndex].id
}
// handle position when last step is complete but "continue" not yet selected
constadjustedLastStepIndex=lastStepIndex===-1 ?steps.length-1 :lastStepIndex
constcurrentStep:G.Step=steps[adjustedLastStepIndex]

this.value={
levelId:currentLevel.id,
stepId:currentStep.id,
stepId:currentStepId,
}

returnthis.value
Expand Down
2 changes: 1 addition & 1 deletiontypings/index.d.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ export interface StepProgress {
// current tutorial position
exportinterfacePosition{
levelId:string
stepId:string
stepId:string|null
complete?:boolean
}

Expand Down
5 changes: 5 additions & 0 deletionsweb-app/src/components/Router/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,7 @@ import { createMachine } from '../../services/state/machine'
import{useMachine}from'../../services/xstate-react'
importRoutefrom'./Route'
importonErrorfrom'../../services/sentry/onError'
import{LOG_STATE}from'../../environment'

interfaceOutput{
context:T.MachineContext
Expand All@@ -20,6 +21,10 @@ const editor = acquireVsCodeApi()
constuseRouter=():Output=>{
const[state,send]=useMachine<T.MachineContext,any>(createMachine({editorSend:editor.postMessage}))

if(LOG_STATE){
console.log(JSON.stringify(state.value))
}

// event bus listener
React.useEffect(()=>{
constlistener='message'
Expand Down
126 changes: 64 additions & 62 deletionsweb-app/src/containers/Tutorial/LevelPage/Level.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,12 +12,14 @@ const styles = {
page: {
backgroundColor: 'white',
position: 'relative' as 'relative',
height: 'auto',
width: '100%',
},
content: {
display: 'flex' as 'flex',
flexDirection: 'column' as 'column',
padding: 0,
paddingBottom: '5rem',
height: 'auto',
width: '100%',
},
header: {
height: '2rem',
Expand All@@ -26,13 +28,11 @@ const styles = {
lineHeight: '1rem',
padding: '10px 1rem',
},
content: {
text: {
padding: '0rem 1rem',
paddingBottom: '1rem',
},
tasks: {
paddingBottom: '5rem',
},
tasks: {},
steps: {
padding: '1rem 1rem',
},
Expand DownExpand Up@@ -85,8 +85,10 @@ interface Props {
}

const Level = ({ level, onContinue, onLoadSolution, processes, testStatus }: Props) => {
if (!level.steps) {
throw new Error('No Stage steps found')
// @ts-ignore
let currentStep = level.steps.findIndex(s => s.status === 'ACTIVE')
if (currentStep === -1) {
currentStep = level.steps.length
}

const pageBottomRef = React.useRef(null)
Expand All@@ -95,70 +97,70 @@ const Level = ({ level, onContinue, onLoadSolution, processes, testStatus }: Pro
// @ts-ignore
pageBottomRef.current.scrollIntoView({ behavior: 'smooth' })
}
// @ts-ignore
let currentStep = level.steps.findIndex(s => s.status === 'ACTIVE')
if (currentStep === -1) {
currentStep = level.steps.length
}
React.useEffect(scrollToBottom, [currentStep])

return (
<div css={styles.page}>
<div css={styles.header}>
<span>Learn</span>
</div>
<div css={styles.content}>
<h2 css={styles.title}>{level.title}</h2>
<Markdown>{level.content || ''}</Markdown>
</div>

<div css={styles.tasks}>
<div css={styles.header}>Tasks</div>
<div css={styles.steps}>
{level.steps.map((step: (G.Step & { status: T.ProgressStatus }) | null, index: number) => {
if (!step) {
return null
}
return (
<Step
key={step.id}
order={index + 1}
status={step.status}
content={step.content}
onLoadSolution={onLoadSolution}
/>
)
})}
<div css={styles.header}>
<span>Learn</span>
</div>
<div css={styles.text}>
<h2 css={styles.title}>{level.title}</h2>
<Markdown>{level.content || ''}</Markdown>
</div>

{level.steps.length ? (
<div css={styles.tasks}>
<div css={styles.header}>Tasks</div>
<div css={styles.steps}>
{level.steps.map((step: (G.Step & { status: T.ProgressStatus }) | null, index: number) => {
if (!step) {
return null
}
return (
<Step
key={step.id}
order={index + 1}
status={step.status}
content={step.content}
onLoadSolution={onLoadSolution}
/>
)
})}
</div>
</div>
) : null}

<div ref={pageBottomRef} />
</div>

{(testStatus || processes.length > 0) && (
<div css={styles.processes}>
<ProcessMessages processes={processes} testStatus={testStatus} />
</div>
)}
{(testStatus || processes.length > 0) && (
<div css={styles.processes}>
<ProcessMessages processes={processes} testStatus={testStatus} />
</div>
)}

<div css={styles.nux}>
<NuxTutorial onLoadSolution={onLoadSolution} />
</div>
<div css={styles.nux}>
<NuxTutorial onLoadSolution={onLoadSolution} />
</div>

<div css={styles.footer}>
<span>
{typeof level.index === 'number' ? `${level.index + 1}. ` : ''}
{level.title}
</span>
<span>
{level.status === 'COMPLETE' ? (
<Button type="primary" onClick={onContinue}>
Continue
</Button>
) : (
<span css={styles.taskCount}>
{currentStep} of {level.steps.length} tasks
</span>
)}
</span>
<div css={styles.footer}>
<span>
{typeof level.index === 'number' ? `${level.index + 1}. ` : ''}
{level.title}
</span>
<span>
{level.status === 'COMPLETE' || !level.steps.length ? (
<Button type="primary" onClick={onContinue}>
Continue
</Button>
) : (
<span css={styles.taskCount}>
{currentStep} of {level.steps.length} tasks
</span>
)}
</span>
</div>
</div>
</div>
)
Expand Down
1 change: 1 addition & 0 deletionsweb-app/src/environment.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,3 +12,4 @@ export const DEBUG: boolean = (process.env.REACT_APP_DEBUG || '').toLowerCase()
export const VERSION: string = process.env.VERSION || 'unknown'
export const NODE_ENV: string = process.env.NODE_ENV || 'production'
export const AUTH_TOKEN: string | null = process.env.AUTH_TOKEN || null
export const LOG_STATE: boolean = (process.env.LOG_STATE || '').toLowerCase() === 'true'
4 changes: 2 additions & 2 deletionsweb-app/src/services/selectors/position.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,14 +5,14 @@ import * as tutorial from './tutorial'

export const defaultPosition = () => ({
levelId: '',
stepId:'',
stepId:null,
})

export const initialPosition = createSelector(tutorial.currentVersion, (version: G.TutorialVersion) => {
const level = version.data.levels[0]
const position: CR.Position = {
levelId: level.id,
stepId: level.steps[0].id,
stepId: level.steps.length ? level.steps[0].id : null,
}
return position
})
20 changes: 6 additions & 14 deletionsweb-app/src/services/selectors/tutorial.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -41,17 +41,9 @@ export const currentLevel = (context: MachineContext): G.Level =>
},
)(context)

export const currentStep = (context: MachineContext): G.Step =>
createSelector(
currentLevel,
(level: G.Level): G.Step => {
const steps: G.Step[] = level.steps
const step: G.Step | undefined = steps.find((s: G.Step) => s.id === context.position.stepId)
if (!step) {
const error = new Error(`No Step found for Level ${level.id}. Expected step ${context.position.stepId}`)
onError(error)
throw error
}
return step
},
)(context)
export const currentStep = (context: MachineContext): G.Step | null =>
createSelector(currentLevel, (level: G.Level): G.Step | null => {
const steps: G.Step[] = level.steps
const step: G.Step | null = steps.find((s: G.Step) => s.id === context.position.stepId) || null
return step
})(context)
Loading
[8]ページ先頭
©2009-2025 Movatter.jp