From cd9548fc1378a9e0e8f742f4afc547483219e5be Mon Sep 17 00:00:00 2001
From: Miki <miki.lombi@gmail.com>
Date: Sun, 21 Aug 2022 17:55:28 +0200
Subject: [PATCH] feat: add dynamic md5 routes

---
 snackjob-frontend/pages/snackjob/[id].js | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/snackjob-frontend/pages/snackjob/[id].js b/snackjob-frontend/pages/snackjob/[id].js
index 516a90a..e9320dd 100644
--- a/snackjob-frontend/pages/snackjob/[id].js
+++ b/snackjob-frontend/pages/snackjob/[id].js
@@ -1,10 +1,14 @@
 import { useRouter } from 'next/router'
+import { useState } from 'react'
 
 export default function Snackjob() {
     const router = useRouter()
     const { id } = router.query
-    let bName = '...'
-    let bTitle = '...'
+
+    const [job, setJob] = useState({
+        name: '...',
+        title: '...'
+    })
 
     const svgToPng = function (svgText, width, height) {
 
@@ -34,8 +38,10 @@ export default function Snackjob() {
 
     fetch(`https://snackjob-api.schrodinger-hat.it/api/v1/snackjob?md5=${id}`)
         .then((r) => r.json().then((j) => {
-            bName = j.name
-            bTitle = j.title
+            setJob({
+                name: j.name,
+                title: j.title
+            })
         }))
         .catch((e) => console.log(e))
 
@@ -46,7 +52,7 @@ export default function Snackjob() {
                 const height = window.document.querySelector('#bsvg').height.baseVal.value
                 svgToPng(window.document.querySelector('#bsvg').innerHTML, width, height)
             }}>asd</button>
-            <svg id='bsvg' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 719.05 410.88"><style>{`.cls-1{fill:#f6f6f6;}.cls-2{fill:#931004;}.cls-3{fill:#c00d0d;}.cls-4{fill:#db0812;}.cls-5{font-size:10px;fill:#9f1f21;letter-spacing:0.1em;}.cls-15,.cls-5,.cls-6{font-family:'Roboto', sans-serif}.cls-6{font-size:12px;fill:#1d1d1b;}.cls-7{letter-spacing:0em;}.cls-8{letter-spacing:0em;}.cls-9{letter-spacing:0em;}.cls-10{letter-spacing:0em;}.cls-11{letter-spacing:-0.01em;}.cls-12{letter-spacing:-0.01em;}.cls-13{letter-spacing:0em;}.cls-14{letter-spacing:-0.01em;}.cls-15{font-size:28px;fill:#5c5c5c;}.cls-16{letter-spacing:-0.04em;}.cls-17{letter-spacing:0em;}`}</style><g id="Livello_2" data-name="Livello 2"><g id="Layer_1" data-name="Layer 1"><rect className="cls-1" width="719.05" height="410.88" rx="28.9" /><polygon className="cls-2" points="195.71 410.88 120.29 410.88 32.62 0 108.03 0 195.71 410.88" /><polygon className="cls-3" points="270.52 410.88 195.11 410.88 107.43 0 182.85 0 270.52 410.88" /><polygon className="cls-4" points="344.79 410.88 269.38 410.88 181.7 0 257.12 0 344.79 410.88" /><rect className="cls-3" x="372.86" y="190.13" width="302.64" height="5.97" /><text className="cls-5 position" transform="translate(380.49 220.75)">{bTitle}</text><text className="cls-6" transform="translate(529.19 396.69)">Generated by @schrodinger-hat</text><text className="cls-15" transform="translate(380.18 167.44)">{bName}</text></g></g></svg>
+            <svg id='bsvg' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 719.05 410.88"><style>{`.cls-1{fill:#f6f6f6;}.cls-2{fill:#931004;}.cls-3{fill:#c00d0d;}.cls-4{fill:#db0812;}.cls-5{font-size:10px;fill:#9f1f21;letter-spacing:0.1em;}.cls-15,.cls-5,.cls-6{font-family:'Roboto', sans-serif}.cls-6{font-size:12px;fill:#1d1d1b;}.cls-7{letter-spacing:0em;}.cls-8{letter-spacing:0em;}.cls-9{letter-spacing:0em;}.cls-10{letter-spacing:0em;}.cls-11{letter-spacing:-0.01em;}.cls-12{letter-spacing:-0.01em;}.cls-13{letter-spacing:0em;}.cls-14{letter-spacing:-0.01em;}.cls-15{font-size:28px;fill:#5c5c5c;}.cls-16{letter-spacing:-0.04em;}.cls-17{letter-spacing:0em;}`}</style><g id="Livello_2" data-name="Livello 2"><g id="Layer_1" data-name="Layer 1"><rect className="cls-1" width="719.05" height="410.88" rx="28.9" /><polygon className="cls-2" points="195.71 410.88 120.29 410.88 32.62 0 108.03 0 195.71 410.88" /><polygon className="cls-3" points="270.52 410.88 195.11 410.88 107.43 0 182.85 0 270.52 410.88" /><polygon className="cls-4" points="344.79 410.88 269.38 410.88 181.7 0 257.12 0 344.79 410.88" /><rect className="cls-3" x="372.86" y="190.13" width="302.64" height="5.97" /><text className="cls-5 position" transform="translate(380.49 220.75)">{job.title}</text><text className="cls-6" transform="translate(529.19 396.69)">Generated by @schrodinger-hat</text><text className="cls-15" transform="translate(378.18 167.44)">{job.name}</text></g></g></svg>
         </>
     )
 }