[examples/hackernews] Various improvements. (#776)

<img width="898" alt="Screenshot 2025-02-26 at 17 04 50"
src="https://github.com/user-attachments/assets/556b54c6-0493-4867-8744-f74de2ebbb74"
/>

Author: Lucas Hosseini

examples/hackernews/db/schema.sql

@@ -8,7 +8,8 @@ CREATE TABLE posts (
        "author_id" INTEGER,
        "title" TEXT,
        "url" TEXT,
-       "body" TEXT
+       "body" TEXT,
+       "date" TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
 );
 CREATE TABLE upvotes (
        "id" SERIAL PRIMARY KEY,
@@ -18,8 +19,29 @@ CREATE TABLE upvotes (
 
 -- Fixtures
 INSERT INTO users("id", "name", "email") VALUES
-       (1, 'Lucas', 'lucas@skiplabs.io'),
-       (2, 'Daniel', 'daniel@skiplabs.io');
-INSERT INTO posts("title", "url", "body", "author_id") VALUES
-       ('Hello!', 'http://foo.org', 'This is a post', 1),
-       ('Reactive stuff', 'http://bar.net', 'This is neat.', 2);
+       (1, 'Benno', 'benno@skiplabs.io'),
+       (2, 'Charles', 'charles@skiplabs.io'),
+       (3, 'Daniel', 'daniel@skiplabs.io'),
+       (4, 'Josh', 'josh@skiplabs.io'),
+       (5, 'Julien', 'julien@skiplabs.io'),
+       (6, 'Laure', 'laure@skiplabs.io'),
+       (7, 'Lucas', 'lucas@skiplabs.io'),
+       (8, 'Mehdi', 'mehdi@skiplabs.io');
+SELECT setval('users_id_seq', max(id) + 1) FROM users;
+
+INSERT INTO posts("id", "title", "url", "body", "author_id", "date") VALUES
+       (0, 'Skip''s Origins', 'https://skiplabs.io/blog/skips-origins', '', 5, '2025-02-11 00:00:00+00'),
+       (1, 'New skiplabs website!', 'https://skiplabs.io', '', 2, '2025-01-12 00:00:00+00'),
+       (2, 'Why Skip?', 'https://skiplabs.io/blog/why-skip', '', 5, '2025-02-11 00:00:00+00'),
+       (3, 'Skip alpha just dropped', 'https://skiplabs.io/blog/skip-alpha', '', 3, '2024-12-24 00:00:00+00'),
+       (4, 'Skip docs website', 'https://skiplabs.io/docs/introduction', '', 4, '2024-11-11 00:00:00+00'),
+       (5, 'Building a HN clone with Skip', 'https://github.com/SkipLabs/skip/pull/343/', '', 7, '2024-09-28 00:00:00+00');
+SELECT setval('posts_id_seq', max(id) + 1) FROM posts;
+
+INSERT INTO upvotes("user_id", "post_id") VALUES
+       (1, 0), (2, 0), (5, 0), (8, 0),
+       (1, 1), (2, 1), (3, 1), (4, 1), (5, 1), (6, 1), (7, 1), (8, 1),
+       (3, 2), (5, 2), (7, 2),
+       (1, 3), (3, 3),
+       (2, 4), (3, 4), (5, 4),
+       (1, 5), (2, 5), (3, 5), (4, 5), (5, 5), (6, 5), (8, 5);

examples/hackernews/reactive_service/src/hackernews.service.ts

@@ -14,6 +14,7 @@ type Post = {
   title: string;
   url: string;
   body: string;
+  date: number;
 };
 
 type User = {
@@ -26,10 +27,16 @@ type Upvote = {
   user_id: number;
 };
 
-type Upvoted = Post & { upvotes: number; author: User };
+type PostWithUpvoteIds = Post & { upvotes: number[]; author: User };
 
-type ResourceInputs = {
-  postsWithUpvotes: EagerCollection<number, Upvoted>;
+type PostWithUpvoteCount = Omit<Post, "author_id"> & {
+  upvotes: number;
+  upvoted: boolean;
+  author: User;
+};
+
+type Session = User & {
+  user_id: number;
 };
 
 const postgres = new PostgresExternalService({
@@ -41,9 +48,9 @@ const postgres = new PostgresExternalService({
 });
 
 class UpvotesMapper {
-  mapEntry(key: number, values: Values<Upvote>): Iterable<[number, number]> {
-    const value = values.getUnique().post_id;
-    return [[value, key]];
+  mapEntry(_key: number, values: Values<Upvote>): Iterable<[number, number]> {
+    const upvote: Upvote = values.getUnique();
+    return [[upvote.post_id, upvote.user_id]];
   }
 }
 
@@ -53,47 +60,132 @@ class PostsMapper {
     private upvotes: EagerCollection<number, number>,
   ) {}
 
-  mapEntry(key: number, values: Values<Post>): Iterable<[number, Upvoted]> {
+  mapEntry(
+    key: number,
+    values: Values<Post>,
+  ): Iterable<[[number, number], PostWithUpvoteIds]> {
     const post: Post = values.getUnique();
-    const upvotes = this.upvotes.getArray(key).length;
+    const upvotes: number[] = this.upvotes.getArray(key);
     let author;
     try {
       author = this.users.getUnique(post.author_id);
     } catch {
       author = { name: "unknown author", email: "unknown email" };
     }
-    // Projecting all posts on key 0 so that they can later be sorted.
-    return [[0, { ...post, upvotes, author }]];
+    return [[[-upvotes.length, key], { ...post, upvotes, author }]];
   }
 }
 
-class SortingMapper {
-  mapEntry(key: number, values: Values<Upvoted>): Iterable<[number, Upvoted]> {
-    const posts = values.toArray();
-    // Sorting in descending order of upvotes.
-    posts.sort((a, b) => b.upvotes - a.upvotes);
-    return posts.map((p) => [key, p]);
+class CleanupMapper {
+  constructor(private readonly session: Session | null) {}
+
+  mapEntry(
+    key: [number, number],
+    values: Values<PostWithUpvoteIds>,
+  ): Iterable<[number, PostWithUpvoteCount]> {
+    const post = values.getUnique();
+    let upvoted;
+    if (this.session === null) upvoted = false;
+    else upvoted = post.upvotes.includes(this.session.user_id);
+    const upvotes = post.upvotes.length;
+    return [
+      [
+        key[1],
+        {
+          title: post.title,
+          url: post.url,
+          body: post.body,
+          date: post.date,
+          author: post.author,
+          upvotes,
+          upvoted,
+        },
+      ],
+    ];
   }
 }
 
-class PostsResource implements Resource<ResourceInputs> {
+type PostsResourceInputs = {
+  postsWithUpvotes: EagerCollection<[number, number], PostWithUpvoteIds>;
+  sessions: EagerCollection<string, Session>;
+};
+
+type PostsResourceParams = { limit?: number; session_id?: string };
+
+class PostsResource implements Resource<PostsResourceInputs> {
   private limit: number;
+  private session_id: string;
 
-  constructor(param: Json) {
-    if (typeof param == "number") this.limit = param;
-    else this.limit = 25;
+  constructor(jsonParams: Json) {
+    const params = jsonParams as PostsResourceParams;
+    if (params.limit === undefined) this.limit = 25;
+    else this.limit = params.limit;
+    if (params.session_id === undefined)
+      throw new Error("Missing required session_id.");
+    else this.session_id = params.session_id as string;
   }
 
-  instantiate(collections: ResourceInputs): EagerCollection<number, Upvoted> {
-    return collections.postsWithUpvotes.take(this.limit).map(SortingMapper);
+  instantiate(
+    collections: PostsResourceInputs,
+  ): EagerCollection<number, PostWithUpvoteCount> {
+    let session;
+    try {
+      session = collections.sessions.getUnique(this.session_id);
+    } catch {
+      session = null;
+    }
+    return collections.postsWithUpvotes
+      .take(this.limit)
+      .map(CleanupMapper, session);
   }
 }
 
-export const service: SkipService<{}, ResourceInputs> = {
-  initialData: {},
-  resources: { posts: PostsResource },
+class FilterSessionMapper {
+  constructor(private session_id: string) {}
+
+  mapEntry(key: string, values: Values<Session>): Iterable<[number, Session]> {
+    if (key != this.session_id) return [];
+    const sessions = values.toArray();
+    if (sessions.length > 0) return [[0, sessions[0] as Session]];
+    else return [];
+  }
+}
+
+type SessionsResourceInputs = {
+  sessions: EagerCollection<string, Session>;
+};
+
+class SessionsResource implements Resource<SessionsResourceInputs> {
+  private session_id: string;
+
+  constructor(jsonParams: Json) {
+    const params = jsonParams as PostsResourceParams;
+    if (params.session_id === undefined)
+      throw new Error("Missing required session_id.");
+    else this.session_id = params.session_id as string;
+  }
+
+  instantiate(
+    collections: SessionsResourceInputs,
+  ): EagerCollection<number, Session> {
+    return collections.sessions.map(FilterSessionMapper, this.session_id);
+  }
+}
+
+type PostsServiceInputs = {
+  sessions: EagerCollection<string, Session>;
+};
+
+export const service: SkipService<PostsServiceInputs, PostsResourceInputs> = {
+  initialData: {
+    sessions: [],
+  },
+  resources: { posts: PostsResource, sessions: SessionsResource },
   externalServices: { postgres },
-  createGraph(_: {}, context: Context): ResourceInputs {
+  createGraph(
+    inputs: PostsServiceInputs,
+    context: Context,
+  ): PostsResourceInputs {
     const serialIDKey = { key: { col: "id", type: "SERIAL" } };
     const posts = context.useExternalResource<number, Post>({
       service: "postgres",
@@ -116,6 +208,7 @@ export const service: SkipService<{}, ResourceInputs> = {
         users,
         upvotes.map(UpvotesMapper),
       ),
+      sessions: inputs.sessions,
     };
   },
 };