parallel and sequential fething

kodius · Feb 29, 2024 · 1bf9d36 · 1bf9d36
1 parent 69da467
commit 1bf9d36
Show file tree

Hide file tree

Showing 18 changed files with 180 additions and 63 deletions.
diff --git a/apps/bible/app/api/todo.ts b/apps/bible/app/api/todo.ts
@@ -1,14 +1,17 @@
 import { api } from "@/site/api";
 import { Todo } from "../todo/types";
 
-type GetTodosResponse = {
+export type GetTodosResponse = {
   todos: Todo[];
 };
 
 export const getTodos = async (
+  consoleMessage?: string,
   init?: RequestInit,
 ): Promise<GetTodosResponse> => {
+  console.log("fatching todos" + " " + consoleMessage);
   const resJSON = await fetch(`${api.route}/todos`, init);
+  console.log("fatching todos finished" + " " + consoleMessage);
   const data = (await resJSON.json()) as GetTodosResponse;
   return data;
 };
diff --git a/apps/bible/app/api/users.ts b/apps/bible/app/api/users.ts
@@ -0,0 +1,17 @@
+import { api } from "@/site/api";
+import { User } from "../user/types";
+
+export type GetUserResponse = {
+  users: User[];
+};
+
+export const getUsers = async (
+  consoleMessage?: string,
+  init?: RequestInit,
+): Promise<GetUserResponse> => {
+  console.log("fatching users" + " " + consoleMessage);
+  const resJSON = await fetch(`${api.route}/users`, init);
+  console.log("fatching users finished" + " " + consoleMessage);
+  const data = (await resJSON.json()) as GetUserResponse;
+  return data;
+};
diff --git a/apps/bible/app/bible/data-fetching/parrallel-and-sequential/components/bad-example.tsx b/apps/bible/app/bible/data-fetching/parrallel-and-sequential/components/bad-example.tsx
@@ -0,0 +1,5 @@
+import { ShowTodos } from "@/app/todos/components/show-todos";
+
+export const BadExample = () => {
+  return <ShowTodos />;
+};
diff --git a/apps/bible/app/bible/data-fetching/parrallel-and-sequential/components/good-example.tsx b/apps/bible/app/bible/data-fetching/parrallel-and-sequential/components/good-example.tsx
@@ -0,0 +1,5 @@
+import { DisplayTodos } from "@/app/todos/components/display-todos";
+
+export const GoodExample = () => {
+  return <DisplayTodos />;
+};
diff --git a/apps/bible/app/bible/data-fetching/parrallel-and-sequential/page.tsx b/apps/bible/app/bible/data-fetching/parrallel-and-sequential/page.tsx
@@ -0,0 +1,22 @@
+import { Suspense } from "react";
+import { BadExample } from "./components/bad-example";
+import { GoodExample } from "./components/good-example";
+
+const ParrallelAndSequentialPage = () => {
+  return (
+    <div className="grid grid-cols-2 gap-lg">
+      <div>
+        <Suspense fallback="bad example loading..">
+          <BadExample />
+        </Suspense>
+      </div>
+      <div>
+        <Suspense fallback="good example loading..">
+          <GoodExample />
+        </Suspense>
+      </div>
+    </div>
+  );
+};
+
+export default ParrallelAndSequentialPage;
diff --git a/apps/bible/app/layout.tsx b/apps/bible/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
+import { cn } from "@/lib/utils";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -17,7 +18,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={cn(inter.className, "p-sm")}>
         <ThemeProvider
           attribute="class"
           defaultTheme="dark"

diff --git a/apps/bible/app/page.tsx b/apps/bible/app/page.tsx
@@ -39,9 +39,7 @@ const BibleContent: FC<BibleContent> = (content) => {
 
 const BibleChild: FC<BibleContentChild> = (child) => {
   const title = child.href ? (
-    <Link href={child.href}>
-      <Text>{child.title}</Text>
-    </Link>
+    <Link href={child.href}> {child.title}</Link>
   ) : (
     <Text>{child.title}</Text>
   );

diff --git a/apps/bible/app/todo/components/task.tsx → apps/bible/app/todo/components/todo.tsx b/apps/bible/app/todo/components/task.tsx → apps/bible/app/todo/components/todo.tsx
diff --git a/apps/bible/app/todos/components/display-todos.tsx b/apps/bible/app/todos/components/display-todos.tsx
@@ -0,0 +1,28 @@
+import { getTodos } from "@/app/api/todo";
+import { getUsers } from "@/app/api/users";
+import { Todo } from "@/app/todo/components/todo";
+import { DisplayUsers } from "@/app/user/components/display-users";
+import { Stack } from "@/components/primitives/stack";
+import { Text } from "@/components/typography/text";
+
+export const DisplayTodos = async () => {
+  const todosPromise = getTodos("good example");
+  const usersPromise = getUsers("good example");
+  const [todos, users] = await Promise.all([todosPromise, usersPromise]);
+
+  // One more bad example
+  // const todos = await getTodos("good example");
+  // const users = await getUsers("good example");
+
+  return (
+    <Stack>
+      <Text>Todos:</Text>
+      <Stack className="max-h-[200px] overflow-scroll p-md border-4">
+        {todos.todos.map((todo) => (
+          <Todo key={todo.id} {...todo} />
+        ))}
+      </Stack>
+      <DisplayUsers users={users.users} />
+    </Stack>
+  );
+};
diff --git a/apps/bible/app/todos/components/show-todos.tsx b/apps/bible/app/todos/components/show-todos.tsx
@@ -0,0 +1,20 @@
+import { getTodos } from "@/app/api/todo";
+import { Todo } from "@/app/todo/components/todo";
+import { ShowUsers } from "@/app/user/components/show-users";
+import { Stack } from "@/components/primitives/stack";
+import { Text } from "@/components/typography/text";
+
+export const ShowTodos = async () => {
+  const { todos } = await getTodos("bad example");
+  return (
+    <Stack>
+      <Text>Todos:</Text>
+      <Stack className="max-h-[200px] overflow-scroll p-md border-4">
+        {todos.map((todo) => (
+          <Todo key={todo.id} {...todo} />
+        ))}
+      </Stack>
+      <ShowUsers />
+    </Stack>
+  );
+};
diff --git a/apps/bible/app/todos/page.tsx b/apps/bible/app/todos/page.tsx
@@ -1,6 +1,6 @@
 import { Stack } from "@/components/primitives/stack";
 import { getTodos } from "../api/todo";
-import { Todo } from "../todo/components/task";
+import { Todo } from "../todo/components/todo";
 
 const TodosPage = async () => {
   const { todos } = await getTodos();

diff --git a/apps/bible/app/user/components/display-users.tsx b/apps/bible/app/user/components/display-users.tsx
@@ -0,0 +1,18 @@
+import { GetUserResponse } from "@/app/api/users";
+import { Stack } from "@/components/primitives/stack";
+import { Text } from "@/components/typography/text";
+import { User } from "./user";
+import { FC } from "react";
+
+export const DisplayUsers: FC<GetUserResponse> = ({ users }) => {
+  return (
+    <Stack>
+      <Text>Users:</Text>
+      <Stack className="max-h-[200px] overflow-scroll p-md border-4">
+        {users.map((user) => (
+          <User key={user.id} {...user} />
+        ))}
+      </Stack>
+    </Stack>
+  );
+};
diff --git a/apps/bible/app/user/components/show-users.tsx b/apps/bible/app/user/components/show-users.tsx
@@ -0,0 +1,18 @@
+import { getUsers } from "@/app/api/users";
+import { Stack } from "@/components/primitives/stack";
+import { Text } from "@/components/typography/text";
+import { User } from "./user";
+
+export const ShowUsers = async () => {
+  const { users } = await getUsers("bad exmaple");
+  return (
+    <Stack>
+      <Text>Users:</Text>
+      <Stack className="max-h-[200px] overflow-scroll p-md border-4">
+        {users.map((user) => (
+          <User key={user.id} {...user} />
+        ))}
+      </Stack>
+    </Stack>
+  );
+};
diff --git a/apps/bible/app/user/components/user.tsx b/apps/bible/app/user/components/user.tsx
@@ -0,0 +1,11 @@
+import { Text } from "@/components/typography/text";
+import { FC } from "react";
+import { User as UserType } from "../types";
+
+export const User: FC<UserType> = (user) => {
+  return (
+    <div className="p-md border rounded">
+      <Text>{user.firstName}</Text>
+    </div>
+  );
+};
diff --git a/apps/bible/app/user/types.ts b/apps/bible/app/user/types.ts
@@ -0,0 +1,4 @@
+export type User = {
+  id: number
+  firstName: string
+}
diff --git a/apps/bible/next.config.mjs b/apps/bible/next.config.mjs
@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  experimental: {
+    typedRoutes: true,
+  },
+};
 
 export default nextConfig;
diff --git a/apps/bible/site/bible-contents.ts b/apps/bible/site/bible-contents.ts
@@ -1,74 +1,25 @@
+import { Route } from "next";
+import { routes } from "./routes";
+
 export type BibleContent = {
   title: string;
   children: BibleContentChild[];
 };
 
 export type BibleContentChild = Omit<BibleContent, "children"> & {
-  href: string | null;
+  href: Route | null;
   status: "done" | "todo" | "re-opened";
   notes?: string[];
 };
 
 export const bibleContents: BibleContent[] = [
   {
-    title: "Setup",
-    children: [
-      {
-        title: "eslint",
-        href: null,
-        status: "todo",
-        notes: ["Airbnb?", "Custom?"],
-      },
-      {
-        title: "prettier",
-        href: null,
-        status: "todo",
-        notes: ["Shadcn?"],
-      },
-    ],
-  },
-  {
-    title: "UI",
+    title: "Data fetching",
     children: [
       {
-        title: "Card components",
-        href: null,
-        status: "todo",
-        notes: ["How to"],
-      },
-    ],
-  },
-  {
-    title: "Project",
-    children: [
-      {
-        title: "Folder structure",
-        href: null,
-        status: "todo",
-        notes: ["features based", "(components)?", "mix"],
-      },
-      {
-        title: "Barrel exports",
-        href: null,
-        status: "todo",
-        notes: ["how to?"],
-      },
-    ],
-  },
-  {
-    title: "Rules",
-    children: [
-      {
-        title: "TypeScript",
-        href: null,
-        status: "todo",
-        notes: ['no any', 'strict-typing, try to handle every use case'],
-      },
-      {
-        title: "component library",
-        href: null,
+        title: "Parrallel and Sequential data fetching",
+        href: routes.bible.dataFetching.parrallelAndSequential.index,
         status: "todo",
-        notes: ["shadcn"],
       },
     ],
   },

diff --git a/apps/bible/site/routes.ts b/apps/bible/site/routes.ts
@@ -0,0 +1,12 @@
+export const routes = {
+  todos: {
+    index: "/todos",
+  },
+  bible: {
+    dataFetching: {
+      parrallelAndSequential: {
+        index: "/bible/data-fetching/parrallel-and-sequential",
+      },
+    },
+  },
+} as const;