fix pagination and long blueprint titles

apps/blueprints/src/components/BlueprintLink.tsx

@@ -9,6 +9,7 @@ import { useState } from "react";
 const linkStyles = css`
   margin: 5px 10px 5px 0;
   background: #353535;
+  width: 210px;
 
   .block {
     display: flex;
@@ -25,6 +26,12 @@ const linkStyles = css`
     display: flex;
   }
 
+  .title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   a {
     display: block;
     padding: 5px;
@@ -76,9 +83,7 @@ export const BlueprintLink: React.FC<BlueprintLinkProps> = ({
             {type === "tile" && (
               <div className="image">
                 {imageError ? (
-                  <div>
-                    Looks like this image can\t load. <button>Try generating it again</button>
-                  </div>
+                  <div>The image is not generated yet, please be patient it will come soon.</div>
                 ) : (
                   <Image
                     loader={({ src }) => src}
@@ -96,7 +101,7 @@ export const BlueprintLink: React.FC<BlueprintLinkProps> = ({
                 <MdFavorite css={{ marginRight: "5px" }} />
                 {blueprint.favorite_count || "0"}
               </Text>
-              <Text>{blueprint.title}</Text>
+              <Text className="title">{blueprint.title}</Text>
             </Box>
             {type === "row" && (
               <Box>

apps/blueprints/src/components/BookChildTree.tsx

@@ -71,14 +71,14 @@ export const BookChildTree: React.FC<BookChildTreeProps> = ({ data, base_url, se
                     <span className="label"> {BBCode.toReact(bpData.blueprint.label)}</span>
                   </a>
                 </Link>
-              ) : (
+              ) : bpData.blueprint_book ? (
                 <BookChildTree
                   key={bpData.blueprint_book.id}
                   data={bpData}
                   base_url={base_url}
                   selected_id={selected_id}
                 />
-              );
+              ) : null;
             })}
           </div>
         </div>

apps/blueprints/src/components/Pagination.tsx

@@ -34,7 +34,7 @@ export const Pagination: React.FC<BoxProps & PaginationProps> = ({
 }) => (
   <Box>
     {page > 1 && <PaginationLink page={page - 1} />}
-    {!totalPages || (page + 1 < totalPages && <PaginationLink page={page + 1} />)}
-    {totalItems ? <Box css={{ marginTop: "1rem" }}>{totalItems} total items</Box> : null}
+    {!totalPages || (page + 1 <= totalPages && <PaginationLink page={page + 1} />)}
+    {totalItems ? <Box css={{ marginTop: "15px" }}>{totalItems} total items</Box> : null}
   </Box>
 );

apps/blueprints/src/pages/blueprint/[blueprintId].tsx

@@ -24,6 +24,7 @@ import { ImageEditor } from "../../components/ImageEditor";
 import { useAuth } from "../../providers/auth";
 import { pageHandler } from "../../utils/page-handler";
 import styled from "@emotion/styled";
+import { css } from "@emotion/react";
 import { AiOutlineHeart, AiFillHeart } from "react-icons/ai";
 
 type Selected =
@@ -38,6 +39,21 @@ interface IndexProps {
   favorite: boolean;
 }
 
+const BlueprintStyles = css`
+  .title {
+    position: relative;
+    width: 100%;
+
+    .text {
+      white-space: nowrap;
+      width: 85%;
+      display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+`;
+
 const StyledTable = styled.table`
   td {
     border: 1px solid #909090;
@@ -86,7 +102,7 @@ export const Index: NextPage<IndexProps> = ({
       })
       .catch((reason) => console.error(reason));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedHash]);
+  }, []);
 
   useEffect(() => {
     fetch(`/api/string/${selectedHash}`)
@@ -126,14 +142,15 @@ export const Index: NextPage<IndexProps> = ({
 
   return (
     <Grid
+      css={BlueprintStyles}
       margin="0.7rem"
       templateColumns={chakraResponsive({ mobile: "1fr", desktop: "1fr 1fr" })}
       gap={6}
     >
       <Panel
         title={
-          <div css={{ position: "relative", width: "100%" }}>
-            <span>{blueprint_page.title}</span>
+          <div className="title">
+            <span className="text">{blueprint_page.title}</span>
             {auth && (
               <Button
                 colorScheme="green"

apps/blueprints/src/pages/index.tsx

@@ -68,12 +68,12 @@ export const Index: NextPage<IndexProps> = ({
             </Box>
           )}
         </Box>
-        <Box css={{ display: "flex" }}>
+        <Box css={{ display: "flex", flexWrap: "wrap" }}>
           {blueprints.map((bp) => (
             <BlueprintLink key={bp.id} blueprint={bp} type="tile" />
           ))}
         </Box>
-        <Box>
+        <Box css={{ marginTop: "15px" }}>
           <Pagination page={currentPage} totalPages={totalPages} totalItems={totalItems} />
         </Box>
       </Panel>
@@ -84,7 +84,7 @@ export const Index: NextPage<IndexProps> = ({
 export async function getServerSideProps({ query }: NextPageContext) {
   await init();
   const page = Number(query.page || "1");
-  const perPage = Number(query["per-page"] || "10");
+  const perPage = Number(query["per-page"] || "20");
   const order = (query["order"] as string) || "date";
   const tags = query.tags ? String(query.tags).split(",") : undefined;
 

libs/common-utils/src/lib/common-utils.ts

@@ -5,21 +5,38 @@ interface Entity {
 }
 
 export type IconSignalTypes = "item" | "fluid" | "virtual";
+export type FactorioIcon = { index: number; signal: { type: IconSignalTypes; name: string } };
 
 export interface BlueprintData {
   entities: Entity[];
   tiles?: { name: string; position: { x: number; y: number } }[];
-  icons: { signal: { type: IconSignalTypes; name: string } }[];
+  icons: FactorioIcon[];
   item: string;
   label: string;
   description?: string;
   version: number;
 }
 
+export interface DeconstructionPlannerData {
+  item: "deconstruction-planner";
+  label: string;
+  settings: {
+    entity_filters: {
+      index: number;
+      name: string;
+    }[];
+    icons: FactorioIcon[];
+    tile_selection_mode: number;
+  };
+  version: number;
+}
+
 export interface BlueprintBookData {
   active_index: number;
-  blueprints: Array<{ index: number } & BlueprintStringData>;
-  icons?: { signal: { type: IconSignalTypes; name: string } }[];
+  blueprints: Array<
+    { index: number; deconstruction_planner?: DeconstructionPlannerData } & BlueprintStringData
+  >;
+  icons?: FactorioIcon[];
   item: string;
   label: string;
   description?: string;
@@ -37,17 +54,28 @@ export interface BlueprintPageData {
   factorioprints_id?: string;
 }
 
+export interface DeconstructionPlannerString {
+  deconstruction_planner: DeconstructionPlannerData;
+  blueprint?: never;
+  blueprint_book?: never;
+}
+
 interface BlueprintString {
   blueprint: BlueprintData;
   blueprint_book?: never;
+  deconstruction_planner?: never;
 }
 
 interface BlueprintBookString {
   blueprint_book: BlueprintBookData;
   blueprint?: never;
+  deconstruction_planner?: never;
 }
 
-export type BlueprintStringData = BlueprintString | BlueprintBookString;
+export type BlueprintStringData =
+  | BlueprintString
+  | BlueprintBookString
+  | DeconstructionPlannerString;
 
 export const getBlueprintContentForImageHash = (blueprint: BlueprintData): string => {
   return JSON.stringify({

libs/database/src/lib/data/blueprint_page.ts

@@ -70,8 +70,14 @@ export async function searchBlueprintPages({
     updated_at: new Date(blueprintPage.updated_at),
   }));
 
+  const countResult = await prisma.$queryRaw<{ count: number }[]>`
+      SELECT COUNT(*)
+      FROM public.blueprint_page
+      WHERE blueprint_page.title ILIKE ${query ? `%${query}%` : "%"}
+      ${tagsFragment}`;
+
   return {
-    count: result.length,
+    count: countResult[0].count,
     rows: result.map(mapBlueprintPageEntityToObject),
   };
 }

libs/web-utils/src/lib/web-utils.ts

@@ -3,6 +3,7 @@ import {
   BlueprintData,
   BlueprintBookData,
   BlueprintStringData,
+  DeconstructionPlannerString,
 } from "@factorio-sites/common-utils";
 import { BlueprintBookChild } from "@factorio-sites/types";
 
@@ -25,17 +26,22 @@ type BlueprintBookWithId = Omit<BlueprintBookData, "blueprints"> & {
   blueprints: Array<{ index: number } & BlueprintObjectDataWithId>;
 };
 
-interface BlueprintDataWithId {
+interface BlueprintStringWithId {
   blueprint: BlueprintWithId;
   blueprint_book?: never;
+  deconstruction_planner?: never;
 }
 
-interface BlueprintBookDataWithId {
+interface BlueprintBookStringWithId {
   blueprint_book: BlueprintBookWithId;
   blueprint?: never;
+  deconstruction_planner?: never;
 }
 
-export type BlueprintObjectDataWithId = BlueprintDataWithId | BlueprintBookDataWithId;
+export type BlueprintObjectDataWithId =
+  | BlueprintStringWithId
+  | BlueprintBookStringWithId
+  | DeconstructionPlannerString;
 
 export const isBlueprintBook = (
   data: BlueprintStringData
@@ -43,7 +49,7 @@ export const isBlueprintBook = (
 
 export const isBlueprintBookWithId = (
   data: BlueprintObjectDataWithId
-): data is BlueprintBookDataWithId => !!data.blueprint_book;
+): data is BlueprintBookStringWithId => !!data.blueprint_book;
 
 export function mergeBlueprintDataAndChildTree(
   data: BlueprintStringData,
@@ -54,9 +60,10 @@ export function mergeBlueprintDataAndChildTree(
     !data.blueprint_book.blueprints ||
     child_tree_item.type !== "blueprint_book"
   ) {
+    console.log(data);
     throw Error("mergeBlueprintDataAndChildTree called with a non-book");
   }
-  data;
+
   return {
     ...data,
     blueprint_book: {
@@ -69,6 +76,9 @@ export function mergeBlueprintDataAndChildTree(
             index: blueprint.index,
             blueprint: { id: child.id, ...blueprint.blueprint },
           };
+        }
+        if (blueprint.deconstruction_planner) {
+          return blueprint;
         } else {
           return mergeBlueprintDataAndChildTree(
             blueprint,