From 2c5e25653e4a5db16cafdb8ccdfefe98c2ed9041 Mon Sep 17 00:00:00 2001
From: "Ziyuan (Jerry) Zhang" <ziyuanzhang2019@gmail.com>
Date: Wed, 28 Feb 2024 13:33:53 -0500
Subject: [PATCH] refactor

---
 demo/src/App.tsx                         |  6 +++---
 demo/src/DownloadJSONButton.tsx          |  2 +-
 demo/src/MemoryModels.tsx                | 15 ++++++++-------
 demo/src/SvgDisplay.tsx                  | 14 ++++++--------
 demo/src/__tests__/MemoryModels.spec.tsx | 10 +++++-----
 5 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/demo/src/App.tsx b/demo/src/App.tsx
index cdb3b640..587e833c 100644
--- a/demo/src/App.tsx
+++ b/demo/src/App.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import SvgDisplay from "./SvgDisplay";
-import MemoryModelsTab from "./MemoryModels";
+import MemoryModelsUserInput from "./MemoryModels";
 import { ErrorBoundary } from "react-error-boundary";
 import DownloadJSONButton from "./DownloadJSONButton";
 import DownloadSVGButton from "./DownloadSVGButton";
@@ -26,7 +26,7 @@ export default function App() {
 
     return (
         <>
-            <MemoryModelsTab
+            <MemoryModelsUserInput
                 textData={textData}
                 setTextData={setTextData}
                 onTextDataSubmit={onTextDataSubmit}
@@ -48,7 +48,7 @@ export default function App() {
                         {jsonResult && (
                             <DownloadJSONButton jsonResult={jsonResult} />
                         )}
-                        {svgResult && (
+                        {jsonResult && svgResult && (
                             <DownloadSVGButton svgResult={svgResult} />
                         )}
                     </Stack>
diff --git a/demo/src/DownloadJSONButton.tsx b/demo/src/DownloadJSONButton.tsx
index 6e99f92c..bd9804e0 100644
--- a/demo/src/DownloadJSONButton.tsx
+++ b/demo/src/DownloadJSONButton.tsx
@@ -13,7 +13,7 @@ export default function DownloadJSONButton(props: DownloadJSONButtonPropTypes) {
         <Button
             variant="contained"
             color="primary"
-            style={{ fontFamily: "Monospace", textTransform: "none" }}
+            style={{ fontFamily: "Monospace" }}
             download="input.json"
             target="_blank"
             rel="noreferrer"
diff --git a/demo/src/MemoryModels.tsx b/demo/src/MemoryModels.tsx
index f3e449e8..b7bd011b 100644
--- a/demo/src/MemoryModels.tsx
+++ b/demo/src/MemoryModels.tsx
@@ -18,17 +18,16 @@ type MemoryModelsTextInputPropTypes = {
     setTextData: React.Dispatch<React.SetStateAction<string>>;
     textData: string;
 };
-type MemoryModelsTabPropTypes = MemoryModelsFileInputPropTypes &
+type MemoryModelsUserInputPropTypes = MemoryModelsFileInputPropTypes &
     MemoryModelsTextInputPropTypes & {
         onTextDataSubmit: (event: React.MouseEvent<HTMLFormElement>) => void;
     };
 
 function MemoryModelsFileInput(props: MemoryModelsFileInputPropTypes) {
     const onChange = (event) => {
-        const uploadedFile = event.target.files[0];
-        const fileReader = new FileReader();
-
         try {
+            const uploadedFile = event.target.files[0];
+            const fileReader = new FileReader();
             fileReader.readAsText(uploadedFile, "UTF-8");
             fileReader.onload = (event) => {
                 props.setTextData(event.target.result as string);
@@ -47,7 +46,7 @@ function MemoryModelsFileInput(props: MemoryModelsFileInputPropTypes) {
                 type="file"
                 onChange={onChange}
                 inputProps={{ accept: "application/JSON" }}
-                sx={{ width: "100%", height: "20%" }}
+                sx={{ width: "100%" }}
                 disableUnderline={true}
             />
         </CardContent>
@@ -80,12 +79,14 @@ function MemoryModelsTextInput(props: MemoryModelsTextInputPropTypes) {
     );
 }
 
-export default function MemoryModelsTab(props: MemoryModelsTabPropTypes) {
+export default function MemoryModelsUserInput(
+    props: MemoryModelsUserInputPropTypes
+) {
     return (
         <form data-testid="input-form" onSubmit={props.onTextDataSubmit}>
             <Grid container spacing={2}>
                 <Grid item xs={12}>
-                    <Card sx={{ height: "400px", overflow: "auto" }}>
+                    <Card>
                         <Typography component="div">
                             <MemoryModelsFileInput
                                 setTextData={props.setTextData}
diff --git a/demo/src/SvgDisplay.tsx b/demo/src/SvgDisplay.tsx
index 78a9eac4..4201122e 100644
--- a/demo/src/SvgDisplay.tsx
+++ b/demo/src/SvgDisplay.tsx
@@ -22,13 +22,11 @@ export default function SvgDisplay(props: SvgDisplayPropTypes) {
     }, [props.jsonResult]);
 
     return (
-        <div>
-            <canvas
-                data-testid="memory-models-canvas"
-                ref={canvasRef}
-                width={canvasWidth}
-                height={canvasHeight}
-            />
-        </div>
+        <canvas
+            data-testid="memory-models-canvas"
+            ref={canvasRef}
+            width={canvasWidth}
+            height={canvasHeight}
+        />
     );
 }
diff --git a/demo/src/__tests__/MemoryModels.spec.tsx b/demo/src/__tests__/MemoryModels.spec.tsx
index 8f420fe7..f56dc921 100644
--- a/demo/src/__tests__/MemoryModels.spec.tsx
+++ b/demo/src/__tests__/MemoryModels.spec.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
-import MemoryModelsTab from "../MemoryModels";
+import MemoryModelsUserInput from "../MemoryModels";
 
-describe("MemoryModelsTab", () => {
+describe("MemoryModelsUserInput", () => {
     // submit button by default resets the form https://stackoverflow.com/a/62404526
     const onSubmitMock = jest.fn((e) => e.preventDefault());
     const setTextDataMock = jest.fn();
@@ -10,7 +10,7 @@ describe("MemoryModelsTab", () => {
     it("does not submit the form or enable the submit button with empty textData", () => {
         const textDataMock = "";
         render(
-            <MemoryModelsTab
+            <MemoryModelsUserInput
                 onTextDataSubmit={onSubmitMock}
                 setTextData={setTextDataMock}
                 textData={textDataMock}
@@ -28,7 +28,7 @@ describe("MemoryModelsTab", () => {
         const textDataMock = "";
 
         render(
-            <MemoryModelsTab
+            <MemoryModelsUserInput
                 onTextDataSubmit={onSubmitMock}
                 setTextData={setTextDataMock}
                 textData={textDataMock}
@@ -46,7 +46,7 @@ describe("MemoryModelsTab", () => {
         const textDataMock = "Form data";
         beforeEach(() => {
             render(
-                <MemoryModelsTab
+                <MemoryModelsUserInput
                     onTextDataSubmit={onSubmitMock}
                     setTextData={setTextDataMock}
                     textData={textDataMock}