earthstar-project / react-earthstar Goto Github PK

For the first release, it'd be great for the README to do more than just state the available functions and their signatures: in the same way that earthstar's README lays out how it would like to change peoples' relationship with their own data, I'd like to make the same case for react-earthstar and app-authorship, that an app can be a home cooked meal.

react-earthstar may also be the first point of entry for someone with earthstar, so it should be able to field explaining what earthstar is and its benefits. In addition to pointing to the current earthstar docs, it'd be nice to use something like @cinnamon-bun's slides to act as a quick primer.

There also needs to be a breakdown of the different grains of API available in this package: earthbar, components, and hooks, presented in that order, as I suspect that's the order that someone will need to learn about each as they use this package.

This PR to Twodays Crossing fixes some CSS issues with Earthbar.

Some of those could be fixed here in react-earthstar instead. Of course some are also a consequence of the styling that Twodays is trying to do.

Just collecting these all in one place to keep track of them:

• A. Reach input is hard to style because it's inside a <div data-react-earthstar-input> instead of having the data-react-earthstar-input property on the <input> itself
• B. Reach input popup z-index fix to put it above the panel
• C. Invite widget buttons don't have data-react-earthstar-button property
• D. Invite autocomplete input is not full-width
• E. <fieldset> borders are kind of overwhelming, maybe would be nice to turn them off. (Or use a grid layout like in some of the other widgets?)

Examples

A. autocomplete input box doesn't get styled, its parent gets styled instead. Compare to the invite input which is working as expected

B. popup z-index
C. some buttons not being styled
D. autocomplete input is not full-width
E. <fieldset> borders are a bit much

I see that EarthstarPeer calls storage.close() on every single storage whenever setStorages is called (causing storages to change).

I think that means that all the storages will become permanently closed in situations where we only wanted to get rid of one of them, or none of them.

setStorages is called from:

• useAddWorkspace
• useRemoveWorkspace
• useStorages - maybe some apps use this to call setStorages, I'm not sure if any do

Instead, we need to detect when a storage is actually going away and only close it then.

The "remove workspace" button works until you get to the last workspace. Then it switches away from viewing it, but doesn't actually remove it from localStorage. Reloading the page brings it back.

Earthstar recently got streaming sync, and this should definitely be preferred over manual syncing IMO. There need to be hooks and UI made for this, the work has started here but we're waiting on an improved API before continuing with that PR.

This is a tricky one.

If you have 4 workspaces and each has 3 pubs, that's 12 simultaneous streams running.

It could be better to start and stop sync as you switch workspaces, but that makes switching into more of an expensive operation.

Really, I think sync needs to happen pub-by-pub and not for every combination of workspace-and-pub, e.g. only have one connection to each pub no matter how many workspaces there are. This will come in a future version of earthstar.

If you're building an Earthstar app with foreknowledge that some of the people using it may have no idea what Earthstar is, it'd be great to have a dismissable onboarding tab that could explain it to them in the absence of a person guiding them through it.

It'd need to explain the concept of workspaces and an author keypair, and possibly more.

when you are creating a new workspace, you can click "Add" as if adding an initial pub even when the field is blank, and a pub will be added with no text to the list of pubs. you can add multiple blank pubs, but clicking remove on one will remove all of them.

As seen in earthstar-project/twodays-crossing#5 !

As of earthstar v5.7.3 there is a way to delete workspaces from disk. This should be used when workspaces are removed.

I'd love to add a new document that allows a user to enter their pronouns.

I've lifted much of the strategy of Reach UI's approach to styling their reusable component, and like them we should have a styling guide which explains which attributes are available on what.

https://github.com/earthstar-project/react-earthstar/blob/2d3b067c572970b80f0fd73fe3ae6667f3823dd8/src/components/_FocusSyncer.tsx

I'm not sure why yet, but if you switch away from an Earthstar app and switch back, FocusSyncer triggers several simultaneous syncs. This can be seen in the console as well as the network requests.

Buntimer is a nice simple app to try this out with, since it doesn't have any built-in timed document updating like Status does to confuse things. https://buntimer-earthstar.netlify.app/

What would be needed for an upgrade to React 18?

It would be great for people using react-earthstar to have a few themes they can import right out of the box with a few different flavours.

I am a fan of the idea of using these themes as a kind of 'warding' (as I understand it, a way to discourage nasty people from using your stuff by providing only bubbly, fun styling)

To reproduce:

1. Clear localStorage
2. Add a workspace using an invitation
3. Choose that workspace as the current workspace. Note that localstorage does actually update the value of earthstar-peer-status-current-workspace
4. Reload the page. It will not remember which workspace you were viewing, it will instead say "Add workspace" in the dropdown even though localStorage knows which one you should be viewing.
5. Sign in as a user, and now it will remember the current workspace when you reload.

Use the format and conventions described in earthstar-project/earthstar#36 to make a component for redeeming invitations, as well as one for creating invitation codes.

Somehow the data for each workspace is being recursively duplicated inside itself over and over, in localStorage. It seems to go one level deeper every 20 seconds or so? That's about how often the status.txt document is saved, maybe it has something to do with the change handler that notices document changes and saves to localStorage.

I think that handler is saving the whole storage object instead of just storage._docs. E.g. "onWrite" shouldn't be in localStorage.

Tested in Firefox and Chrome

On Twodays Crossing, if you create an invite code it uses undefined as the workspace instead of the current workspace.

earthstar:///?workspace=undefined&pub=https://earthstar-demo-pub-v5-a.glitch.me&v=1

Problem

Deleting a document doesn't always trigger useDocuments to re-render the component.

Reason

I think it's because...

It subscribes to storage events here...

It uses path queries to detect when things have changed.

But some kinds of queries are not supported on path queries... like contentLength. Those are just ignored when doing the path query.

My code that triggers this bug

In my code I'm doing a query to get all documents except deleted documents (which have content length zero):

https://github.com/cinnamon-bun/buntimer-earthstar/blob/0e8f0555955f4c9a5e65a221c423f46c9114680a/src/buntimer.tsx#L89-L96

    let query: Query = {
        pathStartsWith: '/buntimer-v1/timers/common/',
        pathEndsWith: '.json',
        contentLengthGt: 0,  // <--------
    }

When I delete a document, the hook does not re-render.

If I remove contentLengthGt from the query and manually filter out the deleted documents later on, it does re-render.

Why path queries work this way

For efficiency, path queries can only look at the path itself, they can't look at document content or timestamps or anything else.

In the Query type, we've separated out the safe kinds of queries that only apply to paths...

https://github.com/earthstar-project/earthstar/blob/main/src/storage/query.ts#L39-L56

export interface Query {
    //=== filters that affect all documents equally within the same path  <------
    path?: string,
    pathStartsWith?: string,
    pathEndsWith?: string,

...And these are the other filters that can't be used in path queries.

    //=== filters that differently affect documents within the same path  <-----
    timestamp?: number,
    timestampGt?: number,
    timestampLt?: number,
    author?: AuthorAddress,
    contentLength?: number,
    contentLengthGt?: number,
    contentLengthLt?: number,

Solutions?

I guess we need to not use paths() queries inside useDocuments to tell if things have changed.

In the meantime, I worked around the problem by limiting my query to just the path-related filters and doing further filtering myself in javascript.

With 1 workspace, when you reload the page the content appears immediately.

With 2+ workspaces, the Earthbar loads immediately but it sometimes takes a second or two for the content to load from localStorage.

I suspect there's a race condition or something and we're saving-and-loading to localStorage over and over for each document during the boot process? I think I've seen something like this happen also when receiving sync'd changes when there's more than one workspace set up.

Some console.logs around the localStorage code would probably help clear this up