From 8d5aad5744e0b40a6de887cb680e2fa8c1aabb3a Mon Sep 17 00:00:00 2001
From: ekzyis <ekzyis@ekzyis.com>
Date: Wed, 8 Nov 2023 23:31:25 +0100
Subject: [PATCH] Create MarketForm component

---
 vue/src/components/MarketForm.vue | 28 ++++++++++++++++++++++++++++
 vue/src/components/MarketList.vue | 25 +++----------------------
 2 files changed, 31 insertions(+), 22 deletions(-)
 create mode 100644 vue/src/components/MarketForm.vue

diff --git a/vue/src/components/MarketForm.vue b/vue/src/components/MarketForm.vue
new file mode 100644
index 0000000..4b5d9a3
--- /dev/null
+++ b/vue/src/components/MarketForm.vue
@@ -0,0 +1,28 @@
+<template>
+  <form ref="form" class="mx-auto text-left" method="post" action="/api/market" @submit.prevent="submitForm">
+    <label class="mx-1" for="desc">description</label>
+    <input v-model="description" class="mx-1" id="desc" name="desc" type="text" placeholder="event description">
+    <button class="mx-1" type="submit">submit</button>
+  </form>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const form = ref(null)
+const description = ref(null)
+
+const submitForm = async () => {
+  const url = window.origin + '/api/market'
+  const body = JSON.stringify({ description: description.value })
+  await fetch(url, { method: 'post', body })
+}
+
+</script>
+
+<style scoped>
+input {
+  padding: 0 0.3em;
+  color: #000;
+}
+</style>
diff --git a/vue/src/components/MarketList.vue b/vue/src/components/MarketList.vue
index 76a9a56..6202e67 100644
--- a/vue/src/components/MarketList.vue
+++ b/vue/src/components/MarketList.vue
@@ -5,22 +5,16 @@
     </li>
   </ul>
   <button v-if="!showForm" @click.prevent="toggleForm">+ create market</button>
-  <div class="flex flex-col justify-center" v-else>
-    <div class="my-1 text-center">+ create market</div>
-    <form ref="form" class="mx-auto text-left" method="post" action="/api/market" @submit.prevent="submitForm">
-      <label class="mx-1" for="desc">description</label>
-      <input v-model="description" class="mx-1" id="desc" name="desc" type="text">
-      <button class="mx-1" type="submit">submit</button>
-    </form>
+  <div v-else class="flex flex-col justify-center">
+    <MarketForm />
   </div>
 </template>
 
 <script setup>
+import MarketForm from './MarketForm'
 import { ref } from 'vue'
 
 const markets = ref([])
-const form = ref(null)
-const description = ref(null)
 const showForm = ref(false)
 
 // TODO only load markets once per session
@@ -31,25 +25,12 @@ await fetch(url).then(async r => {
 })
 
 const toggleForm = () => {
-  description.value = null
   showForm.value = !showForm.value
 }
 
-const submitForm = async () => {
-  const url = window.origin + '/api/market'
-  const body = JSON.stringify({ description: description.value })
-  await fetch(url, { method: 'post', body })
-  toggleForm()
-}
-
 </script>
 
 <style scoped>
-input {
-  padding: 0 0.3em;
-  color: #000;
-}
-
 a {
   padding: 0 1em;
 }