wip(lab): Moved error to its own component
This commit is contained in:
Joost De Cock
parent
979f0c61d4
commit
9495e9207c
2 changed files with 62 additions and 69 deletions
|
|
@ -1,17 +1,65 @@
|
||||||
|
import { useState } from 'react'
|
||||||
import Robot from 'shared/components/robot/index.js'
|
import Robot from 'shared/components/robot/index.js'
|
||||||
import Events from '../events.js'
|
import Popout from 'shared/components/popout.js'
|
||||||
import { useTranslation } from 'next-i18next'
|
import { useTranslation } from 'next-i18next'
|
||||||
|
|
||||||
const Error = props => {
|
const Error = ({ draft, patternProps, error, updateGist }) => {
|
||||||
|
|
||||||
const { t } = useTranslation(['errors'])
|
const { t } = useTranslation(['errors'])
|
||||||
|
const [share, setShare] = useState(false)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mt-12">
|
<div className="max-w-4xl m-auto">
|
||||||
<div className="flex flex-row items-center justify-around">
|
<Popout warning>
|
||||||
<h1>{t('errors:something')}</h1>
|
<div className="flex flex-row justify-between">
|
||||||
<div className="max-w-96"><Robot pose='fail' embed/></div>
|
<div>
|
||||||
|
<h3>{t('errors:something')}</h3>
|
||||||
|
<p>Don't be alarmed, but we ran into some trouble while drafting this pattern.</p>
|
||||||
</div>
|
</div>
|
||||||
<Events events={props.draft.events} />
|
<Robot pose='fail' />
|
||||||
|
</div>
|
||||||
|
</Popout>
|
||||||
|
<Popout tip>
|
||||||
|
<h3>Would you like to report this problem?</h3>
|
||||||
|
<p>
|
||||||
|
You can help us <strong>make FreeSewing better by reporting this problem</strong>.
|
||||||
|
</p>
|
||||||
|
<p>If you choose to report this:</p>
|
||||||
|
<ul className="list-disc list-inside ml-4 text-xl">
|
||||||
|
<li>
|
||||||
|
We will compile a <strong>crash report</strong> that contains everything needed <strong>to recreate this problem</strong>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
We will include <strong>personal data</strong> such as your <strong>username</strong>, <strong>
|
||||||
|
email address</strong> and <strong>measurements</strong>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
We will share this report and the data in it with <a className="text-primary font-bold"
|
||||||
|
href="https://github.com/orgs/freesewing/teams/bughunters">FreeSewing's bughunters team</a> who will investigate the problem on your behalf
|
||||||
|
</li>
|
||||||
|
<li>Your personal data will <strong>not be shared publicly</strong></li>
|
||||||
|
</ul>
|
||||||
|
<div className="form-control">
|
||||||
|
<label className="cursor-pointer flex flex-row gap-4 my-4">
|
||||||
|
<input type="checkbox" checked={share} className="checkbox checkbox-primary" onChange={() => setShare(!share)}/>
|
||||||
|
<span className="label-text text-xl">I agree to the use of my personal data for the purposes outlined above</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
<button disabled={!share} className="btn btn-primary">Report this</button>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
If you rather not share any info, or investigate the problem yourself, you can do so:
|
||||||
|
</p>
|
||||||
|
<ul className="list-disc list-inside ml-4 text-xl">
|
||||||
|
<li>
|
||||||
|
Check the <button className="btn-link" onClick={() => updateGist(['_state', 'view'], 'events')}>
|
||||||
|
<strong>{patternProps.events.error.length} errors</strong> and <strong>
|
||||||
|
{patternProps.events.warning.length} warnings</strong></button>
|
||||||
|
</li>
|
||||||
|
<li>Check the partially rendered pattern below to see which areas are problematic</li>
|
||||||
|
</ul>
|
||||||
|
</Popout>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,14 @@
|
||||||
import { useState } from 'react'
|
|
||||||
import SvgWrapper from './svg-wrapper'
|
import SvgWrapper from './svg-wrapper'
|
||||||
import Error from './error.js'
|
import Error from './error.js'
|
||||||
import Popout from 'shared/components/popout.js'
|
|
||||||
import Robot from 'shared/components/robot/index.js'
|
import Robot from 'shared/components/robot/index.js'
|
||||||
|
|
||||||
const LabDraft = props => {
|
const LabDraft = props => {
|
||||||
const { app, draft, pattern, gist, updateGist, unsetGist, feedback } = props
|
const { app, draft, pattern, gist, updateGist, unsetGist, feedback } = props
|
||||||
|
|
||||||
const [share, setShare] = useState(false)
|
|
||||||
if (!draft) return null
|
if (!draft) return null
|
||||||
|
|
||||||
if (gist?.renderer === 'svg') {
|
|
||||||
// Render as SVG
|
// Render as SVG
|
||||||
|
if (gist?.renderer === 'svg') {
|
||||||
let svg
|
let svg
|
||||||
try { svg = draft.render() }
|
try { svg = draft.render() }
|
||||||
catch(error) {
|
catch(error) {
|
||||||
|
|
@ -23,70 +20,18 @@ const LabDraft = props => {
|
||||||
|
|
||||||
// Render as React
|
// Render as React
|
||||||
let patternProps = {}
|
let patternProps = {}
|
||||||
try { patternProps = draft.draft().getRenderProps() }
|
try { patternProps = draft.getRenderProps() }
|
||||||
catch(error) {
|
catch(error) {
|
||||||
console.log('Failed to get render props for pattern', error)
|
console.log('Failed to get render props for pattern', error)
|
||||||
return <Error error={error} {...props} />
|
return <Error error={error} {...props} />
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle broken drafts
|
|
||||||
let error = null
|
|
||||||
if (patternProps.events.error.length > 0) {
|
|
||||||
error = (
|
|
||||||
<Popout warning>
|
|
||||||
<div className="flex flex-row justify-between">
|
|
||||||
<div>
|
|
||||||
<h3>Got {patternProps.events.error.length} problems and a stitch ain't one</h3>
|
|
||||||
<p>Don't be alarmed, but we ran into some trouble while drafting this pattern.</p>
|
|
||||||
<h4>Help us make FreeSewing better</h4>
|
|
||||||
<p>
|
|
||||||
If you like puzzles, you can try to figure out what went wrong:
|
|
||||||
</p>
|
|
||||||
<ul className="list-disc list-inside ml-4 text-xl">
|
|
||||||
<li>
|
|
||||||
Check the <button className="btn-link" onClick={() => updateGist(['_state', 'view'], 'events')}>
|
|
||||||
<strong>{patternProps.events.error.length} errors</strong> and <strong>
|
|
||||||
{patternProps.events.warning.length} warnings</strong></button>
|
|
||||||
</li>
|
|
||||||
<li>Check the partially rendered pattern below to see which areas are problematic</li>
|
|
||||||
</ul>
|
|
||||||
<p>
|
|
||||||
Alternatively, you can escalate this. Which means that:
|
|
||||||
</p>
|
|
||||||
<ul className="list-disc list-inside ml-4 text-xl">
|
|
||||||
<li>
|
|
||||||
We will compile a <strong>crash report</strong> that contains everything needed <strong>to recreate this problem</strong>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
We will include <strong>personal data</strong> such as your <strong>username</strong>, <strong>
|
|
||||||
email address</strong> and <strong>measurements</strong>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
We will share this report and the data in it with <a className="text-primary font-bold"
|
|
||||||
href="https://github.com/orgs/freesewing/teams/bughunters">FreeSewing's bughunters team</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<div className="form-control">
|
|
||||||
<label className="cursor-pointer flex flex-row gap-4 my-4">
|
|
||||||
<input type="checkbox" checked={share} className="checkbox checkbox-primary" onChange={() => setShare(!share)}/>
|
|
||||||
<span className="label-text text-xl">I agree to the use of my personal data for this purpose</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
<button disabled={!share} className="btn btn-primary">Escalate this</button>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<Robot pose='fail' />
|
|
||||||
</div>
|
|
||||||
</Popout>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
console.log(patternProps)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{error}
|
{(!patternProps || patternProps.events.error.length > 0)
|
||||||
|
? <Error draft={draft} patternProps={patternProps} updateGist={updateGist} />
|
||||||
|
: null
|
||||||
|
}
|
||||||
<SvgWrapper {...{ draft, patternProps, gist, updateGist, unsetGist, app, feedback }} />
|
<SvgWrapper {...{ draft, patternProps, gist, updateGist, unsetGist, app, feedback }} />
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue