From 6b7c0f8454fda6846103b46f8ba062d6679b0ff0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Syn=C3=A1=C4=8Dek?= Date: Fri, 17 Jul 2020 20:18:55 +0200 Subject: [PATCH] separate front end into modules for easier refactoring later --- lib/static/app/storage.js | 87 +++++++++++++++++++ lib/static/app/utils.js | 35 ++++++++ lib/static/{scripts.js => index.js} | 126 ++++------------------------ webpack.config.js | 2 +- 4 files changed, 138 insertions(+), 112 deletions(-) create mode 100644 lib/static/app/storage.js create mode 100644 lib/static/app/utils.js rename lib/static/{scripts.js => index.js} (73%) diff --git a/lib/static/app/storage.js b/lib/static/app/storage.js new file mode 100644 index 0000000..3988a18 --- /dev/null +++ b/lib/static/app/storage.js @@ -0,0 +1,87 @@ +import { useStorage } from './utils' + +const migrateRecord = (record) => { + // NOTE: v3 records + const id = record.id || record.order + const startTime = record.startTime || null + + return { + ...record, + id, + startTime, + } +} + +const getStorage = () => { + if (!useStorage()) { + return null + } + + const storage = localStorage.getItem('fb-to-ical-events') + + if (!storage) { + localStorage.setItem('fb-to-ical-events', JSON.stringify([])) + return "[]" + } + + return storage +} + +const getStorageContents = (storage) => { + return JSON.parse(storage) +} + +const updateStorage = (storageContents) => { + const encodedStorage = JSON.stringify(storageContents) + + localStorage.setItem('fb-to-ical-events', encodedStorage) +} + +const saveRecord = ({ id, link, createdAt, startTime, title }) => { + if (!useStorage()) { + return + } + + const storage = getStorage() + const storageContents = getStorageContents(storage) + + const record = { + id, + link, + createdAt: createdAt.toString(), + startTime: startTime.toString(), + title, + } + + updateStorage([ ...storageContents, record ]) +} + +const deleteRecord = (id) => { + if (!useStorage()) { + return + } + + const storage = getStorage() + const storageContents = getStorageContents(storage) + const index = storageContents.findIndex((record) => { + return record.id === id + }) + + if (!Number.isFinite(index)) { + return + } + + const nextStorage = [ ...storageContents ] + nextStorage.splice(index, 1) + + updateStorage(nextStorage) +} + +export { + migrateRecord, + getStorage, + getStorageContents, + updateStorage, + saveRecord, + deleteRecord, +} diff --git a/lib/static/app/utils.js b/lib/static/app/utils.js new file mode 100644 index 0000000..0fe8702 --- /dev/null +++ b/lib/static/app/utils.js @@ -0,0 +1,35 @@ +const noJS = () => { + return Boolean(document.querySelector("#nojs").checked) +} + +const useStorage = () => Boolean(window.localStorage) + +// NOTE: Generate random IDs: https://stackoverflow.com/a/2117523/3056783 +const uuidv4 = () => { + return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => + (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) + ) +} + +const parseStartTimeFromiCalString = (text = '') => { + const [ dateStr, timeStr ] = text.split('T') + const rawDate = dateStr || '' + const rawTime = timeStr || '' + + const year = Number(rawDate.slice(0, 4)) + const month = Number(Math.max(rawDate.slice(4, 6) - 1), 0) + const date = Number(rawDate.slice(6, 8)) + const hour = Number(rawTime.slice(0, 2)) + const minutes = Number(rawTime.slice(2, 4)) + const seconds = Number(rawTime.slice(4, 6)) + + const parsedDate = new Date(year, month, date, hour, minutes, seconds) + return parsedDate.toString() +} + +export { + noJS, + uuidv4, + parseStartTimeFromiCalString, + useStorage, +} diff --git a/lib/static/scripts.js b/lib/static/index.js similarity index 73% rename from lib/static/scripts.js rename to lib/static/index.js index 6197b4e..2b35050 100644 --- a/lib/static/scripts.js +++ b/lib/static/index.js @@ -1,115 +1,19 @@ +import { noJS, uuidv4, parseStartTimeFromiCalString, useStorage } from './app/utils' +import { + migrateRecord, + getStorage, + getStorageContents, + updateStorage, + saveRecord, + deleteRecord, +} from './app/storage' + (() => { - const noJS = () => { - return Boolean(document.querySelector("#nojs").checked) - } - - const useStorage = Boolean(window.localStorage) - if (!window.fetch || !window.Promise || !window.URLSearchParams || !window.crypto) { - console.info('JS features not available.') + console.warn('JS features not available.') return } - // NOTE: Generate random IDs: https://stackoverflow.com/a/2117523/3056783 - const uuidv4 = () => { - return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => - (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) - ) - } - - const parseStartTimeFromiCalString = (text = '') => { - const [ dateStr, timeStr ] = text.split('T') - const rawDate = dateStr || '' - const rawTime = timeStr || '' - - const year = Number(rawDate.slice(0, 4)) - const month = Number(Math.max(rawDate.slice(4, 6) - 1), 0) - const date = Number(rawDate.slice(6, 8)) - const hour = Number(rawTime.slice(0, 2)) - const minutes = Number(rawTime.slice(2, 4)) - const seconds = Number(rawTime.slice(4, 6)) - - const parsedDate = new Date(year, month, date, hour, minutes, seconds) - return parsedDate.toString() - } - - const migrateRecord = (record) => { - // NOTE: v3 records - const id = record.id || record.order - const startTime = record.startTime || null - - return { - ...record, - id, - startTime, - } - } - - const getStorage = () => { - if (!useStorage) { - return null - } - - const storage = localStorage.getItem('fb-to-ical-events') - - if (!storage) { - localStorage.setItem('fb-to-ical-events', JSON.stringify([])) - return "[]" - } - - return storage - } - - const getStorageContents = (storage) => { - return JSON.parse(storage) - } - - const updateStorage = (storageContents) => { - const encodedStorage = JSON.stringify(storageContents) - - localStorage.setItem('fb-to-ical-events', encodedStorage) - } - - const saveRecord = ({ id, link, createdAt, startTime, title }) => { - if (!useStorage) { - return - } - - const storage = getStorage() - const storageContents = getStorageContents(storage) - - const record = { - id, - link, - createdAt: createdAt.toString(), - startTime: startTime.toString(), - title, - } - - updateStorage([ ...storageContents, record ]) - } - - const deleteRecord = (id) => { - if (!useStorage) { - return - } - - const storage = getStorage() - const storageContents = getStorageContents(storage) - const index = storageContents.findIndex((record) => { - return record.id === id - }) - - if (!Number.isFinite(index)) { - return - } - - const nextStorage = [ ...storageContents ] - nextStorage.splice(index, 1) - - updateStorage(nextStorage) - } - const showTable = () => { list.classList.remove('hidden') } @@ -117,7 +21,7 @@ const deleteTableRow = (id, row) => { deleteRecord(id) - if (!useStorage) { + if (!useStorage()) { return } @@ -182,7 +86,7 @@ } const hydrateList = () => { - if (!useStorage) { + if (!useStorage()) { return } @@ -295,7 +199,7 @@ const noJScheckbox = document.querySelector('#nojs') const loadNoJS = () => { - if (!useStorage) { + if (!useStorage()) { return } const value = localStorage.getItem('fb-to-ical-nojs') @@ -343,7 +247,7 @@ } noJScheckbox.addEventListener('click', (event) => { - if (!useStorage) { + if (!useStorage()) { return } diff --git a/webpack.config.js b/webpack.config.js index 645638c..5a0e29e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -8,7 +8,7 @@ const destination = path.join(__dirname, 'dist') const isDevelopment = Boolean(process.argv[2] && process.argv[2].includes('mode=development')) module.exports = { - entry: path.join(__dirname, 'lib', 'static', 'scripts.js'), + entry: path.join(__dirname, 'lib', 'static', 'index.js'), watch: isDevelopment, output: { filename: '[name].[hash].js',