add parsing of hashtags, clean up
This commit is contained in:
parent
7a402fa02e
commit
7415768e49
|
|
@ -7,6 +7,10 @@
|
|||
"": {
|
||||
"name": "notes",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"linkify-plugin-hashtag": "^3.0.4",
|
||||
"linkifyjs": "^3.0.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
|
||||
"svelte": "^3.44.0",
|
||||
|
|
@ -493,6 +497,19 @@
|
|||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/linkify-plugin-hashtag": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/linkify-plugin-hashtag/-/linkify-plugin-hashtag-3.0.4.tgz",
|
||||
"integrity": "sha512-GXVzS0VUNykfud6aiuuT0XgR1Cq5JJ40GcJzhwSbaRLYY2OwntvWjtD1D8rNPdFC3yOHAx8CIqQZxXNJl8nGjA==",
|
||||
"peerDependencies": {
|
||||
"linkifyjs": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/linkifyjs": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-3.0.5.tgz",
|
||||
"integrity": "sha512-1Y9XQH65eQKA9p2xtk+zxvnTeQBG7rdAXSkUG97DmuI/Xhji9uaUzaWxRj6rf9YC0v8KKHkxav7tnLX82Sz5Fg=="
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.26.2",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.2.tgz",
|
||||
|
|
@ -940,6 +957,17 @@
|
|||
"integrity": "sha512-8QADVssbrFjivHWQU7KkMgptGTl6WAcSdlbBPY4uNF+mWr6DGcKrvY2w4FQJoXch7+fKMjj0dRrL75vk3k23OA==",
|
||||
"dev": true
|
||||
},
|
||||
"linkify-plugin-hashtag": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/linkify-plugin-hashtag/-/linkify-plugin-hashtag-3.0.4.tgz",
|
||||
"integrity": "sha512-GXVzS0VUNykfud6aiuuT0XgR1Cq5JJ40GcJzhwSbaRLYY2OwntvWjtD1D8rNPdFC3yOHAx8CIqQZxXNJl8nGjA==",
|
||||
"requires": {}
|
||||
},
|
||||
"linkifyjs": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-3.0.5.tgz",
|
||||
"integrity": "sha512-1Y9XQH65eQKA9p2xtk+zxvnTeQBG7rdAXSkUG97DmuI/Xhji9uaUzaWxRj6rf9YC0v8KKHkxav7tnLX82Sz5Fg=="
|
||||
},
|
||||
"magic-string": {
|
||||
"version": "0.26.2",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.2.tgz",
|
||||
|
|
|
|||
|
|
@ -12,5 +12,9 @@
|
|||
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
|
||||
"svelte": "^3.44.0",
|
||||
"vite": "^2.9.9"
|
||||
},
|
||||
"dependencies": {
|
||||
"linkify-plugin-hashtag": "^3.0.4",
|
||||
"linkifyjs": "^3.0.5"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,31 +1,48 @@
|
|||
<script>
|
||||
import MainInput from './lib/MainInput.svelte'
|
||||
import NoteList from './lib/NoteList.svelte'
|
||||
import Note from './lib/Note.svelte'
|
||||
import Storage from './storage'
|
||||
import {createNote, toggleDoneState} from './note'
|
||||
|
||||
const storage = new Storage()
|
||||
let notes = storage.getNotes()
|
||||
let hasNotes = notes.length > 0
|
||||
let clearConfirm = false
|
||||
|
||||
function handleNewNote(e) {
|
||||
console.log(e)
|
||||
notes.push({
|
||||
title: e.detail,
|
||||
tags: ["one", "two"],
|
||||
done: false
|
||||
})
|
||||
notes.push(createNote(e.detail))
|
||||
notes = notes // Trigger reactiveness
|
||||
|
||||
storage.saveNotes(notes)
|
||||
}
|
||||
|
||||
function handleToggleNote(e) {
|
||||
function handleToggle(e) {
|
||||
notes = toggleDoneState(notes, e.detail.created)
|
||||
|
||||
storage.saveNotes(notes)
|
||||
}
|
||||
|
||||
function handleClear(e) {
|
||||
if (clearConfirm === false) {
|
||||
clearConfirm = true
|
||||
} else {
|
||||
clearConfirm = false
|
||||
notes = notes.filter(note => !note.done)
|
||||
storage.saveNotes(notes)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<MainInput on:added={handleNewNote} />
|
||||
<NoteList notes={notes} on:toggle={handleToggleNote} />
|
||||
|
||||
<section class="notes">
|
||||
{#each notes as note}
|
||||
<Note note={note} on:toggle={handleToggle} />
|
||||
{/each}
|
||||
</section>
|
||||
|
||||
<button on:click={handleClear} class:confirm={clearConfirm}>Clear finished notes</button>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
|
|
@ -56,4 +73,18 @@
|
|||
max-width: 50rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.notes {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
background: var(--gray-200);
|
||||
padding: 0.5rem;
|
||||
border: 1px solid var(--gray-300);
|
||||
}
|
||||
|
||||
button.confirm {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,65 +0,0 @@
|
|||
<script>
|
||||
import logo from './assets/svelte.png'
|
||||
import Counter from './lib/Counter.svelte'
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<img src={logo} alt="Svelte Logo" />
|
||||
<h1>Hello world!</h1>
|
||||
|
||||
<Counter />
|
||||
|
||||
<p>
|
||||
Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte
|
||||
apps.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Check out <a href="https://github.com/sveltejs/kit#readme">SvelteKit</a> for
|
||||
the officially supported framework, also powered by Vite!
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
main {
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 16rem;
|
||||
width: 16rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #ff3e00;
|
||||
text-transform: uppercase;
|
||||
font-size: 4rem;
|
||||
font-weight: 100;
|
||||
line-height: 1.1;
|
||||
margin: 2rem auto;
|
||||
max-width: 14rem;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 14rem;
|
||||
margin: 1rem auto;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
h1 {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,19 +5,11 @@
|
|||
export let note = {}
|
||||
|
||||
function toggle(e) {
|
||||
dispatch('toggle', note.title)
|
||||
dispatch('toggle', note)
|
||||
}
|
||||
</script>
|
||||
|
||||
<article class="note flex" class:done={note.done} class:todo={!note.done}>
|
||||
|
||||
<aside class="check">
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={note.done}
|
||||
on:change={toggle} />
|
||||
</aside>
|
||||
|
||||
<article class="note flex" class:done={note.done} class:todo={!note.done} on:click={toggle}>
|
||||
<div class="title">
|
||||
{note.title}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,24 +0,0 @@
|
|||
<script>
|
||||
import Note from './Note.svelte'
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
function handleToggle(e) {
|
||||
dispatch("toggle", e.detail)
|
||||
}
|
||||
|
||||
export let notes = []
|
||||
|
||||
</script>
|
||||
|
||||
<section>
|
||||
{#each notes as note}
|
||||
<Note note={note} on:toggle={handleToggle} />
|
||||
{/each}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
section {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import * as linkify from 'linkifyjs'
|
||||
import 'linkify-plugin-hashtag'
|
||||
|
||||
export function createNote(noteTitle) {
|
||||
const hashtags = linkify.find(noteTitle, 'hashtag')
|
||||
const tags = hashtags.map(entry => entry.value.slice(1))
|
||||
const title = hashtags.reduce(removeHashtag, noteTitle)
|
||||
|
||||
return {
|
||||
title,
|
||||
tags,
|
||||
done: false,
|
||||
created: Date.now()
|
||||
}
|
||||
}
|
||||
|
||||
export function toggleDoneState(notes, id) {
|
||||
notes.map(note => {
|
||||
if (note.created === id) {
|
||||
// return a new object
|
||||
return {
|
||||
...note,
|
||||
done: !note.done
|
||||
};
|
||||
}
|
||||
|
||||
// return the same object
|
||||
return note;
|
||||
});
|
||||
}
|
||||
|
||||
function removeHashtag(newTitle, hashtag) {
|
||||
return newTitle.replace(hashtag.value, '').trim();
|
||||
}
|
||||
|
|
@ -13,7 +13,6 @@ export default class Storage {
|
|||
}
|
||||
|
||||
saveNotes(notes) {
|
||||
console.log(notes)
|
||||
localStorage.setItem(`${this.prefix}-notes`, JSON.stringify(notes))
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue