New Student Form - MagnoliaJS 2019

README.md

Created with svelte.technology/repl

App.svelte

<script>
	import NewStudentForm from './NewStudentForm.svelte'
	import CurrentStudentsList from './CurrentStudentsList.svelte'
	import TimezoneGroups from './TimezoneGroups.svelte'
	
</script>

<NewStudentForm />
<CurrentStudentsList />
<TimezoneGroups />

CurrentStudentsList.svelte

<script>
	import { students } from './students.js'
</script>

<h2>Current Students</h2>
{#each $students as student}
<p>{student.name} - {student.timezone}</p>
{:else}
<p>No Students!</p>
{/each}

meta.json

{
  "svelte": true
}

NewStudentForm.svelte

<form on:submit={addNewStudent}>
	<input bind:value={name}>
	<input bind:value={timezone}>
	<button>New Student!</button>
</form>
<script>
	import { students } from './students.js'
	let name = ''
	let timezone = ''
	
	function addNewStudent(event) {
		event.preventDefault()
		students.update(currentStudents =>
			[...currentStudents, { name, timezone } ]
    )
		event.target.reset()
	}
</script>

students.js

import { writable } from 'svelte/store'

export const students = writable([])

timezoneGroups.js

import { derived } from 'svelte/store'
import { students } from './students.js'

export const timezoneGroups = derived(
	students,
	students => groupByTimezone(students),
	[]
)

function groupByTimezone(students) {
	const groups = {}
	
	for (const {name, timezone} of students) {
		if (groups[timezone]) {
			groups[timezone].push(name)
		} else {
			groups[timezone] = [name]
		}
	}
	
	const result = Object.entries(groups)
		           .map(([timezone, students]) =>
										 ({timezone, students}))
	
	console.log(result)
	return result
}

TimezoneGroups.svelte

<script>
	import { timezoneGroups } from './timezoneGroups.js'
</script>

<h2>Timezone Groups</h2>
{#each $timezoneGroups as group}
<h3>{group.timezone}</h3>
<ul>
{#each group.students as student}
	<li>{student}</li>
{/each}
</ul>

{/each}