parallel and sequential fething updates

apps/bible/README.md

@@ -15,3 +15,4 @@
 - [ ] Card, Layout How to find reusable components
 - [ ] Types, Naming Types. component Task type = Task?
 - [ ] Spreding props, when to and when not to   <Task key={task.id} {...task} />
+- [ ] How to load _templates, _layouts? 

apps/bible/app/_templates/basic-list.tsx

@@ -0,0 +1,18 @@
+import { Stack } from "@/components/primitives/stack";
+import { Text } from "@/components/typography/text";
+import { FC, PropsWithChildren } from "react";
+
+type Props = {
+  title: string;
+} & PropsWithChildren;
+
+export const BasicList: FC<Props> = (props) => {
+  return (
+    <Stack>
+      <Text>{props.title}</Text>
+      <Stack className="max-h-[200px] overflow-scroll p-md border-4">
+        {props.children}
+      </Stack>
+    </Stack>
+  );
+};

apps/bible/app/bible/data-fetching/parrallel-and-sequential/components/parallel-fetching.tsx

@@ -0,0 +1,22 @@
+import { getTodos } from "@/app/api/todo";
+import { getUsers } from "@/app/api/users";
+import { DisplayTodos } from "@/app/todos/components/display-todos";
+import { DisplayUsers } from "@/app/user/components/display-users";
+import { Stack } from "@/components/primitives/stack";
+
+export const ParrallelFetching = async () => {
+  const todosPromise = getTodos("parallel example");
+  const usersPromise = getUsers("parrallel 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>
+      <DisplayTodos todos={todos.todos} />
+      <DisplayUsers users={users.users} />
+    </Stack>
+  );
+};

apps/bible/app/bible/data-fetching/parrallel-and-sequential/components/sequential-fetching.tsx

@@ -0,0 +1,5 @@
+import { ShowTodosWithUsers } from "@/app/todos/components/show-todos-with-users";
+
+export const SequentialFetching = () => {
+  return <ShowTodosWithUsers />;
+};

apps/bible/app/bible/data-fetching/parrallel-and-sequential/page.tsx

@@ -1,18 +1,18 @@
 import { Suspense } from "react";
-import { BadExample } from "./components/bad-example";
-import { GoodExample } from "./components/good-example";
+import { ParrallelFetching } from "./components/parallel-fetching";
+import { SequentialFetching } from "./components/sequential-fetching";
 
 const ParrallelAndSequentialPage = () => {
   return (
-    <div className="grid grid-cols-2 gap-lg">
+    <div className="grid grid-cols-2  gap-xl">
       <div>
-        <Suspense fallback="bad example loading..">
-          <BadExample />
+        <Suspense fallback="sequential example loading..">
+          <SequentialFetching />
         </Suspense>
       </div>
       <div>
-        <Suspense fallback="good example loading..">
-          <GoodExample />
+        <Suspense fallback="parrallel example loading..">
+          <ParrallelFetching />
         </Suspense>
       </div>
     </div>

apps/bible/app/todos/components/display-todos.tsx

@@ -1,28 +1,14 @@
-import { getTodos } from "@/app/api/todo";
-import { getUsers } from "@/app/api/users";
+import { BasicList } from "@/app/_templates/basic-list";
+import { GetTodosResponse, getTodos } from "@/app/api/todo";
 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");
+import { FC } from "react";
 
+export const DisplayTodos: FC<GetTodosResponse> = ({ todos }) => {
   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>
+    <BasicList title="Todos:">
+      {todos.map((todo) => (
+        <Todo key={todo.id} {...todo} />
+      ))}
+    </BasicList>
   );
 };

apps/bible/app/todos/components/show-todos-with-users.tsx

@@ -0,0 +1,19 @@
+import { BasicList } from "@/app/_templates/basic-list";
+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";
+
+export const ShowTodosWithUsers = async () => {
+  const { todos } = await getTodos("sequential example");
+  return (
+    <Stack>
+      <BasicList title="Todos:">
+        {todos.map((todo) => (
+          <Todo key={todo.id} {...todo} />
+        ))}
+      </BasicList>
+      <ShowUsers />
+    </Stack>
+  );
+};

apps/bible/app/todos/components/show-todos.tsx

@@ -1,20 +1,14 @@
+import { BasicList } from "@/app/_templates/basic-list";
 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");
+  const { todos } = await getTodos("sequential 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>
+    <BasicList title="Todos:">
+      {todos.map((todo) => (
+        <Todo key={todo.id} {...todo} />
+      ))}
+    </BasicList>
   );
 };

apps/bible/app/user/components/display-users.tsx

@@ -1,18 +1,14 @@
 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";
+import { BasicList } from "@/app/_templates/basic-list";
 
 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>
+    <BasicList title="Users:">
+      {users.map((user) => (
+        <User key={user.id} {...user} />
+      ))}
+    </BasicList>
   );
 };

apps/bible/app/user/components/show-users.tsx

@@ -1,18 +1,14 @@
 import { getUsers } from "@/app/api/users";
-import { Stack } from "@/components/primitives/stack";
-import { Text } from "@/components/typography/text";
 import { User } from "./user";
+import { BasicList } from "@/app/_templates/basic-list";
 
 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>
+    <BasicList title="Users:">
+      {users.map((user) => (
+        <User key={user.id} {...user} />
+      ))}
+    </BasicList>
   );
 };