TS Web UI for managing Golem

[Myestery]

/claim #1189
/fix #1189

MacOS Build: here

A continuation of #1195 with all stated issues resolved.

How it works

A new service is created called golem-ui-service, this service has an axum server and a react/TS project
The axum server serves as a proxy to the golem backend which the frontend then interacts with. It also serves the frontend assets when compiled.

Assets

The frontend assets are added to the golem executable using rust-embed

Usage

The UI server can be switched on by running golem ui command
This command takes in 3 optional arguments

• port: default=3000
• host: default=127.0.0.1
• api_url: default=http://localhost:9881

Features

• Creating components
• Creating workers
• Creating Plugins
• Creating API Definitions and routes within them
• invoking functions from workers
• install plugins on components
• Activate/deactivate plugins on workers
• Three different types of api routes are now supported
• UI now uses golem themes from console

Limitations

• Creating components with files
• managing files from a worker

Building

run npm run build under golem-ui-service/frontend and then cargo build

[jdegoes]

@Myestery Can we meet to have a demo? Please send me your email and I will schedule something.

[Myestery]

@Myestery Can we meet to have a demo? Please send me your email and I will schedule something.

sent to discord dm

[Rumixyz]

/claim 1189
/Fix 1189

Code Summary
The provided code defines a TypeScript-like interface for a personal todo application. It includes user profile management and task management functionalities, utilizing records and enums to structure data and handle errors.

Problem
Upon reviewing the code, several potential issues and bugs were identified, particularly in the naming conventions and the handling of optional types.

Cause
Naming Conventions: The use of hyphens in identifiers (e.g., created-at, due-date, list-due-before) is not standard in many programming languages, including TypeScript and JavaScript. This can lead to syntax errors or unexpected behavior.

Optional Types: The use of option suggests a nullable type, but the implementation does not clarify how these optional values are handled. If not managed properly, this could lead to runtime errors when accessing these properties.

Solution
To resolve the identified issues, the following changes are recommended:

Rename Identifiers: Change hyphenated identifiers to use camelCase or snake_case. For example:

created-at should be renamed to createdAt
due-date should be renamed to dueDate
list-due-before should be renamed to listDueBefore
Clarify Optional Handling: Ensure that the code properly checks for the presence of optional values before accessing them. This can be done using conditional checks or default values.

Here is a revised version of the code with the suggested changes:

language-typescript
package todo:personal@0.1.0;

interface types {
// Basic timestamp type (Unix timestamp in milliseconds)
type timestamp = u64;

// User profile information
record profile {
    name: string,
    email: string,
    createdAt: timestamp,
    updatedAt: timestamp,
}

// Input for updating profile
record updateProfileInput {
    name: option<string>,
    email: option<string>,
}

// Represents a task
record task {
    id: u64,
    title: string,
    description: string,
    completed: bool,
    dueDate: option<timestamp>,
    createdAt: timestamp,
    updatedAt: timestamp,
}

// Input for creating a task
record createTaskInput {
    title: string,
    description: string,
    dueDate: option<timestamp>,
}

// Input for updating a task
record updateTaskInput {
    title: option<string>,
    description: option<string>,
    completed: option<bool>,
    dueDate: option<timestamp>,
}

// Error types
enum error {
    notFound,
    invalidInput,
    internalError,
}

}

// Profile management interface
interface profile {
use types.{error, profile, updateProfileInput};

// Get the current user's profile
get: func() -> result<profile, error>;

// Update the current user's profile
update: func(input: updateProfileInput) -> result<profile, error>;

}

// Task management interface
interface tasks {
use types.{error, task, createTaskInput, updateTaskInput, timestamp};

// Create a new task
create: func(input: createTaskInput) -> result<task, error>;

// Get a specific task by ID
get: func(id: u64) -> result<task, error>;

// Update an existing task
update: func(id: u64, input: updateTaskInput) -> result<task, error>;

// Delete a task
delete: func(id: u64) -> result<_, error>;

// List all tasks
list: func() -> result<list<task>, error>;

// List tasks due before a specific timestamp
listDueBefore: func(before: timestamp) -> result<list<task>, error>;

// List all completed tasks
listCompleted: func() -> result<list<task>, error>;

// List all incomplete tasks
listIncomplete: func() -> result<list<task>, error>;

}

// Main world definition
world todoWorker {
import types;
export profile;
export tasks;
}

[jdegoes]

After much deliberation, we have picked @itsparser as our winner of this bounty.

We wanted to again thank everyone for participating in the Golem open source ecosystem, and congratulation each team on making it all the way to the finish line--and, indeed, even a bit past the finish line in some cases!

For the two teams who did not win the bounty, you have proven yourself, and we are happy to give you an exclusive bounty on similar work, which only you are allowed to claim. Just send me a private message if that's something you'd be interested in!