From eb8025791b7e8bcb72764c21e6c09276b9b4fdd7 Mon Sep 17 00:00:00 2001
From: He4eT <He4eTHb1u@gmail.com>
Date: Wed, 24 Feb 2021 23:04:41 +0500
Subject: [PATCH] Extract URL loader component

---
 src/common/if.js                   |  6 +++---
 src/components/player/UrlPlayer.js | 32 ++++++++++++++++++++++++++++++
 src/views/PlayerView.jsx           | 20 ++-----------------
 3 files changed, 37 insertions(+), 21 deletions(-)
 create mode 100644 src/components/player/UrlPlayer.js

diff --git a/src/common/if.js b/src/common/if.js
index 137c9eb..70af296 100644
--- a/src/common/if.js
+++ b/src/common/if.js
@@ -4,8 +4,8 @@
 import { engineByFilename } from '~/src/common/engines'
 
 export const prepareVM = ({ url, setStatus, setVM }) => _ => {
-  const st = (step, details) => args => {
-    setStatus({ step, details })
+  const st = (stage, details) => args => {
+    setStatus({ stage, details })
     return args
   }
 
@@ -23,7 +23,7 @@ export const prepareVM = ({ url, setStatus, setVM }) => _ => {
     .then(st('loading', 'Running...'))
     .catch(e => {
       console.error(e)
-      setStatus({ level: 'fail', details: e.message })
+      setStatus({ stage: 'fail', details: e.message })
     })
 }
 
diff --git a/src/components/player/UrlPlayer.js b/src/components/player/UrlPlayer.js
new file mode 100644
index 0000000..1df1f68
--- /dev/null
+++ b/src/components/player/UrlPlayer.js
@@ -0,0 +1,32 @@
+import { h } from 'preact'
+import { useState, useEffect } from 'preact/hooks'
+
+import { prepareVM } from '~/src/common/if'
+
+const INITIAL_STATUS = {
+  stage: 'loading',
+  details: 'Loading...'
+}
+
+export default function ({url}) {
+  console.log(123, url)
+  const [status, setStatus] = useState(INITIAL_STATUS)
+
+  const [vm, setVM] = useState(null)
+
+  useEffect(prepareVM({
+    url,
+    setStatus,
+    setVM
+  }), [url])
+
+  useEffect(() => {
+    if (vm) console.log('success', vm)
+  }, [vm])
+
+  return (
+    <main>
+      {url}
+      {status.details}
+    </main>)
+}
diff --git a/src/views/PlayerView.jsx b/src/views/PlayerView.jsx
index abf3b9b..8eed189 100644
--- a/src/views/PlayerView.jsx
+++ b/src/views/PlayerView.jsx
@@ -1,31 +1,15 @@
 import { h } from 'preact'
-
 import { useState, useEffect } from 'preact/hooks'
-import { prepareVM } from '~/src/common/if'
 
-const INITIAL_STATUS = {
-  level: 'loading',
-  details: 'Loading...'
-}
+import UrlPlayer from '~/src/components/player/UrlPlayer'
 
 export default function ({setTheme, theme, encodedUrl}) {
   const [url] = useState(decodeURIComponent(encodedUrl))
-  const [status, setStatus] = useState(INITIAL_STATUS)
-
-  const [vm, setVM] = useState(null)
 
   useEffect(() => setTheme(theme), [theme])
-  useEffect(prepareVM({
-    url,
-    setStatus,
-    setVM
-  }), [url])
 
-  useEffect(() => {
-    if (vm) console.log('success', vm)
-  }, [vm])
   return (
     <main>
-      {status.details}
+      <UrlPlayer url={url} />
     </main>)
 }