forked from Mastodon/mastoradio-la-radio-di-mastodon
refact from scratch form
This commit is contained in:
wryk
parent
1f7050bccf
commit
02166f9b86
|
|
@ -3120,11 +3120,6 @@
|
|||
"integrity": "sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==",
|
||||
"dev": true
|
||||
},
|
||||
"fn-name": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fn-name/-/fn-name-2.0.1.tgz",
|
||||
"integrity": "sha1-UhTXU3pNBqSjAcDMJi/rhBiAAuc="
|
||||
},
|
||||
"for-in": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
|
||||
|
|
@ -4680,11 +4675,6 @@
|
|||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
|
||||
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
|
||||
},
|
||||
"lodash-es": {
|
||||
"version": "4.17.15",
|
||||
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
|
||||
"integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
|
||||
},
|
||||
"lodash.clone": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.clone/-/lodash.clone-4.5.0.tgz",
|
||||
|
|
@ -6247,11 +6237,6 @@
|
|||
"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
|
||||
"dev": true
|
||||
},
|
||||
"property-expr": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/property-expr/-/property-expr-1.5.1.tgz",
|
||||
"integrity": "sha512-CGuc0VUTGthpJXL36ydB6jnbyOf/rAHFvmVrJlH+Rg0DqqLFQGAP6hIaxD/G0OAmBJPhXDHuEJigrp0e0wFV6g=="
|
||||
},
|
||||
"psl": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/psl/-/psl-1.7.0.tgz",
|
||||
|
|
@ -7242,22 +7227,6 @@
|
|||
"integrity": "sha512-jRk7jdYULb9V4Z+0BKlfofombmdIIQph4leojrOSHzvZBRmCredz7fZsJBiUDLO6h83XYekuLbwfy5zx1i95GQ==",
|
||||
"dev": true
|
||||
},
|
||||
"svelte-forms-lib": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/svelte-forms-lib/-/svelte-forms-lib-1.0.4.tgz",
|
||||
"integrity": "sha512-6GuufV5AX/B8vQjE5uJS0rZSiAvjs+G8Apz8WYUaTeVLOirx0InfK5i7jgoA+J1uLFBg7+P5c4Icam8bjuKvkA==",
|
||||
"requires": {
|
||||
"property-expr": "1.5.1",
|
||||
"svelte": "3.16.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"svelte": {
|
||||
"version": "3.16.5",
|
||||
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.16.5.tgz",
|
||||
"integrity": "sha512-iYOhJc7iczaonycuKjPgmy1lthhBoDOQo5UVhgKJRd3XYRdnYPPb0LvvJ0t7jqu5+15S0msMm06WSOKUvhEZsw=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"svelte-pipeable-store": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/svelte-pipeable-store/-/svelte-pipeable-store-1.0.3.tgz",
|
||||
|
|
@ -7303,11 +7272,6 @@
|
|||
"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
|
||||
"dev": true
|
||||
},
|
||||
"synchronous-promise": {
|
||||
"version": "2.0.10",
|
||||
"resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.10.tgz",
|
||||
"integrity": "sha512-6PC+JRGmNjiG3kJ56ZMNWDPL8hjyghF5cMXIFOKg+NiwwEZZIvxTWd0pinWKyD227odg9ygF8xVhhz7gb8Uq7A=="
|
||||
},
|
||||
"teeny-request": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/teeny-request/-/teeny-request-6.0.1.tgz",
|
||||
|
|
@ -7440,11 +7404,6 @@
|
|||
"integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
|
||||
"dev": true
|
||||
},
|
||||
"toposort": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
|
||||
"integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA="
|
||||
},
|
||||
"tough-cookie": {
|
||||
"version": "2.5.0",
|
||||
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
|
||||
|
|
@ -8001,20 +7960,6 @@
|
|||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"yup": {
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/yup/-/yup-0.28.1.tgz",
|
||||
"integrity": "sha512-xSHMZA7UyecSG/CCTDCtnYZMjBrYDR/C7hu0fMsZ6UcS/ngko4qCVFbw+CAmNtHlbItKkvQ3YXITODeTj/dUkw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"fn-name": "~2.0.1",
|
||||
"lodash": "^4.17.11",
|
||||
"lodash-es": "^4.17.11",
|
||||
"property-expr": "^1.5.0",
|
||||
"synchronous-promise": "^2.0.6",
|
||||
"toposort": "^2.0.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,11 +32,9 @@
|
|||
"iter-tools": "^7.0.0-rc.0",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
"route-parser": "0.0.5",
|
||||
"svelte-forms-lib": "^1.0.4",
|
||||
"svelte-pipeable-store": "^1.0.3",
|
||||
"svelte-portal": "^0.1.0",
|
||||
"svelte-routing": "^1.4.0",
|
||||
"yup": "^0.28.1"
|
||||
"svelte-routing": "^1.4.0"
|
||||
},
|
||||
"staticFiles": {
|
||||
"staticPath": "public",
|
||||
|
|
|
|||
|
|
@ -9,12 +9,17 @@
|
|||
<div class="settings-side__subtitle">The mastodon instance from the toods are fetched</div>
|
||||
</div>
|
||||
<div class="settings-main">
|
||||
<input class="f-size-full error" type="text" id="domain" name="domain" on:change={handleChange} bind:value={$form.domain}>
|
||||
<div class="notif notif--error">Le format n'est pas bon, déso</div>
|
||||
<input
|
||||
class="f-size-full"
|
||||
type="text" id="domain"
|
||||
name="domain"
|
||||
on:change={event => $domainValue = event.target.value}
|
||||
value={$domainValue}
|
||||
>
|
||||
{#if !$domainState.valid}
|
||||
<div class="notif notif--error">{$domainState.error}</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if $errors.domain}
|
||||
<span>{$errors.domain}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="settings-line">
|
||||
<div class="settings-side">
|
||||
|
|
@ -22,11 +27,17 @@
|
|||
<div class="settings-side__subtitle">What hashtags are fetched</div>
|
||||
</div>
|
||||
<div class="settings-main">
|
||||
<TagInput on:change={handleCustomChange('hashtags')} bind:value={$form.hashtags} />
|
||||
<TagInput
|
||||
on:change={event => $hashtagsValue = event.detail}
|
||||
value={$hashtagsValue}
|
||||
/>
|
||||
{#if !$hashtagsState.valid}
|
||||
<div class="notif notif--error">{$hashtagsState.error}</div>
|
||||
{/if}
|
||||
{#if $hashtagsValue.length > 5}
|
||||
<div class="notif notif--warning">Too many hashtags can impair performances and network consumption.</div>
|
||||
{/if}
|
||||
</div>
|
||||
<!-- {#if $errors.hashtags}
|
||||
<span>{$errors.hashtags}{console.log($errors.hashtags)}</span>
|
||||
{/if} -->
|
||||
</div>
|
||||
<!-- <div class="settings-line">
|
||||
<div class="settings-side">
|
||||
|
|
@ -46,15 +57,14 @@
|
|||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<button class="btn btn--primary w100" type="submit">Save the changes</button>
|
||||
<button class="btn btn--primary w100" type="submit" disabled={!$valid}>Save the changes</button>
|
||||
</form>
|
||||
</ContextPage>
|
||||
</Portal>
|
||||
|
||||
<script>
|
||||
import { getContext } from 'svelte'
|
||||
import { createForm } from 'svelte-forms-lib'
|
||||
import * as yup from 'yup'
|
||||
import { writable, derived } from 'svelte/store'
|
||||
import Portal from 'svelte-portal'
|
||||
import ContextPage from '/components/ContextPage'
|
||||
import TagInput from '/components/TagInput'
|
||||
|
|
@ -62,44 +72,49 @@
|
|||
const domain = getContext('domain')
|
||||
const hashtags = getContext('hashtags')
|
||||
|
||||
const {
|
||||
form,
|
||||
errors,
|
||||
handleChange,
|
||||
handleSubmit
|
||||
} = createForm({
|
||||
initialValues: {
|
||||
domain: $domain,
|
||||
hashtags: $hashtags
|
||||
},
|
||||
// validationSchema: yup.object().shape({
|
||||
// domain: yup.string()
|
||||
// .required()
|
||||
// .trim()
|
||||
// .test(
|
||||
// 'is-valid-domain',
|
||||
// '${path} is not a valid domain',
|
||||
// async domain => (await fetch(`https://${domain}/api/v1/instance`)).status === 200
|
||||
// ),
|
||||
// // hashtags: yup.array()
|
||||
// // .required()
|
||||
// // .of(yup.string()
|
||||
// // .ensure()
|
||||
// // .required()
|
||||
// // .trim()
|
||||
// // .matches('/[a-z0-9]+/i')
|
||||
// // )
|
||||
// // .min(1)
|
||||
// // .min(5)
|
||||
// }),
|
||||
onSubmit: values => {
|
||||
$domain = values.domain
|
||||
$hashtags = values.hashtags
|
||||
location.reload() // for now
|
||||
const domainValue = writable($domain)
|
||||
const domainState = derived([domainValue], async ([$domainValue], set) => {
|
||||
if ($domainValue === '') {
|
||||
set({ valid: false, error: 'A Mastodon instance\'s domain is required.' })
|
||||
} else {
|
||||
try {
|
||||
const response = await fetch(`https://${$domainValue}/api/v1/instance`)
|
||||
const instance = await response.json()
|
||||
|
||||
if (response.ok) {
|
||||
set({ valid: true, error: null })
|
||||
} else {
|
||||
set({ valid: false, error: 'Domain is not a mastodon instance.' })
|
||||
}
|
||||
} catch (error) {
|
||||
set({ valid: false, error: 'Network error when accessing domain. This might be an internet access problem or a typing mistake.' })
|
||||
}
|
||||
}
|
||||
}, { valid: false, error: '' })
|
||||
|
||||
const hashtagsValue = writable($hashtags)
|
||||
const hashtagsState = derived([hashtagsValue], ([$hashtagsValue]) => {
|
||||
if ($hashtagsValue.some(hashtag => !/[a-z0-9]+/i.test(hashtag))) {
|
||||
return { valid: false, error: 'Hashtags can only contains alphanumeric characters.' }
|
||||
} else if ($hashtagsValue.length === 0) {
|
||||
return { valid: false, error: 'At least one hashtag is required.' }
|
||||
} else {
|
||||
return { valid: true, error: null }
|
||||
}
|
||||
})
|
||||
|
||||
const handleCustomChange = name => event => handleChange({ target: { name, value: event.detail } })
|
||||
const valid = derived([domainState, hashtagsState], states => states.every(state => state.valid))
|
||||
|
||||
const handleSubmit = event => {
|
||||
event.preventDefault()
|
||||
|
||||
if ($valid) {
|
||||
$domain = $domainValue
|
||||
$hashtags = $hashtagsValue
|
||||
location.reload() // for now
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let open = false
|
||||
|
||||
|
|
|
|||
|
|
@ -14,19 +14,14 @@
|
|||
|
||||
$: tags = value
|
||||
|
||||
const update = () => {
|
||||
value = tags
|
||||
dispatch('change', tags)
|
||||
}
|
||||
|
||||
const add = tag => {
|
||||
tags = [...tags, tag]
|
||||
update()
|
||||
dispatch('change', tags)
|
||||
}
|
||||
|
||||
const remove = index => {
|
||||
tags = [...tags.slice(0, index), ...tags.slice(index + 1)]
|
||||
update()
|
||||
dispatch('change', tags)
|
||||
}
|
||||
|
||||
const onKeyDown = event => {
|
||||
|
|
@ -34,6 +29,12 @@
|
|||
|
||||
switch (keyCode) {
|
||||
case 13:
|
||||
if (value === '') {
|
||||
break
|
||||
}
|
||||
|
||||
case 32:
|
||||
case 188:
|
||||
event.preventDefault()
|
||||
|
||||
if (value !== '' && tags.indexOf(value) === -1) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue