From 8dc22086f9b4fa0e7316284a26a28c4bdde180a9 Mon Sep 17 00:00:00 2001
From: Bart <45095973+barthuijgen@users.noreply.github.com>
Date: Wed, 17 Mar 2021 10:33:51 +0100
Subject: [PATCH] Blueprint page refactor (#51)

* blueprint page refactor

* Deduplicate code on blueprint page

Co-authored-by: Bart <barthuijgen@users.noreply.github.com>
---
 .../src/components/blueprint/Blueprint.tsx    | 174 +++++++
 .../components/blueprint/BlueprintBook.tsx    | 256 ++++++++++
 .../components/blueprint/BlueprintData.tsx    |  63 +++
 .../blueprint/BlueprintEntities.tsx           |  54 +++
 .../components/blueprint/BlueprintInfo.tsx    |  66 +++
 .../components/blueprint/BlueprintTags.tsx    |  36 ++
 .../components/blueprint/FavoriteButton.tsx   |  40 ++
 .../src/pages/blueprint/[blueprintId].tsx     | 453 +-----------------
 8 files changed, 710 insertions(+), 432 deletions(-)
 create mode 100644 apps/blueprints/src/components/blueprint/Blueprint.tsx
 create mode 100644 apps/blueprints/src/components/blueprint/BlueprintBook.tsx
 create mode 100644 apps/blueprints/src/components/blueprint/BlueprintData.tsx
 create mode 100644 apps/blueprints/src/components/blueprint/BlueprintEntities.tsx
 create mode 100644 apps/blueprints/src/components/blueprint/BlueprintInfo.tsx
 create mode 100644 apps/blueprints/src/components/blueprint/BlueprintTags.tsx
 create mode 100644 apps/blueprints/src/components/blueprint/FavoriteButton.tsx

diff --git a/apps/blueprints/src/components/blueprint/Blueprint.tsx b/apps/blueprints/src/components/blueprint/Blueprint.tsx
new file mode 100644
index 0000000..8ec2e54
--- /dev/null
+++ b/apps/blueprints/src/components/blueprint/Blueprint.tsx
@@ -0,0 +1,174 @@
+import React, { useEffect, useState } from "react";
+import BBCode from "bbcode-to-react";
+import { Grid, Image, Box } from "@chakra-ui/react";
+import { Blueprint as IBlueprint, BlueprintPage, BlueprintStringData } from "@factorio-sites/types";
+import { chakraResponsive, parseBlueprintStringClient } from "@factorio-sites/web-utils";
+import { Panel } from "../../components/Panel";
+import { Markdown } from "../../components/Markdown";
+import { CopyButton } from "../../components/CopyButton";
+import { ImageEditor } from "../../components/ImageEditor";
+import styled from "@emotion/styled";
+import { FavoriteButton } from "./FavoriteButton";
+import { useUrl } from "../../hooks/url.hook";
+import { BlueprintData } from "./BlueprintData";
+import { BlueprintInfo } from "./BlueprintInfo";
+import { BlueprintTags } from "./BlueprintTags";
+import { BlueprintEntities } from "./BlueprintEntities";
+
+const StyledBlueptintPage = styled(Grid)`
+  grid-gap: 16px;
+
+  .title {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    .text {
+      white-space: nowrap;
+      width: calc(100% - 120px);
+      display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .panel {
+    &.image {
+      height: 579px;
+    }
+    &.child-tree {
+      overflow: hidden;
+      height: 579px;
+      position: relative;
+      .child-tree-wrapper {
+        height: 483px;
+        overflow: auto;
+      }
+    }
+
+    &.tags {
+      text-align: left;
+
+      .tag {
+        display: inline-block;
+        margin: 3px;
+        padding: 0 3px;
+        background: #313131;
+        border-radius: 3px;
+      }
+    }
+
+    .description {
+      max-height: 600px;
+    }
+  }
+`;
+
+const StyledMarkdown = styled(Markdown)`
+  max-height: 600px;
+`;
+
+interface BlueprintProps {
+  blueprint: IBlueprint;
+  blueprint_page: BlueprintPage;
+  favorite: boolean;
+}
+
+export const BlueprintSubPage: React.FC<BlueprintProps> = ({
+  blueprint,
+  blueprint_page,
+  favorite,
+}) => {
+  const url = useUrl();
+  const [string, setString] = useState<string | null>(null);
+  const [data, setData] = useState<BlueprintStringData | null>(null);
+
+  useEffect(() => {
+    fetch(`/api/string/${blueprint.blueprint_hash}`)
+      .then((res) => res.text())
+      .then((string) => {
+        setString(string);
+        const data = parseBlueprintStringClient(string);
+        setData(data);
+      })
+      .catch((reason) => console.error(reason));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <StyledBlueptintPage templateColumns={chakraResponsive({ mobile: "1fr", desktop: "1fr 1fr" })}>
+      <Panel
+        className="image"
+        gridColumn="2"
+        title={
+          <div className="title">
+            <span>Image</span>
+            <img
+              src="/fbe.svg"
+              alt="Factorio blueprint editor"
+              css={{ display: "inline-block", height: "24px", marginLeft: "10px" }}
+            />
+            <Box css={{ display: "inline-block", flexGrow: 1, textAlign: "right" }}>
+              {string && (
+                <CopyButton
+                  primary
+                  css={{ marginRight: "1rem" }}
+                  label="Copy Blueprint"
+                  content={string}
+                />
+              )}
+              {blueprint.blueprint_hash && url && (
+                <CopyButton
+                  label="Copy URL"
+                  content={`${url.origin}/api/string/${blueprint.blueprint_hash}`}
+                />
+              )}
+            </Box>
+          </div>
+        }
+      >
+        {string && <ImageEditor string={string}></ImageEditor>}
+      </Panel>
+
+      <Panel
+        className="description"
+        gridColumn="1"
+        gridRow="1"
+        title={
+          <div className="title">
+            <span className="text">{blueprint_page.title}</span>
+            <FavoriteButton is_favorite={favorite} blueprint_page_id={blueprint_page.id} />
+          </div>
+        }
+      >
+        <StyledMarkdown>{blueprint_page.description_markdown}</StyledMarkdown>
+      </Panel>
+
+      <Panel title="Info" gridColumn="1" gridRow="2">
+        <BlueprintInfo blueprint_page={blueprint_page} />
+      </Panel>
+
+      <Panel gridColumn="2" gridRow="2" title="Tags">
+        <BlueprintTags blueprint_page={blueprint_page} />
+      </Panel>
+
+      <Panel
+        className="entities"
+        gridColumn="1 / span 2"
+        title={
+          <span>
+            Entities for{" "}
+            {data?.blueprint?.label ? BBCode.toReact(data.blueprint.label) : "blueprint"}
+          </span>
+        }
+      >
+        {data && <BlueprintEntities data={data} />}
+      </Panel>
+
+      <Panel className="bp-strings" gridColumn="1 / span 2" title="Blueprint data">
+        {string && data && <BlueprintData string={string} data={data} />}
+      </Panel>
+    </StyledBlueptintPage>
+  );
+};
diff --git a/apps/blueprints/src/components/blueprint/BlueprintBook.tsx b/apps/blueprints/src/components/blueprint/BlueprintBook.tsx
new file mode 100644
index 0000000..00888be
--- /dev/null
+++ b/apps/blueprints/src/components/blueprint/BlueprintBook.tsx
@@ -0,0 +1,256 @@
+import React, { useEffect, useState } from "react";
+import BBCode from "bbcode-to-react";
+import { Image, Box, Grid } from "@chakra-ui/react";
+import styled from "@emotion/styled";
+import {
+  BlueprintBook,
+  Blueprint,
+  BlueprintPage,
+  BlueprintStringData,
+} from "@factorio-sites/types";
+import {
+  chakraResponsive,
+  ChildTreeBlueprintBookEnriched,
+  mergeBlueprintDataAndChildTree,
+  parseBlueprintStringClient,
+} from "@factorio-sites/web-utils";
+import { Panel } from "../../components/Panel";
+import { Markdown } from "../../components/Markdown";
+import { BookChildTree } from "../../components/BookChildTree";
+import { CopyButton } from "../../components/CopyButton";
+import { ImageEditor } from "../../components/ImageEditor";
+import { useUrl } from "../../hooks/url.hook";
+import { FavoriteButton } from "./FavoriteButton";
+import { BlueprintData } from "./BlueprintData";
+import { BlueprintInfo } from "./BlueprintInfo";
+import { BlueprintTags } from "./BlueprintTags";
+import { BlueprintEntities } from "./BlueprintEntities";
+
+const StyledBlueptintPage = styled(Grid)`
+  grid-gap: 16px;
+
+  .title {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    .text {
+      white-space: nowrap;
+      width: calc(100% - 120px);
+      display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .panel {
+    &.image {
+      height: 579px;
+    }
+    &.child-tree {
+      overflow: hidden;
+      height: 579px;
+      position: relative;
+      .child-tree-wrapper {
+        height: 483px;
+        overflow: auto;
+      }
+    }
+
+    .description {
+      max-height: 600px;
+    }
+  }
+`;
+
+const StyledMarkdown = styled(Markdown)`
+  max-height: 600px;
+`;
+
+type Selected =
+  | { type: "blueprint"; data: Pick<Blueprint, "id" | "blueprint_hash" | "image_hash" | "label"> }
+  | { type: "blueprint_book"; data: Pick<BlueprintBook, "id" | "blueprint_hash" | "label"> };
+
+interface BlueprintBookSubPageProps {
+  selected: Selected;
+  blueprint_book: BlueprintBook;
+  blueprint_page: BlueprintPage;
+  favorite: boolean;
+}
+
+export const BlueprintBookSubPage: React.FC<BlueprintBookSubPageProps> = ({
+  selected,
+  blueprint_book,
+  blueprint_page,
+  favorite,
+}) => {
+  const url = useUrl();
+  const [selectedBlueprintString, setSelectedBlueprintString] = useState<string | null>(null);
+  const [bookChildTreeData, setBookChildTreeData] = useState<ChildTreeBlueprintBookEnriched | null>(
+    null
+  );
+  const [selectedData, setSelectedData] = useState<BlueprintStringData | null>(null);
+  const selectedHash = selected.data.blueprint_hash;
+  const showEntities = selected.type === "blueprint" && selectedData?.blueprint;
+
+  useEffect(() => {
+    fetch(`/api/string/${blueprint_book.blueprint_hash}`)
+      .then((res) => res.text())
+      .then((string) => {
+        const data = parseBlueprintStringClient(string);
+        if (data) {
+          setBookChildTreeData(
+            mergeBlueprintDataAndChildTree(data, {
+              id: blueprint_book.id,
+              name: blueprint_book.label,
+              type: "blueprint_book",
+              children: blueprint_book.child_tree,
+            })
+          );
+        }
+      })
+      .catch((reason) => console.error(reason));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    fetch(`/api/string/${selectedHash}`)
+      .then((res) => res.text())
+      .then((string) => {
+        setSelectedBlueprintString(string);
+        if (selected.type === "blueprint") {
+          const data = parseBlueprintStringClient(string);
+          setSelectedData(data);
+        } else {
+          setSelectedData(null);
+        }
+      })
+      .catch((reason) => console.error(reason));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedHash]);
+
+  const onRequestData = () => {
+    fetch(`/api/string/${selectedHash}`)
+      .then((res) => res.text())
+      .then((string) => {
+        const data = parseBlueprintStringClient(string);
+        setSelectedData(data);
+      });
+  };
+
+  return (
+    <StyledBlueptintPage
+      className="bp-book"
+      templateColumns={chakraResponsive({ mobile: "1fr", desktop: "1fr 1fr" })}
+    >
+      <Panel
+        className="child-tree"
+        title={
+          <div className="title">
+            <span className="text">{blueprint_page.title}</span>
+            <FavoriteButton is_favorite={favorite} blueprint_page_id={blueprint_page.id} />
+          </div>
+        }
+        gridColumn="1"
+        gridRow="1"
+      >
+        {bookChildTreeData && (
+          <div className="child-tree-wrapper">
+            <BookChildTree
+              blueprint_book={bookChildTreeData}
+              base_url={`/blueprint/${blueprint_page.id}`}
+              selected_id={selected.data.id}
+            />
+          </div>
+        )}
+      </Panel>
+
+      <Panel
+        className="image"
+        gridColumn="2"
+        title={
+          <div className="title">
+            <span>Image</span>
+            <img
+              src="/fbe.svg"
+              alt="Factorio blueprint editor"
+              css={{ display: "inline-block", height: "24px", marginLeft: "10px" }}
+            />
+            <Box css={{ display: "inline-block", flexGrow: 1, textAlign: "right" }}>
+              {selectedBlueprintString && (
+                <CopyButton
+                  primary
+                  css={{ marginRight: "1rem" }}
+                  label="Copy Blueprint"
+                  content={selectedBlueprintString}
+                />
+              )}
+              {selected.data.blueprint_hash && url && (
+                <CopyButton
+                  label="Copy URL"
+                  content={`${url.origin}/api/string/${selected.data.blueprint_hash}`}
+                />
+              )}
+            </Box>
+          </div>
+        }
+      >
+        {selectedBlueprintString && <ImageEditor string={selectedBlueprintString}></ImageEditor>}
+      </Panel>
+
+      <Panel
+        className="description"
+        gridColumn="1"
+        gridRow={"2 / span 2"}
+        title={
+          <div className="title">
+            <span className="text">Description </span>
+            <FavoriteButton is_favorite={favorite} blueprint_page_id={blueprint_page.id} />
+          </div>
+        }
+      >
+        <StyledMarkdown>{blueprint_page.description_markdown}</StyledMarkdown>
+      </Panel>
+
+      <Panel title="Info" gridColumn="2" gridRow="2">
+        <BlueprintInfo blueprint_page={blueprint_page} />
+      </Panel>
+
+      <Panel title="Tags" gridColumn="2" gridRow={"3"}>
+        <BlueprintTags blueprint_page={blueprint_page} />
+      </Panel>
+
+      {showEntities && (
+        <Panel
+          className="entities"
+          gridColumn="1 / span 2"
+          title={
+            <span>
+              Entities for{" "}
+              {selectedData?.blueprint?.label
+                ? BBCode.toReact(selectedData.blueprint.label)
+                : "blueprint"}
+            </span>
+          }
+        >
+          {selectedData && <BlueprintEntities data={selectedData} />}
+        </Panel>
+      )}
+
+      <Panel
+        className="bp-strings"
+        gridColumn="1 / span 2"
+        title={`data for ${selected.type.replace("_", " ")} "${selected.data.label}"`}
+      >
+        {selectedBlueprintString && (
+          <BlueprintData
+            string={selectedBlueprintString}
+            data={selectedData}
+            onRequestData={onRequestData}
+          />
+        )}
+      </Panel>
+    </StyledBlueptintPage>
+  );
+};
diff --git a/apps/blueprints/src/components/blueprint/BlueprintData.tsx b/apps/blueprints/src/components/blueprint/BlueprintData.tsx
new file mode 100644
index 0000000..7ab2b8d
--- /dev/null
+++ b/apps/blueprints/src/components/blueprint/BlueprintData.tsx
@@ -0,0 +1,63 @@
+import { Button } from "../Button";
+import { Box } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import { BlueprintStringData } from "@factorio-sites/types";
+
+interface BlueprintDataProps {
+  string: string;
+  data: BlueprintStringData | null;
+  onRequestData?: () => void;
+}
+
+export const BlueprintData: React.FC<BlueprintDataProps> = ({ string, data, onRequestData }) => {
+  const [showDetails, setShowDetails] = useState<"string" | "json" | "none">("none");
+
+  useEffect(() => {
+    setShowDetails("none");
+  }, [string, data]);
+
+  return (
+    <Box>
+      <Box>
+        <Button
+          onClick={() => {
+            setShowDetails(showDetails === "string" ? "none" : "string");
+          }}
+        >
+          {showDetails === "string" ? "Hide" : "Show"} string
+        </Button>
+        <Button
+          css={{ marginLeft: "1rem" }}
+          onClick={() => {
+            setShowDetails(showDetails === "json" ? "none" : "json");
+            if (!data && onRequestData) {
+              onRequestData();
+            }
+          }}
+        >
+          {showDetails === "json" ? "Hide" : "Show"} json
+        </Button>
+      </Box>
+      <Box css={{ marginTop: "1rem" }}>
+        {showDetails === "string" && (
+          <textarea
+            value={string || "Loading..."}
+            readOnly
+            css={{
+              width: "100%",
+              height: "100px",
+              resize: "none",
+              color: "#fff",
+              backgroundColor: "#414040",
+            }}
+          />
+        )}
+        {showDetails === "json" && (
+          <pre css={{ maxHeight: "500px", overflowY: "scroll" }}>
+            {JSON.stringify(data, null, 2)}
+          </pre>
+        )}
+      </Box>
+    </Box>
+  );
+};
diff --git a/apps/blueprints/src/components/blueprint/BlueprintEntities.tsx b/apps/blueprints/src/components/blueprint/BlueprintEntities.tsx
new file mode 100644
index 0000000..9135d3c
--- /dev/null
+++ b/apps/blueprints/src/components/blueprint/BlueprintEntities.tsx
@@ -0,0 +1,54 @@
+import { Box, Image } from "@chakra-ui/react";
+import { BlueprintStringData } from "@factorio-sites/types";
+import styled from "@emotion/styled";
+
+const StyledBox = styled(Box)`
+  td {
+    border: 1px solid #909090;
+  }
+  td:not(.no-padding) {
+    padding: 5px 10px;
+  }
+`;
+
+interface BlueprintEntitiesProps {
+  data: BlueprintStringData;
+}
+
+export const BlueprintEntities: React.FC<BlueprintEntitiesProps> = ({ data }) => {
+  return (
+    <StyledBox>
+      <table>
+        <tbody>
+          {data?.blueprint?.entities &&
+            Object.entries(
+              data.blueprint.entities.reduce<Record<string, number>>((entities, entity) => {
+                if (entities[entity.name]) {
+                  entities[entity.name]++;
+                } else {
+                  entities[entity.name] = 1;
+                }
+                return entities;
+              }, {})
+            )
+              .sort((a, b) => b[1] - a[1])
+              .map(([entry_name, entry]) => (
+                <tr key={entry_name}>
+                  <td className="no-padding">
+                    <Image
+                      alt={entry_name.replace(/-/g, " ")}
+                      src={`https://factorioprints.com/icons/${entry_name}.png`}
+                      fallbackSrc="https://storage.googleapis.com/factorio-blueprints-assets/error-icon.png"
+                      width="32px"
+                      height="32px"
+                    />
+                  </td>
+                  <td>{entry_name}</td>
+                  <td>{entry}</td>
+                </tr>
+              ))}
+        </tbody>
+      </table>
+    </StyledBox>
+  );
+};
diff --git a/apps/blueprints/src/components/blueprint/BlueprintInfo.tsx b/apps/blueprints/src/components/blueprint/BlueprintInfo.tsx
new file mode 100644
index 0000000..26a3c6c
--- /dev/null
+++ b/apps/blueprints/src/components/blueprint/BlueprintInfo.tsx
@@ -0,0 +1,66 @@
+import { Box } from "@chakra-ui/react";
+import { format } from "date-fns";
+import Link from "next/link";
+import { BlueprintPage } from "@factorio-sites/types";
+import styled from "@emotion/styled";
+
+const StyledBox = styled(Box)`
+  dl {
+    display: flex;
+    dt {
+      width: 65%;
+      font-weight: 600;
+    }
+    dd {
+      width: 35%;
+      text-align: right;
+    }
+  }
+
+  hr {
+    margin-left: -64px;
+    margin-right: -64px;
+    border: none;
+    height: 2px;
+    margin: 12px auto;
+    box-shadow: inset 0 1px 1px 0 #131313, inset 0 -1px 1px 0 #838383, 0 0 4px 0 #392f2e;
+  }
+`;
+
+interface BlueprintInfoProps {
+  blueprint_page: BlueprintPage;
+}
+
+export const BlueprintInfo: React.FC<BlueprintInfoProps> = ({ blueprint_page }) => {
+  return (
+    <StyledBox>
+      <dl>
+        <dt>User:</dt>
+        <dd>
+          {blueprint_page.user ? (
+            <Link href={`/?user=${blueprint_page.user?.id}`}>
+              <a>{blueprint_page.user?.username}</a>
+            </Link>
+          ) : (
+            "-"
+          )}
+        </dd>
+      </dl>
+      <hr />
+      <dl>
+        <dt>Last updated:</dt>
+        <dd>{format(new Date(blueprint_page.updated_at * 1000), "DD/mm/YYYY")}</dd>
+      </dl>
+      <hr />
+      <dl>
+        <dt>Created:</dt>
+        <dd>{format(new Date(blueprint_page.created_at * 1000), "DD/mm/YYYY")}</dd>
+      </dl>
+      <hr />
+      <dl>
+        <dt>Favorites:</dt>
+        <dd>{blueprint_page.favorite_count || "0"}</dd>
+      </dl>
+    </StyledBox>
+  );
+};
diff --git a/apps/blueprints/src/components/blueprint/BlueprintTags.tsx b/apps/blueprints/src/components/blueprint/BlueprintTags.tsx
new file mode 100644
index 0000000..91d3df1
--- /dev/null
+++ b/apps/blueprints/src/components/blueprint/BlueprintTags.tsx
@@ -0,0 +1,36 @@
+import { Box } from "@chakra-ui/react";
+import { BlueprintPage } from "@factorio-sites/types";
+import styled from "@emotion/styled";
+import { TAGS_BY_KEY } from "@factorio-sites/common-utils";
+
+const StyledBox = styled(Box)`
+  text-align: left;
+
+  .tag {
+    display: inline-block;
+    margin: 3px;
+    padding: 0 3px;
+    background: #313131;
+    border-radius: 3px;
+  }
+`;
+
+interface BlueprintTagsProps {
+  blueprint_page: BlueprintPage;
+}
+
+export const BlueprintTags: React.FC<BlueprintTagsProps> = ({ blueprint_page }) => {
+  return (
+    <StyledBox>
+      {blueprint_page.tags.length ? (
+        blueprint_page.tags.map((tag) => (
+          <span key={tag} className="tag">
+            {TAGS_BY_KEY[tag].category}: {TAGS_BY_KEY[tag].label}
+          </span>
+        ))
+      ) : (
+        <div>No tags have been added yet</div>
+      )}
+    </StyledBox>
+  );
+};
diff --git a/apps/blueprints/src/components/blueprint/FavoriteButton.tsx b/apps/blueprints/src/components/blueprint/FavoriteButton.tsx
new file mode 100644
index 0000000..9ba0b60
--- /dev/null
+++ b/apps/blueprints/src/components/blueprint/FavoriteButton.tsx
@@ -0,0 +1,40 @@
+import { useState } from "react";
+import { AiFillHeart, AiOutlineHeart } from "react-icons/ai";
+import { useAuth } from "../../providers/auth";
+import { Button } from "../Button";
+
+interface FavoriteButtonProps {
+  is_favorite: boolean;
+  blueprint_page_id: string;
+}
+
+export const FavoriteButton: React.FC<FavoriteButtonProps> = ({
+  is_favorite: isFavoriteDefault,
+  blueprint_page_id,
+}) => {
+  const auth = useAuth();
+  const [isFavorite, setIsFavorite] = useState(isFavoriteDefault);
+
+  const onClickFavorite = async () => {
+    const result = await fetch("/api/user/favorite", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ blueprint_page_id }),
+    }).then((res) => res.json());
+    setIsFavorite(result.favorite);
+  };
+
+  if (!auth) return null;
+
+  return (
+    <Button
+      onClick={onClickFavorite}
+      css={{ display: "inline-flex", float: "right", fontSize: "initial" }}
+    >
+      Favorite
+      <span className="icon" css={{ marginLeft: "5px" }}>
+        {isFavorite ? <AiFillHeart /> : <AiOutlineHeart />}
+      </span>
+    </Button>
+  );
+};
diff --git a/apps/blueprints/src/pages/blueprint/[blueprintId].tsx b/apps/blueprints/src/pages/blueprint/[blueprintId].tsx
index 039426a..bffd682 100644
--- a/apps/blueprints/src/pages/blueprint/[blueprintId].tsx
+++ b/apps/blueprints/src/pages/blueprint/[blueprintId].tsx
@@ -1,122 +1,16 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { NextPage } from "next";
-import Link from "next/link";
-import BBCode from "bbcode-to-react";
-import { Image, Box, Grid } from "@chakra-ui/react";
-import styled from "@emotion/styled";
-import clsx from "clsx";
 import {
   getBlueprintBookById,
   getBlueprintById,
   getBlueprintPageWithUserById,
   isBlueprintPageUserFavorite,
 } from "@factorio-sites/database";
-import {
-  BlueprintBook,
-  Blueprint,
-  BlueprintPage,
-  BlueprintStringData,
-} from "@factorio-sites/types";
-import { TAGS_BY_KEY, timeLogger } from "@factorio-sites/common-utils";
-import {
-  chakraResponsive,
-  ChildTreeBlueprintBookEnriched,
-  mergeBlueprintDataAndChildTree,
-  parseBlueprintStringClient,
-} from "@factorio-sites/web-utils";
-import { Panel } from "../../components/Panel";
-import { Markdown } from "../../components/Markdown";
-import { BookChildTree } from "../../components/BookChildTree";
-import { CopyButton } from "../../components/CopyButton";
-import { ImageEditor } from "../../components/ImageEditor";
-import { useAuth } from "../../providers/auth";
+import { BlueprintBook, Blueprint, BlueprintPage } from "@factorio-sites/types";
+import { timeLogger } from "@factorio-sites/common-utils";
 import { pageHandler } from "../../utils/page-handler";
-import { AiOutlineHeart, AiFillHeart } from "react-icons/ai";
-import { Button } from "../../components/Button";
-import { useUrl } from "../../hooks/url.hook";
-
-const StyledBlueptintPage = styled(Grid)`
-  grid-gap: 16px;
-
-  .title {
-    position: relative;
-    width: 100%;
-
-    .text {
-      white-space: nowrap;
-      width: calc(100% - 120px);
-      display: inline-block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  .panel {
-    &.image {
-      height: 579px;
-    }
-    &.child-tree {
-      overflow: hidden;
-      height: 579px;
-      position: relative;
-      .child-tree-wrapper {
-        height: 483px;
-        overflow: auto;
-      }
-    }
-    &.info {
-      dl {
-        display: flex;
-        dt {
-          width: 65%;
-          font-weight: 600;
-        }
-        dd {
-          width: 35%;
-          text-align: right;
-        }
-      }
-
-      hr {
-        margin-left: -64px;
-        margin-right: -64px;
-        border: none;
-        height: 2px;
-        margin: 12px auto;
-        box-shadow: inset 0 1px 1px 0 #131313, inset 0 -1px 1px 0 #838383, 0 0 4px 0 #392f2e;
-      }
-    }
-
-    &.tags {
-      text-align: left;
-
-      .tag {
-        display: inline-block;
-        margin: 3px;
-        padding: 0 3px;
-        background: #313131;
-        border-radius: 3px;
-      }
-    }
-
-    &.entities table {
-      td {
-        border: 1px solid #909090;
-      }
-      td:not(.no-padding) {
-        padding: 5px 10px;
-      }
-    }
-
-    .description {
-      max-height: 600px;
-    }
-  }
-`;
-
-const StyledMarkdown = styled(Markdown)`
-  max-height: 600px;
-`;
+import { BlueprintSubPage } from "../../components/blueprint/Blueprint";
+import { BlueprintBookSubPage } from "../../components/blueprint/BlueprintBook";
 
 type Selected =
   | { type: "blueprint"; data: Pick<Blueprint, "id" | "blueprint_hash" | "image_hash" | "label"> }
@@ -137,58 +31,6 @@ export const Index: NextPage<IndexProps> = ({
   blueprint_page,
   favorite,
 }) => {
-  const auth = useAuth();
-  const url = useUrl();
-  const [selectedBlueprintString, setSelectedBlueprintString] = useState<string | null>(null);
-  const [bookChildTreeData, setBookChildTreeData] = useState<ChildTreeBlueprintBookEnriched | null>(
-    null
-  );
-  const [selectedData, setSelectedData] = useState<BlueprintStringData | null>(null);
-  const [showDetails, setShowDetails] = useState<"string" | "json" | "none">("none");
-  const [isFavorite, setIsFavorite] = useState(favorite);
-  const selectedHash = selected.data.blueprint_hash;
-  const isBlueprintBook = Boolean(blueprint_book);
-  // const isBlueprintBookChild = isBlueprintBook && selected.type === "blueprint";
-  const showEntities = selected.type === "blueprint" && selectedData?.blueprint;
-
-  useEffect(() => {
-    const hash = blueprint_book ? blueprint_book.blueprint_hash : blueprint?.blueprint_hash;
-    fetch(`/api/string/${hash}`)
-      .then((res) => res.text())
-      .then((string) => {
-        const data = parseBlueprintStringClient(string);
-        if (data && blueprint_book) {
-          setBookChildTreeData(
-            mergeBlueprintDataAndChildTree(data, {
-              id: blueprint_book.id,
-              name: blueprint_book.label,
-              type: "blueprint_book",
-              children: blueprint_book.child_tree,
-            })
-          );
-        }
-      })
-      .catch((reason) => console.error(reason));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    fetch(`/api/string/${selectedHash}`)
-      .then((res) => res.text())
-      .then((string) => {
-        setShowDetails("none");
-        setSelectedBlueprintString(string);
-        if (selected.type === "blueprint") {
-          const data = parseBlueprintStringClient(string);
-          setSelectedData(data);
-        } else {
-          setSelectedData(null);
-        }
-      })
-      .catch((reason) => console.error(reason));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedHash]);
-
   useEffect(() => {
     console.log({
       selected,
@@ -199,275 +41,22 @@ export const Index: NextPage<IndexProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const onClickFavorite = async () => {
-    const result = await fetch("/api/user/favorite", {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({ blueprint_page_id: blueprint_page.id }),
-    }).then((res) => res.json());
-    setIsFavorite(result.favorite);
-  };
-
-  return (
-    <StyledBlueptintPage
-      className={clsx({ "bp-book": isBlueprintBook })}
-      templateColumns={chakraResponsive({ mobile: "1fr", desktop: "1fr 1fr" })}
-    >
-      {isBlueprintBook && (
-        <Panel
-          className="child-tree"
-          title={
-            <div className="title">
-              <span className="text">{blueprint_page.title}</span>
-              {auth && (
-                <Button
-                  onClick={onClickFavorite}
-                  css={{ display: "inline-flex", float: "right", fontSize: "initial" }}
-                >
-                  Favorite
-                  <span className="icon" css={{ marginLeft: "5px" }}>
-                    {isFavorite ? <AiFillHeart /> : <AiOutlineHeart />}
-                  </span>
-                </Button>
-              )}
-            </div>
-          }
-          gridColumn="1"
-          gridRow="1"
-        >
-          {bookChildTreeData && (
-            <div className="child-tree-wrapper">
-              <BookChildTree
-                blueprint_book={bookChildTreeData}
-                base_url={`/blueprint/${blueprint_page.id}`}
-                selected_id={selected.data.id}
-              />
-            </div>
-          )}
-        </Panel>
-      )}
-
-      <Panel
-        className="image"
-        gridColumn="2"
-        title={
-          <div className="title">
-            <span>Image</span>
-            <img
-              src="/fbe.svg"
-              alt="Factorio blueprint editor"
-              css={{ display: "inline-block", height: "24px", marginLeft: "10px" }}
-            />
-            <Box css={{ display: "inline-block", float: "right" }}>
-              {selectedBlueprintString && (
-                <CopyButton
-                  primary
-                  css={{ marginRight: "1rem" }}
-                  label="Copy Blueprint"
-                  content={selectedBlueprintString}
-                />
-              )}
-              {selected.data.blueprint_hash && url && (
-                <CopyButton
-                  label="Copy URL"
-                  content={`${url.origin}/api/string/${selected.data.blueprint_hash}`}
-                />
-              )}
-            </Box>
-          </div>
-        }
-      >
-        {selectedBlueprintString && <ImageEditor string={selectedBlueprintString}></ImageEditor>}
-      </Panel>
-
-      <Panel
-        className="description"
-        gridColumn="1"
-        gridRow={isBlueprintBook ? "2 / span 2" : "1"}
-        title={
-          <div className="title">
-            <span className="text">{isBlueprintBook ? "Description" : blueprint_page.title}</span>
-            {auth && !isBlueprintBook && (
-              <Button
-                onClick={onClickFavorite}
-                css={{ display: "inline-flex", float: "right", fontSize: "initial" }}
-              >
-                Favorite
-                <span className="icon" css={{ marginLeft: "5px" }}>
-                  {isFavorite ? <AiFillHeart /> : <AiOutlineHeart />}
-                </span>
-              </Button>
-            )}
-          </div>
-        }
-        // bottom={
-        //   <div css={{ display: "flex", justifyContent: "flex-end" }}>
-        //     {selectedBlueprintString && (
-        //       <CopyButton
-        //         css={{ marginRight: 16 }}
-        //         label="Copy Blueprint"
-        //         content={selectedBlueprintString}
-        //       />
-        //     )}
-        //     {selected.data.blueprint_hash && typeof window !== "undefined" && (
-        //       <CopyButton
-        //         label="Copy URL"
-        //         content={`${window.location.origin}/api/string/${selected.data.blueprint_hash}`}
-        //       />
-        //     )}
-        //   </div>
-        // }
-      >
-        <StyledMarkdown>{blueprint_page.description_markdown}</StyledMarkdown>
-      </Panel>
-
-      <Panel className="info" gridColumn={isBlueprintBook ? "2" : "1"} gridRow="2" title={"Info"}>
-        <Box>
-          <dl>
-            <dt>User:</dt>
-            <dd>
-              {blueprint_page.user ? (
-                <Link href={`/?user=${blueprint_page.user?.id}`}>
-                  <a>{blueprint_page.user?.username}</a>
-                </Link>
-              ) : (
-                "-"
-              )}
-            </dd>
-          </dl>
-          <hr />
-          <dl>
-            <dt>Last updated:</dt>
-            <dd>{new Date(blueprint_page.updated_at * 1000).toLocaleDateString()}</dd>
-          </dl>
-          <hr />
-          <dl>
-            <dt>Created:</dt>
-            <dd>{new Date(blueprint_page.created_at * 1000).toLocaleDateString()}</dd>
-          </dl>
-          <hr />
-          <dl>
-            <dt>Favorites:</dt>
-            <dd>{blueprint_page.favorite_count || "0"}</dd>
-          </dl>
-        </Box>
-      </Panel>
-
-      <Panel className="tags" gridColumn="2" gridRow={isBlueprintBook ? "3" : "2"} title={"Tags"}>
-        {blueprint_page.tags.length ? (
-          blueprint_page.tags.map((tag) => (
-            <span key={tag} className="tag">
-              {TAGS_BY_KEY[tag].category}: {TAGS_BY_KEY[tag].label}
-            </span>
-          ))
-        ) : (
-          <div>No tags have been added yet</div>
-        )}
-      </Panel>
-
-      {showEntities && (
-        <Panel
-          className="entities"
-          gridColumn="1 / span 2"
-          title={
-            <span>
-              Entities for{" "}
-              {selectedData?.blueprint?.label
-                ? BBCode.toReact(selectedData.blueprint.label)
-                : "blueprint"}
-            </span>
-          }
-        >
-          <table>
-            <tbody>
-              {selectedData?.blueprint?.entities &&
-                Object.entries(
-                  selectedData.blueprint.entities.reduce<Record<string, number>>(
-                    (entities, entity) => {
-                      if (entities[entity.name]) {
-                        entities[entity.name]++;
-                      } else {
-                        entities[entity.name] = 1;
-                      }
-                      return entities;
-                    },
-                    {}
-                  )
-                )
-                  .sort((a, b) => b[1] - a[1])
-                  .map(([entry_name, entry]) => (
-                    <tr key={entry_name}>
-                      <td className="no-padding">
-                        <Image
-                          alt={entry_name.replace(/-/g, " ")}
-                          src={`https://factorioprints.com/icons/${entry_name}.png`}
-                          fallbackSrc="https://storage.googleapis.com/factorio-blueprints-assets/error-icon.png"
-                          width="32px"
-                          height="32px"
-                        />
-                      </td>
-                      <td>{entry_name}</td>
-                      <td>{entry}</td>
-                    </tr>
-                  ))}
-            </tbody>
-          </table>
-        </Panel>
-      )}
-
-      <Panel
-        className="bp-strings"
-        gridColumn="1 / span 2"
-        title={`data for ${selected.type.replace("_", " ")} "${selected.data.label}"`}
-      >
-        <Box>
-          <Button
-            onClick={() => {
-              setShowDetails(showDetails === "string" ? "none" : "string");
-            }}
-          >
-            {showDetails === "string" ? "Hide" : "Show"} string
-          </Button>
-          <Button
-            css={{ marginLeft: "1rem" }}
-            onClick={() => {
-              setShowDetails(showDetails === "json" ? "none" : "json");
-              if (!selectedData) {
-                fetch(`/api/string/${selectedHash}`)
-                  .then((res) => res.text())
-                  .then((string) => {
-                    const data = parseBlueprintStringClient(string);
-                    setSelectedData(data);
-                  });
-              }
-            }}
-          >
-            {showDetails === "json" ? "Hide" : "Show"} json
-          </Button>
-        </Box>
-        <Box css={{ marginTop: "1rem" }}>
-          {showDetails === "string" && (
-            <textarea
-              value={selectedBlueprintString || "Loading..."}
-              readOnly
-              css={{
-                width: "100%",
-                height: "100px",
-                resize: "none",
-                color: "#fff",
-                backgroundColor: "#414040",
-              }}
-            />
-          )}
-          {showDetails === "json" && (
-            <pre css={{ maxHeight: "500px", overflowY: "scroll" }}>
-              {JSON.stringify(selectedData, null, 2)}
-            </pre>
-          )}
-        </Box>
-      </Panel>
-    </StyledBlueptintPage>
-  );
+  if (blueprint) {
+    return (
+      <BlueprintSubPage blueprint={blueprint} blueprint_page={blueprint_page} favorite={favorite} />
+    );
+  } else if (blueprint_book) {
+    return (
+      <BlueprintBookSubPage
+        selected={selected}
+        blueprint_book={blueprint_book}
+        blueprint_page={blueprint_page}
+        favorite={favorite}
+      />
+    );
+  } else {
+    return <div>404</div>;
+  }
 };
 
 export const getServerSideProps = pageHandler(async (context, { session }) => {