From 3841606684ee3d233266ad490905076a3562842c Mon Sep 17 00:00:00 2001
From: Ben Beltran <ben@nsovocal.com>
Date: Sun, 22 Mar 2020 11:53:13 -0600
Subject: Remove server

---
 app/components/post/post.svelte               |  4 ----
 app/components/topic/topic.svelte             |  8 ++------
 app/components/topic_index/topic_index.svelte |  1 -
 app/config/config.js                          |  8 ++++++++
 app/config/env.dist                           |  1 +
 app/forum.svelte                              | 10 +++++++++-
 app/socket_coordinator.js                     | 23 +++++++++++++++++++++++
 app/stores/forums.js                          | 20 +++++++-------------
 8 files changed, 50 insertions(+), 25 deletions(-)
 create mode 100644 app/config/config.js
 create mode 100644 app/config/env.dist
 create mode 100644 app/socket_coordinator.js

(limited to 'app')

diff --git a/app/components/post/post.svelte b/app/components/post/post.svelte
index 429dfd6..fad7628 100644
--- a/app/components/post/post.svelte
+++ b/app/components/post/post.svelte
@@ -19,10 +19,6 @@
 <hr/>
 
 <style>
-  article, hr, aside {
-    grid-column: col-start 2 / span 11;
-  }
-
   .post-meta > * {
     vertical-align: top;
   }
diff --git a/app/components/topic/topic.svelte b/app/components/topic/topic.svelte
index c2462fd..4a55930 100644
--- a/app/components/topic/topic.svelte
+++ b/app/components/topic/topic.svelte
@@ -2,7 +2,7 @@
   import Glyph from '../glyph/glyph.svelte';
 </script>
 
-<main class="h-entry" title="Topic">
+<div class="h-entry" title="Topic">
   <h1 class="p-name">This is a post in the forum.</h1>
   <aside class="topic-meta" title="Topic metadata">
     <span class="topic-location">Posted on <a href="/f/interaction"
@@ -48,13 +48,9 @@
     <p>It's just how it is...</p>
   </article>
   <hr/>
-</main>
+</div>
 
 <style>
-  main {
-    grid-column: col-start 2 / span 11;
-  }
-
   .post-meta > * {
     vertical-align: top;
   }
diff --git a/app/components/topic_index/topic_index.svelte b/app/components/topic_index/topic_index.svelte
index 699550e..ea748a6 100644
--- a/app/components/topic_index/topic_index.svelte
+++ b/app/components/topic_index/topic_index.svelte
@@ -4,4 +4,3 @@
 
 <h1>Topic Index.</h1>
 <p>This component lists topics for category or tag with id: {params.id}</p>
-
diff --git a/app/config/config.js b/app/config/config.js
new file mode 100644
index 0000000..c915f70
--- /dev/null
+++ b/app/config/config.js
@@ -0,0 +1,8 @@
+/*
+ * The main configuration object for the Forum frontend. These values
+ * are calculated during compile time and need to be set in a .env
+ * file, otherwise it won't work.
+ */
+
+// Location of the socket server
+export const socketServer = process.env.FORUM_SOCKET_SERVER;
diff --git a/app/config/env.dist b/app/config/env.dist
new file mode 100644
index 0000000..0bcd782
--- /dev/null
+++ b/app/config/env.dist
@@ -0,0 +1 @@
+FORUM_SOCKET_SERVER=ws://location_of_socket_server
diff --git a/app/forum.svelte b/app/forum.svelte
index bb2513d..85c6d12 100644
--- a/app/forum.svelte
+++ b/app/forum.svelte
@@ -43,5 +43,13 @@
 </script>
 
 <Header />
-<svelte:component this={ page } params={ params } />
+<main>
+  <svelte:component this={ page } params={ params } />
+</main>
 <ForumList />
+
+<style>
+  main {
+    grid-column: col-start 2 / span 11;
+  }
+</style>
diff --git a/app/socket_coordinator.js b/app/socket_coordinator.js
new file mode 100644
index 0000000..d6768ac
--- /dev/null
+++ b/app/socket_coordinator.js
@@ -0,0 +1,23 @@
+import { socketServer } from './config/config';
+
+const internals = {
+
+  socket: null, // stores the socket connection
+
+  connect() {
+
+    internals.socket = new WebSocket(socketServer);
+  }
+};
+
+export const onMessage = function (listener) {
+
+  if (!internals.socket) {
+    internals.connect();
+  }
+
+  internals.socket.addEventListener('message', (message) => {
+
+    listener(JSON.parse(message.data));
+  });
+};
diff --git a/app/stores/forums.js b/app/stores/forums.js
index c473124..1928783 100644
--- a/app/stores/forums.js
+++ b/app/stores/forums.js
@@ -1,4 +1,5 @@
-import { writable } from 'svelte/store';
+import { readable } from 'svelte/store';
+import { onMessage } from '../socket_coordinator';
 
 const internals = {};
 
@@ -70,17 +71,10 @@ internals.forums = [
   }
 ];
 
-export const forums = writable(internals.forums);
+export const forums = readable(internals.forums, (set) => {
 
-export const addForum = function addForum() {
+  onMessage((message) => {
 
-  const id = Math.random();
-
-  forums.update((originalForums) => ([...originalForums,
-    {
-      id,
-      glyph: 'の',
-      label: `Woah ${id}`
-    }
-  ]));
-};
+    console.log(message, typeof message);
+  });
+});
-- 
cgit