zev/chores.win
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first approach to issue

Browse Source
This commit is contained in:
silvestrevivo
2020-12-20 22:05:46 +01:00
parent 78d7378867
commit 7f1939d8ad
9 changed files with 474 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
package-lock.json generated
View File

@@ -68,6 +68,15 @@
"resolve": "^1.17.0"
}
},
"@rollup/plugin-json": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz",
"integrity": "sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw==",
"dev": true,
"requires": {
"@rollup/pluginutils": "^3.0.8"
}
},
"@rollup/plugin-node-resolve": {
"version": "10.0.0",
"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-10.0.0.tgz",
@@ -568,9 +577,9 @@
"dev": true
},
"estree-walker": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.1.tgz",
"integrity": "sha512-tF0hv+Yi2Ot1cwj9eYHtxC0jB9bmjacjQs6ZBTj82H8JwUywFuc+7E83NWfNMwHXZc11mjfFcVXPe9gEP4B8dg==",
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
"dev": true
},
"esutils": {

1
package.json
View File

@@ -8,6 +8,7 @@
},
"devDependencies": {
"@rollup/plugin-commonjs": "^16.0.0",
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^10.0.0",
"eslint": "^7.15.0",
"rollup": "^2.3.4",

5
rollup.config.js
View File

@@ -4,6 +4,9 @@ import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import css from 'rollup-plugin-css-only';
import { nodeResolve } from '@rollup/plugin-node-resolve';
// import commonjs from '@rollup/plugin-commonjs';
// import json from '@rollup/plugin-json';
const production = !process.env.ROLLUP_WATCH;
@@ -57,7 +60,7 @@ export default {
dedupe: ['svelte']
}),
commonjs(),
nodeResolve({preferBuiltins: true, dedupe: ['twilio-sync']}),
// In dev mode, call `npm run start` once
// the bundle has been generated
!production && serve(),

237
src/App.svelte
View File

@@ -1,152 +1,165 @@
<script>
import { onMount } from 'svelte'
import { writable } from 'svelte/store'
import { fade } from 'svelte/transition'
import { onMount } from "svelte";
import { writable } from "svelte/store";
import { fade } from "svelte/transition";
import { chores } from "./stores/test";
let twilioReady = false
let mounted = false
let syncClient, getList, getItems, pushItem, removeItem, updateItem, chores
// let twilioReady = false;
// let mounted = false;
// let syncClient, getList, getItems, pushItem, removeItem, updateItem, chores;
onMount(() => {
mounted = true
if (twilioReady) {
setupTwilioClient()
}
})
// onMount(() => {
// mounted = true;
// if (twilioReady) {
// setupTwilioClient();
// }
// });
const twilioLoaded = () => {
twilioReady = true
if (mounted) {
setupTwilioClient()
}
}
// const twilioLoaded = () => {
// twilioReady = true;
// if (mounted) {
// setupTwilioClient();
// }
// };
const setupTwilioClient = async () => {
try {
const response = await fetch('http://localhost:5001/token')
const responseJson = await response.json()
const token = responseJson.token
syncClient = new Twilio.Sync.Client(token, { logLevel: 'info' })
} catch (e) {
console.log(e)
}
syncClient.on('connectionStateChanged', state => {
if (state != 'connected') {
console.log(`Sync is not live (websocket connection ${state})`)
} else {
console.log('Sync is live!')
}
})
// const setupTwilioClient = async () => {
// try {
// const response = await fetch("http://localhost:5001/token");
// const responseJson = await response.json();
// const token = responseJson.token;
// syncClient = new Twilio.Sync.Client(token, { logLevel: "info" });
// } catch (e) {
// console.log(e);
// }
getList = async name => syncClient.list(name)
// syncClient.on("connectionStateChanged", (state) => {
// if (state != "connected") {
// console.log(`Sync is not live (websocket connection ${state})`);
// } else {
// console.log("Sync is live!");
// }
// });
getItems = async (listName, from, pageSize, order) => {
const list = await getList(listName)
const items = await list.getItems({from, pageSize, order})
return items.items.map(item => item.data)
}
// getList = async (name) => syncClient.list(name);
pushItem = async (listName, item) => {
const list = await getList(listName)
try {
const result = await list.push(item)
return result.data
} catch (e) {
console.log(e)
}
}
// getItems = async (listName, from, pageSize, order) => {
// const list = await getList(listName);
// const items = await list.getItems({ from, pageSize, order });
// return items.items.map((item) => item.data);
// };
removeItem = async (listName, index) => {
const list = await getList(listName)
try {
await list.remove(index)
} catch (e) {
console.log(e)
}
}
// pushItem = async (listName, item) => {
// const list = await getList(listName);
// try {
// const result = await list.push(item);
// return result.data;
// } catch (e) {
// console.log(e);
// }
// };
updateItem = async (listName, index, value) => {
const list = await getList(listName)
try {
await list.set(index, value)
} catch (e) {
console.log(e)
}
}
// removeItem = async (listName, index) => {
// const list = await getList(listName);
// try {
// await list.remove(index);
// } catch (e) {
// console.log(e);
// }
// };
const createSyncStore = listName => {
const { set, subscribe, update } = writable([])
// updateItem = async (listName, index, value) => {
// const list = await getList(listName);
// try {
// await list.set(index, value);
// } catch (e) {
// console.log(e);
// }
// };
getItems(listName).then(items => set(items))
// const createSyncStore = (listName) => {
// const { set, subscribe, update } = writable([]);
getList(listName).then(choreList => {
choreList.on('itemAdded', item => {
update(existing => existing.concat(item.item))
})
choreList.on('itemRemoved', args => {
update(existing => existing.filter(item => item.index !== args.index))
})
choreList.on('itemUpdated', args => {
update(existing => existing.map(item => {
if (item.index === args.item.index) {
item.value = args.item.value
}
}))
})
})
// getItems(listName).then((items) => set(items));
return {
subscribe,
add: chore => pushItem(listName, { chore }),
delete: index => removeItem(listName, index),
update: (index, value) => updateItem(listName, index, value)
}
}
// getList(listName).then((choreList) => {
// choreList.on("itemAdded", (item) => {
// update((existing) => existing.concat(item.item));
// });
// choreList.on("itemRemoved", (args) => {
// update((existing) =>
// existing.filter((item) => item.index !== args.index)
// );
// });
// choreList.on("itemUpdated", (args) => {
// update((existing) =>
// existing.map((item) => {
// if (item.index === args.item.index) {
// item.value = args.item.value;
// }
// })
// );
// });
// });
chores = createSyncStore('chores')
}
// return {
// subscribe,
// add: (chore) => pushItem(listName, { chore }),
// delete: (index) => removeItem(listName, index),
// update: (index, value) => updateItem(listName, index, value),
// };
// };
$: console.log($chores)
// chores = createSyncStore("chores");
// };
let newChore = ''
$: console.log("from app", $chores);
let newChore = "";
const createChore = () => {
chores.add(newChore)
newChore = ''
}
chores.add(newChore);
newChore = "";
};
const deleteChore = index => chores.delete(index)
const deleteChore = (index) => chores.delete(index);
const updateChore = (index, newValue) => {
chores.update(index, newValue)
}
chores.update(index, newValue);
};
</script>
<svelte:head>
<script src="//media.twiliocdn.com/sdk/js/sync/v0.8/twilio-sync.min.js" on:load={twilioLoaded}></script>
<script src="http://api.ipify.org?format=jsonp&callback=getIP"></script>
<script>function getIP(json) { console.log(json.ip) }</script>
<!--<script
src="//media.twiliocdn.com/sdk/js/sync/v0.8/twilio-sync.min.js"
on:load={twilioLoaded} ✂prettier:content✂="CiAgICA=" ✂prettier:content✂="e30=" ✂prettier:content✂="e30=" ✂prettier:content✂="e30=" ✂prettier:content✂="e30=" ✂prettier:content✂="e30=" ✂prettier:content✂="e30=" ✂prettier:content✂="e30=" ✂prettier:content✂="e30=" ✂prettier:content✂="e30=" ✂prettier:content✂="e30=">{}</script>-->
<script src="http://api.ipify.org?format=jsonp&callback=getIP">
</script>
<script>
function getIP(json) {
console.log(json.ip);
}
</script>
</svelte:head>
<nav>
</nav>
<nav />
<main path="/">
<form on:submit|preventDefault={createChore}>
<input bind:value={newChore} type=text>
<input style="cursor:pointer" type=submit disabled={newChore === ""}>
<input bind:value={newChore} type="text" />
<input
style="cursor:pointer"
type="submit"
disabled={newChore === ''} />
</form>
<div>
{#if $chores && $chores.length > 0}
{#each $chores as chore}
<div in:fade>
{chore.value.chore}
<button style="cursor: pointer" on:click={() => deleteChore(chore.index)}>delete</button>
<button
style="cursor: pointer"
on:click={() => deleteChore(chore.index)}>delete</button>
</div>
{/each}
{/if}
</div>
</main>

1
src/main.js
View File

@@ -1,4 +1,5 @@
import App from './App.svelte';
import './twilioInit';
const app = new App({
target: document.body,

80
src/stores/store.js Normal file
View File

@@ -0,0 +1,80 @@
import { writable } from 'svelte/store';
const SyncClient = window.Twilio.Sync.Client
let syncClient, getList, getItems, pushItem, removeItem, updateItem;
const setupTwilioClient = async () => {
try {
const response = await fetch("http://localhost:5001/token");
const responseJson = await response.json();
const token = responseJson.token;
syncClient = new SyncClient(token, { logLevel: "info" });
} catch (e) {
console.log(e);
}
syncClient.on("connectionStateChanged", (state) => {
if (state != "connected") {
console.log(`Sync is not live (websocket connection ${state})`);
} else {
console.log("Sync is live!");
}
});
getList = async (name) => syncClient.list(name);
getItems = async (listName, from, pageSize, order) => {
const list = await getList(listName);
const items = await list.getItems({ from, pageSize, order });
return items.items.map((item) => item.data);
};
// chores = createSyncStore('chores');
}
function createSyncStore() {
const { subscribe, update, set } = writable([]);
// getItems(listName).then((items) => set(items));
return {
subscribe,
};
}
setupTwilioClient().then(() => {
const { subscribe, update, set } = writable([]);
getItems('chores').then((items) => set(items));
console.log('getList', getList)
console.log('createSyncStore', createSyncStore())
createSyncStore().add = (chore) => pushItem(listName, { chore })
})
export const chores = createSyncStore('chores');
// function createSyncStore(listName) {
// const { subscribe, update, set } = writable([]);
// getItems(listName).then((items) => set(items));
// return {
// subscribe,
// };
// }

15
src/stores/test.js Normal file
View File

@@ -0,0 +1,15 @@
import { writable } from 'svelte/store';
function createTwilioStore() {
const { subscribe, update, set } = writable([]);
return {
subscribe,
getItems: (items) => set(items),
add: (chore) => pushItem(listName, { chore }),
delete: (index) => removeItem(listName, index),
update: (index, value) => updateItem(listName, index, value),
};
}
export const chores = createTwilioStore();

163
src/stores/twiliostore.js Normal file
View File

@@ -0,0 +1,163 @@
// var SyncClient = require('twilio-sync');
// import SyncClient from 'twilio-sync';
import { writable } from "svelte/store";
// console.log('store', store);
let syncClient, getList, getItems, pushItem, removeItem, updateItem;
// const setupTwilioClient = async () => {
// try {
// const response = await fetch("http://localhost:5001/token");
// const responseJson = await response.json();
// const token = responseJson.token;
// syncClient = new SyncClient(token, { logLevel: "info" });
// } catch (e) {
// console.log(e);
// }
// syncClient.on("connectionStateChanged", (state) => {
// if (state != "connected") {
// console.log(`Sync is not live (websocket connection ${state})`);
// } else {
// console.log("Sync is live!");
// }
// });
// getList = async (name) => syncClient.list(name);
// getItems = async (listName, from, pageSize, order) => {
// const list = await getList(listName);
// const items = await list.getItems({ from, pageSize, order });
// return items.items.map((item) => item.data);
// };
// pushItem = async (listName, item) => {
// const list = await getList(listName);
// try {
// const result = await list.push(item);
// return result.data;
// } catch (e) {
// console.log(e);
// }
// };
// removeItem = async (listName, index) => {
// const list = await getList(listName);
// try {
// await list.remove(index);
// } catch (e) {
// console.log(e);
// }
// };
// updateItem = async (listName, index, value) => {
// const list = await getList(listName);
// try {
// await list.set(index, value);
// } catch (e) {
// console.log(e);
// }
// };
const createSyncStore = async (listName) => {
// try {
// const response = await fetch("http://localhost:5001/token");
// const responseJson = await response.json();
// const token = responseJson.token;
// syncClient = new SyncClient(token, { logLevel: "info" });
// } catch (e) {
// console.log(e);
// }
// syncClient.on("connectionStateChanged", (state) => {
// if (state != "connected") {
// console.log(`Sync is not live (websocket connection ${state})`);
// } else {
// console.log("Sync is live!");
// }
// });
// getList = async (name) => syncClient.list(name);
// getItems = async (listName, from, pageSize, order) => {
// const list = await getList(listName);
// const items = await list.getItems({ from, pageSize, order });
// return items.items.map((item) => item.data);
// };
// pushItem = async (listName, item) => {
// const list = await getList(listName);
// try {
// const result = await list.push(item);
// return result.data;
// } catch (e) {
// console.log(e);
// }
// };
// removeItem = async (listName, index) => {
// const list = await getList(listName);
// try {
// await list.remove(index);
// } catch (e) {
// console.log(e);
// }
// };
// updateItem = async (listName, index, value) => {
// const list = await getList(listName);
// try {
// await list.set(index, value);
// } catch (e) {
// console.log(e);
// }
// };
const { set, subscribe, update } = writable([]);
// getItems(listName).then((items) => set(items));
// getList(listName).then((choreList) => {
// choreList.on("itemAdded", (item) => {
// update((existing) => existing.concat(item.item));
// });
// choreList.on("itemRemoved", (args) => {
// update((existing) =>
// existing.filter((item) => item.index !== args.index)
// );
// });
// choreList.on("itemUpdated", (args) => {
// update((existing) =>
// existing.map((item) => {
// if (item.index === args.item.index) {
// item.value = args.item.value;
// }
// })
// );
// });
// });
// return {
// subscribe,
// add: (chore) => pushItem(listName, { chore }),
// delete: (index) => removeItem(listName, index),
// update: (index, value) => updateItem(listName, index, value),
// };
return {
subscribe,
add: () => set({})
}
};
export const chores = createSyncStore("chores");
// };
// setupTwilioClient();

73
src/twilioInit.js Normal file
View File

@@ -0,0 +1,73 @@
import { chores } from "./stores/test";
let syncClient, getList, getItems, pushItem, removeItem, updateItem;
(async () => {
try {
const response = await fetch("http://localhost:5001/token");
const responseJson = await response.json();
const token = responseJson.token;
syncClient = new Twilio.Sync.Client(token, { logLevel: "info" });
} catch (e) {
console.log(e);
}
syncClient.on("connectionStateChanged", (state) => {
if (state != "connected") {
console.log(`Sync is not live (websocket connection ${state})`);
} else {
console.log("Sync is live!");
}
});
getList = async (name) => syncClient.list(name);
getItems = async (listName, from, pageSize, order) => {
const list = await getList(listName);
const items = await list.getItems({ from, pageSize, order });
return items.items.map((item) => item.data);
};
pushItem = async (listName, item) => {
const list = await getList(listName);
try {
const result = await list.push(item);
return result.data;
} catch (e) {
console.log(e);
}
};
removeItem = async (listName, index) => {
const list = await getList(listName);
try {
await list.remove(index);
} catch (e) {
console.log(e);
}
};
updateItem = async (listName, index, value) => {
const list = await getList(listName);
try {
await list.set(index, value);
} catch (e) {
console.log(e);
}
};
// as soon as Twilio is working, we write on the store
getItems('chores').then((items) => chores.getItems(items));
})();
// const twilioClientInit = async () => {
// }
// twilioClientInit()
console.log('getList', getList)