Change bluepritns app to typescript strict mode

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

@@ -142,7 +142,7 @@ export const Index: NextPage<IndexProps> = ({
       <Panel
         title={image_exists ? undefined : "Image"}
         gridColumn={chakraResponsive({ mobile: "1", desktop: "2" })}
-        gridRow={chakraResponsive({ mobile: "1", desktop: undefined })}
+        gridRow={chakraResponsive({ mobile: "1", desktop: null })}
       >
         {renderImage()}
       </Panel>
@@ -153,7 +153,7 @@ export const Index: NextPage<IndexProps> = ({
       >
         <Markdown>{blueprint_page.description_markdown}</Markdown>
       </Panel>
-      {selected.type === "blueprint" && data && (
+      {selected.type === "blueprint" && data?.blueprint && (
         <Panel
           title={(<span>Entities for {BBCode.toReact(data.blueprint.label)}</span>) as any}
           gridColumn={chakraResponsive({ mobile: "1", desktop: "1 / span 2" })}

apps/blueprints/pages/api/image-to-gen.ts

@@ -25,6 +25,8 @@ const getOneMessage = async (): Promise<BlueprintEntry> => {
       const data = JSON.parse(message.data.toString());
       const blueprint = await getBlueprintById(data.blueprintId);
 
+      if (!blueprint) return message.ack();
+
       if (await hasBlueprintImage(blueprint.image_hash)) {
         console.log(`Blueprint ${data.blueprintId} image already exists ${blueprint.image_hash}`);
         return message.ack();
@@ -43,8 +45,9 @@ const getOneMessage = async (): Promise<BlueprintEntry> => {
 const handler: NextApiHandler = async (req, res) => {
   // Allow the url to be used in the blueprint editor
   if (
-    req.headers.origin === "https://teoxoy.github.io" ||
-    req.headers.origin.startsWith("http://localhost")
+    req.headers.origin &&
+    (req.headers.origin === "https://teoxoy.github.io" ||
+      req.headers.origin.startsWith("http://localhost"))
   ) {
     res.setHeader("Access-Control-Allow-Origin", req.headers.origin);
   }

apps/blueprints/pages/api/post-image.ts

@@ -1,43 +0,0 @@
-import { getBlueprintById, saveBlueprintImage } from "@factorio-sites/database";
-// import imagemin from "imagemin";
-// import imageminWebp from "imagemin-webp";
-import { NextApiHandler } from "next";
-
-const handler: NextApiHandler = async (req, res) => {
-  // Allow the url to be used in the blueprint editor
-  if (
-    (req.method === "OPTIONS" || req.method === "POST") &&
-    req.headers.origin === "https://teoxoy.github.io"
-  ) {
-    res.setHeader("Access-Control-Allow-Origin", "https://teoxoy.github.io");
-    res.setHeader("Access-Control-Allow-Headers", "content-type");
-  }
-  if (req.method === "OPTIONS") return res.status(200).end();
-  else if (req.method !== "POST") {
-    return res.status(400).end("Only accepts POST");
-  }
-
-  if (req.body.blueprintId && req.body.image) {
-    console.log(`store image for blueprint ${req.body.blueprintId}`);
-    const buffer = Buffer.from(req.body.image, "base64");
-    const buffermin = buffer;
-    // const buffermin = await imagemin.buffer(buffer, {
-    //   plugins: [imageminWebp({ quality: 50 })],
-    // });
-
-    console.log("minified image buffer length", buffermin.byteLength);
-
-    const blueprint = await getBlueprintById(req.body.blueprintId);
-    await saveBlueprintImage(blueprint.image_hash, buffermin);
-    console.log(`Successfuly saved image ${blueprint.image_hash}`);
-
-    res.setHeader("Content-Type", "text/plain");
-    res.status(200).end("ok");
-    return;
-  }
-
-  res.setHeader("Content-Type", "text/plain");
-  res.status(400).end("no post body");
-};
-
-export default handler;

apps/blueprints/src/CopyButton.tsx

@@ -12,7 +12,7 @@ export const CopyButton: React.FC<Omit<ButtonProps, "children"> & { content: str
     <Button
       {...props}
       isLoading={loading}
-      leftIcon={icon}
+      leftIcon={icon ?? undefined}
       variantColor={icon === "small-close" ? "red" : "green"}
       onClick={() => {
         setLoading(true);

apps/blueprints/src/Pagination.tsx

@@ -11,7 +11,7 @@ interface PaginationProps {
 
 const PaginationLink: React.FC<PaginationProps> = ({ page }) => {
   const router = useRouter();
-  const query = { ...router.query, page };
+  const query: Record<string, string> = { ...router.query, page: page.toString() };
   const href =
     "?" +
     Object.keys(query)

apps/blueprints/tsconfig.json

@@ -6,7 +6,6 @@
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "types": ["node", "jest"],
-    "strict": false,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "resolveJsonModule": true,

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

@@ -21,8 +21,8 @@ export function chakraResponsive({
   mobile,
   desktop,
 }: {
-  mobile: string;
-  desktop: string;
-}): string[] {
+  mobile: string | null;
+  desktop: string | null;
+}): Array<string | null> {
   return [mobile, mobile, desktop, desktop];
 }