layout refactor, pop up, error handling

software-mansion · Jul 25, 2024 · 04b3c84 · 04b3c84
1 parent 796297f
commit 04b3c84
Show file tree

Hide file tree

Showing 7 changed files with 170 additions and 83 deletions.
diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -24,6 +24,7 @@
     "prism-react-renderer": "^2.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-hot-toast": "^2.4.1",
     "react-icons": "^4.12.0",
     "typewriter-effect": "^2.21.0"
   },

diff --git a/docs/src/components/codeInputArea.tsx b/docs/src/components/codeInputArea.tsx
@@ -0,0 +1,12 @@
+import clsx from 'clsx';
+import styles from '../pages/playground.module.css';
+
+const CodeInputArea = ({ onChange }) => (
+  <textarea
+    className={clsx(styles.codeArea)}
+    name="inputArea"
+    placeholder="Enter your code to try it out"
+    onChange={onChange}
+  />
+);
+export default CodeInputArea;
diff --git a/docs/src/components/imageDisplay.tsx b/docs/src/components/imageDisplay.tsx
@@ -0,0 +1,18 @@
+const ImageDisplay = ({ imageUrl }) => (
+  <div>
+    {imageUrl ? (
+      <img
+        src={imageUrl}
+        style={{
+          objectFit: 'contain',
+          height: '100%',
+          width: '100%',
+        }}
+      />
+    ) : (
+      <div></div>
+    )}
+  </div>
+);
+
+export default ImageDisplay;
diff --git a/docs/src/components/options.tsx b/docs/src/components/options.tsx
@@ -0,0 +1,32 @@
+const Options = ({ onSubmit }) => (
+  <div className="bottom-right-component">
+    <div className="row">
+      <div className="col">Resolution:</div>
+      <div className="col">
+        <select>
+          <option value="someOption">Some option</option>
+          <option value="otherOption">Other option</option>
+        </select>
+      </div>
+      <div className="col">
+        <select>
+          <option value="someOption">Some option</option>
+          <option value="otherOption">Other option</option>
+        </select>
+      </div>
+      <div className="col">
+        <select>
+          <option value="someOption">Some option</option>
+          <option value="otherOption">Other option</option>
+        </select>
+      </div>
+      <div className="col">
+        <button className="button button--outline button--primary" onClick={onSubmit}>
+          Submit
+        </button>
+      </div>
+    </div>
+  </div>
+);
+
+export default Options;
diff --git a/docs/src/pages/playground.module.css b/docs/src/pages/playground.module.css
@@ -2,29 +2,47 @@
  * CSS files with the .module.css suffix will be treated as CSS modules
  * and scoped locally.
  */
-
- .page {
-    margin: 30px;
- }
+.page {
+    display: flex;
+    flex-direction: row;
+    height: 75vh;
+    margin: 20px;
+  }
+
+  .leftSide {
+    flex: 1;
+  }
 
-.codeArea {
-    height: 75dvh;
+  .rightSide {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  .codeArea {
+    height: 100%;
     width: 100%;
-    left: 0;
-    top: 0;
     resize: none;
 }
 
+.imageDisplay,
 .options {
-    margin: 30px;
+  margin-left: 10px;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
+
+.options {
+    width: 100%;
+    height: 100%;
+    margin-top: 5px;
 }
 
 .imageDisplay {
     border-radius: 2px;
     border-style: groove;
-    height: 45dvh;
     width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    height: 100%;
+    margin-bottom: 5px;
 }
diff --git a/docs/src/pages/playground.tsx b/docs/src/pages/playground.tsx
@@ -4,62 +4,12 @@ import Layout from '@theme/Layout';
 
 import styles from './playground.module.css';
 import { useState } from 'react';
+import Options from '../components/options';
+import ImageDisplay from '../components/imageDisplay';
+import CodeInputArea from '../components/codeInputArea';
+import toast, { Toaster } from 'react-hot-toast';
 
-const CodeInputArea = ({ value, onChange }) => (
-  <textarea
-    className={clsx(styles.codeArea)}
-    name="inputArea"
-    placeholder="Enter your code to try it out"
-    onChange={onChange}
-    style={{ height: value, width: '100%' }}
-  />
-);
-
-const ImageDisplay = ({ imageUrl }) => (
-  <div className={clsx(styles.imageDisplay)}>
-    {imageUrl ? (
-      <img
-        src={imageUrl}
-        alt="Generated"
-        style={{
-          objectFit: 'contain',
-          height: '100%',
-          width: '100%',
-        }}
-      />
-    ) : (
-      <div></div>
-    )}
-  </div>
-);
-
-const Options = ({ onSubmit }) => (
-  <div className={clsx('row', styles.options)}>
-    <div className="col">
-      <select>
-        <option value="someOption">Some option</option>
-        <option value="otherOption">Other option</option>
-      </select>
-    </div>
-    <div className="col">
-      <select>
-        <option value="someOption">Some option</option>
-        <option value="otherOption">Other option</option>
-      </select>
-    </div>
-    <div className="col">
-      <select>
-        <option value="someOption">Some option</option>
-        <option value="otherOption">Other option</option>
-      </select>
-    </div>
-    <div className="col">
-      <button className="button button--outline button--primary" onClick={onSubmit}>
-        Submit
-      </button>
-    </div>
-  </div>
-);
+const backendUrl = 'http://localhost:8081/render_image';
 
 function Homepage() {
   const [textAreaValue, setTextAreaValue] = useState('');
@@ -70,8 +20,6 @@ function Homepage() {
   };
 
   const handleSubmit = async () => {
-    const backendUrl = 'http://localhost:8081/render_image';
-
     try {
       const response = await fetch(backendUrl, {
         method: 'POST',
@@ -81,26 +29,42 @@ function Homepage() {
         body: textAreaValue,
       });
 
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
+      if (response.status >= 400) {
+        const contentType = response.headers.get('Content-Type');
+        const errorStatus = `Error status: ${response.status}`;
+        let errorMessage = '';
+
+        if (contentType === 'text/plain; charset=utf-8') {
+          const txt = await response.text();
+          errorMessage = `Error message:\n${txt}`;
+        } else if (contentType === 'application/json') {
+          const apiError = await response.json();
+          errorMessage = `Error message:\n${apiError.stack}`;
+        }
+
+        throw new Error(`${errorStatus}\n${errorMessage}`);
       }
 
       const blob = await response.blob();
       const imageObjectURL = URL.createObjectURL(blob);
       setImageUrl(imageObjectURL);
     } catch (error) {
-      console.error('Error:', error);
+      toast.error(`${error.message}`);
     }
   };
 
   return (
     <div className={clsx(styles.page)}>
-      <div className="row">
-        <div className={clsx('col col-6', styles.codeArea)}>
-          <CodeInputArea value={textAreaValue} onChange={handleInputChange} />
+      <div className={clsx(styles.leftSide)}>
+        <div className={clsx(styles.codeArea)}>
+          <CodeInputArea onChange={handleInputChange} />
         </div>
-        <div className="col col-6">
+      </div>
+      <div className={clsx(styles.rightSide)}>
+        <div className={clsx(styles.imageDisplay)}>
           <ImageDisplay imageUrl={imageUrl} />
+        </div>
+        <div className={clsx(styles.options)}>
           <Options onSubmit={handleSubmit} />
         </div>
       </div>
@@ -112,6 +76,7 @@ export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout title={siteConfig.title}>
+      <Toaster />
       <Homepage />
     </Layout>
   );