Upgrade make stable

.gitignore

@@ -17,3 +17,5 @@ api/_build
 tests/e2e/example.spec.ts
 
 /app/dump.rdb
+
+build/

app/components/BookItemFooter.tsx

@@ -26,9 +26,9 @@ export default function BookItemFooter({
 }: Props) {
   const statusFetcher = useFetcher();
   const isIdle = statusFetcher.state === "idle";
-  const hasErrors = statusFetcher.data?.error;
+  const hasErrors = statusFetcher.formData?.get("errors");
   const failedUpdate = hasErrors && isIdle;
-  const action = statusFetcher.data?.action;
+  const action = statusFetcher.formAction;
   const subData = statusFetcher.formData;
   const ErrorMessage = "Error, please retry";
 

app/components/LoginWithEmail.tsx

@@ -1,9 +1,14 @@
 import { Form, useActionData, useNavigation } from "@remix-run/react";
 import { TextField } from "./Fields";
+import { ActionFunctionArgs } from "@remix-run/node";
+import { action } from "~/routes/login";
 
 export default function LoginWithEmail() {
-  const data = useActionData();
-  const errors = useActionData();
+  const data = useActionData<typeof action>();
+  console.log("data", data);
+
+  const errors = useActionData<typeof action>();
+  console.log("errors", errors);
   const transition = useNavigation();
   const isSubmitting = transition.state === "submitting";
 
@@ -13,7 +18,7 @@ export default function LoginWithEmail() {
       action="/login"
       className="mt-10 grid grid-cols-1 gap-y-8"
     >
-      {!errors?.email && data ? (
+      {data ? (
         <p>Success! Go ahead and click the link in your email!</p>
       ) : (
         <>
@@ -24,16 +29,13 @@ export default function LoginWithEmail() {
             type="email"
             autoComplete="email"
             required
-            className={`${
-              data?.errors?.email ? "border-red-300 text-red-900" : ""
-            }`}
           />
-          {data?.errors?.email && <p>Please submit a valid email address</p>}
+
           <div>
             <button
               type="submit"
               disabled={isSubmitting}
-              className="group inline-flex w-full items-center justify-center rounded-full bg-rosyWorm py-2 px-4 text-sm font-semibold text-white focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 disabled:bg-slate-600"
+              className="bg-rosyWorm group inline-flex w-full items-center justify-center rounded-full px-4 py-2 text-sm font-semibold text-white focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 disabled:bg-slate-600"
             >
               {isSubmitting ? "Requesting a login link..." : null}
               {!isSubmitting ? (

app/components/PreviewBookItem.tsx

@@ -18,7 +18,7 @@ export default function PreviewBookItem({
 
   return (
     <li
-      key={book.id}
+      key={book.book_id}
       className="flex flex-col divide-y divide-gray-200 rounded-lg bg-white shadow"
     >
       <div className="flex flex-col items-start p-8 md:flex-row">
@@ -30,10 +30,10 @@ export default function PreviewBookItem({
           />
         </div>
 
-        <div className="w-4/5 py-5 md:py-0 md:px-10">
+        <div className="w-4/5 py-5 md:px-10 md:py-0">
           <h3 className="text-xl font-black text-gray-700">{book.title}</h3>
           <dl className="mt-1 flex flex-grow flex-col justify-between">
-            <dd className="mt-1 mb-3">
+            <dd className="mb-3 mt-1">
               <span className="rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-800">
                 {/* TODO: Replace with book genre */}
                 {book.title}

app/components/TabNavigation.tsx

@@ -54,21 +54,23 @@ export default function TabNavigation({ tabs, optimisticPath }: Props) {
               className={({ isActive }: { isActive: boolean }) =>
                 appendBorders(isActive, tabIdx)
               }
+              end={tab.name === "Discover"}
             >
-              {({ isActive }) => (
-                <>
-                  <span>{tab.name}</span>
-                  <span
-                    aria-hidden="true"
-                    className={
-                      (isActive && !optimisticPath) ||
-                      (optimisticPath && optimisticPath === `/${tab.href}`)
-                        ? activeLinkSpanStyles
-                        : `bg-transparent ${defaultSpanStyles}`
-                    }
-                  />
-                </>
-              )}
+              {({ isActive }) => {
+                return (
+                  <>
+                    <span>{tab.name}</span>
+                    <span
+                      aria-hidden="true"
+                      className={
+                        isActive
+                          ? activeLinkSpanStyles
+                          : `bg-transparent ${defaultSpanStyles}`
+                      }
+                    />
+                  </>
+                );
+              }}
             </NavLink>
           ))}
         </nav>

app/models/books.server.ts

@@ -10,7 +10,7 @@ const initialBookData = (data: initialBook) => ({
   title: data.volumeInfo?.title,
   description: data.volumeInfo?.description,
   image: data.volumeInfo?.imageLinks?.thumbnail,
-  link: data.volumeInfo?.canonicalVolumeLink,
+  link: data.volumeInfo?.previewLink,
   authors: data.volumeInfo?.authors,
   publisher: data.volumeInfo?.publisher,
   publishedDate: data.volumeInfo?.publishedDate,
@@ -20,13 +20,13 @@ const initialBookData = (data: initialBook) => ({
   price: data.saleInfo?.retailPrice?.amount,
 });
 
-export function createBookmark(
+export async function createBookmark(
   id: books["id"],
   book_id: books["book_id"],
   user_id: books["user_id"]
 ) {
   if (!id) {
-    return prisma.books.create({
+    return await prisma.books.create({
       data: {
         user_id,
         book_id,
@@ -38,7 +38,7 @@ export function createBookmark(
     });
   }
 
-  return prisma.books.update({
+  return await prisma.books.update({
     where: {
       id,
     },
@@ -48,24 +48,24 @@ export function createBookmark(
   });
 }
 
-export function removeBookmark(id: books["id"]) {
-  return prisma.books.update({
+export async function removeBookmark(book_id: books["id"]) {
+  return await prisma.books.update({
     where: {
-      id,
+      id: book_id,
     },
     data: {
       bookmarked: false,
     },
   });
 }
 
-export function markAsRead(
+export async function markAsRead(
   id: books["id"],
   book_id: books["book_id"],
   user_id: books["user_id"]
 ) {
   if (!id) {
-    return prisma.books.create({
+    return await prisma.books.create({
       data: {
         user_id,
         book_id,
@@ -77,7 +77,7 @@ export function markAsRead(
     });
   }
 
-  return prisma.books.upsert({
+  return await prisma.books.upsert({
     create: {
       user_id,
       book_id,
@@ -95,8 +95,8 @@ export function markAsRead(
     },
   });
 }
-export function markAsNotRead(id: books["id"]) {
-  return prisma.books.update({
+export async function markAsNotRead(id: books["id"]) {
+  return await prisma.books.update({
     where: {
       id,
     },
@@ -106,13 +106,13 @@ export function markAsNotRead(id: books["id"]) {
   });
 }
 
-export function markAsReading(
+export async function markAsReading(
   id: books["id"],
   book_id: books["book_id"],
   user_id: books["user_id"]
 ) {
   if (!id) {
-    return prisma.books.create({
+    return await prisma.books.create({
       data: {
         user_id,
         book_id,
@@ -124,7 +124,7 @@ export function markAsReading(
     });
   }
 
-  return prisma.books.upsert({
+  return await prisma.books.upsert({
     create: {
       user_id,
       book_id,
@@ -143,8 +143,8 @@ export function markAsReading(
   });
 }
 
-export function markAsNotReading(id: books["id"]) {
-  return prisma.books.update({
+export async function markAsNotReading(id: books["id"]) {
+  return await prisma.books.update({
     where: {
       id,
     },
@@ -168,12 +168,14 @@ export async function getAllRead(id: string) {
     bookIds?.books
       ?.filter((book) => book.read || book.reading)
       .map((book) => {
-        const { id: buid, book_id: id, reading, read, bookmarked } = book;
-        return { buid, id, reading, read, bookmarked };
+        const { id: buid, book_id, reading, read, bookmarked } = book;
+        return { buid, book_id, reading, read, bookmarked };
       }) || [];
+
   if (usersBookmarks.length) {
     bookmarks = await getAllBooksmarkData(usersBookmarks);
   }
+
   return { userId: id, bookmarks };
 }
 
@@ -191,9 +193,10 @@ export async function getBookmarks(id: string) {
     bookIds?.books
       ?.filter((book) => book.bookmarked)
       .map((book) => {
-        const { id: buid, book_id: id, reading, read, bookmarked } = book;
-        return { buid, id, reading, read, bookmarked };
+        const { id: buid, book_id, reading, read, bookmarked } = book;
+        return { buid, book_id, reading, read, bookmarked };
       }) || [];
+
   if (usersBookmarks.length) {
     bookmarks = await getAllBooksmarkData(usersBookmarks);
   }
@@ -208,8 +211,8 @@ export async function getUsersBookmarks(user_id: books["user_id"]) {
   });
   const usersBookmarks =
     bookIds?.map((book) => {
-      const { id: buid, book_id: id, reading, read, bookmarked } = book;
-      return { buid, id, reading, read, bookmarked };
+      const { id: buid, book_id, reading, read, bookmarked } = book;
+      return { buid, book_id, reading, read, bookmarked };
     }) || [];
   return usersBookmarks;
 }
@@ -240,10 +243,13 @@ export async function getLatestBooks(userId: books["user_id"], total: number) {
     latestBooks = [...allBooks, { responseTime: `${t1 - t0}ms` }];
     saveToRedis("home-latest-books", latestBooks);
   }
+
   const bookmarkIds = await getUsersBookmarks(userId);
+
   if (bookmarkIds.length) {
     usersBookmarks = await getAllBooksmarkData(bookmarkIds);
   }
+
   return { books: latestBooks, usersBookmarks };
 }
 
@@ -257,9 +263,9 @@ export async function fetchBookInfo(bookId: string): Promise<Book> {
 }
 
 async function getAllBooksmarkData(bookmarkIds: usersBookmarks[]) {
-  return Promise.all(
+  return await Promise.all(
     bookmarkIds.map(async (book: books) => {
-      const data = await fetchBookInfo(book.id);
+      const data = await fetchBookInfo(book.book_id);
       data.buid = book.buid;
       data.read = book.read;
       data.reading = book.reading;

app/root.tsx

@@ -1,4 +1,5 @@
-import { json, type LoaderArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
+import { json } from "@remix-run/node";
 import {
   Links,
   LiveReload,
@@ -14,6 +15,7 @@ import tailwindStyles from "~/tailwind.css";
 import { getMetaInfo } from "~/utils/seo";
 import { getSession } from "./auth/auth.server";
 import { useWatchSession } from "./auth/client";
+import { Session } from "@supabase/auth-helpers-remix";
 
 export function meta() {
   return [
@@ -35,7 +37,7 @@ export function links() {
   ];
 }
 
-export const loader = async ({ request }: LoaderArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
   const { SUPABASE_URL, SUPABASE_KEY, NODE_ENV } = process.env;
   const { session, error, response } = await getSession(request);
 
@@ -53,7 +55,7 @@ export const loader = async ({ request }: LoaderArgs) => {
 
 export default function App() {
   const { env, session } = useLoaderData<typeof loader>();
-  const context = useWatchSession(session);
+  const context = useWatchSession(session as unknown as Session);
   const isLoggedIn = session?.user;
   const htmlClasses = isLoggedIn ? `h-full bg-gray-100` : `h-full`;
   const bodyClasses = isLoggedIn ? `h-full` : `flex flex-col h-full`;

app/routes/__home/book/$id.tsx → app/routes/_dash.book.$id.tsx

@@ -1,4 +1,4 @@
-import { json, redirect, type LoaderArgs } from "@remix-run/node";
+import { json, redirect, type LoaderFunctionArgs } from "@remix-run/node";
 import {
   isRouteErrorResponse,
   useFetchers,
@@ -12,20 +12,23 @@ import { fetchBookInfo, getUsersBookmarks } from "~/models/books.server";
 import BookItemFooter from "~/components/BookItemFooter";
 import Notification from "~/components/Notification";
 
-export async function loader({ request, params }: LoaderArgs) {
+export async function loader({ request, params }: LoaderFunctionArgs) {
   const { session } = await getSession(request);
   if (!session) return redirect(FAILURE_REDIRECT);
 
-  const { id: userId } = session?.user!;
+  const { id: userId } = session?.user;
   const { id: bookId } = params;
 
   invariant(bookId, "bookId is required");
   invariant(userId, "userId is required");
 
   const data = await fetchBookInfo(bookId);
+
   const bookmarks = await getUsersBookmarks(userId);
 
-  const userBookmark = bookmarks.find((bookmark) => bookmark.id === bookId);
+  const userBookmark = bookmarks.find(
+    (bookmark) => bookmark.book_id === bookId
+  );
   const buid = userBookmark?.buid;
   const isBookmarked = userBookmark?.bookmarked ?? false;
   const isReading = userBookmark?.reading ?? false;
@@ -90,7 +93,8 @@ export default function Book() {
           />
           <p className="mt-14 hidden md:block">
             <a
-              href={link}
+              // href={link}
+              href={`https://www.google.co.uk/books/edition/_/${bookId}`}
               target="_blank"
               className="bg-rosyWorm hover:bg-rosyWorm-900 rounded-lg px-10 py-5 text-white"
               rel="noreferrer"