herbsjs / todolist-on-herbs

A sample Todo List app using Herbs

Website

This website is built using Docusaurus 2, a modern static website generator.

Installation

yarn install

Local Development

yarn start

This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.

Build

yarn build

This command generates static content into the build directory and can be served using any static contents hosting service.

Deployment

GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy

If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the gh-pages branch.

todolist-on-herbs's Issues

The items inside list are not returning inside route /lists

Describe the bug
When accessing the route /lists (get all lists) only the lists are returned but not the items inside the lists.

To Reproduce
Run localy and access the route http://localhost:4000/lists

Frontend - Implement UpdateList

Implement Create Item

Implement Create Item use case and mutation

Update List in SPA

Create method to update lists

Create list using SPA architecture.

Implement the list creation functionality based on the SPA architecture.

Adjust the main read me file

Write a new main read me explaining the complete project

• how to use
• front end stack + link to read me
• back end stack + link to read me

Application breaks after update herbs2gql version

Describe the bug
After updating herbs2gql with version 2.1.4 (herbsjs/herbs2gql#47) or higher the application breaks when is starts up

To Reproduce
Steps to reproduce the behavior:

1. Run the project, and you will see in the console the error.

Screenshots

Additional context
@pamellaas, @Vx-Nico please fix this bug.

Fix package.json

package.json is pointing the npm start to wrong folder.

Implement a SPA front-end

Create a simple SPA to start consume the API and have a nice UI.
Should it be a completely separate project or a directory on the root folder works (back-end/front-end)?

Implement Update Item

Implement Update Item use case and mutation

Upgrade the To-do-List Apollo Server 3

From @m7vicente

Apollo Server 3 has significant changes in the implementation of graphql api structure.

Update the To-do-List project will help us to understand if the upgrade has some effect o herbs2gql and will make the To-do-List example more actual as possible.

Herbs Shelf not working

When accessing http://localhost:4000/herbsshelf it shows nothing.

Debug:

Create method to delete item

Create method to delete item from the todo list

Layout and Design

I believe that the project can include a simple layout with a good design, but that shows the real potential of the project.

Create and Update Item on List

Implementation of CreateItemList and UpdateItemList use case and GraphQL mutation for that operations.

Implementation of frontend behavior

We need to implement some behaviors on frontend, that improve user experience.

UpdateList and DeleteList

Implementation of UpdateList and DeleteList use case and GraphQL mutation for that operations.

Delete list in SPA

Implement the functionality of deleting a list in the SPA using the DeleteList usecase

Add getAll lists in backend

We already have a feature that can get lists by their own ids, would it be a nice ideia to create a query to get all lists?

This example project must to be generated with herbs-cli?

I think this example app must to be generated with our herbs-cli ooor the example app must to be inside herbs-cli repository into an example folder

Frontend - Implement GetList and CreateList

Implement methods bellow on frontend using Apollo React Hooks for connect with graphql api:

• GetTodos
• CreateTodo

Coverage Tests and Authorization Rules

I believe it is necessary to update the authorization rules, and improve test coverage.

What about herbs CLI ?

Herbs CLI

Inspired by VueJS, Angular, dotnet and others, I would like to suggest the creation of a CLI to help the new herbs adopters

Usually developer use CLIs to easily start an project and principally the jr developers use it to maintain the project in the same architecture proposed by the framework.

The main idea of this CLI is to facilitate the creation of new projects and modules in your project that use herbs. In the future I believe this CLI can be an tool to check your herbs quality code, help you to modeling your clean archtecture, analisy logs and more, but for now it will start being something like a semi-inteligent code generator.

Herbs start

Propose 1

My initial propose is to build an entry project by the CLI like an template

Herbs new app -—graphql -—knex-pg (We can use --rest --mongo --knex-sql-server and other)

This will create an app with graphql that use a knex-repository, the generated files will be something like this:

│   ├── herbs.json
│   ├── index.js
│   ├── knexfile.js
│   ├── package.json
│   └── src
│       ├── domain
│       │   ├── entities
│       │   │   ├── entity.js
│       │   │   ├── entity.test.js
│       │   └── usecases
│       │       ├── createEntity.js
│       │       ├── createEntity.test.js
│       │       ├── deleteEntity.js
│       │       ├── deleteEntity.test.js
│       │       ├── getEntity.js
│       │       ├── getEntity.test.js
│       │       ├── updateEntity.js
│       │       └── updateEntity.test.js
│       └── infra
│           ├── api
│           │   ├── graphql
│           │   │   ├── custom
│           │   │   ├── defaultResolver.js
│           │   │   ├── defaultResolver.test.js
│           │   │   ├── index.js
│           │   │   ├── mutations.js
│           │   │   ├── queries.js
│           │   │   └── types.js
│           │   └── server.js
│           ├── config
│           │   ├── config.js
│           ├── db
│           │   └── migrations
│           │       ├── 20210101000000_entity.js
│           ├── repl
│           │   └── index.js
│           └── repositories
│               ├── memDB
│               │   ├── inMemDB.js
│               │   ├── EntityRepository.js
│               │   ├── EntityRepository.test.js
│               └── pg
│                   ├── connection.js
│                   ├── EntityRepository.js

note we have an herbs.json, this json will be an control file to help the cli when it add new modules in the project.

Propose 2

my second propose is to build an modular project, so the first thing you need is to create your entities int the root project path:

├── user.js
├── item.js

so when we start our project we can generate all project using the entities
Herbs new app -—graphql —-knex

This will create an app with graphql that use knex into repository, the generated files will be something like this:

│   ├── herbs.json
│   ├── index.js
│   ├── knexfile.js
│   ├── package.json
│   └── src
│       ├── domain
│       │   ├── entities
│       │   │   ├── user.js
│       │   │   ├── user.test.js
│       │   └── usecases
│       │       ├── createUser.js
│       │       ├── createUser.test.js
│       │       ├── deleteUser.js
│       │       ├── deleteUser.test.js
│       │       ├── getUser.js
│       │       ├── getUser.test.js
│       │       ├── updateUser.js
│       │       └── updateUser.test.js
│       │       ├── createItem.js
│       │       ├── createItem.test.js
│       │       ├── deleteItem.js
│       │       ├── deleteItem.test.js
│       │       ├── getItem.js
│       │       ├── getItem.test.js
│       │       ├── updateItem.js
│       │       └── updateItem.test.js
│       └── infra
│           ├── api
│           │   ├── graphql
│           │   │   ├── custom
│           │   │   ├── UserResolver.js
│           │   │   ├── UserResolver.test.js
│           │   │   ├── ItemResolver.js
│           │   │   ├── ItemResolver.test.js
│           │   │   ├── index.js
│           │   │   ├── mutations.js
│           │   │   ├── queries.js
│           │   │   └── types.js
│           │   └── server.js
│           ├── config
│           │   ├── config.js
│           ├── db
│           │   └── migrations
│           │       ├── 20210101000000_User.js
│           │       ├── 20210101000000_item.js
│           ├── repl
│           │   └── index.js
│           └── repositories
│               ├── memDB
│               │   ├── inMemDB.js
│               │   ├── UserRepository.js
│               │   ├── UserRepository.test.js
│               └── pg
│                   ├── connection.js
│                   ├── UserRepository.js
│                   ├── UserRepository.test.js
│               │   ├── ItemRepository.js
│               │   ├── ItemRepository.test.js

note we have an herbs.json, this json will be an control file to help the cli when it add new modules in the project.

Propose 3

Makes the propose-1 so grow the CLI to propose-2

Herbs Modules

After create your app, you can write an new entity in the project and generate a new crud for this entity, example:
herbs new entity ShoppingCart(or you can specify the entity path with --path)
So we will in the entities path `src/entities/item.js, read the file and generate a CRUD usecase (create, delete, list, update), generate the repository and add this entity into graphql layer.

│   ├── herbs.json
│   ├── index.js
│   ├── knexfile.js
│   ├── package.json
│   └── src
│       ├── domain
│       │   ├── entities
│       │   │   ├── user.js
│       │   │   ├── user.test.js
│       │   └── usecases
│       │       ├── createUser.js
                [...]
│       │       ├── createItem.js
│       │       [...]
                ├── createShoppingCart.test.js
│       │       ├── deleteShoppingCart.js
│       │       ├── deleteShoppingCart.test.js
│       │       ├── getShoppingCart.js
│       │       ├── getShoppingCart.test.js
│       │       ├── updateShoppingCart.js
│       │       └── updateShoppingCart.test.js
│       └── infra
│           ├── api
│           │   ├── graphql
│           │   │   ├── custom
                    [...]
│           │   │   ├── ShoppingCart.js
│           │   │   ├── ShoppingCart.test.js
│           │   │   ├── index.js
│           │   │   ├── mutations.js
│           │   │   ├── queries.js
│           │   │   └── types.js
│           │   └── server.js
│           ├── config
│           │   ├── config.js
│           ├── db
│           │   └── migrations
                    [...]
│           │       ├── 20210101000000_ShoppingCart.js
│           ├── repl
│           │   └── index.js
│           └── repositories
│                   memDB
│                   ├── inMemDB.js
                    [...]
│                   ├── 20210101000000_ShoppingCart.js
│                   pg
│                   ├── connection.js
│                   ├── UserRepository.js
│                   ├── UserRepository.test.js
│                   ├── ItemRepository.js
│                   ├── ShoppingCartRepository.test.js
│                   ├── ShoppingCartRepository.test.js

other example is to create new presentation layer
herbjs new module --rest

so we add the herbs2rest into package.json and generate the rest layer

I believe we can have the commands:

beta stage
herbs new app < --graphql --rest --knex --mongo >

release 1.0
herbs add layer < --graphql --rest --knex --mongo >
herbs add entity <name or --path>