Global States (SPA)

Set state that is visible to all components

Introduction

You might be familliar with useContext() function of the React framework that allows values to be available without passing props. It is a real hassle to setup and often time very confusing. This chapter will simply show a method of how the State function can be used in WebLabs to offer states that are globally available.

This only work for SPAs and not on pages served from a server. If you are using AppRouter() and AppNavigator() it will work just fine since it is part of SPA WebLabs package

Problem & Solution

Let's say we want to make a social media application using Supabase and WebLabs, and we want to retrive the user to show appropriate routes to them. But this means we need to load the user at every view, or load them once in a state and pass it to every component. That sounds very inefficient and will go out of hand very easily.

Rather, we can do is create a separate supabase file as supabase.ts and do something like this:

import { createClient } from '@supabase/supabase-js'
import type { User } from '@supabase/supabase-js'
import { State } from '@weblabsjs/core'

// Create a single supabase client for interacting with your database
export const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')
export const user = State<User | undefined>(undefined) 

Now we can import this user state and update it in our splash screen, and then divert them to other routes accordingly.

We can use AppRouter() to create SPA Routes and navigate them using the AppNavigator() function, so it might look somewhat like this:

//this is the splash view

import { div, p } from "@weblabsjs/core/components";
import { user as GlobalUser, supabase } from "../supabase";
import { AppNavigator, onLoad } from "@weblabsjs/core";

export default function SplashView() {

    //in this view, we are responsible for loading
    //the user and setting it in the global user object

    onLoad(async () => {
            
            const { data: { user } } = await supabase.auth.getUser()

            if ( user != undefined ) {
    
                GlobalUser.set(user)
                AppNavigator("/feed")
    
            } else {
                AppNavigator("/login")
            }

    })

    return div(
        //your splash screen goes here
    )
}

You can also use state subscriptions to directly interfere with the state without explicitly have to deal with the user state, and you can use some subscription-based functions like onAuthStateChange() in conjunction with State.subscribe() to detect login interfaces accurately.

You can also use this pattern for work cases like that of Redux does, since weblabs state can be shared amongst various components, and you can also do what redux does of immutable data array system extending the State.

There is no limit to what you can do with WebLabs. It is made of simple functions that can solve almost any problem, since they work synchronously so well.