From 85784461f89fa4134a22ff338227aed8b4d13088 Mon Sep 17 00:00:00 2001
From: crusader <crusader@loafle.com>
Date: Tue, 4 Jul 2017 20:07:48 +0900
Subject: [PATCH] WebSocket client

---
 src/ts/@overflow/app/redux/saga/client.ts |  56 ++++++
 src/ts/@overflow/app/router/index.tsx     | 229 +++++++++++-----------
 2 files changed, 173 insertions(+), 112 deletions(-)
 create mode 100644 src/ts/@overflow/app/redux/saga/client.ts

diff --git a/src/ts/@overflow/app/redux/saga/client.ts b/src/ts/@overflow/app/redux/saga/client.ts
new file mode 100644
index 0000000..3cb5c12
--- /dev/null
+++ b/src/ts/@overflow/app/redux/saga/client.ts
@@ -0,0 +1,56 @@
+import { Channel, eventChannel, SagaIterator } from 'redux-saga';
+import { call, Effect, fork, put, takeEvery } from 'redux-saga/effects';
+
+function connect(): Promise<WebSocket> {
+  return new Promise<WebSocket>(resolve => {
+    const socket = new WebSocket('ws://localhost:3000');
+
+    socket.onopen = ((evt: Event): void => {
+      resolve(socket);
+    });
+
+    socket.onclose = ((evt: Event): void => {
+      console.log('');
+    });
+
+    socket.onmessage = ((evt: MessageEvent): void => {
+      console.log('');
+    });
+
+    socket.onerror = ((evt: MessageEvent): void => {
+      console.log('');
+    });
+  });
+}
+
+function subscribe(socket: WebSocket): Channel<string> {
+  return eventChannel<string>(emitter => {
+    socket.onmessage = ((evt: MessageEvent): void => {
+      emitter(evt.data);
+    });
+
+    return function unsubscribe(): void {
+      console.log('');
+    };
+  });
+}
+
+function* read(socket: WebSocket): SagaIterator {
+  const channel = yield call(subscribe, socket);
+  let action = yield takeEvery(channel, (action: A) => any);
+  while (true) {
+    let action = yield take(channel);
+    yield put(action);
+  }
+}
+
+function* write(socket: WebSocket): SagaIterator {
+  while (true) {
+    const { payload } = yield take(`${sendMessage}`);
+    socket.emit('message', payload);
+  }
+}
+
+function* flow(): SagaIterator {
+  const socket = yield call(connect);
+}
diff --git a/src/ts/@overflow/app/router/index.tsx b/src/ts/@overflow/app/router/index.tsx
index e5afd67..06d23d8 100644
--- a/src/ts/@overflow/app/router/index.tsx
+++ b/src/ts/@overflow/app/router/index.tsx
@@ -14,115 +14,120 @@ const routes = (
 
 export default routes;
 
-const _routes = [
-  {
-    path: '/signin',
-    component: Signin,
-  },
-  {
-    path: '/signup',
-    component: Signup,
-  },
-  {
-    path: '/forgot_password',
-    component: ForgotPassword,
-  },
-  {
-    path: '/email_confirm',
-    component: EmailConfirm,
-  },
-  {
-    path: '/',
-    component: Home,
-    routes: [
-      {
-        path: '/monitoring',
-        component: Monitoring,
-        routes: [
-            {
-                path: '/probe',
-                component: Probe,
-                routes: [
-                    {
-                        path: '/list',
-                        component: Probe,
-                    },
-                    {
-                        path: '/noauth',
-                        component: NoAuthProbe,
-                    },
-                    {
-                        path: '/setup',
-                        component: ProbeSetup,
-                    },
-                ],
-            },
-            {
-                path: '/sensor',
-                component: Sensor,
-            },
-        ],
-      },
-      {
-        path: '/infrastructure',
-        component: ,
-        routes: [
-            {
-                path: '/maps',
-                component: InfrastructureMaps,
-            },
-            {
-                path: '/targets',
-                component: Targets,
-            },
-        ],
-      },
-      {
-        path: '/dashboard',
-        component: Dashboard,
-      },
-      {
-        path: '/metrics',
-        component: Metrics,
-      },
-      {
-        path: '/alerts',
-        component: Alerts,
-      },
-      {
-        path: '/history',
-        component: History,
-      },
-      {
-        path: '/settings',
-        component: Settings,
-      },
-      {
-        path: '/notifications',
-        component: Notifications,
-      },
-      {
-        path: '/account',
-        component: ,
-        routes: [
-            {
-                path: '/signout',
-                component: Signout,
-            },
-            {
-                path: '/profile',
-                component: Profile,
-            },
-            {
-                path: '/preferences',
-                component: Preferences,
-            },
-            {
-                path: '/help',
-                component: Help,
-            },
-        ],
-      },
-    ],
-  },
-];
+// const _routes = [
+//   {
+//     path: '/signin',
+//     exact: true,
+//     component: Signin,
+//   },
+//   {
+//     path: '/signup',
+//     exact: true,
+//     component: Signup,
+//   },
+//   {
+//     path: '/forgot_password',
+//     exact: true,
+//     component: ForgotPassword,
+//   },
+//   {
+//     path: '/email_confirm',
+//     exact: true,
+//     component: EmailConfirm,
+//   },
+//   {
+//     path: '/',
+//     exact: true,
+//     component: Home,
+//     routes: [
+//       {
+//         path: '/monitoring',
+//         component: Monitoring,
+//         routes: [
+//             {
+//                 path: '/probe',
+//                 component: Probe,
+//                 routes: [
+//                     {
+//                         path: '/list',
+//                         component: Probe,
+//                     },
+//                     {
+//                         path: '/noauth',
+//                         component: NoAuthProbe,
+//                     },
+//                     {
+//                         path: '/setup',
+//                         component: ProbeSetup,
+//                     },
+//                 ],
+//             },
+//             {
+//                 path: '/sensor',
+//                 component: Sensor,
+//             },
+//         ],
+//       },
+//       {
+//         path: '/infrastructure',
+//         component: ,
+//         routes: [
+//             {
+//                 path: '/maps',
+//                 component: InfrastructureMaps,
+//             },
+//             {
+//                 path: '/targets',
+//                 component: Targets,
+//             },
+//         ],
+//       },
+//       {
+//         path: '/dashboard',
+//         component: Dashboard,
+//       },
+//       {
+//         path: '/metrics',
+//         component: Metrics,
+//       },
+//       {
+//         path: '/alerts',
+//         component: Alerts,
+//       },
+//       {
+//         path: '/history',
+//         component: History,
+//       },
+//       {
+//         path: '/settings',
+//         component: Settings,
+//       },
+//       {
+//         path: '/notifications',
+//         component: Notifications,
+//       },
+//       {
+//         path: '/account',
+//         component: ,
+//         routes: [
+//             {
+//                 path: '/signout',
+//                 component: Signout,
+//             },
+//             {
+//                 path: '/profile',
+//                 component: Profile,
+//             },
+//             {
+//                 path: '/preferences',
+//                 component: Preferences,
+//             },
+//             {
+//                 path: '/help',
+//                 component: Help,
+//             },
+//         ],
+//       },
+//     ],
+//   },
+// ];