Hello World Example

Frontend:

import './styles.css';
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { createPortal } from 'react-dom';
import { frontendConnector, getReactWrapper } from '@stlse/frontend-connector';

// get react wraper methods to use for action/filter hooks that pass React component 
const { ReactWrap, wrapComponent } = getReactWrapper({ React, ReactDOM, createPortal });

// we need to always call the connector for a module
frontendConnector({
  // specify the react information for compatibility between multiple react versions for react hooks
  react: { React, ReactDOM, createPortal },
  hooks: {
    filters: [{ 
      filters_hello_world: (ctx, ret, nn) => {
        return ret + 1;
      }
    }],
    actions: [{ 
      actions_hello_world: (ctx, ret, nn) => {
        alert('actions_hello_world: ' + nn);
        return ret;
      }
    }],
    // add the "MyNewReactComponent" component to the root mount point
    react: [{ 
      stlse_root_mount_point: (ctx, ret) => MyNewReactComponent,
    }]
  },
});

function MyNewReactComponent(p) {
  const [apiVal, setApiVal] = React.useState('');
  const [filterVal, setFilterVal] = React.useState(null);

  const onClickApi = () => {
    use_frontend_action.stlse_request('GET', '/api_test')
      .then(response => setApiVal(JSON.stringify(response.data)))
      .catch(error => setApiVal(JSON.stringify(error)));
  }

  const onClickCreate = () => {
    use_frontend_action.stlse_request('POST', '/create', {data: {name: Math.random().toString()}})
      .then(response => setApiVal(JSON.stringify(response.data)))
      .catch(error => setApiVal(JSON.stringify(error)));
  }

  const onClickList = () => {
    use_frontend_action.stlse_request('GET', '/list')
      .then(response => setApiVal(JSON.stringify(response.data)))
      .catch(error => setApiVal(JSON.stringify(error)));
  }

  const onClickFilter = () => {
    const val = use_frontend_filter.filters_hello_world(1);
    setFilterVal(val);
  }

  const onClickAction = () => {
    use_frontend_action.actions_hello_world(1);
  }

  return (
    <>
      <h1>Hello from Module: <%= name %></h1>
      
      <br/>
      <hr/>
      <button onClick={onClickApi}>Test API call</button>
      <button onClick={onClickCreate}>Create User</button>
      <button onClick={onClickList}>List Users</button>
      {apiVal && (<>
        <h2>Api response</h2>
        <div>{apiVal}</div>
      </>)}
      
      <br/>
      <hr/>
      <button onClick={onClickFilter}>Test Filter hook</button>
      {filterVal !== null && (<>
        <h2>Test Filter response</h2>
        <div>{filterVal}</div>
      </>)}

      <br/>
      <hr/>
      <button onClick={onClickAction}>Test Action hook</button>

    </>
  );
}

Backend:

import express from 'express';
import { backendConnector, db }  from '@stlse/backend-connector';
import { onRequestHook_Express, bodyParser } from '@stlse/backend-connector';

const app = express();
app.use(bodyParser.json());

// we need to always call the connector for a module
backendConnector({
  // request coming to this module needs to be translated
  // for this example we use the onRequestHook_Express adapter which allows you
  // to handle the request using express. Other adaptors can be used
  onRequest: onRequestHook_Express(app),
  hooks: {
    filters: [{ 
      filters_hello_world: (ctx, ret, n) => {
        return ret + 1;
      }
    }],
    actions: [{ 
      actions_hello_world: (ctx, ret, n) => {
        console.log('actions_hello_world: ' + n);
        return ret;
      }
    }]
  },
});

app.get('/api_test', async (req, res, next) => {
  try {
    const value = await use_backend_filter.filters_hello_world(req, 1);
    const object = { api_test_ok: true, module_name: 'your_module_name', filters_hello_world: value };
    await use_backend_action.actions_hello_world(req, 1);
    res.status(202).send(object);
  } catch (e) {
    next(e);
  }
});

app.post('/create', async (req, res, next) => {
  try {
    const obj = req.body || {};
    // the db() function acts the same way as a mongodb database object but it requires us to pass the "req" request object.
    const saved = await db(req).collection('CollectionName').insertOne(obj);
    res.status(201).send({_id: saved.insertedId});
  } catch (e) {
    next(e)
  }
});

app.get('/list', async (req, res, next) => {
  try {
    // the db() function acts the same way as a mongodb database object but it requires us to pass the "req" request object.
    // for the find() function we need to always call .toArray()
    const list = await db(req).collection('CollectionName').find().toArray();
    res.send({items: list});
  } catch (e) {
    next(e)
  }
});