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

issue solved

Browse Source
This commit is contained in:
silvestrevivo
2020-12-20 23:47:56 +01:00
parent e501645bc3
commit dd6a71a8ab
8 changed files with 40 additions and 435 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
package-lock.json generated
View File

@@ -68,19 +68,10 @@
"resolve": "^1.17.0" "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": { "@rollup/plugin-node-resolve": {
"version": "10.0.0", "version": "11.0.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-10.0.0.tgz", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.0.1.tgz",
"integrity": "sha512-sNijGta8fqzwA1VwUEtTvWCx2E7qC70NMsDh4ZG13byAXYigBNZMxALhKUSycBks5gupJdq0lFrKumFrRZ8H3A==", "integrity": "sha512-ltlsj/4Bhwwhb+Nb5xCz/6vieuEj2/BAkkqVIKmZwC7pIdl8srmgmglE4S0jFlZa32K4qvdQ6NHdmpRKD/LwoQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"@rollup/pluginutils": "^3.1.0", "@rollup/pluginutils": "^3.1.0",
@@ -88,7 +79,7 @@
"builtin-modules": "^3.1.0", "builtin-modules": "^3.1.0",
"deepmerge": "^4.2.2", "deepmerge": "^4.2.2",
"is-module": "^1.0.0", "is-module": "^1.0.0",
"resolve": "^1.17.0" "resolve": "^1.19.0"
} }
}, },
"@rollup/pluginutils": { "@rollup/pluginutils": {

3
package.json
View File

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

5
rollup.config.js
View File

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

135
src/App.svelte
View File

@@ -1,145 +1,18 @@
<script> <script>
import { onMount } from "svelte";
import { writable } from "svelte/store";
import { fade } from "svelte/transition"; import { fade } from "svelte/transition";
import { chores } from "./stores/test"; import { chores } from "./stores/twiliostore";
// let twilioReady = false;
// let mounted = false;
// let syncClient, getList, getItems, pushItem, removeItem, updateItem, chores;
// onMount(() => {
// mounted = true;
// if (twilioReady) {
// 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!");
// }
// });
// 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 = (listName) => {
// 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),
// };
// };
// chores = createSyncStore("chores");
// };
// $: console.log("removeItem", removeItem);
$: console.log("from app", $chores);
let newChore = ""; let newChore = "";
$: console.log(newChore);
const createChore = () => { const createChore = () => {
// chores.add(newChore); pushItem("chores", { chore: newChore });
pushItem("chores", newChore);
newChore = ""; newChore = "";
}; };
const deleteChore = (index) => removeItem("chores", index);
const deleteChore = (index) => { const updateChore = (index, newValue) => chores.update(index, newValue);
console.log("index", index);
removeItem("chores", index);
};
const updateChore = (index, newValue) => {
chores.update(index, newValue);
};
</script> </script>
<svelte:head> <svelte:head>
<!--<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=" ✂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=" ✂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=" ✂prettier:content✂="e30=" ✂prettier:content✂="e30=">{}</script>-->
<script src="http://api.ipify.org?format=jsonp&callback=getIP"> <script src="http://api.ipify.org?format=jsonp&callback=getIP">
</script> </script>
<script> <script>

80
src/stores/store.js
View File

@@ -1,80 +0,0 @@
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,
// };
// }

24
src/stores/test.js
View File

@@ -1,24 +0,0 @@
import { writable } from 'svelte/store';
export const storeName = 'chores';
function createTwilioStore(listName) {
const { subscribe, update, set } = writable([]);
return {
subscribe,
getItems: (items) => set(items),
itemAdded: (item) => update((existing) => existing.concat(item.item)),
itemRemoved: (args) => update((existing) =>
existing.filter((item) => item.index !== args.index)
),
// add: (chore) => pushItem(listName, { chore }),
// delete: (index) => removeItem(listName, index),
// update: (index, value) => updateItem(listName, index, value),
};
}
export const chores = createTwilioStore(storeName);

179
src/stores/twiliostore.js
View File

@@ -1,163 +1,28 @@
// var SyncClient = require('twilio-sync'); import { writable } from 'svelte/store';
// import SyncClient from 'twilio-sync';
import { writable } from "svelte/store"; function createTwilioStore() {
// console.log('store', store); const { subscribe, update, set } = writable([]);
let syncClient, getList, getItems, pushItem, removeItem, updateItem; return {
subscribe,
getItems: (items) => set(items),
itemAdded: (item) => update((existing) => existing.concat(item.item)),
itemRemoved: (args) => update((existing) =>
existing.filter((item) => item.index !== args.index)
),
itemUpdated: (args) => {
update((existing) =>
existing.map((item) => {
if (item.index === args.item.index) {
item.value = args.item.value;
}
})
);
}
};
}
// const setupTwilioClient = async () => { export const chores = createTwilioStore();
// 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();

32
src/twilioInit.js
View File

@@ -1,8 +1,9 @@
import { chores, storeName } from "./stores/test"; import { chores } from "./stores/twiliostore";
let syncClient, getList, getItems, pushItem, updateItem; const storeName = 'chores';
(async () => { (async () => {
let syncClient;
try { try {
const response = await fetch("http://localhost:5001/token"); const response = await fetch("http://localhost:5001/token");
const responseJson = await response.json(); const responseJson = await response.json();
@@ -20,9 +21,9 @@ let syncClient, getList, getItems, pushItem, updateItem;
} }
}); });
getList = async (name) => syncClient.list(name); const getList = async (name) => syncClient.list(name);
getItems = async (listName, from, pageSize, order) => { const getItems = async (listName, from, pageSize, order) => {
const list = await getList(listName); const list = await getList(listName);
const items = await list.getItems({ from, pageSize, order }); const items = await list.getItems({ from, pageSize, order });
return items.items.map((item) => item.data); return items.items.map((item) => item.data);
@@ -41,8 +42,6 @@ let syncClient, getList, getItems, pushItem, updateItem;
}; };
globalThis.removeItem = async (listName, index) => { globalThis.removeItem = async (listName, index) => {
console.log('listName ', listName)
console.log('index in init', index)
const list = await getList(listName); const list = await getList(listName);
try { try {
await list.remove(index); await list.remove(index);
@@ -51,7 +50,7 @@ let syncClient, getList, getItems, pushItem, updateItem;
} }
}; };
updateItem = async (listName, index, value) => { globalThis.updateItem = async (listName, index, value) => {
const list = await getList(listName); const list = await getList(listName);
try { try {
await list.set(index, value); await list.set(index, value);
@@ -61,27 +60,12 @@ let syncClient, getList, getItems, pushItem, updateItem;
}; };
// as soon as Twilio is working, we write on the store // as soon as Twilio is working, we write on the store
getItems(storeName).then((items) => { getItems(storeName).then((items) => chores.getItems(items));
console.log('getItems', items)
chores.getItems(items)
});
// and we declare the listeners to update the store // and we declare the listeners to update the store
getList(storeName).then((choreList) => { getList(storeName).then((choreList) => {
choreList.on("itemAdded", (item) => chores.itemAdded(item)); choreList.on("itemAdded", (item) => chores.itemAdded(item));
choreList.on("itemRemoved", (args) => chores.itemRemoved(args)); choreList.on("itemRemoved", (args) => chores.itemRemoved(args));
choreList.on("itemUpdated", (args) => { choreList.on("itemUpdated", (args) => chores.itemUpdated(args));
update((existing) =>
existing.map((item) => {
if (item.index === args.item.index) {
item.value = args.item.value;
}
})
);
});
}); });
})(); })();
console.log('getList', getList)