<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.github

Recursive duplication of Storage data in localStorage,about earthstar-project/react-earthstar

cinnamon-bun commented on July 22, 2024

Loading data from _docs in localstorage looks correct:

Lines 586 to 596 in 94c68a1

    
           const initWorkspaces = workspacesDocsInStorage 
        
             ? Object.entries(workspacesDocsInStorage).map( 
        
                 ([workspaceAddress, docs]) => { 
        
                   const storage = new StorageMemory([ValidatorEs4], workspaceAddress); 
        
                   // (this is a hack that knows too much about the internal structure of StorageMemory) 
        
                   // (it would be better to ingest each document one by one, but also a lot slower) 
        
                   storage._docs = docs; 
        
                   return storage; 
        
                 } 
        
               ) 
        
             : null;

The saving part also looks correct, it's saving ._docs:

react-earthstar/src/components/LocalStorageSettingsWriter.tsx

Lines 31 to 48 in 94c68a1

    
           useSubscribeToStorages({ 
        
             onWrite: event => { 
        
               const storage = storages[event.document.workspace]; 
        
               writeStorage(lsStoragesKey, { 
        
                 ...storages, 
        
                 [event.document.workspace]: (storage as StorageMemory)._docs, 
        
               }); 
        
             }, 
        
           }); 
        
           React.useEffect(() => { 
        
             Object.values(storages).forEach(storage => { 
        
               writeStorage(lsStoragesKey, { 
        
                 ...storages, 
        
                 [storage.workspace]: (storage as StorageMemory)._docs, 
        
               }); 
        
             }); 
        
           }, [storages, lsStoragesKey]);

I don't know 🤷

from react-earthstar.

cinnamon-bun commented on July 22, 2024

This only seems to happen if more than 1 workspace is set up.

from react-earthstar.

cinnamon-bun commented on July 22, 2024

It's still doing this thing where it's saved the entire Storage object and all its methods instead of just the _docs. Every 20 seconds it alternates between this and being nested one layer deeper. I thought the 20 seconds was related to the earthstar-status online document that gets written every 20 seconds or so, but it also happens in Twodays Crossing.

It doesn't infinitely recurse anymore though!

react-earthstar 1.0.3
https://earthstar-status.netlify.app/
https://twodays-crossing.netlify.app/

I've cleared localStorage and started fresh.

Chrome and Firefox

It's harder to see in Firefox because the Firefox localStorage debugger view doesn't refresh properly, you have to close and reopen it.

from react-earthstar.

cinnamon-bun commented on July 22, 2024

Or maybe the first workspace is always ok and the second one always has the extra methods stored etc, I'm not sure.

Turning off syncing will stop the every-20-second changes.

If you have 2 tabs open, turning off syncing will make the two tabs fight over if syncing is enabled or not. The earthstar-peer-twodays-is-live property will rapidly switch between true and false.

from react-earthstar.

cinnamon-bun commented on July 22, 2024

I'm very suspicious of the useLocalStorage hook :)

Maybe we could switch back to using localStorage directly. That would also make it easier to debounce the writes. Here's how it worked in Foyer:

https://github.com/earthstar-project/earthstar-foyer/blob/42b5e3617571ef62d63c92e0b873c4fa0e57f1d5/src/kit.ts#L56-L62

from react-earthstar.

cinnamon-bun commented on July 22, 2024

The downside of leaving useLocalStorage is we won't properly support having multiple tabs open. Our apps will write to localStorage all the time but only read from it at startup, so multiple tabs will clobber each other's changes. :(

from react-earthstar.

Recursive duplication of Storage data in localStorage about react-earthstar HOT 6 CLOSED

Comments (6)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	const initWorkspaces = workspacesDocsInStorage
	? Object.entries(workspacesDocsInStorage).map(
	([workspaceAddress, docs]) => {
	const storage = new StorageMemory([ValidatorEs4], workspaceAddress);
	// (this is a hack that knows too much about the internal structure of StorageMemory)
	// (it would be better to ingest each document one by one, but also a lot slower)
	storage._docs = docs;
	return storage;
	}
	)
	: null;

	useSubscribeToStorages({
	onWrite: event => {
	const storage = storages[event.document.workspace];
	writeStorage(lsStoragesKey, {
	...storages,
	[event.document.workspace]: (storage as StorageMemory)._docs,
	});
	},
	});

	React.useEffect(() => {
	Object.values(storages).forEach(storage => {
	writeStorage(lsStoragesKey, {
	...storages,
	[storage.workspace]: (storage as StorageMemory)._docs,
	});
	});
	}, [storages, lsStoragesKey]);