games/factorio-sites
1
0
Fork 0
mirror of https://github.com/barthuijgen/factorio-sites.git synced 2025-03-04 15:51:24 +02:00
Code Issues Releases Activity

fix: performance improvement for blueprint create page

Browse Source
This commit is contained in:
Bart 2021-04-24 16:14:56 +02:00
parent af38c846bd
commit 9e1d6cec0b
2 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
apps/blueprints/src/components/BookChildTree.tsx
View File

@ -1,3 +1,4 @@
import { memo } from "react";
import { css } from "@emotion/react";
import Link, { LinkProps } from "next/link";
import { FactorioIcon } from "./FactorioIcon";
@ -128,19 +129,17 @@ const InnerBookChildTree: React.FC<BookChildTreeProps> = ({ book_item, base_url,
);
};
export const BookChildTree: React.FC<BookChildTreeProps> = ({
book_item,
base_url,
selected_id,
}) => {
return (
<div css={componentStyles}>
<div className="child-tree-wrapper ">
<InnerBookChildTree book_item={book_item} base_url={base_url} selected_id={selected_id} />
export const BookChildTree: React.FC<BookChildTreeProps> = memo(
({ book_item, base_url, selected_id }) => {
return (
<div css={componentStyles}>
<div className="child-tree-wrapper ">
<InnerBookChildTree book_item={book_item} base_url={base_url} selected_id={selected_id} />
</div>
</div>
</div>
);
};
);
}
);
const convertBlueprintDataToTree = (data: BlueprintStringData): TreeItem | null => {
if (data.blueprint_book) {

15
apps/blueprints/src/pages/user/blueprint-create.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useEffect, useState, useMemo } from "react";
import { NextPage } from "next";
import { useRouter } from "next/router";
import {
@ -71,6 +71,12 @@ const FormContent: React.FC = () => {
const description =
blueprintData?.blueprint?.description || blueprintData?.blueprint_book?.description || "";
const book_item = useMemo(
() =>
blueprintData?.blueprint_book && convertBlueprintBookDataToTree(blueprintData.blueprint_book),
[blueprintData?.blueprint_book]
);
useEffect(() => {
if (values.string) {
const data = parseBlueprintStringClient(values.string);
@ -203,11 +209,8 @@ const FormContent: React.FC = () => {
</Panel>
<Panel title="Preview">
<Box>
{blueprintData?.blueprint_book ? (
<BookChildTree
book_item={convertBlueprintBookDataToTree(blueprintData.blueprint_book)}
selected_id={null}
/>
{book_item ? (
<BookChildTree book_item={book_item} selected_id={null} />
) : values.string ? (
<ImageEditor string={values.string} />
) : null}