collection.svelte

<!-- /collections/:id -->



<script>
    import {unSavedResponses} from './stores.js';

    let onSubmit;
    let text = '';

    submitText = () => {
        onSubmit();
        unSavedResponses.add(text);
    }
</script>

<textarea bind:value={text}></textarea>
<button on:submit={submitText}>Submit</button>

collections.svelte

<!-- /collections -->

<script>
    import { onMount } from 'svelte';

    let collections = []

    onMount(() => {
        collections = JSON.parse(localStorage.getItem('collections') || '[]');

        fetch(`${API}/collections.json`)
            .then(response => response.json())
            .then(data => {
                collections = data;
                localStorage.setItem('collections', JSON.stringify(data));
            });
    });
</script>

<ul>
    {#each collections as collection}
        <li>{collection.name}</li>
    {/each}
</ul>

stores.js

// stores.js

import { writable } from "svelte/store";

let collections = [];
try {
  collections = JSON.parse(localStorage.getItem("collections"));
} catch (e) {
  console.log(e);
}

const writableCollection = writable(collections || []);

export const collections = {
  get: writableCollection.get,
  set: (collections) => {
    localStorage.setItem("collections", JSON.stringify(collections));
    writableCollection.set(collections);
  },
};

let unSavedResponses = [];
try {
  unSavedResponses = JSON.parse(localStorage.getItem("unSavedResponses"));
} catch (e) {
  console.log(e);
}

const writableUnSavedResponses = writable(unSavedResponses || []);

export const unSavedResponses = {
  get: writableUnSavedResponses.get,
  add: (response) => {
    unSavedResponses.push(response);
    localStorage.setItem("unSavedResponses", JSON.stringify(unSavedResponses));
    writableUnSavedResponses.set(unSavedResponses);

    fetch(`${API}`).post(unSavedResponses).then(() => {
        unSavedResponses = [];
        localStorage.setItem("unSavedResponses", JSON.stringify([]));
        writableUnSavedResponses.set([]);
    });
  },
};