Show market list

server/router/handler/index.go

@@ -26,3 +26,16 @@ func HandleIndex(sc context.ServerContext) echo.HandlerFunc {
 		return sc.Render(c, http.StatusOK, "index.html", data)
 	}
 }
+
+func HandleMarkets(sc context.ServerContext) echo.HandlerFunc {
+	return func(c echo.Context) error {
+		var (
+			markets []db.Market
+			err     error
+		)
+		if err = sc.Db.FetchActiveMarkets(&markets); err != nil {
+			return err
+		}
+		return c.JSON(http.StatusOK, markets)
+	}
+}

server/router/router.go

@@ -24,7 +24,6 @@ func mountMiddleware(e *echo.Echo, sc ServerContext) {
 }
 
 func addFrontendRoutes(e *echo.Echo, sc ServerContext) {
-	GET(e, sc, "/", handler.HandleIndex)
 	GET(e, sc, "/user",
 		handler.HandleUser,
 		middleware.SessionGuard)
@@ -41,6 +40,7 @@ func addFrontendRoutes(e *echo.Echo, sc ServerContext) {
 }
 
 func addBackendRoutes(e *echo.Echo, sc ServerContext) {
+	GET(e, sc, "/api/markets", handler.HandleMarkets)
 	GET(e, sc, "/api/login", handler.HandleLogin)
 	GET(e, sc, "/api/login/callback", handler.HandleLoginCallback)
 	POST(e, sc, "/api/logout", handler.HandleLogout)

vue/src/components/MarketList.vue

@@ -0,0 +1,29 @@
+<template>
+  <ul>
+    <li class="my-3" v-for="market in markets" :key="market.Id">
+      <router-link :to="'/market/' + market.Id">{{ market.Description }}</router-link>
+    </li>
+    <button>+ create market</button>
+  </ul>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const markets = ref([])
+
+const url = window.origin + '/api/markets'
+
+// TODO only load markets once per session
+await fetch(url).then(async r => {
+  const body = await r.json()
+  markets.value = body
+})
+
+</script>
+
+<style scoped>
+a {
+  padding: 0 1em;
+}
+</style>

vue/src/components/NavBar.vue

@@ -20,21 +20,6 @@ nav {
   justify-content: center;
 }
 
-a {
-  color: #8787a4;
-  text-decoration: underline;
-}
-
-a:hover {
-  color: #ffffff;
-  background: #8787A4;
-}
-
-a.selected {
-  color: #ffffff;
-  background: #8787A4;
-}
-
 nav>a {
   margin: 0 3px;
 }

vue/src/index.css

@@ -11,4 +11,19 @@ button {
 button:hover {
   color: #ffffff;
   background: #8787A4;
-}
+}
+
+a {
+  color: #8787a4;
+  text-decoration: underline;
+}
+
+a:hover {
+  color: #ffffff;
+  background: #8787A4;
+}
+
+a.selected {
+  color: #ffffff;
+  background: #8787A4;
+}

vue/src/views/MarketView.vue

@@ -11,6 +11,11 @@
 
   </div>
   <!-- eslint-enable -->
+  <Suspense>
+    <MarketList />
+  </Suspense>
 </template>
 
-<script></script>
+<script setup>
+import MarketList from '@/components/MarketList'
+</script>