15 | {isRscPath ? (
16 | RSC Version
17 | ) : (
18 |
19 | RSC Version
20 |
21 | )}
22 | {isReactQueryPath ? (
23 | RSC and React Query Version
24 | ) : (
25 |
26 | RSC and React Query Version
27 |
28 | )}
29 |
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/src/app/rsc/BookEdit.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { FC, useRef, useTransition } from "react";
4 | import { saveBook } from "../serverActions";
5 | import { BookEditProps } from "../types";
6 |
7 | export const BookEdit: FC
20 |
21 |
24 |
25 | );
26 | };
27 |
--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from "next";
2 | import { Inter } from "next/font/google";
3 | import "./globals.css";
4 | import { Providers } from "./Providers";
5 | import Link from "next/link";
6 | import { Nav } from "./Nav";
7 |
8 | const inter = Inter({ subsets: ["latin"] });
9 |
10 | export const metadata: Metadata = {
11 | title: "Create Next App",
12 | description: "Generated by create next app",
13 | };
14 |
15 | export const dynamic = "force-dynamic";
16 | export const revalidate = 0;
17 |
18 | export default function RootLayout({
19 | children,
20 | }: Readonly<{
21 | children: React.ReactNode;
22 | }>) {
23 | return (
24 |
25 |
26 |
27 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/db/index.ts:
--------------------------------------------------------------------------------
1 | import sqlite3Module from "sqlite3";
2 | import { books } from "@/data/books";
3 |
4 | const sqlite3 = sqlite3Module.verbose();
5 |
6 | const db = new sqlite3.Database("db/db.txt", sqlite3Module.OPEN_READWRITE, async (error) => {
7 | if (error) {
8 | console.error({ error });
9 | return;
10 | }
11 |
12 | await run("DROP TABLE IF EXISTS books");
13 |
14 | await run("CREATE TABLE books (id INT PRIMARY KEY, title TEXT, authors TEXT, smallImage TEXT, smallImagePreview TEXT)");
15 |
16 | for (const book of books) {
17 | await run("INSERT INTO books VALUES (?, ?, ?, ?, ?)", [
18 | book.id,
19 | book.title,
20 | JSON.stringify(book.authors),
21 | book.smallImage,
22 | JSON.stringify(book.smallImagePreview),
23 | ]);
24 | }
25 | });
26 |
27 | function run(command: string, params: unknown[] = []): PromiseBooks page in RSC
16 |
18 |
29 |
20 |
28 |
21 |
23 |
24 |
27 |
10 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/src/app/api/books/update/route.ts:
--------------------------------------------------------------------------------
1 | import sqlite3Module from "sqlite3";
2 | const sqlite3 = sqlite3Module.verbose();
3 |
4 | export const dynamic = "force-dynamic";
5 | export const revalidate = 0;
6 |
7 | export const POST = async (request: Request, context: any) => {
8 | const body = await request.json();
9 | const { id, title } = body;
10 | await update(id, title);
11 |
12 | console.log("\n\nBook Updated! 🎉🎉🎉");
13 |
14 | return Response.json({});
15 | };
16 |
17 | function update(id: number, title: string) {
18 | return new Promise((res) => {
19 | const db = new sqlite3.Database("db/db.txt", sqlite3Module.OPEN_READWRITE, async (error) => {
20 | try {
21 | if (error) {
22 | console.log({ error });
23 | return res(null);
24 | }
25 |
26 | db.run("UPDATE books SET title = ? WHERE id = ?", [title, id], (error) => {
27 | if (error) {
28 | console.log({ error });
29 | }
30 | return res(null);
31 | });
32 | } catch (err) {
33 | console.log(err);
34 | } finally {
35 | try {
36 | db.close();
37 | } catch (er) {}
38 | res(null);
39 | }
40 | });
41 | });
42 | }
43 |
--------------------------------------------------------------------------------
/src/app/react-query/BookEdit.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { FC, useRef, useTransition } from "react";
4 | import { BookEditProps } from "../types";
5 | import { useQueryClient } from "@tanstack/react-query";
6 |
7 | export const BookEdit: FCBooks
11 | {books.length === 0 ? ( 12 | No results 13 | ) : ( 14 | books.map((book) => ( 15 |
16 |
25 | ))
26 | )}
27 |
17 |
19 |
20 | {book.title}
21 | {(book.authors ?? []).join(", ")}
22 |
24 |
29 |
30 |
33 |
34 | );
35 | };
36 |
--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/rsc/BookSearchForm.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { FC, FormEventHandler, useRef, useTransition } from "react";
4 | import { usePathname, useRouter, useSearchParams } from "next/navigation";
5 |
6 | export const BookSearchForm: FC<{}> = () => {
7 | const searchRef = useRefBooks page with RSC and react-query
26 |
28 |
39 |
30 |
38 |
31 |
33 |
34 |
37 |
26 | {previewString ? (
27 |
28 | ) : null}
29 | {urlToUse ? (
30 | 
31 | ) : (
32 |
37 | );
38 | };
39 |
--------------------------------------------------------------------------------
/src/app/api/books/route.ts:
--------------------------------------------------------------------------------
1 | import { NextRequest } from "next/server";
2 | import sqlite3Module from "sqlite3";
3 | const sqlite3 = sqlite3Module.verbose();
4 |
5 | export const dynamic = "force-dynamic";
6 | export const revalidate = 0;
7 |
8 | export const GET = async (request: NextRequest) => {
9 | console.log("\n\nFetching books ...");
10 |
11 | const search = request.nextUrl.searchParams.get("search");
12 |
13 | await new Promise((res) => setTimeout(res, 400));
14 |
15 | const books = await new Promise((res) => {
16 | const db = new sqlite3.Database("db/db.txt", sqlite3Module.OPEN_READWRITE, async (error) => {
17 | try {
18 | if (error) {
19 | return res(null);
20 | }
21 |
22 | const query = `SELECT * FROM books ${search ? ` WHERE title LIKE ? ` : ""} ORDER BY id DESC`;
23 | const params = search ? [`%${search}%`] : [];
24 |
25 | db.all(query, params, (err, rows) => {
26 | if (err) {
27 | return res(null);
28 | }
29 |
30 | const books = rows.map((row: any) => {
31 | const result = { ...row };
32 | result.authors = JSON.parse(row.authors);
33 | result.smallImagePreview = JSON.parse(row.smallImagePreview);
34 |
35 | return result;
36 | });
37 | return res(books);
38 | });
39 | } catch (err: any) {
40 | return res(null);
41 | } finally {
42 | try {
43 | db.close();
44 | } catch (er) {}
45 | }
46 | });
47 | });
48 |
49 | console.log("Books fetched");
50 | return Response.json({ books });
51 | };
52 |
--------------------------------------------------------------------------------
/src/app/react-query/BookSearchForm.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { FC, FormEventHandler, useRef, useTransition } from "react";
4 | import { usePathname, useRouter, useSearchParams } from "next/navigation";
5 | import { useQueryClient } from "@tanstack/react-query";
6 |
7 | export const BookSearchForm: FC<{}> = () => {
8 | const searchRef = useRef
33 |
35 | )}
36 | {noCoverMessage}
34 |