The WebUI for the OPFS server
Chris Walker 376bca733c Initial commit of UIv4 2 years ago
public Initial commit of UIv4 2 years ago
src Initial commit of UIv4 2 years ago
.gitignore Initial commit of UIv4 2 years ago Initial commit of UIv4 2 years ago
package.json Initial commit of UIv4 2 years ago


The Web App to access data on an OPFS server.


This is a react/react-router/redux/react-redux/redux-saga based webapp.

So thats a lot. lets think about how state works.

    //these are all the queries we have made
    //useful to keep seperate as a sort of cache.
    //this way navigating back and forth between pages should be fast
    "queries": {
        // the id is the serialized form of the query. deserializable into
        // the original query object. The equivalent query will return the 
        // same id.
        // queries include pagination, so this is every api request (more or less)
        "<id>": {
            status: "preflight|loading|success|error",
            hits: <count>,
            limit: <count>,
            items: [], // data when available, this will be the list of ids
            error: null, // error on error
            start: timestamp, //when the request was sent
            finish: timestamp, //when it came back

    //this is the list of items explicitly.
    //updated every time a result comes back from the api, overwriting the
    //item already there
    "items": {
        "<id>": {item data}

    //this data is for the about splash and user icon.
    "info": {
        status: "as above",
        //these data from the /api/info info call
        opfs: {},
        user: {}

    "ui": {
        //available width/height (used to calculate grid sizing)
        width: <int>,
        height: <int>,

        //List Style to use for each view "smallGrid", "largeGrid", "map"
        recentGridSize: "smallGrid",
        searchResultGridSize: "smallGrid",
        collectionGridSize: "largeGrid",

    //currently selected items
    "selection": []

A lot of state is held in the URL (to enable shareable URLs).

/collection/?detail= /collection/?detail=&edit /collection/?detail=&slideshow <- basically means auto-advance.

/search?query= /search?query=&view=map|grid /search?query=&detail=&edit /search?query=&detail=&slideshow <- basically means auto-advance.


We have a search syntax, so the main bit will be a text box.

We could manage this programmatically - i.e. on the map view we could Drag square to load items in the square (we have a boundingbox and distance/radius queries).

Then we have options, which are

- "my items only" 
- "shared items only"
- "public only"
- "deleted" - include soft-deleted items (I think this is the only one that is not "only deleted items".

They will need to be checkboxes.

Then we have a “from” and “size”, but that should be managed by “load more” buttons.

Finally there is the sort, we should probably limit this to a couple of options (or text input for custom).

Redux Saga

Using saga for side effects is awesome and allows all sorts of nicety’s like async cancellation and shit.