@stone-js/starters 0.8.3

package/full-react-declarative/app/middleware/AuthMiddleware.ts

@@ -0,0 +1,85 @@
+import { UserService } from '../services/UserService'
+import { SecurityService } from '../services/SecurityService'
+import { IBlueprint, IMiddleware, Middleware, NextMiddleware } from '@stone-js/core'
+import { ISnapshot, isServer, ReactIncomingEvent, ReactOutgoingResponse, reactRedirectResponse } from '@stone-js/use-react'
+
+/**
+ * AuthMiddleware Options
+*/
+export interface AuthMiddlewareOptions {
+  snapshot: ISnapshot
+  blueprint: IBlueprint
+  userService: UserService
+  securityService: SecurityService
+}
+
+/**
+ * Set current user middleware
+ */
+@Middleware({
+  global: true,
+  params: [['/login', '/register']]
+})
+export class AuthMiddleware implements IMiddleware<ReactIncomingEvent, ReactOutgoingResponse> {
+  private readonly snapshot: ISnapshot
+  private readonly blueprint: IBlueprint
+  private readonly userService: UserService
+  private readonly securityService: SecurityService
+
+  /**
+   * Create a new instance of AuthMiddleware
+   *
+   * @param userService
+   */
+  constructor ({ blueprint, snapshot, userService, securityService }: AuthMiddlewareOptions) {
+    this.snapshot = snapshot
+    this.blueprint = blueprint
+    this.userService = userService
+    this.securityService = securityService
+  }
+
+  /**
+   * Handle the incoming event
+   *
+   * @param event - The incoming event
+   * @param next - The next middleware
+   * @returns The response
+   */
+  async handle (
+    event: ReactIncomingEvent,
+    next: NextMiddleware<ReactIncomingEvent, ReactOutgoingResponse>,
+    excludes: string[] = []
+  ): Promise<ReactOutgoingResponse> {
+    if (!excludes.includes(event.pathname)) {
+      if (!this.securityService.isAuthenticated()) {
+        this.blueprint.set('app.requestedUrl', event.pathname)
+        return await reactRedirectResponse({ url: '/login' })
+      }
+      await this.resolveCurrentUser(event)
+    }
+
+    return await next(event)
+  }
+
+  /**
+   * Resolve the current user and store it in the snapshot.
+   *
+   * This method uses the event fingerprint to store the user in the snapshot,
+   * ensuring that the snapshot is valid per request. If the user is already
+   * stored in the snapshot, it is retrieved from there; otherwise, it is
+   * fetched from the server.
+   *
+   * @param event - The incoming event
+   */
+  private async resolveCurrentUser (event: ReactIncomingEvent): Promise<void> {
+    if (isServer()) {
+      const user = await this.userService.current()
+      event.setUserResolver(() => user)
+      this.snapshot.set(`${event.fingerprint()}.user`, user)
+    } else {
+      let user = this.snapshot.get(`${event.fingerprint()}.user`)
+      user ??= await this.userService.current(true)
+      event.setUserResolver(() => user)
+    }
+  }
+}

package/full-react-declarative/app/models/Comment.ts

@@ -0,0 +1,31 @@
+import { User } from './User'
+
+/**
+ * Comment Interface
+*/
+export interface Comment {
+  id: number
+  author: User
+  content: string
+  authorId: number
+  postId: number
+  createdAt: number
+}
+
+/**
+ * New Comment Interface
+*/
+export interface CommentInput {
+  id: number
+  content: string
+  postId: number
+}
+
+/**
+ * Comment View Interface
+*/
+export interface CommentView extends CommentInput {
+  author: User
+  createdAt: number
+  status?: 'idle' | 'saving' | 'error'
+}

package/full-react-declarative/app/models/Post.ts

@@ -0,0 +1,22 @@
+import { User } from './User'
+
+/**
+ * Post Interface
+*/
+export interface Post {
+  id: number
+  author: User
+  title: string
+  content: string
+  authorId: number
+  createdAt: number
+  updatedAt: number
+}
+
+/**
+ * New Post Interface
+*/
+export interface PostInput {
+  title: string
+  content: string
+}

package/full-react-declarative/app/models/User.ts

@@ -0,0 +1,62 @@
+/**
+ * User Interface
+*/
+export interface User {
+  id: number
+  name: string
+  email: string
+  avatar: string
+  createdAt: number
+}
+
+/**
+ * New User Interface
+*/
+export interface UserInput {
+  name: string
+  email: string
+}
+
+/**
+ * User Login Interface
+*/
+export interface UserLogin {
+  email: string
+  password: string
+}
+
+/**
+ * User Register Interface
+*/
+export interface UserRegister {
+  name: string
+  email: string
+  password: string
+  confirmPassword: string
+}
+
+/**
+ * User Register Errors Type
+*/
+export type UserRegisterErrors = Record<string, string>
+
+/**
+ * User Change Password Interface
+*/
+export interface UserChangePassword {
+  password: string
+  newPassword: string
+  confirmPassword: string
+}
+
+/**
+ * User Token Interface
+*/
+export interface UserToken {
+  scope: string
+  stage: string
+  createdAt: number
+  expiresIn: number
+  tokenType: string
+  accessToken: string
+}

package/full-react-declarative/app/pages/home/HomePage.tsx

@@ -0,0 +1,44 @@
+import { JSX } from 'react'
+import { IPage, Page, ReactIncomingEvent, StoneLink, HeadContext } from '@stone-js/use-react'
+
+/**
+ * Home Page component.
+ */
+@Page('/')
+export class HomePage implements IPage<ReactIncomingEvent> {
+  head (): HeadContext {
+    return {
+      title: 'Home',
+      description: 'Welcome to the Stone.js Blog Dashboard'
+    }
+  }
+
+  /**
+   * Render the component.
+   *
+   * @returns The rendered component.
+   */
+  render (): JSX.Element {
+    return (
+      <div>
+        <h1>Stone.js Blog Dashboard</h1>
+        <p>Welcome to the Stone.js Blog Dashboard.</p>
+        <div>
+          <h2>Posts</h2>
+          <p>View the latest posts from the Stone.js Blog.</p>
+          <StoneLink to='/posts'>View Posts</StoneLink>
+        </div>
+        <div>
+          <h2>Users</h2>
+          <p>View the latest users from the Stone.js Blog.</p>
+          <StoneLink to='/users'>View Users</StoneLink>
+        </div>
+        <div>
+          <h2>Manage</h2>
+          <p>Manage your profile</p>
+          <StoneLink to='/manage'>Manage</StoneLink>
+        </div>
+      </div>
+    )
+  }
+}

package/full-react-declarative/app/pages/login/LoginPage.tsx

@@ -0,0 +1,73 @@
+import './LoginPage.css'
+import { IBlueprint } from '@stone-js/core'
+import { UserLogin } from '../../models/User'
+import { Dispatch, JSX, SetStateAction, useState } from 'react'
+import { LoginForm } from '../../components/LoginForm/LoginForm'
+import { SecurityService } from '../../services/SecurityService'
+import { IPage, IRouter, Page, ReactIncomingEvent } from '@stone-js/use-react'
+
+/**
+ * Login Page options.
+ */
+interface LoginPageOptions {
+  router: IRouter
+  blueprint: IBlueprint
+  securityService: SecurityService
+}
+
+/**
+ * Login Page component.
+ */
+@Page('/login', { layout: 'security' })
+export class LoginPage implements IPage<ReactIncomingEvent> {
+  private readonly router: IRouter
+  private readonly blueprint: IBlueprint
+  private readonly securityService: SecurityService
+
+  /**
+   * Create a new Login Page component.
+   *
+   * @param options - The options to create the Login Page component.
+   */
+  constructor ({ router, blueprint, securityService }: LoginPageOptions) {
+    this.router = router
+    this.blueprint = blueprint
+    this.securityService = securityService
+  }
+
+  /**
+   * Render the component.
+   *
+   * @param options - The options for rendering the component.
+   * @returns The rendered component.
+   */
+  render (): JSX.Element {
+    const [error, setError] = useState<boolean>(false)
+
+    return (
+      <div>
+        <LoginForm
+          error={error}
+          onSubmit={async (user: UserLogin) => await this.login(user, setError)}
+        />
+      </div>
+    )
+  }
+
+  /**
+   * Login the user.
+   *
+   * @param user - The user to login.
+   */
+  private async login (
+    user: UserLogin,
+    setError: Dispatch<SetStateAction<boolean>>
+  ): Promise<void> {
+    try {
+      await this.securityService.login(user)
+      this.router.navigate(this.blueprint.get('app.requestedUrl', '/'), true)
+    } catch (_: any) {
+      setError(true)
+    }
+  }
+}

package/full-react-declarative/app/pages/posts/CreatePostPage/CreatePostPage.tsx

@@ -0,0 +1,67 @@
+import './CreatePostPage.css'
+import { JSX } from 'react'
+import { ILogger } from '@stone-js/core'
+import { PostInput } from '../../../models/Post'
+import { PostService } from '../../../services/PostService'
+import { PostForm } from '../../../components/PostForm/PostForm'
+import { IPage, IRouter, Page, ReactIncomingEvent } from '@stone-js/use-react'
+
+/**
+ * Create Post Page options.
+ */
+export interface CreatePostPageOptions {
+  router: IRouter
+  logger: ILogger
+  postService: PostService
+}
+
+/**
+ * Create Post Page component.
+ */
+@Page('/posts/create')
+export class CreatePostPage implements IPage<ReactIncomingEvent> {
+  private readonly router: IRouter
+  private readonly logger: ILogger
+  private readonly postService: PostService
+
+  /**
+   * Create a new Post Page component.
+   *
+   * @param options - The options to create the Post Page component.
+   */
+  constructor ({ router, logger, postService }: CreatePostPageOptions) {
+    this.router = router
+    this.logger = logger
+    this.postService = postService
+  }
+
+  /**
+   * Render the component.
+   *
+   * @returns The rendered component.
+   */
+  render (): JSX.Element {
+    return (
+      <>
+        <h1>New Post</h1>
+        <PostForm onSubmit={this.createPost.bind(this)} />
+      </>
+    )
+  }
+
+  /**
+   * Create the post.
+   *
+   * @param post - The post to save.
+   */
+  private async createPost (postInput: PostInput): Promise<void> {
+    try {
+      const post = await this.postService.create(postInput)
+      this.router.navigate(`/posts/${post.id}`)
+    } catch (error: any) {
+      console.error(error)
+      window.alert('Error creating the post')
+      this.logger.error(error.message, { error })
+    }
+  }
+}

package/full-react-declarative/app/pages/posts/PostPage/PostPage.tsx

@@ -0,0 +1,60 @@
+import { JSX } from 'react'
+import { Post } from '../../../models/Post'
+import { PostService } from '../../../services/PostService'
+import { PostItem } from '../../../components/PostItem/PostItem'
+import { IPage, Page, PageRenderContext, ReactIncomingEvent, StoneLink } from '@stone-js/use-react'
+
+/**
+ * Post Page options.
+ */
+export interface PostPageOptions {
+  postService: PostService
+}
+
+/**
+ * List Post Page component.
+ */
+@Page('/posts')
+export class PostPage implements IPage<ReactIncomingEvent> {
+  private readonly postService: PostService
+
+  /**
+   * Create a new List Post Page component.
+   *
+   * @param options - The options to create the List Post Page component.
+   */
+  constructor ({ postService }: PostPageOptions) {
+    this.postService = postService
+  }
+
+  /**
+   * Handle the incoming event.
+   *
+   * @param event - The incoming event.
+   * @returns List of posts.
+   */
+  async handle (event: ReactIncomingEvent): Promise<Post[]> {
+    return await this.postService.list(event.get<number>('limit', 10))
+  }
+
+  /**
+   * Render the component.
+   *
+   * @param options - The options for rendering the component.
+   * @returns The rendered component.
+   */
+  render ({ data: posts }: PageRenderContext<Post[]>): JSX.Element {
+    return (
+      <>
+        <h1>
+          <span>Posts</span>
+          <StoneLink to='/posts/create'>New Post</StoneLink>
+        </h1>
+        <div>
+          {posts?.length === 0 && <p>No posts found.</p>}
+          {posts?.map(post => <PostItem key={post.id} post={post} />)}
+        </div>
+      </>
+    )
+  }
+}

package/full-react-declarative/app/pages/posts/ShowPostPage/ShowPostPage.tsx

@@ -0,0 +1,83 @@
+import { JSX } from 'react'
+import { Post } from '../../../models/Post'
+import { User } from '../../../models/User'
+import { ILogger, isNotEmpty } from '@stone-js/core'
+import { PostService } from '../../../services/PostService'
+import { CommentService } from '../../../services/CommentService'
+import { PostDetails } from '../../../components/PostDetails/PostDetails'
+import { IPage, IRouter, Page, PageRenderContext, ReactIncomingEvent } from '@stone-js/use-react'
+
+/**
+ * Show Post Page options.
+ */
+export interface ShowPostPageOptions {
+  router: IRouter
+  logger: ILogger
+  postService: PostService
+  commentService: CommentService
+}
+
+/**
+ * Show Post Page component.
+ */
+@Page('/posts/:post@id(\\d+)', { bindings: { post: 'postService@findBy' } })
+export class ShowPostPage implements IPage<ReactIncomingEvent> {
+  private readonly router: IRouter
+  private readonly logger: ILogger
+  private readonly postService: PostService
+  private readonly commentService: CommentService
+
+  /**
+   * Create a new Post Page component.
+   *
+   * @param options - The options to create the Post Page component.
+   */
+  constructor ({ router, logger, postService, commentService }: ShowPostPageOptions) {
+    this.router = router
+    this.logger = logger
+    this.postService = postService
+    this.commentService = commentService
+  }
+
+  /**
+   * Render the component.
+   *
+   * @param options - The options for rendering the component.
+   * @returns The rendered component.
+   */
+  render ({ event }: PageRenderContext<Post>): JSX.Element {
+    const post = event.get<Post>('post')
+    const user = event.getUser<User>() ?? {} as unknown as User
+
+    // Render the component
+    if (isNotEmpty<Post>(post)) {
+      return (
+        <PostDetails
+          user={user}
+          post={post}
+          onDelete={this.deletePost.bind(this)}
+          commentService={this.commentService}
+        />
+      )
+    }
+
+    return <article><h1>Post not found</h1></article>
+  }
+
+  /**
+   * Delete the post.
+   *
+   * @param post - The post to delete.
+   */
+  private async deletePost (post: Post): Promise<void> {
+    if (window.confirm('Are you sure you want to delete this post?')) {
+      try {
+        await this.postService.delete(post.id)
+        this.router.navigate('/posts')
+      } catch (error: any) {
+        window.alert('Error deleting the post')
+        this.logger.error(error.message, { error })
+      }
+    }
+  }
+}

package/full-react-declarative/app/pages/posts/UpdatePostPage/UpdatePostPage.tsx

@@ -0,0 +1,77 @@
+import { JSX } from 'react'
+import { ILogger, isNotEmpty } from '@stone-js/core'
+import { Post, PostInput } from '../../../models/Post'
+import { PostService } from '../../../services/PostService'
+import { PostForm } from '../../../components/PostForm/PostForm'
+import { IPage, Page, ReactIncomingEvent, PageRenderContext, StoneLink } from '@stone-js/use-react'
+
+/**
+ * Update Post Page options.
+ */
+export interface UpdatePostPageOptions {
+  logger: ILogger
+  postService: PostService
+}
+
+/**
+ * Update Post Page component.
+ */
+@Page('/posts/:post@id(\\d+)/edit', { bindings: { post: 'postService@findBy' } })
+export class UpdatePostPage implements IPage<ReactIncomingEvent> {
+  private readonly logger: ILogger
+  private readonly postService: PostService
+
+  /**
+   * Create a new Post Page component.
+   *
+   * @param options - The options to create the Post Page component.
+   */
+  constructor ({ logger, postService }: UpdatePostPageOptions) {
+    this.logger = logger
+    this.postService = postService
+  }
+
+  /**
+   * Render the component.
+   *
+   * @param options - The options for rendering the component.
+   * @returns The rendered component.
+   */
+  render ({ event }: PageRenderContext<Post>): JSX.Element {
+    const post = event.get<Post>('post')
+
+    if (isNotEmpty<Post>(post)) {
+      return (
+        <>
+          <h1>{post.title}</h1>
+          <PostForm
+            post={post}
+            onSubmit={async (postInput) => await this.updatePost(post.id, postInput)}
+          />
+          <StoneLink to={`/posts/${post.id}`}>Back</StoneLink>
+        </>
+      )
+    }
+
+    return (
+      <article>
+        <h1>Post not found</h1>
+      </article>
+    )
+  }
+
+  /**
+   * Update the post.
+   *
+   * @param post - The post to update.
+   */
+  private async updatePost (id: number, post: PostInput): Promise<void> {
+    try {
+      await this.postService.update(id, post)
+      window.alert('Post updated successfully')
+    } catch (error: any) {
+      window.alert('Error updating the post')
+      this.logger.error(error.message, { error })
+    }
+  }
+}

package/full-react-declarative/app/pages/register/RegisterPage.tsx

@@ -0,0 +1,68 @@
+import { Dispatch, JSX, SetStateAction, useState } from 'react'
+import { SecurityService } from '../../services/SecurityService'
+import { UserRegister, UserRegisterErrors } from '../../models/User'
+import { IPage, Page, ReactIncomingEvent } from '@stone-js/use-react'
+import { RegisterForm } from '../../components/RegisterForm/RegisterForm'
+
+/**
+ * Register Page options.
+ */
+interface RegisterPageOptions {
+  securityService: SecurityService
+}
+
+/**
+ * Register Page component.
+ */
+@Page('/register', { layout: 'security' })
+export class RegisterPage implements IPage<ReactIncomingEvent> {
+  private readonly securityService: SecurityService
+
+  /**
+   * Create a new Register Page component.
+   *
+   * @param options - The options to create the Register Page component.
+   */
+  constructor ({ securityService }: RegisterPageOptions) {
+    this.securityService = securityService
+  }
+
+  /**
+   * Render the component.
+   *
+   * @param options - The options for rendering the component.
+   * @returns The rendered component.
+   */
+  render (): JSX.Element {
+    const [done, setDone] = useState<boolean>(false)
+    const [error, setError] = useState<UserRegisterErrors>({})
+
+    return (
+      <div>
+        <RegisterForm
+          done={done}
+          error={error}
+          onSubmit={async (user: UserRegister) => await this.register(user, setDone, setError)}
+        />
+      </div>
+    )
+  }
+
+  /**
+   * Register the user.
+   *
+   * @param user - The user to register.
+   */
+  private async register (
+    user: UserRegister,
+    setDone: Dispatch<SetStateAction<boolean>>,
+    setError: Dispatch<SetStateAction<UserRegisterErrors>>
+  ): Promise<void> {
+    try {
+      await this.securityService.register(user)
+      setDone(true)
+    } catch (error: any) {
+      setError(error.response?.data?.errors ?? {})
+    }
+  }
+}