Update portfolio packages

package.json

@@ -12,7 +12,7 @@
 		"dev": "webpack-dev-server"
 	},
 	"dependencies": {
-		"backgroundtask": "~1.0.0",
+		"backgroundtask": "git+https://gitea.thecookiejar.me/explorigin/backgroundtask.git",
 		"body-parser": "~1.18.3",
 		"date-fns": "~1.29.0",
 		"domvm": "~3.4.5",
@@ -20,26 +20,26 @@
 		"express": "~4.16.3",
 		"linear-partitioning": "0.3.2",
 		"pica": "~2.0.8",
-		"pouchdb-adapter-idb": "~7.0.0",
-		"pouchdb-attachmentproxy": "~1.0.0",
-		"pouchdb-core": "~7.0.0",
-		"pouchdb-find": "~7.0.0",
-		"pouchtype": "~1.0.0",
+		"pouchdb-adapter-idb": "~7.1.1",
+		"pouchdb-attachmentproxy": "git+https://gitea.thecookiejar.me/explorigin/pouchdb-attachmentproxy.git",
+		"pouchdb-core": "~7.1.1",
+		"pouchdb-find": "~7.1.1",
+		"pouchtype": "git+https://gitea.thecookiejar.me/explorigin/pouchtype.git",
+		"reactimal": "git+https://gitea.thecookiejar.me/explorigin/reactimal.git",
 		"request": "~2.87.0",
-		"router": "2.1.0",
+		"router": "git+https://gitea.thecookiejar.me/explorigin/router.git",
 		"semantic-ui-reset": "~2.2.12",
 		"style-loader": "^0.19.0",
 		"styletron": "^2.5.1",
 		"styletron-utils": "^2.5.4"
 	},
 	"devDependencies": {
-		"css-loader": "~0.28.11",
+		"css-loader": "^3.2.0",
 		"file-loader": "~1.1.11",
 		"html-webpack-plugin": "~3.2.0",
 		"url-loader": "~1.0.1",
 		"webpack": "~4.10.2",
-		"webpack-cli": "~2.1.5",
+		"webpack-cli": "^3.3.7",
 		"webpack-dev-server": "~3.1.4"
-		"reactimal": "git+https://gitea.thecookiejar.me/explorigin/reactimal.git",
 	}
 }

src/interface/allImages.js

@@ -1,5 +1,5 @@
 import { format } from 'date-fns';
-import { prop, computed, container } from 'reactimal';
+import { prop, hashableProperty, computed, hashableContainer } from 'reactimal';
 
 import {
 	subscribeToRender,
@@ -30,13 +30,13 @@ export function uploadImages(evt, files) {
 }
 
 export function AllImagesView(vm, params) {
-	const model = prop({}, pouchDocHash);
-	const images = container([], pouchDocArrayHash);
+	const model = hashableProperty(pouchDocHash)({});
+	const images = hashableContainer(pouchDocArrayHash)([]);
 	const containerScrollTop = prop(0);
 
 	const hover = prop(null);
 	const hoverSelectButton = prop(null);
-	const selectedIds = container(new Set(), hashSet);
+	const selectedIds = hashableContainer(hashSet)(new Set());
 	const selectMode = computed(sIds => sIds.size > 0, [selectedIds]);
 
 	const sections = computed(

src/interface/focus.js

@@ -1,4 +1,4 @@
-import { prop, computed, container } from 'reactimal';
+import { prop, hashableProperty, hashableComputed, computed, pick } from 'reactimal';
 
 import {
 	subscribeToRender,
@@ -11,7 +11,7 @@ import {
 
 import { router } from '../services/router.js';
 import { ImageType } from '../data/image.js';
-import { pouchDocHash, pick } from '../utils/conversion.js';
+import { pouchDocHash } from '../utils/conversion.js';
 import { AttachmentImageView } from './components/attachmentImage.js';
 import { Overlay } from './components/overlay.js';
 import { Icon } from './components/icon.js';
@@ -22,20 +22,19 @@ import { CLICKABLE, FILL_STYLE } from './styles.js';
 
 export function FocusView(vm, params) {
 	const id = prop();
-	const doc = prop({}, pouchDocHash);
+	const doc = hashableProperty(pouchDocHash)({});
 	const nextLink = prop();
 	const prevLink = prop();
 	const mouseActive = prop(true);
 	let mouseMoveTimeout = null;
 
-	const appBarStyle = computed(
+	const appBarStyle = hashableComputed(pick('opacity'))(
 		mA => ({
 			position: 'fixed',
 			opacity: mA ? 1 : 0,
 			backgroundImage: 'linear-gradient(0deg,rgba(0,0,0,0),rgba(0,0,0,0.4))'
 		}),
-		[mouseActive],
-		s => s.opacity
+		[mouseActive]
 	);
 	const imageStyle = computed(
 		({ width: iw, height: ih }, { width: vw, height: vh }) => {

src/interface/sectionPhoto.js

@@ -1,5 +1,3 @@
-import { prop } from 'reactimal';
-
 import {
 	defineView as vw,
 	defineElement as el,
@@ -7,7 +5,6 @@ import {
 	patchNodeStyle,
 	subscribeToRender
 } from '../utils/domvm.js';
-import { router } from '../services/router.js';
 import { injectStyle, styled } from '../utils/style.js';
 import { DEFAULT_TRANSITION, FILL_STYLE, IMAGE_MARGIN, CLICKABLE } from './styles.js';
 import { Icon } from './components/icon.js';

src/interface/sectionView.js

@@ -1,5 +1,5 @@
 import partition from 'linear-partitioning';
-import { prop, computed, container } from 'reactimal';
+import { computed, hashableContainer } from 'reactimal';
 
 import {
 	defineView as vw,
@@ -26,7 +26,7 @@ const aspectRatio = img => img.width / img.height;
 export function SectionView(vm, params, key) {
 	const { title, photos } = params;
 	const sectionSelectButtonRef = `secSel${key}`;
-	const photoArray = container(photos || [], pArr => pArr.map(extractID).join(','));
+	const photoArray = hashableContainer(pArr => pArr.map(extractID).join(','))(photos || []);
 	const sections = computed(
 		(pArr, { width: vw }) => {
 			const availableWidth = vw - CONTENT_MARGIN_WIDTH;

src/services/db.js

@@ -1,7 +1,7 @@
 import core from 'pouchdb-core';
 import idb from 'pouchdb-adapter-idb';
-import http from 'pouchdb-adapter-http';
-import replication from 'pouchdb-replication';
+// import http from 'pouchdb-adapter-http';
+// import replication from 'pouchdb-replication';
 import find from 'pouchdb-find';
 
 import { PouchType } from 'pouchtype';
@@ -9,8 +9,8 @@ import { B2Adapter } from './b2.js';
 
 export const PouchDB = core
 	.plugin(idb)
-	.plugin(http)
-	.plugin(replication)
+	// .plugin(http)
+	// .plugin(replication)
 	.plugin(find);
 // .plugin(
 // 	B2Adapter(